JavaScript（上）
1.JavaScript概述
JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎
脚本语言：不需要编译，就可以被浏览器直接解析执行了
核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验
开发环境搭建
Node.js：JavaScript运行环境
VSCode：编写前端技术的开发工具
2.js的引入方式
方式1.在body结束标签后添加script标签
方式2.创建js文件js/my.js
例：
my.js：
document.getElementById("btn").onclick=function (){
alert("点我干嘛");
}html：
Title
两种方式作用是一样的，在开发中使用外部方式
3.基本语法
1.注释
// 注释的内容
/*
注释的内容
注释的内容
*/
2.输入输出语句
输入框 prompt(“提示内容”);
prompt： [prɒmpt] 提示，可以输入的提示框
弹出警告框 alert(“提示内容”);
alert：警告，弹出警告框
控制台输出 console.log(“显示内容”);
页面内容输出 document.write(“显示内容”);
document：文档，页面
例：
Document
3.变量和常量
JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型
定义全局变量 ：let 变量名= 值；
定义局部变量：变量名= 值；
定义常量：const 常量名= 值；
例：
Document
4.原始数据类型和typeof
原始数据类型
| 数据类型 | 说明 |
|---|---|
| boolean | 布尔类型，true或false |
| null | 声明null值的特殊关键字 |
| undefined | 代表变量未定义 |
| number | 整数或浮点数 |
| string | 字符串 |
| bigint | 大整数，例如：let num = 10n; |
typeof 用于判断变量的数据类型
let age = 18;
document.write(typeof(age)); // number
注：undefined是代表 变量的值未定义（定义变量没给值）
5.运算符
算术运算符
| 运算符 | 说明 |
|---|---|
| + | 加法运算 |
| - | 减法运算 |
| * | 乘法运算 |
| / | 除法运算 |
| % | 取余数 |
| ++ | 自增 |
| – | 自减 |
赋值运算符
| 运算符 | 说明 |
|---|---|
| = | 将等号右边的值赋值给等号左边的变量 |
| += | 相加后赋值 |
| -= | 相减后赋值 |
| *= | 相乘后赋值 |
| /= | 相除后赋值 |
| %= | 取余数后赋值 |
比较运算符 （与java有区别）
| 运算符 | 说明 |
|---|---|
| == | 判断值是否相等 |
| === | 判断数据类型和值是否相等 |
| > | 大于 |
| >= | 大于等于 |
| < | 小于 |
| <= | 小于等于 |
| != | 不等于 |
逻辑运算符
| 运算符 | 说明 |
|---|---|
| && | 逻辑与，并且的功能 |
| || | 逻辑或，或者的功能 |
| ！ | 取反 |
三元运算符
三元运算符格式
(比较表达式) ? 表达式1 : 表达式2;
执行流程
如果比较表达式为true，则取表达式1
如果比较表达式为false，则取表达式2
注：字符串类型数字进行运算，会自动转换类型
let num="10";
document.write(num+5+"
"); //105
document.write(num+"5"+"
"); //105
document.write(num-5+"
"); //5
document.write(num*5+"
"); //50
//字符串类型数字进行运算，会自动转换类型 6.流程控制和循环语句
if 语句
switch 语句
for循环
while 循环
例：
Document
7.数组
数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制
定义格式：
let 数组名=[元素1，元素2，元素3...];
索引范围
从 0 开始，最大到数组长度-1
数组长度
数组名.length
数组高级运算符：
...（拆包/扩展运算符）
数组复制
合并数组
字符串转数组
数组
8.函数
函数类似于 java 中的方法，可以将一些代码进行抽取，达到复用的效果
定义格式：
function 方法名(参数列表) {
方法体;
return 返回值;
}
可变参数：
function 方法名(…参数名) {
方法体;
return 返回值;
}
匿名函数：
function(参数列表) {
方法体;
}
例：
函数
4.JavaScript DOM
1.DOM概述
DOM(Document Object Model)：文档对象模型
将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作
2.Element元素的获取操作
| 方法名 | 说明 |
|---|---|
| getElementById(id属性值) | 根据id获得一个元素 |
| getElementsByTagName(标签名称) | 根据标签名称获得多个元素 |
| getElementsByName(name属性值) | 根据name属性获得多个元素 |
| getElementsByClassName(class属性值) | 根据class属性获得多个元素 |
| 子元素对象.parentElement属性 | 获取当前元素的父元素 |
例：
元素的获取
div1
div2
div3
div4
3.Element元素的增删改操作
| 方法名 | 说明 |
|---|---|
| createElement(标签名) | 创建一个新元素 |
| appendChild(子元素) | 将指定子元素添加到父元素中 |
| remove(子元素) | 用父元素删除指定子元素 |
| replaceChild(新元素,旧元素) | 用新元素替换子元素 |
例：
元素的增删改
4.Attribute属性的操作
| 方法名 | 说明 |
|---|---|
| setAttribute(属性名,属性值) | 设置属性 |
| getAttribute(属性名) | 根据属性名获取属性值 |
| removeAttribute(属性名) | 根据属性名移除指定的属性 |
| style属性 | 为元素添加样式 |
属性的操作
点我呀
5.Text文本的操作
| 属性名 | 说明 |
|---|---|
| innerText | 添加文本内容，不解析标签 |
| innerHTML | 添加文本内容，解析标签 |
- innerText：内部文本，开始标签与结束标签中间的文本（只识别文本）
- innerHTML：内部标签（识别文本，识别标签）
例：
文本的操作
5.JavaScript 事件
1.事件的概述
事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行
常用事件
| 事件名 | 说明 |
|---|---|
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onclick | 鼠标单击事件 |
| ondblclick | 鼠标双击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onchange | 用户改变域的内容 |
了解的事件
| 事件名 | 说明 |
|---|---|
| onkeydown | 某个键盘的键被按下按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
| onmousedown | 某个鼠标按键被按下 |
| onmouseup | 某个鼠标按键被松开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
2.事件的操作
绑定事件
方法一
通过标签中的事件属性进行绑定
方法二
通过 DOM 元素属性绑定
document.getElementById("btn").onclick = 执行的功能
例：
事件
