跟着杨中科学习asp.net之javascript
Javascript教程
Javascript語言基礎
內容：JavaScript語言。JavaScript語法很多
和C#、Java、C等語言類似，因此本課只講
JavaScript特有的語法，不會再講解編程的基
本原理。
目標：掌握JavaScript語法，為Dom編程和
JQuery打基礎。
什么是JavaScript
l HTML只是描述網頁長相的標記語言，沒有計算、判斷能力，如
果所有計算、判斷（比如判斷文本框是否為空、判斷兩次密碼是
否輸入一致）都放到服務器端執行的話網頁的話頁面會非常慢、
用起來也很難用，對服務器的壓力也很大，因此要求能在瀏覽器
中執行一些簡單的運算、判斷。JavaScript就是一種在瀏覽器端
執行的語言。(純前端語言)
l JavaScript的Java沒直接的關系，唯一的關系就是JavaScript原
名LiveScript，后來吸收了Java的一些特性，升級為JavaScript。
JavaScript有時被簡稱為JS。
l JavaScript是解釋型語言(對應為編譯型語言如C#)，無需編譯就可以隨時運行，這樣哪怕
語法有錯誤，沒有語法錯誤的部分還是能正確運行。
JS的開發環境
l VS中JavaScript、JQuery的自動完成功能：在VS2010中直接有，
VS2008需要安裝VisualStudio 2008SP1（
http://www.microsoft.com/downloads/details.aspx?displaylang=zhcn&
familyid=27673c47-b3b5-4c67-bd99-84e525b5ce61）和VS90SP1-
KB958502-x86（
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.a
spx?ReleaseId=1736）補丁會更強更好用。如果實在“.” 不出來也沒關
系，不影響運行。注意：先安裝2008SP1，再安裝VS90SP1-
KB958502-x86。
l JS是非常靈活的動態語言，不像C#等靜態語言那樣嚴謹，開發工具中
的JS完成功能只是一個輔助、建議，“.”出來的成員調用可能不能用，“.”
不出來的成員也許也能調用，因此不要因為“點兒不出來”而擔心代碼有
問題。
l VS2008的HTML編輯器中觸發JavaScript自動完成：Ctrl+J。
JS入門
l <script type="text/javascript">
l alert(new Date().toLocaleDateString());
l </script>
l <script language="....>已經不推薦使用。
l JavaScript代碼放到<script>標簽中，script可以放到<head>、<body>等任意位
置，而且可以有不止一個<script>標簽。alert函數是彈出消息窗口，new Date()
是創建一個Date類的對象，默認值就是當前時間。JS是大小寫敏感的。
<head>
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
alert(new Date().toLocaleDateString());
</script>
</head>
<body>
</body>
</html>
l 放到<head>中的<script>在body加載之前就已經運行了。寫在body中的<script>
是隨著頁面的加載而一個個執行的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
alert(new Date().toLocaleDateString());
</script>
<script type="text/javascript">
alert("唯有知情一片月，曾窺飛鳥入朝陽！");
</script>
</head>
<body>
<script type="text/javascript">
alert("玉京星闕！");
</script>
aaaaaaaaaaa
<script type="text/javascript">
alert("無人唱徹！");
</script>
bbbbbbbbbbbbbbbbb
</body>
</html>
l 除了可以在頁面中聲明JavaScript以外，還可以將JavaScript寫到單獨的js文件中
，然后在頁面中引入：<script src="test.js" type="text/javascript"></script>。聲
明到單獨的js文件的好處是多頁面也可以共享、減小網絡流量。js文件的CDN(*)
<script src="common.js" type="text/javascript">
</script>
引用公用的js文件
l 注意：不要寫成<script src="test.js" type="text/javascript"/>否則會有問題，這是
一個比較特殊的地方。
事件
l 在超鏈接的點擊里執行JavaScript：
<a href="javascript:alert(88)">發發</a>
l JavaScript中也有事件的概念，當按鈕被點擊的時候也可以執行
JavaScript：
? <input type="button" οnclick="alert(99)" value="久久"/>
? 只有超鏈接的href中的JavaScript中才需要加“"javascript:”，
因為它不是事件，而是把“"javascript:”看成像“http:”、“ftp:”、
“thunder://”、“ed2k://”、"mailto:"一樣的網絡協議，交由js解
析引擎處理。只有href中這是這是一個特例。
JS的變量
l JavaScript中即可以使用雙引號聲明字符串，也可以使用單引號
聲明字符串。主要是為了方便和html集成，避免轉義符的麻煩。
l JavaScript中有null、undefined兩種，null表示變量的值為空，
undefined則表示變量還沒有指向任何的對象，未初始化。兩者
的區別參考資料。
l JavaScript是弱類型語言（沒有那么嚴謹完善的機制，沒有類型一說），聲明變量的時候無法：int i=0；只能通過var i=0;（聲明變量為i指向0的整數，一旦指向0就是int類型）聲明變量，和C#中的var不一樣，不是C#中那樣的類型推斷。
l JavaScript中也可以不用var聲明變量，直接用，這樣的變量是“
全局變量”，因此除非確實想用全局變量，否則使用的時候最好
加上var。
l JS是動態類型的，因此var i=0;i="abc";是合法的。
JS除錯與調試
l 如果JavaScript中的代碼有語法錯誤，瀏覽器會彈出報錯信息，
查看報錯信息就能幫助排查錯誤。
l JavaScript的調試，使用VS可以很方便的進行JavaScript的調試
，調試時需要注意幾點：
? IE6的調試選項要打開，Internet選項→高級，去掉“禁用腳本
調試”前的勾選。
? 以調試方式運行網頁。
? 設置斷點、監視變量等操作和C#一樣。
l 案例：用循環語句的方法計算1到100之間整數的和
<script type="text/javascript">
// alert("唯有知情一片月，曾窺飛鳥入朝陽！");
var sum = 0;
for (var i = 0; i <= 100; i++) {
sum += i;
}
alert(sum);
</script>
判斷變量初始化
JavaScript中判斷變量、參數是否初始化的三種方法：
var x;
if (x == null) {
alert("null");
}
if (typeof (x) == "undefined") {
alert('undefined');
}
if (!x) {alert('不x');}
if(x){}//變量被初始化了或者變量不為空或者變量不為0.
推薦用最后一種方法。
函數的聲明
l JavaScript中聲明函數的方式：
function add(i1, i2) {
return i1 + i2;
}
int add(int i1,int i2)//C#寫法
l 不需要聲明返回值類型、參數類型。函數定義以function開頭。
var r = add(1, 2);
alert(r);
r = add("你好", "tom");
alert(r);
l JavaScript中不像C#中那樣要求所有路徑都有返回值，沒有返回值就是
undefined。
l 易錯：自定義函數名不要和js內置、dom內置方法重名，比如selectall、
focus等函數名不要用。
匿名函數
var f1 = function(i1, i2) {
return i1 + i2;
}
alert(f1(1,2));
l 類似于C#中的匿名函數。
l 這種匿名函數的用法在JQuery中的非常多
l alert(function(i1, i2) { return i1 + i2; }(10,10));//直接聲明一個匿名
函數，立即使用。用匿名函數省得定義一個用一次就不用的函數
，而且免了命名沖突的問題，js中沒有命名空間的概念，因此很
容易函數名字沖突。通過例子發現一旦命名沖突以最后聲明的為
準
l 必須<script src="my1.js" type="text/javascript"></script>不能：
<script src="my1.js" type="text/javascript"/>
JS面向對象基礎（*）
l JavaScript中沒有類的語法，是用函數閉包（closure）模擬出來的，下面講解的時候
還是用C#中的類、構造函數的概念，JavaScript中String、Date等“類”都被叫做“對象”
，挺怪，方便初學者理解，不嚴謹。JavaScript中聲明類（類不是類，是對象）：
function Person(name, age) {
this.Name = name;
this.Age = age;
this.SayHello = function () {
alert("你好，我是" + this.Name + "，我" + this.Age + "歲了");
}
}
var p1 = new Person("tom", 20);
p1.SayHello();
l 必須要聲明類名，function Person(name,age)可以看做是聲明構造函數，Name、Age
這些屬性也是使用者動態添加了。var p1 = Person("tom", 30);//不要丟了new，否則就
變成調用函數了，p1為undefined。new 相當于創建了函數的一個實例
String對象(*)
l length屬性；
l charAt方法；
l indexOf；
l match、replace、search方法，正則表達式相關
l split
l substr、substring
Array對象
l JavaScript中的Array對象就是數組，首先是一個動態數組，而且
是一個像C#中數組、ArrayList、Hashtable等的超強綜合體。
var names = new Array();
names[0] = "tom";
names[1] = "jerry";
names[2] = "lily";
for (var i = 0; i < names.length; i++) {
alert(names[i]);
}
var names = new Array();
names[0] = "tom";
names[1] = "jerry";
names[2] = "lily";
for (var i = 0; i < names.length; i++) {
alert(names[i]);
}
l 無需預先制定大小，動態。
練習
l 求一個數組中的最大值。定義成函數。
function getMax(arr) {
var max = arr[0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] > max) {
max=arr[i];
}
}
return max;
}
var arr1 = new Array();
arr1[0] = 10;
arr1[1] = 100;
arr1[2] = 30;
arr1[3] = 50;
arr1[4] = 8;
alert(getMax(arr1));
l 將一個字符串數組輸出為|分割的形式，比如“梅西|卡卡|鄭大世”
。不要使用JavaScript中的Join函數。arr1.join("|")將數組用分隔
符連接成一個字符串。
function myjoin(arr) {
if (arr.length <= 0) {
return "";
}
var s = arr[0];
for (var i = 1; i < arr.length; i++) {
s=s+"|"+arr[i];
}
return s;
}
var arr = new Array();
arr[0] = "tom";
arr[1] = "jerry";
arr[2] = "lily";
alert(myjoin(arr));
l 將一個字符串數組的元素的順序進行反轉。{"3","a","8","haha"}
{"haha","8","a","3"}。不要使用JavaScript中的反轉函數。提示：
第i個和第length-i-1個進行交換。定義成函數。Myreverse
function myreverse(arr) {
for (var i = 0; i < arr.length / 2; i++) {
var temp;
temp = arr[i];
arr[i] = arr[arr.length - i - 1];
arr[arr.length - i - 1] = temp;
}
}
var arr = new Array();
arr[0] = "tom";
arr[1] = "jerry";
arr[2] = "lily";
alert(myjoin(arr));
myreverse(arr);
alert(arr);
l 交換兩個變量，數組同樣是傳遞引用，js出錯很麻煩。
JS中的Dictionary
l JS中的Array是一個寶貝，不僅是一個數組，還是一個Dictionary
，還是一個Stack。
var pinyins = new Array();
pinyins["人"] = "ren";
pinyins["口"] = "kou";
pinyins["手"] = "shou";
alert(pinyins["人"]);
alert(pinyins.人);
var diec = new Array();
diec["人"] = "ren";
diec["口"] = "kou";
diec["手"] = "shou";
alert(diec["口"]);
alert(diec.口);
var diec = new Array();
diec["人"] = "ren";
diec["口"] = "kou";
diec["手"] = "shou";
// alert(diec["口"]);
// alert(diec.口);
for (var k in diec) {
alert(k);
}
遍歷出的為key
var arr = new Array();
arr[0] = "tom";
arr[1] = "jerry";
arr[2] = "lily";
for (var a in arr) {
alert(a);
}
結果為0,1,2
l 像Hashtable、Dictionary那樣用，而且像它們一樣效率高。
l 課下練習：網頁版的火星文翻譯。
Array的簡化聲明
l Array還可以有簡化的創建方式
? var arr = [3, 5, 6, 8, 9]; 普通數組初始化
? 這種數組可以看做是pinyins["人"] = "ren";的特例，也就是key為0、1
、2……
l 字典風格的簡化創建方式：
? var arr = {"tom":30,"jim":20};
var arr3 = { "tom": 30, "jim": 20 };
alert(arr3["jim"]);
輸出為：20
數組、for及其他
l 對于數組風格的Array來說，可以使用join方法拼接為字符串
var arr = ["tom","jim","lily"];
alert(arr.join(","));//JS中join是array的方法，不像.Net中是string的方法
for循環可以像C#中的foreach一樣用
l for循環還可以獲得一個對象所有的成員，類似于.Net中的反射
for (var e in document) {
alert(e);
}因為對象的成員就是以對象的key的形式出現的
var p1 = new Object();
p1.Name = "tom";
p1.Age = 30;
p1.SayHello = function () { alert("hello"); };
p1.SayHello();
for (var s in p1) {
alert(s);
}
有了它沒有文檔也可以進行開發。
擴展方法（*）
l 通過類對象的prototype設置擴展方法，下面為String對象增加
quote（兩邊加字符）方法
l String.prototype.quote = function(quotestr) {
l if (!quotestr) {
l quotestr = "\"";
l }
l return quotestr + this + quotestr;
l };
l alert("abc".quote()); alert("abc".quote("|"));
l 擴展方法的聲明要在使用擴展方法之前執行。JS的函數沒有專門
的函數默認值的語法，但是可以不給參數傳值，不傳值的參數值
就是undefined，自己做判斷來給默認值。
轉載于:https://www.cnblogs.com/seclusively/p/3789455.html
總結
以上是生活随笔為你收集整理的跟着杨中科学习asp.net之javascript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python email模块详解_pyt
- 下一篇： 跟着杨中科学习asp.net之html