JavaScript基本内容

LESS

行为层
加JavaScript
Anggular
vue
Axios
AntDisign
Element UI
Bootstrap
AmazeUI
三端统一
微信小程序

1 什么是JavaScript

世界上最流行的脚本语言
网景公司
10天
一个合格的后端人员必须精通JavaScript。
ECMAScript 可以理解为JavaScript的一个标准
最新版本到es6，目前浏览器只能支持到es5

2 快速入门

2.1 引入JavaScript

1、内部标签

``javascript

<script>
    // alert("hello world!")
</script>

2、外部引入
abs.js

```javascript
</script>
<!--    外部引入-->
 <script src="js/qj.js"></script>

2.2 基本语法入门

<!--javascript 严格区分大小写-->
    <script>
        // 1.定义变量  变量类型 变量名 = 变量值       
        var score = 66;
        // 条件控制
        if(score>=60 && score<70){
            alert("60~70");
        }
    </script>

浏览器必备调试须知

2.3 数据类型

数值 文本 图形 音频 视频 …
== 变量 ==

var 1a

== number ==
js不区分小数和整数

123 //整数123
123.1 //浮点数123.1
1,123e3 //科学记数法
-99   //负数
NaN   //not a number
Infinity //表示无穷大

== 字符串 ==
‘abc’ “abc”

布尔值
true false

== 逻辑运算 ==
&& || ！

== 比较运算符 ==

=
== 等于（类型不一样，值一样，也会判断为真）
=绝对等于（类型和值全部一样）
NaN=NaN，这个与所有数值都不相等，包括自己
isNaN（NaN） 的值是true

浮点数问题：

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

尽量避免直接浮点数比较运算，存在精度问题，解决办法：

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

== null 和 undifined ==

• null 空
• undifined 未定义
  == 数组 ==
  类型相同的对象

//保证代码的可读，尽量采用第一种方法
var a=[1,2,3,4,"hello",null,true];
new Array(1,2,3,4,"hello",null,true);

== 对象 ==
对象是大括号，数组是中括号
每个属性之间用逗号分开，最后一个不需要。

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

取值的对象

person.age
3

2.4 严格检查模式

<!-- 'use strict'; 前提：IDEA支持es6语法
  严格检查模式，预防随意性导致的一些问题
  必须写在第一行-->
    <script>
        'use strict'
<!--        默认是全局变量-->
       let i=1;//let 定义局部变量
    </script>

3 数据类型

3.1 字符串

1、正常字符串使用单引号或者双引号包裹
2、注意转义字符 \

\'
\n
\t
\u4e2d    \u##### unicode字符
\x41   Ascii字符

3、多行字符串编写

 //tab键上而esc键下面的符号，可以多行
        var msg=
            `hello
            world
            你好`

4、模板字符

 let name="ren";
        let age=3;
        //tab键上而esc键下面的符号，可以多行
        var msg=
            `hello
            world
            你好,${name}`

console.log(msg)
VM110:1 hello
            world
            你好,ren

5、字符串长度

str.length;

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

7、大小写转换

student.toUpperCase()
'STUDENT'
student.toLowerCase()
'student'

8、顺序号

console.log(student.indexOf（"t"）)

9、截取字符串
substring

msg
'hello\n            world\n            你好,ren'
msg.substring(1)
'ello\n            world\n            你好,ren'
msg.substring(1,5)
'ello'

3.2 数组

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

var arr=[1,2,3,4,5,6];
arr[0]
arr[0] =1

1、长度

arr.length;

注意：假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失。
2、indexOf，通过元素获得下标索引

arr.indexOf(2)
1

字符串的1和数字1是不同的。
3、slice（）截取Array的一部分，返回一个新数组，类似于string的substr
4、push pop

arr.push('a','b')
8
arr.pop()
'b'

5、unshift(),shift()头部

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

6、排序sort()

arr.sort()
(7) [1, 2, 3, 4, 5, 6, 'a']

7、元素反转

arr.reverse()
(7) ['a', 6, 5, 4, 3, 2, 1]

8、concat() 拼接

arr.concat(['b','c'])
(9) ['a', 6, 5, 4, 3, 2, 1, 'b', 'c']
arr
(7) ['a', 6, 5, 4, 3, 2, 1]

注意：该方法没有修改数组，只是返回一个新数组
9、连接符join
打印拼接数组，使用特定的字符串连接

arr.join('-')
'a-6-5-4-3-2-1'

10、多维数组

arr=[[1,2],[3,4],['a','b']]
arr[0][1]
2

数组：存储数据

3.3 对象

若干个键值对

var 对象名 = {
    属性名:属性值,
    属性名:属性值,
    属性名:属性值
    }
    var person = {
           name: "ren",
            age: 3,
            email : "435322119@qq.com",
            score: 0
        }

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

person.name
'ren'
person.name="马克思"
'马克思'

2、使用一个不存在的属性会报错
3、动态删减属性，通过delete删除对象的属性
4、动态的添加，直接给新的属性添加值即可
5、判断属性值是否在这个对象中

'age' in person
true
'toString' in person//继承
true

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

person.hasOwnProperty('age')
true
person.hasOwnProperty('name')
true
person.hasOwnProperty('toString')
false

3.4 流程控制

if 判断

  'use strict';
        var age=3;
        if(age>3){
            alert("haha");
        }else{
            alert("cry")
        }

while循环，避免程序死循环

var age=3;
        while(age<100){
            age++;
            console.log(age);
        }
 do{
            age++;
            console.log(age);
        }while(age<100)

for循环

        var age=3;
        for (let i = 0; i < 10; i++) {
            console.log(i);
         }

foreach循环

var age=[3,4,5,6,7,8,9];
         //函数
         age.forEach(function (value){
             console.log(value)});

for in循环

var age=[3,4,5,6,7,8,9];
         //函数
         for (let num in age) {
             console.log(age[num]);
         }

3.5 Map和Set

Map：

 //es6 Map
        //学生的名字，成绩
         //var name=["Tom","Jack","Rose"]
         var map=new Map([['Tom',100],['jack',95],['Rose',98]]);
         var score=map.get('Tom');
         map.set('admin',99);//添加
         map.delete('Tom');//删除

Set：无序不重复集合

var set=new Set([3,4,1,1,1,]);//Set可以去重

set
Set(3) {3, 4, 1}
set.add(5);
console.log(set.has(3));//是否包含元素

3.6 iterator

es6新特性

//通过for of 实现
var arr=[3,4,5];
         for(var x of arr){
             console.log(x);
         }

遍历map

var map=new Map([['Tom',100],['Rose',95]]);
         for(var x of map){
             console.log(x);
         }

遍历set

var set=new Set([5,6,7]);
         for(var x of set){
             console.log(x);
         }

廖雪峰的官方网站

4 函数

4.1 函数定义

public 返回值类型 方法名(){
return 返回值；
}

绝对值函数
定义方式一

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

一旦执行到return代表函数结束，返回结果

定义方式二

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

function(x){}这是一个匿名函数。但是可以把结果赋值给abs（），通过abs就可以调用。
方式一和方式二等价
参数问题：JavaScript可以传递任意个参数，也可以不传递
不存在的参数，如何处理

var abs=function(x){
            //手动抛出异常来判断
            if(typeof x!=='number'){
                throw 'not a number';
            }
            if(x>0){
                return x;
            }else {
                return -x;
            }
        }

arguments
arguments是一个JS免费赠送的关键词
代表，传递进来的所有的参数，是一个数组
问题：aiguments包含所有参数，
rest

es6引入的新特性，获取了除定义参数外的所有参数

4.2 变量的作用域

5 内部对象

5.1 Date

标题5.2 Json

json是什么
xml
Bson 二进制的json
轻量级的数据交换格式，简洁清晰的层次结构，
易于人阅读和编写，易于机器解析和生成，并有效提升网络传输效率。
JavaScript一切皆为对象，任何js支持的类型都可以用json来表示。

对象用{}
数组用[]
键值对都用key：value

JSON字符串和JSON对象的相互转化

 var user={
            name:'qj',
            age:23,
            sex:'male'
        }
        //对象转化为json字符串
        var jsonUser=JSON.stringify(user);
        console.log(user);
        console.log(jsonUser);
        //json字符串转化为对象,参数是键值对字符串，注意单引号和双引号交叉使用
        var obj=JSON.parse('{"name":"qj","age":23,"sex":"male"}');
{name: 'qj', age: 23, sex: 'male'}
{"name":"qj","age":23,"sex":"male"}

很多人搞不清，Json和js对象的区别

5.3 Ajax

• 原生的js写法，xhr是异步请求
• jQuery封装好的方法
• axios请求

6 面向对象编程

6.1 什么是面向对象

JavaScript有区别
类：模板 原型对象
对象：具体的实例
在JavaScript中，
原型：.proto，对象继承的方法

class继承
class关键字是es6才引入的，很多浏览器不支持

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

继承

 class Student{
            constructor(name) {
                this.name=name;
            }
            hello(){
                alert('hello')
            }
        }
        var xiaoming=new Student('xiaoming');
        xiaoming.hello();
        class xiaoStudent extends Student{
            constructor(name,grade) {
                super(name);
                this.grade=grade;
            }
            myGrade(){
                alert('我是一名小学生')；
            }

        }

本质：查看对象原型

原型链
proto

7 操作BOM对象（重点）

JavaScript和浏览器的关系？
JavaScript就是为了在浏览器中运行
BOM：浏览器对象模型

• IE 6~11

• Chrome

• Safari

• Firefox

• Opera
  三方

• QQ浏览器

• 360浏览器
  window
  window代表浏览器窗口

window.innerHeight
620
window.innerWidth
980
window.outerHeight
253
window.outerWidth
400

Navigator
Navigator,封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36'

大多时候，我们不会使用navigator对象，因为会被人修改。
不建议使用这些属性判断和编写代码
Screen

screen.width
400
screen.height
227

location
location代表当前页面的url

""
host: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('https//blog.ren.com')

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

document.title
'百度一下，你就知道'
document.title='renren'
'renren'

获取具体的文档树节点

<d1 id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</d1>
<script>
    var dl = document.getElementById('app');
</script>

获取cookie

document.cookie
'BAIDUID_BFESS=EDBFE0050BA7F77DCD15E8A2C37A5297:FG=1; BIDUPSID=EDBFE0050BA7F77DCD15E8A2C37A5297; PSTM=1691807733; BD_UPN=12314753; ZFY=FFQMMm2l1RiT2c0fR5V4N8JvUe:Bap4h1W:BIM0PshRlw:C; BD_HOME=1; H_PS_PSSID=36561_39112_38831_26350_39138_39132_39100; BA_HECTOR=ak2g018l04802h8laka12lam1ido2a81p'

劫持cookie原理
www.jd.com

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

服务器端可以设置 cookie：httpOnly
history

代表浏览器的历史记录

history.back()
history.forward()

8 操作DOM对象（重点）

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

• 更新：更新Dom节点
• 遍历dom节点：得到dom节点
• 删除节点
• 添加节点
  -要操作一个dom节点，必须先获取dom节点
  获得dom节点

<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应css的选择器
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p1=document.getElementsByClassName('p2');
    var father=document.getElementById('father');
    var children=father.children;//获取父节点下的所有子节点    
</script>

更新节点

• id1.innerText=456 修改文本的值
• id1.innerHTML='123'可以解析HTML
  操作js

id1.style.color='red'//属性使用字符串包裹
'red'
id1.style.fontSize='50px'
'50px'
id1.style.padding='2em'
'2em'

删除节点
删除节点的步骤：先获取父节点，再通过父节点删除自己。

<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应css的选择器
    var self=document.getElementById('p1');
    var father=self.parentElement;
    father.removeChild(self);
</script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候要注意。
插入节点
我们获得了某个dom节点，通过innerHTML可以增加一个原素。
追加：

<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
<script>
    //对应css的选择器
   var js=document.getElementById('js');
   var list=document.getElementById('list');
  list.appendChild(js);
</script>

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

<script>
    //对应css的选择器
   var js=document.getElementById('js');
   var list=document.getElementById('list');
//创建新的节点
    var newP = document.createElement('p');
    newP.id='newP';
    newP.innerText="hello everyone!";
    list.appendChild(newP);
    
    var myScript=document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    
</script>

9 操作表单（验证）

表单是什么 form DOM树

• 文本框 text
• 下拉框
• 单选框 radio
• 多选框 checkbox
• 隐藏框
• 密码框

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
   <p>
       <span>性别：</span>
       <input type="radio" name="sex" value="man" id="boy"> 男
       <input type="radio" name="sex" value="women" id="girl"> 女
   </p>
</form>
<script>
    var input_text=document.getElementById('username');
    //得到输入框的值
    //修改值
</script>

提交表单