JS基础课程学习笔记

学习web前端开发一个月思考总结

经过半个多月的学习 js基础课程已经学习完毕 昨天也用一天的时间看完了JQ的基础课 老师说在出现三大框架之前JQ非常盛行 我也体会到JQ相比于直接写JS要简单方便很多 而且运行速度也更快 但即使这么好用 还是会被速度更快 性能更完善的框架代替 技术的发展与迭代还是很快的 但基础知识非常重要 各种框架的使用都离不开JS的基础知识 框架只是让JS更快更灵活 是一种方便开发者的工具 作为一名开发者 基础扎实 保持学习 无论如何更新迭代都可以跟的上技术的脚步
以下为js基础学习笔记:

1变量

js里两个等号表示相等，三个等号表示绝对相等

赋值

var name=“zhangsan”;

var name=1,age=2;(建议分开写)

1.1语法

1、区分大小写

2、命名规则：以字母、下划线、或＄符号开头，由以上和数字组成，不能把保留字和关键字作为标识符

1.2数据类型

js数据类型分为5种基本数据类型和复杂数据类型

基本数据：

console.log(typeof )判断数据类型

1.2.1 Undefined:

使用了var声明但没有赋值，系统默认赋值undefined；

1.2.2 Null:

undefined派生与null，两者几乎相等，null是一个空对象值；

两者对比：null表示没有对象，本不该有值；undefined表示缺少对象，本该有值但是没有找到。

       console.log(typeof undefined) //"undefined"
       console.log(typeof null) //"object"null是objec的一种
       console.log(null==undefined) //true 两者默认转换为false 所以两者相等输出true
       console.log(null===undefined) //false 两者不同类型 所以输出false

1.2.3 Boolean（布尔类型返回布尔值）:只有两种值true和fales;

0、null、undefined和空值返回false；非空和非零值返回true。

       var myBoolean = new Boolean("") //false
       var myBoolean = new Boolean("abc") //true

1.2.4 Number:

字面量：所见即所得

十进制没有前缀

八进制前缀0o

十六进制前缀0x

特例 NAN==NAN // false可通过console.log(isNAN( ))来判断

parseInt（""）可将字符串转换为数字

parseFloat（""）可将字符串转换为浮点数

1.2.5 String:

unicode所有字符编码库； GBK（GB231）字库是中文字符库； 字母的返回值通过ASCⅡ码库查找

字符串用单引号或双引号包裹 var a=“123abc”

JavaScript 转义序列

序列 代表字符

\0 Null字符（\u0000）

\b 退格符（\u0008）

\t 水平制表符（\u0009）

\n 换行符（\u000A）

\v 垂直制表符（\u000B）

\f 换页符（\u000C）

\r 回车符（\u000D）

" 双引号（\u0022）

’ 撇号或单引号（\u0027）

\ \ 反斜杠（\u005C）

正常字符前加反斜杠""会被js忽略


变量.tostring（）可以将数值、布尔值、对象、字符串的数据类型转换为字符串

复杂：

1.2.6 例 Object类型（对象）:

对象有方法和行为，行为用函数表示

两种创建方法，没有本质区别

var obj1={}
var obj2=new object()

1.3 布尔操作符

1.3.1 逻辑非（！）

逻辑取反 在值的最前面写"!" 返回值为布尔值

1.3.2 逻辑与（&&）

都是布尔值时 两个值全为ture才会返回ture

第一个布尔值是false则返回第一个值（第二个值会被短路操作）
第一个是true返回第二个值

1.3.3 逻辑或（||）

都是布尔值时 两个值有一个ture则返回ture

第一个布尔值是ture则返回第一个值同时对第二个值进行短路操作

第一个是false 则返回第二个值

1.3.4 其他常用操作符

加（可以将字符串连接起来）减乘除、取余%、逗号操作符

三目运算符：

var a=1 ；var b=（a==1）？2:3;//如果a==1为ture则返回2，否则返回3

赋值操作符：

var a=1;
a+=3;//相当于a=a+3;
a*=3;//相当于a=a*3;

关系操作符：等于“”、不等于“！”、恒等于“=”、不恒等“！”

2 语句与函数

2.1 条件语句(if、else if、switch)

2.1.1 if语句：

var hour=1;
if(hour<18){
    greeting="Good day";
}else{
    greeting="Good evening";
}
console.log(greeting);

2.1.2 switch语句：

switch (new Date().getDay()) {
            case 0:
                day = "星期天";
                break;
            case 1:
                day = "星期一";
                break;
            case 2:
                day = "星期二";
                break;
            case 3:
                day = "星期三";
                break;
            case 4:
                day = "星期四";
                break;
            case 5:
                day = "星期五";
                break;
            case 6:
                day = "星期六";
                break;
            default:
                day = "不存在”;"
                break;
        }
        console.log(day)

2.2循环语句

2.2.1 for（最常用）

语法：
for（语句1；语句2；语句3）{需要执行的代码块}

语句1在循环开始前执行；
语句2定义运行循环代码块的条件，ture则执行代码块，false则跳出循环;
语句3会在循环代码块每次被执行后执行；

        var text="";
        for (var i=0;i<5;i++) {
            text = "数字为" + i;
            console.log(text);
        }
        //数字为0
        //...
        //数字为4

2.2.2 while循环（注意不要出现死循环）

        var i=0;
        var text="";
        while (i<10){
            text += "数字是"+i;
            i++;
        }
        console.log(text);
        //数字是0数字是1数字是2数字是3数字是4数字是5数字是6数字是7数字是8数字是9

2.2.3 do while循环（至少会执行一次 先执行再判断）

2.2.4 break和continue语句

2.3 函数

语法：function 函数名（参数1，参数2，参数3）{执行代码区}

function sayHi(name,message){
    alert("Hello"+name+","+message);
}
sayHi("zhangsan", "how are you today?");

2.4 引用类型和基本类型的参数传递

基本类型的数据按值存储，存储在栈内存中，赋值基本数据类型a（形式参数）=b（实际参数）后再更改b的值不影响a的值；

复杂数据类型按地址存储，存储在堆内存中，在栈内存中储存的是一个堆内存中实际数据的地址，赋值复杂类型x=y后，再更改x的值，y的值也会随之改变。

2.5 执行环境和作用域

作用域查找变量时是按局部环境到全局环境的顺序查找

var声明的变量是在当前环境中存在的 如果在局部环境里声明 就只存在于当前局部作用域 并且此函数作用域不被调用时 就查找不到此变量

2.6 垃圾回收

js系统周期性自动回收内存 不在执行环境的内存会被回收

2.7 引用类型

2.7.1 object类型

是js中最顶层的对象也是最通用的对象
两种创建方法，没有本质区别

//1
var obj1={
    age:18;
    name:tiantian;
}
//2
var obj2=new object()
obj2.age=19;
obj2.name=Diane;

2.7.2 Array类型（数组）

a 创建方法：

var arr=[1,2,3,true,"Diane"]
var arr=new Array(3)//创建一个包含3项的数组

b 下标

数组的下标是从零开始的arr[0]表示第一项 最后一个项的下标是arr[arr.length-1]

c 判断

arr.isArray();//输出值为true和false

d 栈方法：后进先出原则

arr.push(1)//推入1这个元素,从尾部推入

arr.pop()//弹出栈顶的第一个元素

e 队列：先进先出原则

arr.unshift(3,12)//入队
arr.shift()//出队 从数列头部开始出

f 数组排序

        var arr=[7,5,3,1]
        for (var i=0;i<arr.length-1;i++){
            for (var j=0;j<arr.length-1;j++){
                if (arr[j]>arr[j+1]){
                    var temp=arr[j]
                    arr[j]=arr[j+1]
                    arr[j+1]=temp
                }
            }
        }
        console.log(arr);//(4) [1, 3, 5, 7]

g 数组操作

添加：arr1.concat（arr2）表示把arr2添加到arr1的尾部；

查询位置：arr.indexOf(元素)，元素在数组内会返回元素下标，否则返回-1；

2.7.3 Date类型

    var d=new Date()
console.log(d)//Fri Dec 18 2020 17:04:20 GMT+0800 (中国标准时间)

d.getTime（）可以获得当前时间戳 可以用于获取唯一值

2.7.4 正则表达式 RegExp类型

用来匹配或提取字符串，多用于验证手机号、邮箱地址等数据校验功能，很多可以在网上直接复制使用

var reg=new RegExp(’\d’,‘gi’)返回值为true和false

修饰符Flags：

i表示忽略大小写匹配

g表示全局匹配

m表示多行匹配

2.7.5 Function类型

函数名相当于一个存放在栈内存中的指针，指向堆内存中函数的地址

js没有重载 相同函数名的函数，前面的函数会被后面会覆盖，所以尽量不要出现相同函数名的函数

函数声明：

函数声明会自动在全局环境预解析，自动调到所有代码的最前面执行 如果在全局声明了一个函数A那么在全局任何地方都可以调用

function sayHi(name,message) {
alert("Hello,"+name+","+message);
}
sayHi("zhangsan", "how are you today?");

函数表达式：

函数表达式不会预解析 只有在执行到这段代码的时候才可以被调用

var sum=function(a,b){
    return a+b;
}

函数内部属性 this和arguments

arguments表示参数组成的数组

this指向的是调用这个函数的对象 全局环境的函数this指向window

2.7.6 基本包装类型

Boolean、number、string类型会被js自动默认包装成对象，可以调用属性和方法

string类型

var str='abc 123 789'
console.log(str.split(" "))//用空格分割字符串所得的项
console.log(str.indexOf("b"))//返回b的下标

2.7.7 Math对象

js内置对象

min和max

var max= Math.max(1,2,3,4);
var min= Math.min(1,2,3,4);

舍入方法

var d=3.1415926
Math.round(d) //3 四舍五入的整数
Math.ceil(d) //4 向上取整
Math.floor(d) //3 向下取整

随机数

Math.random() //返回一个[0,1)之间的随机数

3 面向对象开发

3.1 工厂模式

使用构造函数创建对象

3.2 构造函数

js有内置构造函数Object\Array等 也可自己创建构造函数 一般首字母大写

通过new+函数名调用的就是构造函数

通过函数名（参数）调用的就是普通函数

3.3 原形模式prototype

构造函数名.prototype.方法/对象

使用原型对象可以减少内存使用

4 BOM浏览器对象模型

将整个浏览器看作一个对象，js中所有成员变量、成员方法都是浏览器对象中的对象和方法。

4.1 window对象

窗口大小、窗口偏移

延迟执行：setTimeout（function（）{代码,毫秒数}）

定期执行（定时器）：setInterval；循环停止：clearInterval

弹窗：alert

4.2 location对象

包含有关当前URL的信息
常用属性：href可做页面跳转；reload（）重新加载当前页面；

4.3 Navigator对象

包含浏览器相关信息

常用appName属性进行判断浏览器名称

4.4 Screen对象

屏幕相关信息分辨率等

4.5 History对象（同时也是window的属性）

浏览历史的相关信息

常用属性方法:length返回浏览器历史列表中的url数量；常用back（）加载前一个url；forward()加载下一个url；go（）加载列表中具体页面

5 DOM文档对象模型

把网页看成一棵树，称为DOM树，常用节点：标签节点element、根节点html:document、文本节点text、注释节点comment不常用；

5.1 节点的属性

nodeType属性返回节点类型；

nodeName属性返回节点名称；

children属性返回子节点；

parentNode属性返回父节点

5.2 节点的方法

创建：

    var p = document.createElement("p");//创建一个标签p并赋值给变量p
    // var txt = document.createTextNode("文本");
    // p.appendChild(txt);
    p.innerHTML="abcd"//p标签的内容是abcd
    var a = document.getElementById("a");//把id为a的标签赋给变量a
    a.appendChild(p);//把p放进a标签里

删除：

a.removeChild(p)//删除id为a的子节点p

5.3 常用节点

5.3.1 Document节点

表示整个页面，同时也是window对象的一个属性，可以查找元素

特点如下：

nodetype为9；

parentNode为null；

5.3.2 Element 子节点

最常用的节点，特征：

nodetype的值是1；

nodeName的值是元素的标签名。

获得节点的属性：

    var a=document.getElementById("a");
    a.id="newid";
    a.className="newclass"
    console.log(a)

获得标签属性：

这种方法更通用

    console.log(a.getAttribute("id"))
    console.log(a.getAttribute("class"))

设置标签属性

    a.id="newid";
    a.setAttribute("id","newid")
    a.className="newclass"
    a.setAttribute("class","newclass")

5.3.3 Text节点

包含纯文本内容；nodetype是3； nodevalue的值是文本内容

5.4 DOM操作技术

5.4.1 动态引入（加载外部的）js脚本

    function loadJs(url){
        var script = document.createElement("script");
        script.src = url;
        document.body.appendChild(script);
    }

5.4.2 动态引入样式表

    function loadCss(url) {
        var link = document.createElement("link");
        link.href = url;
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(link);
    }

5.4.3 动态读写css样式

<div id="aaa" style="width: 100px">12</div>
--------------------
    var a = document.getElementById("aaa");
    a.style.backgroundColor = 'red';

5.4.4 获得元素大小

获得元素的偏移大小：margin外的宽、高及距浏览器边框左、上的距离

属性：offsetwidth、offsetheight、offsetleft、offsettop

获得客户区大小：盒子的宽高

属性：clientwidth、clientheight

兼容写法：

    function getViewport() {
        //ie7之前的兼容写法
        if (document.compatMode == 'BackCompat') {
            return {
                width: document.body.clientWidth,
                height: document.body.clientHeight
            }
        }
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }

    console.log(getViewport());

获得有滚动条的文档宽高

属性scrollwidth、scrollheight、scrollleft、scrolltop

兼容写法：

    var docHeight=
        Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
    var docWidth =
        Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth)
    console.log(docHeight,docWidth);

6 事件

6.1 点击事件

属性：onclick

特点：事件流先捕获阶段后冒泡阶段

冒泡（触发事件顺序从小到大）、捕获（触发事件顺序从大到小）

添加方式：

DOM2级事件处理程序

    var a=document.getElementById('a')
    a.addEventListener("click",function (){
        alert("abcd")
    },false)//false表示冒泡，true表示捕获，基本上使用冒泡
    -------
        //移处事件
    a.removeEventListener('click',方法名,false)

ie处理程序

    btn.attachEvent('onclick',function () {})
    btn.detachEvent('onclick',事件名)

跨浏览器兼容事件处理程序

<input type="button" id="button1" value="按钮">
--------------------------
    function show() {
        alert("hello world")
    }
    //声明一个对象
    var eventutil={
    //添加句柄
        addHandler:function (element,type,handler) {
            //DOM2级事件处理判断
            if (element.addEventListener) {
                element.addEventListener(type,handler,false);
            }else if (element.attachEvent){
             //ie事件处理判断
             element.attachEvent('on'+type,handler);
            }else {
              //DOM0级事件判断
              element['on'+type]=handler;
            }
        }
    //或者删除句柄
        removeHandler:function (element,type,handler) {
            //DOM2级事件处理判断
            if (element.removeEventListener) {
                element.removeEventListener(type,handler,false);
            }else if (element.detachEvent){
                //ie事件处理判断
                element.detachEvent('on'+type,handler);
            }else {
                //DOM0级事件判断
                element['on'+type]=null;
            }
        }
    }
    eventutil.addHandler(button1,'click',show);

6.2 事件对象

6.2.1 DOM中的事件对象

默认传入event参数

事件中的this==currenttarget、target属性

this指事件function绑定的对象，target指实际触发元素

阻止默认行为和冒泡：

阻止默认行为：preventDefault属性；

阻止事件向上冒泡：stopPropagation属性；

兼容性写法：

    //阻止冒泡行为
    function stopBullle(e){
        //W3C浏览器
        if (e && e.stopPropagation)
            e.stopPropagation();
        //IE浏览器
        else window.event.cancelBubble = true;
    }
    //阻止浏览器默认行为
    function stopDefault(e) {
        //W3C浏览器
        if (e && e.preventDefault)
            e.preventDefault();
        //IE浏览器
        else
            window.event.returnValue = false;
        return false;
    }

6.3 事件类型

6.3.1 load事件：

window.onload:当页面给全部加载后 包括图像 js文件 css文件等外部资源 会触发window的onload事件

6.3.2 resize事件：

window.onresize:页面大小改变时触发

6.3.3 scroll事件：

window.onscroll

6.3.4 鼠标单击事件

onclick

6.3.5 键盘事件

KeyDown，KeyUp，KeyPress（按下加回弹一次，并且产生一个字符）

6.4 事件委托

本质是冒泡 让事件处理在父元素上完成，以减少多个子元素需要相同事件时的内存占用

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
-------------
var ul= document.getElementById('ul')
    ul.onclick=function (e){
        let target=e.target;
        console.log(target.innerHTML)
    }

7 数据交换

7.1 JSON

7.1.1 简介

js object notation ，js对象简谱，一种轻量级数据交换格式，对象的属性需要用双引号包括，普通对象不用，json常用在前后端数据交互中
http://www.bejson.com/参考网址

7.1.2 JSON的序列化与反序列化

即将json序列转成字符：JSON.stringify（序列变量名）属性 & JSON.parse（被序列化的json变量名）属性

7.2 get和post请求

常用的像后端发起请求的方式

get

读取数据 可在url后面添加参数 后面添加的参数的数据比较小

post

可以项后端提交数据，可以提交较多数据

url

即网址 http默认端口80可以不写

请求测试

postman工具

响应

后端返回的东西称为响应 响应中包含响应数据 响应状态码 常用的：200正常、404找不到页面

7.3 同步和异步

js是同步语言 异步中有回调函数

7.4 如何发起一个请求

常用属性

onreadystatechange属性：储存函数或函数名 每当readystate属性改变时 就会调用该函数

readystate属性：存有XMLHttpRequest的状态 从0到4变化；0请求未初始化，1服务器链接已建立，2请求已接受，3请求处理中，4请求已完成且相应就绪

status属性：200表示"ok"；404表示未找到页面

ajax方式发起请求步骤

完整的请求需要的是：

请求的网址

提交请求的内容数据、请求主体等

接收响应回来的内容

具体步骤：

1、创建异步对象 即XMLHttpRequest（xhr）；

2、设置请求参数，包括请求的方法、url；

3、发送请求；

4、注册事件，onreadystatechange事件，状态改变时就会调用

5、在注册的事件中获取返回的内容并修改页面的显示，数据是保存在异步对象的属性中


发起get请求：

<body>
<input type="button" value="发送get_ajax请求" id="btnAjax">
</body>
<script>
    var btn=document.getElementById('btnAjax');
    btn.onclick=function (){
        //1、创建异步对象xhr；
        var ajaxObj = new XMLHttpRequest();
        //2、设置请求参数，包括请求的方法、url；
        ajaxObj.open("get", "http://localhost/index.php");
        //3、发送请求；
        ajaxObj.send();
        //4、注册事件，onreadystatechange事件，状态改变时就会调用
        //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断逻辑
        ajaxObj.onreadystatechange = function () {
            //为了保证数据完整返回，我们一般会判断两个值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                //如果能够进入这个判断说明数据完美的回来了，并且请求的页面是存在的
                //5、在注册的事件中获取返回的内容并修改页面的显示
                alert('数据返回成功');
                //数据是保存在异步对象的属性中
                console.log(ajaxObj.responseText);
            }
        }
    }
</script>

发送post请求：

7.5 本地存储token

cookie、localStorage、sessionStorage

7.5.1 cookie

只能存储少量数据4KB左右 属性Document.cookie=“username=john doe”

7.5.2 localStorage

主要存储方式 存储数据较大 没有过期时间 直到手动去除


方法：
返回第n个键的名称key(n)
返回指定键的值getitem(keyname)
添加（更新）键setitem(keyname,value)
移除键removeitem(keyname) 清除所有键clear()

7.5.3 sessionStorage

临时信息储存 网页关闭即消失