javascript基礎【一】_PHP教程

javascript基礎【一】

2015/11/13 16:10:04

javascript自誕生之初就處於爭論之中，但是這依舊不影響其成為今天WEB編程的主流語言。最初的javascript設計用於在瀏覽器端提供資料互動、畫面渲染、會話認證等動態功能，如今node.js的流行使得javascript擴充到了伺服器端。

javascript作為一門弱類型的指令碼語言，文法並不複雜，作為今時代的程式猿們，無論是否進行WEB開發，熟悉瞭解javascript都百利無一害。所以今天就讓我們來乾淨利落地認識下javascript吧！

一、什麼是javascript？

javascript是一種動態指令碼語言，專門用於Web應用開發，最主要的功能是為頁面添加動態行為效果，具體有：

• 將動態文本嵌入到HTML頁面；
• 響應瀏覽器事件（javascript是一種事件相應語言，對於使用者滑鼠點擊、移動等行為都可以進行響應）；
• 讀寫HTML元素（如表單提交等）；
• 在資料提交到伺服器前驗證資料；
• 檢測訪客的瀏覽器資訊；
• 控制cookie，包括建立和修改等；
• 基於Node.js技術進行伺服器端編程；

可以說，javascript是在用戶端針對HTML頁面動態行為進行編程的直譯型指令碼語言，使得Web瀏覽器不僅僅是顯示使用者頁面那麼簡單。但是也正是由於javascript部署在用戶端，因此其安全性一直是人們關注的焦點。

二、javascript調試

javascript指令碼的執行主要通過各大瀏覽器廠商自主開發的解析引擎實現。現有的主流javascript解析引擎主要有：Chrome的V8引擎、IE9的JS引擎以及Firefox的TraceMonkey；

進行javascript開發，我們往往習慣有個類似於VS那樣的IDE可以直接使用，但是由於javascript本身就是一種“輕量級”語言，因此我們只需要簡單的文字編輯器 + javascript解析引擎就可以進行開發調試了。

大家當然可以使用Windows下的記事本或者Linux的Vim編輯器，但是我建議大家還是使用專門的代碼編輯器比較好，因為具有文法高亮提示、自動補全等諸多便利。這裡我使用的文字編輯器是nodepad++，而搭配的調試器就是簡答的Firefox，當然你也可以使用IE、Chrome甚至Safri，因為nodepad++支援多種瀏覽器調試。

在Notepad++中的“運行”菜單下可以選擇在哪種瀏覽器中運行調試javascript指令碼，也可以使用上面的快速鍵。

三、javascript測試程式

接下來，我們提供一個非常簡答的javascript指令碼，裡面涉及的知識點會逐一講解。

首先是我們的javascript指令碼：program.js，我們先來看一段代碼：

document.writeln('');
 
document.writeln("Hello, world!");
var a = 100000000000000000000e400;
if (a < Infinity)
{
document.writeln(a);
document.writeln('a less than Infinity, 3Q~~');
}
else
{
document.writeln(a);
document.write('Sorry, a more than Infinity!\n');
} 

第1行：document.writeln()與document.write()都用來向終端（瀏覽器）輸出資訊，區別在於“ln”版本內建分行符號；
第3行：定義一個變數，無需聲明其類型，只需要使用關鍵字“var”即可；
第4行：javascript中依舊可以使用基本的控制結構，如if-else, while以及for等；javascript的數字統一用64位的浮點表示，所以1.0與1表示的值相同；此外，NaN表示一個不能產生正常結果的運算結果，而所有大於1.798e308的數值統一用Infinity表示，e308表示10的308次冪；所以當輸入的值大於定義值時，統一顯示為Infinity；

var a = 10, b = 9;
 

document.writeln(a);

function add(x,y)
{
return x + y;
}

function subtract(x,y)
{
return x - y;
}

document.writeln(add(a,b)); 

第5行開始定義了一個簡單的函數，一個是加法（add），另一個則是減法（subject），然後在終端輸出時調用該函數；

document.writeln("Global Object...");
 
var MyObj = {};

MyObj.member = {'first-name': "Alice", last_name : "Winston"};

MyObj.record = {
airline: 'T2B',
number: 777,
departure: {
Date:"Sunday",
Time:"2015-11-01",
City:"Taiwan"
},
arrival: {
Date:'Monday',
Time:"2015-11-02",
City:"Beijing"
}

};

document.writeln("Retrive a non-exit attribute value ..exa..MyObj.people..");
document.writeln(MyObj.people);

document.writeln("typeof MyObj.member is ...");
document.writeln(typeof MyObj.member);

document.writeln("MyObj.record.number is ...");
document.writeln(typeof MyObj.record.number);

document.writeln('MyObj.record.airline is ...');
document.writeln(typeof MyObj.record.airline); 

由於javascript的函數中沒有局部域，因此經常使用全域域。有編程經驗的大伙兒都知道，全域變數非常容易混亂，所以建議像本文一樣在開頭統一建立一個全域對象，然後所有的操作作為其中的一部分，也就是說我們定義的全域對象其實是一個“全域容器”。
javascript中單一資料型別包括數字、字串、布爾值、null值和undefined五種，其它所有的值都是對象，如數組、函數以及Regex。簡言之，javascript中對象就是可變的鍵控集合（keyed collections）。對象由不同的屬性群組成，屬性的名字可以是包括Null 字元串在內的任一字元串，屬性值可以是除undefined之外的任何值。

第2行初始化一個空的全域對象MyObj;
第4行為對象MyObj添加一個屬性member，而member又是一個對象，包含兩個索引值對，每個索引值對用','分隔，最後一個屬性不用加符號；
第7-8行的屬性名稱為一個字串，這裡建議使用javascript的標識符規範（數字、字母與底線，首字元只能是字母），因為這樣寫可以省略掉“”來表示字串，如“first-name”不能省略“”，而可以寫成first_name；不僅如此，在對象的屬性檢索時可以方便的使用引用符號“.”進行，比如MyObj.member.last_name，而非規範標識符只能用MyObj.member.["first-name"],非常麻煩；

//對象屬性值的更新
 
document.writeln('Attribute value update...');
document.writeln(' Once Date is ' + typeof MyObj.record.departure.date);

MyObj.record.departure.Date = 'Saturday';

document.writeln(MyObj.record.departure.Date);

//對象枚舉
document.writeln('Object enume...')
var name;
for (name in MyObj.record)
{
document.writeln(name + ':' + MyObj.record[name]); 

第3行使用typeof獲得對象的類型，typeof運算子的值只有"string"、"boolen"、"undefined"、"function"和"object"五種；
第5行直接對已有的屬性更新，若已存在，則更新；若沒有，則建立該屬性索引值對；
第9行展示了枚舉一個對象的所有屬性，藉助for-in結構，我們可以枚舉出所有的屬性（包括函數和原型中的屬性），而且得到的枚舉不一定是按順序的，所以一般建議使用for(）的形式規定遍曆方式；

接下來是我們的program.html

這裡關鍵就是第4行中嵌入了一個javascript指令碼，
第3行的告訴瀏覽器按照源碼的樣式顯示；
最後我們來看看結果：

  不足之處歡迎大家批評指正！  Refer：《Javascript語言精粹》，Douglas Crockford, 電子工業出版社 

http://www.bkjia.com/PHPjc/1071441.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1071441.htmlTechArticlejavascript基礎【一】 2015/11/13 16:10:04 javascript自誕生之初就處於爭論之中，但是這依舊不影響其成為今天WEB編程的主流語言。最初的javascript設...

