js快速入门笔记

概述

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

• 是一种解释性脚本语言（代码不进行预编译）。
• 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
• 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
• 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
• Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。
• Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
• 可以实现web页面的人机交互。

基础用法

第一个JS程序

<script> </script>
alert("hello javascript"); 
<script src="js/hello.js"></script>

变量

// 1.变量
var num =1;
"hello word"
// alert(num);

// 2.条件控制
var score = 70;
if(score>=60 && score<70){
    alert("60-70");
}else if(score>=70 && score<80) {
    alert("70-80");
}else{
    alert("other")
}
//console.log(score) 弹窗

调试：

数据类型快速浏览

number

js不区分小数和整数，Number

123             //整数
123.1           //浮点数
1.123e3     //科学计数法
-99             //负数
NAN             // not a number
Infinity    // 无穷大

字符串

"abc"
"bac

布尔值

true 
false

与或非

&&
||
!

比较运算符

= 
== 等于               （类型不一样，值一样，结果也为true）
=== 绝对等于    （类型一样，值一样，结果才为true）

NaN===NaN
false

isNaN(NaN)
true

(1/3)===(1-2/3)
false

Math.abs(1/3-(1-2/3))<0.000000001
true

注：

坚持不用==做比较

NaN===NaN (这个数与所有数都不相等，包括自己）

isNaN(NaN)

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

空指针

null            //空
undefined //未定义

数组

Java中的数组是一系列相同类型的数，JS中没有这一要求

var arr = [1,2,3,4,'hello',null,true]
new Array(1,2,3,4,5);

arr[1];
2
arr[8]
undefined

var person = { 
    name:"nick",age:3,tags:['js','java','web']
}
person.name
"nick"
person.age
3
person.tags
(3) ["js", "java", "web"]

严格检查模式

<script>
    //全局变量
    i = 1;

        /局部变量
    'use strict'
        let i = 1;
</script>

字符串

• 正常字符串我们使用单引号，或者双引号包裹
• 注意转义字符： ' \t \n \u4e2d(Unicode) \x41(ASCII)

 <script>
        'user strict'
        console.log('a\'');
        console.log("a");

</script>



  //长字符串
var msg = `hello
world`

//拼接
let name = "nick";
let age = 3;
let msg2 = `你好啊，${name}`;
console.log(msg2);
你好啊，nick


//字符串函数
//求长度
var student ="student";
console.log(student.length);
7
//下标索引
console.log(student[0]);
s
//不能更改索引对应的值
student[0]=1;
1
student
"student"

//大小写转换
student.toUpperCase();
"STUDENT"
student.toLowerCase();
"student"
//获取下标
student.indexOf('t');
1
//截取
[1,)
student.substring(1);
"tudent"
[1,3)
student.substring(1,3);
"tu"

数组

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

**
**

对象

// 定义person对象
// 属性是键值对
var person = {
    name:'sinlearn',
    age:23,
    email:'1111@qq.com',
    score:90    //最后一个属性不要加逗号
}

流程控制

其它的和java类似

<script>
    var age = [1,2,3,4,4,5,5,5];
    for(var n in age){
        console.log(age[n]);
    }
    age.forEach(function (value) {
        console.log(value);
    })
</script>

Map和Set

<script>
    //ES6 Map
    'use strict'
    var map = new Map([['tom',99],['jack',98],['michal',82]]);
    let tom = map.get('tom');
    console.log(tom);
    map.set('nick',100);
    map.delete("nick");

    //ES6 Set: 无序不重复集合
    let set = new Set([3,1,1,1,1,1]);
    set.add(2);
    set.add(3);
    set.delete(3);
    set.has(5);
</script>

函数及面向对象

函数定义

定义范式一：

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

一旦执行return代表函数结束，返回结果，如果没有执行return，函数也会返回结果，结果是undefined

定义方式二：

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

function(x) {….}这是一个匿名函数，但是可以把结果赋值给abs,通过abs就可以调用函数。

参数问题：

javascript可以传任意个参数，也可以不传参数

参数进来是否存在的问题？假设不存在参数，如何规避？

参数存在多个：arguments是JS免费赠送的一个关键字；代表传递进来的所有参数，是一个列表

console.log("x-->"+x);
for (let i = 0; i <arguments.length ; i++) {
    console.log(arguments[i]);
}

rest

ES6引入的新特性，获取除了已经定义的参数之外的所有参数~ …,只能写在最后面

function aaa(a,b,...rest){
            console.log(a);
            console.log(b);
            console.log(rest);
}

变量作用域

在javascript中，var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用，（非要实现的话，后面可以研究一下闭包）

内部函数可以访问外部函数的成员，相反则不可以

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

JS执行引擎会自动提升变量的声明，但不会提升变量的赋值。这是JS的一个规范，要养成习惯。

<script>
    var r;   //全局变量
    function f() {
   // var x,y,z,a,b,c,d;
        var x = 1;
        return x+1;
    }
   function f() {
          var x = 'a';
          return x;
    }
    x = x +2;
</script>

<script>
   var x = 'xxx';
     alert(x);
     alert(window.x);
     window.alert(x); //window 表示全局对象
</script>

//把代码全部放入自己定义的唯一空间名字中，降低全局命名空间的问题。
var KuangAPP = {};
    KuangAPP.name = "kuangsheng";
    KuangAPP.add = function (a,b) {
       console.log(a+b);
}
KuangAPP.add(1,2);

JQuery --- $

局部作用域：let

建议用let去定义局部作用域的变量

<script>
    function aaa() {
        for (var i = 0; i <100 ; i++) {
            console.log(i)
        }
        console.log(i+1)    
    }
    aaa();  1- 101
</script>

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

常量const

在ES6之前，怎么定义常量：只能用全部大写字母命名的变量就是常量,通过规范建议不要修改这样的值

在ES6引入了常量关键字: const，就不能修改了

方法

<script>
    var student= {
        name:"小明",
        birth: 1997,
        age: function () {
            var now = new Date().getFullYear();
            return now - this.birth;
        }

    }
</script>

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

对象调用： student.name

方法调用： student.age()

this.代表什么?

<script>
    function getAge() {
        var now = new Date().getFullYear();
        return now - this.birth;
    }
    var student= {
        name:"小明",
        birth: 1997,
        age: getAge()
    }
</script>

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

getAge.apply(student,[]) //this指向了student,参数为空

常用对象

Date

https://www.runoob.com/js/js-obj-date.html

JSON

var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    
obj = JSON.parse(text);

闭包（难点）

箭头函数（新特性）

创建对象

class 继承（新特性）

原型链继承（难点）

操作Dom元素

插入Dom

更新Dom

删除Dom

操作Bom元素

Window

navigator

screen

location

Document

History

操作表单

操作文件