21xrx.com
2025-06-29 23:50:31 Sunday
文章检索 我的文章 写文章
JavaScript学习笔记——掌握基本语法、DOM操作和事件监听
2023-06-14 21:09:47 深夜i     23     0
JavaScript 基本语法 DOM操作 事件监听

JavaScript学习笔记——掌握基本语法、DOM操作和事件监听

JavaScript是前端开发必备的技能之一,作为一名大学生,我也开始着手学习这门语言。在这个过程中,我掌握了JavaScript的基本语法、DOM操作和事件监听。接下来,将分享一些我的心得体会和一些代码案例。

1.掌握基本语法

JavaScript的基本语法包括变量、数据类型、输入输出、运算符等。在学习过程中我重点关注了变量和运算符。以下是一些相应的代码案例:

变量的定义和赋值:

var message; // message未定义,变量声明但没有初始化
message = "Hello World"; // "Hello World" 赋值给 message

变量的类型和数据类型:

var message = "Hello"; // 字符串
var age = 20;  // 整数
var income = 1500.50;  //小数

运算符:

var num1, num2;
num1 = 5;
num2 = 10var sum = num1 + num2;
var sub = num1 - num2;
var mul = num1 * num2;
var div = num2 / num1;

2.DOM操作

DOM(文档对象模型)是JavaScript操作HTML元素的一个重要概念。学习DOM操作后,我们可以通过JavaScript代码动态地修改网页。以下是一些相应的代码案例:

获取元素:

//通过标签名获取元素节点
var element = document.getElementsByTagName("h1");
//通过ID获取元素节点
var element = document.getElementById("message");
//通过ClassName获取元素节点
var elements = document.getElementsByClassName("paragraph");

修改元素:

//修改元素内容
element.innerHTML = "new message"//修改元素样式
element.style.color = "red";
element.style.fontWeight = "bold"

3.事件监听

通过事件监听,我们可以捕捉web页面中的许多事件,例如鼠标点击、键盘敲击、页面滚动等等。以下是一些相应的代码案例:

//鼠标单击事件监听
var element = document.getElementById("message");
element.addEventListener("click", function() {
  alert("元素被单击了!");
});
//键盘按下事件监听
document.addEventListener("keydown", function(event) {
  var keyCode = event.keyCode;
  alert("按键代码是: " + keyCode);
});
//页面滚动事件监听
window.addEventListener("scroll", function() {
  console.log("页面滚动了");
});

  
  

评论区