2.基本说明https://www.w3school.com.cn/js/index.asp
1.Javascript 能改变 HTML 内容，能改变 HTML 属性，能改变 HTML 样式 (CSS)，能完成页面的数据验证
Title
Javascript 能做什么？
Javascript 能够改变 HTML 属性值。
在本例中，Javascript 改变了图像的 src 属性值。
2.JS 需要运行浏览器来解析执行 Javascript 代码。
3.JS 是 Netscape 网景公司的产品，最早取名为 Livescript，后更名为 Javascript。和 Java 没有关系
4.Javascript 简 写 JS
3.Javascript 特点!1.Javascript 是一种解释型的脚本语言，C、C++等语言先编译后执行，而 Javascript 是在程序的运行过程中逐行进行解释。
2.Javascript 是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象(有对象)。
3.Javascript 是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化。
js 弱类型.html
Javascript是弱类型的
4.跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）
4.Javascript 快速入门 1.使用方式 1:script 标签 写 JS 代码应用实例 1.js-use.html
script 标签中 写 JS 代码
2.使用方式 2: 使用 script 标签引入 JS 文件
Title
3.两种使用 js 的方式，不能混用
这里我用火狐测试只会弹出一次而谷歌会弹出两次，和浏览器的解析有关
Title
my.js
alert("hi guKong~");
5.查看 JS 错误信息
1.执行 JS，chrome 浏览器如何查看错误信息更多工具->开发者->console
2.执行 JS，ff 浏览器如何查看错误信息
web 开发者->web 开发者工具->控制台
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TgkglVj8-1648481550717)(https://cdn.jsdelivr.net/gh/RayLin24/imgs/imgs202203202124679.png)]
6.Javascript 变量1.Javascript 变量表示存储数据的容器
应用实例
Title
7.Javascript 数据类型
数据类型介绍
数值类型： number
字符串类型： string
对象类型: object
布尔类型： boolean
函数类型： function
特殊值
undefined 变量未赋初始值时，默认 undefined
null 空值
NaN Not a Number 非数值
数据类型-特殊值
数据类型注意事项
- String 字符串 [可以双引号括起来，也可以单引号括起来]“a book of Javascript”、‘abc’、 “a”、""
- 算术运算符用于执行变量与/或值之间的算术运算。y 等于 5，下面的表格解释了这些算术运算符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UU4FD4k2-1648481550719)(https://cdn.jsdelivr.net/gh/RayLin24/imgs/imgs202203212222599.png)]
2.赋值运算符1.赋值运算符用于给 Javascript 变量赋值。
2.给定 x=10 和 y=5，下面的表格解释了赋值运算符
1.关系(比较) 运算符在逻辑语句中使用，以测定变量或值是否相等。
2.给定 x=5，下面的表格解释了比较运算符
2.关系运算符注意事项1.等于： == 是简单的做字面值的比较
2.全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
3.应用实例: 创建 relationship-operator-关系运算符
关系运算符
4.逻辑运算符
1.逻辑运算符说明
1.逻辑运算符用于测定变量或值之间的逻辑。
2.给定 x=6 以及 y=3，下表解释了逻辑运算符
2.逻辑符运算注意事项和细节1.在 Javascript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
2.0 、null、 undefined、""(空串) 、NAN都认为是 false
3.&& 且运算，有两种情况 => (即 && 返回值是遵守短路与的机制)
4.|| 或运算, 有两种情况 => (即|| 返回值是遵守短路或的机制)
5.&& 运算 和 || 运算 有短路现象
逻辑运算符注意事项和使用细节
5.条件符运算
1.Javascript 还可以使用 类似 Java 的三元运算符
条件运算符
9.数组定义
数组定义
10.数组使用和遍历
数组使用和遍历
11.Javascript 函数快速入门
1.JS 函数介绍
一句话：函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码块
2.快速入门案例
函数快速入门
12.Javascript 函数定义方式
1.方式 1: function 关键字来定义函数
1.基本语法
2.应用实例
使用函数方式1
2.方式 2: 将函数赋给变量
1.基本语法
2.应用实例
使用函数的第二种方式
3.Javascript 函数注意事项和细节
1.JS 中函数的重载会覆盖掉上一次的定义
2.函数的 arguments 隐形参数（作用域在 function 函数内）
(1)隐形参数: 在 function 函数中不需要定义，可以直接用来获取所有参数的变量。
(2)隐形参数特别像 java 的可变参数一样。 public void fun( int … args )
(3)js 中的隐形参数跟 java 的可变参数一样。操作类似数组
应用实例
函数使用注意事项和细节
13.JS 自定义对象
1.自定义对象方式 1：Object 形式
1.对象的定义
var 对象名 = new Object(); // 对象实例（空对象）
对象名.属性名 = 值; // 定义一个属性
对象名.函数名 = function(){} // 定义一个函数
2.对象访问
对象名.属性 对象名.函数名();
- 应用实例
自定义对象
2.自定义对象方式 2：{} 形式
- 对象的定义
var 对象名 = {
属性名：值, // 定义属性
属性名：值, // 定义属性 , 注意有,号
函数名：function(){} // 定义函数
};
2.对象访问
对象名.属性 对象名.函数名();
3.应用实例
自定义对象方式2：{} 形式
14.事件
1.事件介绍
- 事件是电脑输入设备与页面进行交互的响应事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行js 事件文档地址: https://www.w3school.com.cn/js/js_events.asp
1.事件的注册（绑定）
事件注册(绑定)：当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册或事件绑定
2.静态注册事件
通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式叫静态注册
浏览器加载生成时就已经绑定的事件
3.动态注册事件(通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式叫动态注册
4.动态注册事件步骤1.获取标签<—>dom 对象
2.dom 对象.事件名 = fucntion(){}
5.onload 加载完成事件1.onload : 某个页面或图像被完成加载
2.应用实例
onload 加载完成事件
hello~
6.onclick 单击事件
1.鼠标点击某个对象出发
2.应用实例
onclick 单击事件
7.onblur 失去焦点事件
1.onblur：元素失去焦点
2.应用实例
Title
用户名：
昵称：
8.onchange失去焦点事件
1.onchange : 域的内容被改变
2.应用实例
onchange 内容发生改变事件
你当前工资水平：
你当前女友是谁：
9.onsubmit 表单提交事件
1.onsubmit : 注册按钮被点击, 提交表单(需求: 如果用户名或密码为空，不能提交表单， 正则表达式语法是通用)
2.应用案例
Title
注册用户1
注册用户2
10.练习
Title
注册用户
15.DOM
1.官方文档
2.DOM 介绍 1.基本介绍https://www.w3school.com.cn/js/js_htmldom.asp
1.DOM 全称是 document Object Model 文档对象模型
2.就是把文档中的标签，属性，文本，转换成为对象来管理
3.HTML DOMHTML DOM （文档对象模型）
1.当网页被加载时，浏览器会创建页面的文档对象模型（document Object Model）。
2.HTML DOM 树 对象[属性，方法/函数]
1.document 它管理了所有的 HTML 文档内容
2.document 它是一种树结构的文档。
3.有层级关系 在 dom 中把所有的标签 都 对象化 （得到这个 html 标签的<—>对象–> 操作）
4.通过 document 可以访问所有的标签对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cHfMojHd-1648481550729)(https://cdn.jsdelivr.net/gh/RayLin24/imgs/imgs202203261030209.png)]
文档地址: https://www.w3school.com.cn/js/js_htmldom_document.asp
3.应用实例-getElementById
Title
予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉
Click on the header to alert its value
myHeader.innerText
myHeader.innerHTML
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-otCfJW1V-1648481550729)(https://cdn.jsdelivr.net/gh/RayLin24/imgs/imgs202203261038963.png)]
4.应用实例-getElementsByName
getElementsByName 函数
你会的运动项目：
足球
台球
乒乓球
5.实用案例-getElementsByTagName
getElementsByTagName
6.实用案例
createElement
5.HTML DOM 节点
1.基本介绍
在 HTML DOM （文档对象模型）中，每个部分都是节点：
1)文档本身是文档节点
2)所有 HTML 元素是元素节点
3)所有 HTML 属性是属性节点
4)HTML 元素内的文本是文本节点
5)注释是注释节点
HTML DOM Element 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_all.asp
HTML DOM document 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_document.asp
3.节点常用方法1.通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
2.appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
1.childNodes 属性，获取当前节点的所有子节点
2.firstChild 属性，获取当前节点的第一个子节点
3.lastChild 属性，获取当前节点的最后一个子节点
4.parentNode 属性，获取当前节点的父节点
5.nextSibling 属性，获取当前节点的下一个节点 (后一个)
6.previousSibling 属性，获取当前节点的上一个节点 (前一个)
7.className 用于获取或设置标签的 class 属性值
8.innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
9.innerText 属性，表示获取/设置起始标签和结束标签中的文本
1.需求: 完成如功能(如图), 点击右侧的按钮，可以得到对应的节点.
2.代码实现
演示HTML DOM 相关方法
你会的运动项目：
足球
台球
乒乓球
你当前女友是谁：
你的编程语言?
- Java~~~
- PHP
- C++
- Python
个人介绍:
