JavaScript基礎介紹與實例
一、什么是JavaScript
JavaScript是一種具有面向?qū)ο竽芰Φ?、解釋性的程序設計語言。更具體一點,它是基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言。因為他不需要在一個語言環(huán)境下運行,而只需要支持它的瀏覽器即可。它的主要目的是:驗證發(fā)往服務器端的數(shù)據(jù)的合法性、增加web互動、加強用戶體驗度等。
- 基于對象:JavaScript中內(nèi)置了很多對象,直接調(diào)用對象的屬性和方法進行操作,簡化編程。
- 事件驅(qū)動:程序開始運行到結束,可以一直偵聽事件。
- 解釋性語言:不需要編譯成計算機專門去讀的文件,調(diào)用哪塊解釋哪塊,并非一次性編譯。例如:c#就是編譯性語言,如果要運行C#語言編寫的程序,就必須先編譯成exe或者dll文件才能運行。而JavaScript不需要預先編譯
- 腳本語言:需要嵌入到別的語言之中,JS需要嵌入在HTML中,單獨存在沒有意義。
二、JavaScript和ECMAScript的關系
- ECMAScript是JavaScript的標準和基礎
三、JavaScript特點
1、松散性(弱類型)
JavaScript語言核心與C、C++、Java相似,比如條件判斷、循環(huán)、運算符等。但是,它卻是一種松散類型的語言,也就是說,它的變量不必具有一個明確的類型。(變量無需聲明也可以使用,一個變量賦值為數(shù)字類型,還可以在賦值為字符串等其它類型)
2、對象屬性
JavaScript中的對象把屬性名映射為任意的屬性值。它的這種方式很像哈希表或關聯(lián)數(shù)組,而不像C中的結構體或者C++、Java中的對象。
3、繼承機制
JavaScript中的面向?qū)ο罄^承機制是基于原型的(原型:最基礎的基類),和C++以及Java中的繼承大不相同(可以子類繼承父類)。
4、嚴格區(qū)分大小寫。
四、JavaScript組成部分
一個完整的JavaScript應該由下列三個不同的部分組成:
1、核心(ECMAScript)
- 主要定義了JavaScript的語言基礎部分,各個瀏覽器都嚴格遵守該規(guī)范,沒有兼容性問題,ECMAScript規(guī)范由ECMA制訂。組成部分:語法、類型、語句、關鍵字、保留字、操作符、對象等。
2、文檔對象模型(DOM)
- 文檔對象模型(Document object Model)主要定義了如何將HTML轉(zhuǎn)換成一顆符合DOM規(guī)范的樹,并且如何對這棵樹進行相應的操作。該規(guī)范由W3c定義,但是,部分瀏覽器沒有嚴格遵守該規(guī)范,寫代碼時需要考慮兼容性問題。
- HTML和XML的應用程序接口(API)。
- 把整個頁面規(guī)劃為層級式的節(jié)點結構。
3、瀏覽器對象模型(BOM)
- 瀏覽器對象模型(Browser Object Model)內(nèi)置了一些對象,用來操作窗口,這些對象包括window、screen、location、navigator、document、xmlhttprequet,雖然該部分沒有規(guī)范,但是,各個瀏覽器都支持這些對象。開發(fā)人員使用BOM可以控制瀏覽器顯示頁面以外的部分。而BOM真正與眾不同的地方(也是經(jīng)常會導致問題的地方),還是它作為JavaScript實現(xiàn)的一部分,至今仍沒有相關的標準。
可對瀏覽器窗口進行訪問和操作,包括:
- 彈出新的瀏覽器窗口。
- 移動、關閉瀏覽器窗口及調(diào)節(jié)瀏覽器窗口大小。
- 獲取用戶屏幕分辨率的屏幕對象。
- web瀏覽器詳細的定位對象。
五、使用JavaScript
<Script>標簽解析
<script>xxx</script>這組標簽,是用于在HTML頁面中插入JS的主要方法。它主要有以下幾個屬性:
- 1、charset:可選。表示通過src屬性指定的字符集。由于大多數(shù)瀏覽器忽略它,所以很少有人用它。
- 2、defer:可選。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。由于大多數(shù)瀏覽器不支持,故很少用。
- 3、language:已廢棄。原來用于代碼使用的腳本語言。由于大多數(shù)瀏覽器忽略它,所以不要用了。
- 4、src:可選。表示包含要執(zhí)行代碼的外部文件。
- 5、type:必需??梢钥醋魇莑anguage的替代品。表示代碼使用的腳本語言的內(nèi)容類型。范例:type="text/javascript"
<scripe>標簽示例:
<script type="text/javascript"> ?? alert('歡迎來到JavaScript世界!'); </script>
六、JavaScript使用方式:
1、事件定義式:在定義事件時直接寫入JavaScript腳本。
例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件定義式</title> </head> <body> <input type="button" value="點擊" onclick="alert('我被點擊了')" /> </body> </html>
效果:
2、直接嵌入式:在網(wǎng)頁中直接嵌入JavaScript。
例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>直接嵌入式</title> <script> function btnClick(){ alert("我是寫在head里面的JavaScript"); }; </script> </head> <body> <input type="button" value="點擊" onclick="btnClick()" /> <script> alert("我是寫在body里面的JavaScript"); </script> </body> </html>
效果:
注意:
- 使用直接嵌入式的時候,JavaScript腳本可以寫在<head>標簽里面,也可以寫在<body>標簽里面。
3、文件調(diào)用式:在網(wǎng)頁中調(diào)用獨立的JavaScript文件。把js代碼寫在單獨的一個js文件中,通過src屬性引入即可。它具有維護性高、可緩存(加載一次,無需再次加載)、方便未來擴展的特點。
例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文件調(diào)用式</title> <script src="../demo.js"></script> </head> <body> <input type="button" value="點擊" onclick="btnClick()" /> </body> </html>
注意:
- 1、使用外部樣式引入js,雖然沒有任何代碼了,但也不能使用單標簽:
<script type="text/javascript" src="demo.js"/> - 2、不能再里面添加任何代碼,添加的代碼執(zhí)行不到
<script type="text/javascript" src="demo.js">alert('我很可憐,因為執(zhí)行不到')</script>
到此這篇關于JavaScript基礎與實例的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript中的throttle和debounce淺析
這篇文章主要介紹了javascript中的throttle和debounce淺析,分別介紹了throttle和debounce的使用場景及具體案例,需要的朋友可以參考下2014-06-06Node.js生成HttpStatusCode輔助類發(fā)布到npm
本篇文章小編為大家介紹利用Node.js為Node.js生成HttpStatusCode輔助類并發(fā)布到npm,有需要的朋友可以參考一下2013-04-04javascript學習筆記(三) String 字符串類型介紹
javascript學習筆記之String 字符串類型介紹,這里介紹的是js字符串處理常用函數(shù)2012-06-06JavaScript展開操作符(Spread operator)詳解
在本篇文章里小編給大家整理的是關于JavaScript展開操作符(Spread operator)的詳細介紹以及用法,需要的讀者們參考下。2019-07-07Javascript基礎教程之數(shù)據(jù)類型 (數(shù)值 Number)
本文講述的是javascript中九種數(shù)據(jù)類型的第二種--數(shù)值(Number),使用非常簡單,這里推薦給小伙伴們。2015-01-01