JavaScript学习笔记

1、什么是JavaScript

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

2、快速入门

2.1、引入JavaScript

1、内部标签

<script>
    //...
<script>

2、外部引入

abs.js

2.2、基本语法入门

相似于java

<script>
    // 1.定义变量    变量类型 变量名 = 变量值；
    var num = 1;
    var name = "橙宝";
    alert(num);
    // 2.条件控制
    if(2>1){
        alert("true");
    }
    // console.log(num) 在浏览器控制台打印变量！
</script>

2.3、数据类型

数值，文本，图形，音频，视频....

number

js不区分小数和整数，number

123//整数123
123.1//浮点数
1.123e3//科学计数法
-99	//负数
NaN //not a number
Infinity //表示无限大

字符串

'abc' "abc"

boolean

true , false

逻辑运算

&&	两个都为真,则结果为真

||	一个为真，则结果为真

!	假为真

比较运算符

=
    
== 等于（类型不一样值一样，判断为true)

== 绝对等于（类型一样，值一样， 结果为true)

这是JS的一个缺陷，坚持不要使用==比较

须知：

• NaN===NaN , 这个与所有数值都不相等，包括自己
• 只能通过isNaN(NaN)来判断这个数是否为NaN

浮点数问题：

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

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

console.log(Math.abs(1/3-(1-2/3))<0.00001);

null 和 undefined

• null 空
• undefined 未定义

数组

java的数组必须是相同类型的对象，javascript不需要

// 保证代码的可读性， 尽量用[]
        var arr = [1,2,3,4,5,'hello',null,true];
        new array(1,2,3,4,5);

取数组下标，如果越界了， 就会

undefined

对象

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

每个属性之间使用 ， 隔开，最后一个不需要

var person = {
    name: "橙宝" ,
    age: 3,
    tags: ['js','java','web','...']
}

取对象的值

person.name

person.age

2.4、严格检查模式

<!--
    前提：IDEA 需要支持ES 6
    'use strict'; 严格检查模式，语法JavaScript的随意性导致产生一些问题
    需要写在第一行
    局部变量都建议使用let去定义~
-->
<script>
    'use strict';
    // 全局变量
    let i = 1;
    //ES 6 let
</script>

3、数据类型

3.1、字符串

1. 正常字符串我们使用单引号，或者双引号包裹
2. 主要转义字符\

\'
\n
\t
\u4e2d unicode字符
\x41	ASCII字符

3、多行字符串编写

//tab
var msg = `
    122
    hello
    strict
`

4、模板字符串

let name = "橙宝";
let age = 3;

var msg = `你好, ${name} `

5、字符串长度

var student = 'student';
console.log(student.length);
7

str.length

6、字符串的可变性，不可变

7、大小写转换

//注意这里是方法不是属性
console.log(student.toUpperCase());
console.log(student.toLowerCase());

8、substring()

index()

3.2、数组

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

new arr (1,2,3,'22','hello');

//以下都会方法
unshift() : 压入到头部
shift() : 弹出头部的一个元素
push() : 压入到尾部
pop() : 弹出尾部元素
sort() : 排序
reverse() : 元素反转
concat() : 链接数组 //注意concat 并没有修改数组，只是会返回一个新的数组
join() : 打印拼接字符串，使用特定的字符串连接
多维数组

3.3、对象

若干个键值对

var 对象名 = {
    属性名 ： 属性值，
    属性名 ： 属性值，
    属性名 ： 属性值
}

'use strict';

 var person = {
            name : "橙宝，
            age : 19,
            email : "1845472368@qq.com",
            score : 20
}

JS中对象，{......}表示一个对象，键值对描述属性xxxx: xxxx,多个属性之间使用逗号隔开，最后一个属性不加逗号!

1、对象赋值

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

3、动态的删减属性, 通过delete动态的删除属性

delete person.name
true

4、动态的添加 , 直接给新的对象赋值即可

person.haha = "haha";

5、判断属性值是否在这个对象中！'xxx' in xx

'age' in person
true

3.4、流程控制

跟java差不多，略

3.5、Map 和 Set

'use strict';

var names = ['tom','jack','cheng'];
var scores = ['80','90','85'];
var map = new Map([['tom',80],['jack',90],['cheng',85]]);
var name = map.get('tom');
console.log(name);
map.set('admin',123456);
 map.delete('tom');

Set: 无序不重复的集合

3.6、iterator

遍历map

for (let x of map){
    console.log(x);
}

4、函数

匿名函数

var abs = function(x){
    if(x<0)
        return x;
    else
        return -x;
}

4.1、变量的作用域

在 ES6 中，提供了 let 关键字和 const 关键字。

let 的声明方式与 var 相同，用 let 来代替 var 来声明变量，就可以把变量限制在当前代码块中。

使用 const 声明的是常量，其值一旦被设定便不可被更改。

let 允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是，它声明的变量只能是全局或者整个函数块的。

4.2、方法

方法

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

<script>
    'use strict'
    let cheng = {
        name : 'ch',
        birth : 2000,
        age: function () {
            let now = new Date().getFullYear();
            return now - this.birth;
        }
    }
</script>
//属性
cheng.name
//方法一定要带()
cheng.age()

apply

在js中可以控制this的指向

function getAge(){
        let now = new Date().getFullYear();
        return now - this.birth;
}

let kuangshen = {
    name : 'ch',
    birth : 2000,
    age: getAge
};
let xiaoming = {
    name : 'xm',
    birth : 2001,
    age : getAge
};

getAge.apply(xiaoming,[]);

5、内部对象

​ 标准对象

typeof 123
"number"
typeof true
"boolean"
typeof NaN
"number"
typeof undefined
"undefined"
typeof Map
"function"

5.1、Date

基本使用

'use strict'
var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒

now.getTime(); //时间戳

5.2、JSON

​ JSON是什么

• JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
• 它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript中一切皆为对象，任何Js支持的类型，都可以用JSON来表示；

格式:

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

JSON 字符串 和 JS对象的转化

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

//json 字符串转化为对象
var obj = JSON.parse('{"name":"cheng","age":19,"sex":"男"}');

var obj = {a:'hello' , b:'hellow'};
var json = '{"a" : "hello" , "b" : "hellow"}';

5.3 Ajax

• 原生的js写法
• jQuey 封装好的方法 ￥

6、面向对象编程

6.1、什么是面向对象

javascript,c#,java....面向对象；javascript有些区别

• 类 ： 模板 原型对象
• 对象 ： 具体的实例

在javascript这个需要大家换一下思路

原型对象

var user = {
        name : "cheng",
        age : 19,
        sex : '男',
        run : function () {
            console.log(this.name + 'run...');
        }
    };
    var xiaoming = {
        name : 'xiaoming'
    };
    //原型对象
    xiaoming.__proto__=user;


    var bird = {
        fly : function () {
            console.log(this.name + " 飞");
        }
    };
    //小明的原型对象是 user
    xiaoming.__proto__ = bird;

function student(name) {
            this.name = name;
        }

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

class 继承

class 关键字是在ES 6引入的

1.定义一个类，属性，方法

//ES 6之后
        //定义一个学生类
        class student{
            constructor(name){
                this.name = name;
            }

            hello(){
                alert('hello');
            }
        }
var xiaoming = new student('xiaoming');
var xiaohong = new student('xiaohong');
xiaoming.hello();

2、继承

<script>
    function student(name) {
        this.name = name;
    }

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

    //ES 6之后
    //定义一个学生类
    class student{
        constructor(name){
            this.name = name;
        }

        hello(){
            alert('hello');
        }
    }

    class xiao extends student{
        constructor(name,grade){
            super(name);
            this.grade = grade;
        }

        myGrade(){
            alert("我是小学生，啦啦");
        }
    }
    var xiaoming = new student('xiaoming');
    var xiaohong = new xiao('xiaohong',1);

</script>

本质：查看对象原型

5SRV$3S(_{X(5J[UW$CU{D.png)

原型链

proto:


7、操作BOM对象

浏览器介绍

javascricpt 和 浏览器关系：

JavaScript 诞生就是为了让他能够在浏览器中运行！

BOM：浏览器对象模型

• IE 6~11
• Chrome
• Safari
• FireFox
• Opera

三方

• QQ浏览器
• 360浏览器

操作window对象

window 代表 浏览器窗口

window.alert("111");
undefined
window.innerHeight
85
window.innerWidth
731
window.outerHeight
760
window.outerWidth
1280

navigator (不建议使用)

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

大多数时候，我们不会使用navigator对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.height
800
screen.width
1280

location (重要)

location 代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/?tn=62095104_43_oem_dg"
protocol: "https:"
reload: ƒ reload() //刷新网页
// 设置新的地址
location.assign("https://www.bilibili.com/video/BV1JJ41177di?p=19&spm_id_from=pageDriver");

document (文本内容)

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

document.title
"百度一下，你就知道"
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
"__gads=ID=fc5cd07727bdc8f7:T=1610499688:S=ALNI_MY6bhf8LvvDFhcQiiOVwQktp4TEkw; UM_distinctid=179e0a54b90342-05ce38aab8346-f7f1939-fa000-179e0a54b91d9c; CNZZDATA1277383466=1969413449-1622969696-https%253A%252F%252Fwww.baidu.com%252F%7C1622969696; CNZZDATA1263394805=322497688-1624428160-https%253A%252F%252Fwww.baidu.com%252F%7C1624428160; _ga_4CQQXWHK3C=GS1.1.1625745518.1.1.1625745525.0; _ga=GA1.2.702379678.1610499688; CNZZDATA1279964619=1989557582-1625749557-https%253A%252F%252Fwww.cnblogs.com%252F%7C1625749557; _gid=GA1.2.520179618.1625998871"

劫持cookie原理

www.taobao.com

<script src="aa.js">
	
</script>
<!--恶意人员；获取你的cookie上传到他的服务器-->

服务器端可以设置cookie : httpOnly

history

history 代表浏览器的历史记录

history.back() //后退 
history.forward()  //前进

8、操作DOM对象 （重点）

DOM: 文档对象模型

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

• 更新：更新Dom节点
• 变量Dom节点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点

想操作一个Dom节点，就必须要先获得这个Dom节点

获得Dom节点

var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    var children = father.children;

这是原生代码，之后我们尽量都使用jQuery

更新节点

<div id="id1">123</div>

<script>
    var div = document.getElementById('id1');
</script>

操作文本

• div.innerText = '123'修改文本的值
• div.innerHTML = '<strong>123</strong>'

操作JS

div.style.color = ' red '
" red "	//属性使用 字符串包裹
div.style.fontSize = '200px'
"200px" //驼峰命名
div.style.padding = '20px'
"20px"

删除节点

删除节点的步骤：先获取父节点，在通过父节点删除中间

<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
    var self = document.getElementById('p1');

    var father = self.parentElement;
    father.removeChild(self);
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候要注意

插入节点

我们获得了某个Dom节点，假设这个Dom节点是空的，可以通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，就能这么操作会产生覆盖追加

<p id="je">JavaSE</p>
    <div id="list">
        <p id="jee">javaEE</p>
        <p id="jme">javaME</p>
        <p id="js">js</p>
    </div>

    <script>
        var div = document.getElementById('list');
        var je = document.getElementById('je');
    </script>

创建一个新的标签，实现插入

<script>
        var div = document.getElementById('list');
        var je = document.getElementById('je');

        //通过JS 创建一个新的节点
        var newP = document.createElement('p');//创建一个P标签
        newP.id = 'newP';
        newP.innerText = "hellow chengbao";
        //创建一个标签节点
        var myScript = document.createElement('script');
        myScript.setAttribute('type','text/javascript');

        var body = document.getElementsByTagName('body');
        //可以创建一个style标签
        var myStyle = document.createElement('style');
        myStyle.setAttribute('type','text/css');
        myStyle.innerHTML = 'body{background: azure;}';

        document.getElementsByTagName('head')[0].appendChild(myStyle);
    </script>

insertBefore

var div = document.getElementById('list');
var jme = document.getElementById('jme');
var jee = document.getElementById('jee');
//要包含的节点.insertBefore(newNode,targetNode);
div.insertBefore(je,jme);

9、操作表达（验证）

表达是什么 form DOM树

• 文本框 text
• 下拉框 单选框 radio 多选框 checkbox 隐藏框 hidden 密码框 passward .... 表单的目的：提交信息 获得要提交的信息 <script> var input_text = document.getElementById('username'); var boy_radio = document.getElementById('boy'); var girl_radio = document.getElementById('girl'); //得到输入框的值 input_text.value //修改输入框的值 input_text.value = '123' //对应单选框，多选框等固定的值，boy_radio.value只能取到当前值 boy_radio.checked // true 则被选中 </script> 提交表单，md5加密密码，表单优化 <!--表单绑定提交事件 onsubmit = 绑定一个提交检测的函数，true,false 将这个结果返回给表单，使用onsubmit接受 --> <form action="#" method="post" onsubmit="return f()"> <p> <span>用户名：</span><input type="text" id="username" name="username"> </p> <p> <span>密码：</span><input type="password" id="input-password"> </p> <input type="hidden" id="md5-password" name="password"> <!--绑定事件 onclick被点击--> <button type="submit" onclick="f()">提交</button> </form> <script> function f() { var uname = document.getElementById('username'); var pwd = document.getElementById('input-password'); var md5pwd = document.getElementById('md5-password'); //MD5 算法 md5pwd.value = md5(pwd.value); //可以校验判断表单内容 return true; } </script> input hidden 解决了使用md5加密时，提交密码时，密码会突然加长的问题. 10、jQuery!!! <script> document.getElementById('id'); //选择器就是css的选择器 $('#test-jquery').click(function () { alert('hello world'); }) </script> 选择器 <script> //原生js：选择器少，麻烦不好记 //标签 document.getElementsByTagName(); //id document.getElementById(); //类 document.getElementsByClassName(); //jQuery css中的选择器全部能用 $('p').click()//标签选择器 $('#id').click()//id选择器 $('.class1').click()//class选择器 </script> 文档工具站https://jquery.cuishifeng.cn/  事件 鼠标事件，键盘事件，其他事件 <!--要求：获取鼠标当前的一个坐标--> mouse : <span id="mouseMove"></span> <div id="divMove"> 点击这里移动鼠标试试 </div> <script> //当网页加载完毕之后，响应事件 $(function () { $('#divMove').mousemove(function (e) { $('#mouseMove').text('x:' + e.pageX + ' y:' + e.pageY); }) }); </script> 操作Dom 节点文本操作 $('#test-ul li[name = python]').text() //获得值 $('#test-ul li[name = python]').text('1231')//设置值 $('#test-ul').html();//获得值 $('#test-ul').html('<strong>123</strong>'); css的操作 $("#test-ul").css("color","red"); 元素的显示和隐藏: 本质 display : none $('#test-ul li[name = python]').show() $('#test-ul li[name = python]').hide() 未来Ajax(); 小技巧 vuepress ant desing