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 *.”;
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.value
var inputNode2 = document.getElementById("inputStr")
var content = inputNode2.value
if (!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 = content
inputNode1.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">
<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").value
var m = document.getElementById("month").value
if (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.value
var currency2 = document.getElementById("select2")
currency1.value = currency2.value
currency2.value = tmp
}
function display() {
var currency1 = document.getElementById("select1")
var name1 = currency1.value
var currency2 = document.getElementById("select2")
var name2 = currency2.value
document.getElementById("currency1").innerText = name1
document.getElementById("currency2").innerText = name2
var 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.value
var currency2 = document.getElementById("select2")
var name2 = currency2.value
var index1 = listMoney.indexOf(name1)
var index2 = listMoney.indexOf(name2)
document.getElementById("currency1").innerText = name1
document.getElementById("currency2").innerText = name2
var rate = listRate[index2] / listRate[index1]
var mount1 = document.getElementById("mount").value
document.getElementById("td1").innerText = mount1
//document.getElementById("td2").innerText = rate
document.getElementById("td3").innerText = rate * mount1
}
</script>
</body>
</html>