JavaWeb-01-JavaScript

Table of Contents

 

1:JavaScript基礎

1.1:JavaSctipt語言特點

1.2:Java和JavaScript的區別

1.3:語言基礎

1.3.1:編寫 JavaScript  程序

1.3.2:基本數據類型

1.3.3:變量

1.3.4:變量的作用域

1.3.5:運算符

1.3.6:表達式

1.4:控制結構

1.4.1:if語句

1.4.2:switch語句

1.4.3:for語句

1.4.5:while語句

1.5:函數

1.5.1:函數定義

1.5.2:調用函數

1.5.3:函數參數

1.6:系統函數

1.6.1:eval(  字符串表達式)

1.6.2:escape 和 和 unescape

1.6.3:parseFloat( 字符串)

1.6.4:parseInt  返回int數據

1.6.5:isNaN(x)

1.6.6:isFinite(number)

1.7:事件驅動和事件處理

1.7.1:事件

1.7.2:事件與函數關聯

2:JavaScript內置對象

2.1:  數組對象類型 Array

2.1.1:創建數組的方法

2.1.2:數組的屬性

2.1.3:數組的方法

2.2:字符串

2.2.1:字符串長度屬性

2.2.2:字符串方法

2.2.3:正則使用

2.3:數學類Math

2.3.1:Math 對象的常量

2.3.2:Math對象的方法

2.4:日期時間類

2.4.1:創建日期對象的幾種辦法

2.4.2:日期對象的方法

3:窗口window對象

3.1:window屬性

3.2:window對象的方法

3.3:常用方法

3.3.1:打開和關閉窗口

3.3.2:模態窗口 showModalDialog

3.3.3:對話框

4:文檔 document 

4.1:document對象概述

4.2:document 對象事件

5:History 對象

5.1 history 對象屬性 對象屬性

5.2:history對象方法


1:JavaScript基礎

1.1:JavaSctipt語言特點

腳本編寫
JavaScript 是一種腳本語言,它採用小程序段的方式實現編程。它作爲一種解釋性語言,不需要進行編譯,而是在程序運行過程中逐行地被解釋。

基於對象
JavaScript 是一種基於對象的語言,這意味着它能運用自己已經創建的對象。因此,許多功能可能來自於 JavaScript 運行環境(即瀏覽器本身)中對象的方法與 JavaScript 的對象相互作用。

簡單性
JavaScript 的簡單性首先主要體現在它基於 Java 的基本語句和控制流,是一種簡單而緊湊的語言,對於學習 Java 是一種非常好的過度;其次,它的變量類型是採用“弱類型”,並未使用嚴格的數據類型。

安全性
JavaScript 是一種安全性語言,它不允許訪問本地的硬盤,而且不能將數據存入到服務器上;不允許對網絡文檔進行修改和刪除,只能通過瀏覽器實現信息瀏覽或動態交互,從而有效地防止數據的丟失。

動態性
JavaScript是動態的,它可以直接對用戶或客戶輸入做出響應而無需經過Web服務程序。它對用戶的響應是採用以事件驅動的方式進行的。所謂事件驅動,就是指在頁面中執行某種操作所產生的動作,比如按下鼠標、移動窗口或選擇菜單等都可以視爲事件,當事件發生後就會引起相應的事件響應。

跨平臺性
JavaScript 僅依賴於瀏覽器本身,與操作系統無關,只要是能運行瀏覽器的計算機,並支持 JavaScript 的瀏覽器就可以正確執行。從而實現“編寫一下,走遍天下” 的夢想。

1.2:Java和JavaScript的區別

1 、基於對象和麪向對象
Java 是一種真正的面向對象的語言,即使是開發簡單的程序,必須設計對象。JavaScript 是種腳本語言,它可以用來製作與網絡無關的,與用戶交互作用的複雜軟件。它是一種基於對象(Object Based)和事件驅動(Event Driver)的編程語言。

2 、解釋和編譯
兩種語言在其瀏覽器中所執行的方式不一樣。Java 的源代碼在傳遞到客戶端執行之前,必須經過編譯,因而客戶端上必須具有相應平臺  上的仿真器或解釋器,它可以通過編譯器或解釋器實現獨立於某個特定的平臺編譯代碼的束縛。JavaScript 是一種解釋性編程語言,其源代碼在發往客戶端執行之前不需經過編譯,而是將文本格式的字符代碼發送給客戶編由瀏覽器  解釋執行。

3 、強變量和弱變量
兩種語言所採取的變量是不一樣的。Java 採用強類型變量檢查,即所有變量在編譯之前必須作聲明。JavaScript 中變量聲明,採用其弱類型。即變量在使用前不需作聲明,而是解釋器在運行時檢查其數據類型,

1.3:語言基礎

1.3.1:編寫 JavaScript  程序


1 、JavaScript  直接嵌入 HTML  文件中,寫在 head 或 body 標記對之間,要加標記如下:

<script language="javascript">
document.write("<font color=blue>Hello World!</font>");
</script>

2 、JavaScript  程序存放在單獨的.js  文件中,再在 HTML 

<head>
<script language="javascript" SRC="xxx.js"></script>
</head>
<body>
<form>
<input type=button onclick=show()>
</form>
</body>

1.3.2:基本數據類型

在 JavaScript 中有五種基本的數據類型:
 

數值類型(整數和實數) number
字符串(用 " "或者 ' ' 括起來) String
布爾型(true和false) Boolean
空值(null) Null
Undefined (表示這個變量沒有值,類似空指針) undefined
   

可以通過 typeof 運算符返回變量的數據類型。

1.3.3:變量

在程序執行過程中值可變的量,是系統內存中的一個命名的存儲單元。變量的命名:變量名以字母開頭,中間可以出現數字,下劃線。變量名不能有空格、+或其他符號
區分大小寫,不能使用 JavaScript 的關鍵字作爲變量。JavaScript 中的保留字(關鍵字):

1.3.4:變量的作用域

在javaScript中有全局變量和局部變量之分。全局變量時定義在所有函數體之外,其作用範圍是所有函數;而局部變量是定義在函數體之內,只對該函數是可見的。

用 var 修飾的變量是局部變量,不用 var 修飾的變量是全局變量。

1.3.5:運算符

運算符是完成某種操作的符號。

  • 算術運算符:+, -, *, /, %, ++, --
  • 比較運算符:==, >, >=, <, <=, !=
  • 邏輯運算符:&&, ||, !
  • 在 注意:在 JavaScript  的邏輯運算中,0 、”” 、false 、null 、undefined 、NaN  均表示false 。除此以外,都表示 true 。
  • 位運算符:&, |, ^, >>, <<, >>>
  • 賦值運算符:=, +=, -=, *=, /=,

1.3.6:表達式

表達式通常是由變量、常量和函數通過運算符構成的有意義的算式。如:a, a*2/3, (x+y)*10+(z-3)*20, x==y

1.4:控制結構

1.4.1:if語句

if (表達式){
    語句塊 1 ;
}else{
    語句塊 2 ;
}

1.4.2:switch語句

switch(表達式) {
    case 值 1:語句 1; break;
    case 值 2:語句 2; break;
    case 值 3:語句 3; break;
    default: 語句 4;
}

1.4.3:for語句

for (初值表達式; 條件表達式; 更新語句) {
//循環體語句
}

1.4.5:while語句

while(條件表達式) {
    //循環體語句
}
    break 語句:結束當前的循環或 switch 語句。
    continue 語句:用於 for 或 while 語句中,結束本次循環,繼續下一次循環。

1.5:函數

1.5.1:函數定義

function 函數名([參數列表]) {

    語句塊;
    [return 表達式;]
}

1.5.2:調用函數

函數被調用時函數內的代碼才真正被執行。調用函數的方法就是使用函數的名稱並賦給全部參數相應的值。

script language="javascript">
    max(20,30);
</script>
或
<input type="button" onClick="max(23,45);">

1.5.3:函數參數

函數的參數在JavaScript中調用函數時,可以向函數傳遞比在函數定義時參數數目要少的參數。在這種情況下,只要不是試圖去讀那些沒有傳遞過來的參數就行。
用 typeof 運算符可以得到參數的類型。對於未傳遞的參數,用 typeof 運算符得到的結果是“undefined”。示例如下:

<script language="javascript">
    function get(a,b){
    document.write("參數a的數據類型是:"+typeof(a)+"<br>");
    document.write("參數b的數據類型是:"+typeof(b));
}
    get(32.4);
</script>

1.6:系統函數

1.6.1:eval(  字符串表達式)

返回字符串表達式中的運算結果值。例 1:test=eval( " x=8+9+5/2 " );

1.6.2:escape 和 和 unescape

escape( 字符串)

返回字符串的一種簡單編碼,將非字母數字的符號轉換爲%加其 unicode 碼的十六進制表示。
例如: escape("你好世界")  --- "%u4F60%u597D%u4E16%u754C"

unescape( 字符串)

將已編碼的字符串還原爲純字符串。
例如: unescape("%u4F60%u597D%u4E16%u754C")  --- "你好世界"

1.6.3:parseFloat( 字符串)

返回浮點數  --- 例如: parseFloat( "10.5" ) 返回數字:10.5

1.6.4:parseInt  返回int數據

parseInt( 字符串,radix)
parseInt( 字符串,radix)

其中 radix 是數的進制,默認是十進制數 parseInt(字符串)
例如:

  • parseInt( "10.5" ) 返回數字:10
  • parseInt( "10" ) 返回數字:10
  • parseInt( "abc" ) 返回值:NaN

1.6.5:isNaN(x)

該函數可用於判斷其參數是否是NaN,NaN表示一個非法的數字。如果把 NaN 與任何值(包括其自身)相比得到的結果均是 false,所以要判斷某個值是否是 NaN,不能使用 == 運算符。正因爲如此,isNaN()函數是必需的。

1.6.6:isFinite(number)

該函數用於檢查其參數是否是無窮大,如果 number 是有限數字(或可轉換爲有限數字),那麼返回 true。否則,如果 number 是 NaN(非數字),或者是正、負無窮大的數,則返回false。

1.7:事件驅動和事件處理

在JavaScript中編寫的函數,通常是在其他代碼進行調用時纔會執行。不過我們也可以將某個函數與某個事件(Event,通常是鼠標或熱鍵的動作)聯繫起來,使得當事件發生時執行該函數。這個方法稱之爲 事件驅動(Event Driver)。而對事件進行處理的函數,稱之爲事件處理程序(Event Handler 事件句柄)。

1.7.1:事件

1.7.2:事件與函數關聯

要將一個函數與某個 HTML 元素的事件關聯起來,需要設置相應的 HTML 標記中的屬性值。例如,對於一個button元素的click事件的處理函數爲MyProc(),則可以用如下的形式將事件與函數關聯起來:

<script language="javascript">
function myPorc(){
alert(document.all("txt").value);
}
</script>
<input type="text" name="txt" />
<input type="button" value="Try" onClick="myPorc( );"/>

 

2:JavaScript內置對象

2.1:  數組對象類型 Array

數組可以存放很多相同類型的數據。有數組名代表所有這些數據,而用數組名[下標]表示其中某個元素(下標從 0 開始)。
如:var myA=["張三","李四","王五"];

myA[0]指向第一個元素“張三”

2.1.1:創建數組的方法

  • (1) 使用方括號,創建數組的同 時賦初值

var myA=["張三", "李四","王五"];
var b=[10,20,30,40];

  • (2)  使用 new  操作符,創建數組的同時賦初值

var myA=new Array("張三", "李四","王五");
注意圓括號和方括號的區別,不能任意使用。

  • (3)先創建數組,後面再賦值

var anArray = new Array();
anArray[0]= "張三";
anArray[1]= "李四";
anArray[2]= "王五";

2.1.2:數組的屬性

length
數組名.length 返回數組中元素的個數如:myA.length 爲 3

2.1.3:數組的方法

join( 分割符)
該方法的功能是把數組中所有數據用指定的分割符連接起來,以一個字符串的形式表達出來。例如:
myA.join("/") 返回一個字符串 "張三/李四/王五"

reverse()
該方法的功能是將數組中的元素整個反轉順序。例如:

sort()
該方法的功能是將數組元素排序(漢字按拼音的字母順序)。 例如:

concat()
方法用於連接兩個或多個數組。

pop()
方法用於刪除並返回數組的最後一個元素。
刪除數組的最後一個元素,把數組長度減 1,並且返回它刪除的元素的值。如果數組已經爲空,則 pop() 不改變數組,並返回 undefined 值。

push()
方法可向數組的末尾添加一個或多個元素,並返回新的長度。

push() 方 法 可 把 它 的 參 數 順 序 添 加 到 arrayObject 的 尾 部 。 它 直 接 修 改arrayObject,而不是創建一個新的數組。push() 方法和 pop() 方法使用數組提供的先進後出棧的功能 。

shift()
方法用於把數組的第一個元素從其中刪除,並返回第一個元素的值。

unshift() 
方法可向數組的開頭添加一個或更多元素,並返回新的長度。
unshift() 方法將把它的參數插入 arrayObject 的頭部,並將已經存在的元素順次地移到較高的下標處,以便留出空間。該方法的第一個參數將成爲數組的新元素 0,如果還有第二個參數,它將成爲新的元素 1,以此類推。

slice(start,end)

從已有的數組中返回選定的元素。

splice()
方法用於插入、刪除或替換數組的元素。

splice() 方法可刪除從 index 處開始的零個或多個元素,並且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。

2.2:字符串

2.2.1:字符串長度屬性

myStr.length 返回字符串中字符的個數 9,一個漢字算一個字符。

2.2.2:字符串方法

1:格式設置方法

2:通用字符操作

2.2.3:正則使用

//年齡驗證:1-99 的數字
var age=document.getElementById("age").value;
var patrn=/^[1-9][0-9]?$/;
if (!patrn.exec(age)) {
//設置提示信息爲紅色
document.getElementById("err_age").style.color='red';
flag=false;
}else{
//設置提示信息爲黑色
document.getElementById("err_age").style.color='black';
}

 

2.3:數學類Math

2.3.1:Math 對象的常量

  • Math.E 返回 2.718
  • Math.PI 返回 3.14159

2.3.2:Math對象的方法

2.4:日期時間類

2.4.1:創建日期對象的幾種辦法

2.4.2:日期對象的方法

 

3:窗口window對象

  •   window 整個瀏覽器窗口的統稱,是最上層的唯一對象。這一級可以省略,是系統默認值。
  •   history 包含用戶(在瀏覽器窗口中)訪問過的 URL
  •   document 是 window 的一個子對象,包含當前文檔(HTML 文件)中所有的對象。
  •   location 窗口中當前顯示的文檔的 Web 地址。
  •   navigator 包含有關瀏覽器的信息。
  •   以上對象都是系統預定義好的。

3.1:window屬性

3.2:window對象的方法

3.3:常用方法

3.3.1:打開和關閉窗口

open 打開一個瀏覽器窗口來顯示新的頁面。window.open(URL,窗口名稱,配置參數);

  • URL:用來指定新窗口要顯示的文檔的 URL。
  • 窗口:用來向設置新窗口的 title。

配置參數:用來描述新窗口的外觀等信息,可以使用以下的一個或幾個,用分號“;”隔開。

close() 關閉用 Open 方法打開的窗口,或關閉當前窗口

注:這個腳本只能關閉他打開的窗口;

3.3.2:模態窗口 showModalDialog

通過 dialog 對象創建一個新的窗口。
window.showModalDialog(URL,傳遞參數,配置參數)
URL:用來指定對話框要顯示的文檔的 URL。
傳遞參數:用來向對話框傳遞參數。傳遞的參數類型不限,對於字符串類型,最大爲4096個字符。也可以傳遞對象、數組等。對話框通過 window.dialogArguments 來取得傳遞進來的參數。

這個瞭解就行,現在谷歌停用了,推薦用window.open()

3.3.3:對話框

alert ( 提示字符串)
在屏幕中顯示一個消息框,顯示一個提示信息,單擊“確定”按鈕關閉消息框

confirm ( 提示字符串)
顯示一個可以接受用戶輸入的確定框,當選擇確定或取消,返回值爲 true 或 false。

prompt( 提示字符串,初始值) 讓用戶在對話框中輸入

4:文檔 document 

4.1:document對象概述

ocument 對象最強大的一個特性在於它的組織性。如果給頁面中的元素起個名字,則可以把該元素當成 document 對象的一個屬性來處理。例如,如果在 form 元素“form1”中有一個名 叫 “ txtbox” 的 文 本 框 , 則 可 以 像 下 面 這 樣 去 引 用 該 文 本 框 中 的 文 本 :document.form1.txtbox.value。

4.2:document 對象事件

5:History 對象

history 對象包含用戶(在瀏覽器窗口中)訪問過的 URL。
history 對象是 window 對象的一部分,可通過 window.history 屬性對其進行訪問。

5.1 history 對象屬性 對象屬性

5.2:history對象方法

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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