JavaScript基础

JavaScript

1.1、概述

• JavaScript是一门世界上最流行的脚本语言
• 一个合格的后端语言需要精通JS

1.2、快速入门

1. 内部标签

 <script>
     //......
 </script>

2. 外部引入

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

2、数据类型

2.1、基本语法入门

<script>
    /*JavaScript严格区分大小写*/
    //变量
    var num = 1;
var name = "siulon";
alert(name);
//条件控制
if(2>   1){
    // alert("true");
    if(num > 0){
        alert("成功");
    }
    console.log(num);//把变量打印到控制台
}
</script>

浏览器调试须知

2.2、数据类型

• 变量

var 王者荣耀 = '最强王者';
var $1 = 1;

• number :不区分小数和整数

123//整数
123.3//浮点数
123.e3//科学计数法
-99//负数
NaN //not a number
Infinity //表示无限大

• 字符串

'abc'
"abc"

• 布尔值

true,false

• 逻辑运算

&& //两个为真才为真
||//一个为真即为真
! //真即假，假即真

• 比较运算符

=()
==(等于，类型不一样，值一样，true)
===(绝对等于,类型一样，值一样，true)

坚持不要使用==

须知

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

• null 和undefined

  null 空

  undefined 未定义

• 数组

  var arr =[1 ,2,3,'hello',null,true];
  //保证代码的可读性，用上面这种
  new Array(1,2,3,'aa');
  

  取数组下标，越界时会出现 undefined

• 对象

//新建对象
var Person = {    
    name:"秦将",    
    age:18,    
    tags:['js','java','web','...']
    //最后一个属性不需要加逗号
}
console.log(Person);

'use strict'(必须写在JavaScript的第一行)严格检查模式，预防JavaScript的随意性导致产生的一些问题

局部变量都使用let 去定义

• 字符串

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

\' 
\n
\t
\u4e2d  //\### Unicode

3. 多行字符串编写

var msg = //esc下面的键
    `hello
    world
    你好
    呵呵`

4. 模板字符串

let name = "siulon";
let age = 3;
let msg =`你好啊，${name}`;
console.log(msg);

5. 字符串长度

   console.log(str.length)
   

6. 字符串的可变性，不可变

   console.log(student[0]);
    s
   
   console.log(student[5]);
   n
   
   student[0] = 1;
   1
   console.log(student);
   student
   

7. 大小写转换

//注意这里是方法不是属性
var student = 'student';
console.log(student.toUpperCase());
console.log(student.toLowerCase());

8. var student = 'student';
   student.indexOf('t')
   //输出
   1
   该方法是根据字符寻找下标
   元素 不存在会返回-1
   

9. substring()

//[)含头不含尾
student.substring(1);//从第一个字符串截取到最后一个字符串
student.substring(1,3); //[1,3)

2.3、数组

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

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

1. 长度

arr.length

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

2.slice()截取array的一部分，返回一个新的数组，类似于String中的substring

3. push('a','b')入栈，pop()出栈，遵循先入后出规则
4. unshift(),压入到头部，shift(),弹出头部的一个元素
5. 排序sort();

arr.sort();

6. 元素反转 reverse（）

['a','b','c']
arr.reverse()
['c','b','a']

7. concat()

['a','b','c']
arr.concat([1,2,3])
['a','b','c',1,2,3]

8. 连接符join

   打印拼接数组，使用特定的字符串连接

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

9.多维数组

arr[[1,2],[3,4],[5,6]]
arr[1][1]
4

2.4、对象

若干个键值对

var 对象名={
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}
 var person = {
         name:'siulon',
         age:18,
         email:'1111111@163.com'
         score: 0
     }

js中的对象，{......}表示一个对象，键值对描述的属性xxxx:xxxx，多个属性

使用逗号隔开，最后一个不加逗号

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

1. 对象赋值

person.name = 'siulon'
'siulon'
person.age = 18
18

2. 使用一个不存在的对象属性不会报错undefined

person.haha
undefined

3.动态的删减属性

delete person.name
true

4. 动态的添加，直接给新的属性添加值即可

person.haha = 'haha'
'haha'

5. 判断属性是否在这个对象中 xxx in xxx

'age' in person
true

2.5、流程控制

• if判断

var age = 18
if(age > 10){//第一个判断
   alert("1");
}else if( age <5){//第二个判断
	alert("2");
 }else{//否则
     alert("flase");
 }

• 循环,避免程序死循环

var age = 18
while(age < 18){
      age = age + 1;
      }

for循环

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

forEach循环5.1引入

var age = [1,2,3,4,5,56,7,8]
age.forEach(function(value){
    console.log(value);
})

2.6、Map和Set集合

• map

//ES6 Map
new Map();
new Set();
var map = new Map([['tom',18],['jack',17],['siulon',20]]);
let name = map.get('tom');//取值
map.set('admin',18);//设值，修改值
console.log(name);
map.delete('tom');//删除

• set

var set = new Set([1,2,3,4,,3,2,1]) //set可以去重
console.log(set)
[1,2,3,4]
set.delete(1);//删除
set.add(2);//添加
console.log(set.has(3))//是否包含

2.7、iterator

es6新特性~

var arr = [3,4,5]
for(var x of arr){///for...of
    console.log(x);
}//打印具体元素
for(var x in arr){//for...in
    console.log(x);
}//打印下标

• 遍历map

 //遍历map
var map = new Map([['tom',18],['jack',17],['siulon',20]]);
for(let x of map){
    console.log(x);
}

• 遍历set

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

3、函数

方法：对象（属性方法）

函数：

3.1、定义函数

定义方式一

绝对值函数

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

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

如果没有执行完和会返回结果，结果就是undefined

定义方式二

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

function(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的对象

rest

• 以前：

function aaa(a,b) {
    console.log("a=>" +a)
    console.log("a=>" +b)
    if(arguments.length > 2){
        for(let i =2 ; i < arguments.length; i++){
            //....
        }
    }
}

• ES6引入的新特性，获取除了已经定义的参数之外的所有参数~...

function aaa(a,b,...rest) {
    console.log("a=>" +a)
    console.log("a=>" +b)
    console.log("rest=>"+rest)
}

rest参数只能写在最后面，必须用...标识符

3.2、变量的作用域

在Javascript中var定义的变量是有作用域的

假设在函数体中声明，则在函数外不可以使用~闭包

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

• 嵌套函数可以访问外围函数的成员，反之不行
  

function qj() {
    var x = 1;
    function qj2() {
        var y = x +1;
    }
 var z = y + x; //Uncaught ReferenceError: y is not defined
}

假设嵌套函数与外围函数的变量重名，则先使用自身函数的变量

• 全局函数

  由于我们所有的全局变量都会绑定到我们的widows上，如果不同的js文件，使用了相同的全局变量，就会发生冲突，如何减少冲突

  //唯一全局变量
  var siulon = {}；
  //定义全局变量
  siulon.name = '谢少龙'
  siulon.add = function(a,b){
  	return a + b;
  }
  

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

  局部作用域let

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

ES6 let关键字，解决局部作用域冲突问题！

function f() {
    for(let i = 0 ; i <10; i ++){
        console.log(i);
    }
    console.log(i+1);//Uncaught ReferenceError: i is not defined
}

建议多使用let

去定义局部作用域的变量；

常量const

在ES6之前，怎么定义常量，只有用全大写字母命名的变量就是常量，建议不要修改这样的值

var PI = 3.1415926

在ES6引入了常量关键字const

const PI = '3.14';//readonly variable,只读变量，不可修改
console.log(PI);
PI = "18";//Uncaught TypeError: Assignment to constant variable.

3.3、方法

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

 function getAge() {
            var now = new Date().getFullYear();
            return now - this.birth;
        }
        var siulon = {
            name:'siulon',
            birth:2000,
            age: getAge
        }
        //属性
        siulon.name;
        //方法，一定要带（）
        siulon.age()

this代表什么？

function getAge() {
            var now = new Date().getFullYear();
            return now - this.birth;
        }
        var siulon = {
            name:'siulon',
            birth:2000,
            age: getAge
        }
        //属性
        siulon.name;
        //方法，一定要带（）
        siulon.age()

//siulon.age()   ok
//getAge()  NaN window

this是无法指向的，是默认调用指向它的那个对象

apply

在js中可以控制this指向

function getAge() {
            var now = new Date().getFullYear();
            return now - this.birth;
        }
        var siulon = {
            name:'siulon',
            birth:2000,
            age: getAge
        }
        var xiaoming = {
            name:'小明',
            birth:1998,
            age: getAge
        }

//siulon.age()   ok

getAge.apply(xiaoming,[]);//this指向siulon,参数为空

4、内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

4.1、Date

基本使用

let date = new Date();
date.getFullYear();//年
date.getMonth();//月
date.getDate();//日
date.getDay()//星期
date.getHours();//时
date.getMinutes();//分
date.getSeconds();//秒
date.getTime();//时间戳，全世界统一，从1970-1-1 00：00：00
console.log(new Date(1630718050854))//根据时间戳获取标准时间

4.2、JSON

json是什么？

早期，所有的数据传输都习惯于xml文件！

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

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

格式：

• 对象用{}

• 数组用[]

• 所有的键值对都是用key:value

  JSON字符串和js对象的转换

  var user = {
      name: 'siulon',
      age:3,
      sex:'男'
  }
  //对象转换成字符串
  var jsonUser =  JSON.stringify(user);
  //json字符串转化为对象
  var obj = JSON.parse('{"name": "siulon", "age": 3, "sex": "男"}')
  
  

4.3、Ajax

• 原生的js写法，xhr异步请求
• JQuery封装好地方法$("#name").ajax("")
• axios请求

5、操作BOM对象

BOM:浏览器对象模型

window

window代表浏览器窗口

window.innerHeight
351
window.outerHeight
824
//可以调整浏览器窗口试试

Navigator

Navigator,封装了浏览器地信息

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

screen

screen.width
1536px
screen.height
864px

location(重要)

localtion代表当前页面的url信息

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

document

document 代表当前的页面，html,dom文档树

document.title
"Title"
document.title = 'siulon'
"siulon"

• 获取cookie

document.cookie
"Hm_lvt_d214947968792b839fd669a4decaaffc=1625144832,1625630479; Hm_lpvt_d214947968792b839fd669a4decaaffc=1626055347; cookie_lang=1"

6、操作DOM对象

DOM：文档对象模型

核心

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

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

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

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

更新节点

<div id="id1">
</div>

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

操作文本

• id1.innerText = '456'修改文本的值
• id1.innerHTML = '<strong>123</strong>'修改文本样式

操作JS

id1.style.color='yellow';
id1.style.fontSize='20px';
id1.style.padding='2em';

删除节点

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

<div id="father">
    <p id="p1">p1</p>
    <p class="p2">p2</p>
    <h1>标题一</h1>
</div>
<script>
    var self = document.getElementById('p1');
    father.removeChild(self);

	//删除是一个动态的过程
	father.removeChild(father,children[0])
    father.removeChild(father,children[1])
    father.removeChild(father,children[2])
	//这样删除时错误的
</script>

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

插入节点

<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 js  = document.getElementById('js');
    var list = document.getElementById('list');
	list.appendChild(js)//追加
</script>

效果：

创建新的标签

let newP = document.createElement('p');//创建一个p标签
newP.id = 'newP';
newP.innerText = '这是新建的节点';
list.appendChild(newP);

7、操作表单

表单的目的是为了提交信息

<form action="" method="post">
    <span>用户名：<input type="text" id="username"></span>
<p>
        <span>性别:</span>
<input type="radio" name="sex" value="boy"  id="boy">男
<input type="radio" name="sex" value="girl" id="girl">女
</p>
</form>
</div>
<script>
    var  element = document.getElementById('username');
var  boy = document.getElementById('boy');
var  girl = document.getElementById('girl');
console.log(element);
//得到输入框的值
boy.checked
girl.checked//判断单选框是否被选中

8、JQuery

JavaScript和Jquery的关系；

jquery库，里面包含了大量的JavaScript的函数

<a href="https://www.baidu.com" id="test-jquery">点击</a>

<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
<script>
    /*jquery公式
    * $(selector).action()*/
    //这里的选择器就是css的选择器
    $('#test-jquery').click(function () {
        alert('hello');
    })

选择器

//css中的所有选择器都可以用
$('input').click();//标签选择器
$('#test-id').click();//id选择器
$('.submit-btn').click();//类选择器

事件

<!--获取当前鼠标的坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标
</div>

<script>
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX +'y:'+e.pageY);
        })
    })
</script>