提示：本文记录的语法是js相较于与java中不同的，一些类似的并没有提出。
文章目录
前言
JavaScript（JS）是一种弱类型动态类型的语言，相对于Java、go语言来说，比较灵活，但是“灵活”这词，对于程序员来说并不是好事情，JS主要由ES（JS语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）三部分组成，今天主要对其进行介绍。
一、JS语法
JS语法有很多与Java是很相似的，但js是动态弱类型语言，java是静态强类型语言，本次主要记录其中一些不同的语法。
1.书写格式
（1）行内式
将JS代码写到html中。
<input type="button" value="按钮" onclick="alert('hello js')">
（2）内嵌式
将代码写入带有script的标签中。
<script> alert("hello js"); </scrip>
（3）外部式
将代码写入.js文件中，再通过script标签的src引入，这种情况，script标签中不能写代码，写了也无效。
<script src="hello.js"></script>
2.变量
在JS中，变量都用let定义，以前是var。布尔变量可以与整数相加减。由于js是动态类型，所以它是比较灵活的，即使变量以及创建了，也可以改变它的类型。
主要有以下几种类型：
（1）number：数字类型，包括整数和小数。
（2）boolean：布尔类型。
（3）string：数字串。
（4）undefined：表示未定义的值
（5）null：表示空值。
<script>
let a = 10;
console.log(a);//将a的值打印到控制台
let b = 'string';
let c = true;
a = "hello js";
console.log(a);
console.log(10+b);//10string
var d = 07;//八进制数
var e = 0xa;//十六进制数
var f = 0b10;//二进制数
var max = Number.MAX_VALUE;//整数的最大值
var min = Number.MIN_VALUE;//整数的最小值
//三种特殊类型的数字值
console.log(max);//Infinity:无穷大
console.log(min);//-Infinity
console.log(b-10);//NAN:not a number
</script>
3.数组
对于js来说，只有[]里是非负整数的时候，才把这个操作视为是操作下标；如果是其他类型的值，则视为自定义属性。
（1）数组创建的方式
let arr = new Array();
let a = [];
let b = new [];
let c = [10,"string",true,[1,2],[]];
（2）数组的插入、替换、删除
a.使用push、pop；
b.使用splice.
如下：
let a = [];
//通过push进行赋值，pop弹出，类似于java中的栈
for(let i=0;i<10;i++) {
a.push(i);
}
console.log(a.pop());
console.log(a.pop());
// 插入
a.splice(2,0,"hello");
console.log(a);
// 替换
a.splice(3,1,"hello");
console.log(a);
// 删除位置从4开始长度为3之间的元素
a.splice(4,3);
console.log(a);
4.函数
函数与java中的方法差不多，只不过java中的方法依赖对象，而这里的函数是可以单独使用的。
（1）格式
function 函数名(形参列表) {
函数体
return 返回值；//js的返回值并不需要定义函数返回类型
}
函数名(是参列表) //不考虑返回值
返回值 = 函数名(是参列表) //考虑返回值
代码如下：
function hello() {
console.log("fun1");
}
hello();
function hello2(x,y) {
console.log(x+y);
}
hello2(1,2);
let a = function () {
console.log("fun2");
}
a();
举例：求和函数
<script>
//求和函数
// function add(a,b,c,d,e,f) {
// a = a||0; //a为真a=a，否则a=0
// b = b||0;
// c = c||0;
// d = d||0;
// e = e||0;
// f = f||0;
// return a+b+c+d+e+f;
// }
//直接使用arguments接收参数
function add() {
let ret = 0;
for(let i=0;i<arguments.length;i++) {
ret += arguments[i];
}
return ret;
}
</script>
5.对象
包括若干属性和方法
（1）创建方式
使用{}创建：
<script>
let student = {
name: 'aaa',
age: 20,
height: 180,
sing: function() {
console.log("啦啦啦");
},
play: function() {
console.log("出去玩呀");
},
};
console.log(student.name);
console.log(student.age);
student.sing();
student.play();
</script>
（2）使用object创建：(与创建数组类似)
<script>
let student = new Object();
student.name = 'aaa';
student.age = 20;
student.height = 180,
student.sing = function() {
console.log("啦啦啦");
}
console.log(student.name);
console.log(student.age);
student.sing();
</script>
（3）使用构造函数创建：
<script>
let student = {
name: 'aaa',
age: 20,
sing: function() {
console.log("啦啦啦");
}
};
var obj = new student();
</script>
<script>
function Student(name, age) {
this.name = name;
this.age = age;
this.sing = function () {
console.log(sound); // 别忘了作用域的链式访问规则
}
}
var student = new student('aaa',16,'啦啦啦');
console.log(student);
student.sing();
</script>
js对象与java对象区别
（1）JavaScript没有“类”的概念，它的对象就是属性+方法，把一些共有属性提取出来。
（2）JavaScript对象不区分“属性”和“方法”。
（3）JavaScript对象没有public/private等访问控制机制。
（4）JavaScript对象没有“继承”。
（5）JavaScript没有“多态”。
JavaScript本身就支持动态类型，在使用某个方法的时候并不需要对对象的类型作出明确区别。
二、WebAPI
WebAPI包括了DOM和BOM。
API参考文档（通过MDN+API就可快速搜索）：https://developer.mozilla.org/zh-CN/docs/Web/API
如下主要记录DOM的一些重用API：
DOM（Document Object Model）提供了一系列函数，方便我们操作网页内容、网页样式、网页结构。
DOM树，即一个页面的结构是一个树形结构，其一个页面就是一个文档（document）,页面上的所有标签成为元素（element），网页中的所有内容都可以成为节点（node）。
1.操作元素
（1）获取/修改元素内容
querySelector： 同一类型的只能获取第一个结果；
querySelectorAll： 可以获取全部的。
代码如下（示例）：
<body>
<div>one</div>
<div>one</div>
<div>one</div>
<div>one</div>
<script>
// 标签选择器
// querySelector 同一类型的只能获取第一个结果
// querySelectorAll 可以获取全部的
let div = document.querySelector('div');
let divs = document.querySelectorAll('div');
console.log(div);
console.log(divs);
// 以对象形态打印
console.dir(div);
</script>
</body>
</html>
（2）获取/修改元素属性
a.事件：
<body>
<div class="one" id="div-id">hello</div>
<script>
let div = document.querySelector('div');
// 鼠标点击事件
div.onclick = function() {
console.log('按下鼠标');
}
div.onmousemove = function() {
console.log('鼠标移动');
}
div.onmouseenter = function() {
console.log('鼠标进来了');
}
div.onmouseleave = function() {
console.log('鼠标出去了');
}
</script>
</body>
</html>
b.innerHTML：获取/设置对应元素的内容。
代码如下（示例）：
<body>
<div>点击一下</div>
<br>
<img src="../html/男.png" width="100px">
<br>
<script>
// querySelector 获取页面元素
// querySelector 获取页面所有元素
let div = document.querySelector('div');
// innnerHTML 获取对应元素的内容，可以通过其赋值
div.onclick = function() {
div.innerHTML = '<button>按钮</button>';
}
// 切换图片
let img = document.querySelector('img');
console.log(img.src);
console.log(img.width);
console.log(img.alt);
img.onclick = function() {
img.src = '../html/女.png';
}
</script>
</body>
</html>
（3）获取/修改单元素属性
表单元素（input）使用 value 获取其中的值。
代码如下（示例）：
<body>
<input type="password" id="one">
<button id="disp">显示密码</button>
<br>
<input type="text" id="calc" value="0">
<button id="addBut">+</button>
<button id="minBut">-</button>
<script>
// 表单元素使用 value 获取其中的值
let input = document.querySelector('#one');
let button = document.querySelector('#disp');
button.onclick = function() {
console.log(input.value);
if(input.type == 'password') {
input.type = 'text';
button.innerHTML = '隐藏密码';
}else if(input.type == 'text') {
input.type = 'password';
button.innerHTML = '显示密码';
}else {
alert('type 错误！');
}
}
// 加减法运算
let num = document.querySelector('#calc');
let addBut = document.querySelector('#addBut');
let minBut = document.querySelector('#minBut');
addBut.onclick = function() {
let n = parseInt(num.value);
// let n = +num.value;
num.value = n+1;
}
minBut.onclick = function() {
let n = parseInt(num.value);
num.value = n-1;
}
</script>
</body>
</html>
（4）获取/修改样式属性
a.行内样式操作。
改变字体大小（示例）：
<body>
<h2 style="font-size: 10px">点击变大</h2>
<script>
// 获取/修改样式
// 改变字体大小
let size = document.querySelector('h2');
size.onclick = function() {
let n = parseInt(size.style.fontSize);
n += 5;
size.style.fontSize = n + 'px';
}
</script>
</body>
</html>
b.类名样式操作。
改变字体大小（示例）：
<body>
<style>
html {
height: 100%;
}
body {
height: 100%;
}
.light {
color: black;
background-color: white;
}
.dark {
color: white;
background-color: black;
}
</style>
<div class="light" style="height: 1000px">
<div>这是一大段话.</div>
<div>这是一大段话.</div>
<div>这是一大段话.</div>
<div>这是一大段话.</div>
</div>
<script>
let button = document.querySelector('button');
let divs = document.querySelector('.light');
divs.onclick = function() {
if(divs.className == 'light') {
divs.className = 'dark';
}else if(divs.className == 'dark') {
divs.className = 'light';
}else {
alert('class 错误！');
}
}
</script>
</body>
</html>
2.操作节点
（1）新增节点
步骤：a.创建元素节点；
b.把元素插入到dom树中。
代码如下（示例）：
<body>
<!-- 针对结点操作 增加/删除 -->
<div class="container"></div>
<button>删除div</button>
<script>
// 1.创建结点
let newDiv = document.createElement('div');
newDiv.id = 'newDiv';
newDiv.className = 'one';
newDiv.innerHTML = 'hello';
console.log(newDiv);
// 2.把节点挂在dom树上
let container = document.querySelector('.container');
container.appendChild(newDiv);
</script>
</body>
</html>
（2）删除节点
使用removeChild删除子节点。
代码如下（示例）：
<body>
<!-- 针对结点操作 增加/删除 -->
<div class="parent">
<div>11</div>
<div class="one">22</div>
<div>33</div>
</div>
<script>
// 1.获取父结点
let parent = document.querySelector('.parent');
// 2.获取删除结点
let child = document.createElement('.one');
parent.appendChild(child);
console.log(parent);
</script>
</body>
</html>
实例
猜数字
1.页面如下：
2.功能：（1）游戏可以重置；（2）记录猜的次数；（3）结果提醒猜测的数字的大小。
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字</title>
</head>
<body>
<button id="reset">重新开始一局</button>
<div>
请输入要猜的数字:
<input type="text">
<button id="guess">猜</button>
</div>
<div>已经猜的次数:<span id="guessCount">0</span></div>
<div>结果:<span id="result"></span></div>
<script>
// 0.获取页面元素
let reset = document.querySelector('#reset');
let guessBut = document.querySelector('#guess');
let input = document.querySelector('input');
let guessCount = document.querySelector('#guessCount');
let result = document.querySelector('#result');
// 1.设置随机数
let toGuess = parseInt(Math.random()*100)+1;
console.log(toGuess);
// 2.猜数字
guessBut.onclick = function() {
// 输入猜测的数字
if(input.value == '') {
return;
}
let num = parseInt(input.value);
// 判断
if(num < toGuess) {
result.innerHTML = '低了';
}else if(num>toGuess) {
result.innerHTML = '高了';
}else {
result.innerHTML = '对了！';
}
// 设置猜测的次数
guessCount.innerHTML = parseInt(guessCount.innerHTML)+1;
}
// 3.重开一局
reset.onclick = function() {
location.reload();
}
</script>
</body>
</html>
备忘录
1.页面
初始页面
添加任务之后页面：
2.功能：
（1）点击新建任务后，添加到未完成处；
（2）已完成与未完成可以切换；
（3）可以删除。
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项</title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav {
width: 500px;
height: 100px;
margin: 0 auto;
display: flex;
align-items: center;
}
.nav input {
width: 400px;
height: 40px;
}
.nav button {
width: 100px;
height: 40px;
background-color: rgba(19, 5, 5, 0.877);
color: white;
border: none;
}
.container {
width:500px;
height: 500px;
margin: 0 auto;
display: flex;
}
.container h3 {
height: 40px;
text-align: center;
line-height: 40px;
background-color: pink;
color: white;
}
.todo {
width: 50%;
height: 100%;
}
.done {
width: 50%;
height: 100%;
}
.row {
height: 40px;
display: flex;
align-items: center;
}
.row input {
margin: 0 10px;
}
.row span {
width: 250px;
}
.row button {
width: 40px;
height: 30px;
border: none;
border-radius: 3px;
}
button:active {
background-color: grey;
outline: none;
}
</style>
<div class="nav">
<input type="text">
<button>新建任务</button>
</div>
<div class="container">
<div class="todo">
<h3>未完成</h3>
</div>
<div class="done">
<h3>已完成</h3>
</div>
</div>
<script>
// 1.获取导航栏的新建任务按钮
let addButton = document.querySelector('.nav button');
// 2.新建任务按钮点击事件
addButton.onclick = function() {
// 3.获取新建任务
let input = document.querySelector('.nav input');
let taskCotent = input.value;
if(taskCotent=='') {
console.log('任务为空，不能新增');
return;
}
// 4.获取父节点
let row = document.createElement('div');
// 5.创建子节点（未完成任务）
row.className = 'row';
let checkbox = document.createElement('input');
checkbox.type = 'checkbox';
let span = document.createElement('span');
span.innerHTML = taskCotent;
let button = document.createElement('button');
button.innerHTML = '删除';
row.appendChild(checkbox);
row.appendChild(span);
row.appendChild(button);
// 6.将子节点插入
let todo = document.querySelector('.todo');
todo.appendChild(row);
input.value = '';
// 7.切换任务的状态（未完成/已完成)
checkbox.onclick = function() {
if(checkbox.checked) {
let target = document.querySelector('.done');
target.appendChild(row);
}else {
let target = document.querySelector('.todo');
target.appendChild(row);
}
}
// 8.删除功能
button.onclick = function() {
let parent = row.parentNode;
parent.removeChild(row);
}
}
</script>
</body>
</html>