JavaScript学习总结

1. 什么是JavaScript？

        JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

2. JS初体验

1. 行内式JS：<input type=”button” value=”按钮” οnclick=”alert(1)”></button>
2. 内嵌式JS：<script></script>，在标签中写自己需要的代码，理论上可以放在页面的所有位置
3. 外部式JS：<script src=”test.js”>/*里面不要写东西*/</script>，src中放想要引入的js文件的位置

3. 输入输出

        输入：prompt(‘请输入’)

        输出框：alert(“输入一些东西”)

        控制台输出：console.log(“输出一点东西”)

4. 变量：js的数据类型只有程序在执行过程当中根据等号右边的值进行判断，和python类似

        变量声明：var age;  声明了一个age变量

        变量赋值：age=10;  给age变量进行赋值了

        变量的初始化：var age = 10;  对age变量进行初始化

        

        基本数据类型：

        数字型：Number，

        字符串型：string，

        布尔类型：boolean，

      还有几个比较特殊的类型：undefined——声明了变量，但是却没有赋值时，就会出现undefined，NaN；非数字型，例如：”num” + 1，就是一个NaN类型的数据（NaN：not a number）

        获取数据的类型：typeof，例如：

                var num = 1; console.log(typeof num);

        则最终结果会输出number，其余的变量的数据类型获取同理

        不同数据类型之间的转换：

        数字转换为字符串类型：String(100)，或者100 + ‘ ’(隐式转换)

        字符串转化为数字类型：parseInt(“2”)——转化为整数类型，

                                                parseFloat(“3.14”)——转化为浮点数类型，

                                                Number(“123”)——转化为数字类型的变量，

                                                (‘12’ - 0)或者(‘123’-‘120’)——隐式转换

        转化为布尔类型：空值，NaN，undefined，false，null值转化为false，其余的全部转化为true。例如：Boolean(‘’)会被转化为false值，Boolean(‘a’)则会被转化为true。

5、算数运算符：‘+’，‘-’，‘*’，‘/’，‘%’，‘++’，‘--’，在上面数据类型中就已经简单的运用过了，这里进行仔细的讲解。

        1、由于js中的小数和整数都是number类型，不存在类似整数除以整数还是整数的结论。

        2、字符串和其他的数据使用+号运算，会连接成一个新的字符串。

        3、字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算，否则就会返回一个NaN的结果，表示这不是一个数字。

6、比较运算符：>，>=，<，<=，!=，==，===，分别代表大于，大于等于，小于，小于等于，不等于，等于，恒等于，这里主要解释后面两个比较运算符

       console.log(‘22’ == 22);  结果输出为true，因为‘==’仅判断数值

       console.log(‘22’ === 22)，结果则输出为false，因为‘===’判断数值和数据类型

7、逻辑运算符：&&，||，!，

       &&：有假为假，全真为真，console.log(3<4&&8<7)，结果输出为false

       ||：有真为真，全假为假，console.log(3<4||8<7)，结果输出为true

       !：非，将真的变成假的，把假的变成真的，console.log(!(3<4))，结果输出为false

8、三元运算符：条件?表达式1 : 表达式2，如果条件为true，则返回表达式1，否则返回表达式2

       console.log(3 < 4 ? 1 : 2)，输出为1

9、判断语句，这里的形式和java中的判断语句一样

<script>
    var score = 70;
    if (score < 60) {
       console.log('未及格')
    } else if (60 <= score && score < 70) {
       console.log('及格')
    } else if (70 <= score && score < 80) {
       console.log('中')
    } else if (80 <= score && score < 90) {
       console.log('良')
    } else {
       console.log('优')
    }
</script>

10、循环语句，也和java 的一样

        1、while(循环条件){

                循环体;

              }

<script>
    var i = 0;
    while (i < 10) {
        console.log(i)
        i++;
    }
</script>

        2、do{

                循环体

        }while(循环条件);

<script>
    var i = 0;   
    do {
        console.log(i);
        i++;
    } while (i < 10);
</script>

        3、for(循环变量赋初值；循环条件；循环变量增值)

        {循环语句;}

<script>    
    for (var i = 0; i < 10; i++) {
        console.log(i);
        i++;
    }
</script>

11、函数

        1、函数定义

              方式一：

        

<script>
    function func1() {
        alert(1);
    }
</script>

             方式二：匿名函数

<script>
    // 函数表达式（匿名函数）
    var func = function() {
        console.log('我是一个函数表达式')
    }
    // 其中fun是一个变量名，并不是一个函数名
</script>

        2、函数调用：函数定义完成之后需要进行调用，不然函数时不会自己执行的，调用形式：

                function 函数名(形式参数){函数体}

                调用函数：函数名(实际参数);

<script>
    function func1() {
        alert('调用函数');
    }
    
    func();
</script>

       3、自定义函数：在实际情况中，函数可能会既有参数又有返回值，因此，有参函数和有返回值的函数也需要掌握

        有参函数的定义与调用

<script>
    // 不需要指定形参的类型
    function func1(a, b) {
        console.log(a + b);
    }
    func1(1, 2);  // 调用时要传入实际的参数
</script>

        有返回值函数的定义与调用

<script>
    function func1() {
        var result = 0;
        for (var i = 1; i < 10; i++) {
            result += i;
        }
        return result;
    }
    console.log(func1());
</script>

        既有参数又有返回值的函数的定义与调用

<script>
    function max(a, b) {
        return a > b ? a : b;
    }
    console.log(max(1, 2));
</script>

12、获取元素

        1、getElementById：通过标签id获取元素

<div id="time">2021-12-20</div>
<script>
    // 需要将标签放到下面
    var timer = document.getElementById('time')
    console.log(timer);
    // 返回的是一个对象
    console.log(typeof timer);
    // 打印元素对象的属性，更好的查看元素对象
    console.dir(timer);
</script>

        2、通过标签名获取元素

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ol id="ol">
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
</ol>
<script>
    // 返回元素对象的集合, 可以返回一个空的伪数组
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    // 可以通过遍历的方式打印其中的元素
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }

    // 两种方法
    // var ol = document.getElementsByTagName('ol');
    // console.log(ol[0].getElementsByTagName('li'));
    var ol = document.getElementsByTagName('ol');
    console.log(ol.getElementsByTagName('li'));
</script>

        3、根据类型返回元素对象

<div class="box"></div>
<div class="box"></div>
<script>
    // 根据类型获取元素对象
    var boxs = document.getElementsByClassName('box');
    console.log(boxs);
</script>

        4、选择器

<div class="box"></div>
<div class="box"></div>
<div id="nav">
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
</div>
<script>
    // 返回指定选择器的第一个元素对象
    // 必须告诉是什么选择器
    var firstbox = document.querySelector('.box');  // 类选择器，‘.’表示是类选择器
    console.log(firstbox);
    var firstnav = document.querySelector('#nav');  // id选择器，‘#’表示是id选择器
    console.log(firstnav);
    var firstli = document.querySelector('li');  // 标签选择器
    console.log(firstli);
    // 返回指定选择器的所有元素对象
    var allboxs = document.querySelectorAll('.box');
    console.log(allboxs);
</script>

13、事件

       三要素：1、事件源：被触发的对象

                     2、事件类型：如何触发——点击触发……

                     3、时间处理程序，通过函数赋值的方式完成

        常用事件：

      

         一个简单的事件：

<div>123</div>
<script>
    // 点击div 弹出‘我被选中了’
    // 1、确定事件源
    var div = document.querySelector('div');
    // 2、绑定事件
    div.onclick = function () {
        alert('我被选中了');
    }
</script>

        案例：注册框

<!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>
        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            padding-left: 20px;
        }

        .wrong {
            color: red;
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        var input = document.querySelector('.ipt')
        var message = document.querySelector('.message');
        // 失去焦点
        input.onblur = function () {
            if (this.value.length < 6) {
                message.className = 'message wrong';
                message.innerHTML = '密码的位数不足';
            }
            else if (this.value.length > 16) {
                message.className = 'message wrong';
                message.innerHTML = '密码的位数过多';
            }
            else {
                message.className = 'message';
                message.innerHTML = '请输入6~16位密码';
            }
        }
    </script>
</body>

</html>