web前端开发-JS

什么是JavaScript

Web标准也称网页标准,由一系列的标准组成,大部分由W3C(World Wide Web Consortium,万维网联盟)负责制定。
三个组成部分:
- HTML:负责网页的结构(页面元素和内容)。
- CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。
- JavaScript:负责网页的行为(交互效果)。
JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言（不用编译直接运行）,是用来控制网页行为,实现页面的交互效果。
JavaScript 和 Java 是完全不同的语言,不论是概念还是设计。但是基础语法类似。
组成:
- ECMAScript:规定了JS基础语法核心知识,包括变量、数据类型、流程控制、函数、对象等。
  - ECMA:ECMA国际(前身为欧洲计算机制造商协会),制定了标准化的脚本程序设计语言 ECMAScript,这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的(ES2024是最新版本)。
- BOM:浏览器对象模型,用于操作浏览器本身,如:页面弹窗、地址栏操作、关闭窗口等。
- DOM:文档对象模型,用于操作HTML文档,如:改变标签内的内容、改变标签内字体样式等。

核心语法

引入方式

内部脚本:将JS代码定义在HTML页面中
- JavaScript代码必须位于标签之间
- 在HTML文档中,可以在任意地方,放置任意数量的

在这里插入图片描述

外部脚本:将 JS代码定义在外部 JS文件中,然后引入到HTML页面中，复用性更强

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title>
</head>
<body><script>// 弹出提示框,结尾分号可有可无// 内部脚本alert("hello JS");</script><!--  外部脚本--><script src="js/test.js"></script></body>
</html>

JS书写规范

结束符:每行结尾以分号结尾,结尾分号可有可无，最好要么全加要么不加

基础语法

变量：

JS中用 let 关键字来声明变量(弱类型语言,变量可以存放不同类型的值)。
变量名需要遵循如下规则:
- 只能用字母、数字、下划线(_)、美元符号($)组成,且数字不能开头
- 变量名严格区分大小写,如 name 和 Name 是不同的变量
- 不能使用关键字,如:let、var、if、for等

在这里插入图片描述

早期的js中，还可以使用var声明变量，但是不严谨，使用这个可以重复声明和全局作用域

常量：

JS中用 const 关键字来声明常量。
一旦声明,常量的值就不能改变(不可以重新赋值)。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-基础语法</title>
</head>
<body><script>// 什么变量，弱类型，不用申明变量类型let a = 1;a="HELLO"alert(a)//弹出框const PI=3.14;//pI =5.0;// 不报错,但没改变值console.log(PI);//输出到控制台，按f12，这时可以看到控制台报错（不能为常量赋值）document.write("hello world");//不常用，直接将内容输出到页面的body中</script></body>
</html>

数据类型：

弱类型的语言不代表没有类型，只是声明变量时不用声明

JavaScript的数据类型分为:基本数据类型和引用数据类型(对象)。
基本数据类型:
- number:数字(整数、小数、NaN(Not a Number)
NaN (Not a Number) 是一个特殊的数值，表示一个不是数字的数值。当执行数学运算但结果不是有效数字时就会出现NaN。例如：
- 试图将字符串转换为数字但失败时
- 执行无法得到数字结果的数学运算时（比如 0/0）
- 使用NaN进行任何数学运算，结果都会是NaN
有趣的是，尽管NaN表示"不是一个数字"，它在JavaScript中的数据类型仍然是number。
- boolean:布尔。true,false
- null:对象为空。JavaScript是大小写敏感的,因此null、Null、NULL是完全不同的
- undefined:当声明的变量未初始化时,该变量的默认值是 undefined
- string:字符串,单引号、双引号、反引号皆可,推荐使用单引号

● 使用 typeof 运算符可以获取数据类型:

在这里插入图片描述

模板字符串语法:
- ``(反引号,英文输入模式下按键盘的tab键上方波浪线~那个键)
- 内容拼接变量时,使用 ${} 包住变量

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js-数据类型</title>
</head>
<body><script>alert(typeof 1)alert(typeof "1")alert(typeof true)alert(typeof undefined)alert(typeof null)//objectalert(typeof NaN)let a;alert(typeof a)alert(typeof `javascript`)//2.模板字符串，简化字符串拼接let name = "小明"let age = 18alert(`${name}今年${age}岁`)</script></body>
</html>

函数：

介绍:函数(function)是被设计用来执行特定任务的代码块,方便程序的封装复用。
定义:JavaScript中的函数通过function关键字进行定义,语法为:
不指定返回值的类型和参数类型名

在这里插入图片描述

调用：函数名称（实际参数列表）

在这里插入图片描述

注意:

由于JS是弱类型语言,形参、返回值都不需要指定类型。在调用函数时,实参个数与形参个数可以不一致,但是建议一致。

匿名函数;

匿名函数是指一种没有名称的函数。可以通过两种方式定义：函数表达式和箭头函数

在这里插入图片描述

匿名函数定义后，可以通过变量名直接调用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-函数</title>
</head>
<body><script>//1具名函数function add(a,b){return a+b;}let c=add(1,2);console.log(c);let d=add(3,4,6);//只传入2个参数，所以只返回2个参数相加的结果console.log(d);let add1=function(a,b){return a+b;}console.log(add1(1,22));let add2=(a,b)=>a+b;console.log(add2(1,200));</script></body>
</html>

自定义对象：

定义格式：

在这里插入图片描述

调用格式：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-自定义对象</title>
</head>
<body><script>class Person{constructor(name,age){this.name = name;this.age = age;}say(){console.log(`我叫${this.name},今年${this.age}岁`);}}let p = new Person('张三',18);alert(p.name)let user={name:'张三',age:18,sing1:()=>{//箭头函数的this指向外部函数的this,不推荐console.log(`我叫${this.name},今年${this.age}岁`);},say:function(){console.log(`我叫${this.name},今年${this.age}岁`);},sing:function(){console.log(`我叫${this.name},今年${this.age}岁`);}}alert(user.name)alert(user.age)alert(user.say())</script>
</body>
</html>

Json

概念:JavaScript Object Notation,JavaScript对象标记法(JS对象标记法书写的文本)。
由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-自定义对象</title>
</head>
<body><script>let user={name:'张三',age:18,sing1:()=>{//箭头函数的this指向外部函数的this,不推荐console.log(`我叫${this.name},今年${this.age}岁`);},say:function(){console.log(`我叫${this.name},今年${this.age}岁`);},sing:function(){console.log(`我叫${this.name},今年${this.age}岁`);}}alert(JSON.stringify(user));let personJson='{"name":"heima","age":"18"}';//注意外面要单引号，里面name不用大括号，必须双引号alert(JSON.parse(personJson).name);</script>
</body>
</html>

DOM

概念:Document Object Model,文档对象模型。
- 将标记语言的各个组成部分封装为对应的对象:
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
JavaScript 通过DOM,就能够对HTML进行操作:
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式(CSS)
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素

在这里插入图片描述

DOM操作：

DOM操作核心思想:将网页中所有的元素当做对象来处理。(标签的所有属性在该对象上都可以找到)
操作步骤:
- 获取要操作的DOM元素对象
- 操作DOM对象的属性或方法(查文档或AI)
获取DOM对象
- 根据CSS选择器来获取DOM元素,获取匹配到的第一个元素:document.querySelector(‘选择器’)#sid .txt span
- 根据CSS选择器来获取DOM元素,获取匹配到的所有元素:document.querySelectorAll(‘选择器’)
  
  注意:得到的是一个NodeList节点集合,是一个伪数组(有长度、有索引的数组)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>
DOM</title>
</head>
<body><h1 id="title1">DOM</h1><h1>111111111111111</h1><h1>1111111222222</h1><script>//1.修改第一个h1标签的文本内容// let h1=document.querySelector('#title1');let h1=document.querySelector('h1');//获取第一个h1标签let hs=document.querySelectorAll('h1');//获取所有h1标签//w3shchool.com中DOM查对象h1.innerHTML='DOM修改文本内容';hs[0].innerHTML='DOM修改文本内容1231';</script></body>
</html>

事件监听

事件:HTML事件是发生在HTML元素上的“事情”。比如:
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听:JavaScript可以在事件触发时,就立即调用一个函数做出响应,也称为事件绑定或注册事件。
语法:事件源.addEventListener('事件类型’,事件触发执行的函数);
事件监听三要素
- 事件源:哪个dom元素触发了事件,要获取dom元素
- 事件类型:用什么方式触发,比如:鼠标单击 click
- 事件触发执行的函数:要做什么事

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件监听</title>
</head>
<body><input type="button" id="btn1" value="按钮1"><input type="button" id="btn2" value="按钮2"><script>//可以多次绑定同一事件，多次显示document.querySelector('#btn1').addEventListener('click',()=>{alert('btn1');})document.querySelector('#btn2').addEventListener('click',()=>{alert('btn2');})// onclick.早期的方式,多次绑定同一事件会覆盖之前的绑定document.querySelector('#btn1').onclick=()=>{alert('btn1');}</script></body>
</html>