JavaScript

像编程语言一样以分号结尾

alert

弹窗的形势,

对内写法

对外写法

script必须要是成对出现

1
2
3

<script>
	//...
<script>

console.log(变量名)

打印一个变量,可以在网页前端f12控制台内调试js代码

基本语法入门

变量定义

没有类型,根据内容判断,变量名区分大小写,以字母下划线$开头,中文也可以,不能以数字开头

1	var num=1;

条件控制

和C语言一样

if语句相同,可以嵌套

双斜杠//注释,加空格,不然强报错

多行注释/**/

严格区分大小写

打断点调试

数据类型

数值,文本,图形,音频,视频…

number

js不区分整数和小数,统一用number

123//整数
123.1//浮点数
1.123e3//科学计数法
  -99//负数
NaN //not a number
infinity //表示无限大

字符串

单引号或双引号包裹
字符串的可变性,不可变
注意,转换大小写是方法,要加括号
注意转移字符
\u### Unicode字符
多行字符串编写``飘号包裹可以写多行字符串

变量拼接,也可以用+

布尔值

true,false

逻辑运算

1
2
3

&&
||
!

比较运算符

1 2	==//类型不一样,值一样判断为真,弱等于 ===//强等于

NaN与所有的数值都不相等,包括自己,==和===都返回false

isNaN语句判断是否是NaN类型

浮点数会自动精简,,存在精度问题

null和undefined

null 空
undefined 未定义

数组

js中不需要是相同类型的数据

1 2	var arr = [1,2,3,true,'hello']; new aar(1,2,3);

取数组下标越界后会undefined

对象

var person = {
  name: 'hello',
  age: 3,
  arr:['abd','aaa']  
}

每个属性用逗号隔开,最后一个不需要添加

取值,person.name

严格检查模式

let:定义局部变量

use strict

加上这行代码就会严格检查,约束语句,需要支持es6语法,必须写在第一行

加上之后就会报错

指令

console.log(mes.indexOf());获取字符串首次出现位置,获取下标

console.log(mes.substring(1,3)); [)取值方式

var mes =`systemls`

console.log(mes.substring(1,3));
console.log(mes.substring(2));从下标为2开始截取

数组

字符串的值不可变但是数组的值是可以变的

通过下标取值赋值

indexof:通过元素获得元素下标
slice() 截取数组的一部分
arr.length可以改变长度,长度变小,数值会丢失
push(),往数组尾部里面加入数据,添加
pop(),把尾部元素弹出,删减
unshift(),往头部添加
shift(),从头部删减
sort(),按照ASCII大小排序
reverse(),倒序
concat(),拼接数据但是原数组不会被改变,知识返回一个新的数组
连接符join,打印拼接数组,使用特定的字符串拼接
多维数组

对象

若干个键值对

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

{…..},表示一个对象,键值对描述属性,逗号隔开,最后一个不加逗号

所有的键都是以字符串形势存在
对象赋值直接赋值即可
使用不存在的对象属性,不会报错,只会undefined
动态删减属性,添加属性

判断属性值是否在这个对象中

判断一个属性是否是这个属性自身拥有

Map和Set

ES6的新特性

Map

1
2
3

var map=new Map([['tom',100],['jake',80],['rose',63]]);
var i= map.get('rose');
console.log(i);

通过key获得value

1
2
3

var map=new Map([['tom',100],['jake',80],['rose',63]]);
var i= map.set('admin',57);
console.log(map);

Set

set:无序不重复的集合

1 2	var aaa =new Set([1,6,2,3,4,2,5,3,7]) console.log(aaa);

删除

1
2
3

var aaa =new Set([1,6,2,3,4,2,5,3,7])
aaa.delete(7);
console.log(aaa);

添加

1
2
3

var aaa =new Set([1,6,2,3,4,2,5,3,7])
aaa.add(12);
console.log(aaa);

是否包含某个元素

1
2
3

var aaa =new Set([1,6,2,3,4,2,5,3,7])
aaa.add(12);
console.log(aaa.has(3));

iterator

通过for of遍历打印数组

var a=[1,2,3,4,5,6,7];
for (var x of a) {
    console.log(x);
}

函数

方法:放在类里面的函数就是方法

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

调用函数直接在控制台调用传参

argument

把传入的所有参数以数组的形势存储,利用这个参数可以拿到说有内容

function flag(x) {
    console.log('x=>'+x);
    for (i=0;i<arguments.length;i++)
    {
        console.log(arguments[i]);
    }
}

reset

输出除了传入的参数以外的数值

function flag(a,b,...rest) {
    console.log('a=>'+a);
    console.log('b=>'+b);
    console.log(rest);
}

变量的作用域

局部变量,全局变量,类变量

在函数体内声明,则在函数体外不可以使用(在函数体外用的知识点:闭包)

内部类可以访问外部类的变量,

函数查找从函数自身开始,由内向外查找,若内部函数变量和内部函数变量重名时,内部函数变量优先

提升作用域

function aa() {
  var x= "x"+ y;
  console.log(x);
  var y ="y";
}

输出结果xundefined

js执行引擎自动提升了y的声明,也不会报错,但是不会提升yd赋值

所以写代码还是要把变量先声明

默认所有全局变量都自动绑定在Windows对象下,实际上只有一个全局作用域

定义一个x全局变量 ,console.log(x);和console.log(window.x);结果相同

规范

把自己的代码全部放入自己定义一个唯一的全局变量,降低命名冲突问题

var bianliang = {};

//定义全局变量
bianliang.aaa = 'hello';

局部作用域 let

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

常量 const

调用类的自身变量,thise.name

apply:可以通过apply去指向自定义的参数

一个是函数被动被调用,一个是函数主动去调用

函数名.apply(参数名,参数值)

内部对象

typeof:判断字符类型的函数

Date

时间戳

var abc = new Date();
abc.getFullYear();//年
abc.getMonth();//月
abc.getDate();//日
abc.getDay();//星期几
abc.getHours();//时
abc.getMinutes();//分钟
abc.getSeconds();//秒
abc.getTime();//时间戳

json

bson二进制的json

是一种数据交换格式,任何js支持的类型都可以用接送表示

格式:

对象都用{}
数组都用[]
所有的键值对”key”=>”value”
属性用逗号隔开

对象转化为json字符串

var user ={
  name: 'adbcbjxz',
  age:3,
  sex:'female'

}
var a =JSON.stringify(user);//生成
//解析
var obj =JSON.parse('{"name":"adbcbjxz","age":3,"sex":"female"}');

Ajax

原生js写法 xhr异步请求
jQuey封装好的方法 $
axios 请求

面向对象编程

什么是面向对象

类:模板

对象:具体的实例

var user ={
    name: 'adbcbjxz',
    age:3,
    sex:'female',
    run: function(){
        console.log(this.name + "runing...");
    }

};

var xiaoming ={
    name:'xiaoming'
};

xiaoming.__proto__= user;//继承类,可以随意指向

继承类

class类继承

class关键字是ES6引入的

和php一样,嗯

继承

extends关键字

原型链

proto

js的称呼,在其他变成语言叫继承

操作BOM对象(了解即可)

js和浏览器的关系

BOM:浏览器对象模型

就是内置的库和函数,能够在控制台操作获取

例如window.方法

location代表当前页面的URL信息,能够看到页面的信息

host:
href:跳转的网页
protocol:协议
reload :f reload()//刷新网页
//设置新的地址
location.assign()//重定向,跳转页面

document

document代表当前的页面,可以获取具体的文档数节点

动态的增减

操作DOM对象

文档对象模型,动态操作元素

更新:更新dom节点
遍历dom节点:得到dom节点
删除: 删除一个dom节点
添加:添加一个dom节点

dom节点就是html树的内容, 标签

主要依靠document.方法(选择器名字)

.textContent属性可以获取标签文本内容

</head>
<body>

<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>

<script>
    //对应css的选择器
    document.getElementsByName('h1');//标签选择器,通过标签读取
    document.getElementById('p1');//通过id选择节点
    document.getElementsByClassName('p2');//通过名字
    document.getElementById('father');

    var a= father.children;//获取父节点下的所有子节点
    // father.firstChild;//第一个子节点
    // father.lastChild;//最后一个子节点
  p1.lastChild//获取上一个节点
    
    
</script>

</body>

更新节点

p1.innerText=’456’//修改文本的值
p1.innerHTML=’123‘以HTML的格式解析内容
p1.功能=’字符串’//动态修改,操作文本和js

删除节点

步骤:先获取目标的父节点,再通过父节点删除目标

.removeChild

子类获取父类:p1.parentElement

删除是一个动态的过程,删除多个节点的时候

father.removeChile(father.children[0]);
father.removeChile(father.children[1]);
father.removeChile(father.children[2]);
//这样写是错误的,当删除第0个后,第一个就会变成第0个

创建和插入节点

如果节点为空,我们就可以通过HTML直接添加,但是用这个方法的话,原内容会被覆盖

追加: appendchild(),追加在后面

<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');

</script>

创建一个新节点

var list=document.getElementById('list');

var newp =document.createElement('p');//创建一个p标签
newp.id='newp';
newp.innerText="helloword";
list.appendChild(newp);

在上面的代码的基础上,实现效果