跳動在網頁之間的精靈——JavaScript
今天開始js的內容整理，跳動在網頁裏的精靈就是它了。
1、簡介
一、什麼是Javascript
JavaScript 是一種具備面向對象能力的、解釋型的程序設計語言。更具體一點，它是基於對象和事件驅動並具備相對安全性的客戶端腳本語言。它的主要目的是，驗證發往服務器端的數據、增長 Web 互動、增強用戶體驗度等。javascript
二、JavaScript發展史
大概在1992年,一家稱做Nombas的公司開始開發一種叫作C– –(C-minus-minus,簡稱Cmm)的嵌入式腳本語言。保持與C（和C++）的類似性，以便開發人員能很快學會。Nombas最終把Cmm的名字改爲了ScriptEase，而這種嵌入式腳本的理念也成爲因特網的一塊重要的基石。css
1995年，Netscape(網景)公司的布蘭登與Sun 公司聯手開發一個稱LiveScript 的腳本語言。爲了營銷便利，以後改名爲 JavaScript(目的是在 Java 這課大樹下好乘涼)。一個完整的JavaScript實現是由如下3個不一樣部分組成的。html
ECMAScript定義的只是這門語言的基礎，與Web瀏覽器沒有依賴關係，而在基礎語法上能夠構建更完善的腳本語言。JavaScript的運行須要必定的環境，脫離了環境JavaScript代碼是不能運行的，JavaScript只可以寄生在某個具體的環境中才可以工做。JavaScript運行環境通常都由宿主環境和執行期環境共同構成，其中宿主環境是由外殼程序生成的，如Web瀏覽器就是一個外殼程序，它提供了 一個可控制瀏覽器窗口的宿主環境。執行期環境則由嵌入到外殼程序中的JavaScript引擎（或稱爲JavaScript解釋器）生成，在這個環境中 JavaScript可以生成內置靜態對象，初始化執行環境等。java
Web瀏覽器自定義的DOM組件，以面向對象方式描述的文檔模型。DOM定義了表示和修改文檔所需的對象，這些對象的行爲和屬性以及這些對象之間的關係。DOM對象，是咱們用傳統的方法(javascript)得到的對象。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。chrome
前面的DOM是爲了操做瀏覽器中的文檔，而爲了控制瀏覽器的行爲和操做(BOM)，瀏覽器還提供了BOM（瀏覽器對象模型）。瀏覽器
簡單的說就是下面這種結構安全
ECMAScript(基礎語法)
JavaScript的核心語法ECMAScript描述了該語言的語法和基本對象bash
BOM(瀏覽器對象模型)
瀏覽器對象模型（BOM）—— 描述了與瀏覽器進行交互的方法和接口服務器
DOM(文檔對象模型)
文檔對象模型（DOM）—— 描述了處理網頁內容的方法和接口函數
三、開發工具
瀏覽器: chrome或火狐
Hbuilder或Eclipse等等
進入「控制檯」console：瀏覽器F12
控制檯的做用
console對象表明瀏覽器的JavaScript控制檯，用來運行JavaScript命令，經常用來顯示網頁運行時候的錯誤信息。Elements用來調試網頁的html和css代碼。
2、語法格式
一、註釋
能夠將註釋插入 JS代碼中，這樣能夠提升其可讀性，使代碼更易被人理解。瀏覽器會忽略註釋，也不會顯示它們。
|
1
2
3
4
5
6
7
|
// 這裏的內容就是註釋
/* 這裏的內容就是註釋 */
/*
也能夠這樣多行註釋
*/
|
二、行內式
行內式將JS定義在具體html元素中。以行內式寫的JS耦合度高，這種寫法會使得頁面很是雜亂無章，真正開發中其實是使用嵌入式或引入外部JS文件的方式。
|
1
2
|
<!-- 行內式 實現點擊事件，點擊後加載一個警告框 -->
<button onclick=
"alert('you clicked hered!!!')"
>click here</button>
|
三、嵌入式
嵌入式經過在html頁面內容開闢一段屬於JS的代碼區域，一般作法爲在<body>標籤中嵌套<script>標籤。
|
1
2
3
4
5
|
<!-- 頁面加載後執行一個警告框 -->
<script type=
"text/javascript"
charset=
"utf-8"
>
// 頁面加載後執行一個警告框
alert(
'this is inner js code'
);
</script>
|
四、引入外部文件
在實際開發當中，不少時候都使用引入外部文件，這種形式可使html頁面更加清晰。
|
1
2
3
4
5
6
7
8
|
hello.js
// 頁面加載後執行一個警告框
alert(
'this is a outter js document'
);
index.html
<!-- 引入外部js文件 -->
<script src=
"js/hello.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
|
注意：
咱們能夠將JavaScript代碼放在html文件中任何位置，可是咱們通常放在網頁的head或者body部分。因爲頁面的加載方式是從上往下依次加載的，而這個對咱們放置的js代碼運行是有影響的。放在<head>部分，最經常使用的方式是在頁面中head部分放置<script>元素，瀏覽器解析head部分就會執行這個代碼，而後才解析頁面的其他部分。放在<body>部分，JavaScript代碼在網頁讀取到該語句的時候就會執行。
在已經有了寫好的js代碼，直接使用是很是簡單的，可是咱們須要學習的是JS的寫法，使用JS的基本語法，結合BOM和DOM兩種接口來操做瀏覽器中的元素，使得咱們的頁面可以具備動態的效果。
3、JavaScript基礎語法
一、語句
JavaScript程序的執行單位爲行（line），也就是一行一行地執行。通常狀況下，每一行就是一個語句。
語句（statement）是爲了完成某種任務而進行的操做，語句以分號結尾，一個分號即表示一個語句結束。多個語句能夠寫在一行內（不建議這麼寫代碼），可是一行寫多條語句時，語句必須以分號結尾。
表達式不須要分號結尾。一旦在表達式後面添加分號，則JavaScript引擎就將表達式視爲語句，這樣會產生一些沒有任何意義的語句。
|
1
2
3
4
|
// 一條普通的語句 支持一行寫多條語句 ';'分隔
var num =
2
*
3
; var str =
'我是字符串'
;
alert(num);
alert(str);
|
二、關鍵字
關鍵字也稱保留字，是被JavaScript徵用來有特殊含義的單詞
三、標識符
標識符就是一個名字，用來給變量和函數進行命名，有特定規則和規範
規則：由Unicode字母、_、$、數字、中文組成
a. 不能以數字開頭
b. 不能是關鍵字和保留字
c. 嚴格區分大小寫
規範：
見名知意
駝峯命名或下劃線規則
var a = 1;
var abc = "1";
var _test = "test";
var $name = "張三";
var age1 = 18;
var userPwd = "a1b2c3";
var USER_AGE = 20;複製代碼
四、變量
變量即一個帶名字的用來存儲數據的內存空間，數據能夠存儲到變量中，也能夠從變量中取出數據。萬能的盒子。
變量的聲明
JavaScript是一種弱類型語言，在聲明變量時不須要指明數據類型，直接用var修飾符進行聲明。
變量聲明和賦值：
|
1
2
3
4
5
|
// 先聲明再賦值
var a;
a =
10
;
// 聲明同時賦值
var b =
20
;
|
變量的注意點
a. 若只聲明而沒有賦值，則該變量的值爲undefined。
|
1
2
|
var box;
console.log(box);
// 在瀏覽器F12的控制檯打印
|
b. 變量要有定義才能使用，若變量未聲明就使用，JavaScript會報錯，告訴你變量未定義
|
1
2
3
|
var max =
100
;
console.log(max);
console.log(min);
// 未聲明就使用，報錯變量未定義min is not defined
|
c. 能夠在同一條var命令中聲明多個變量。
|
1
2
3
4
|
// 聲明瞭aa, bb沒有賦值 聲明瞭cc同時賦值10
var aa, bb, cc =
10
;
var a =
10
, b =
10
, c=
10
;
console.log(aa, bb, cc);
|
d. 若使用var從新聲明一個已經存在的變量，是無效的。
|
1
2
3
|
var box =
10
var box;
console.log(box);
|
e. 若使用var從新聲明一個已經存在的變量且賦值，則會覆蓋掉前面的值
|
1
2
3
|
var box =
10
var box =
25
console.log(box);
|
f. JavaScript是一種動態類型、弱類型語言，也就是說，變量的類型沒有限制，能夠賦予各類類型的值。
|
1
2
|
var box =
'hello world'
console.log(box);
|
先就到這裏，本文首發於公衆號 嗨碼歌，關於持續關注。
更多技術文章學習視頻教程獲取，請來 上海尚學堂
- 1. 跳動在網頁之間的精靈——JavaScript
- 2. 陷於才華，跳動在網頁的精靈--JavaScript
- 3. 源於初見，跳動在網頁上的精靈----JavaScript
- 4. JavaScript實現按鍵精靈
- 5. JavaScript網頁互動
- 6. vue和html頁面之間的跳轉
- 7. 動態網頁和靜態網頁之間的區別
- 8. 動態網頁和靜態網頁之間的區別？
- 9. css之精靈圖
- 10. javascript跳轉頁面
- 更多相關文章...
- • SVG 在 HTML 頁面 - SVG 教程
- • Web 網頁 驗證 - 網站建設指南
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
-
每一个你不满意的现在，都有一个你没有努力的曾经。