久久久无码精品亚洲日韩软件,亚洲精品乱码久久久久久久久久久久,久久精品亚洲精品国产色婷

JavaScript入門以及詳細介紹（全面）

1.JavaScript的作用

現(xiàn)代網(wǎng)站的基本組成部分分為三部分——結(jié)構(gòu)層(HTML)，樣式層(CSS)和行為層(JavaScript)。這是目前市面上所有web開發(fā)者們必備的三個技能。

HTML結(jié)構(gòu)層負責(zé)渲染整個頁面的框架結(jié)構(gòu)，CSS樣式層負責(zé)處理頁面上結(jié)構(gòu)的基礎(chǔ)樣式，而JavaScript行為層則可以將結(jié)構(gòu)樣式統(tǒng)一起來，執(zhí)行一些用戶和瀏覽器交互的行為。

只有HTML的頁面很可愛，但并不美。有了CSS之后，頁面變得美麗了，但無法完成瀏覽器和用戶的實時交互，對于一個網(wǎng)頁而言，沒有人機交互就相當(dāng)于丟了靈魂!最后，當(dāng)JavaScript加入進來之后，上訴的所有功能都將迎刃而解，JavaScript可以輕易的實現(xiàn)人機交互，這就意味著兩個字——起飛!

那么JavaScript究竟是一門什么樣的語言，有哪些方面的優(yōu)勢，下面我們一起了解一下。

JavaScript(簡稱“JS”) 是一種具有函數(shù)優(yōu)先的輕量級，解釋型或即時編譯型的高級編程語言，JavaScript是當(dāng)前世界上最流行的編程語言，被廣泛應(yīng)用于HTML和web頁面開發(fā)項目,及pc端，筆記本，平板，手機等設(shè)備的項目開發(fā)。

2.JavaScript的歷史

JavaScript是1995 年由NestScape(網(wǎng)景)公司的程序員布蘭登.艾奇開發(fā)完成，共耗時10天。在這個過程中，艾奇參考了java､ self､ swift､c等語言，使之看起來和當(dāng)時最熱門的語言Java極其相似。并將其命名為LiveScript｡后由于當(dāng)時Java非常火，網(wǎng)景公司和sun公司(Java語言的開發(fā)公司)達成合作，LiveScript更名為JavaScript，蹭了一波熱流｡

后JavaScript由于其高效的處理方式，受到市場的廣泛歡迎。微軟為了能制衡網(wǎng)景公司，推出了JavaScript的替代語言一JScript｡在后來的幾年時間里，JavaScript和JScript并行于市場，這使得web端項目開發(fā)成本變高，最終，1997年，由網(wǎng)景、sun､微軟等公司組成的ECMA(歐洲計算機廠商聯(lián)盟)共同協(xié)商，推出了JavaScript的第一個標準一―ECMA-262｡現(xiàn)在的主流瀏覽器就是從這一年開始有標準可以遵循，在這之后，IE由于自身產(chǎn)品占據(jù)半數(shù)以上用戶(系統(tǒng)自帶服務(wù)器)，一直未加入ECMA標準，知道后來用戶數(shù)量不斷流失后，在IE10才開始真正意義上加入ECMA標準，因此，我們現(xiàn)在做前端項目的時候，依然不得不需要經(jīng)常處理一些很麻煩的兼容問題。

3.JavaScript版本

ECMAScript1.0：JavaScript于1995年發(fā)明，于1997年發(fā)布成為了ECMA標準，發(fā)布第一版;

ECMAScript2.0：1998年發(fā)布，只改變了編輯方式;

ECMAScript3.0：1999年發(fā)布，只添加了正則表達式與try/catch;

ECMAScript4.0：未發(fā)布4.0

ECMAScript5.1：2009年發(fā)布5.0版本，2011年發(fā)布5.1標準，一直沿用至今，我們現(xiàn)在學(xué)習(xí)的JavaScript就是5.1版本，簡稱ES5。

ECMAScript6.0：2016年發(fā)布，新增了很多新內(nèi)容，應(yīng)用比較廣泛，簡稱ES6。自此后每一年發(fā)布一個新的版本，都會添加一些新的內(nèi)容，因此我們需要隨時關(guān)注新動態(tài)，學(xué)習(xí)新的內(nèi)容。

4.JavaScript的定義

JavaScript：JavaScript是一門基于對象的，由事件驅(qū)動的，解釋性腳本語言。

這意味著：

l 在JavaScript中存在很多預(yù)制對象和方法，這些對象和它們的方法將使開發(fā)者能夠很輕易的實現(xiàn)一些基礎(chǔ)效果

l 開發(fā)者將可以更輕松的通過事件的方式，實現(xiàn)用戶和瀏覽器的交互效果，這正是整個前端網(wǎng)頁的靈魂所在。

l 相對比jsp的頁面處理方式，JavaScript可以直接由瀏覽器解析，這意味著頁面的渲染和加載將更高效，更快捷

5.JavaScript的特性

JavaScript是一門基于對象的，由事件驅(qū)動的，解釋性腳本語言。

JavaScript作為一門高級語言，具備如下特性：

l 腳本語言：JavaScript是一門解釋性腳本語言。因此在代碼的實際執(zhí)行過程中，JavaScript可以由瀏覽器逐行解析執(zhí)行，而非像很多后臺編程語言那樣，需要先編譯一遍，之后才能將編譯出來的副本呈現(xiàn)在瀏覽器上。這在很大程度上，提升了網(wǎng)頁打開速度，進而提升了用戶體驗。這在前端開發(fā)領(lǐng)域是相當(dāng)重要的事情。

l 基于對象：JavaScript是一門基于對象的語言。因此在開發(fā)過程中，開發(fā)者不僅可以創(chuàng)建對象，更可以直接使用大量內(nèi)置對象方法來實現(xiàn)基礎(chǔ)效果。這在實際開發(fā)中將大大降低用戶的開發(fā)復(fù)雜度，在一些必要的操作上，JavaScript都給用戶提供了相對的對象和方法，例如時間對象Date(專門用來獲取和操作時間)，數(shù)組對象(用來操作數(shù)組)，數(shù)學(xué)對象Math(用來解決數(shù)學(xué)相關(guān)問題)。

l 簡單性：JavaScript是一門弱類型語言，在數(shù)據(jù)類型方面并未做出嚴格限制。這意味著用戶可以更簡單便捷的操作JavaScript中的數(shù)據(jù)和流程操制語句。而不像Java中那樣，將每一種數(shù)據(jù)都嚴格的進行分類，單單一個數(shù)字類型就要應(yīng)分為兩種 Int(整型)和Float(浮點型)

l 動態(tài)性：JavaScript是一門由事件驅(qū)動的語言，用戶和瀏覽器的一切交互都可以直接由瀏覽器及頁面完成而不再需要使用后臺代碼邏輯。這在實際代碼的執(zhí)行上，將會大大降低瀏覽器的加載時間，因為省去了代碼編譯的時間，瀏覽器逐行解析逐行執(zhí)行，web項目的用戶體驗會更好。

l 跨平臺性：JavaScript編寫的腳本代碼是跨多設(shè)備平臺的。該腳本代碼只需要瀏覽器支持，因此，在任何設(shè)備及平臺上，只要下載安裝了瀏覽器，就都可以運行JavaScript代碼。跨平臺的特性使得一套JavaScript代碼可以在各種設(shè)備上正常運行，大大降低了開發(fā)者的工作量，提高了工作效率，也在很大程度上節(jié)省了項目成本，這也是JavaScript受歡迎的重要因素。相對比PHP和asp等服務(wù)端腳本語言，JavaScript以其自身可以運行在web端的優(yōu)勢得以大行其道。雖然安全性略有欠缺，但運行效率上的優(yōu)勢和Ajax交互功能的加持下，JavaScript依舊有大批忠實用戶。

6. JavaScript組成部分

l ECMAScript：描述了該語言的語法和基本對象。和所有的腳本語言一樣，JavaScript也是從基本的變量、流程控制語句、函數(shù)出發(fā)，不過JavaScript內(nèi)置了很多WEBAPI接口，定義了很多對象，里面的方法可以直接使用，如果Math、Date、Number、String、Boolean、null、undefined、Function、Array、RegExp、Error等

l DOM：Document Object Model 文檔對象模型，針對于HTML文檔中標簽的獲取、創(chuàng)建、添加、刪除、替換等操作。

l BOM：Browser Object Model 瀏覽器對象模型，針對于瀏覽器窗口的操作，元素在文檔中的位置等。

7.JavaScript代碼引入方式

在JavaScript中，代碼的語法邏輯很簡單，下圖中的內(nèi)容給我們呈現(xiàn)了一個小例子。

>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Documenttitle>

head>

<body>

    <script>

        alert('葵花寶典精講及沖刺事件演練');

    script>

body>

html>

這段代碼的功能是在頁面上彈窗輸出“葵花寶典精講及沖刺事件演練”字樣

這只是一段很簡單的JavaScript代碼，功能也比較簡略。需要注意到的是JavaScript語言由于是一門腳本語言，因此無法直接自行運行，而需要引入HTML代碼中，和HTML代碼一同進行執(zhí)行。關(guān)于引入的問題，我們共有三種引入方法——行內(nèi)引入、內(nèi)部引入和外部引入。上述代碼就是內(nèi)部引入的效果，下面我們分別演示一下三種引入方式

1.行內(nèi)引入

即類似于CSS行內(nèi)樣式那樣，將JavaScript代碼寫入到HTML標簽中效果如下：

>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Documenttitle>

head>

<body>

    <div onclick="alert('我愛你，塞北的雪')">div>

body>

html>

上述代碼效果是當(dāng)點擊div的時候，立刻彈窗輸出一段文本為“我愛你，塞北的雪”。但我們實際上在開發(fā)中并不推薦使用這種引入方式，因為和CSS一樣，行內(nèi)引入的JavaScript代碼也會導(dǎo)致一個很尷尬的問題——結(jié)構(gòu)層代碼和行為層代碼不能完全分離。這種情況在后續(xù)維護和二次開發(fā)的時候?qū)䦷砗艽蟮穆闊虼宋覀儗嶋H上在開發(fā)中并不推薦行內(nèi)引入的JavaScript這種寫法。

2.內(nèi)部引入

JavaScript的內(nèi)部引入也和CSS的內(nèi)部引入頗為類似，只不過并未使用style標簽，而是使用了script標簽，具體效果如下：

>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Documenttitle>

head>

<body>

    <script>

        alert('啊~~~五環(huán)');

    script>

body>

html>

上述代碼執(zhí)行結(jié)果為彈窗輸出“啊~~~五環(huán)”字樣。值得注意的是，這種引入方式編寫的JavaScript代碼需要寫在script標簽中，就像內(nèi)部引入的CSS一樣，需要將代碼寫在style標簽中。因此，同樣的，內(nèi)部引入的JavaScript代碼也可以在HTML標簽中寫入任意多個script標簽，從而引入任意多段JavaScript代碼。當(dāng)然，這些JavaScript代碼也可以寫在HTML中的任意位置，但他們依然遵循HTML代碼的執(zhí)行順序(即從上到下的執(zhí)行順序)。

相對比行內(nèi)引入的JavaScript，內(nèi)部引入的js代碼具有更高的可維護性，但依舊不是一個好的解決方式，因為在實際開發(fā)中，我們依然需要和HTML頁面的內(nèi)容進行一一對應(yīng)，不能單獨將JavaScript代碼作為文件存放，因此，內(nèi)部引入很顯然也不是一個很好的引入方式

3. 外部引入

JavaScript的外部引入也十分類似于CSS的外部引入，不同的是，CSS使用的是link標簽的href屬性，而JavaScript使用的是script的src屬性：

alert('春風(fēng)得意馬蹄疾，一日看盡長安花');

如上圖所示，當(dāng)前的文件是一個名為script.js的JavaScript文件，這一文件的內(nèi)容為彈窗輸出“春風(fēng)得意馬蹄疾，一日看盡長安花”，但JavaScript文件作為腳本文件，并不能自行執(zhí)行。因此我們需要將寫好的JavaScript文件引入到HTML文件中來運行，效果如下：

>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Documenttitle>

head>

<body>

    <script src="./script.js">script>

body>

html>

在script標簽的src屬性中寫入js文件的相對路徑，之后即可將js文件引入到我們的html中進行執(zhí)行。

這篇關(guān)于“JavaScript入門以及詳細介紹（全面）”的文章已幫助人，希望也能幫到你! 聲明：本站點發(fā)布內(nèi)容未經(jīng)許可不得轉(zhuǎn)載，如需轉(zhuǎn)載請聯(lián)系我們。
>>本文地址：

文章具體信息

文章分類：大咖分享 >
文章來源：Web前端培訓(xùn)問答
發(fā)布時間：2020-12-29 10:24:11
閱讀需要時間：本文字數(shù)3126，推薦閱讀時間5分鐘

web熱點文章排行

上一篇第一頁

下一篇 Node詳細安裝過程以及使用方法（詳細步驟圖）

實戰(zhàn)web培訓(xùn)機構(gòu)

JavaScript入門以及詳細介紹（全面）

JavaScript入門以及詳細介紹（全面）

文章具體信息

web熱點文章排行

關(guān)于“JavaScript入門以及詳細介紹（全面）”文章推薦

其它可能感興趣文章推薦