JavaWeb筆記三:js

js

在這裏插入圖片描述

1、JavaScript的簡介

JavaScript
* 是基於對象和事件驅動的語言,應用於客戶端。
	- 基於對象:
		** 提供好了很多對象,可以直接拿過來使用
	- 事件驅動:
		** html做網站靜態效果,javascript動態效果
	
	- 客戶端:專門指的是瀏覽器

* js的特點
	(1)交互性
		- 信息的動態交互

	(2)安全性
		- js不能訪問本地磁盤的文件

	(3)跨平臺性
		- java裏面跨平臺性,虛擬機
		- 只有能夠支持js的瀏覽器,都可以運行

* javascript和java的區別
	(1)java是sun公司,現在oracle;js是網景公司
	(2)JavaScript 是基於對象的,java是面向對象
	(3)java是強類型的語言,js是弱類型的語言
		- 比如java裏面 int i = "10";
		- js:  var i = 10; var m = "10";
	(4)JavaScript只需解析就可以執行,而java需要先編譯成字節碼文件,再執行。

* javascript的組成(下面js)
	三部分組成
	(1)ECMAScript
		- ECMA : 歐洲計算機協會
		- 有ECMA組織制定的js的語法,語句.....

	(2)BOM
		- broswer object model: 瀏覽器對象模型

	(3)DOM
		- document object model:文檔對象模型

2、js和html的結合方式(兩種)

第一種:
	- 使用一個標籤 <script type="text/javascript">  js代碼; </script>

第二種:
	- 使用script標籤,引入一個外部的js文件
	*** 創建一個js文件,寫js代碼
	- 	<script type="text/javascript" src="1.js"></script>

** 使用第二種方式時候,就不要在script標籤裏面寫js代碼了,不會執行。

3、js的原始類型和聲明變量

** java的基本數據類型 byte short int long float double char boolean

** 定義變量 都使用關鍵字 var

** js的原始類型(五個)		
	- string: 字符串
		*** var str = "abc";

	- number:數字類型
		*** var m = 123;

	- boolean:true和false
		*** var flag = true;

	- null
		*** var date = new Date();
		*** 獲取對象的引用,null表示對象引用爲空 ,所有對象的引用也是object				
	- undifined
		*** 定義一個變量,沒有賦值
		*** var aa;
** typeof(); 查看當前變量的數據類型

4、js的語句

- java裏面的語句: 
	** if判斷
	** switch語句
	** 循環 for  while do-while

-js裏面的這些語句
	** if判斷語句
		**** =:表示賦值
		**** ==:表示判斷

	** switch語句
		- java裏面支持數據類型 string支持嗎?在jdk1.7開始支持
		- js裏面都支持
		- switch(a) {
			case 5:
				break;
			case 6:
				break;
			default:
			......
		 }
	** 循環語句 for  while    do-while
		- while循環
		**** var i = 5;
		while(i>1) {
			alert(i);
			i--;
		}

		- for循環
		*** for(int i=0;i<=10;i++) { }
		for(var mm=0;mm<=3;mm++) {
			alert(mm);
		}

	** i++ ++i和java裏面一樣

5、js的運算符

** +=  : x+=y;  ===> x=x+y;

** js裏面不區分整數和小數
	var j = 123;
	alert(j/1000*1000);  
	//  j/1000*1000    在java裏面得到結果是 0 
	// 在js裏面不區分整數和小數,123/1000=0.123 * 1000 = 123

** 字符串的相加和相減的操作
	var str = "123";

	** 如果相加時候,做是字符串連接
	** 如果相減,做的是相減的運算

	* //字符串的操作
	var str = "456";
	//alert(str+1);   //在java裏面操作的結果是 4561 ,在js裏面還是 4561
	alert(str-1);    //相減時候,執行減法的運算

	* 提示NaN:表示不是一個數字

** boolean類型也可以操作
	*** 如果設置成true,相當於這個值是1
	*** 如果設置成false,相當於這個值是0

** == 和 === 區別
	** 做判斷

	** == 比較的只是值
	** === 比較的是值和類型

** 引入知識
	直接向頁面輸出的語句(可以把內容顯示在頁面上)
	* document.write("aaa");
	document.wirte("<hr/>");
	** 可以向頁面輸出變量,固定值和html代碼

6、實現99乘法表(輸出到頁面上)

*	document.write("<table border='1' bordercolor='blue'>");
	//循環行 9
	for(var i=1;i<=9;i++) {

		document.write("<tr>");
		//循環列
		for(var j=1;j<=i;j++) {
			document.write("<td>");
			//運算
			document.write(j+"*"+i+"="+i*j);
			document.write("</td>");
		}
		//document.write("<br/>");
		document.write("</tr>");
	}
	document.write("</table>");

- document.write裏面是雙引號,如果設置標籤的屬性需要使用單引號
- document.write可以輸出變量,還可以輸出html代碼

7、js的數組

* 什麼是數組?
	- 使用變量,var m = 10;
	- java裏面的數組 定義 int[] arr = {1,2,3};

* 定義方式(三種)
	第一種: var arr = [1,2,3];   var arr = [1,"4",true];
	第二種:使用內置對象 Array對象
		var arr1 = new Array(5);  //定義一個數組,數組的長度是5
		arr1[0] = "1";

	第三種:使用內置對象 Array
		var arr2 = new Array(3,4,5); //定義一個數組,數組裏面的元素是3 4 5 

* 數組裏面有一個屬性  length:獲取到數組的長度

* 數組可以存放不同的數據類型的數據

8、js的函數

** 在java裏面定義方法
	public 返回類型void /int   方法名(參數列表) {
		方法體;
		返回值;
	}

	public int add(int a,int b) {
		int sum = a+b;
		return sum;
	}

** 在js裏面定義函數(方法)有三種方式
	**** 函數的參數列表裏面,不需要寫var,直接寫參數名稱
	第一種方式:
		**** 使用到一個關鍵字 function
		**** function 方法名(參數列表) {
			方法體;
			返回值可有可無(根據實際需要);
		 }

		**** 代碼
		//使用第一種方式創建函數
		function test() {
			alert("qqqqq");
		}

		//調用方法
		//test();

		//定義一個有參數的方法  實現兩個數的相加
		function add1(a,b) {
			var sum = a+b;
			alert(sum);		
		}

		//add1(2,3);

		//有返回值的效果
		function add2(a,b,c) {
			var sum1 = a+b+c;
			return sum1;
		}
		alert(add2(3,4,5));
	
	第二種方式:
		**** 匿名函數
			var add = function(參數列表) {
				方法體和返回值;
			}
		**** 代碼
		//第二種方式創建函數
		var add3 = function(m,n) {
			alert(m+n);
		}

		//調用方法
		add3(5,6);
	
	第三種方式:(用的少,瞭解)
		*** 動態函數
		*** 使用到js裏面的一個內置對象 Function
			var add = new Function("參數列表","方法體和返回值");

9、js的全局變量和局部變量

** 全局變量:在script標籤裏面定義一個變量,這個變量在頁面中js部分都可以使用
	- 在方法外部使用,在方法內部使用,在另外一個script標籤使用

** 局部變量:在方法內部定義一個變量,只能在方法內部使用
	- 如果在方法的外部調用這個變量,提示出錯
	- SCRIPT5009: “nn”未定義 
	12-js的局部變量.html, 行18 字符3

** ie自帶了一個調試工具,ie8及其以上的版本中,鍵盤上 F12,在頁面下方出現一個條

10、script標籤放在的位置

* 建議把script標籤放到 </body>後面
* 如果現在有這樣一個需求:
	在js裏面需要獲取到input裏面的值,如果把script標籤放到head裏面
	會出現問題。
	html解析是從上到下解析的,script標籤放到的是head裏面,直接在裏面取input裏面的值,
	因爲頁面還沒有解析到input那一行,肯定取不到。

11、js的重載

* 什麼是重載?方法名相同,參數列表不同
	- java裏面有重載,肯定有

* js裏面是否有重載?
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章