JavaScript学习

记录不完全，参考
ECMAscript: javascript语言标准

基础

行内写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    script标签内，JavaScript代码-->
    <script>
        alert("hello,world!");
    </script>
</head>
<body>
<!--这里也可以存放！-->
</body>
</html>

外部写法：

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    script标签内，JavaScript代码-->
<!-- script标签必须成对出现-->
    <script src="test.js"></script>
</head>
<body>
<!--这里也可以存放！-->
</body>
</html>

js:

alert("hello,world!");

运行效果：

基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.定义变量 变量类型 变量名=变量值;
        //所有变量类型都为var
        /*
        基础语法等同Java语法
        JavaScript语法严格区分大小写
         */
        var num=1;
        var name="xiaowei";
        if(num=1){
            alert("xiaoweinb!");
        //    f12 选console 敲下：console.log() 相当于println()
        }
    </script>
</head>
<body>

</body>
</html>

数据类型

数值文本图形音频视频

变量

var 变量名不能以数字开头

number

js不区分小数和整数

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

字符串

‘abc' "abc"

布尔值

ture,false

逻辑运算

&& || ！

比较运算符!!!!

= //赋值
== /等于符号(类型不一样，值一样也会判断为ture)
=== /绝对等于(类型不一样，值一样不会判断为ture)

这是js的一个缺陷，坚持不用==比较

须知：NaN与所有的数值都不相等，包括自己！

只能通过isNaN(NaN)判断

尽量避免使用浮动数进行运算，存在精度问题！

null和undefined

null 空

undefined 未定义

数组

Java中数组必须是相同类型的对象，JS中不用是

var arr =[1,2,3,4,5,xiaowei,nb]

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

对象

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // Person person = new Person
        var person ={
            name:"xiaowei",
            age:18,
            sex:male
        }
    </script>
</head>
<body>

</body>
</html>

严格检查模式strict

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

局部变量建议用let定义

数据类型

字符串

1.正常字符串，使用单引号或者双引号包裹

2.注意转义字符\

\'  //一个单引号
\n //换行
\t //tab
\u4e2d //unicode
\x41 //AscII字符

3.多行字符串编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //tab上面 `
        var msg =`
        xiaowei
        nb
        666`
    </script>
</head>
<body>

</body>
</html>

4.模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //tab上面 esc下面 ：`
        let name ="xiaowei";
        let age =3;
        let msg = `你很棒的,${name}`
    </script>
</head>
<body>

</body>
</html>

5.字符串长度

console。log(str.length)

6.字符串大小写转换

student.toUpperCase() :大写转换

student.toLowerCase():小写转换

7.student.indexOf("t")

8.substring

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

数组

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

var arr =[1,2,3,4,5]  //赋值
arr[0] = 1  //赋值
arr.length
//假如给arr.length赋值，数组大小会发生变化，如果赋值过小，元素就会丢失
arr.indexof(2)  //通过元素获得下标索引
//字符串的1和数字1是不同的
arr.slice()//截取arr的一部分 类似于substring
arr.push("a")  //数组尾部入"a"
arr.pop()  //数组尾部出一元素
arr.unshift("a") //压入头部"a"
arr.shift() //数组头部元素出
arr.sort() //排序
arr.reverse() //元素反转
arr.concat([1,2,3]) //数组[1,2,3]拼接进去
//注意;concat并没有修改数组，只是返回新数组
//连接符 join('-')  打印拼接数组，使用特定的字符串连接
//多维数组

对象

若干个键值对

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

js中对象，{...}表示一个对象，键值对表示属性属性名：属性值多个属性之间用逗号隔开，最后一个属性不用逗号

1.对象赋值：

person.name ="xiaowei"
xiaowei
person.name
xiaowei

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

person.dd
undefined

3.动态删减属性

delete person.name
ture
person.name
undefined

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

person.haha = "haha"
haha

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

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

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

6.判断一个对象是否有自身的hasOwnProperty()

person.hasOwnProperty(toString)
false
person.hasOwnProperty(name)
ture

流程控制

if判断：

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

while循环：(避免死循环)

while(age<100){
    age=age+1;
    console.log(age)
}

for循环：

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

console.log(i);
    
}

for...in:

//for var in object

map 和 set

es6新特性

<script>
   'use strict'
   //es6 map
   //学生的成绩，学生的名字
   //var names=['xiaowei','xiaowang','xiaozhang'];
   //var scores=[100,60,70];
  let map = new Map([["Wei",100],["Waning",60],["Zhang",70]])
  let name=map.get('wei');//通过key获得value
   console.log(name);
   map.set('admin',66);//新增或者修改
   map.delete("xiaowei"); //删除
</script>

set:无序不重复集合

set.add(2); //添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素

iterator

遍历数组：

<script>
   'use strict'
   //通过for of 、for in
    var arr=[100,60,70];
   for (var x of arr) {
       console.log(x);
   }
</script>

遍历map:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
   'use strict'

  let map = new Map([["Wei",100],["Waning",60],["Zhang",70]])
   for (let x of map) {
       console.log(x);
   }
</script>
</body>
</html>

遍历set:

<script>
    'use strict'
    var set = new Set([1,2,3,4])
    for (let x of set) {
        console.log(x);
    }
</script>

函数

绝对值函数：

定义方式一

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

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

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs =function(x){

}

调用函数

abs(-10)  //10

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

假设不存在参数，可以设置手动抛出异常

arguments

arguments 是JS免费赠送的关键字

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

rest

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

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

变量的作用域

<script>
    function qj(){
    var x=1;
    }
    x=x+1;  //Uncaught ReferenceError: x is not defined
    console.log(x)
</script>

在JavaScript中var定义的变量实际上是有作用域的

假设在函数体中声明，在函数体外无法使用

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

如果两个函数使用了相同的变量名，都在函数内部则不会相互影响

假设在JavaScript函数中，函数查找变量从自身函数开始~由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

全局对象windows

var x="xxx";
alert(x);
alert(windows.x); //默认所有的Windows变量都会自动绑定在Windows对象下；

alert这个函数本身也是一个Windows变量

建议大家都用let定义局部作用域

在es6引入了常量关键词 "const"

方法的定义和调用

定义方法

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

<script>
    var xiaowei ={
        name: xiaowei ,
        birth: 1998,
        //方法
        age :function(){
            //今年 - 出生年份
            var now = new Date().getFullYear();
            return now -this.birth;
        }
    }
</script>
//属性 xiaowei.name
//方法 xiaowei.age()

拆开：

<script>
    var xiaowei ={
        name: xiaowei ,
        birth: 1998,
        //方法
         }
        function getAge(){
            //今年 - 出生年份
            var now = new Date().getFullYear();
            return now -this.birth;
            age:getAge
        }
   
</script>

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

apply 在js中可以控制this的指向

<script>
    var xiaowei ={
        name: xiaowei ,
        birth: 1998,
        age:getAge
         }
        //方法
        function getAge(){
            //今年 - 出生年份
            var now = new Date().getFullYear();
            return now -this.birth;
        }
   getAge.apply(xiaowei,[]) //指向xiaowei这个对象，参数为空
</script>

内部对象

date

标准对象 typeof

typeof 123
number
typeof '123'
String

<script>
    var now = new Date();
    now.getFullYear(); //年
    now.getMonth();//月 0~11
    now.getDate();//日
    now.getDay();//星期几
    now.getTime();//时间戳 全世界统一  1970.1.1 0：00：00 ~now
</script>

json对象

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

它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

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

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

格式：

对象：{}

数组：[]

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

面向对象编程

Java：

类：模板

对象：具体实例

javascript:

原型继承：

class继承：

class关键字是在es6引入的

原型链：

操作bom对象

浏览器对象模型

window对象

navigator

封装了浏览器的信息

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

screen

屏幕

location

代表当前页面url信息

document

代表当前的页面

获取具体的文档树节点：

<body>
<di id="app">
    <dd>java</dd>
    <dd>javaEE</dd>
    <dd>javaSE</dd>
</di>
<script>
   var info =document.getElementById('app');
</script>
</body>

获取cookie

history 代表浏览器历史记录

history.forward() //前进

history.back() //后退

操作dom对象

文件对象模型

核心

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

更新
遍历
删除
添加

获得dom节点

<body>
<div id="father">
<h1>标题</h1>
<p id="dd">小题1</p>
<p class="bb">小题2</p>
<p>小题3</p>
<p>小题4</p>
</div>
<script>
    //对应css选择器
   var info =document.getElementById('dd');
   var info2 =document.getElementsByClassName('bb');
   var info3 =document.getElementsByTagName('h1');
   var father =document.getElementById('father');
   var childrens =father.children;//获取父节点下所有孩子节点
    //father.firstchild
    //father.lastchild
    
</script>
</body>

原生代码，之后可以用jQuery

更新dom节点

html:

css:

注意:采用驼峰命名原则

删除节点

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

<body>
<div id="father">
<h1>标题</h1>
<p id="dd">小题1</p>
<p class="bb">小题2</p>
<p>小题3</p>
<p>小题4</p>
</div>
    <script>
    var self=getElementById('p1');
    var father=p1.ParentElement;
        father.removeChild(self)
    </script>

father.removeChild(father.children[0])  //可以选择删除father的第几个节点

注意：删除字节点是个动态的过程

插入节点

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

<p id="js">javascript</p>
<div id="list">
    <p id="se">一</p>
    <p id="sr">二</p>
    <p id="ss">三</p>
    <p id="ee">四</p>
</div>
<script>
    var se =document.getElementById('se');
    var sr =document.getElementById('sr');
    list.append(js); //追加到后面
</script>