javascript总复习

---

第一章、Javascript简介

JavaScript 是一种基于对象和事件驱动并具有安全性能的脚本语言。

一种计算机客户端脚本语言，主要在 Web 浏览器解释执行。 （不需要进行编译）

特点 : 动态类型，弱类型，简单性，跨平台性，必要性，兼容性差，

JavaScript 优缺点和用法

1. 是一种解释性脚本语言（代码不进行预编译）。
2. 主要用来向 HTML 页面添加交互行为。
3. 可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构和行为的分离。
4. 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

第二章、基础语法

五种基本数据类型

Number,String, Boolean, Undefined, Null

判断数据类型时，用typeof()

比较运算符：

== ： 值相等则为true

=== ：类型和值都须相同则为true

数据类型转换：

隐式转换：

转换成String : 用 + 连接

转换成Boolean ：变量前加 !!

显式转换：

强制转换成Number类型：parseInt(), parseFloat(), Number()

数值转换为布尔类型： 0, 0.0, -0和NaN都是false

undefined， null，“”， 是false，

运算符左右数据类型转换规则

1. "+ "左右出现字符串时，作为字符串连接运算符使用
2. " - 、*、/、%" 左右出现字符串（布尔）时，将字符串（布尔）转换为数值类型
3. **比较运算符 ** 左右出现字符串（布尔），会转换为数值类型
4. 逻辑运算符 会将数据类型转换为布尔类型之后再做运算

程序 = 数据 + 算法

第三章 函数与事件处理

函数的定义和调用

代码设计的一个原则：可重复利用 ，即执行相同功能的代码应该只定义一次

函数的要素 ：函数名，函数的参数，函数的返回值

分类：

1、javascript内置函数 ：parseInt()，Boolean()，String()，alert()

2、自定义函数

函数的定义

1、使用function 关键字定义函数

function sayHello(username){
    alert("hello" + username);
}
sayHello("zhangsan");

2、使用函数表达式定义函数（其实是一个匿名函数）

var add = function(a, b){//赋值给一个变量
    return a + b;
};
var sum = add(1, 3);

匿名函数

函数定义时，函数名是可选的，即可以定义没有函数名的函数，但该函数必须马上执行，或赋值给一个变量（或事件）

(function(){
     console.log(userName);
})();//如果需要传值，直接将参数写到括号内即可

//赋值给一个事件
window.onload = function(){
    console.log("页面加载完成");
}

这有一个关于匿名函数的讲解

[js中的匿名函数 - ranyonsue - 博客园 (cnblogs.com) ]()

函数调用

• 直接调用函数

可以使用（）运算符，调用一个函数

可以向函数传递参数

函数可能含有返回值，改该返回值可做为普通数据进行处理

• 在事件中调用函数

变量作用范围：全局变量，局部变量

事件的三要素

1. 事件源
2. 事件
3. 处理函数

第四章 字符串和数组

字符串

    var s = "hhhAndWenyay";
    var num = s.length;//获得字符串的长度
    console.log(num);
    var w = s.charAt(4)//获取指定位置的字符
    console.log(w);

1、获取指定子串首次出现的位置 indexOf()

– 返回值为首次出现的位置下标，下标从 0 开始

– 若检索的字符串值没有出现，则返回 -1

    var s = "hhhAndWenyay";
    var ss = "Wenya";
    var st = "senya";
    console.log(s.indexOf(ss));//6
    console.log(s.indexOf(st));//-1

2、根据位置提取一段子串

– 通过字符串变量的 slice(start,end) 方法

–返回值为包含提取部分的新的字符串。

    var s = "hhhAndWenyay";
    var ss = s.slice(0, 6);
    alert(ss);

3、把字符串分割成数组

–通过字符串变量的 split(separator,howmany) 方法

howmany：数组的最大长度

    var s = "h-h-h-A-n-d-W-e-n-y-a-y";
    var ss = s.split("-");//分割成数组
    console.log(ss);
    var st = s.split("-", 5);//分割成数组
    console.log(st);

4、字符串方法

（1）把字符串转换成大写

– 通过字符串变量的 toUpperCase() 方法

（2）把字符串转换成小写

– 通过字符串变量的 toLowerCase() 方法

    var s = "hhhAndWenyay";
    var ss = s.toUpperCase();
    var st = s.toLowerCase();
    console.log(ss);
    console.log(s);//并没有对原字符串进行改变
    console.log(st);
//字符串是不可更改的，得到的都是全新的字符串

数组

    var st = [1,1, [1, 3, 4,6 ]];
    console.log(st.length);//长度为3

	//数组转字符串
    var s = "h-h-h-A-n-d-W-e-n-y-a-y";
    var ss = s.split("-");//分割成数组

    var st = ss.join("");//将数组转换为字符串
    console.log(st);

删除

    var userList = ["wenyay", "lisi", "yyqx", "zhaoliu"];
    /**
     * arr.shift()删除数组的第一个元素，数组的长度减一
     * 返回值为被删除的数组元素
     * 
    */
    var result = userList.shift();
    console.log(result);
    console.log(userList.length);

    /**
     *  arr.pop()删除数组的最后一个元素，数组的长度减一
     * 返回值为被删除的数组元素
    */
    var result1 = userList.pop();
    console.log(result1);
    console.log(userList.length);

添加

    var currentDay = "星期四";
    var dayList = [];
    dayList.unshift("wenyay");unshift(被添加元素) 加到数组的第一个位置
    dayList.push(currentDay, "星期五");//向数组后边添加几个元素
    console.log("dayList = " + dayList);


    var arr1 = ["hello", "world"];
    var arr2 = ["hello", "Tavascript"];
    var arr3 = ["arr3"];
    /**
     * arr.concat(arr1, arr2);
     * 会将arr, arr1, arr2合并，得到一个新数组
     * 新数组，但不会对arr产生影响
    */
    var arr4 = arr1.concat(arr2, arr3);
    console.log(arr4);

splice 可以删除元素，也可以添加元素

/**
     * arr.splice(删除数组元素的索引位置，被删除的元素的个数, 新添加的元素);
     * 从指定的索引位置，删除指定个数元素，arr.split(index, number);
     * arr.splice(index, 0, "新元素");
     * 在指定的索引位置，添加新的元素
     * 前两个参数是必须参数，后面参数可选
     * 返回值是被删除的元素组成的新数组
     * 
    */
    var userList = ["wenyay", "yyqx", "lisi", "wangwu", "dinosaur", "donkey", "duck"];
    var index = userList.indexOf("dinosaur");
    //console.log(index);
    var result = userList.splice(index, 1);
    console.log(result);

    userList.splice(1, 0, "liuneng");//添加元素
    console.log(userList);

第五章 对象

• JavaScript 是一门基于对象的语言

–具有面向对象的部分特征

– 在 JavaScript 中，一切皆对象

定义对象

– 使用一对大括号表示对象，属性和方法写在括号内

– 属性包括属性名和属性值，之间使用冒号分隔

– 属性和属性之间使用逗号分隔

– 方法同属性类似，只是值部分为一个函数体

var objName = {
	attrName:  attrValue ,
     methodName:  function()
}

对象相关操作

(1)访问对象属性和方法

– 方式一 : 通过 对象名.属性名 、对象名.方法名( )

– 方式二 : 通过 对象名[“属性名”]

(2) 添加对象属性

– 对象创建之后，要向对象添加属性，只需要为新属性赋值即可

(3)•修改对象属性

– 直接为原有属性赋新值即可

(4)• 删除对象属性

– 使用 delete 关键字

(5)•遍历对象属性

    var person = {
        personName : "zhangsan", 
        age : 20,
        sayHello : function(){
            console.log("hello");
        }
    }
    //第一种写法，最常用的写法，对象.属性名
    // 对象.方法名
    console.log(person.age);
    person.sayHello();

    //第二种写法 对象["属性名"]
    console.log(person["age"]);
    console.log(person["personName"]);
    person["sayHello"]();


    //区别  对象[变量] 中括号里边可以放变量
    var attr = "age";
    console.log(person[attr]);

    //访问对象不存在的属性，打印的是undefined
    console.log(person.hobby);
    person.hobby = ["swimming", "football"];
    console.log(person);

    //添加一个体重
    person.weight = 52.2;
    console.log(person.weight);
    
    //修改属性值
    person["age"] = 30;
    for(var i in person){
        
    }
	//删除
	delete person.age

this关键字

Math对象

• Math 对象包含了一系列的数学运算的功能

– Math 对象不需要创建，直接使用

• 常用操作

– 四舍五入: Math. round( )

– 向下取整: Math.floor( ) 向上取整: Math.ceil( )

– 生成 0~1 随机数: Math.random( )（范围是[0, 1)）

– 取最大值: Math.max( ) 取最小值: Math.min( )

    //Math.round() 四舍五入操作

    var result1 = Math.round(1.558);
    console.log(result1);//2

    var result2 = Math.round(2.16 * 10);
    console.log(result2 / 10);//2.2

    //向下取整 Math.floor()
    var result3 = Math.floor(1.6);//1

    //向上取整 Math.ceil()
    var result4 = Math.ceil(1.6);//2

    console.log(result3, result4);

    var result5 = Math.random();
    console.log(parseInt(result5 * 100));

Date对象的使用

•Date 对象包含了一系列的日期时间处理的功能

– 创建 Date 对象，例: var now = new Date( );

• 常用操作

– 获取当前日期时间: toLocaleString( )

– 获取年份、月份、日期: getFullYear()、 getMonth()、getDate()

– 获取小时、分钟、秒钟: getHours()、 getMinutes()、 getSeconds()

    var date1 = new Date();

    var year = date1.getFullYear();//年份
    console.log(year);
    //获取月份取值0 ~ 11
    var month = date1.getMonth();
    console.log(month + 1);//月份 + 1 是当前月份

    //获取星期 日期对象.getDay();
    //获取星期的取值范围是0 ~ 6
    //每个星期的第一天是星期日
    var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    var weekday = date1.getDay();//星期几
    console.log(weeks[weekday]);

    //getDate() 获取今天的日期
    var day = date1.getDate();
    console.log(day);

    var hour = date1.getHours();
    var minute = date1.getMinutes();
    var second = date1.getSeconds();
    console.log(hour);
    console.log(minute);
    console.log(second);

JavaScript 的对象就是一系列相关属性和方法的集合

属性 的实质是数据，在程序中用变量保存，是静态的

方法 的实质是行为，在程序中用函数实现，是动态的

第六章 BOM模型

window对象

 window.confirm("确认删除该条数据吗？");//确认窗口
 window.prompt("请输入用户名：", "文本框默认值");//对话框

//可以延迟执行一段代码
var timeId = setTimeout(function(){
    alert("3秒时间到!");
}, 3000)//后边这个单位为毫秒

// 清除特定id的延迟执行
btn.onclick = function(){
    clearTimeout(timeId);//setTimeout返回的东西
}

//周期执行
var index = 1;
var timerId = setInterval(function(){
    index = index + 1;
    document.write("当前值为" + index + "<br/>"); 
}, 1000);
//取消周期执行
clearInterval(id);//id是setInterval()方法返回的数字

newWindow = window.open("http://baidu.com");//打开浏览器窗口 
newWindow.close();// 关闭浏览器窗口 

history 对象

history.back();//后退到上一个访问过的页面
history.forward();//前进到下一个访问过的页面
history.go(0);//go(负值)页面回退,go(正值) 页面前进,go(0) 页面刷新

location 对象

location.href = "./demo11.html";//
location.hash = "";

navigator 对象

screen 对象

document 对象

document.write();

周期执行

第七章 DOM模型

作用：访问，增加，删除，修改

DOM 节点是一个对象，拥有属性和方法

元素节点 ；属性节点；文本节点

var con = document.getElementById("con");//通过 id 属性获得节点
var itemList = con.getElementsByTagName("div");//通过标签名获得所有同名标签
var itemList = document.getElementsByClassName("item");//通过类名获得所有类名相同的标签

元素节点内容

innerHTML属性，innerText属性，textContent属性

node.getAttribute( attrName )//获取某一元素节点的属性
node.setAttribute( attrName，value )//设置某一元素节点的属性
node.removeAttribute( attrName )//删除某一元素节点的属性
node.hasAttribute( attrName )//判断某一元素节点是否含有某属性

document.createElement( Element );//生成一个元素节点
document.createTextNode( text );//生成一个文本节点
node.appendChild( newNode );//向父节点的末尾添加
node.insertBefore( new, old );//在已有子节点前插入一个新的子节点
parentNode.removeChild(childNode);//从子节点列表中删除某个节点
oldNode.parentNode.replaceChild ( newNode, oldNode );//修改一个元素节点，即用新节点替换某个子节点