Java scirpt簡介

Yy_Gg發表於2019-03-22

Java scirpt簡介

學號:201631062509

姓名:楊菓

1.JavaScript 簡介

JavaScript一種直譯式指令碼語言,是一種動態型別、弱型別、基於原型的語言,內建支援型別。它的直譯器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的指令碼語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能。

 JavaScript 是指令碼語言。

 JavaScript 是一種輕量級的程式語言。

 JavaScript 是可插入 HTML 頁面的程式設計程式碼。

 JavaScript 插入 HTML 頁面後,可由所有的現代瀏覽器執行。

 JavaScript 很容易學習。

2.相關概念

語句

JavaScript程式是由若干語句組成的,語句是編寫程式的指令。JavaScript提供了完整的基本程式設計語句,它們是:

賦值語句、switch選擇語句、while迴圈語句、for迴圈語句、for each迴圈語句、do...while迴圈語句、break迴圈中止語句、continue迴圈中斷語句、with語句、try…catch語句、if語句(if..else,if…else if…)。

函式

函式是命名的語句段,這個語句段可以被當作一個整體來引用和執行。使用函式要注意以下幾點:

1)函式由關鍵字function定義(也可由Function建構函式構造)

2)使用function關鍵字定義的函式在一個作用域內是可以在任意處呼叫的(包括定義函式的語句前);而用var關鍵字定義的必須定義後才能被呼叫

3)函式名是呼叫函式時引用的名稱,它對大小寫是敏感的,呼叫函式時不可寫錯函式名

4)參數列示傳遞給函式使用或操作的值,它可以是常量,也可以是變數,也可以是函式,在函式內部可以通過arguments物件(arguments物件是一個偽陣列,屬性callee引用被呼叫的函式)訪問所有引數

5)return語句用於返回表示式的值。

6)yield語句扔出一個表示式,並且中斷函式執行直到下一次呼叫next。

一般的函式都是以下格式:

function myFunction(params){

//執行的語句

}

函式表示式:

var myFunction=function(params){

//執行的語句

}

var myFunction = function(){

//執行的語句

}

myFunction();//呼叫函式

匿名函式,它常作為引數在其他函式間傳遞:

window.addEventListener('load',function(){

//執行的語句

},false);

 

物件

JavaScript的一個重要功能就是物件導向的功能,通過基於物件的程式設計,可以用更直觀、模組化和可重複使用的方式進行程式開發。

一組包含資料的屬性和對屬性中包含資料進行操作的方法,稱為物件。比如要設定網頁的背景顏色,所針對的物件就是document,所用的屬性名是bgcolor,如document.bgcolor="blue",就是表示使背景的顏色為藍色。

註釋

JavaScript 註釋[4]不會被執行,所以我們可以新增註釋來對 JavaScript 進行解釋,或者提高程式碼的可讀性。

單行註釋:

單行註釋以 // 開頭,比如:

// 輸出標題: 

document.getElementById("myH1").innerHTML="歡迎來到我的主頁"; 

// 輸出段落: 

document.getElementById("myP").innerHTML="這是我的第一個段落。";

多行註釋:

多行註釋以 /* 開始,以 */ 結尾,例子:

/* 

下面的這些程式碼會輸出 

一個標題和一個段落 

並將代表主頁的開始 

*/ 

document.getElementById("myH1").innerHTML="歡迎來到我的主頁"; 

document.getElementById("myP").innerHTML="這是我的第一個段落。";

除此之外,我們還可以通過註釋功能來阻止碼塊的執行(可用於除錯),比如:

//document.getElementById("myH1").innerHTML="歡迎來到我的主頁";

document.getElementById("myP").innerHTML="這是我的第一個段落。";

事件

使用者與網頁互動時產生的操作,稱為事件。事件可以由使用者引發,也可能是頁面發生改變,甚至還有你看不見的事件(如Ajax的互動進度改變)。絕大部分事件都由使用者的動作所引發,如:使用者按滑鼠的按鍵,就產生click事件,若滑鼠的指標在連結上移動,就產生mouseover事件等等。在JavaScript中,事件往往與事件處理程式配套使用。

而對事件的處理,W3C的方法是用addEventListener()函式,它有三個引數:事件,引發的函式,是否使用事件捕捉。為了安全性,建議將第三個引數始終設定為false

傳統的方法就是定義元素的on…事件,它就是W3C的方法中的事件引數前加一個“on”。而IE的事件模型使用attachEvent和dettachEvent對事件進行繫結和刪除。JavaScript中事件還分捕獲和冒泡兩個階段,但是傳統繫結只支援冒泡事件。 

變數

1、常用型別

object:物件

array:陣列

number:數

boolean:布林值,只有true和false兩個值,是所有型別中佔用記憶體最少的

nll:一個空值,唯一的值是null

undefined:沒有定義和賦值的變數

2、命名形式

一般形式是:

var <變數名錶>;

其中,var是javascript的保留字,表明接下來是變數說明,變數名錶是使用者自定義識別符號,變數之間用逗號分開。和C++等程式不同,在javascript中,變數說明不需要給出變數的資料型別。此外,變數也可以不說明而直接使用。

3、作用域

變數的作用域由宣告變數的位置決定,決定哪些指令碼命令可訪問該變數。在函式外部宣告的變數稱為全域性變數,其值能被所在HTML檔案中的任何指令碼命令訪問和修改。在函式內部宣告的變數稱為區域性變數。只有當函式被執行時,變數被分配臨時空間,函式結束後,變數所佔據的空間被釋放。區域性變數只能被函式內部的語句訪問,只對該函式是可見的,而在函式外部是不可見的。

運算子

javascript提供了豐富的運算功能,包括算術運算、關係運算、邏輯運算和連線運算。

1、算術運算子

javascript中的算術運算子有單目運算子和雙目運算子。雙目運算子包括:+(加)、-(減)、*(乘)、/(除)、%(取模)、|(按位或)、&(按位與)、<<(左移)、>>(右移)等。單目運算子有:-(取反)、~(取補)、++(遞加1)--(遞減1)等。

2、關係運算子

關係運算子又稱比較運算,運算子包括:<(小於)、<=(小於等於)、>(大於)、>=(大於等於)、=(等於)和!=(不等於)。

關係運算的運算結果為布林值,如果條件成立,則結果為true,否則為false。

3、.邏輯運算子

邏輯運算子有:&&(邏輯與)、||(邏輯或)、!(取反,邏輯非)、^(邏輯異或)。

4、字串連線運算子

連線運算用於字串操作,運算子為+(用於強制連線),將兩個或多個字串連結為一個字串。

5、三目操作符

三目操作符“?:”格式為:

運算元?表示式1:表示式2

三目操作符“?:”構成的表示式,其邏輯功能為:若運算元的結果為true,則表述式的結果為表示式1,否則為表示式2。例如max=(a>b)?a:b;該語句的功能就是將a,b中的較大的數賦給max。 

相關規則

在JavaScript中,“==="是全同運算子,只有當值相等,資料型別也相等時才成立。

等同運算子“=="的比較規則:

當兩個運算數的型別不同時:將他們轉換成相同的型別。

1)一個數字與一個字串,字串轉換成數字之後,進行比較。

2)true轉換為1、false轉換為0,進行比較。

3)一個物件、陣列、函式與 一個數字或字串,物件、陣列、函式轉換為原始型別的值,然後進行比較。(先使用valueOf,如果不行就使用toString)

4)其他型別的組合不相等。

想兩個運算數型別相同,或轉換成相同型別後:

1)2個字串:同一位置上的字元相等,2個字串就相同。

2)2個數字:2個數字相同,就相同。如果一個是NaN,或兩個都是NaN,則不相同。

3)2個都是true,或者2個都是false,則相同。

4)2個引用的是同一個物件、函式、陣列,則他們相等,如果引用的不是同一個物件、函式、陣列,則不相同,即使這2個物件、函式、陣列可以轉換成完全相等的原始值。

5)2個null,或者2個都是未定義的,那麼他們相等。

而“===”是全同運算子,全同運算子遵循等同運算子的比較規則,但是它不對運算數進行型別轉換,當兩個運算數的型別不同時,返回false;只有當兩個運算數的型別相同的時候,才遵循等同運算子的比較規則進行比較。

例如:null==undefined 會返回真, 但是null===undefined 就會返回假!

表示式

表示式是指將常量、變數、函式、運算子和括號連線而成的式子。根據運算結果的不同,表示式可分為算術表示式、字元表示式、和邏輯表示式。

指令碼語言

不同於伺服器端指令碼語言,例如PHP與ASP,JavaScript是客戶端指令碼語言,也就是說JavaScript是在使用者的瀏覽器上執行,不需要伺服器的支援而可以獨立執行。所以在早期程式設計師比較青睞於JavaScript以減少對伺服器的負擔,而與此同時也帶來另一個問題:安全性。而隨著伺服器的強壯,雖然程式設計師更喜歡執行於服務端的指令碼以保證安全,但JavaScript仍然以其跨平臺、容易上手等優勢大行其道。

JavaScript是一種指令碼語言,其原始碼在發往客戶端執行之前不需經過編譯,而是將文字格式的字元程式碼傳送給瀏覽器由瀏覽器解釋執行。解釋語言的弱點是安全性較差,而且在JavaScript中,如果一條執行不了,那麼下面的語言也無法執行。而且由於每次重新載入都會重新解譯,載入後,有些程式碼會延遲至執行時才解譯,甚至會多次解譯,所以速度較慢。

與其相對應的是編譯語言,例如Java。Java的原始碼在傳遞到客戶端執行之前,必須經過編譯,因而客戶端上必須具有相應平臺上的模擬器或直譯器,它可以通過編譯器或直譯器實現獨立於某個特定的平臺編譯程式碼的束縛。但是它必須在伺服器端進行編譯,這樣就拖延了時間。但因為已經封裝,所以能保證安全性。

Javascript庫

庫,指得是可以方便應用到現有開發體系中的、現成的程式碼資源。庫不僅為大部分日常的DOM指令碼程式設計工作提供了快捷的解決方案,而且也提供了許多獨特的工具。雖然庫使用起來很方便,但它們也並非能解決你所有的問題。在使用庫之前,一定要保證真正理解javascript的DOM原理。

這些庫一般是一個(或多個)js(Javascript的縮寫)檔案,只要把他們匯入你的網頁就能使用了。

常用的庫有:

jQuery:javascript庫中的新成員,提供css和xpath選擇符查詢元素、ajax、動畫效果等

JSer: 國人開發的一款全功能的開源指令碼框架. 藉助JSer,可以便捷的操作DOM、CSS樣式訪問、屬性讀寫、事件繫結、行為切換、動態載入、資料快取、URL與AJAX等眾多功能。

dojo:一個巨大的庫,包括的東西很多,dijit和dojox是dojo的擴充套件,幾乎你想要的各種javascript程式都包括了。

prototype:一個非常流行的庫,使用了原型鏈向javascript中新增了很多不錯的函式

YUI:(YahooYUI庫)yahoo!使用者介面,非常實用,提供各種解決方案。

ExtJs:元件非常豐富,皮膚也很漂亮,動畫效果也豐富。

 3.特點

 

JavaScript指令碼語言具有以下特點:

 

(1)指令碼語言。JavaScript是一種解釋型的指令碼語言,C、C++等語言先編譯後執行,而JavaScript是在程式的執行過程中逐行進行解釋。

 

(2)基於物件。JavaScript是一種基於物件的指令碼語言,它不僅可以建立物件,也能使用現有的物件。

 

(3)簡單。JavaScript語言中採用的是弱型別的變數型別,對使用的資料型別未做出嚴格的要求,是基於Java基本語句和控制的指令碼語言,其設計簡單緊湊。

 

(4)動態性。JavaScript是一種採用事件驅動的指令碼語言,它不需要經過Web伺服器就可以對使用者的輸入做出響應。在訪問一個網頁時,滑鼠在網頁中進行滑鼠點選或上下移、視窗移動等操作JavaScript都可直接對這些事件給出相應的響應。

 

(5)跨平臺性。JavaScript指令碼語言不依賴於作業系統,僅需要瀏覽器的支援。因此一個JavaScript指令碼在編寫後可以帶到任意機器上使用,前提上機器上的瀏覽器支 持JavaScript指令碼語言,目前JavaScript已被大多數的瀏覽器所支援。

 

不同於伺服器端指令碼語言,例如PHP與ASP,JavaScript主要被作為客戶端指令碼語言在使用者的瀏覽器上執行,不需要伺服器的支援。所以在早期程式設計師比較青睞於JavaScript以減少對伺服器的負擔,而與此同時也帶來另一個問題:安全性。

 

而隨著伺服器的強壯,雖然程式設計師更喜歡執行於服務端的指令碼以保證安全,但JavaScript仍然以其跨平臺、容易上手等優勢大行其道。同時,有些特殊功能(如AJAX)必須依賴Javascript在客戶端進行支援。隨著引擎如V8和框架如Node.js的發展,及其事件驅動及非同步IO等特性,JavaScript逐漸被用來編寫伺服器端程式。
4.DOM

D:document, 當建立了一個網頁並把它載入到WEB瀏覽器中時,DOM就在幕後把編寫的網頁文件轉換成一個文件物件

O:object,使用者自定義物件、內建物件、宿主物件。

M:model,模型,事物的表現形式。DOM代表著載入到瀏覽器視窗的當前網頁。瀏覽器提供了網頁的模型,我們通過JS去讀取。DOM把一份文件表示為一棵樹。

 

節點:

元素節點:標籤的名字就是元素的名字。

文字節點:元素包含的文字。在XHTML文件裡,文字節點總是被包含在元素節點的內部。

屬性節點:用來對元素做出更具體的描述。

獲取DOM元素:

  getElementById(id): document物件特有的方法。id應該放在單引號或雙引號裡。只有一個引數,返回一個物件,物件對應document物件裡唯一的物件。

  getElementByTagName(): 只有一個引數,返回一個物件陣列。即使在整個文件裡這個標籤值有一個元素,也返回一個長度為1的陣列。允許萬用字元作為引數(“*”)。

  getElementByClassName: 只接受一個引數,返回一個具有相同類名的元素的陣列。(“classname1 classname2”),只一個引數,但允許指定多個類名,在一個引數裡用空格隔開。

獲取和設定元素屬性:

  getAttribute(): Object.getAttribute(attribute); 通過元素節點呼叫;目標物件沒有目標屬性,返回null;

  setAttribute():Object.setAttribute(attribute, value);

HTML DOM 模型被構造為物件的樹。

HTML DOM 樹

DOM HTML 樹

通過可程式設計的物件模型,JavaScript 獲得了足夠的能力來建立動態的 HTML。

  • JavaScript 能夠改變頁面中的所有 HTML 元素
  • JavaScript 能夠改變頁面中的所有 HTML 屬性
  • JavaScript 能夠改變頁面中的所有 CSS 樣式
  • JavaScript 能夠對頁面中的所有事件做出反應

5.Java Script 和 Java的區別

JavaScript 與 Java 沒有任何關係,JavaScript 不是 Java 的指令碼語言,也不是以 Java 為基礎!

JavaScript 和 Java 是兩個公司開發的不同的程式語言:

  • Java 是 SUN 公司的產品,是物件導向的程式設計語言,適用於軟體開發、Web開發、Android開發和嵌入式開發。
  • JavaScript 是 Netscape 公司的產品,最初是為了擴充套件 Netscape 瀏覽器的功能。

注:JavaScript 最初被命名為“ LiveScript ”,隨著 Java 的流行,為了營銷,改名為“ Javascript ”,完全是一種商業手段,與語言本身的結合性沒有關係。

 

相關文章