由于学web时只学了后端，现在到了前后端联调的场景发现看不懂前端代码，于是开始恶补
看了下基础内容发现html和css比较好看懂，但JavaScript比较迷，大概知道组件id绑定事件
下面选取看菜鸟教程补充的JS知识
JS的作用
JS是在html搭建好骨架，css设计好样式的基础上添加交互性和其他动态功能。
下面是基本案例，可以看到JS定义函数绑定了html写的一个按钮，让这个按钮可以动态显示日期
<!DOCTYPE html>
<html>
<title>基础教程(cainiaojc.com)</title>
<body><h1>第一个javascript示例入门</h1><button type="button" onclick="showDate()">点我显示日期和时间</button><p id="output"></p><script>
function showDate() {document.getElementById("output").innerHTML = new Date();
}
</script></body>
</html>具体而言，JS可以实现以下功能：
-
JavaScript可以更改HTML属性
-
JavaScript可以隐藏和显示HTML元素
-
JavaScript可以添加和删除HTML元素
-
JavaScript可以更改元素的样式（CSS）和位置
-
JavaScript可以修改文本内容
-
JavaScript可以监视鼠标单击，悬停等事件并对其做出反应
-
JavaScript可以创建警告弹出窗口，以向用户显示信息或警告消息
-
JavaScript可以在将用户输入提交到服务器之前对其进行验证
JS用法
-
（传统）可以在<script>标记之间插入JavaScript代码
-
（简单的JS代码）使用事件属性（例如onclick，onkeypress等）将JavaScript代码直接放在HTML标记内
-
（复杂的JS代码）创建一个外部JavaScript文件，然后通过
输出
经典Hello World 写入浏览器控制台使用 console.log()
<script>
console.log("Hello World")
</script>-
写入HTML元素使用 innerHTML
-
写入文档流使用 document.write()
-
弹出警告框，使用 window.alert()
基本语法
变量
可以使用let（对于块级变量），var（对于函数级变量）或const（只读）声明变量。
仅使用var而没赋值时变量具有值undefined,表示尚未为变量分配值，或者根本没有声明变量。
var x;
x = 1;
var y = 1;标识符
变量，函数或属性的名称在JavaScript中称为标识符，JavaScript 标识符必须以字母、下划线(_)或美元符（$）开始，后续的字符可以是字母、数字、下划线或美元符。
所有JavaScript标识符均区分大小写，标识符的约定是使用camelCase(驼峰命名)编写的。
注释
和Java的一样，单行注释以双斜杠（//）开头，行注释以斜杠和星号（/*）开头，以星号和斜杠（*/）结束。
数据类型
好消息，JS变量定义时不用声明类型，因为会动态分配
var length = 4;// Number 数字var firstName = "Vishal"; // String 字符串var user = {firstName:"Vishal", age:22}; // Object 对象var fruits = ["Apple", "Mango", "Banana"];// Array 数组Number
JS中数字具有64位，不分整数和浮点数，但底层也和其他语言一样
toExponential()，toFixed()，toPrecision()得到对应位数的数
valueOf()得到原始数值（像Java Integer拆包）
Number()转换数字,parseInt(),parseFloat()解析数字
String
JS中单双引号都可以包字符串
+ 运算符用于拼接字符串，还可以用于长代码换行
直接定义的字符串变量是string，而使用new创建的是字符串对象，属于object。
var city = new String("New Delhi");length,concat(),toUpperCase(),split(),trim(),replace(),substring(),charAt()和Java一样
此外还有indexOf(),lastIndexOf(),search()用于匹配。
运算符
基本都跟其他语言一样，只有几个特殊的
**=：求幂之后再赋值
===：相等且同类型
!==： 不相等且不同类型
三元运算符：
var status = (age >= 18) ? "adult" : "minor";delete运算符可删除对象，对象的属性或数组中指定索引处的元素
var user = {firstName:"Vishal", age:"22", color:"blue"};
delete user.firstName; // returns true
var fruits = ["Apple", "Mango", "Banana"];
delete fruits[0]; // delete "Apple"in：看在不在集合里
instanceof：看指定的对象是否属于指定的对象类型
控制流
if语句，if...else语句，else...if语句，switch语句，while循环，do while循环，for循环都跟Java完全一样。也用continue和break跳出循环。
for...in循环迭代的对象的属性，以任意的顺序
var myObj = {
name: "VISHAL",
age: 22,
height: 175,
city: "New Delhi",
getNothing: function () {return "";}
};for (let x in myObj) {
document.write(x);
}for...of循环迭代数据，该迭代的对象定义要遍历
let iterable = [10, 20, 30, 40, 50];for (let x of iterable) {
document.write(x);
}函数
function nameOfFunction(parameter1, parameter2, ..., parameterN) {// 要执行的代码return 返回值;}
//调用函数，返回值将存储在x中
var x = nameOfFunction(parameter1, parameter2, ..., parameterN);还有个类似匿名函数，用变量名调用
var square = function(number) { return number * number; };var x = square(5);对象
像经常看到的JSON，里面还可以定义函数
var user = {firstName: "Vishal",lastName : "Choudhary",age : 22,location : "New Delhi",getName : function() {return this.firstName + " " + this.lastName;}};可以用.和数组索引来访问对象属性
user.firstName;
user["firstName"];访问对象方法也和Java一样
user.getName();当使用关键字声明JavaScript变量时new，该变量将作为对象创建：
var a = new Number(); // 将a声明为Number对象
var b = new String(); // 将b声明为String对象
var c = new Boolean(); // 将c声明为Boolean对象数组
也和Java一致，再添加元素事如果能刚好接上下一个可以为下一个索引分配值，不确定就用push
let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[4] = "Guava";其他的pop(),shift(),concat(),slice(),fill(),sort(),reverse()也可以望文生义
forEach()方法对数组的每个元素执行一次提供的函数，也和Java很像
var fruits = ["Apple", "Mango", "Banana", "Orange"];
var result = document.getElementById("result");fruits.forEach(function(element, index, array) {result.innerHTML += index + ": " + element + "<br>";
});map()方法返回一个新数组，不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值，并按照原始数组元素顺序依次处理元素
var nums1 = [1, 5, 20, 14, 55, 16];
var nums2 = nums1.map(twice);function twice(element, index, array) {return (element * 2);
}filter(),find(),every()同理
事件
事件是在浏览器中发生的操作，可由用户或浏览器本身启动
-
页面加载完成
-
用户单击一个按钮
-
用户滚动文档
-
用户调整浏览器大小
-
用户移动鼠标
-
用户提交表单
-
用户按下键盘上的一个键
-
HTML输入字段已更改
使用方法为：
-
内联事件处理程序（html上）
-
<p onclick="this.innerHTML = 'Hello world'">单击此处更改此文本</p> -
事件处理程序属性
-
let para = document.querySelector("#para");para.onclick = function() {this.innerHTML = "Hello world"; } -
事件监听器
let para = document.querySelector("#para");
para.addEventListener("click", changeText);function changeText() {para.innerHTML = "Hello world";
}
)
