JavaScript基础内容

日升时奋斗，日落时自省 

目录

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="优快云HtTML.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>

运行结果：