JavaScript简单教学

现在大多数浏览器还是支持ES5，学习会使用ES6，也就是说有的功能浏览器还不支持，请注意。

第一个JavaScript程序

在html中

• 内部标签

<script>
   	//......内容
</script>

• 外部引入

js写内容

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

基本语法

js多用控制台调试

用var声明变量，var可用于任一种数据类型的声明

var num = 1;

类似java，js也有条件判断语句

if(2>1)
	alert(true);

数据类型简述

• number

111//一般类型
111.1//浮点数
NaN//not a number
Infinity//无限大

• 字符串

  • ‘aaa’
  • “aaa”

• 布尔值

true、false

• 逻辑运算

  &&、||、！

• 比较运算符（js特点）

= //赋值
== //等于（类型不一样，值一样，判断为true）
=== //绝对等于（类型、值都一样，才是true）

所以JavaScript使用===比较。

注意：

NaN===NaN会判断为false，NaN与所有数据都不等包括其本身。

我们要通过isNaN(NaN)来判断是否为NaN

• 浮点数

避免使用浮点数计算，会有精度损失。

• null和undefined

  • null 空
  • undefined 未定义

• 数组

js数组可存放不同类型元素

且数组越界显示为undefined

var arr=[1,2,3,'hello',null,true];

• 对象

定义都使用var，但对象用大括号，数组用中括号。

对象定义中每个属性用逗号隔开，最后一个不用。

严格检查模式、

‘use strict’

// 局部变量建议用let定义，而不是var
   'use strict';// 应写在js第一行
   num="sssss";
   console.log(num);

这里若没有’use strict’则num是可以输出的，使用严格检查模式后，我们要规范编写必须定义变量，且此时不应使用var，而用let（局部变量），用var会警告。

数据类型

console.log 控制台输出

1、字符串

• 字符串一般使用单引号和双引号。
• 注意使用转义字符（记得要单引号/双引号包裹）

\'
\n
\t
\u#### // Unicode字符
\x41 // Ascll字符

• 多行字符（``包裹）

let sss=
           `
           hello
           ssss
           sss
           ss
           s`
alert(sss);

• 模板字符串(可用${}连接字符串)

let name="tang";
   let mm=`jjj ${name}`;
   alert(mm);

• 字符串长度

str.length

• js字符串不可变，类似java只是换了个存储空间
• 大小写

str.toUpperCase() // 大
str.toLowerCase() // 小

• str.indexOf(‘x’) // 获得字符位置

• substring()（截取字符串）

str.substring(start,stop);
// 返回start ~ stop-1的全部字符，没有stop则知道字符串结尾。

2、数组

数组可包含任意数据类型

• 长度

arr.length

给数组长度赋值，其大小会变化，若赋值过小则数组会丢失。

• indexOf（获得元素下标）

返回某个指定字符串值在字符串中首次出现的位置

注意：存的字符串”9”和数字9是不同的

• slice()（截取数组）

截取数组的一部分，类似Stringsubstring方法

• push()，pop()（尾部操作）

在尾部操作
push：尾部入栈
pop：删除弹出

• unshift()，shift()（头部操作）

在头部操作
unshift：头部入栈
shift：删除弹出

• sort() 升序
• reverse() 元素反转
• concat() 拼接字符串
• join(-)

用特定字符连接字符串，例如这里用-连接

• 多维数组（和java类似）

3、对象

若干键值对，键是字符串，值是任意数据类型

多逗号连接，最后一个不用

var 对象名{
	属性名:属性值,
	属性名:属性值,
	属性名:属性值,
	属性名:属性值
};

• 使用不存在的对象，不报错，只显示undefined
• 动态删减属性

delete 对象.属性名

• 动态添加

直接给属性赋值就行，毕竟js属性是undefined，而不是没有。

对象.属性名="属性值"

• 判断属性是否在对象中，xxx in xxx

'属性名' in 对象

• 判断一个属性是否是对象本身拥有（即非父类的）

man.hasOwnProperty(name);
false
man.hasOwnProperty('toString');
false
man.hasOwnProperty('name');
true

4、控制语句

• if-else

• while

• for

• forEach

• for···in（类似foreach）

5、Map和Set

ES6中新特性

var map = new Map([['tang',111],['jiji',888],['wwwww',9999]]);
   var name = map.get('tang');
   map.set('admin',777);
   console.log(name);
   console.log(map);

   var set = new Set([3,1,5,2,4,8]);
   set.delete(5);
   set.add(9);
alert(set.has(1));

6、iterator(for-of，ES6新功能)

只有提供Iterator接口的数据类型才能使用for-of

使用for-of语句遍历Map和Set

var map = new Map([['tang',111],['jiji',888],['wwwww',9999]]);
for(let x in map){
    console.log(x);
}

• for-of和for-in区别
  • 遍历数组时，for-of对应value值，for-in对应key也就是数组小标
  • 遍历Map、Set必须用for-of，for-in会显示为undefined
  • 一般for-in用于对象，for-of用于数组和Map、Set类型

函数（function）

1、两种定义方法

// 第一种
function a(x){
    if(x>=0)
        return x;
    else
        return -x;
}

// 第二种
var a = function(x){
    if(x>=0)
        return x;
    else
        return -x;
}

若不存在参数，可手动抛出异常

2、arguments

arguments会包含所有参数，包括隐藏的。

参考：https://baike.baidu.com/item/arguments/4291417?fr=aladdin

3、变量作用域

• 函数内声明var变量，在函数外用不了

• 但闭包可以实现

• 内部函数可以访问外部函数变量，反之不行

• 函数变量定义应全放在头部，要先定义

全局变量：定义在函数外，全局使用，也可不用var，但这样不严谨

全局对象window

js只有一个全局作用域，任何变量（函数也可视为变量），函数在其作用范围内没找到，它就会向外查找，全局都找不到则报错ReferenceError

局部作用域 let

function sss(){
    for(var i=0;i<10;i++){
        console.log(i);
    }
    console.log(i+1);
}

用let定义局部变量，这里var定义则结束循环后i的值对外部仍有影响。

常量 const

const定义变量，不能对其进行后续改变。

方法

方法就是把函数放在对象内，对象：属性+方法

var student = {
    name:'tc',
    birth:2000,
    age: function(){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}

apply

在js中可控制this，可用apply调用函数的方法。

内部对象

标准对象：

typeof NaN;
typeof true;
typeof undefined;

1、Date

var now = new Date();
console.log(now);
now.getFullYear();
now.getMonth();// 月 0~11
now.getDate();// 日
now.getDay();// 星期
now.getTime();// 时间戳 全世界统一的，从1970.01.01 00:00:00

2、JSON

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

JSON格式：

• 对象使用{}
• 数组使用[]
• 键值对：key:value

JSON和js对象转换

//对象->JSON字符串
var jsonUser = JSON.stringify(user);
alert(jsonUser);// {"name":"sss","age":18,"sex":"男"}

//JSON字符串->对象,参数为JSON字符串
//注意参数是字符串要加单引号/双引号以区分，引号的使用应和内部使用的区分
var obj=JSON.parse('{"name":"sss","age":18,"sex":"男"}');
console.log(obj);

3、Ajax

。。。。。

面向对象

1、使用原型

//注意这里是两个_
//可使用yyy的对象
xxx.__proto__=yyy

var student={
    name:'sss',
    age:18,
    run:function(){
        console.log(this.name+" run");
    }
};

var tang={
    name:'tang'
};

tang.__proto__=student;

2、class、继承

class关键字，ES6才引入

• 定义类，注意构造器固定叫constructor
• 继承 extends

class student{
    //构造器
    constructor(name) {
        this.name=name;
    }
    run(){
        alert(this.name+' run!!!');
    }
}

class smallstudent extends student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    myGrade(){
        alert(this.name+'你好啊'+'我是'+this.grade);
    }
}

var tang = new student('tang');
var cheng = new smallstudent('cheng',5);

3、原型链

参考：https://www.cnblogs.com/loveyaxin/p/11151586.html

就是原型找原型，形成一个链。相当于一个继承的体系，类似java类都是从object开始继承的。

操作BOM对象（重点）

BOM浏览器对象模型

window

window代表浏览器窗口

window.Infinity
Infinity
window.innerHeight
370
window,innerWidth
770

Navigator

Navigator封装了浏览器的信息

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

screen

屏幕尺寸

screen.width
1536
screen.height
864

location（重要！！！）

location代表当前页面的URL信息

//控制台location
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()
location.assign('https://aidianfirst.vercel.app/')

document

document可代表当前页面

<!--获得当前文档树节点-->
<dl id="nihao">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById('nihao');
</script>

获得网页cookie

document.cookie
"_uuid=12AD9B6E-7D27-910D-D2C3-16B7CE8BE6A183956infoc; buvid3=72FE8692-137F-432D-A0C7-64359BD0161334759infoc; CURRENT_FNVAL=80; blackside_state=1; buvid_fp=72FE8692-137F-432D-A0C7-64359BD0161334759infoc; buvid_fp_plain=72FE8692-137F-432D-A0C7-64359BD0161334759infoc; DedeUserID=29529786; DedeUserID__ckMd5=14a1d7ea1c081c7b; bili_jct=85540cf7e864c680d8c75460f7238f3d; LIVE_BUVID=AUTO5916185744471327; rpdid=|(J|~YRYl~k~0J'uYu)l)JJ|m; sid=kjvnuuph; fingerprint3=9eac97b8d706b07c3fc9fde2a4cea22f; Hm_lvt_8a6e55dbd2870f0f5bc9194cddf32a02=1618576997,1619253779,1619253784; fingerprint=35b117c5c67b5b9344cd656b41de7896; fingerprint_s=27fde5385e8f1e22ab6c6320b19cdaba; PVID=1; bp_video_offset_29529786=527226678909720066; bp_t_offset_29529786=527237403436862937"

history

历史记录

history.back()
history.forward()

操作DOM对象（重点）

DOM：文档对象模型

核心

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

• 更新DOM节点
• 遍历DOM节点
• 删除DOM节点
• 添加DOM节点

<div id="father">
    <h1>1111111</h1>
    <p id="a">p1</p>
    <p class="b">p2</p>
</div>

<script>
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('a');
    var p2=document.getElementsByClassName('b');
    var father=document.getElementById('father');
    var children=father.children;//获得父类子节点
</script>

1、更新节点

father.innerText='tang';//修改文本值
father.innerHTML='<strong>tang</strong>';//可解析html标签
//还可修改css，属性使用字符串
father.style.color='red';
father.style.fontSize='200px';
father.style.padding='2em'

2、删除节点

• 先获取父节点，在删除
• 删除多个节点时，节点位置是动态变化的

father.removeChild(p1);
//参数还可以是father.children[0],此时就是动态删除，每次删除后会动态变化

3、插入节点

innerText会覆盖原数据，所以有时需要添加得使用其他的方法。

可添加已有节点和新生成节点

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"></script>
</head>
<body>
<p id="c">p33333</p>
<div id="father">
    <h1>文本</h1>
    <p id="a">p1</p>
    <p class="b">p2</p>
</div>

<script>
    //已存在的节点插入
    var p3 = document.getElementById('c');
    var father = document.getElementById('father');
    father.appendChild(p3);
    //创建新节点插入
    var newP = document.createElement('p');
    newP.id = 'newP';
    newP.innerText='NIHAO';
    father.appendChild(newP);
    //新建标签插入
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    father.appendChild(myScript);
</script>
</body>
</html>

insertBefore

var p1 = document.getElementById('a');
father.insertBefore(p3,p1);//将p3插入到p1前面

操作表单

<form action="login">
    <span>用户名:</span> <input type="text" id="username">
</form>
<script>
    var input = document.getElementById('username');
</script>
//控制台使用input.value获得值，input.value='xxx'可改变值

MD5加密

md5（xxx），使用函数加密。

onsubmit

form可配置的参数，绑定一个提交验证的函数，将其true、false返回给onsubmit来验证。

jQuery

jQuery库，里面有大量js函数

官方文档：https://jquery.cuishifeng.cn/index.html

jQuery CDN加速，在线jQuery

网站：https://www.bootcdn.cn/jquery/

jQuery万用公式

$(‘selector’).action()

$(‘选择器’).事件函数()

<a href="" id="test-jquery">111</a>

<script>
    $('#test-jquery').click(function (){
        alert('hello');
    })
</script>

选择器

$('p').click()//标签选择器
$('#id').click()//id选择器
$('.class').click()//类选择器

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #div-move{
            width: 500px;
            height: 500px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
mouse:<span id="moveMouse"></span>
<div id="div-move">
    移动鼠标
</div>
<script>
    $(function (){
        $('#div-move').mousemove(function (e){
            $('#moveMouse').text('x:'+e.pageX+'y:'+e.pageY);
        });
    });
</script>
</body>
</html>

操作DOM

//无参获得值，有参设置值
$('#ul li[name=l2]').text();
$('#ul').html();

css操作

$('#ul li[name=l2]').css("color","red");

小结

建议速速过完web然后看框架。。