02.JavaWeb-JavaScript-Toy模板网

这篇具有很好参考价值的文章主要介绍了02.JavaWeb-JavaScript。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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()	将数组中的每个元素调用一个函数，返回一个新的数组，原数组不改变
map()	var newArr = arr.map(i => i*2)
forEach()	将数组中的每个元素执行提供的函数，直接改变原数组
forEach()	arr.forEach(i => i*2)
filter()	筛选所有元素，将满足条件的作为一个新的数组返回
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对象

表示事件对象，当用户与页面进行交互时（如点击、滚动、键盘输入等），浏览器会生成相应的事件对象，可以通过事件对象来获取触发事件的元素、事件类型、坐标等信息。文章来源地址https://www.toymoban.com/news/detail-469809.html

属性/方法	描述
使用时每个事件中的前面要加on，例如 onclick
click	当用户单击元素时发生此事件
dblclick	当用户双击元素时发生此事件
focus	在元素获得焦点时发生此事件
mousedown	当用户在元素上上按下鼠标按钮时，发生此事件
mouseenter	当指针移动到元素上时，发生此事件
mouseleave	当指针从元素上移出时，发生此事件
load	在对象已加载时，发生此事件
change	当改变元素的内容或选中的状态发生改变时，发生此事件
touchend	当手指从触摸屏上移开时，发生此事件
touchmove	当手指在屏幕上拖动时，发生此事件
button	返回触发鼠标事件时按下的鼠标按钮
buttons	返回触发鼠标事件时所有鼠标按钮的状态