JavaScript入門教程

JavaScript簡介

　　JavaScript是基於對象和事件驅動的腳本語言，主要應用在客戶端。

特色：

• 交互性（它能夠作的就是信息的動態交互）
• 安全性（不容許直接訪問本地硬盤）
• 跨平臺性（只要是能夠解釋JavaScript的瀏覽器均可以執行，和平臺無關）

JavaScript與Java不一樣

• JS是Netscape公司的產品，前身是LiveScript；Java是Sun公司的產品，如今是Oracle公司的產品。
• JS是基於對象，Java是面向對象。
• JS只需解釋就能夠執行，Java須要先編譯成字節碼文件，再執行。
• JS是弱類型，Java是強類型。

JavaScript與HTML的結合方式

　　想要將其餘代碼融入到HTML中，都是以標籤的形式。

• 將JavaScript代碼存放在標籤對<script> js code ... </script>中
• 將JavaScript代碼封裝到js文件中，並經過<script>中的src屬性進行導入

　　注意：若是<script>標籤中使用src屬性，那麼該標籤中存放的JavaScript代碼不會被執行。因此一般導入js文件都是用單獨的<script>來完成。

JavaScript語法

　　每一種語言都有本身的語法規則，JS語法與Java很像，因此學習起來比較容易。JS中也同樣有變量，語句，函數，數組等常見語言組成元素。

• 變量

　　　　經過關鍵字var來定義，弱類型便是不用指定具體的數據類型。

　　　　例如：var x = 3; x = "hello";

　　　　注：JS中特殊常量值：undefined。當變量沒有初始化就被使用，該變量的值就是undefined（未定義）。JS中只有字符串沒有字符，所以""、''的做用是相同的。

　　　　注意：JavaScript的語句在結尾處是能夠不用分號結束的，非嚴謹語言的特色。但爲了符合編程規範，須要像Java同樣定義結束符。並且有些狀況是必須寫分號的，如：var x = 3; var y = 5 若是兩條語句寫在同一行，就須要分號隔開。

• 運算符

　　　　算術運算符(+ - * / % ++ --)、賦值運算符、比較運算符、邏輯運算符、位運算符、三元運算符。

　　　　JavaScript中的運算符和Java大體相同。只是運算過程當中須要注意幾點：

1. 1. var x = 3120/1000*1000; // x = 3120而不是3000
   2. var x = 2.4 + 3.6; // x = 6而不是6.0
   3. var x = "12" + 1; // x = "121"，由於加號對於字符串是鏈接符
   4. var x = "12" - 1; // x = 11
   5. var x = true + 1; // x = 2，由於在js中false就是0或者null，非零，非null就是ture，默認用1表示
   6. &&  ||是邏輯運算符，& | 是位運算符
   7. 也支持三元運算符
   8. 特殊運算符typeof：返回一個操做表達式的數據類型的字符串。

   	var x = 3;
   	var y = "123";
   	var z = false;
   	typeof(x); // number
   	typeof(y); // string
   	typeof(z); // boolean;

• 語句

　　　　順序結構、判斷結構（if.else）、選擇結構（switch）、循環結構、其餘語句（如with：簡化對象調用內容的書寫）。

　　　　頁面中輸出九九乘法表：

　　　　　　<script type="text/javascript">
   		document.write("<table width='60%'>")
   		for(var i = 1; i < 10; i++)
   		{
   			document.write("<tr>");
   			for(var j = 1; j <= i; j++)
   			{	
   				document.write("<td>" + j + "*" + i + "=" + i*j + "</td>");
   			}
   			document.write("</tr>");
   		}
   		document.write("</table>");
　　　　　　</script>

• 數組

　　　　js中數組定義的兩種方式：

• var arr=[1,2,3,4];　
• 使用JavaScript中的Array對象來完成定義。
• var arr = new Array(); // 至關於 var arr=[];
• var arr = new Array(5); // 數組定義而且長度爲5
• var arr = new Array(5, 6, 7); // 定義一個數字，元素是5,6,7

 　　　　特色：長度是可變的。元素的類型是任意的。建議在使用數組時存儲同一類型的元素，操做起來較爲方便。

•  函數

　　　　經過指定的關鍵字function來定義。　　

function 函數名(參數列表){
   			函數體;
   			return 返回值; // 可省略
   		}

　　　　例如：

function add(a, b)
   		{
   			return a+b;
   		}

　　　　函數的一些細節：

• 只要使用函數的名稱就是對這個函數的調用，也就是說，函數不容許重載
• 函數中有一個數組在對傳入的參數進行存儲，這個數組就是arguments
• 函數自己在js中就是一個對象，函數名就是對這個函數對象的引用，若是打印這個對象，那麼會將該對象的字符串表示形式也就是該函數的代碼定義格式打印出來　
• 匿名函數：沒有名字的函數，一般是函數的簡寫形式

   		var add = function(a, b)
   		{
			return a + b;	
   		}
   		
   		alert(add(3, 4));

• • • 動態函數：使用的是js中內置的一個對象Function，參數列表，函數體都是經過字符串動態指定的。

   		var add = new Function("x, y", "var sum = x+y; return sum");
   		alert(add(3, 4));

• 對象，詳細內容參考微軟官方JScript文檔。這裏只介紹幾個相關的知識點。

　　　　好比，爲String對象添加去除兩邊空格的新功能：trim。

		String.prototype.trim = function(){
			var start = 0;
			var end = this.length-1;
			for(var i = 0; i < this.length; i++)
			{
				if(this.charAt(i) == " ")
					start = i+1;
				else 
					break;
			}
			for(i = end; i >= 0; i--)
			{
				if(this.charAt(i) == " ")
					end = i-1;
				else 
					break;
			}
			
			return start > end ? "" : this.substring(start, end+1);	
		}

 　　　　這裏再介紹一下如何用JS自定義對象。

　　　　　　若是想要自定義對象，應該先對對象進行描述。JS是基於對象，不是面向對象的。不具有描述事物的能力。若是咱們還想按照面向對象的思想編寫JS，就要先描述。在JS中，能夠用函數來模擬面向對象中的描述。

<script type="text/javascript">
   		// 用JS來描述人
   		function Person(){ // 至關於構造器
   			alert('one person was constructed');
   		}
   		
   		// 經過描述進行對象的創建	new
   		var p = new Person();
   		
   		// 動態給p對象添加屬性。直接使用p.屬性名便可
   		p.name = 'zhangsan';
   		p.age = 10;
   		
   		// 若是定義的p對象的屬性賦值爲一個函數，便是給p對象添加一個方法
   		p.show = function(){
   			alert('show: ' + this.name + ' : ' + this.age);
   		}
   		
   		p.show();
   		
   		/* 下面語句的輸出：能夠看到get和set方法是默認的
	   		name_zhangsan
			age_10
			setName_function (name){ this.name = name; }
			getName_function (name){ return this.name; }
			show_function (){ alert('show: ' + this.name + ' : ' + this.age); }
   		*/
   		var x;
   		for(x in p)
   			println(x + "_" + p[x]); 
   		/* println方法：
   		src="JSExample.js" 
   		JSExample.js:
   			function println(value){
				document.write(value+"<br/>");
			}
   		*/
   		//--------------------------------------------------------
   		// JS庫中：
   		var obj = new Object();
   		obj.name = 'god';
   		alert("obj.name:" + obj.name);
   		
   		//--------------------------------------------------------
   		// 另外一種描述人的方法
   		function Person(name, age){
   			// 給Person對象添加兩個屬性name和age
   			this.name = name;
   			this.age = age;
   			
   			this.setName = function(name){
   				this.name = name;
   			}
   			this.getName = function(name){
   				return this.name;
   			}
   		}
   		
   		var person = new Person('O(∩_∩)O', 12);
   		alert(person.getName());
   		
   		//--------------------------------------------------------
   		// 直接使用{}來定義一個實體
   		var per = {
   			// 用鍵值對的方式定義成員
   			"name":"lisi", "age":20,
  			"getName":function(){
  				return this.name;
  			},
  			"setName":function(name){
  				this.name = name;
  			}
   		}
   		// 對象調用成員的兩種方式：對象.屬性名	對象["屬性名"]
   		alert(per["age"]); // per.age		
   </script>