javaScript的簡介以及註意事項

1、JavaScript的簡介

(1)什麼是JavaScript:是基於對象和事件驅動的語言,應用於客戶端。

* 基於對象:

** java是面向對象,使用對象需要創建

** js裡面提供好瞭一些對象,直接使用

* 事件驅動:每次滑動鼠標,變換一張圖片

* 客戶端:指的是瀏覽器

(2)JavaScript的特點(三個)

第一個:交互性

第二個:安全性

** JavaScript不能訪問本地硬盤裡面的文件

第三個:跨平臺性

** 在java裡面跨平臺,通過虛擬機實現的

** JavaScript跨平臺,隻要在系統裡面安裝瞭支持JavaScript的瀏覽器,可以運行JavaScript

(3)Java和JavaScript區別(雷鋒和雷峰塔)

第一,java是sun公司,現在是oracle;JavaScript是網景公司

第二,java是面向對象的語言,javas是基於對象的語言

第三,java跨平臺需要依靠虛擬機實現,JavaScript隻需要瀏覽器可以運行

第四,JavaScript弱類型語言,java是強類型的語言

** 比如在java裡面定義一個變量 int a = 10; int b = "10";不正確

** 在JavaScript裡面定義變量都是使用一個關鍵字 var a = 10; var b = "10"; var c = true;

第五,java運行先編譯通過虛擬機運行,JavaScript直接使用瀏覽器運行

(4)JavaScript由三部分組成

第一部分:ECMAScript

** 又ECMA組織制定語句,語法

第二部分:BOM

** broswer object model:瀏覽器對象模型

第三部分:DOM

** document object model:文檔對象模型

2、js和html的結合方式

* 有兩種結合方式

第一種:使用html中的標簽

** 代碼

** js的註釋有兩種

//單行註釋

/*

多行註釋

*/

第二種:使用html的標簽,引入外部的js文件【項目開發常用方式】

* 使用第二種方式的時候有兩點註意

註意一:不要在script標簽裡面寫js代碼瞭,不會執行

註意二:結束script標簽 ,不要在標簽內結束

* 代碼

3、js的變量聲明和數據類型

(1)在js裡面如何聲明變量,都是使用一個關鍵字var

* var a = 10;

(2)js的原始類型

* 在java裡面有基本的數據類型?八個

* js的原始類型有五個

第一,string:字符串類型

* var a = "abc";

第二,number:數字類型

* var b = 10;

第三,boolean:佈爾類型 true false

* var c = true;

第四,null

* null是特殊的引用類型

* 表示對象引用為空

* 比如 var date = null;

第五,undefined

* 表示定義瞭一個變量,但是沒有賦值

* var a;沒有賦值

(3)typeof(變量的名稱): 查看當前變量的類型

* alert(typeof(a));

4、js的引用類型和類型轉換

* 引用對象

** Object 對象:所有對象都由這個對象繼承而來

** Boolean 對象:Boolean 原始類型的引用類型

** Number 對象: Number 原始類型的引用類型

* 類型轉換

** 轉換成字符串

** 轉換成數字:parseInt() 和 parseFloat()

** 強制類型轉換

Boolean(value) – 把給定的值轉換成 Boolean 型;

Number(value) – 把給定的值轉換成數字(可以是整數或浮點數);

String(value) – 把給定的值轉換成字符串;

5、js的語句

* 在java裡面語句:if 、 switch 、while do-while for

* java裡面的switch語句,數據類型要求:是否支持string類型?在jdk1.7開始支持的

(1)if 語句

* 代碼

//if語句

var a = 10;

if(a==10) {

alert("10");

} else {

alert("other");

}

(2)switch語句

* 在java裡面

switch(a) {

case 10:

break;

case 20:

break;

default:

….

}

* 代碼

var b = 5;

switch(b) {

case 4:

alert("4");

break;

case 5:

alert("5");

break;

default:

alert("other");

}

(3)while循環語句

* 代碼

//while語句

var i = 4;

while(i<6) {

alert(i);

i++;

}

(4)for循環語句

* 代碼

//for語句

for(var i=0;i<3;i++) {

alert(i);

}

(5)使用document.write()向頁面輸出內容

* 可以向頁面輸出變量

* 可以向頁面直接輸出html代碼

** document.write(i);

document.write("

");

6、練習:向頁面輸出99乘法表

(1)document.write可以直接向頁面輸出html代碼

(2)html中的屬性和屬性值之間可以使用雙引號,也可以使用單引號

(3)代碼

document.write("");

//循環9行

for(var i=1;i<=9;i++) {

document.write("");

//循環每行的部分

for(var j=1;j<=i;j++) {

document.write("");

}

//document.write("

");

document.write("");

}

document.write("");

//向頁面輸出內容

document.write(j+"*"+i+"="+i*j);

document.write("

");

7、js的運算符

(1)算術運算符

+ – * /….

(2)賦值運算符

+=含義: x+=y 相當於 x=x+y

(3)比較運算符

==:表示條件的判斷,如果是=,表示賦值

(4)邏輯運算符

&& || !

(5)js的運算符和java不同的內容

第一個:js裡面不區分整數和小數

* 比如 var a = 123/1000*1000,如果在java裡面結果是 0

* js裡面的結果:123

第二個:字符串的相加和相減操作

* 字符串相加是字符串的拼接操作,字符串相減是真正的相減運算,如果字符串不是數字提示NaN

* //字符串的相加和相減

var b = "10";

document.write(b+1); //字符串拼接

document.write("

");

document.write(b-1); //真正相減的運算

document.write("

");

var c = "a";

document.write(c-1); //NaN

第三個:boolean類型相加和相減的操作

* 如果佈爾類型值是true,把類型當成1運算;如果佈爾類型值是false,把類型當成0運算

//佈爾類型相加和相減操作

var flag = true;

document.write(flag+1); // 2,當boolean類型是true時候,把類型當成1運算

document.write("

");

var flag1 = false;

document.write(flag1+1); //1,當boolean類型是false時候,把類型當成0運算

第四個:==和===區別

* ==比較的是值

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

* 代碼

var mm = "10";

if(mm==="10") {

alert("10");

} else {

alert("other");

}

8、js的數組

* 什麼是數組:定義一個變量隻能存一個值,想要存多個值,可以使用數組進行存儲

* js裡面定義數組的方式

第一個:var arr1 = [];

第二個:var arr2 = ["10",10,true]; //可以寫任意的類型

第三種:var arr3 = new Array(3);

** 表示定義數組名稱是arr3,數組的長度是3

第四種:var arr4 = new Array(4,5,6);

** 表示定義數組名稱是arr4,數組裡面的值4 5 6

* 數組裡面的屬性:查看數組的長度 length

* 獲取數組裡面的值

** 遍歷數組得到裡面的值

//遍歷

for(var i=0;i var a = arr3[i];

document.write(a);

document.write("

");

}

* 數組的長度:在js裡面數組的長度可變的

** 數組的長度是最大的下標+1,之間如果沒有賦值直接默認是空字符串

9、js的string對象

(1)字符串對象

* 創建字符串:var a = "abc"; var b = new String("bb");

(2)屬性 length 字符串的長度

(3)方法

第一類:與html相關的方法(設置字符串的樣式的方法)

= bold() 使用粗體顯示字符串。

** document.write(a.bold());

= fontcolor() 使用指定的顏色來顯示字符串。

** document.write(a.fontcolor("red"));

= fontsize() 使用指定的尺寸來顯示字符串。

** document.write(a.fontsize(7));

= link() 將字符串顯示為鏈接

** document.write(a.link("04-練習99乘法表.html"));

第二類:與java相似的方法(在java裡面也有類似的方法)

= charAt() 返回在指定位置的字符。 如果位置不存在字符,返回空字符串""

** var str = "abcdefg";

document.write(str.charAt(1));

= concat() 連接字符串

** document.write(str.concat(str1));

= indexOf() 檢索字符串,得到檢索的字符的位置,如果沒有找到返回-1

** var str2 = "ABCD";

document.write(str2.indexOf("R"));

= split() 把字符串分割為字符串數組

** var str3 = "a-b-c";

var arr = str3.split("-");

document.write("length: "+arr.length);

= substr() 從起始索引號提取字符串中指定數目的字符。

= substring() 提取字符串中兩個指定的索引號之間的字符

** var str4 = "MARYJACKLUCY";

document.write(str4.substr(2,3));

//RYJ, 第一個參數表示從哪個位置開始,第二個參數表示向後取幾個位置的值

document.write("

");

document.write(str4.substring(2,3));

//R ,第一個參數表示從哪個位置開始,第二個參數到哪個位置結束(不包含這個位置) [2,3)

10、js的Array對象

(1)創建數組

(2)屬性

* length 設置或返回數組中元素的數目

** //length屬性

var arr1 = new Array(4,5,6);

document.write(arr1.length);

(3)方法

= concat():連接數組

** var arr2 = [6,7,8];

document.write(arr1.concat(arr2));

= join():把數組根據指定字符進行分割

** var arr3 = new Array(3);

arr3[0] = "mary";

arr3[1] = "jack";

arr3[2] = "lucy";

document.write(arr3);

document.write("

");

document.write(arr3.join("-"));

= pop() 刪除並返回數組的最後一個元素

** var arr4 = ["aa","bb","cc"];

//輸出數組的原始的值

document.write("old: "+arr4);

//輸出執行pop方法之後的返回值

document.write("

");

document.write("return: "+arr4.pop());

//輸出執行pop方法之後新的數組內容

document.write("

");

document.write("new: "+arr4);

= push() 向數組的末尾添加元素,並返回新的長度

** var arr5 = ["zhangsan","lisi","wangwu"];

//輸出數組的原始的值

document.write("old: "+arr5)

document.write("

");

//輸出執行push()方法之後的返回值

document.write("return: "+arr5.push("lucy"));

//輸出執行push()方法之後新的數組內容

document.write("

");

document.write("new: "+arr5);

** 向數組裡面使用push方法添加一個數組

document.write("

");

var arr6 = ["AAA","BBB"];

var arr7 = ["CCC","DDD"];

//輸出數組arr6的原始的值

document.write("old: "+arr6)

//輸出執行push()方法之後的返回值

document.write("

");

document.write("return: "+arr6.push(arr7));

//輸出執行push()方法之後新的數組內容

document.write("

");

document.write("new: "+arr6);

//遍歷數組

for(var i=0;i alert(arr6[i]);

}

= reverse() 顛倒數組中元素的順序

** var arr8 = ["zhaoliu","wanger","niuqi"];

document.write(arr8);

document.write("

");

document.write(arr8.reverse());

11、js的Math對象

(1)進行數學運算,在Math對象裡面的方法,直接使用Math.方法名稱進行調用

(2)方法

= ceil(x) 對一個數進行上舍入。

= floor(x) 對一個數進行下舍入。

= round(x) 把一個數四舍五入為最接近的整數

= random() 返回 0 ~ 1 之間的隨機數

** 代碼

var a = 10.2;

//ceil(x) 對一個數進行上舍入。

document.write(Math.ceil(a)); //11

document.write("

");

//floor(x) 對一個數進行下舍入。

document.write(Math.floor(a));

document.write("

");

//round(x) 把一個數四舍五入為最接近的整數

document.write(Math.round(a));

document.write("

");

//random() 返回 0 ~ 1 之間的隨機數

document.write(Math.random());

//生成0-9之間的隨機數 0.0 — 0.9之間的值

document.write("

");

document.write(Math.floor(Math.random()*10));

12、js的Date對象

(1)進行日期操作的對象

(2)使用Date對象,new Date();

(3)方法

= toLocaleString() 根據本地時間格式,把 Date 對象轉換為字符串。

** //得到當前的時間

var date = new Date();

document.write(date.toLocaleString());

= 得到當前的年 getFullYear() 從 Date 對象以四位數字返回年份

** document.write(date.getFullYear());

= 得到當前的月 getMonth() 從 Date 對象返回月份 (0 ~ 11)

** document.write(date.getMonth()+1);

= 得到當前的星期 getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)

** 如果當前的星期是星期日,返回的是0

** document.write(date.getDay())

= 得到當前的日 getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)

= 得到當前的小時 getHours()

= 得到當前的分 getMinutes()

= 得到當前的秒 getSeconds()

** document.write(date.getHours());

document.write("

");

document.write(date.getMinutes());

document.write("

");

document.write(date.getSeconds());

= 得到毫秒數 getTime() 返回 1970 年 1 月 1 日至今的毫秒數

13、js的RegRxp對象

(1)RegExp 對象表示正則表達式

(2)正則表達式:規定字符串出現的規范

(3)使用:new RegExp("正則表達式")

(4)方法:

* test() 檢索字符串中指定的值。如果存在匹配的字符返回 true,如果不存在匹配的字符返回 false。

(5)代碼

//創建正則表達式對象

var reg = new RegExp("[a]");

//創建一個字符串

var name = "lisi";

//使用正則對象匹配字符串

var flag = reg.test(name);

document.write(flag);

14、js的bom對象

(1)script標簽放置位置

* 建議放到後面

* html的解析是從上到下進行解析的,如果在head裡面就獲取輸入項裡面的值,因為還沒有解析到

輸入項,所以肯定得不到值。

(2)什麼是bom:瀏覽器對象模型

第一個:navigator

* 瀏覽器的信息

第二個:screen

* 屏幕的信息

第三個: history

* 訪問地址的歷史信息

第四個: location

* 設置url

* href 設置或返回完整的 URL

第五個: window(***)

* window對象是窗口對象,是頂層對象

* 方法

setInterval("執行的js代碼",毫秒數) 在指定的時間內,重復執行js代碼

** 有兩個參數

*** 第一個參數要執行的js代碼(js的方法),第二個參數是時間(毫秒數)

** 代碼

setInterval("alert('setinterval');",3000);

setTimeout("執行的js代碼",毫秒數) 在指定的時間之後,執行js代碼,執行一次

** 有兩個參數

*** 第一個參數要執行js代碼(js的方法),第二個參數是時間(毫秒數)

** 代碼

setTimeout("alert('settimeout');",3000);

clearInterval(id) 取消由 setInterval() 設置的 timeout。

clearTimeout(id) 取消由setTimeout() 方法設置的 timeout。

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

* 回顧:在java裡面成員變量

(1)全局變量

* 在js裡面,如果在一個script標簽裡面定義變量,在頁面中的其他script標簽裡面都可以使用。(要註意上下順序)

(2)局部變量

* 在js的方法裡面定義一個變量,這個變量隻能在方法裡面使用。

(3)瀏覽器裡面自帶的調試工具

* ie瀏覽器:點擊鍵盤上f12,在頁面下面出現一個條,點擊控制臺,出現調試的信息。

* 火狐瀏覽器:點擊鍵盤上f12,在下面出現一個條,點擊控制臺,出現調試的信息。

** 火狐瀏覽器裡面需要安裝firebug插件

* 谷歌瀏覽器:點擊鍵盤上的f12,在下面出現一個條,點擊console,出現調試的信息。

16、js的全局函數

(1)不屬於任何對象,可以使函數

(2)主要的函數

eval(): 把字符串當成js代碼執行

** var str = "alert('123456');";

//alert(str);

eval(str);

isNaN() 檢查某個值是否是數字

** 如果是數字返回 false,如果不是一個數字返回 true。

parseInt() 解析一個字符串並返回一個整數

** var str1 = "123";

alert(parseInt(str1)+1);

encodeURI() 把字符串編碼為 URI

** var str2 = "abc測試中文";

var encodestr2 = encodeURI(str2);

document.write(str2);

document.write("

");

document.write(encodestr2);

decodeURI() 解碼某個編碼的 URI

** var decodestr2 = decodeURI(encodestr2);

發佈留言