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

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

2023-06-14 21:09:47 深夜i -- --

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 = 10；
var 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("页面滚动了")；
});

上一篇: idea打包java可执行jar包

下一篇: C语言学习笔记——Ccon191课程介绍

评论区

()

相似文章