JavaScript基础知识

JavaScript调试：

使用console.log();可以向控制台输出信息。

JavaScript打印信息语法：

向页面输出信息，write后面要添加字符串，需要使用""标记字符串
也可以输出html的元素，

document.write("<h1>123</h1>");

会在页面显示h1大小的字符串123

document.write("");

JavaScript替换html元素:

getElementById("")可以根据元素的id找到对应元素，
innerHTML的作用是修改元素包围的内容
该JavaScript语句必须出现在id元素出现之后才会生效，直接出现在head元素里就会找不到id元素，失去效果

document.getElementById("").innerHTML = "";

JavaScript中的数据类型和定义：

JavaScript中的数据类型有数字、字符串、布尔值、数组、空值、未定义
如果只有var ，没有赋值，JavaScript就不知道需要解释成什么类型，所以就有了未定义类型
虽然类型有这么多，但是申明时都使用var，如下所示
可以使用typeof（）进行数据类型的判断
JavaScript中变量不能用关键字定义，区分大小写，必须要使用字母开头。
即使不使用var关键字，JavaScript也会自动识别

        var num = 10;
        var string ="abcd";
        var bool = true;
        var arr = [1,2,3,4,5];
        var nu = null;
        var arrs = new Array("1","2","3","4");

JavaScript中的数组的使用示例：

<script>
	/*如下示例随机给出数组1~9*/
    var d = [1, 5, 6, 8, 9, 3, 2, 7, 4];
	
	/*使用push函数可以向数组中增加一个元素*/
    d.push(10);
    	
    /*使用sort函数可以进行排序，不过不可以直接对数字类型的数据进行排序
    需要实现一个简单的自定义函数调用才可以排序，否则会按照字符串的规则
    j*/
    alert(d.sort(sortnumber));

    function sortnumber(a, b) {
    	/*如果返回的是b - a，则实现的是逆序排序*/
        return a - b;
    }
	/*使用reverse函数可以直接把函数逆序输出*/
    alert(d.reverse());
</script>

JavaScript中特殊的运算符：

如果只使用 != 和 = = 符号，JavaScript不会进行数据类型的比较，如上，
虽然 “0” 是字符串类型，0是数字类型，但是值是一样的，所以返回值为true，增加一个 = 符号，JavaScript就会进行类型的比较，所以返回值九尾false
同理，!= 和 ! = = 也是一样的原理
总而言之，没有再加上一个 = 号，就不会进行数据类型的判断
JavaScript中由于所有变量都是由var设置的，使用 == 比较是否相等时
只会把值取出来进行比较，如下结果所示：

document.write("0"===0); //false
document.write("0"==0); //true

document.write("0"!==0); //true
document.write("0"!=0); //false

JavaScript中for关键字的特殊使用：

JavaScript中的 for 除了可以使用for(i; i < 10; i ++)这样的书写
还可以使用 in 关键字来进行循环，但是容易存在一些误区
如下所示：

       var i = [4,5,6];
       var j;
       for(j in i){
       		/*
       		for(j in i)不是让j值等于 i 数组里的值，而是让 j 值从0开始循环，
       		每次循环 j 值增加1，循环次数为数组 i 的长度*/
           document.write(j);
       }
       
       //打印内容：012

JavaScript中的函数定义：

在JavaScript中，函数的申明需要使用function关键字，因为JavaScript是弱类型的语言，所以数据类型可以直接省略不用申明，有没有返回值也不需要申明，有返回值直接使用return关键字进行返回即可
参数不仅可以是JavaScript的数据类型，还可以是一个函数，一般使用匿名函数作为参数

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

JavaScript中函数两种调用方式：

1.在script元素中直接调用,使用函数名直接调用

2.需要使用onclick属性，不一定要是用按钮类型的元素才可以来触发函数，
只要可以设置onclick属性，任何元素都是可以的，如下使用p元素：

    <script>
        var a = 10;
        var b = 15;

        function sum() {
            alert(a + b);
        }
        sum();
    </script>
<p onclick="sum()">abc</p>

JavaScript中的隐式全局变量：

可以看出，不使用var关键字定义变量是隐式定义全局变量的写法
即使看上去像是定义局部变量x，但是该变量x在a函数之外也是可以使用的

    <script>
        function a() {
            x = 10;
        }

        a();
        alert(x);
    </script>
    //打印结果：10

JavaScript捕获异常：

异常捕获是使用try{}catch代码块进行的
JavaScript中throw不是表示抛出一个异常，而是自定义的一个异常，表现显示为alert(“自定义字符串”);
throw “空值!” 形式等价alert(“空值!”);

/*以下为示例代码：*/
    <script>
        function a() {
            var n = "";
            //
            try {
                if(n == "")
                    throw "空值!";
                alert(n);
            } catch (e) {
            	//e表示错误信息，会包含错误的原因
                alert(e);
            }
        }
        a();
    </script>

JavaScript中创建一个类的三种方法：

类似json的数据格式：
其中，this类似于public，var类似于private，但是var变量只能在这个function里使用，即使用这个构造器构造一个实例，这个实例也是不能访问。
写完function，接可以使用new创建实例了，不像其他语言，JavaScript中的对象属性和方法是可以随时增加的，即使是在创建后。

	/*new一个Object对象，Object对象是JavaScript中所有对象的父类*/
    var app = new Object();
    
    /*属性名称可以是任意字符串*/
    app.name = "appname";
    app.title = "apptitle";
    
	/*至此就成功创建了一个自定义的对象*/
	
	/*上述写法可以简写成以下形式，只需要一行，类似json写法*/
    var app = {name: "appname", title: "apptitle"};

	/*还可以像java一样，定义一个类，再通过类来创建对象*/
    function app(name, title) {
        this.name = name;
        this.title = title;
        
        /*可以通过以下形式设置函数*/
        this.show = function(){
        	alert(name);
        }
		/*var模拟私有属性*/
        var x = 1;
    }

    var app = new app("appname", "apptitle");
    app.show();//appname
    alert(app.x);//undefined

遍历JavaScript对象中的属性：
使用for( x in 实例)可以取出实例中的所有键（因为JavaScript对象都是键值对），然后依据键可以找到所有的值，包括函数。

var app = new app("appname", "apptitle");	
for( key in app){
	console.log(app[key]);
}

JavaScript中的计时器：

JavaScript中的计时器有两种，Interval，和Timeout
以下为演示代码：

<body>
<p id="pid"></p>
<button onclick="stop()">stop</button>
</body>
<script>
	/*setInterval可以指定毫秒数不停地执行指定代码，使用时最好取出计时器的对象，方便我们手动停止，直接赋值setInterval给一个变量即可*/
    var interval = setInterval(function () {
    	
    	/*给p元素设置时间*/
        document.getElementById("pid").innerHTML = new Date();
        	
        /*每一千毫秒触发一次*/
    },1000);
	
	/*如下的stop函数用于手动停止，需要计时器对象*/
    function stop() {
    	
    	/*使用clearInterval函数，传入对应计时器的对象，就可以停止计时器*/
        clearInterval(interval);
    }

</script>

以上为演示setInterval计时器，接下来我们演示setTimeout计时器：

<script>
	/*在函数外部定义一个loop对象用来承载setTimeout计时器对象*/    
    var loop;
    function fun() {
        document.getElementById("pid").innerHTML = new Date();
	
		/*setTimeout可以暂停指定毫秒数运行指定代码，也可以使用递归的方式实现无限调用*/
        loop = setTimeout(function () {
            fun();
        },1000);
    }
    fun();
    	
    /*同理，使用clearTimeout函数可以清除Timeout类型的计时器*/
    function stop() {
        clearTimeout(loop);
    }

</script>