本文介绍了JavaScript的基础知识，包括与Java的区别、ECMAScript、DOM和BOM的核心概念。详细讲解了变量、数据类型、函数、数组和对象的使用，以及如何与HTML结合。同时，阐述了JSON数据格式和BOM对象的功能，如window对象及其方法，以及DOM操作如元素获取和事件处理。
js是一个基于对象和事件驱动且安全的脚本语言，能为网页添加交互性和动态功能
1. JS与Java的区别
1.js是一个解释性编程语言，由浏览器直接解析；而Java是一个编译型的编程语言。
2.js是一个弱类型语言；而Java是一个强类型语言；
2. JS的组成
2.1ECMAScript（简称ES）
ECMAScript是JavaScript的核心语言标准，定义了JavaScript的基本语法、数据类型、操作符、函数等
2.2文档对象模型（Document Object Model，DOM）
DOM是一种用于访问和操作HTML和XML文档的编程接口。通过DOM，JavaScript可以实现对网页元素的动态修改、交互和事件处理等操作
2.3浏览器对象模型（Browser Object Model，BOM）
BOM提供了与浏览器窗口交互的接口，如浏览器窗口的打开、关闭、导航等操作，以及浏览器提供的其他功能，如定时器、对话框、本地存储等
2.4JavaScript库和框架
除了基础的语言特性和浏览器提供的功能外，JavaScript还可以借助第三方库和框架来扩展功能和简化开发。常见的JavaScript库和框架包括jQuery、React、Vue.js、Angular等
3. JS与HTML的结合方式
3.1使用script标签直接定义js代码
<script>
// 在这里编写JavaScript代码
</script>
3.2使用script引入外部的js文件
创建js文件，在文件中编写js代码
在指定的HTML页面中，使用script标签引入该js文件
<script src="js文件的路径"></script>
3.3事件绑定
<button onclick="myFunction()">点击我</button>
<script>
function myFunction() {
// 在这里编写JavaScript代码
}
</script>
4. ECMAScript基本语法
4.1变量声明
var name = 'John'; // 使用var声明变量
let age = 25; // 使用let声明变量
const PI = 3.14; // 使用const声明常量
4.2数据类型
-
基本数据类型（Primitive Data Types）：
- 字符串（String）：表示文本数据，使用单引号或双引号括起来。
- 数字（Number）：表示数值，包括整数和浮点数。
- 布尔值（Boolean）：表示逻辑值，只有两个可能的取值：
true（真）和false（假）。 - undefined：表示未定义的值，通常用于声明未赋值的变量。
- null：表示空值或没有对象的引用。
- Symbol：表示唯一的、不可修改的值，通常用于创建对象的唯一标识符。
-
引用数据类型（Reference Data Types）：
- 对象（Object）：表示复杂的数据结构，可以包含多个属性和方法。
- 数组（Array）：表示有序的数据集合，可以包含多个值。
- 函数（Function）：表示可执行的代码块，可被调用和重复使用。
var message = 'Hello'; // 字符串类型
var count = 10; // 数字类型
var isTrue = true; // 布尔类型
var numbers = [1, 2, 3]; // 数组类型
var person = { name: 'John', age: 25 }; // 对象类型
4.3运算符
其中注意==判断两边忽略类型的不同，===会考虑两边的类型
var sum = 2 + 3; // 加法运算
var result = (sum > 5) ? '大于5' : '小于等于5'; // 三元运算符
var isTrue = true && false; // 逻辑与运算
var a = 2;
var b = "2";
alert(a==b); //结果为true
alert(a===b); //结果为false
4.4分支语句与循环语句
注意：js中没有forEach但是有类似的for-in
if (condition) {
// 条件为真时执行的代码
} else {
// 条件为假时执行的代码
}
for (var i = 0; i < 5; i++) {
// 循环执行的代码
}
for(var i in arr){
//循环体
}4.5 JS数组
特点：
js数组元素类型可以任意
js数组长度可变
语法：
1. var 数组名 = [值1, ....]
2. var 数组名 = new Array(数组长度)
3. var 数组名 = new Array(值1, ...)
js数组也有length方法求数组长度，与Java一致
4.6 函数
js中定义函数的方式有三种
1. 使用function关键字创建
function 方法名(){
方法体
}2.匿名函数的定义
var 接收函数返回值的变量名 = function(){
方法体
}3. 使用Function对象创建
var 变量名 = new Function("i, j","var sum = i+j; return sum;")4.7 this 关键字
1.当this在全局作用域中使用时，它引用全局对象，通常是window对象
2.在函数内部，this关键字引用调用该函数的对象
3.在事件处理程序中，this通常引用触发事件的元素
<button onclick="deltr(this)">删除</button>其他如变量命名规则、注释、逻辑判断与循环、对象和方法与java的一致
另外JavaScript也有try-catch
5. JS中常用的方法
5.1全局方法
| setInterval(func, delay, arg1, arg2, ...) | 用于定时重复执行指定的代码块或函数(用来做动态效果) |
| setTimeout( function, millsecond, param1... ) | 在若干毫秒后调用函数（只执行一次） |
| clearInterval() | 上面两个都会返回一个他们的id，使用这个方法关闭计时器 |
5.2 js数组的常用方法：
(其中如length、concat、fill(填充数组)、indexOf、toString等与Java中的方法一致，不做列出)
| map() | 将数组中的每个元素调用一个函数，返回一个新的数组，原数组不改变 |
| var newArr = arr.map(i => i*2) | |
| forEach() | 将数组中的每个元素执行提供的函数，直接改变原数组 |
| arr.forEach(i => i*2) | |
| filter() | 筛选所有元素，将满足条件的作为一个新的数组返回 |
| var newArr = arr.filter(i => i >= 4) | |
| every() | 判断所有元素是否都满足条件，满足返回true，否则返回false |
| some() | 判断是否存在元素满足条件，存在返回true，否则返回false |
| reduce() | 所有元素调用有返回值的函数（如求和、乘积等），返回求得的值 |
| push() | 在数组的后面添加元素 |
| pop() | 删除数组最后一个元素 |
| shift() | 删除数组的第一个元素 |
| unshift() | 将一个或多个元素添加到数组的开头 |
| isArray | 判断一个对象是否是数组 |
| join() | 能将数组变的字符串返回，原数组不改变，比起toString，可以设置元素之间的分隔符 |
| splice(开始位置，删除的个数，元素) | 实现数组的增删改（这里的修改其实是删除再添加） var arr1 = arr.splice(2, 0 'haha') //表示在下标为2的位置增加一个haha var arr2 = arr.splice(2,3) //表示从下标为2的元素开始删除三个元素 var arr3 = arr.splice(2,1,'Lemon') //表示替换下标为2的元素为Lemon |
5.3字符串常用方法
| includes() | 查找字符串中是否包含指定的字符串 |
| search() | 查找字符串中指定的子字符串，并返回子字符串起始下标 |
| link() | 将字符串显示为超链接 |
5.4数字常用方法
| toFixed( digits ) | 将数字转换成指定小数位数的字符串 |
| parseInt( String ) | 将字符串转换为整数(无法解析非数字，只要没遇到数字便会返回NaN) |
| parseFloat( String ) | 将字符串转换为浮点数(同上) |
| Math.random() | 返回一个介于0（包含）到1（不包含）的数字 |
| Math.round( number ) | 将数字四舍五入到最近的整数 |
5.5对象常用方法
| Object.assign( target, source ) | 将一个或多个源对象的属性复制到目标对象 |
| hasOwnProperty( prop ) | 检查对象是否具有指定的属性 |
6.JSON（JavaScript Object Notation）
一种轻量级的数据交换格式，用于在不同的系统之间传输和存储数据
6.1 JSON的特点
| 1.数据格式简洁：JSON 使用简洁的键值对表示数据，易于阅读和编写 |
| 2.平台无关性：JSON 可以在不同的编程语言和平台之间进行数据交换和解析 |
| 3.可扩展性：JSON 支持嵌套结构，可以组合成复杂的数据对象 |
| 4.易于解析和生成：几乎所有编程语言都有用于解析和生成 JSON 数据的库和函数 |
6.2 JSON格式
JSON对象是键值对方式的无序集合
{
"name": "John",
"age": 30,
"isStudent": true,
"hobbies": ["reading", "swimming", "coding"],
"address": {
"street": "123 Main St",
"city": "New York"
},
"isNull": null
}
6.3 JSON在JavaScript中的应用
将JavaScript对象转换成JSON字符串
const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出: {"name":"John","age":30}
将JSON字符串转换成JavaScript对象
const jsonString = '{"name":"John","age":30}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 输出: John
console.log(obj.age); // 输出: 30
7.BOM对象（Browser Object Model）
提供了一组与浏览器窗口交互的对象和方法，用于操作浏览器窗口、页面导航、处理事件等
7.1 window对象
浏览器窗口是BOM 的顶层对象，可以用来访问其他 BOM 对象和全局属性、方法
| 属性/方法 | 作用 |
|---|---|
window.innerWidth | 获取浏览器窗口的内部宽度（不包括滚动条） |
window.innerHeight | 获取浏览器窗口的内部高度（不包括滚动条） |
window.outerWidth | 获取浏览器窗口的外部宽度（包括边框和滚动条） |
window.outerHeight | 获取浏览器窗口的外部高度（包括边框和滚动条） |
window.location | 获取或设置当前页面的 URL |
window.document | 获取表示当前文档的 Document 对象 |
window.alert() | 在浏览器中弹出一个警告框，显示指定的消息 |
window.prompt() | 在浏览器中弹出一个提示框，接受用户输入 |
window.confirm() | 在浏览器中弹出一个确认框，要求用户确认或取消 |
window.setTimeout() | 在指定的时间间隔后执行一次函数或代码 |
window.setInterval() | 以指定的时间间隔重复执行函数或代码 |
window.open() | 打开一个新的浏览器窗口或标签页 |
window.close() | 关闭当前浏览器窗口（只能关闭由 JavaScript 打开的窗口） |
window.scrollTo() | 滚动到指定的坐标或指定的元素位置 |
window.history | 访问浏览器的历史记录，可以在页面间进行前进和后退操作 |
window.navigator | 提供关于浏览器的信息，如浏览器类型、版本、操作系统等 |
window.localStorage | 提供在浏览器中存储数据的功能，数据会一直保留，直到被显式删除或清除缓存 |
window.sessionStorage | 提供在浏览器中存储会话数据的功能，数据仅在当前会话期间有效，关闭窗口后会被删除 |
7.1.1 location 对象
用于操作 URL 相关的信息
| 属性 | 描述 |
|---|---|
href | 获取或设置完整的 URL。 |
protocol | 获取或设置协议部分（如 "http:"、"https:"）。 |
host | 获取或设置主机部分（包括域名和端口号）。 |
hostname | 获取或设置主机名部分（不包括端口号）。 |
port | 获取或设置端口号部分。 |
pathname | 获取或设置路径部分（不包括域名和查询字符串）。 |
search | 获取或设置查询字符串部分（包括 "?" 字符）。 |
hash | 获取或设置 URL 的片段标识部分（包括 "#" 字符）。 |
origin | 获取当前页面的源（协议 + 主机 + 端口号）。 |
assign(url) | 加载指定的 URL。 |
replace(url) | 用指定的 URL 替换当前页面，无法回退。 |
reload() | 重新加载当前页面。 |
7.1.2 history对象
用于访问和操作浏览器的历史记录
| 属性/方法 | 描述 |
|---|---|
length | 返回历史记录中的页面数量。 |
back() | 加载历史记录中的上一页。 |
forward() | 加载历史记录中的下一页。 |
go(offset) | 加载历史记录中相对于当前页的偏移量的页面，负数表示向后，正数表示向前。 |
pushState(state, title, url) | 添加新的历史记录状态，并改变当前 URL。 |
replaceState(state, title, url) | 替换当前历史记录状态，并改变当前 URL。 |
8.DOM对象(Document Object Model)
用于表示和操作 HTML、XML 和 XHTML 文档的标准编程接口。
8.1 document对象
表示整个文档对象，可以通过它来访问和操作页面的内容，例如获取元素、创建新元素、修改样式等。
| 方法 | 作用 |
|---|---|
getElementById(id) | 通过元素的 id 获取单个元素 |
getElementsByTagName(tagName) | 通过标签名获取元素集合 |
getElementsByClassName(className) | 通过类名获取元素集合 |
getElementsByName(name) | 通过元素的 name 属性获取元素集合 |
| 这些获取元素的方法除了可以用document对象调用，还可以用父对象调用，表示查的是这个父对象的子节点 | |
createElement(tagName) | 创建一个新的元素 |
write() | 将 HTML 表达式或 JavaScript 代码写入文档 |
writeln() | 与write类似，但在每条语句后添加换行符 |
createTextNode(text) | 创建一个包含指定文本的文本节点 |
8.2 element对象
表示 HTML 元素对象，可以通过选择器或其他方式获取到具体的元素对象，然后通过操作元素对象来修改元素的内容、样式、属性等。
| 方法/属性 | 作用 |
|---|---|
appendChild(childNode) | 在元素的末尾添加一个子节点（用父元素调用） |
innerHTML | 获取或设置元素的 HTML 内容 |
removeChild(childNode) | 从元素中移除一个子节点（用父元素调用） |
| remove() | 从DOM中移除本元素 |
| insertBefore() | 在现有子节点之前插入新子节点。 |
| childElementCount() | 返回元素的子元素个数。 |
| parentNode | 返回元素的父节点 |
getAttribute(name) | 获取元素的指定属性值 |
setAttribute(name, value) | 设置元素的指定属性值 |
hasAttribute(name) | 检查元素是否具有指定的属性 |
removeAttribute(name) | 移除元素的指定属性 |
| 节点1.contains(节点2) | 判断节点1是否是节点2的父节点 |
| firstChild | 返回元素的第一个子节点 |
| firstElementChild | 返回元素的第一个子元素 |
| lastChild | 返回元素的最后一个子节点 |
| lastElementChild | 返回元素的最后一个子元素 |
| replaceChild() | 替换元素中的子节点 |
| cloneNode() | 克隆节点 |
8.3 Attribute对象
| 属性 | 描述 |
|---|---|
| name | 返回属性的名称 |
| value | 设置或返回属性的值 |
8.4 event对象
表示事件对象，当用户与页面进行交互时（如点击、滚动、键盘输入等），浏览器会生成相应的事件对象，可以通过事件对象来获取触发事件的元素、事件类型、坐标等信息。
| 属性/方法 | 描述 |
|---|---|
| 使用时每个事件中的前面要加on，例如 onclick | |
| click | 当用户单击元素时发生此事件 |
| dblclick | 当用户双击元素时发生此事件 |
| focus | 在元素获得焦点时发生此事件 |
| mousedown | 当用户在元素上上按下鼠标按钮时，发生此事件 |
| mouseenter | 当指针移动到元素上时，发生此事件 |
| mouseleave | 当指针从元素上移出时，发生此事件 |
| load | 在对象已加载时，发生此事件 |
| change | 当改变元素的内容或选中的状态发生改变时，发生此事件 |
| touchend | 当手指从触摸屏上移开时，发生此事件 |
| touchmove | 当手指在屏幕上拖动时，发生此事件 |
| button | 返回触发鼠标事件时按下的鼠标按钮 |
| buttons | 返回触发鼠标事件时所有鼠标按钮的状态 |
8.5表单提交
| action | 设置或返回表单中action属性的值（提交的位置） |
| method | 设置或返回表单中method属性的值（提交方式） |
扫一扫
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
