當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

初学JavaWeb需要的前端js，JavaScript是什么样的？

發布時間：2023/12/2 javascript 44 豆豆

生活随笔收集整理的這篇文章主要介紹了初学JavaWeb需要的前端js，JavaScript是什么样的？小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- 一、JavaScript簡介
- 二、HelloWorld
- 三、JavaScript基本語法
- 四、DOM
- 五、JavaScript事件驅動
- 六、網頁制作完全手冊分享

關于HTML和css詳見：《JavaWeb中的HTML和css》

一、JavaScript簡介

1、起源
1995年，JavaScript由Netscape公司的Brendan Eich在網景導航者瀏覽器上首次設計實現而成。Netscape在最初將其腳本語言命名為LiveScript，因為Netscape與Sun合作，網景公司管理層希望它外觀看起來像Java，因此取名為JavaScript。

2、特性
①腳本語言
JavaScript是一種解釋型的腳本語言。不同于C、C++、Java等語言先編譯后執行, JavaScript不會產生編譯出來的字節碼文件，而是在程序的運行過程中對源文件逐行進行解釋。

②基于對象
JavaScript是一種基于對象的腳本語言，它不僅可以創建對象，也能使用現有的對象。但是面向對象的三大特性：『封裝』、『繼承』、『多態』中，JavaScript能夠實現封裝，可以模擬繼承，不支持多態，所以它不是一門面向對象的編程語言。

③弱類型
JavaScript中也有明確的數據類型，但是聲明一個變量后它可以接收任何類型的數據，并且會在程序執行過程中根據上下文自動轉換類型。

④事件驅動
JavaScript是一種采用事件驅動的腳本語言，它不需要經過Web服務器就可以對用戶的輸入做出響應。

⑤跨平臺性
JavaScript腳本語言不依賴于操作系統，僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫后可以帶到任意機器上使用，前提是機器上的瀏覽器支持JavaScript腳本語言。目前JavaScript已被大多數的瀏覽器所支持。

二、HelloWorld

1、功能

2、代碼

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>HelloWorld</title></head><body><button type="button" id="helloBtn">SayHello</button></body><script type="text/javascript">// document對象代表整個HTML文檔// document對象調用getElementById()方法表示根據id查找對應的元素對象var btnElement = document.getElementById("helloBtn");// 給按鈕元素對象綁定單擊響應函數btnElement.onclick = function(){// 彈出警告框alert("hello");};</script> </html>

3、顯示效果

三、JavaScript基本語法

1、JavaScript代碼嵌入方式
①HTML文檔內

a.JavaScript代碼要寫在script標簽內。
b.script標簽可以寫在文檔內的任意位置。
c.為了能夠方便查詢或操作HTML標簽（元素），script標簽可以寫在body標簽后面。如上的HelloWorld

②引入外部JavaScript文檔
在script標簽內通過src屬性指定外部xxx.js文件的路徑即可。注意：引用外部JavaScript文件的script標簽里面不能寫JavaScript代碼，要先引入，再使用。

<script src="/pro02-JavaScript/scripts/outter.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> // 調用外部JavaScript文件中聲明的方法showMessage(); </script>

2、聲明和使用變量
①JavaScript數據類型
基本數據類型

數值型：JavaScript不區分整數、小數字符串：JavaScript不區分字符、字符串；單引號、雙引號意思一樣。布爾型：true、false在JavaScript中，其他類型和布爾類型的自動轉換。true：非零的數值，非空字符串，非空對象false：零，空字符串，null，undefined

引用類型

所有new出來的對象用[]聲明的數組用{}聲明的對象

②變量
關鍵字：var
數據類型：JavaScript變量可以接收任意類型的數據
標識符：嚴格區分大小寫

變量使用規則：

如果使用了一個沒有聲明的變量，那么會在運行時報錯 Uncaught ReferenceError: b is not defined 如果聲明一個變量沒有初始化，那么這個變量的值就是undefined

3、函數
①內置函數
內置函數：系統已經聲明好了可以直接使用的函數。
[1]彈出警告框

alert("警告框內容");

[2]彈出確認框
用戶點擊『確定』返回true，點擊『取消』返回false。

var result = confirm("你確定要刪除嗎？"); if(result) {console.log("點了確定"); }else{console.log("點了取消"); }

[3]在控制臺打印日志

console.log("日志內容");

②聲明函數
寫法1：

function sum(a, b) {return a+b; }

寫法2：

var sum = function() {return a+b; };

寫法2可以這樣解讀：聲明一個函數，相當于創建了一個『函數對象』，將這個對象的『引用』賦值給變量total。最后加的分號不是給函數聲明加的，而是給整體的賦值語句加的分號。

③調用函數
JavaScript中函數本身就是一種對象，函數名就是這個『對象』的『引用』。而調用函數的格式是：函數引用()。

var result = sum(2, 3);

4、對象
JavaScript中沒有『類』的概念，對于系統內置的對象可以直接創建使用。

①使用new關鍵字創建對象

// 創建對象var student01 = new Object();// 給對象設置屬性和屬性值student01.stuName = "Lily";student01.stuAge = 22;student01.stuSubject = "Java";// 在控制臺輸出對象console.log(student01);

②使用{}創建對象

// 創建對象var obj02 = {"soldierName":"Tom","soldierAge":25,"soldierWeapon":"gun"};// 在控制臺輸出對象console.log(obj02);

③給對象設置函數屬性

// 創建對象 var obj01 = new Object();// 給對象設置屬性和屬性值 obj01.stuName = "tom"; obj01.stuAge = 20; obj01.stuSubject = "java";obj01.study = function() {console.log(this.stuName + " is studying"); };// 在控制臺輸出對象 console.log(obj01); // 調用函數 obj01.study();

或者

// 創建對象 var obj02 = {"soldierName":"john","soldierAge":35,"soldierWeapon":"gun","soldierShoot":function(){console.log(this.soldierName + " is using " + this.soldierWeapon);} };// 在控制臺輸出對象 console.log(obj02); // 調用函數 obj02.soldierShoot();

④this關鍵字
this關鍵字只有兩種情況：

在函數外面：this關鍵字指向window對象（代表當前瀏覽器窗口）在函數里面：this關鍵字指向調用函數的對象 // 直接打印this console.log(this);// 函數中的this // 1.聲明函數 function getName() {console.log(this.name); }// 2.創建對象 var obj01 = {"name":"tom","getName":getName }; var obj02 = {"name":"jerry","getName":getName };// 3.調用函數 obj01.getName(); obj02.getName();

5、數組
①使用new關鍵字創建數組

// 1.創建數組對象 var arr01 = new Array();// 2.壓入數據 arr01.push("apple"); arr01.push("orange"); arr01.push("banana"); arr01.push("grape");// 3.遍歷數組 for (var i = 0; i < arr01.length; i++) {console.log(arr01[i]); }// 4.數組元素反序 arr01.reverse(); for (var i = 0; i < arr01.length; i++) {console.log(arr01[i]); }// 5.數組元素拼接成字符串 var arrStr = arr01.join(","); console.log(arrStr);// 6.字符串拆分成數組 var arr02 = arrStr.split(","); for (var i = 0; i < arr02.length; i++) {console.log(arr02[i]); }// 7.彈出數組中最后一個元素 var ele = arr01.pop(); console.log(ele);

②使用[]創建數組

// 8.使用[]創建數組 var arr03 = ["cat","dog","tiger"]; console.log(arr03);

6、JSON
①JSON格式的用途
在開發中凡是涉及到『跨平臺數據傳輸』，JSON格式一定是首選。

②JSON格式的說明
JSON數據兩端要么是{}，要么是[]；{}定義JSON對象；[]定義JSON數組。
JSON對象的格式是：

{key:value,key:value,...,key:value}

JOSN數組的格式是：

[value,value,...,value]

key的類型固定是字符串。
value的類型可以是：基本數據類型或者引用類型（JSON對象或JSON數組）。

正因為JSON格式中value部分還可以繼續使用JSON對象或JSON數組，所以JSON格式是可以『多層嵌套』的，所以JSON格式不論多么復雜的數據類型都可以表達。

③JSON對象和JSON字符串互轉
[1]JSON對象轉JSON字符串

var jsonObj = {"stuName":"tom","stuAge":20}; var jsonStr = JSON.stringify(jsonObj);console.log(typeof jsonObj); // object console.log(typeof jsonStr); // string

[2]JSON字符串轉JSON對象

jsonObj = JSON.parse(jsonStr); console.log(jsonObj); // {stuName: "tom", stuAge: 20}

四、DOM

1、概念

①名詞解釋
DOM是Document Object Model的縮寫，意思是『文檔對象模型』——將HTML文檔抽象成模型，再封裝成對象方便用程序操作。

這是一種非常常用的編程思想：將現實世界的事物抽象成模型，這樣就非常容易使用對象來量化的描述現實事物，從而把生活中的問題轉化成一個程序問題，最終實現用應用軟件協助解決現實問題。而在這其中『模型』就是那個連通現實世界和代碼世界的橋梁。

②DOM樹
瀏覽器把HTML文檔從服務器上下載下來之后就開始按照『從上到下』的順序『讀取HTML標簽』。每一個標簽都會被封裝成一個『對象』。

而第一個讀取到的肯定是根標簽html，然后是它的子標簽head，再然后是head標簽里的子標簽……所以從html標簽開始，整個文檔中的所有標簽都會根據它們之間的『父子關系』被放到一個『樹形結構』的對象中。

這個包含了所有標簽對象的整個樹形結構對象就是JavaScript中的一個可以直接使用的內置對象：document。

例如，下面的標簽結構：

會被解析為：

2、具體概念

①各個組成部分的類型
整個文檔中的一切都可以看做Node。各個具體組成部分的具體類型可以看做Node類型的子類。

其實嚴格來說，JavaScript并不支持真正意義上的『繼承』，這里我們借用Java中的『繼承』概念，從邏輯上來幫助我們理解各個類型之間的關系。

②父子關系

③先輩后代關系

3、DOM操作
由于實際開發時基本上都是使用JavaScript的各種框架來操作，而框架中的操作方式和我們現在看到的原生操作完全不同，所以下面羅列的API僅供參考。

①在整個文檔范圍內查詢元素節點

②在具體元素節點范圍內查找子節點

③查找指定元素節點的父節點

④查找指定元素節點的兄弟節點

⑤屬性操作

⑥文本操作

⑦DOM增刪改操作

五、JavaScript事件驅動

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#eventArea {border: 1px solid black;width: 100px;height: 100px;}</style></head><body><div id="eventArea"></div><p id="showData"></p></body><script type="text/javascript">// 根據id找到div標簽對應的元素對象var divEle = document.getElementById("eventArea");// 根據id找到p標簽對應的元素對象var pEle = document.getElementById("showData");// 聲明事件響應函數function whenMouseMove(event){pEle.innerText = event.clientX + " " + event.clientY;}// 將事件響應函數賦值給對應的事件屬性 // onmousemove表示在鼠標移動的時候divEle.onmousemove = whenMouseMove;</script> </html>

六、網頁制作完全手冊分享

百度網盤鏈接：點擊下載網頁制作完全手冊
提取碼：0909

總結

以上是生活随笔為你收集整理的初学JavaWeb需要的前端js，JavaScript是什么样的？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：电影院「副业」进击：映前广告大降价、遍地
下一篇：点击事件为什么会失效_Spring事务原