Js: JavaScript
HTML
CSS
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript是一种弱类型语言 它的解释器被称为JavaScript引擎,为浏览器的一部分: js是浏览器运行的, 主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
跨平台特性:在绝大多数浏览器的支持下。
轻量级: html css js
重量级: Java C++
区分轻量级和重量级主要看语言的生态
弱类型: 类型限制不严格(字面意思)
写在html页面内部, 用script标签包裹js代码
用Script导入外部文件
以前: 要求写在head标签的里面
现在: 不这么要求
JavaScript在声明时统一使用无类型(untyped)的“var”关键字
var来声明一个变量,这是一个固定的写法,是js的语法。
JavaScript并没有避开数据类型,它的数据类型是根据所赋值的类型来确定的。 JavaScript 对大小写敏感 变量名有命名规范: 只能由英语字母、数字、下划线、美元符号$构成,且不能以数字开头,并且不能是JavaScript保留字
ECMAScript 是 javascript的版本
ECMAScript 6 – > Es6
Es6: 2015 的js版本
Es6之前: 只有Var关键字
Es6之后: 新加了一些, let:用于局部作用域 const: 一旦定义不可修改
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 //说明引用也适用
HTML: 主要特点, 通过标签的嵌套来描述页面的层级结构
CSS: 通过样式, 描述HTML标签所具有的不同显示效果
Js: 主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
运算符 +,-,*,/,%,++,-- =, +=, -=, *=, /=, %= 注意: 加法: 20+10+'20’ 减法 ‘30’-‘10’
!=, > , <, >=, <=, ? 三元 && , ||, !
注意: == 值相等 === 值相等并且类型相等 !== 值不相等或类型不相等
If:
// 有些值在分支语句中, 是表现为假: 0, 空串, 空对象, null, NaN, false
在js中, 一般我们使用普通的for循环 (fori) 遍历数组
在js中, 一般我们使用foreach循环遍历对象
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
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(”|"); // 用竖线分隔 如果分隔符是 “”,被返回的数组将是间隔单个字符的数组:
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 中的元素进行排序
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多端开发
DOM: js一个分支
文档对象模型(document object model )。
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:DOM Tree
dom树中的节点彼此拥有层级关系(由节点构成)
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点 注释是注释节点
在节点树中,顶端节点被称为根(root) 每个节点都有父节点、除了根(它没有父节点)
一个节点可拥有任意数量的子节点 父、子 和同胞(兄弟或姐妹)节点。
同胞是拥有相同父节点的结点
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模型构建完成, 页面就开始显示了
加载图片等外部文件。 页面加载完毕。
getElementById()
getElementsByName()
getElementsByTagName() // 通过标签名来获得节点
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>
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>
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>
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>