前端学习：JavaScript入门

前言

在学习过HTML和CSS之后，我们终于到了前端三剑客的最后一位：JavaScript的学习的。开宗明义，概念先行！什么是JavaScript呢？百度百科的解释如下： JavaScript就是为网景公司的浏览器而生的。因为网景的高层特别喜欢Java这门语言，所以决定仿照Java风格设计一门语言。这就是JavaScript的诞生原因。现在JavaScript的标准是ECMAScript。因为JavaScript语言的本身不严谨性，所以给其设置了一套规范。

class01

1.我的第一个JavaScript

JavaScript的写法很简单，也是分为内部引入和外部引入。

内部就是写一个<script>标签，在其中写下JavaScript的代码就行了。外部映入就是引入一个src，用法就是<script src="js/jsp.js"></script>，其中src就是外部js文件的路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    script标签内部输入JavaScript代码
    <script>
        alert("hello world");
    </script>

    <!--外部引入一个js文件-->
    <script src="js/jsp.js"></script>

    <!--不写默认是JavaScript的type-->
    <script type="text/javascript"></script>


</head>
<body>

</body>
</html>

2.js基本语法

js和所有语言一眼，都有变量，但是它的独特性就是，没有所谓的int型、char型、bool型。就只有var和let。var一般用来做成员变量，let用来做局部变量。（其实都用一种也行）。当然，还有一种恒量，我们用const表示。 js的条件流程控制和c语言、Java都一样，if-else语句，while循环，for循环，do-while循环都是存在的，语法规范也都一样，这里就不多赘述了。上一个例子。

    <!--JavaScript严格区分大小写-->
    <script>
        // 1、定义变量   变量类型 变量名 = 变量值；
        var num1 = 1;
        var num2 = 2;
        const PI = '3.14';
        // alert(num);

        // 2、条件控制
        if (num1 < num2){
            alert("true");
        }

        // 在浏览器的控制台打印
        // console.log(num1);
    </script>

3.严格模式

由于js这门语言的规范性太过于松散，基本上除了乱写，写什么都不会报错，所以有了严格strict模式，使用方法就是在script的最开头写一行

"use strict"

举个例子：

    <script>
        "use strict"    // 严格检查模式
        // 都使用let 设置变量
        // var相当于成员变量
        // let相当于局部变量
        let i;
        i = 1;

    </script>

4.数据类型

在刚刚我们已经讲过JavaScript的数据类型了，我们直接看：

    <script>
        "use strict"    // 严格检查模式
        // 都使用let 设置变量
        // var相当于成员变量
        // let相当于局部变量
        let i;
        i = 1;

    </script>

class02

1.字符串

JavaScript中的字符串其实也是let变量，只不过js中有内置方法来处理字符串。而且有多行字符串编写的：

    <script>

        // 字符串不可变,不可再次被重新赋值
        // 字符串方法、属性和java差不多
        let str = "1234";
        console.log(str.length); // 字符串的长度
        console.log(str.charAt(0)); // 0号位置的元素
        str.toLocaleLowerCase();    // 转化为小写
        str.toLocaleUpperCase();    // 转化为大写

        // 多行字符串编写 用   ``
        let str1 = `你好
        您好
        他好
        我也好`;

        // 模板字符串
        // ${xxx} 直接在其他字符串中应用xxx字符串
        let name = "woodwhale";
        let msg = `你好,${name}`;


    </script>

2.数组

JavaScript中数组的方法和Java中的处理数组的方法类似。下面我们举几个具体的方法来看：

    <script>
        // Array可以包含任意的数据类型
        let arr = [1,2,3,4,"123",true];
        console.log(arr.length);

        // 如果给数组赋值,数组的大小会改变
        arr.length = 1; // 这样操作arr只剩下 1

        arr.indexof(2); // 获取下标为 2 的元素

        // slice() 截取数组的一部分,返回一个新数组,类似于String中的substring
        let arr0 = arr.slice();

        // push() pop()
        arr.push(1);        // 压入到尾部
        arr.pop(1);         // 弹出尾巴的一个元素

        // unshift() shift()
        arr.unshift(1);     // 压入到头部
        arr.shift(1);       // 弹出头部的一个元素

        // 排序 sort()
        arr1 = ["B","C","A"];
        arr1.sort();

        // 元素反转 reverse()
        arr2 = ["a","b","c"];
        arr2.reverse();

        // 数组拼接 concat()
        arr.concat([1,2,3]);        // 没有改变原数组，只是会返回一个新的数组

        // 连接符 join
        arr.join('-');      // 打印拼接数组，使用特定的字符串连接

        // 多维数组
        arr = [[1,2],[3,4],[5,6]];

        // 数组填充
        arr.fill(1);



    </script>

3.对象

JavaScript也是一门面向对象的语言，自然存在“对象”的说法。对象的表示方法和Java并不一样。Java中是通过new的方式创建对象，而JavaScript是通过“键值对”的方式来描述对象。下面我们来看例子：

    <script>
        "use strict"

        // 若干个键值对构建对线
        // JavaScript中所有的键都是字符串，值是任意对象
        /*
        var 对象名 = {
            属性名: 属性值，
            属性名: 属性值，
            属性名: 属性值
        }
        */
        // 若干个属性用逗号隔开，最后一个属性不加逗号
        let person = {
            name: "woodwhale",
            age: "18",
            email: "[email protected]"
        }

        //  给对象赋值
        person.age = "19";
        // 使用一个不存在的对象属性不会报错，只会返回undefined
        console.log(person.n);

        // 动态的的删减属性， 通过delete删除对象的属性
        delete person.name;

        // 动态的添加——直接赋值就行了
        person.new = "new";

        // 判断属性值是否在这个对象中 xxx in xxx
        "age" in person;

        // 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
        person.hasOwnProperty("toString");
        person.hasOwnProperty("age");
        
    </script>

4.流程控制

js中的流程控制说白了其实和其他语言的一样,下面举一些例子来引入吧

    <script>
        "use strict"

        // 简单的if else语句 和 Java 一样
        let age = 3;
        if (age > 3) {
            alert("true");
        } else {
            alert("false");
        }

        // 循环语句 和 Java 一致
        while (age < 100) {
            age += 1;
        }
        console.log(age);

        for (let i = 0; i < 100; i++) {
            console.log(i);
        }

        let arr = [12,123,4,24,43,4,324,234,3,34,2];

        arr.forEach(function (value){
            console.log((value));
        })

        /*
        java 中的foreach循环
        for(Tyep str : el){}

        js中是
        for (let index in object){} index是下标

        for （let x of object）{}
         */
        for (let num in arr) {
            if (arr.hasOwnProperty(num)){
                console.log("存在");
                console.log(arr[num]);
            }
        }

        // 遍历arr
        for (let num of arr) {
            console.log(num);
        }
    </script>

5.map和set

js中的map和set功能和java中的set、map是一样的，但是写法并不相同。我们直接看：

    <script>
        "use strict"

        // ES6新特性
        let map = new Map([['tom',100],['jack',90],['woodwhale',100]]);
        let name = map.get('woodwhale');        // 通过key获得value
        map.set('admin',123456);        // 添加
        // 遍历map
        for (let mapElement of map) {
            console.log(mapElement);
        }

        let set = new Set([3,1,2,3,1,1,2,1,1]); // set可以去重
        set.delete(1);  // set中删除
        set.add(2);     // set中添加
        let flag = set.has(3);  // 是否包含 返回true、false
        console.log(flag);
        // 遍历set
        for (let setElement of set) {
            console.log(setElement);
        }

class03

1.定义函数

由于js没有特定的类型，所以函数返回的都是let\var，并且函数统一用function来新建

 <script>
        // 如果没有执行return，函数也会返回结果，undefined


        // 定义一个绝对值函数
        function  abs(x) {
            // 手动抛出异常
            if (typeof x !== 'number') {
                throw 'not a number';
            }
            if (x >= 0) {
                return x;
            }else {
                return  -x;
            }
        }

        // 调用函数
        // JavaScript可以传任意个参数，也可以不传参数
        let num = abs(10);
        let num2 = abs();

    </script>

2.函数参数

js的函数参数可以是多个，使用方法和Java一样，但是js有两种特殊的传参方式，分别是arguments和rest，具体方法如下

<script>
        // arguments可以将传递进来的所有参数转化为一个数组
        function f(x) {
            for (let argument of arguments) {
                console.log(argument);
            }
        }

        // rest获取除了已经定义的参数之外的其他多余参数，必须加载最后，用三个.描述
        function f2(a,b,...rest){
            console.log("a->"+a);
            console.log("b->"+b);
            console.log(rest);
        }
    </script>

3.变量作用域

js的函数变量域和Java略有不同，我们通过下面几个例子来看看！

  function x() {
            let x = 1;
            x += 1;
        }
        // 函数中的x是不能脱离函数存在的
        //如果  x += 2;  写在外面  会报错

 // 内部函数可以访问外部函数的成员
        function x2() {
            let x = 1;
            function x3() {
                let y = x +1;
            }
            console.log(y);
        }

// 如果内部函数的成员名和外部函数成员名相同，那么内部函数会屏蔽外部函数成员
        function x4() {
            let x = 1;
            function x3() {
                let x = x +1;
                console.log(x);
            }
            console.log(x);
        }

 // window包含所有全局变量
        var str = 'str';
        alert(str);
        alert(window.str);

// JavaScript只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数
        //作用范围内找到，就会向外查找，如果在全局作用域都没有找到，或报错 “Refrence”\
        var old = window.alert;
        window.alert = function () {

        }
        old(str);   // 会执行
        window.alert(str);  // 不会执行
        window.alert = old; // 改回来

        // 规范
        // 由于我们所有的全局变量会绑定到我们的windows上，如果不同的js文件，使用了相同的全局变量，那么会产生冲突
        // 把自己的代码全部放入自己定义的唯一空间名字中，降低全局变量名冲突的问题
        var woodwhale = {};
        woodwhale.name = "wyh";
        woodwhale.add = function ( a, b) {
            return a + b;
        }

 // 局部作用域let
        function For() {
            for(var i = 0; i < 100; i++) {
                console.log(i);
            }
            console.log(i);     // 发现这条语句也会被执行
        }
        // 为了解决上述的问题,引出let关键字 (ES6特性),建议使用let去定义局部作用域的变量

// 常量const (类似于java的final)
        const PI = '3.14';
        console.log(PI);

4.方法

js作为面向对象语言，方法的创建思想和Java一样，只不过写法不同而已，具体的两种写法如下：

 <script>

        // 方法的定义、调用
        
        // 在woodwhale这个类中设置age方法
        let woodwhale = {
            name: 'wyh',
            birth: 2002,
            age : function () {
                return new Date().getFullYear() - this.birth;
            }
        }
        // 直接调用woodwhale中的age（）方法
        console.log(woodwhale.age());

        // 等价于如下

        function getAge() {
            return new Date().getFullYear() - this.birth;       // 这里的this如果不适用wooodwhale1.getAge(),默认使用windows.getAge()
        }
        let woodwhale1 = {
            name: 'wyh',
            birth: 2002,
            age : getAge()
         }


        // apply 可以将this指针指向指定的对象
        // apply(对象名，[传参]）
        console.log(getAge.apply(woodwhale1,[]));

    </script>

5.内部对象

所谓内部对象,其实就是js内部自带的对象，这些可以去js官网查阅

    <script>

        // typeof 可以显示对象
        typeof 123;
        typeof true;
        typeof '123';
        typeof Math.abs();

        // 1、Date
        let now = new Date();
        now.getFullYear();  // 年
        now.getMonth(); // 月 0-11 分别代表1-12月
        now.getDate();  // 日期
        now.getDay();   // 星期几
        now.getHours(); // 时
        now.getMinutes();   // 分
        now.getSeconds();   // 秒

        now.getTime();  // 时间戳 （全世界统一标准） 1970.1.1 0：00：00 到现在的毫秒数
        now.toLocaleDateString();   // 获取本地时间，String类型

    </script>

6.JSON

所谓JSON其实是一种轻量级的数据交换格式。JSON存储类型可以将对象存储，我们也可以将JSON转化为对象。

<script>

        // JSON存储类型，可以将对象存储
        let woodwhale = {
            name: 'wyh',
            age: 18,
            sex: '男'
        }
        // 将对象转化为JSON格式
        console.log(JSON.stringify(woodwhale));
        // 输出：{"name":"wyh","age":18,"sex":"男"}

        // JSON格式 （字符串）
        // 对象用{} 数组用[] 所有的键值对用key：value
        // 将JSON格式转化为对象
        let obj = JSON.parse('{"name":"wyh","age":18,"sex":"男"}');
        console.log(obj);
        /*
        打印出如下
        Objectage: name: "wyh"sex: "男"__proto__: Object
        */
    </script>

class04

1.面向对象

js作为面向对象语言，必然是有面向对象的思想的。这里我们学习__proto__，这个指的就是一个对象的“原型”。下面我们来看例子

<script>
        // 类：模板
        // 对象：具体的实例
        // 在JavaScript这个需要


        let Student = {
            name: 'woodwhale',
            age: 18,
            run:function (){
                console.log(this.name + "run...");
            }
        };

        let xiaoming = {
            name: 'xiaoming';
        };
        // xiaoming 的 “原型” 是 Student
        xiaoming.__proto__ = Student;
        console.log(xiaoming.run);

        let Bird = {
            fly:function () {
                console.log((this.name + 'fly...'))
            }
        };
        // 重新将xiaoming 的 “原型” 定义为 Bird
        xiaoming.__proto__ = Bird;
        console.log(xiaoming.fly);
    </script>

2.class继承

在ES6的新特性中，js多出了class关键字，即Java中的“类”，也有了extends关键字，即Java中的“继承”，我们来看具体的例子：

<script>
        // ES6之前的对象
        function student(name) {
            this.name = name;
        }

        // 给Student新增一个方法
        student().prototype.hello = function () {
            alert('Hello');
        }


        // class继承 ES6新特性
        // 直接定义一个学生的类
        class Student {

            // 构造器
            constructor(name) {
                this.name = name;
            }
            hello() {
                alert('hello');
            }
        }

        // 继承父类
        class xiaoStudent extends Student {
            constructor(name,garde) {
                super(name);
                this.garde = garde;
            }

            myGrade() {
                alert("I am studnet!");
            }
        }

        let xiaoming = new Student('xiaoming');
        let xiaohong = new xiaoStudent('xiaohong');
        xiaoming.hello();
        xiaohong.myGrade();


    </script>

class05

1.操作BOM

BOM即浏览器对象模型，我们可以通过js来操作BOM

<script>
        // JavaScript和浏览器的关系？
        // JavaScript诞生就是为了能够让他在浏览器中运行
        // 浏览器主流内核：IE、chrome、safari、Firefox

        // BOM：浏览器对象模型

        // window
        // 代表浏览器窗口
        window.alert(1);
        window.innerHeight;         // 查看浏览器当前尺寸
        window.innerWidth;
        window.outerHeight;
        window.outerWidth;

        // navigator
        // 封装了浏览器的信息
        // 大多数时候，我们不会使用navigator对象，因为会被认为修改
        // 不建议使用这些属性来判断和编写代码
        navigator.appVersion;       // 浏览器版本等信息
        navigator.userAgent;
        navigator.platform;

        // screen
        screen.height;      // 电脑尺寸
        screen.width;

        // location
        // 代表当前页面的url信息
        location.reload();      // 刷新
        location.assign("https://www.bilibili.com");  // 设置新的地址

        // document
        // 代表当前的页面，html dom文档树
        document.title = "woodwhale";       // 改变当前页面titl
        let app = document.getElementById('app');   // 获取 id 为 app 的html，转为对象
        document.cookie;    // 获取cookie

        // history
        // 代表浏览器的历史记录
        history.back();     // 返回
        history.forward();  // 前进
    </script>

2.操作DOM

DOM即文档对象模型，我们操作DOM的核心就是对浏览器网页进行“增删改查”的功能。在我们操作一个DOM节点之前，js必须先获得这个DOM节点。

<script>
    // DOM：文档对象模型
    // 核心：
    // 浏览器网页就是一个DOM树形结构
    // 更新：更新DOM节点
    // 遍历：遍历DOM节点
    // 删除：删除DOM节点
    // 添加：添加一个新的节点
    // 要操作一个DOM节点，就必须先获得这个DOM节点

    // 获取节点
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');
    let father = document.getElementById('father');

    // 获取父节点下的所有子节点
    let children = father.children;


    // 更新节点
    let id1 = document.getElementById('id1'); // 先获取DOM节点
    id1.innerText = 'new p1';    // 修改文本
    id1.innerHTML = '<strong> new new p1</strong>'; // 修改HTML
    id1.style.color = 'red';    // css方式改变颜色
    id1.style.fontSize = '200px';   // css方式改变字体大小（驼峰命名）

    // 删除节点
    // 删除节点的步骤：找到自己的父节点，调用父节点的方法来删除自己 （不能自杀，通过父节点这个中介来删除）
    let Father = p1.parentElement;
    Father.removeChild(p1);     // 移除p1
    Father.removeChild(father.children[0]);     // 移除第一孩子
    // 删除是动态的，0孩子删除完，1孩子会到0孩子位置上


    // 插入节点
    // 我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了
    // 到那时这个DOM节点已经存在元素了，就不能按上述方法操作
    // 我们通过追加的方式完成 “插入节点” 的操作
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    list.appendChild(js);    // 将js追加到list子项

    // 通过js创建一个新的节点
    let newP = document.createElement('p'); // 创建一个p标签
    newP.id = 'newp';
    newP.innerText = 'hello!';
    list.appendChild(newP);

    // 创建一个标签节点
    let myScript = document.createElement('script');
    // 通过setAttribute修改任意属性
    myScript.setAttribute('type','test/javascript');
    myScript.innerText = '12345';
    list.appendChild(myScript);

    // 创建一个空的style标签
    let myStyle = document.createElement('style');
    myStyle.setAttribute('type','test/css');
    myStyle.innerHTML = 'body{background-color: aqua;}'; // 设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle);


    let ee = document.getElementById('ee');
    let js2 = document.getElementById('js');
    let list2 = document.getElementById('list');
    // 要包含的节点.insertBefore（newNode，targetNode）
    list2.insertBefore(js2,ee);
</script>

3.提交表单

表单我们在HTML中就学习过了。文本框、下拉框、单选框、多选框、隐藏域、密码框等等等等都是表单的内容。表单的目的就是提交信息，而我们js可以通过代码提交表单信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
表单是什么？      from DOM树

文本框     text
下拉框     <select>
    单选框     radio
    多选框     checkbox
    隐藏域     hidden
    密码框     password
    ....
    */

    /*
    表单的目的：提交信息

    1、获得要提交的信息
-->
<body>


<form action="#" method="post">
    <p>
        <span>用户名：</span>
        <input type="text" id="username">
    </p>

    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="women" id="girl"> 女
    </p>

    <input type="submit">
</form>



</body>


<script>
    let username = document.getElementById('username');
    // 修改输入框的值
    username.value = 'woodwhale';
    // 得到输入框的值
    console.log(username.value);

    let boy = document.getElementById('boy');
    let girl = document.getElementById('girl');
    // 查看返回的结果是否为ture,true表示被选中
    console.log(boy.checked);
    console.log(girl.checked);
    boy.checked = true;
</script>


</html>

页面效果如下:

4.提交表单

我们提交表单时，可以通过js代码来获取提交表单时的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<!--onsubmit 提交表单时触发-->
<form action="#" method="post" onsubmit="submit()">
    <p>
        <span>用户名：</span>
        <input type="text" id="username" name="username">
    </p>

    <p>
        <span>密码：</span>
        <input type="password" id="password">
    </p>
    
    <!--绑定事件 onclick 被点击触发-->
    <input type="submit">
</form>


</body>

<script>
    function submit() {
        let uname = document.getElementById('username');
        let pwd = document.getElementById('password');
    }
</script>
</html>

class06

1.jQuery

jQuery的概念介绍:

其实jQuery就是一个外部框架,类似于Java和python的外部包一样。我们首先去官网下载jQuery。下载地址下载完了之后放入lib目录，之后可以直接引用。之后使用这样就可以了，lib是我自己放的目录。

 <script src="lib/jQuery.js"></script>

我们先学习jQuery的基本语法：

<script>
    // jQuery语法
    // $(selector).action()

    // 选择器就是css的选择器
    $('#test-jQuery').click(function (){
        alert("hello,jQuery")
    })
</script>

2.选择器

jQuery的选择器包含了css的多种选择器，但不止这些。更多的可以去网站上找。

<script>
    // 原生js，选择器少，麻烦不好记
    // 标签选择器
    document.getElementsByTagName();
    // id选择器
    document.getElementById();
    // 类选择器
    document.getElementsByClassName();

    // jQuery实现选择器（更多去网上找）
    $('p').click()  // 标签选择器
    $('#id1').click()   // id选择器
    $('.class1').click()    // 类选择器
    
</script>

3.事件

这里我们用鼠标事件举例用jQuery的 mousemove方法来实现鼠标坐标的实时显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jQuery.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--获取鼠标的移动轨迹-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    // 当网页元素加载完毕之后才能响应事件
    $(document).ready(function () {

    })

    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
        })
    })
</script>

</body>
</html>

效果如下：

4.jQuery操作DOM元素

jQuery也可以操作DOM元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jQuery.js"></script>
</head>
<body>

<ul id="test-ul">
    <li class="js">javascript</li>
    <li name="python">python</li>
</ul>

<script>
    // 节点文本操作
    $('#test-ul li[name=python]').text();   // 获取值

    $('#test-ul li[name=python]').text('new_python');   // 设置值

    // $('#test-ul').html();   // 获取值
    // $('#test-ul').html('<strong>new</strong>');  // 设置值

    // css的操作
    $('#test-ul li[name=python]').css('color', 'red');

    // 元素的显示和隐藏 ： 本质 display：none
    $('#test-ul li[name=python]').hide();   // 元素隐藏
    $('#test-ul li[name=python]').show();   // 元素显示

</script>

</body>
</html>