JavaScript

1、什么是JavaScript

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

一个合格的程序员必须精通JavaScript

2、快速入门

内部标签

<script>
    这里面写代码
</script>

外部标签

js里面代码
alert('李永辉');

<script src="js/lyh.js"></script>

测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- <script>
            alert('Hello Word');
        </script> -->
        <!-- 外部引入 -->
        <script src="js/lyh.js">
            
        </script>
        <!-- 不用显示定义type,也默认就是Javascript -->
        <script type="text/javascript"> 
        </script>
    </head>
    <body>
    </body>
</html>

基础语法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //1.定义变量  变量类型  变量名
            var score=71;
            //2.条件控制
            if (score>60 && score<70) {
                alert("李永辉");
            } else if(score>70&&score<80){
                alert("李永辉");
            }
            //在浏览器的控制台打印变量System.out.print();
            //console.log(score);
        </script>
    </head>
    <body>
    </body>
</html>

3、数据类型(简单介绍)

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

变量

//不能以数字开头命名var：列 var 1a=1;不规范
var a=1;

number

js不区分小数和整数

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

字符串

‘abv’ “avc”
布尔值

true false

逻辑运算符

&& //两个都为真，结果为真
|| //一个为真，结果为真
!  //真即假，假即真

比较运算符（重要）
```
=       //赋值
==      //等于（类型不一样，值一样，也会判断为true
===     //绝对等于（类型一样，值一样）
```
这就是一个js的缺陷，坚持不要使用 ==比较
- NaN===NaN,这个与所有的数值都不相等，包括自己
- 只能通过isNaN(NaN)来判断这个数是否NaN
浮点数问题：

尽量不要使用浮点数运算，存在精度问题
null和undefined
- null 空
- undefined 未定义
数组

Java的数值必须是相同类型的对象，JS中不需要这样
```
var arr=[1,2,3,'ss',"456",true,null];
console.log(arr[2]);
new Array(1,12,4);
```
取数组小标：如果越界了，就会
```
underfined
```

对象

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

//Person person=new Person(1,2,3);
var person={
    name: "李永辉",
    age:12,
    tags:['js','java']
}

取对象的值
```
person.name
```

4、严格检查格式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--'use strict';
        严格检查模式，预防Javascript的随意性导致产生的一些问题必须写在JavaScript的第一行 
         局部变量建议都使用let去定义-->
        <script>
            'use strict';
             i=1;
        </script>
    </head>
    <body>
    </body>
</html>

5、数据类型

5.1、字符串

正常字符串我们使用单引号，或者双引号包裹

注意转义字符 \

console.log("\n");
console.log("\t");
console.log("\u4e2d");  //打印一个中字

多行字符串编写

var msg=`hello
            word
            您好呀
            `;

模板字符串

let name="李永辉";
let age=3;
let msg1=`您好呀，${name}`;
console.log(msg1);
//打印=您好呀，李永辉

字符串长度

var student="student";
undefined
console.log(student.length);

字符串可变性，不可变

大小写转换

//注意，这里的方法，不是属性；了
console.log(student.toUpperCase());
VM977:1 STUDENT
undefined
console.log(student.toLowerCase());
VM1091:1 student

查找索引值

console.log(student.indexOf("n"));
VM1295:1 5

查询字符串中的第几个字符

console.log(student.substring(2));//注意重第三个字符串截取到最后一个字符串
VM1402:1 udent
undefined
console.log(student.substring(2,5));
VM1420:1 ude

5.2、数组

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

var arr=[1,2,3,'ss',"456",true,null];
arr[0]

长度
```
arr.length=10
```
注意：加入arr.length赋值，数组大小就会发生变化，如果元素赋值过小就会数据丢失
indexOf()，通过元素获得下标索引
```
indexOf(2);
```
slice() 截取Array的一部分，返回一个新数组，类似与String中的substring

push() 和pop() 尾部

push://把你添加的元素压缩到末尾这个数组中
pop://从后向前弹出一个个元素

unshift()和shift() 头部

unshift://把你添加的元素压缩头部到这个数组中
shift://从前向前弹出一个个元素

排序sort()
```
arr.sort();
```
元素反转reverse()
```
arr.reverse();
```

连接符join

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

多维数组

var arr=[[1,2],[3,4],[5,6]];
arr[1][1]
//输出为4

5.3、对象

若干个键值对

var 对象名 ={
     属性名:属性值,
     属性名:属性值,
     属性名:属性值
}
//定义了一个person对象，它有三个属性
var person={
    name:"李永辉",
    age:2,
    score:0
}

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

JavaScript中所有的键都是字符串，值是任意对象

对象赋值

person.name="代雅鑫"
"代雅鑫"
person.name
"代雅鑫"

使用一个不存在的对象属性，不会报错
```
person.haha
undefined
```
动态的删减属性
```
delete person.name
```
动态的添加,直接给新的属性添加值即可
```
person.haha="haha"
"haha"
person
```

5.4、流程控制

if判断

		var age=3;
		if(age>2){
			alert("lyh");
			console.log("lyh");
		}

while循环，避免死循环

while(age<100){
			age=age+1;
			alert("lyh");
			console.log("lyh");
		}

forEach循环

var age=[1,56,12,1,4,5];
//打印数组中值
age.forEach(function (value){
		console.log(value);
});

Map和Set

Map：

var map=new Map([["tom",50],["lyh",80],["haha",90]]);
var name=map.get("tom");//可以通过key来获得value
		 map.set("李永辉","admin");
		 console.log(name);

Set：(set集合可以去重)

var set =new Set([1,11,1,2,3,4]);
set.add(8);
set.delete(8);
console.log(set.has(3));

iterator遍历

遍历数组

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

遍历map

var map=new Map([["tom",50],["lyh",80],["haha",90]]);
		for(let x of map){
			console.log(x);
		}

遍历set

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

6、函数

6.1、定义函数

方式一：

绝对值函数
```
function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}
```
一旦执行到return代表函数结束，返回结果

如果没有执行return，函数执行完全也会返回结果，结果就是undefined
方式二：

绝对值函数
```
var abs=function(x){//匿名内部类
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}
```
这是一个匿名函数，但是可以把结果赋值给abs,通过abs就可以调用函数方式一等价于方式二。

调用函数

abs(10)  //10
abs(-10) //10

参数问题：Javascript可以传入任何参数，也可以不传参数

参数传进来是否存在

假设不存在参数，如果规避？

var abs=function(x){
    //手动添加异常
    if(typeof x!=="number"){
        throw 'Not a Number';
        if(x>=0){
            return x;
        }else{
            return -x;
        }
    }
}

arguments

arguments是一个js免费赠送的关键字；代表，传递进来的所有的参数，上一个数组
```
var abs = function(x){
    console.log("x=>"+x);
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}
```
问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数

rest

function aaa(a,b,...rest) {
    console.log(a);
    console.log(b);
    console.log(rest);
}

注意：参数只能写在最后面，必须用…rest

6.2、变量的作用域

在JavaScript中，var定义变量实际是有作用的

假设在函数体中声明，则在函数体外可以用

function ly(){
    var x=1;
    x=x+1;
}
x=x+2;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function ly(){
    var x=1;
    x=x+1;
}
function ly2(){
    var x="a";
    x=x+1;
}

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

function ly(){
    var x=1;
    //内部函数可以访问外部函数的成员，反之这不行
    function ly2(){
        var y=x+1;//2
    }
    var z=y+1;
}

假设在JavaScript中函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域
```
function ly(){
    var x="x"+y;
    console.log(x);
    var y='y';
}
```
结果：xundefined

说明：JavaScript执行引擎，自动提升了y的声明，但撒不会提升变量y的赋值；
这个实在JavaScript简历之初就存在的特性，养成规范：所有的变量定义都在函数的头部，不要乱放，便于代码维护；

全局函数

x=1;
function f(){
    console.log(x);
}
f();
console.log(x);

全局对象window

var x='xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下；

alert()这个函数本身也是一个window变量；

var x="xx";
window.alert(x);
var old_alert=window.alert;
window.alert=function(){
    
};
//发现alert()失效了
window。alert(123);
//回复
window。alert=old_alert;
window.alert(456);

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量）；

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突->如果能够减少冲突？
```
//唯一全局变量
var ly={};
//定义全局变量
ly.name="lyh";
ly.add=function(a,b){
    return a + b;
}
```
把自己的代码放入自己定义的唯一空间名字中，降低全局命名冲突问题

局部作用域let

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

ES6关键字，解决局部作用域的冲突

6.3、方法

定义方法

方法就是把函数放在对象里面，对象只有两个东西

var liyonghui={
    name:'李永辉',
    bitrh:2000,
    //方法
    age:function () {
        //今年-出生的年
        var now=new Date().getFullYear();
        return now-this.bitrh;
    }
}
//属性
liyonghui.name
//方法，一点过要带（）
liyonghui.age()

7、内部对象

标准对象

liyonghui.age()
22
typeof 123
'number'
typeof "123"
'string'
typeof true
'boolean'
typeof Math.abs
'function'

7.1、Date

基本使用

date.getFullYear();//年
2022
date.getMonth();//月
10
date.getDate();//日
6
date.getDay();//星期几
0
date.getHours();//时
20
date.getMinutes();//分
6
date.getSeconds();//秒
36
date.getTime();//时间戳
1667736396611

时间转换（注意调用是一个方法）

new Date(1667736396611);
Sun Nov 06 2022 20:06:36 GMT+0800 (中国标准时间)
date.toLocaleString();
'2022/11/6 20:06:36'
date.toLocaleTimeString();
'20:06:36'

7.2、JSON

JSON是什么

早期，所有数据传输习惯使用XML.文件
- JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

格式：

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

JSON字符串和JS对象的转换

var user={
    name:"李永辉",
    age:3,
    sex : '男'
}
//JSON把对象转换成字符串
var jsonUser=JSON.stringify(user);
//JSON把字符串转换成对象
var parse = JSON.parse('{"name":“永辉”,"age": 3,"sex": "男"}');
// user
// {name: '李永辉', age: 3, sex: '男'}
// console.log(jsonUser);
// VM72:1 {"name":"李永辉","age":3,"sex":"男"}

很多人搞不清楚，JSON和JS对象的区别

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

7.3、Ajax

原生的js写法 xhr异步请求
jQuey封装好的方法$(“#name”).ajax(“”)
axious 请求

8、面向对象编程

8.1、什么是面向对象

JavaScript、Java、C#…面向对象；JavaScript有区别

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

class Student {
    //构造器
    constructor(name) {
        this.name=name;
    }
    hello(){
        alert('hello');
    }
}
class XiaoStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    myGrade(){
        alert('我是小学生');
    }
}
var xiaoming=new Student("xiaoming");

9、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系？

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

BOM:浏览器对象模型
- IE6-11
- Chrome
- Safari
- FireFox
三方
- QQ浏览器
- 360浏览器

window代表浏览器窗口

window.alert(1);
undefined
window.innerHeight
720
window.innerWidth
436
Window.outerHeight
//可以试一试调整浏览器窗口大小...

Navigator

Navigator，封装了浏览器的信息

navigator.appName
'Netscape'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36'
//版本信息
navigator.appVersion
'5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36'
navigator.platform
'Win32'

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

不建议使用这个属性来判断和编写

screen(屏幕)
```
screen.height
864
screen.width
1536
```

location（重点）

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
location.reload()  // 刷新网页
location.assign('https://www.cnblogs.com/')

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

document.title
"百度一下，你就知道"
document.title='李彦宏和';
"李彦宏和"

获得具体的文档树节点

<dl id="app">
  <dt>java</dt>
  <dd>javaSE</dd>
  <dd>javaEE</dd>
</dl>
<script>
  var id = document.getElementById("app");
</script>

获得cookle

document.cookie

劫持cookle原理

服务器端可以设置cookle:httpOnly

history：代表浏览器的历史记录

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

10、操作DOM对象（重点）

10.1、核心

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

更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新节点

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

10.2、获得dom节点

//对应css选择器
var h1=document.getElementsByTagName("h1");
var p1=document.getElementById("p1");
var p2=document.getElementsByClassName("p2");
var father = document.getElementById("father");
//获得父节点下的所有子节点
var childrens=father.children;

这些原生代码，之后我们尽量都在jQuery（）；

10.3、更新节点

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

操作文本

id1.innerText=’abc’;修改文本的值
id1.getInnerHTML=’123‘；可以解析HTML文件

操作js

id1.innerText='456';
'456'
id1.innerText='abc';
'abc'
id1.style.color='red';
'red'
id1.style.fontSize='200px';
'200px'

操作百度一下样式

document.getElementById('su');
<input type=•"submit" id=•"su" value=•"百度一下" class=•"bg s_btn">•
var ss=document.getElementById('su');
undefined
ss.style.color='red';
'red'

10.4、删除Dom节点

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

<div id="father">
    <h1>11</h1>
<p id="p1">222</p>
<p class="p2">33</p>
</div>
<script>
    var self=document.getElementById("p1");
    var father=p1.parentElement;
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

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

10.5、插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点如果已经存在，那么我们就不能这么干了，因为会把之前的覆盖掉

追加

<p id="js">javascript</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>
<script>
    //获取id标签
    var js = document.getElementById("js");
    var list = document.getElementById("list");
    // 给div这个标签追加一个儿子
    list.appendChild(js);
</script>

效果：

创建一个新的标签

<p id="js">javascript</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>
<script>
    //获取id选择器
    var js = document.getElementById("js");
    var list = document.getElementById("list");
    // 给div这个标签追加一个儿子
    // list.appendChild(js);
    //通过js创建一个新的节点
    //创建一个新的标签，返回一个对象
    var newp = document.createElement('p');
    //给新标签赋值一个id选择器
    newp.id='newp';
    //给新的标签里面赋值内容
    newp.innerText='helloword';
    //给list-id选择器添加一个新的标签
    list.appendChild(newp);
</script>

效果：

创建一个新标签，插入标签(用js完成样式)

<script>
    //获取id选择器
    var js = document.getElementById("js");
    var list = document.getElementById("list");
    // 给div这个标签追加一个儿子
    // list.appendChild(js);
    //通过js创建一个新的节点
    //创建一个新的标签，返回一个对象
    var newp = document.createElement('p');
    //给新标签赋值一个id选择器
    newp.id='newp';
    //给新的标签里面赋值内容
    newp.innerText='helloword';
    //给list-id选择器添加一个新的标签
    list.appendChild(newp);
    //创建一个标签节点
    var myStyle = document.createElement('style');
    //setAttribute一个key-values
    myStyle.setAttribute('type','text/css');
    //给boby添加一个样式
    myStyle.innerHTML="body{}";
    //获得head这个标签的位置，给他追加一个style标签
    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

insert插入

<p id="js">javascript</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>
<script>
    var ee = document.getElementById('ee');

    var js = document.getElementById('js');

    var list = document.getElementById('list');
    list.insertBefore(js,ee);
</script>

11操作表单（验证）

表单是什么 form DOM树
- 文本框 text
- 下拉框 <select>
- 单选框 redio
- 多选框 checkbox
- 隐藏框 hidden
- 密码框 password
- …….
表单的目的：提交

获得要提交的信息

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" value="men" id="boy">男
        <input type="radio" value="women" id="girl">女
    </p>
</form>
<script>
    var userName = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    //获取你在文本框输入的值
    userName.value;
    //修改文本框里的值
    userName.value='123';
    //对于单选框，多选框等等固定的值，boy_radio.value只能取得当前的值
    boy_radio.checked;//查看返回结果，是否为true，如果为true，则被选中
    boy_radio.checked=true;//赋值为true
</script>

md5加密

 <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<form action="https://www.baidu.com/" method="post"  onsubmit="aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>
    <button type="submit">提交</button>
</form>
<script>
    function aaa() {
        alert("1");
        var uname = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(uname.value);
        //md5算法
        pwd.value=md5(pwd.value);
        console.log(pwd.value);
    }
</script>

本文链接：https://www.cnblogs.com/lyhidea/p/16882170.html

JavaScript小结