JavaScript 基础知识概述
1. JavaScript 介绍
JavaScript 是一种高级的、解释型的编程语言,它是一种基于对象的、事件驱动的语言,它允许开发者创建动态的网页。JavaScript 是一种脚本语言,它可以嵌入到 HTML 中,或者作为外部文件引入。JavaScript 是一种客户端脚本语言,它在浏览器中运行,用于控制网页的行为。
2. JavaScript 变量声明
在 JavaScript 中,变量用于存储数据值。JavaScript 中的变量是通过 var
、let
或 const
关键字声明的。
var
关键字用于声明一个变量,它的作用域是整个函数。let
关键字用于声明一个块级作用域的变量。const
关键字用于声明一个常量,它的值不能改变。
var name = "John"; // 使用 var 声明变量
let age = 30; // 使用 let 声明变量
const PI = 3.14; // 使用 const 声明常量
3. JavaScript 中的数据类型
JavaScript 中的数据类型主要有以下几种:
- Number:用于表示数字,包括整数和浮点数。
- String:用于表示文本。
- Boolean:用于表示真(true)或假(false)。
- Object:用于表示对象,可以包含属性和方法。
- Null:表示空值或不存在的对象。
- Undefined:表示未定义的变量。
- Symbol:表示唯一的标识符。
let num = 10; // Number
let str = "Hello"; // String
let isTrue = true; // Boolean
let obj = {name: "John", age: 30}; // Object
let nothing = null; // Null
let notDefined; // Undefined
let sym = Symbol("id"); // Symbol
4. JavaScript 中的运算符
JavaScript 提供了多种运算符,包括算术运算符、比较运算符、逻辑运算符、赋值运算符等。
- 算术运算符:用于执行数学运算,如
+
、-
、*
、/
、%
。 - 比较运算符:用于比较两个值,如
==
、!=
、>
、<
、>=
、<=
。 - 逻辑运算符:用于逻辑操作,如
&&
(与)、||
(或)、!
(非)。 - 赋值运算符:用于赋值,如
=
、+=
、-=
、*=
、/=
。
let x = 10;
let y = 20;// 算术运算符
let sum = x + y; // 30
let diff = x - y; // -10// 比较运算符
let isEqual = x == y; // false
let isGreater = x > y; // false// 逻辑运算符
let isTrue = true && false; // false// 赋值运算符
x += 5; // x 现在是 15
5. JavaScript 中的流程控制
JavaScript 提供了多种流程控制语句,包括 if
、else
、switch
、for
、while
和 do...while
。
- if…else:用于条件判断。
- switch:用于多条件判断。
- for:用于重复执行代码块。
- while:用于当条件为真时重复执行代码块。
- do…while:用于当条件为真时重复执行代码块,且至少执行一次。
// if...else
if (x > y) {console.log("x is greater than y");
} else {console.log("x is not greater than y");
}// switch
switch (x) {case 10:console.log("x is 10");break;case 20:console.log("x is 20");break;default:console.log("x is not 10 or 20");
}// for
for (let i = 0; i < 5; i++) {console.log(i);
}// while
let i = 0;
while (i < 5) {console.log(i);i++;
}// do...while
let j = 0;
do {console.log(j);j++;
} while (j < 5);
6. JavaScript 中的函数
函数是一段可以重复使用的代码,它可以接受输入参数,并返回一个值。JavaScript 中的函数可以通过 function
关键字声明。
function greet(name) {return "Hello, " + name;
}console.log(greet("John")); // 输出 "Hello, John"
7. JavaScript 中的匿名函数
匿名函数是没有名称的函数,它们通常用作函数表达式或作为函数的参数。
// 函数表达式
let greet = function(name) {return "Hello, " + name;
};console.log(greet("John")); // 输出 "Hello, John"// 作为函数参数
setTimeout(function() {console.log("This message is displayed after 2 seconds");
}, 2000);
14. DOM 元素操作 HTML
DOM(Document Object Model)是一个编程接口,用于 HTML 和 XML 文档。它提供了一个结构化的文档表示,并定义了一种方式使程序能够访问和改变文档的内容、结构和样式。
获取元素
可以通过多种方式获取 DOM 元素:
- 通过 ID:使用
document.getElementById()
方法。 - 通过标签名:使用
document.getElementsByTagName()
方法。 - 通过类名:使用
document.getElementsByClassName()
方法。 - 通过选择器:使用
document.querySelector()
或document.querySelectorAll()
方法。
// 通过 ID 获取元素
var elementById = document.getElementById("myId");// 通过标签名获取元素
var elementsByTagName = document.getElementsByTagName("p");// 通过类名获取元素
var elementsByClassName = document.getElementsByClassName("myClass");// 通过选择器获取元素
var elementBySelector = document.querySelector(".myClass");
var elementsBySelector = document.querySelectorAll(".myClass");
修改元素
可以通过 DOM 元素的属性和方法来修改元素的内容、属性和样式。
// 修改元素的文本内容
elementById.textContent = "New text content";// 修改元素的 HTML 内容
elementById.innerHTML = "<b>New HTML content</b>";// 修改元素的属性
elementById.setAttribute("class", "newClass");// 修改元素的样式
elementById.style.color = "blue";
15. DOM 相关元素
DOM 提供了一系列的元素和对象,用于表示文档的结构和内容。
- 节点(Node):文档中的所有内容都是节点,如元素、属性、文本等。
- 元素(Element):文档中的 HTML 标签。
- 属性(Attribute):元素的属性。
- 文本(Text):元素或属性中的文本内容。
// 获取元素节点
var elementNode = document.getElementById("myId");// 获取文本节点
var textNode = elementNode.firstChild;// 获取属性节点
var attributeNode = elementNode.getAttributeNode("class");
16. DOM 的创建与删除
可以通过 DOM 方法来创建和删除元素。
创建元素
// 创建新的 div 元素
var newDiv = document.createElement("div");// 设置新元素的文本内容
newDiv.textContent = "New div element";// 将新元素添加到 body 中
document.body.appendChild(newDiv);
删除元素
// 获取要删除的元素
var elementToRemove = document.getElementById("elementToRemove");// 删除元素
elementToRemove.parentNode.removeChild(elementToRemove);
通过以上介绍,我们可以看到 DOM 提供了一种结构化的方式来表示和操作 HTML 文档的内容、结构和样式。通过 DOM,开发者可以动态地创建、修改和删除文档的元素,从而实现复杂的网页交互和动态内容更新。
上面就是对java的介绍,内容较为全面,喜欢可以给个关注哦。