前端JavaScript的简单学习

1：什么是javaScript：是一门世界上最流行的脚本语言（注意，java和javaScript没有关系），大概10天就开发的，一个合格的后端人员，必须精通javaScript。（ECMAScript可以理解成是javaScript的一个标准）

2：javaScript

　　（1）快速入门javaScript

 

    <!--script:在里面写javaScript代码    -->
    <!--    <script>-->
    <!--        // alert表示弹出一个框-->
    <!--        alert("这是第一个javaScript程序");-->
    <!--    </script>-->

    <!--外部引入的方式，注意：Script必须是成对的出现,不能省略来写    -->
    <script src="js/a.js"></script>

 

　　（2）基本的语法

        'use strict';
        //1:正常的字符串使用单引号或者双引号包裹
        console.log("a");
        console.log('a');
        //2:拼接字符串可以用``进行使用(局部变量建议用let)
        let msg = `hello
        world
        message
        `
        let name = 'xst'
        let age = 3;
        console.log(`你好呀+${name}:+${age}`)//ES6的新语法
        //3：字符串的长度(字符串定义后不可变，不能重新对某个字符串进行赋值)
        let student = 'student'
        console.log(student.length)//7
        console.log(student[0])//s
        console.log(student.toUpperCase())//转换成大写STUDENT
        console.log(student.toLowerCase())//转换成小写
        console.log(student.indexOf('t'))//1获取t出现的第一个索引位置
        console.log(student.substring(1,3))//截取1,3的位置，包含1但是不包含3

　　（2）数组的详解

<script>
    'use strict'
    let arr = [1,2,3,4,5]
    //1:注意，假如给arr的length赋值，数组的长度会改变（如果赋值的过小，元素会丢失）
    console.log(arr.length)//5
    arr.length = 10;
    console.log(arr.length)//10
    //2:常用的数组中的方法
    console.log(arr.indexOf(2))//获取下标的索引1
    console.log(arr.slice(1,2))//截取方法，截取位置1到2的数组返回一个新的数组
    console.log(arr.slice(3))//从位置3开始截取
    let newArr = [1,2,3,4,5,6]
    //3：数组尾部的操作
    newArr.push(7,8,9,10)//向数组中的后面添加元素
    console.log(newArr.pop())//弹出的尾部的一个元素，这里应该是10
    console.log(newArr)//弹出之后重新打印将没有了
    //4:数组头部的操作
    newArr.unshift(1,2,3,4,5)//向头部添加元素
    newArr.shift()//弹出头部的一个元素
    //5:排序
    newArr.sort()
    //6:反转
    newArr.reverse()
    //7:拼接
    let otherArray = ['a','b','c'];
    otherArray.concat([1,2,3,4])//返回一个新的数组['a','b','c',1,2,3,4]
    //8:拼接
    let oneArr = [1,2,3]
    oneArr.join('-')
    console.log(oneArr);//'1-2-3'
</script>

　　（3）对象的详解

<script>
    'use strict'
    /*1：定义对象的格式（js中的对象一般用大括号）
        var object = {
            属性名:属性值，
            属性名:属性值，
            属性名：属性值
        }
     */
    var obj = {
        name: 'xst',
        age: 12,
        school: '清华大学'
    }
    //对象的赋值的问题
    obj.name = 'mm'
    console.log(obj.name)//mm
    //动态的删除的值
    delete obj.name
    console.log(obj.name)//undefined
    //动态的添加值
    obj.aa = 'aa'
    console.log(obj.aa)
    //判断这个属性值是否在这个对象中(xx in xxx)javaScript中所有的键都是字符串
    console.log('aa' in obj)//true
    //判断这个对象中是否拥有这个属性
    console.log(obj.hasOwnProperty('aa'))//true

</script>

 

　　（4）流程控制：和java中的if else类似（不做过多的讲解）

　　（5）Map和Set集合（在ES6中的新特性）

 

    'use strict'
    //ES6的新语法
    //map:
    let map = new Map([['tom', 100], ['age', 99], ['haha', 98]]);
    console.log(map.get('tom'))//100
    map.set('key', 11111)
    console.log(map.get('key'))//11111
    //set:会自动去重
    let set = new Set([3, 1, 12, 3, 123, 123]);
    set.delete(3)//删除set中3这个元素
    set.add(9999)//添加9999到set中
    set.has(1)//判断这个set是否包含1这个元素

    //of 和in的区别  of是遍历每一个元素  in是遍历数组下标
    for (let a of map) {
        console.log(a)
    }
    for (let a of set) {
        console.log(a)
    }

 

 3：javaScript中的函数方法的定义

　　(1)函数的定义和试用

<script>
    /*1:函数的定义都是通过function来定义的（绝对值函数），一旦执行了return表示方法结束
        如果函数没有执行return 也会返回  返回的值为NaN
    */
    //定义方式1
    function abs(x) {
        if (x >= 0) {
            return x
        } else {
            return -x
        }
    }

    console.log(abs(-10))//10
    /*
     * 定义方式2：（两种定义方式的作用是一样的）
     */
    var abs = function (x) {
        if (x >= 0) {
            return x
        } else {
            return -x
        }
    }
    //2:javaScript可以传任意的参数,也可以不传递参数
    //手动定义异常
    var abs = function (x) {
        //typeOf：判断变量的类型
        if (typeof x !== "number") {
            throw  "x不是一个number"
        }
    }
    //3:arguments是js免费赠予的一个关键字,代表传进来的参数，是一个数组
    var a = function (x) {
        if (arguments.length === 1) {
            console.log("传进来了一个参数")
        }
        if (arguments.length === 2) {
            console.log("传进来了两个参数")
        }
    }

    //4：rest是ES6的新特性，获取除了已经定义的参数之外的所有参数（rest函数必须写在最后一个,必须用...）
    function m(a, b, ...rest) {
        console.log(a)
        console.log(b)
        console.log(rest.length)
        for (var i = 0; i < rest.length; i++) {
            console.log(rest[i])
        }
    }
    m(1, 2, 3, 4, 5, 6, 7, 8,)


</script>

　　（2）变量的作用域问题（var let const的区别）

    <script>
        /*  1：var定义的变量是存在作用域的，假设在函数体里面中声明的，在函数体外面不可以使用，
        *       （1）内部函数可以访问外部函数的成员变量
        */
        //2:变量的作用域问题
        function xst() {
            var x = 'x' + y;
            console.log(x)
            var y = 'y';
        }//结果xundefined：说明js执行引擎，自动提升了y的声明, 但是不会对y进行变量的赋值：所以所有的javaScript的变量定义发那个在头部
        //3：全局变量
        var z = '1'

        function method() {
            console.log(z);//1
        }

        method();
        console.log(z);//1
        //4:全局对象window(所有的全局变量,都会绑定在window中)
        var x = 'x'
        alert(x)
        alert(window.x)
        //5:由于所有的全局变量都会绑定到window中，如果js文件中存在相同名称的全局变量就会产生冲突（如何解决）
        //唯一的变量
        var xst = {}
        xst.name = 'xxxxx';
        /*6:let关键字解决局部变量冲突的问题（ES6d的关键字）建议使用let关键字去定义局部作用域的变量
        *   常量const,在ES6之前都是用全大写的定义常量,这种方式不科学
        *       用const定义后的常量不能改变,它是一个只读变量（注意：const定义的数组和对象可改变）
        */

    </script>

 

　　（3）方法

<script>
    //1:方法就是把函数放在对象中使用,对象中只有属性和方法
    var xst = {
        name: 'aaa',
        birth: 2021,
        age: function () {
            //今年-出生年月
            let nowYear = new Date().getFullYear();
            return nowYear - this.birth;
        }
    }
    console.log(xst.age());
    //2:this关键字，this是无法指向的，谁调用它，this就指向谁
    //但是javaScript中的apply函数可以改变this指向问题
    var getAge = function () {
        let nowYear = new Date().getFullYear();
        return nowYear - this.birth;
    }
    getAge().apply(xst, [])//表示在调用这个getAge这个方法的时候，this的指向是xst，传的参数为空

</script>

　　（6）javaScript中常用的对象

　　　　1：typeOf(用来判断这个变量的类型)

typeof 123
'number'
typeof '123'
'string'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'

　　　　2：年份

    //年份
    var now = new Date();
    now.getFullYear()//获取当前年
    now.getMonth()//获取当前月（外国的月份是从0-11，即中国的1月表示为0）
    now.getDay()//星期几
    now.getDate()//获取当前日
    now.getHours()//获取时
    now.getMinutes()//获取秒
    now.getTime()//获取时间戳，全世界统一，从1976-1-1 0:00:00到现在时间的毫秒数
    new Date(now.getTime());//获取中国标准时间

　　　　3：JSON对象

<script>
    /*1：json是什么：json是一种轻量级的数据交换格式，简洁而清晰的层次结构使得json成为最理想的数据交换语言
     *  在js中，万物皆为对象，任何js支持的json数据类型表示
     *      格式：对象：{}，数组：[],所有的键值对都用key-value的形式
     *
    **/
    let user = {
        name: 'xst',
        age: 3,
        sex: '男'
    }
    let jsonUser = JSON.stringify(user)//将对象转成json对象
    console.log(user)
    console.log(jsonUser)
    let object = JSON.parse(jsonUser);//将json字符串转换为对象
    console.log(object);
</script>

4：javaScript中的原型继承

 

<script>
    var student = {
        name: 'xst',
        age: 1,
        run: function () {
            console.log(this.name + 'run....')
        }
    }
    var xiaoMing = {
        name: 'xiaoMing'
    }
    var xiaoMing = {...student}//student//这样表示xiaoMing的原型对象是Student
    xiaoMing.run()
</script>

 

<script>
    //给student增加一个方法
    //用ES6中引入的(注意class对象的首字母必须大写)
    class Student {
        constructor(name) {
            this.name = name
        }

        hello() {

            alert("这是hello语句")
        }
    }

    class SmallStudent extends Student {
        constructor(name, grade) {
            super(name)
            this.grade = grade;
        }

        MyMethod() {
            alert("我是个小学生")
        }
    }

    var xst = new Student("xst");
    xst.hello();
    var xiaoHong = new SmallStudent("小红");
    xiaoHong.MyMethod();
</script>

5：javaScript中操作BOM节点（重点）

　　（1）什么是BOM:浏览器对象

　　（2）window对象，代表浏览器窗口

window.innerHeight
397
window.innerWidth
1707
window.outerHeight
1019
window.outerWidth
1707

　　（3）Navigator（封装了浏览器的信息）不常用

navigator.appName
'Netscape'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
navigator.platform
'Win32'

 　　（4）screen（代表屏幕的尺寸）

screen.width
1707
screen.height
1067

 

 　　（5）location（代表当前页面的url信息）

host: "new-tab-page"
href: "chrome://new-tab-page/"
location.reload()//刷新页面
location.assign('https://www.baidu.com/')//跳转到百度页面

 

 　　（6）document代表当前页面，HTML,DOM对象

document.title
'百度一下，你就知道'

 

 获取具体的文档树节点

<dl id="test">
    <dt>java</dt>
    <dd>javaSE</dd>
    <dd>javaEE</dd>
</dl>
<script>

    var testParm = document.getElementById("test")//获取test节点
    console.log(testParm)

</script>

 

 

 

 获取Cookie(document.cookie)这是不安全的，容易获取到

 　　（7）history.back()：网页的后退，histroy.forward():网页的前进

6：操作DOM对象（DOM:文档对象模型）

　　（1）获得DOM节点

 

<script>
    document.getElementsByTagName("h1")//标签选择器
    document.getElementById("p1")//id选择器
    document.getElementsByClassName("p2")//class选择器
    var father = document.getElementById("father")
    var allChildren = father.children;//获取父节点的所有子节点
    father.firstChild//获取第一个节点
    father.lastChild//获取最后一个节点
</script>

 

 

　　　（2）更新节点

 

<script>
    var h1 = document.getElementById("id1");
    h1.innerText = '1234'//给div添加文本信息
    h1.innerHTML = '<strong>1234</strong>'//加一个html  加粗的html
    h1.style.color = 'red'
    h1.style.fontSize = '20px'//操作样式节点
    h1.style.padding = '20px'
</script>

　　（3）删除节点

　　　　步骤：

　　　　　　1：先获取父节点

　　　　　　2：再通过父节点删除自己

<script>
    //获取到子节点
    var p1 = document.getElementById('p1');
    //获取到父节点
    var father = document.getElementById('id1');
    //通过父节点删除子节点
    father.removeChild(p1)
    //注意:删除 多个节点的时候，children是时刻在变化的，不能通过节点的下标来删除
</script>

 　　（4）创建和插入节点

　　　　1：如果我们获得了某个DOM节点，我们通过innerHTML就可以新增一个节点，但是如果这个DOM节点已经存在，会覆盖之前的节点，js中为了解决这个问题，通过追加的方式。

<script>
    var js = document.getElementById('p1')
    var div = document.getElementById('div')
    div.appendChild(js)//追加p1到div中
    var newP = document.createElement('p')//创建一个p标签
    newP.id = 'newP'//在新节点设置一个id选择器
    newP.innerText = 'newP'//在p标签中加了一段文字
    div.appendChild(newP)//追加newP到div标签中

    //创建一个标签
    var myscription = document.createElement('script')
    myscription.setAttribute('type', 'text/javascript')//设置标签的属性
    var myStyle =document.createElement('style');
    myStyle.setAttribute('type','text/css');
</script>

7：初识jquery以及公式

　　（1）JavaScript和kjquery的关系：jquery是一个库，里面存在大量的jquery的函数　

 

<!--引入jquery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
<!--jquery的公式：$(选择器).action()-->

<a href="" id="test">点我</a>
<script>
    //jQuery中的选择器就是css中的选择器

    $('#test').click(function () {
        alert('Hello,Jquery')

    })

</script>