1 JavaScript

Js: JavaScript
HTML
CSS

1.1 特点

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript是一种弱类型语言 它的解释器被称为JavaScript引擎，为浏览器的一部分: js是浏览器运行的， 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
跨平台特性：在绝大多数浏览器的支持下。

轻量级: html css js
重量级: Java C++
区分轻量级和重量级主要看语言的生态

弱类型: 类型限制不严格(字面意思)

1.2 怎么在HTML中导入JS

1.2.1 直接写在HTML页面内部

写在html页面内部, 用script标签包裹js代码

1.2.2 引入外部的js文件

用Script导入外部文件
以前: 要求写在head标签的里面
现在: 不这么要求

1.3 Var

JavaScript在声明时统一使用无类型（untyped）的“var”关键字
var来声明一个变量,这是一个固定的写法，是js的语法。
JavaScript并没有避开数据类型，它的数据类型是根据所赋值的类型来确定的。 JavaScript 对大小写敏感 变量名有命名规范： 只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字

ECMAScript 是 javascript的版本
ECMAScript 6 – > Es6
Es6: 2015 的js版本
Es6之前: 只有Var关键字
Es6之后: 新加了一些, let:用于局部作用域 const: 一旦定义不可修改

1.4 Js的类型

String var str=‘123s’;Number var x1=34.00; //使用小数点来写 var x2=34; //不使用小数点来写 在js中只要是个数，那么就是数值型的，无论整浮、无论大小、无论正负，都是number类型的 Boolean var x=true var y=false 数组 var cars=new Array(); cars[0]="Audi"; var cars=new Array("Audi","BMW","Volvo"); var cars=["Audi","BMW","Volvo"];对象 var person={    firstname:"Bill",     lastname:"Gates",    id:5566}; 获取参数 name=person.lastname; name=person["lastname"]; 添加参数并赋值 person.aaa = 'aaaa’ 

// 注意: 
var person={firstname:"Bill", lastname:"Gates", id:5566}; 
var b = person 
b.lastname = 'b' 
console.log(b)      // 结果: lastname为b 
console.log(person) // 结果: lastname为b 
//说明引用也适用

1.5 函数和事件

HTML: 主要特点, 通过标签的嵌套来描述页面的层级结构
CSS: 通过样式, 描述HTML标签所具有的不同显示效果
Js: 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

1.6 运算符

运算符 +,-,*,/,%,++,-- =, +=, -=, *=, /=, %= 注意: 加法: 20+10+'20’ 减法 ‘30’-‘10’

!=, > , <, >=, <=, ? 三元 && , ||, !

注意: == 值相等 === 值相等并且类型相等 !== 值不相等或类型不相等

1.7 分支/循环语句

If:
// 有些值在分支语句中, 是表现为假: 0, 空串, 空对象, null, NaN, false

1.7.1 For

在js中, 一般我们使用普通的for循环 (fori) 遍历数组
在js中, 一般我们使用foreach循环遍历对象

2 Js的核心对象

2.1 Number

toString() 以字符串返回数值
var ii = 123
console.log(typeof ii)
console.log(typeof ii.toString())
toFixed() 返回字符串值，它包含了指定位数小数的数字(四舍五入)：
var x = 9.6544;
x.toFixed(2); // 返回 9.65
toPrecision() 返回字符串值，它包含了指定长度的数字：
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
MAX_VALUE 返回 JavaScript 中的最大数字。
var x = Number.MAX_VALUE;
MIN_VALUE 返回 JavaScript 中的最小数字。
var x = Number.MIN_VALUE;
parseInt() 方法 允许空格。
只返回首个数字：
parseInt(“10”); // 返回 10
parseFloat() 方法。 允许空格。
只返回首个数字：
parseFloat(“10.33”); // 返回 10.33

2.2 String

length 属性返回字符串的长度
var txt = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
var sln = txt.length;
indexOf()方法返回字符串中指定文本首次出现的索引（位置）：
var str = “The full name of China is the People’s Republic of China.”;
var pos = str.indexOf(“China”);
var pos = str.indexOf(“China”, 28);
indexOf() 不存在返回 -1。

(比较有用) slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
var str = “Apple, Banana, Mango”;
var res = str.slice(7,13);//裁剪字符串中位置 7 到位置 13 的片段
split() 将字符串转换为数组
var txt = “a,b,c,d,e”; // 字符串
\txt.split(","); // 用逗号分隔
txt.split(" “); // 用空格分隔
txt.split(”|"); // 用竖线分隔 如果分隔符是 “”，被返回的数组将是间隔单个字符的数组：

2.3 Array

toString() 返回数组转换的数组值（逗号分隔）的字符串。
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
alert(fruits.toString()); //Banana,Orange,Apple,Mango
pop() 方法从数组中删除最后一个元素,返回删除的元素
fruits.pop(); // 从 fruits 删除最后一个元素（“Mango”）
var x = fruits.pop(); // x 的值是 “Mango”
push() 方法（在数组结尾处）
向数组添加一个新的元素,返回数组长度
fruits.push(“Kiwi”); // 向 fruits 添加一个新元素
splice() 方法可用于向数组添加新项, 返回([])
fruits.splice(2, 0, “Lemon”, “Kiwi”);
// 第一个参数:添加新元素的起始位置。第二个参数:定义应删除多少元素。
// 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组 fruits.sort(); // 对 fruits 中的元素进行排序 r
everse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组 fruits. reverse(); // 对 fruits 中的元素进行排序

2.4 Math

Math.ceil(x)返回大于等于x的最小整数
Math.floor(x)返回小于等于x的最大整数
Math.random() 返回 0 ~ 1 之间的随机数
Math.round(x) 把一个数四舍五入为最接近的整数。
Math.max(x,y,z,…,n) 返回最高值
Math.min(x,y,z,…,n) 返回最低值

我们讲了Js基础中的基础语法

Js高级语法
Es6语法

Js方向,

Js: 现在不要瞎搞
后端开发 --> node
前端 --> vue, react, Angular
手机app --> flutter week reactnative
Pc --> electron
小程序 --> 原生开发, uni-app多端开发

3 DOM

DOM: js一个分支

文档对象模型(document object model )。
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：DOM Tree

3.1 Dom的概念

dom树中的节点彼此拥有层级关系(由节点构成)
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点 注释是注释节点
在节点树中，顶端节点被称为根（root） 每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点 父、子 和同胞(兄弟或姐妹）节点。
同胞是拥有相同父节点的结点

3.2 DOM的解析顺序:

1, 一个页面是怎么获得的?
A, 浏览器根据url(超链接/ 手输/ form表单)发起请求, 域名–>ip
B, 根据这个ip找到对应服务器, (80 443)
C, 服务器接收请求, 分析请求, 获取数据(数据库), 找到对应的前端文件,
把数据整理, 把整理好的数据放到前端文件里面 --> 带数据的前端文件(html css js相关代码)
D, 服务器把带数据的页面, 返回给浏览器
E, 浏览器拿到页面代码 , 解析

如果浏览器拿到一份HTML代码, 解析过程如下
解析HTML结构(从上向下的过程)。 开始构造HTML DOM模型
在解析的过程中(代码一句一句读取), 加载外部脚本和样式表文件。(因为这个html页面可能依赖于外部的js,css 文件, 异步发网络请求获取这个外部文件)
加载外部脚本成功, 解析并执行脚本代码。
构造HTML DOM模型—完成。 --> 只要dom模型构建完成, 页面就开始显示了

加载图片等外部文件。 页面加载完毕。

3.3 获得Dom上的节点

getElementById()
getElementsByName()
getElementsByTagName() // 通过标签名来获得节点

3.4 给Dom添加结点:

appendChild

<body>
<ul id="ul1"><li>John</li><li>Aray</li><li>Sansa</li>
</ul><input id="inputStr"><button onclick="addli()">点击</button><script>function addli() {var inputNode = document.getElementById("inputStr");var ulNode = document.getElementById("ul1");var textNode = document.createTextNode(inputNode.value)var liNode = document.createElement("li")liNode.append(textNode)ulNode.append(liNode)inputNode.value = ""}</script></body>

3.5 删除结点

removeChild

<body>
<!-- 在html中 连续的空格和换行 都代表一个空格 -->
<ul id="ul1"><li>John</li><li>Aray</li><li>Sansa</li>
</ul><input id="inputStr">
<button onclick="deleteli()">点击</button><script>function deleteli() {var inputNode = document.getElementById("inputStr")var index = inputNode.value // 要删除节点的下标console.log(index)var ulNode = document.getElementById("ul1")// 获得所有的ulNode的孩子var childNode = ulNode.childNodes;ulNode.removeChild(childNode[index-1])}
</script></body>

3.6 替换节点

replaceChild

<body>
<ul id="ul1"><li>John</li><li>Aray</li><li>Sansa</li>
</ul><input id="inputTag">
<input id="inputStr">
<button onclick="changeNode()">点击</button>
<script>function changeNode() {var inputNode1 = document.getElementById("inputTag")var index = inputNode1.valuevar inputNode2 = document.getElementById("inputStr")var content = inputNode2.valueif (!parseInt(index)){alert("非数字下标")return}var ulNode = document.getElementById("ul1")var childNodes = ulNode.childNodes;if (index >= childNodes.length){alert("下标错误")return}// 找到要替换的li结点var li = childNodes[index-1]// 文本节点var newNode = document.createTextNode(content)// 给li结点替换孩子// 第一个参数: 新结点// 第二个参数: 旧结点// li.replaceChild(newNode, li.childNodes[0])// 可以不用replace，直接改变文本内容也可以实现li.innerText = contentinputNode1.value = ""inputNode2.value = ""}
</script></body>

3.7 Inner

innerText&innerHTML

作业

1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Sign in</title>
</head>
<body>
<!-- cellspacing : 单元格之间的空隙
cellpadding：到边框到空隙-->
<table cellspacing="10"><tr><td>注册邮箱: </td><td><input></td></tr><tr><td></td><td>你还可以手机注册</td></tr><tr><td>创建密码: </td><td><input type="password"></td></tr><tr><td>真实姓名: </td><td><input></td></tr><tr><td align="right">性别: </td><td><input type="radio" name="gender">男<input type="radio" name="gender">女</td></tr><tr><td align="right">生日: </td><td><select id="year" onchange="getdate()"></select>年<select id="month" onchange="getdate()"></select>月<select id="day" onchange="getdate()"></select>日</td></tr><tr><td align="right">我正在: </td><td><select><option>睡觉</option><option>学习</option><option>打游戏</option><option>拯救世界</option><option>变成光</option></select></td></tr><tr><td></td><td><img id="img1" src="verycode.gif" width="150px" height="60px">&nbsp;<span onclick="changeImg()">看不清楚,换一张</span></td></tr><tr><td>验证码: </td><td><input id = "input1"></td></tr><tr><td></td><td><img src="btn_reg.gif" onclick="verify()" width="180px" height="40px"></td></tr><script>initdate()function initdate(){var yearNode = document.getElementById("year");for (var i = 2021; i >= 1900 ; i--) {//创建option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(i))yearNode.appendChild(optionNode)}var monthNode = document.getElementById("month")for (var i = 1; i <= 12; i++) {var  str = ""if (i < 10){str = "0" + i}else {str = i}// 创建一个option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(str))monthNode.appendChild(optionNode)}var dayNode = document.getElementById("day")for (var i = 1; i <= 31; i++) {var  str = ""if (i < 10){str = "0" + i}else {str = i}// 创建一个option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(str))dayNode.appendChild(optionNode)}}function getdate() {var year = document.getElementById("year").valuevar m = document.getElementById("month").valueif (m == "01" || m == "03" || m == "05" || m == "07" || m == "08" || m == "10" || m == "12") {// 31天var dayNode = document.getElementById("day")//先清空dayNode.innerText = ""for (var i = 1; i <= 31; i++) {var str = ""if (i < 10) {str = "0" + i} else {str = i}// 创建一个option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(str))dayNode.appendChild(optionNode)}} else if (m == "04" || m == "06" || m == "09" || m == "11") {// 30天var dayNode = document.getElementById("day")dayNode.innerText = ""for (var i = 1; i <= 30; i++) {var str = ""if (i < 10) {str = "0" + i} else {str = i}// 创建一个option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(str))dayNode.appendChild(optionNode)}} else {//2月份的情况if (year % 4 == 0 && year % 100 != 0 || year % 400==0) {var dayNode = document.getElementById("day")dayNode.innerText = ""for (var i = 1; i <= 29; i++) {var str = ""if (i < 10) {str = "0" + i} else {str = i}// 创建一个option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(str))dayNode.appendChild(optionNode)}} else {var dayNode = document.getElementById("day")dayNode.innerText = ""for (var i = 1; i <= 28; i++) {var str = ""if (i < 10) {str = "0" + i} else {str = i}// 创建一个option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(str))dayNode.appendChild(optionNode)}}}}var imgs = ["1111.png", "1234.png", "2222.png", "3333.png", "4567.png"]var code = [ "1111", "1234", "2222", "3333", "4567"]var origin = -1;function changeImg() {var imgNode = document.getElementById("img1")while (true){var index = Math.floor(Math.random()*imgs.length);var getImg = imgs[index]if(origin != index) {origin = index;break;}}imgNode.src = getImg}function verify() {var inputCode = document.getElementById("input1")if(origin == -1){if (inputstr ==  "BnKsU"){alert("验证码正确")}else {alert("验证码错误")}return}if(inputCode.value == code[origin]){alert("验证成功！")}else {alert("验证失败")}}</script></table></body>
</html>

2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.cell1{text-align: center;}.div1{margin-left: 300px;margin-bottom: 3px;}.div2{margin-left: 300px;}td{text-align: center;height: 30px;width: 200px;}select, button{height: 30px;}</style>
</head>
<body><div class="div1"><select id="select1" onchange="display()"><option>美元</option><option>欧元</option><option>日元</option><option>港元</option><option>韩元</option><option>比特币</option></select><button onclick="exchange()">互换</button><select id="select2" onchange="display()"><option>美元</option><option>欧元</option><option>日元</option><option>港元</option><option>韩元</option><option>比特币</option></select>数额:<input width="170px" id="mount"><button onclick="calculate()">汇率转换</button></div><div  class="div2"><table class="table" border="1px"><tr><td class="cell1"  bgcolor="red" colspan="3">按当前汇率兑换结果</td></tr><tr><td id="currency1"></td><td>汇率</td><td id="currency2"></td></tr><tr><td id="td1"></td><td id="td2"></td><td id="td3"></td></tr></table>
</div><script>var listRate = [1, 0.9, 100, 8, 1000, 0.000016]var listMoney = ['美元', '欧元', '日元', '港元', '韩元', '比特币']function exchange() {var currency1 = document.getElementById("select1")var tmp = currency1.valuevar currency2 = document.getElementById("select2")currency1.value = currency2.valuecurrency2.value = tmp}function display() {var currency1 = document.getElementById("select1")var name1 = currency1.valuevar currency2 = document.getElementById("select2")var name2 = currency2.valuedocument.getElementById("currency1").innerText = name1document.getElementById("currency2").innerText = name2var index1 = listMoney.indexOf(name1)var index2 = listMoney.indexOf(name2)var rate = listRate[index2] / listRate[index1]document.getElementById("td2").innerText = rate}function calculate() {var currency1 = document.getElementById("select1")var name1 = currency1.valuevar currency2 = document.getElementById("select2")var name2 = currency2.valuevar index1 = listMoney.indexOf(name1)var index2 = listMoney.indexOf(name2)document.getElementById("currency1").innerText = name1document.getElementById("currency2").innerText = name2var rate = listRate[index2] / listRate[index1]var mount1 = document.getElementById("mount").valuedocument.getElementById("td1").innerText = mount1//document.getElementById("td2").innerText = ratedocument.getElementById("td3").innerText = rate * mount1}</script></body>
</html>