日升时奋斗，日落时自省
目录
1、基础语法
2、DOM
2.1、选中页面元素
2.2、获取/修改元素内容
3、JS案例
3.1、网页版本猜数字
3.2、网页版表白墙
JS最初只是为了进行前端页面的开发后来JS也被赋予了更多的功能，可以用来开发桌面程序，手机APP，服务器端的程序
没有关系的原因是因为过去的JS叫做 “ECMAScript” ，是ECMA-262标准规定的脚本
那当前推荐的编译工具有： VSCode （免费），webstorm（需要付费）
虽然说没有啥关系，但是JS和Java仍然有不少的相似之处
JS是运行在浏览器上的，比如CHrome里面专门有一个模块，就是JS引擎，就相当于JVM一样，能够解释执行js代码，这个代码最后被封装成了独立的程序，称为 V8引擎（此时js适用范围更广泛了）
javaScript的组成：
<1>ECMAScript（简称 ES）：javaScript语法
<2>DOM：页面文档对象模型，对页面中的元素进行操作
<3>BOM：浏览器对象模型，对浏览器窗口进行操作
使用JS主要也是附着在HTML使用的，通过script标签嵌入到html里面（会基本的html和css语法即可）
三种嵌入方式：
提示：alert 能够针对网页提供一个弹框，以下只是为了展示操作展示（其实弹框不是很好用）
<1>内部js. ：也就是内嵌式 使用script标签进行操作
<script>
alert("hello world");
</script> 
打开一个网站之后会产生一个弹窗显示 “hello world”
写在script标签中, script标签可以放在HTML中的任意地方，一般放在头部或尾部；
<2>外部引入式：
直接写到html元素内部
<script src="CSDNHtTML.js"></script>同时在同一个文件夹下创建一个js文件，就可以进行外部引用了
该代码防止的位置：在script标签中使用src引入外部文件，一般放在HTML头部或尾部，推荐放在尾部，防止因为JS加载失败导致页面整体无法加载。
<3>行内式：
写在标签的事件属性当中（以on开头的属性），如onclick；
<input type="button" value="可以点击的按钮" onclick="alert('hello world')">
以下解释一种比较容易进行调试的方法针针对网页能提供检查，可以看见控制台，在VSCode中使用console.log 就可以在控制台中打印日志
1、基础语法
1.1、JS变量
var 变量名 =初始值
js里定义变量使用的关键字还可以是写作let ；var 是属于老式写法（有缺漏）let是新式写法，规则更接近C++，JAVA等主流语言，不用太过于纠结两者的区别，使用let能减少缺陷
2、JS动态类型
一个变量在程序 运行过程中，类型可以发生变换 动态类型：JS ，Python，PHP，Lua
一个变量在程序 运行过程中，类型不会发生变换 静态类型：C语言，java，C++，Go
动态类型的好处 ：代码很灵活 （比如写一个函数 ，计算两个数字的和，如果使用Java，写个两个int相加的版本，double版本的等等）
动态类型的语言，只需要一个函数即可
当然所有语言都是有好也有坏的，动态类型，坏处，一个变量当下到底是啥类型，里面存了啥样的值；里面提供了那些方法，那些属性（适合规模小，赶时间使用）
JS中内置的几种类型：
<1>number ：数字不区分整数和小数
<2>booean ：true 真， false 假
<3>string ：字符串类型
<4>undefined : 只有唯一的值 undefined ，表示未定义的值
<5>null：只有唯一的值null 表示空值
以上需要解释理解的就是 undefined和 null的区别（其他的三个没有什么区分）
如果创建一个表：包含了 学号、姓名 、性别、 班级、电话
如果在创建表格的时候就少了一个“专业”这一栏 该种情况“专业”就是“undefined”
如果在同学们填表的时候没有注意电话这一行（有，但是没有填），此时“电话”这一行就是“null”
其他语言针对访问某个东西没有定义，直接报错的，JS此处不会报错，而是返回一个undefined，JS把别的语言认为非法的行为，合法化了
3、相等与全等
“==”两个等号表示相等 ；“===”三个等号表示全等
“==”相等 在JS代码中触发了“隐式类型转换”
JS中，针对不同类型进行比较或者运算，会尝试尽可能的转换成相同的类型
例如：
提示：此处不是找共同点，是语法内部有一套隐式类型转换的规则
隐式类型转换针对不同类型的语言
像Java这种，不太支持隐式类型转换的语言，成为“强类型”语言
像JS这种，比较能支持隐式类型转换的语言
有以上类型区分：
静态类型 且是 强类型：Java 、 Go
静态类型 且是 弱类型：C
动态类型 且是 强类型：Python
动态类型 且是 弱类型：JS 、PHP、Linux Shell
C++在C语言上有所更改，强弱类型上也有所改变
“===”全等 就更像是强制性的对比
不会进行隐式类型转化
4、JS数组
let arr=new Array();
let arr1=[];已上两种创建数组的方法
一般使用过的是第二行进行数组创建，JS中数组的元素类型不要求统一；可以是任意类型，针对所有动态类型的语言都是一样的
let arr4=[1,'hello',true,[]];以上就包含了多种类型，也不会会报错，同样是能被识别的
5、for循环
Splice（startIndex，count，变长参数）
把后面变长参数的内容，替换到前面的指定区间之内；
<1>如果后面没有变长参数就相当于是删除
<2>如果后面变长参数和前面指定的区间个数一样，此时就是修改操作也就是替换操作
<3>如果后面变长参数比前面的区间个数长，此时就是新增
6、JS函数
<1>函数声明
函数定义基本和其他语言基本都大体相同，使用function这个关键字来定义 一个函数
<script>
// 创建函数 / 函数声明 / 函数定义
function f() {
//函数体
return 1; //返回值
}
//函数调用
f(); //函数名(实参列表)
let d=f(); //返回值 = 函数名(实参列表)
</script>开头有function关键字（没有public，也没有private）虽然JS后来有对象了，但是JS不是面向对象的编程语言，继承封装多态是面向对象的三个特性（所以在这里不会有）
传参情况：
动态类型的语言传参不需要有指定的类型
function add(x,y){
return x+y;
}此处能看出来add（x,y）是没有写类型的，（什么类型都行，只要你传入的变量能够在函数内部正常工作即可）
那如何多参数的情况下怎么处理？？
函数表达式 把匿名函数赋值给一个变量也是可以的
let add=function(){
let result = 0;
for(let elem of arguments){
result+=elem;
}
return result;
}直接给add变量赋值一个函数，现在的add变量类型就叫做function类型，对于function类型的变量是可以调用的
<2>箭头函数
()=>{ }，不能在 =>后换行
创建更加简洁函数表达式语法，更适合用于需要匿名函数的地方
let f=()=>{console.log(1)}; f();
f1=()=>console.log(1); //如果后面只有一条语句 可以省{}
f2=()=>{return 1}; // 1只有return省略{}时
let f3=(n)=>n+1; //2必须省略return
f3=n=>n+1; //只有1个实参可以省略（）
let f4=(i,)=>{let k; return i+j+k};<3>回调函数
回调函数是作为另一个函数的实参，并在外部函数内被调用，用以完成某种任务的函数，外层函数实现共性抽象，里层函数实现差异化处理
//要实现的操作 但是可能很多相似的 多次实现需要写更多的代码
function inside(name){
console.log('hello '+name);
}
//写一个函数来回调我们需要的函数 传参就是一个函数
function outside(callback){
let name='许某';
//这里callback就是 inside
callback(name);
}
//调用外层函数即可
outside(inside);7、JS作用域
当代码中访问某个变量的时候要去哪里找这个变量，JS会先找当前作用域，如果当前没有，就往上层作用域找，一直往上找直到全局作用域，如果还找不到，就报错
let num=1;
function test1(){
//二次找值 当前作用域 num =2
let num=2;
function test2(){
//此处先找 当前作用域的 num值=3
let num=3;
console.log("test2:"+num);
}
test2();
console.log("test1:"+num);
}
test1();
console.log("global:"+num);//第三次调用num = 1针对每个作用域去找，如果当前作用域就没有，就到上层作用域去找
8、JS对象
js不是面向对象的编程语言，但是这里存在对象概念
意味着js中关于对象的设定和java差别很大，js中没有封装，继承，多态，甚至没有类，所有的对象类型都是object，js没有区分这么细，随便拿出个啥对象，大家都是object
JS的对象，有属性，也有方法的（方法本质上也是属性，因为函数在js中是一等公民）
let student={
name:'许某',
age:25,
height:180,
weight:70,
sing:function(){
console.log("我是小许");
},
dance:function(){
console.log("武术");
}
};以上有点像C语言结构体，但是不完全像，就是表示在创建对象中可以设置元素,不同之处是可以存放方法：
JS中对象里面有啥属性，有啥方法，都不是提前约定好的，而是随时可以添加的
let student =new Object();
student.name='许某';
student.age=25;
student.sing=function(){
console.log('我是小许');
}
console.log(student);
扩展：在JS的ES6版本中，引入class关键字，js就也可以定义“类”，再通过类创建实例
JS与java区别 最大的差别，动态类型/弱类型
2、DOM
DOM全称为 Document Object Model 文档对象模型，把html的每个标签，都是可以映射到js中的一个对应对象的
<1>标签上显示啥，都可以通过js对象感知到
<2>js对象修改对应属性，能够影响到标签的展示
通过dom可以让JS代码来操作页面元素
DOM api有很多，此处只是平常很常见的
2.1、选中页面元素
querySelector （css选择器）
注：getElementById也就是getElement系列的也可以使用，但是querySelector比较新也好用
let elem1=document.querySelector();使用方法就是以上操作，传的参数就是 css 中的类或者 id等
此处document相当于是浏览器的全局对象，任何一个页面，都会有一个document对象，所有dom的api都是通过document对象来展开的
事例：
如果有两个.box都会打出来吗？？？
那就会默认选中第一个 ，如果想要全部都选出来，使用另外一个方法querySelectorAll（）（返回数组）
对页面操作需要达到的效果如：事件就是针对用户的操作进行一些响应，要能够和用户交互，就需要知道用户干了啥，用户做的一些动作，就会在浏览器中产生一些事件，代码就需要针对事件做出反应
针对网页的事件：鼠标点击、鼠标双击、鼠标移动、按键、浏览器窗口
事件三要素：
<1>事件源：哪个元素产生的事件
<2>事件类型：点击、双击、移动、键盘按下等等
<3>事件处理程序：事件发生之后，要执行哪个代码（要执行的代码都是提前设定好的）
前端页面中，针对事件也是要有不同的处理方式，都是开始的时候就设定好的（事件绑定）
事例：
<1>事件源：老爹
<2>事件类型：面色不善
<3>事件处理程序：赶紧回想最近做了啥出格的事情，赶紧承认错误，免得被收拾一顿（报错）
方法一：
<div class="box" onclick="alert('hello')">abc</div>
最简单的方式，直接在元素中使用onxxx这样类似的方法，来绑定一个事件处理程序
注：alert（）是一个弹框
方法二：
<div class="box">abc</div>
<script>
let div=document.querySelector('.box');
div.onclick=function(){
alert('hello');
}
</script>在script标签内部写 JS操作 直接做出反应（效果和方法一是一样的，建议使用方法二，方便，规整）
2.2、获取/修改元素内容
属性元素：
选获取到该元素，使用innerHTML属性，就能拿到元素里的内容，修改该属性，就会影响到界面的显示
<div class="box">abc</div>
<script>
let div=document.querySelector('.box');
//每次点击都在原来的基础上加上一个 字符 a
//innerHTML 返回的本身就是一个字符串
div.onclick=function(){
console.log(div.innerHTML);
div.innerHTML+='a';
}
</script>
获取/修改元素属性html标签的属性，也会映射到JS对象中，例如上面选中的是.box类 该位置传参也可以传参为div，毕竟此处就一个div （这里想表达的意思是，选中的可以是html的标签进行操作）
表单元素：
表单元素（input，textarea，select等）有一些特别的属性，普通标签没有的
innerHTML得到的是标签的内容（开始标签和结束标签中间夹着的内容）
input标签是一个单标签，没有内容（是输入内容）
给input里放置一个数字，每次点击按钮 让数字+1，显示之后会有什么结果？？
样式属性：
<1>修改内敛样式
（修改style属性的值）
style里的属性名字都是和CSS中的一致（脊柱命名换成驼峰即可）
<div style="font-size: 20px;"> 当前字体大小</div>
<script>
let div=document.querySelector('div');
//单击后会将字符
div.onclick=function(){
//点击增大的操作 fontSize 对应的是一个字符串 所以需要变大
//就需要转换为数字 进行加起来 最后加px 转化为数组
div.style.fontSize=parseInt(div.style.fontSize)+20+'px';
//驼峰命名法
console.log(div.style.fontSize);
}
</script><1>CSS里面是不需要进行算术运算 不会被当做减号 / 负号
<2>CSS不区分大小写的 ，使用驼峰不合适fontSize 和 fontsize一样了
上述操作都是针对于当前页面已有的元素进行展开的
<1>新增元素 ：
创建一个元素 ； 把这个元素放到dom树中（createElement） 把元素加入到子元素末尾
<2>删除元素：
parentElem.removeChild(childElem);
insertBefore()把元素加到指定子元素的前面（中间位置插入）
3、JS案例
3.1、网页版本猜数字
注：当前只是一个简易版 ，只是为了学习JS带来的视觉感，娱乐意义不大
<1>生成一个1-100之间的随机整数
<2>让用户来输入一个数字
<3>根据输入的数字的大小关系，给出提示高了或者低了或者猜对了
<body>
<!-- 猜数字 就需要一个简单的输入框 -->
<div>请输入猜的数字</div>
<input type="text">
<!-- 提交按钮 使用js衔接 -->
<button>提交</button>
<div class="result">
</div>
<script>
// 猜数为了能够更好 所以猜的数字就是随机的 Math.random()*100
// Math.random()*100 表示就是[0,100) 但是不包含100
// 所以整体+1 Math.random()*100+1
let toGuess=parseInt(100*Math.random())+1;
// 这里我们打印出来猜的数字 为了验证
console.log(toGuess);
// 以下三个 选择CSS进行预备进行操作
let button=document.querySelector('button');
let resultdiv=document.querySelector('.result');
let input=document.querySelector('input');
// 点击操作 对应一个函数操作
button.onclick=function(){
// 如果输入框中 是空的 那就直接返回 因为没有任何意义
if(input.value==''){
return ;
}
// 将填写的字符串 转换为 数字为了方面比较
let inputNum=parseInt(input.value);
//填写的数字 随机数字进行比较 以下是所有情况
if(inputNum<toGuess){
resultdiv.innerHTML='低了';
}else if(input>toGuess){
resultdiv.innerHTML='高了';
}else{
resultdiv.innerHTML='猜对了';
}
}
</script>
</body>
3.2、网页版表白墙
注：当前只是一个简易版 ，只是为了学习JS带来的视觉感，娱乐意义不大
<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>Document</title>
<style>
/* 首先取出掉 网页自动默认的 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 整个第一级块级 */
.container{
/* 设置宽度 */
width: 600px;
/* 外边距涉及为了居中 */
margin: 0 auto;
}
/* 标题居中 */
h1{
text-align: center;
}
/* 隐晦 */
p{
/* 内容居中 */
text-align: center;
/* 设置颜色 */
color: #666;
/* 涉及外边框 上下长度20px 左右居中 */
margin: 20px 0;
}
/* 针对块元素 使用弹性布局 能便于对齐 */
.row{
display: flex;
/* 设置相关 上下边距 */
height: 40px;
/* 水平 */
justify-content: center;
/* 垂直 */
align-items: center;
}
/* 文字对应的 左边 */
.row span{
width: 80px;
}
/* 输入框对应右边 */
.row input{
width: 200px;
height: 30px;
}
/* 针对span + input 的宽度 设置的按钮 */
.row button{
width: 280px;
height: 30px;
color: white;
background-color: orange;
border: none;
/* 圆角矩形 设置弧度 */
border-radius: 5px;
}
/* 伪类 点击变换颜色 */
.row button:active{
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<!-- 先写一个表头 -->
<h1>表白墙</h1>
<!-- 下面显示一行隐晦的文字 -->
<P>输入内容后点击提交，信息会显示到下方表格中</P>
<!-- 进行块级处理 -->
<div class="row">
<span>谁：</span>
<input type="text">
</div>
<!-- 进行块级处理 -->
<div class="row">
<span>对谁：</span>
<input type="text">
</div>
<!-- 进行块级处理 -->
<div class="row">
<span>说：</span>
<input type="text">
</div>
<!-- 进行块级处理 -->
<div class="row">
<button id="submit">提交</button>
</div>
<div class="row">
<button id="revert">撤销</button>
</div>
</div>
<script>
//实现提交操纵 点击提交
// 获取 属性或者类 进行动态操作
let containerDiv = document.querySelector('.container');
let inputs = document.querySelectorAll('input');
let button = document.querySelector('#submit');
button.onclick=function(){
// 提交按钮 需要处理以下操作
// 获得三个输入框的内容
let from = inputs[0].value;
let to = inputs[1].value;
let msg = inputs[2].value;
// 如果有一个是空框的话直接返回
if (from == '' || to == '' || msg == '') {
return;
}
// 2. 构造新 div
let rowDiv = document.createElement('div');
// 给创建的 div 两个类
rowDiv.className = 'row message';
// 该块元素 的内容 以字符串形式放在div中
rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
// 创建的div 显示在最后位置的父元素的下面 也就是container
containerDiv.appendChild(rowDiv);
// 循环 将inputs 输出
for(let input of inputs){
input.value='';
}
}
// 选择撤销按钮 进行操作
let revertButton = document.querySelector('#revert');
revertButton.onclick = function() {
// 针对 message 作为选择对象， 也就是上面创建的新的div 做操作
let rows = document.querySelectorAll('.message');
// 为了保证不会一直删除 记录好产生的个数 不为null 没有长度就结束了
if (rows == null || rows.length == 0) {
return;
}
// 每次撤销都会执行 新的div减少一个
containerDiv.removeChild(rows[rows.length - 1]);
}
</script>
</div>
</body>
</html>运行结果：
