JavaScript
JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都可以使用 JavaScript。
- DOM&BOM
相当于内置模块
- JQuery
相当于第三方模块
1.变量
var a; /*正常变量，具有函数作用域*/
let y = "原神"; /*正常变量，具有块级作用域*/
const PI = "3.14"; /*声明常量/*
三者特点
var:
1、存在变量提升
console.log(a); // undefined var a = 10; // 编译过程 var a; console.log(a); // undefined a = 10;
2、一个变量可多次声明，后面的声明会覆盖前面的声明
var a = 10; var a = 20; console.log(a); // 20
3、在函数中使用var声明变量的时候，该变量是局部的
var a = 10; function change(){ var a = 20; } change(); console.log(a); // 10
而如果在函数内不使用var，该变量是全局的
var a = 10; function change(){ a = 20 }; change(); console.log(a); // 20
let:
1、不存在变量提升，let声明变量前，该变量不能使用（暂时性死区）。
console.log(a); // ReferenceError: a is not defined let a = 10; 2、let命令所在的代码块内有效，在块级作用域内有效 { let a = 10; } console.log(a); // ReferenceError: a is not defined
3、let不允许在相同作用域中重复声明，注意是相同作用域，不同作用域有重复声明不会报错
let a = 10; let a = 20; // Uncaught SyntaxError: Identifier 'a' has already been declared let a = 10; { let a = 20; }
const:
1、const声明一个只读的变量，声明后，值就不能改变
const a = 10; a = 20; // TypeError: Assignment to constant variable.
2、const必须初始化
const a; // SyntaxError: Missing initializer in const declaration const a = 10; // ok
3、const并不是变量的值不能改动，而是变量指向的内存地址所保存的数据不得改动
const obj = { age: 17 } obj.age = 18; // ok obj = { age: 18 } // SyntaxError: Identifier 'obj' has already been declared
4、let该有的特点const都有
区别
1,变量提升
var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined
let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错
2,块级作用域
var不存在块级作用域
let和const存在块级作用域
3,重复声明
var允许重复声明变量
let和const在同一作用域不允许重复声明变量
4,修改声明的变量
var和let可以
const声明一个只读的常量。一旦声明，常量的值就不能改变，但对于对象和数据这种引用类型，内存地址不能修改，可以修改里面的值。`
使用
能用const的情况下尽量使用const，大多数情况使用let，避免使用var。
const > let > var
const声明的好处，一让阅读代码的人知道该变量不可修改，二是防止在修改代码的过程中无意中修改了该变量导致报错，减少bug的产生。let声明没有产生预编译和变量提升的问题，先声明再使用可以让代码本身更加规范，let是个块级作用域，也不会污染到全局的变量声明。
最后说一点就是使用的场景说明：let一般应用于基本数据类型；const 一般应用于引用数据类型，也就是函数对象等。
var常见功能：
var GenShen = "原神"； var name = "原神启动！"; var a1 = name.length;//获取name长度 var a2 = name[0];//原||name[0]==name.charAt(0) var a3 = name.trim()//去除空白 var a4 = name.substring(0,2);//前取后不取||原神
实列
<span id="txt"> 豆✌，伟大，无需多言！！！ </span> <script> function show() { // 在HTML中找到目标并获取内容(DOM) let tag = document.getElementById("txt");//拿到标签对象 let darastring = tag.innerText;//获取目标内容 /* console.log(darastring)*/ // 2.动态起来：把文本的第一个字符放在字符串的最后。 let firstchar = darastring[0]; let others = darastring.substring(1, darastring.length); let newtxt = others + firstchar; console.log(newtxt) // 3,在HTML中更新内容 tag.innerText = newtxt; } //js中的定时器 setInterval(show, 200);//每()ms执行一次show </script>
2.数组
let a1 = [1,2,3,4]; let a2 = Array([1,2,3,4]); a1[0] = "原神"; a1.push("原神启动！"); //尾部追加字符:[1,2,3,4,"原神启动！"] a1.unshift("原神启动！") //尾部追加字符:["原神启动！",1,2,3,4] a1.splice(索引位置,0,元素); a1.splice(1,0,"原神"); //尾部追加:[1,"原神",2,3,4] a1.pop() //尾部删除 a1.shift() //头部删除 a1.splice(索引位置,1) a1.splice(2,1); //删除索引为2的元素:[1,2,4]
循环
let a1 = [1,2,3,4]; for(let item in a1){ //idx=0/1/2/3/ data=a1[idx] } for(let i=0; i<a1.length; i++){ // i=0/1/2/3/ data=a1[i] }
实例
<script> let cityname = ['213','321','123']; for(let idx in cityname){ let text = cityname[idx] //创建<li></li> let tag=document.createElement("dd"); //在li标签中写入内容 tag.innerText = text; // tag.innerText = text; //添加到id=city中 let biaoqian = document.getElementById("city"); biaoqian.appendChild(tag); } </script>
3.字典
info = { "game" : "原神", "computer" : "联想"， } info.game = "崩坏" info["computer"] = "华硕" delete info["game"]
info = { "game" : "原神", "computer" : "联想"， } for(let i in info){ //i = game/computer|键 data=info[i]|值 }
实例
<form id="pinglun"> <br> <input style="width: 200px" type="text" id="username" placeholder="yout username" required> <br> <br> <textarea style="width: 200px" id="users" placeholder="评论..." required></textarea> <button type="submit">提交</button> </form> <div id="pingluns"></div> <script> document.getElementById('pinglun').addEventListener('submit', function(e) { e.preventDefault(); // 阻止表单默认提交行为 // 这一行首先获取了HTML中id为'commentForm'的表单元素，并给它添加了一个提交事件监听器。 // 当表单被提交时（例如用户点击“提交”按钮），这个匿名函数将会执行。 const username = document.getElementById('username').value; const userComment = document.getElementById('users').value; // 这行代码阻止了表单的默认提交行为，也就是浏览器不会重新加载页面或导航到新的URL。 // 在这里我们不需要页面刷新，而是希望通过JavaScript来处理提交动作。 // 下面两行代码获取用户在表单中填写的用户名和评论文本 const commentDiv = document.createElement('div'); // 设置这个新创建的`div`元素的文本内容，包含用户名和评论内容 commentDiv.textContent = `${username}: ${userComment}`; // 把新创建的评论元素添加到ID为'commentsList'的HTML元素内部，这样它就出现在了页面的评论列表中 document.getElementById('pingluns').appendChild(commentDiv); // 清空表单中的用户名和评论文本框以便用户再次输入新的评论 document.getElementById('username').value = ''; document.getElementById('users').value = ''; }); </script>
DOM
js模块，对HTML页面标签进行操作
//通过ID获取标签 let doms = document.getElementById('GengShen'); //获取标签文本 doms.innerText; //修改标签文本 doms.innerText = "原神启动！"; //创建标签 let make = document.createElement('div'); //标签内写文本 make.innerText = "原神启动！";
