web前端學習筆記，實踐篇（五）初識JavaScript

初識JavaScript，寫到這裡，對於HTML CSS2.0的一些實用經驗，就告一段落了。雖然很多地方，只是大局的點水了一下，但也是認認真真總結經驗。

JavaScript發展簡史以及以後的發展：請參閱《JavaScript權威指南第五版》第一章，《JavaScript進階程式設計第二版》第一章。

讓我們先來體驗一下JavaScript魅力吧，你只需要一個web遊覽器，外加一個記事本編輯器。

function alert() {            alert("a");        }window.onload = function () {            alert();        }

當你開啟頁面的時候，會彈出一個“a”的訊息提示，你看，JavaScript程式，就如此形成了。

JavaScript是一種解釋型的程式設計語言，與現在的主流語言（Java、C#）大同小異，資料類型、文法結構都有很相似的地方。它以函數為主要的載體，來進行編程。資料類型，分為六種：undefined類型、null類型、boolean類型、number類型、string類型、object類型。文法結構上if do-while while for for-in switch等等都與主流的類程式設計語言相似。

JavaScript詞法結構經驗：

1.JavaScript是一門區分大小寫語言，這就是說，在輸入標識符的時候，de與DE完全是不同的兩個變數。

2.JavaScript的結束符號是可選的，但省略結束符號是不明智的，var a = 1; var b = 2;JavaScript用逗號來相隔，前者還可以如此寫var a =1,b=2;

3.JavaScript的注釋，有兩種，//與/* */。前者屬於一行注釋，後者屬於塊級注釋。

4.JavaScript有保留字，所以在寫程式時，應該避免使用保留字來命名。

JavaScript資料類型經驗：

 

JavaScript引入，一是用script標籤直接寫在頁面中，二是外部引入，三是動態載入：

一：<script type="text/javascript">[javascript編程]</script>二：/****************************/<script type="text/javascript" src="de.js"></script>/****************************/三：function loadScript(src){        var script = document.createElement("script");        script.type = "text/javascript";        script.src = src;        document.body.appendChild(script);}window.onload = function(){    loadScript("de.js");}

 

JavaScript通過typeof操作符來判斷資料類型，看一個例子：

 

var a = "123";var b = 123;alert(typeof a); //stringalert(typeof b); //number

 

註：若需要判斷是否為object類型，instanceof更合適。

 

JavaScript通過var來定義變數，若未使用var定義，執行函數時，也可以通過，因為它是全域變數。

 

var a = "d"; //把b賦值給a

 

JavaScript通過函數來進行編程，通過function來定義。

 

function [函數名]([參數]){       [函數體]}/***************************///如果通過傳參數的形式獲得idfunction a(id){    if(typeof id =="string"){          id = document.getElementById(id)    }}window.onload = function(){  a("id");}

 

number是最基本的資料類型，包括整數、浮點數。

 

var a = 123; alert(a); //123var b = 1.23;alert(b); //1.23

 

JavaScript還有一些特殊的數值，比如最大數、最小數，正無窮大、負無窮大等。

 

Number.MAX_VALUE Number.MIN_VALUE

 

 

字串（string）類型資料，用單引號或雙引號括起來，（'或"）。

var a= "a";var b = 'b';

 

字串中的逸出序列，可能用的最多的是"\"，反斜線。字串，還可以串連使用。

var a= "hello";var message = a + "welcome";

 

當我們需要針對字串進行操作時，它是有一個長度length的，我們可以截取，任意的字串。

function de() {            var s = "hello";            alert(s.length); //5            var last_char = s.charAt(s.length - 1);            alert(last_char); // o            var sub = s.substring(1);            alert(sub); //ello            var indexOfString = s.indexOf("l");            alert(indexOfString); //2        }window.onload = function () {            de();        }

 

 

當然在數字與字串中間，也提供一些轉換的機制，如String()函數，toString()方法，Number()函數，paresInt()，parseFloat()等。例如，當我們開發DHTML效果時需要計算X Y軸的座標，就需要一次轉換。

function de() {            var de = document.getElementById("de");            var X = parseInt(de.style.left);            var Y = parseInt(de.style.top);}

 

布爾類型資料，判斷真或假，有了它，我們的if等語句才能真正使用。

 function de() {            if (document.getElementById) {                alert("a");            }        }window.onload = function () {            de();        }//支援document.getElementById方法的遊覽器，可以彈出一個“a”的訊息提示。

 

 

函式宣告，函數就是一個段可執行檔JavaScript程式碼片段，雖然函數只能定義一次，但卻可以多次執行。

function de() {            alert("a");}var a = de; //函數引用【繼承】       var b = function (){            de();  }window.onload = function () {            a(); //執行            b();}function [函數名](參數){            函數體}

 

 

對象，在JavaScript中，如何建立，Object()。

//傳統建立對象var o = new Object();o.x = 10;0.y = 20;//對象字面量var o = {   a:function(){   }};

 

 

數組和對象一樣，是數值的集合，那麼如何建立數組呢？

//傳統建立方法var a = new Array();a[0] = 1.2;a[1] = 1.3;var a = new Array(1.2,1.3);var a = [1.2,1.3];

 

 

Date對象，這個對象主要是描述了表示日期、時間的一個對象類，基本用法如下。

var a = new Date();a.getDay();

 

 

在JavaScript中，有些內建的對象如Math、Global。Math對象儲存著數學公式，Global對象則儲存著一些屬性，如Date RegExp Error。

//Math對象//如確定一組數中的最小值或者最大值var max = Math.max(5,89,65);alert(max); //89var min = Math.min(5,89,65);alert(min); //5//

 

在javaScript，一般通過BOM下的方法來操作遊覽器的一些定義，DOM下的方法來操作HTML結構。　

//如獲得下面id為de的節點<div id="de"></div>var de = document.getElementById("de");//如遊覽器視窗位置screenLeft  screenTop