JavaScript基础(Part 1)

按照惯例，还是先废话一小段。JavaScript是一种轻量级脚本语言，可插入HTML实现网页中的各式各样的动态效果，并为用户提供更流畅美观的浏览效果。之所以叫JavaScript，是因为当年Netscape（网景公司）管理层希望它外观看起来像Java。我个人刚开始学习JavaScript的时候喜欢的JS一个特点，那就是JavaScript是一个弱类型的语言，这样写的时候比较方便，不用关心参数的类别；但是这样对于一个“严肃的程序员”来说确实是不严谨的。

大多数学过C++和Java的朋友，看到JavaScript会两眼放光顿感亲切吧，因为他们觉得JS很好入手，所以我也基本不多废话了，也不班门弄斧了。本文我码了一千字，也仅仅结合一下我自己在学习C++和Java之后，初入JavaScript这样一个新天地时所注意的一些地方。

##加载引用JavaScript方式:
JavaScript的使用方法在HTML中插入JavaScript， 使用标签，在它们之间书写代码。目前我听过两种说法，第一种让我们把js放在页面body的末尾部分，这样便于更好的加载页面渲染。另一种说法建议将JS放置在之中，这样不影响HTML的其他部分。总体上来讲，两种常见的加载引用JavaScript方式:

1.在HTML中直接插入：

<script>
document.write("Halo!");
</script>

2.在HTML中引用js文件

<script src="/test.js"></script>

##函数的使用
JavaScript中的函数使用，需要以function作为关键词开头。在Javascript中，大小写是很敏感的，所以注意是小写的关键字function。

1
2
3
function 函数名(){
	函数体；
}

带参数的函数,不需要传入参数的类型，因为正如开篇提到的，JavaScript是一个弱类型的语言。

1
2
3
function 函数名(a, b){
	函数体；
}

##全局变量和局部变量
局部变量只能在函数中使用，函数调用完毕会销毁；全局变量在函数里外都可以使用。下面是JavaScript的一个简单例子：

1
2
3
4
5
6
7
8
<script>
	var x = 10;
	y = 99;
	function demo(){
		var i = 20;
		j = 33;
	}
</script>

在这个例子中，x,y,j都是全局变量，而i是局部变量。要特别注意函数里面的全局变量。规律就是如果变量第一次出现不带var,那么它就是全局变量；如果变量第一次出现带var,但是在函数外面，仍然是一个全局变量；如果变量第一次出现带var,却在函数里面，那它是一个局部变量。

##JavaScript异常处理
异常指的就是JavaScript引擎执行代码时，发生了错误，导致程序停止。异常抛出就是当异常产生时，并且将这个异常生成一个错误信息。

下面展示一个简单的异常捕获和抛出的代码示例：

1
2
3
4
5
6
7
8
9
<script>
    function demo() {
        try{
            alert(str);
        }catch(error){
            alert(error);
        }
    }
</script>

因为，demo函数中，并未声明str,所以会报错”ReferenceError: str is not defined”。

在实际的工程应用中，可能会在多处出现同一类型错误的隐患，为了区分，可以使用throw来自定义错误类型。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <input id="inputText" type="text" >
    <input type="button" value="submit" onclick="demo()">
    <script>
        function demo() {
            var str = document.getElementById("inputText").value;
            try{
                if(str == ""){
                    throw "the first input is empty!";
                }
            }catch(error){
                alert(error);
            }
        }
    </script>
</body>

如果用户的输入是空，那么将会弹出一个警告窗口，指出“the first input is empty!”。因为自定义中可以更细致地定义错误信息，那么在大型项目中，我们更容易处理这些异常情况。

##事件（event）处理
事件就是指可以被JavaScript监听的一些行为或者动作。比如下表所呈现的常见事件：

Event Description
onclick 鼠标单击事件
onmouseover 鼠标经过事件
onmouseOut 鼠标移出事件
onchange 文本改变事件
onselect 文本框选中事件
onblur 光标移开事件
onfocus 光标聚集事件
onload 网页加载事件
onunload 网页关闭事件

之前已经在Button中使用过onclick了，下面再另选几个来做示例吧。首先我们写一个HTML，里面有div标签，2个文本框和一个受事件控制的弹出信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Event Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="giveMsg()">
    <div class="div1" onmouseover="onMouseOver(this)" onmouseout="onMouseOut(this)"></div>
    <script>
        function onMouseOver(pagein){
            pagein.innerHTML = "Hello!";
        }

        function onMouseOut(pageout){
            pageout.innerHTML = "Bye~~~"
        }
    </script>
    <form>
        <input type="text" onfocus="onFocus(this)">
        <input type="text" onselect="onSelect(this)">
    </form>
    <script>
        function onFocus(textbox){
            textbox.style.backgroundColor = "blue";
        }

        function onSelect(tbox){
            tbox.style.backgroundColor = "grey";
        }

        function giveMsg(){
            alert("The page has been loaded!");
        }
    </script>
</body>
</html>

为了使测试效果明显，可以给第一个div设计一个css样式，做成一个单色的巨幕样式：

1
2
3
4
5
.div1{
    height: 300px;
    width: 1100px;
    background-color: #82d2ff;
}

通过本地测试可以观察到：

  • 打开网页后，将立刻弹出窗口，告知“The page has been loaded!”；
  • 在将鼠标放在巨幕上时，巨幕会显示“Hello！”;当鼠标移到别处时，会显示“Bye~~~”。细心读者应该明白，三个波浪线代表一种码农的依依不舍。
  • 第一个文本框，当点击它时，其实是产生了光标，这时会变成蓝色。
  • 第二个文本框中输入一行字符串，然后选中这行信息，整个文本框会变成灰色。

###Other Tips:

  • 双引号中，若想再使用引号，最好内部使用单引号，否则已发生引号冲突。
  • 在下面这段代码中，运行结果是输出”i < j”。这是没有问题的。
1
2
3
4
5
6
<script>
    var i = 1;
    var j = 10;
    var m = i>j ? "i>j" : "i < j";
    document.write(m);
</script>

但是如果讲上面的代码第四行改为

var m = i>j ? "i>j" : "i <j";

即让 < 和 j 靠在一起，则整段JS代码只会输出”i”……所以建议写的时候要注意。但是为什么会这样，我暂时也没有太明白，已经询问了StackOverflow，我们一起耐心等待回复吧。