JavaScript

1、什么是JavaScript

JavaScript是一门世界上最流行的脚本语言。

一个合格的后端人员，必须要精通JavaScript

2、快速入门

2.1、引入JavaScript

1.内部标签

<script>
        //
    </script>

2、外部引入

2.2、基本语法

严格区分大小写

在控制台输入console.log(); 在浏览器的控制台打印变量

2.3、数据类型

number

js不区分小数和整数，Number

NaN: not a number 不是一个数字

Infinity 无限大

比较运算符(重要)

= 
==  等于（类型不一样，值一样，也会判断为true)
===  绝对等于（类型一样，值一样，结果为true)

须知：

NaN===NaN, 这个与所有的都不相等
只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

console.log((1/3)===(1-2/3))//flase

尽量避免使用浮点数进行运算，因为存在精度问题

对象

对象是大括号，数组是中括号[]

每个属性之间用逗号隔开，最后一个不需要添加

<script>
        //Person person = new Person();
        var person = {
            name: "yt",
            age: 19,
            flag: [1,2,'abc',"...."]

        }

    </script>

2.4、严格检查模式

使用‘use strict’ ；严格检查模式，预防JavaScript的随意性导致产生的一些问题，而且必须写在第一行

局部变量建议使用let来定义

3、数据类型

3.1、字符串

1、多行字符串的编写：着重号

tab键上面，esc下面的键

2、字符串不可变

3、大小写转换，注意使用方法，toUpperCase(),

3.2、数组

Array可以包含任意的数据类型

1、数组长度可以任意改变

2、slice() 截取Array的一部分，返回一个新数组，类似于String中的substring()

3、push(), pop()

push：压入到尾部

pop:弹出尾部第一个元素

4、unshift(), shift() 头部

unshift() ：压入到头部

shift() ：弹出头部第一个元素

5、排序sort()

6、reverse() 翻转

7、concat() 拼接

注意，并没有修改数组

8、连接符join,使用特定的字符来拼接数组

var arr = ["a","b",'c'];
arr.join('-')
"a-b-c"

3.3、对象

1、若干键值对

var person = {//对象名 person
    //属性名： 属性值
            name: "yt",
            age: 19,
            flag: [1,2,'abc',"...."]

        }

JS中的对象，{。。。} 表示一个对象，键值对描述对象 xxxx:xxxx

多个属性用逗号隔开，最后一个属性不需要逗号

2、使用一个不存在的对象属性，不会报错！undefined

3、动态的删除属性，通过delete删除对象属性

4、动态的添加，直接给新的属性添加值即可

5、判断属性值是否在对象中！ a in b！

3.4、流程控制

1.if判断

2、while循环

3、for循环

4、forEach循环

3.5、Map和Set

Map:

var map = new Map([['tom',100],['jack',90],['mike',80]]);
var name = map.get('tom');
map.set('admin',456);
console.log(name);

Set:无序不重复的集合

3.6、迭代器

遍历Map

var map = new Map([['tom',100],['jack',90],['mike',80]]);
for (let x of map){
    console.log(x);
}
/*Array [ "tom", 100 ]
2.html:11:21
Array [ "jack", 90 ]
2.html:11:21
Array [ "mike", 80 ]
*/

遍历数组

var arr = [1,2,3,4];
for (let x of arr){
    console.log(x);
}

遍历Set

var set = new Set([4,5,6]);
for (let x of set){
    console.log(x);
}

4、函数

4.1、定义函数

参数问题：JavaScript可以传任意一个参数，也可以不传递参数

arguments

arguments 是js免费赠送的关键字

代表传递进来的所有的参数，是一个数组！

rest

function aaa(a,b,...rest) {
    console.log(a);
    console.log(b);
    console.log(rest);
}
/*
aaa(111,222,'bbb') 

111 

222

Array [ "bbb" ]

*/

ES6引入的新特性，获取除了已经定义的参数之外的所有参数

注意事项：rest参数必须只能定义在最后，必须使用...标识

4.2、变量的作用域

在JavaScript中，var定义的变量是有作用域的。

如果变量定义在函数体中，则在函数体外不能引用

function yt() {
    var x = 1;
    x = x + 1;

}
x = x + 2;//Uncaught ReferenceError: x is not defined

如果两个函数定义了两个相同的变量，则不会有影响

内部函数可以访问外部函数的成员，反之则不行

内部函数和外部函数的变量重名，函数查找变量从自身开始，由内向外查找，内部函数会屏蔽外部函数的变量。

提升变量的作用域

function yt() {
    var x = "a" + y;
    console.log(x);
    var y = 'b';
}

运行结果：aundefined

说明：js执行引擎，自动提升了y的声明，但不会提升变量y的赋值

function yt() {
    var y;
    
    var x = "a" + y;
    console.log(x);
    y = 'b';
}

养成规范：所有变量都声明在函数的头部，便于代码维护

全局对象window

JavaScript实际上只有一个全局作用域

规范

由于所有的全局变量都会绑定到window上。如果不同的js文件，使用相同的全局变量，会产生冲突

//唯一的全局变量
var Yt = {};

//定义全局变量
Yt.name = 'yt';
Yt.add = function (a, b) {
    return a + b;
}

把自己的代码放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域 let

建议都使用let来定义局部变量

常量 const

4.3、方法

定义方法

方法就是把函数放在对象的里面，对象只有属性和方法

this代表什么呢？

apply

apply可以控制this 的指向

5、内部对象

5.1、Date

基本使用

var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期
now.getHours();//时

now.getTime();//1628340920324  时间戳

转换

now.toLocaleString();//注意调用时使用方法

5.2、JSON

是什么？

是一种轻量级的数据交换格式；

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示

格式：

对象都用{}
数组都用[]
所有的键值对都用 key : value

JSON字符串和JS对象的转换

var user = {
    name : 'yt',
    age : 19,
    sex : 'man'
}

//对象转换为JSON字符串 {"name":"yt","age":19,"sex":"man"}
var  jsonUser = JSON.stringify(user);

//json字符串转换为对象，parse()的参数为json字符串
var obj = JSON.parse('{"name":"yt","age":19,"sex":"man"}')

6、面向对象编程

class继承

1、定义一个类和方法

//定义一个类
class Student{
    constructor(name){
        this.name = name;
    }

    hello(){
        alert('hello');
    }
}
var yt = new Student('yt');

2、继承

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

原型链

_ proto _:

7、操作BOM对象（重点）

BOM：浏览器对象模型

IE 6-11
Chrome
Safari
FireFox

window

window代表浏览器窗口

window.innerHeight
76
window.innerWidth
911

navigator

navigator封装了浏览器的信息

大多数不会使用，很容易被人为修改

screen

screen.width
911
screen.height
512

location(重要)

location代表当前页面的URL信息

document

document 代表当前页面，HTML DOM 文档数

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

获取具体的文档数节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>
<script>
   var dl = document.getElementById('app');
</script>

获取cookie

document.cookie
"Hm_lvt_dd4738b5fb302cb062ef19107df5d2e4=1628060307,1628128968,1628255816,1628324385"

劫持cookie原理

<script src="aa.js"></script>
//恶意人员：获取你的cookie上次到其他服务器上

服务器端可以设置cookie:httpOnly 来保护

history（不建议使用）

获取浏览器的历史记录

history.back;//后退
history.forward;//前进

8、操作DOM对象（重点）

核心

文本对象模型：就是把文档中的属性，标签，文本转换为对象来管理。

浏览器网页就是一个Dom树形结构！

更新：更新Dom节点
遍历dom节点：得到DOM节点
删除

添加

要操作DOM节点，就一定需要获得DOM节点

获取DOM节点

<div id="father">
    <h1>标题</h1>
    <p id="p1">段落一</p>
    <p class="p2">段落二</p>
</div>
<script>
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    var chidrens = father.children;//获取父节点下的所有节点

之后尽量都使用jQuery

更新节点

p1.innerText = '改段落' 修改文本的值
p1.innerHTML = '123' 可以解析HTML文本标签

8.2 小结

document对象的三个查询方法：

如果有id属性，优先使用getElementById方法来进行查询
如果没有id属性，则优先使用getElementByName方法来进行查询
如果前两者都没有的话，再使用getElementByTagName来进行查询
- 以上三种方法，一定要在页面加载完成之后执行，才能查询到标签对象

getElementById方法例题代码

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

    function onClickFun() {
    //alert('点击完成！');
    //获取标签的对象
    var inputObj = document.getElementById("id1");
    // alert(inputObj);[object HTMLInputElement] 这就是dom对象

    var inputText = inputObj.value;
    // alert(inputText);yt

    //验证规则：必须是字母，数组，下划线组成，并且长度是5到12位
    var patt = /^\w{5,12}$/;
    /*
            test()方法用于测试某个字符串，是否匹配需要的规则
            匹配则是true,否则false
             */
    if (patt.test(inputText)){
        alert('用户名合法！');
    }else{
        alert('用户名不合法！');
        alert('合法的规则是：必须是字母，数字，下划线组成，并且长度是5到12位');
    }
}

</script>

</head>
<body>
    用户名：<input type="text" id="id1" value="yt"/>

        <button onclick="onClickFun();" style="color: red">点击</button>
</body>
</html>

getElementByName方法例题代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            //全选
            function checkAll() {
                var nameObj = document.getElementsByName('hobby');
                // alert(nameObj);[object NodeList]
                for (var i = 0; i < nameObj.length; i++){
                    nameObj[i].checked = true;
                }
            }

            //全不选
            function checkNo() {
                var nameObj = document.getElementsByName('hobby');
                // alert(nameObj);[object NodeList]
                for (var i = 0; i < nameObj.length; i++){
                    if(nameObj[i].checked == true){
                        nameObj[i].checked = false;
                    }
                }
            }
            //反选
            function checkReverse() {
                var nameObj = document.getElementsByName('hobby');
                // alert(nameObj);[object NodeList]
                for (var i = 0; i < nameObj.length; i++){
                    nameObj[i].checked =!nameObj[i].checked ;
                }
            }

        </script>
    </head>
    <body>
        兴趣爱好：
        <input type="checkbox" name="hobby" >C++
        <input type="checkbox" name="hobby">Java
        <input type="checkbox" name="hobby">JavaScript
        <br/>
        <button onclick="checkAll()">全选</button>
        <button onclick="checkNo()">全不选</button>
        <button onclick="checkReverse()">反选</button>


    </body>
</html>

9、onclick单击事件

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


            window.onload = function () {
                var obj = document.getElementById('btn01');
                obj.onclick = function () {
                    alert('点击后！');
                }
            }

        </script>

    </head>
    <body>
        <button id="btn01">点击</button>
    </body>
</html>

注意要在window.load = function(){

}

中点击才行，因为要等页面加载之后才能使点击事件有效果

posted @ 2023-03-03 19:47 半路_出家ren 阅读(51) 评论(0) 编辑收藏举报

刷新页面返回顶部