JavaScript学习笔记

1.在JS当中,当一个变量没有手动赋值的时候,系统默认赋值undefined,undefined在JS中是一个具体存在值.

2.JS中如何定义函数

第一种方式：
    function 函数名(形式参数列表){
        函数体;
    }
第二种方式：
    函数名 = function(形式参数列表){
        函数体;
    }

3.函数调用

4.JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制.

5.变量

在函数体之外声明的变量属于全局变量
在函数体当中声明的变量，包括一个函数的形参都属于局部变量。
一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.

6.数据类型

JS中数据类型有：原始类型、引用类型。
原始类型：Undefined、Number、String、Boolean、Null
引用类型：Object以及Object的子类
在ES6之后，又基于以上的6种类型之外添加了一种新的类型：Symbol

6.1 Undefined

Undefined类型只有一个值，这个值就是 undefined
当一个变量没有手动赋值，系统默认赋值undefined
或者也可以给一个变量手动赋值undefined。

6.2 Number

Number类型包括：整数，小数，NaN(not a number)，Infinity(无穷大)
isNaN()-->判断是否是一个非数值
parseInt()
parseFloat();
Math.ceil();-->向上取整

6.3 创建字符串对象的两种方式

第一种：var s1 = "abc";
第二种（使用JS内置的支持类String）： var s2 = new String("abc");
需要注意的是：
	String是一个内置的类，可以直接用，String的父类是Object。
	typeof s1 --> string，typeof s2 --> object
	在JS当中比较字符串是否相等使用“==”完成,不是equals。
	无论小string还是大String，他们的属性和函数都是通用的。

6.4 String类型的常用属性和函数？

常用属性：
	length 获取字符串长度
常用函数：
	indexOf			获取指定字符串在当前字符串中第一次出现处的索引
	lastIndexOf		获取指定字符串在当前字符串中最后一次出现处的索引
	replace			替换
	substr			截取子字符串
	substring		截取子字符串
	toLowerCase		转换小写
	toUpperCase		转换大写
	split			拆分字符串
	
substr和substring的区别：
	substr(startIndex, length);
	substring(startIndex, endIndex);    // 左闭右开区间

6.5 Boolean()函数

作用是将非布尔类型转换成布尔类型。规则:"有"就转换成true,"没有"就转换成false。

6.6 Null类型

Null类型只有一个值，null
注意：alert(typeof null); // "object"

6.7 Object类

Object类型是所有类型的超类，自定义的任何类型，默认继承Object。
	
Object类包括哪些属性？
	prototype属性：作用是给类动态的扩展属性和函数。
	constructor属性
	
Object类包括哪些函数？
	toString()
	valueOf()
	toLocaleString()

6.8 在JS当中怎么定义类？怎么new对象？

定义类的语法：
    第一种方式：
        function 类名(形参){
        	...
        }
    第二种方式：
        类名 = function(形参){
         	...
        }
注：在JS中类的定义和构造函数的定义是放在一起来完成的.

创建对象的语法：
    var 变量名 = new 类名(实参);

eg:
    Student = function(sno, sname) {
        this.sno = sno;
        this.sname = sname;
    }
    var s = new Student(123, 'zhangsan');
    alert(s.sno);
    alert(s['sname']);

    Product = function(pno, pname, price) {
        this.pno = pno;
        this.pname = pname;
        this.price = price;
        this.getPrice = function() {
            return this.price;
        }
    }
    var p = new Product(123, 'apple', 3.5);
    alert(p.getPrice());

    Product.prototype.getPname = function() {	//给Product类动态添加一个getPname方法
        return this.pname;
    }

7.typeof运算符

这个运算符可以在程序的运行阶段动态的获取变量的数据类型。
语法格式：
	typeof 变量名
typeof运算符的运算结果是以下6个字符串之一（注意字符串都是全部小写）：
    "undefined"
    "number"
    "string"
    "boolean"
    "object"
    "function"
再次提醒：null属于Null类型,但是typeof运算符的结果是"object"

8.NaN，undefined，null有什么区别

数据类型不同
	typeof NaN --> "number"
	typeof undefined --> "undefined"
	typeof null --> "object"

null和undefined可以等同
alert(null == undefined);   // true

9. ==和===

==(等同运算符)：只判断值是否相等
===(全等运算符)：既判断值是否相等，还判断数据类型是否相

alert(null === undefined);  // false

10.注册事件的两种方式

10.1 js中的事件：

blur失去焦点	
focus获得焦点

click鼠标单击
dblclick鼠标双击

keydown键盘按下
keyup键盘弹起

mousedown鼠标按下
mouseup鼠标弹起
mouseover鼠标经过
mouseout鼠标离开
mousemove鼠标移动

reset表单重置
submit表单提交

change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。

10.2 直接在标签中给事件句柄赋值

10.3 获取操作对象，然后给对应的事件句柄赋值

11.捕捉按键

Enter的键值：13
Esc的键值：27

js代码捕捉回车键：
    

12.void运算符

void运算符语法：void(表达式)
执行表达式，但是不返回任何结果。

热链接
既保留了热链接的样式，同时用户点击该热链接时执行一段js代码，但是页面不发生跳转。

13.js中的数组

创建：
	var arr = [10, "hello", 3.14, false];	// 用方括号括起来，类型随意

	arr = new Array();	// 内置类Array
	alert(arr.length);	// 0

	arr = new Array(3);	// 一个实参，就是数组长度
	alert(arr.length);	// 3

	arr = new Array(2,3);	// 两个实参，是数组元素
	alert(arr.length);	// 2
方法：
	alert(arr.join('-'));	// 10-hello-3.14-false
	alert(arr.reverse());	// false,3.14,hello,10
遍历：
	for(var i=0; i

14.DOM和BOM的区别和联系

BOM的顶级对象是：window
DOM的顶级对象是：document
实际上BOM是包括DOM的！

15.div/span标签的innerText和innerHTML属性有什么区别？

相同点：
	都是设置元素内部的内容。
不同点：
	innerHTML会把后面的“字符串”当做一段HTML代码解释并执行。
	innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。

16.正则表达式

创建

var regExp = /正则表达式/flags
var regExp = new RegExp("正则表达式","flags");

关于flags：

g:全局搜索
i:忽略大小写
m:多行搜索,只有当前面是普通字符串时,才可以用.

test方法:

true/false = regExp.test(用户填写的字符串);

17.低版本的IE浏览器不支持字符串的trim()函数,怎么办？可以自己对String类扩展一个全新的trim()函数!

String.prototype.trim = function(){
	return this.replace(/^\s+|\s+$/g, "");
}

18.根据JS中的内置类Date获取时间

var nowTime = new Date();
document.write(nowTime);

换成具有本地语言环境的日期格式.
nowTime = nowTime.toLocaleString();
document.write(nowTime);

通过日期获取年月日等信息,自定制日期格式.
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth(); // 月份是:0-11
var day = time.getDate(); // 获取日信息. t.getDay()获取的一周的第几天(0-6)
document.write(year + "年" + (month+1) + "月" + day + "日");

获取毫秒数
vat millisecond = new Date().getTime();

19. setInterval和clearInterval

代码如下：

	<script type="text/javascript">
	window.onload = function() {
		var divElt = document.getElementById('timeDiv');
		displayTime = function() {
			divElt.innerText = new Date().toLocaleString();
		}
		start = function() {
			v = window.setInterval(displayTime,1000);
		}
		end = function() {
			window.clearInterval(v);
		}
	}
    </script>
    <br><br>
    <input type="button" value="显示时间" onclick="start()">
    <input type="button" value="停止" onclick="end()">
    <div id="timeDiv"></div>

20. 将当前窗口设置为顶级窗口

if(window.top != window.self){
	window.top.location = window.self.location;
}

21. 前进和后退

window.history.go();
window.history.back();
window.history.go(-1);

22. 设置地址栏上的URL

window.location = "http://www.baidu.com";
document.location = "http:www.baidu.com";

总结：通过哪些方法可以通过浏览器向服务器发送请求
	<1> 表单的提交
	<2> 超链接
	<3> window.locaiton
	<4> document.location
	<5> window.open('url')

23.JSON

<1> 全称JavaScript Objection Notation，是一种标准、轻量级的数据交换格式，特点是体积小、易解析
还有一种数据交换格式是XML，体积大，解析麻烦，但是语法严谨.

<2> JSON的语法格式
	var jsonObj = {
		"属性名" : 属性值,
		"属性名" : 属性值,
		"属性名" : 属性值,
		...
	}
<3> 遍历JSON数组：
	var students = [
        {"sno" : 101,"sname" : "zhangsan","sage" : 20},
        {"sno" : 102,"sname" : "lisi","sage" : 21},
        {"sno" : 103,"sname" : "wangwu","sage" : 22}
    ]

    for(var i = 0; i < students.length; i++) {
        var stuObj = students[i];
        document.write(stuObj.sno + "," + stuObj.sname + "," + stuObj.sage);
        if(i != students.length -1) {
            document.write("
");
        }
    }

24.eval函数的作用是：

将字符串当做一段JS代码解释并执行。
eg:
	var fromJava = "{'no' : 101,'name' : 'zhangsan'}";
	window.eval('var jsonObj =' + fromJava);
	document.write(jsonObj.no + "," + jsonObj.name);

设置table中的tbody

    <script type="text/javascript">

        var data = {
            "total" : 5,
            "stus" : [
                {"no" : 101, "name" : "zhangsan", "class" : "NO.1"},
                {"no" : 102, "name" : "lisi", "class" : "NO.1"},
                {"no" : 103, "name" : "wangwu", "class" : "NO.2"},
                {"no" : 104, "name" : "jack", "class" : "NO.2"},
                {"no" : 105, "name" : "eric", "class" : "NO.3"}
            ]
        }

        window.onload = function() {
            document.getElementById('btn').onclick = function() {
                var html = "";
                for(var i = 0; i < data.stus.length; i++) {
                    html += "";
                    html += "";
                    html += data.stus[i].no;
                    html += "";

                    html += "";
                    html += data.stus[i].name;
                    html += "";

                    html += "";
                    html += data.stus[i].class;
                    html += "";
                    html += "";
                }
                document.getElementById('t_stu_tbody').innerHTML = html;
                document.getElementById('stuspan').innerText = data.stus.length;
            }
        }
    </script>
    <input type="button" value="显示学生信息" id="btn">
    <center><h2>学生信息表</h2></center>
    <hr>
    <table align="center" border="1px" width=50%>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>班级</th>
        </tr>
        <tbody id="t_stu_tbody"></tbody>
    </table>
    总共<span id="stuspan">0</span>名学生
</body>