JavaScript基础

概述

JavaScript是一门世界上最流行的脚本语言
Java与JavaScript无关
一个合格的后端人员，必须要精通JavaScript

历史

ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到es6版本~
但是大部分浏览器还只停留在支持ecs5代码上！所以开发环境--线上环境，版本不一致

快速入门

引入JavaScript


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <srcipt>
        alert('hello,world');
    srcipt>
    
    
    <srcipt src="js/qj.js">srcipt>
    
    
    <srcipt type="text/javascript">srcipt>
head>
<body>
?
    
    
body>
html>

alert('hello,world');

效果：

基本语法


<srcipt>
    // 1. 定义变量   变量类型   变量名 = 变量值;
    var score = 71;
    // alert(score);
    var name = "qinjiang";
    "name";
    // 2.条件控制
    if (score>60 && score<70){
        alter("60~70");
    }else if(score>70 && score<80){
        alter("70~80");                            
    }else{
        alter("other");                            
    }
    //console.log(score)  在浏览器的控制台打印变量！ 相当于System.out.println();
    /*
    * 多行注释
    */

设置JavaScript最新版本：
在网页上获取JavaScript信息：

在网页上调试JavaScript代码：
浏览器必备调试须知：

数据类型
- 数值、文本、图形、音频、视频......
- 变量
```
var 王者荣耀 = '倔强青铜';
```
- number -- js不区分小数和整数
- 字符串
  - 'abc'、"abc"
- 布尔值
  - true、false
- 逻辑运算
- 比较运算符！！！重要！
  
  这是一个js的缺陷，坚持不要使用==比较
- 须知：
  - NaN==NaN，这个与所有的数值都不相等，包括自己
  - 只能通过isNaN(NaN)来判断这个数是否是NaN
- 浮点数问题：
  - console.log(1/3) == (1-2/3) //false
    - 尽量避免使用浮点数进行运算，存在精度问题！
  - Math.abs(1/3-(1-2/3))<0.00000001 //true
- null和undefined
  - null 空
  - undefined 未定义
- 数组
  - Java的数组必须是相同类型的对象，js中不需要这样！
    - 去数组下标，如果越界了，就会打印undefined
- 对象
  - 对象是大括号，数组时中括号
  - 每个属性之间使用逗号隔开，最后一个不需要添加
  - 取对象的值

严格检查格式

数据类型

字符串
1. 正常字符串，我们使用单引号或者双引号包裹
2. 注意转义字符 \
3. 多行字符串
4. 模板字符串
5. 字符串长度
  
  str.length
6. 字符串的可变性，不可变
7. 大小写转换
8. studnt.indexOf('t')
9. sunstring
数组
1. 1. Array可以包含任意的数据类型
  2. 长度
    
    arr.length
    
    【注意】：假如给arr.length赋值，数组大小就会发生改变~（长度可变，填充为undefine类型值），如果赋值过小，元素就会丢失。
  3. indexOf -- 通过元素获得下标索引
    - 字符串的"1"和数字1是不同的
  4. slice()，截取数组的一部分，返回一个新数组，类似于String中的substring
  5. push()、pop() -- push：压入到尾部，pop：弹出尾部的一个元素
  6. unshift()，shift()头部 -- unshift：压入到头部，shift：弹出头部的一个元素
  7. 排序sotr()
  8. 元素反转 reverse()
  9. 连接 concat()
    
    【注意】：concat()并没有修改数组，只是会返回一个新的数组
  10. 连接符 join() -- 打印拼接数组，使用特定的字符串连接
  11. 多维数据
  【数组】：存储数据（知道如何存，如何取，方法都可以自己实现！）
对象
- 若干键值对
- js中对象，{......}表示一个对象，键值对描述属性 xxxx:xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
- 【注意】：JavaScript中的所有的键都是字符串，值是任意对象！
1. 对象赋值
2. 使用一个不存在的对象属性，不会报错！ undefined
3. 动态地删减属性，通过delete删除对象的属性
4. 动态地添加，直接给新的属性添加值即可
5. 判断属性名是否存在在这个对象中！ xxx in xxx！
6. 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
流程控制
1. if判断
2. while循环，避免程序死循环
3. for循环
4. forEach循环 -- 5.1引入
5. for...in
Map和Set

ES6的新特性~
1. Map
2. Set：无序不重复的集合
iterator

ES6的新特性~
1. Map
2. 遍历数组
3. 遍历map
4. 遍历set

函数

定义函数

定义方式一：
1. 绝对值函数
  
  一旦执行到return 代表函数结束，返回结果！
  
  如果没有执行return，函数执行完也会返回结果，结果就是undefined
  
  定义方式二：
2. function(x){......}这是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数！
3. 方式一和方式二等价！
4. 调用函数
  
  参数问题：JavaScript可以传任意个参数，也可以不传递参数~
  
  参数进来是否存在问题？存在
  
  假设不存在问题，如何规避？
5. arguments
  
  arguments是js免费赠送的关键字；
  
  代表，传递进来的所有的参数，是一个数字！
  
  问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。除非排除已有参数~
6. rest
  1. 以前：
  2. ES6引入的新特性，获取除了已经定义的参数之外的所有参数~
    
    【注意】：rest参数只能写在最后面，必须用...标识。
变量的作用域
1. 在JavaScript中，var变量实际是有作用域的。
2. 假设在函数体中声明，则在函数体外不可以使用~（非想要实现的话，后买可以研究一下闭包）
3. 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
  
  内部函数可以访问外部函数的成员，反之则不行
4. 假设内部函数变量和外部函数变量重名！
  
  假设在JavaScript中函数查找变量从自身函数开始~，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
5. 提升变量的作用域
  
  结果：undefined
  
  说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
  
  就是就算把var y=‘y'写道congsolog的下面了，有个预处理的过程，会自动把var y提升到最前面，先定义y，但是没有初始化，就是没有把 y = ’y'提升上去。
  
  这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱发，便于代码维护。
6. 全局函数
  1. 全局变量
  2. 全局对象 window
    
    alter()这个函数本身也是一个window变量
    
    JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError
  3. 规范
    1. 由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~>如何能够减少冲突？
      
      把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~
  4. 局部作用域
    
    ES6 let关键字，解决局部作用域冲突问题！
    
    建议大家都使用let去定义局部作用域！
  5. 常量 const
    1. 在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值
    2. 在ES6引入了常量关键字const
方法
1. 定义方法
  1. 方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
  2. this.代表什么？拆开上面的代码看看~
  3. this是无法指向的，是默认指向调用它的那个对象；
2. apply
  
  在js中可以控制this指向！

内部对象

标准对象

Date
1. 1. 基本使用
  2. 转换
JSON
1. JSON是什么
  1. 早期，所有数据传输习惯使用XML文件！
    - JSON（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式。
    - 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
    - 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
  2. 在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示；
2. 格式
  - 对象都用{}
  - 数组都用[]
  - 所有的键值对都使用key:value
3. JSON字符串和JS对象的转化
4. 很多人搞不清楚，JSON和JS对象的区别

面向对象编程

什么是面向对象
- JavaScript、Java、C#......都面向对象；但JavaScript有些区别！
- 类：模板原型对象
- 对象：具体的实例
- 在JavaScript这个需要大家换一下思维方式！
- 原型： -- 可以简单理解为父类
class继承
1. class关键字，是在ES6引入的
  1. 以前：
  2. ES6之后：定义一个类，类里有属性，方法
2. 继承
  
  本质：查看对象原型
原型链

操作BOM对象（重点）

浏览器介绍
1. JavaScript和浏览器的关系？
  - JavaScript诞生就是为了能够让他在浏览器中运行！
2. BOM：浏览器对象模型
  - IE6~11
  - Chrome
  - Safari
  - Firefox
  - Opera
3. 三方：
  - QQ浏览器
  - 360浏览器
window
1. window代表浏览器
Navigator（不建议使用）
1. Navigator封装了浏览器的信息
2. 大多数时候，我们不会使用navigator对象，因为会被人为修改！
3. 不建议使用这些属性来判断和编写代码
screen
1. 代表屏幕尺寸
location（重要）
1. location代表当前页面的URL信息
document（内容 DOM）
1. document代表当前的页面，HTML DOM文档树
2. 获取具体的文档树节点
3. 获取cookie
4. 劫持cookie原理
5. 服务端可以设置cookie：httpOnly就安全啦
history（不建议使用）
1. history代表浏览器的历史记录

操作DOM对象（重点）

核心
1. 浏览器网页就是一个Dom树形结构！
  1. 更新：更新Dom节点
  2. 遍历Dom节点：得到Dom节点
  3. 删除：删除一个Dom节点
  4. 添加：添加一个新的节点
2. 要操作一个Dom节点，就必须要先获得这个Dom节点
获得Dom节点

这是原生代码，之后我们尽量都使用jQuery();
更新节点
操纵文本
操作css
删除节点
1. 删除节点的步骤：先获取父节点，在通过父节点删除自己
  
  【注意】：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！
插入节点
1. 我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点以及存在元素了，我们就不能这么干了！会产生覆盖！
2. 追加
  - 效果：
3. 创建一个新的标签，实现插入
4. insert

操作表单（验证）

表单是什么 form 它本身也是DOM树的节点
- 文本框 text
- 下拉框