JavaScript学习

目录

• 什么是JavaScript
• 快速入门
• 基本语法
• 数据类型
• 严格检查模式
• 字符串类型
• 数组类型
• 对象类型详解
• 分支和循环
• Map和Set集合
• Iterable迭代和下周安排
• 函数的定义和参数获取
  • 定义函数
• 变量的作用域，let，const
  • 局部作用域
  • 常量
• 方法的定义和调用
• 内部对象
  • Date
  • JSON对象
• 面向对象原型继承
• 面向对象编程
• 操作BOM对象
  • window
  • navigator
  • screen
  • location
  • document
  • history
• 操作DOM对象
  • 核心获取节点
  • 更新DOM节点
  • 删除节点
  • 创建和插入DOM节点
• 获得和设置表单的值
  • 表单提交验证及前端密码MD5加密
• 初识jQuery
• jQuery选择器
• jQuery事件

什么是JavaScript

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

Java，JavaScript

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

快速入门

内部标签
<script>
	alert('hello,world');
</script>


<!--外部引入-->
<!--必须成对出现-->
<script src="js/qj.js"></script>
<!--不用显示定义type，默认就是-->
<script type="text/javascript"></script>

qj.js
alert('hello,world');

基本语法

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

浏览器必备调试须知：

• Element
• Console
• Sources
• Network
• Application

数据类型

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

number

js不区分小数和整数，Number

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

字符串

‘abc’ "abc"

布尔值

true false

逻辑运算

&&
!
||

比较运算符

=    
==等于（类型不一样，值一样，也会判断为true）
===绝对等于（值逸雅阁，类型也要一样）

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

须知：

• NaN===NaN,不等于，NaN与所有的数值都不相等，包括自己

• 只能通过isNaN来判断这个数是否是NaN

浮点数问题

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

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

Math.abs((1/3)-(1-2/3)<0.00000001)

null和undefined

• null空
• undefined 未定义

数组

• Java的数组必须是一系列相同类型的对象，JS中不需要这样！

• ver arr = [1,2,3,'hello',null,true]
  

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

undefined

对象

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

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

var person = {
    name:"ming",
    age:5,
    tags:['js','java']
}

取对象的值

person.name
person.age

严格检查模式

<script>
    'use strict';//严格检查模式，预防JavaScript的随意性导致的一些问题
    //必须写在第一行
    //局部变量建议都使用let去定义~
    let i=1;
    var k=1;
</script>

字符串类型

• 正常字符串我们使用单引号或者双引号包裹
• 注意转义字符\

\'
\n
\t
\u4e2d  unicode字符
"\x41"  ASCII字符  16进制

• 多行字符串编写

var name=`
		hello
        world 
		`
//用` 连接

• 模板字符串

let name="ming";
let msg = `你好呀，${name}`

• 字符串长度

console.log(str.length)

• 字符串的可变性，不可变

• 大小写转换

//方法，大小写转换
name.toUpperCase()
name.toLowerCase()

• name.indexOf('t')
• substring

name.substring(1)  1到最后
name.substring(1,3) 1到3 [)

数组类型

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

var arr=[1,2,3,4];//通过下标取值和赋值
arr[0]=1
arr[1]=2
arr[2]=3

• 长度

arr.length

注意：假如给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失

• arr.indexOf,通过元素获得下标索引
• 字符串的“1”和数字1是不一样的
• arr.slice（）截取数组Array的一部分，返回一个新数组
• push,pop

push:压入到尾部
pop：弹出尾部的一个元素

• unshift(),shift() 头部

unshift:压入到头部
shift:弹出头部的一个元素

• 排序 sort（）

arr.sort()

• 元素反转

arr.reverse()

• concat()

arr.concat([9,7,8])//拼接，返回一个新数组

• 连接符join

ar.join('-')//

• 多维数组

arr[1][1]

对象类型详解

若干个键值对

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

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

• 对象赋值

person.name="ming"

• 使用一个不存在的对象属性，不会报错

• 动态的删减属性

delete person.name

• 动态的添加,直接给新的属性添加值即可

person.haha = "haha"

• 判断属性值是否在这个对象中！xx in xx ,有可能是继承的父类的

• 判断一个属性是否是这个对象自身拥有的 hasOwnProperty

分支和循环

if判断

if(age>3){
    
}else if(age>5){
    
}else{
    
}

while循环

while(){
      
      }

do{
    
}while();

for循环

for(let i=0;i<100;i++){
    
}

for循环

arr.forEach(function (value)
           {
    console.log(value)
}
           )

for(var index in arr){
    console.log(arr[index])
}

for(var value of arr){
    console.log(value)
}

Map和Set集合

Map

'use strict';//严格检查模式，预防JavaScript的随意性导致的一些问题
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var num = map.get('tom');//通过key获得value
map.set('admin',123456);
map.delete('tom');
console.log(num);

Set

'use strict';//严格检查模式，预防JavaScript的随意性导致的一些问题
var set = new Set([1,2,1,2,3]);
set.add(5);
set.has();
set.delete(2);
console.log(set);

Iterable迭代和下周安排

• 遍历数组

for of for in

• 遍历map

for(let x of map)

• 遍历set

for(let x of set)

函数的定义和参数获取

方法：对象（属性，方法）

函数：

定义函数

方式一：

绝对值函数

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

方式二：

var abs = function(x){
    
}

调用函数

abs(10)//10

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

手动抛出异常来判断

arguments

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

rest

获取除了已经定义的参数之外的所有参数

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

变量的作用域，let，const

JavaScript中，var定义变量实际是由作用域的。

假设在函数体中声明，则在函数体外不可以使用~（非要实现的话可以研究一下闭包）

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

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

外部存在这个同名的函数变量，内部函数会屏蔽外部函数的变量

全局变量

x=1;

全局对象,默认所有的全局变量都绑定在windows对象上

alert(window.x)

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

局部作用域

let关键字

常量

const关键字

方法的定义和调用

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

方法，一定要带（）

内部对象

Date

var now = new Date();
var year = now.getFullYear();//年
var month = now.getMonth();//月
var date = now.getDate();//日
var day = now.getDay();//星期几
var hours = now.getHours();//时
var timestamp = now.getTime();//时间戳

console.log(year);

JSON对象

json

早期，所有的数据传输习惯使用xml文件

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

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

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

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

格式：

• 对象都用{}
• 数组都用{}
• 所有的键值对都是用key：value

//对象转化为json字符串
var jsonUser = JSON.stringify(user);
//json 字符串转化为对象
var obj = JSON.parse(jsonUser);

JSON和JSON对象的区别

字符串 对象

面向对象原型继承

JavaScript

类：模板

对象：具体的实例

原型：

var user = {
    name:"x",
    age:3,
    run:function (){
    console.log(this.name+"run")}
};
var xiaoming = {
    name="ming"
    
};
xiaoming.__proto__=user;

面向对象编程

class关键字是在ES6引入的

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

//ES6之后====
class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}
var xiaoming = new Student('xiaoming')

class xiaoStudent extends Student{
    constructor(name,grade){
        super(name)
        this.grade = grade
    }
    myGrade(){
        alert('hello')
    }
}

操作BOM对象

BOM：浏览器对象模型

window

window代表浏览器窗口

window.alert('hello')
window.innerHeight()
window.innerWidth()
window.outerHeight()
window.outerWidth()

navigator

navigator,封装了浏览器的信息

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

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

screen

代表屏幕尺寸

screen.width
1366
screen.height
768

location

location 代表当前页面的URL信息

location
Location {href: "http://localhost:63342/JS/JS/jsdemo.html?_ijt=ue215668iam20n97jjcnv4p0iq", ancestorOrigins: DOMStringList, origin: "http://localhost:63342", protocol: "http:", host: "localhost:63342", …}
location.assign("https://...")

document

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

document.title
document.title="hello"

获取具体的文档数节点

document.getElementById('app')

获取cookie

document.cookie

history

浏览器的历史纪录

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

操作DOM对象

DOM:文档对象模型

核心获取节点

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

• 更新：更新Dom节点
• 遍历dom节点:得到dom节点
• 删除节点
• 添加节点

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

document.getElementById("p1")
<p id=​"p1">​ff​</p>​
document.getElementsByClassName("p2")
HTMLCollection [p.p2]0: p.p2length: 1__proto__: HTMLCollection
var father = document.getElementsByTagName("h1")
HTMLCollection [h1]
var childrens = father.children;//获取所有父节点下的所有子节点

更新DOM节点

document.getElementById("p1")
<p id=​"p1">​ff​</p>​
var d = document.getElementById("p1")
undefined
d
<p id=​"p1">​ff​</p>​
d.innerText="123"
"123"

• innerText 修改文本的值 d.innerText="123"
• innerHTML 可以解析HTML 文本标签 d.innerHTML="ggg"
• style.color 设置颜色 字体类的css操作 d.style.color d.style.fontSize

删除节点

删除节点的步骤

先获取父节点，再通过父节点删除自己

var p1 = getElementById("p1")
var father = p1.parentElement;
father.removeChild(p1)                通过变量

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

创建和插入DOM节点

插入节点

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

追加操作

var js = document.getElementById('')
var list = document.getElementById('')
list.append(js)

创建新节点

var newP = document.createElement('p')
newP.id = 'newP'
newP.innetText = 'Hello'

var myScript = document.createElement('script')
myScript.setAttribute('type','text/javascript')

• insertBefore
• appendChild
• ...

获得和设置表单的值

表单

• 文本框 text
• 下拉框 select
• 单选框 radio
• 多选框 checkbox
• 隐藏域 hidden
• 密码框 password
• ...

得到输入框的值

• 找到节点
• .value方法
• 得到和修改输入框的值

对于单选框，多选框等等固定的值，只能取到当前的值

.checked 查看返回的结果，也可设置为被选中

表单提交验证及前端密码MD5加密

绑定事件

<button type="button" onclick="a()">  ddd</button>

<script>
    function a(){
    alert(1)
}
    </script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>

表单绑定提交事件

onsubmit 绑定一个提交检测的函数，true，false

将这个结果返回给表单，使用onsubmit接收

初识jQuery

jQuery库，里面存在大量的JavaScript函数

获取jQuery 引入在线cdn

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

公式：$(selector).action()

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<a href="" id = "test">点我</a>
<script>
    $("#test").click(function (){
    alert(1);
    })

jQuery选择器

• $("#id").action()

• $("p").action()

• $(".class").action()

• ...

  文档工具站

  https://jquery.cuishifeng.cn/

jQuery事件

鼠标事件

• .mousedown() 按下
• .mousemove()移动

操作DOM

• $("#d").text()
• $("#d").html()
• $("#d").css({'color','red'},{...})
• .show()
• .hide()