JavaScript入門

源

javascript前身叫做livescript，sun公司推出java，netspace公司引進java的概念，重新設計livescript，并更名javascript。

發明者，布蘭登.艾克，表單驗證原先要經過服務器，服務器壓力大，等待時間長，js僅在客戶端就可完成。

是什么

是一種腳本語言，是一種輕量級的編程語言。

JavaScript可插入 HTML 頁面的編程代碼，由所有的瀏覽器執行，從服務端被下載到客戶端由瀏覽器執行。

作用

1、表單驗證

2、頁面特效

3、動態調整頁面

組成

1、核心語法（ECMAScript）

2、瀏覽器對象模型(BOM)

1) 是什么

Browser Object Model,瀏覽器對象模型：由一系列對象組成，是訪問、控制、修改瀏覽器屬性的方法.

2) 結構圖

BOM結構圖

3) 內容簡介

window

BOM使javascript有能力與瀏覽器進行溝通，這個溝通從window對象開始，所有的window對象的屬性和方法自動成為javascript的全局變量和全局函數。可直接使用。

history

包含用戶訪問過的URL

最初設計表示瀏覽歷史，出于隱私，不允許js訪問已經訪問過的實際URL。

仍保持back（），forwore（），go（）等方法。

location

包含當前頁面的URL信息，可重載當前頁面或裝入新頁面

document

一個比較特殊的對象，它既是瀏覽器對象模型BOM中的一個對象，同時表示文檔對象模型DOM中整個HTML文檔。

3、文檔對象模型(DOM)

1）是什么

文檔對象模型：由一系列對象組成，是訪問、控制、修改HTML文檔的標準方法。

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。

BOM是一個與語言無關，與平臺無關的標準接口規范。將HTML 文檔解析成樹結構。

2）結構圖

3）內容簡介

節點：

在DOM （文檔對象模型）中，每個部分都是節點：

文檔節點：文檔本身
元素節點：所有 HTML 元素
屬性節點：所有 HTML 屬性
文本節點：HTML 元素內的文本
注釋節點：注釋

element.appendChild() 向元素添加新的子節點，作為最后一個子節點。

element.removeChild() 從元素中移除子節點。

element.replaceChild() 替換元素中的子節點。

element.insertBefore() 在指定的已有的子節點之前插入新節點。

getElementById() 返回對擁有指定 id 的第一個對象的引用。

getElementsByName() 返回帶有指定名稱的對象集合。

getElementsByTagName() 返回帶有指定標簽名的對象集合。

創建方式

1、外部js文件

將JS代碼寫入后綴名為.JS的外部文件中，只寫腳本代碼，不用寫<SCRIPT>標簽。html頁面引入。

js文件：

alert("哈哈！“);

HTML引入：

適用于：代碼量較大。或者再多個頁面中共享

2、<script>標簽

function demo(a){

alert(a)

}

</script>

適用于:代碼較少，較少重復使用

3、HTML標簽內

適用于：特別簡短的JS 代碼

數據類型

數值number

整數或小數

實例

var x1=34.00; //使用小數點來寫

var x2=34; //不使用小數點來寫

數組array

實例

var cars=new Array();

cars[0]="Saab";

cars[1]="Volvo";

cars[2]="BMW";

var cars=new Array("Saab","Volvo","BMW");

var cars=["Saab","Volvo","BMW"];

布爾

true 或 false

實例

var x=true;

var y=false;

字符串string

字符串是存儲字符（比如 "Bill Gates"）的變量。

字符串可以是引號中的任意文本。您可以使用單引號或雙引號：

實例

var carname="Volvo XC60";

var carname='Volvo XC60';

對象object

對象由花括號分隔。

在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。

屬性由逗號分隔：

實例

var person={firstname:"John", lastname:"Doe", id:5566};

對象屬性有兩種尋址方式：

name=person.lastname;

name=person["lastname"];

undefined

保留字，已申明變量，沒有賦值。

null

定義空或不存在的引用。

不等與空字符串或 0

1、undefined：這個值表示變量不含有值。

可以通過將變量的值設置為 null 來清空變量。

2、判斷數據類型（typeof）

var height=180;

document.write("height的類型為："+typeof(height));

函數

作用

使程序結構清晰，封裝多條語句，代碼復用，便于維護。

結構

關鍵字聲明function，參數，函數體。

注意

1.函數定義時不必指定返回值。

2.任何函數任何時候可通過return語句實現返回值。

3.除return語句外，無任何聲明也能表示返回值

4.函數執行完return立即退出，return之后的語句永遠不會執行

5.一個函數可以多個return

6.return可以不帶返回值，會返回undefined

//1.函數定義時不必指定返回值。

function a(num1,num2){

alert(num1+num2);

}

a(1,2);

//2.任何函數任何時候可通過return語句實現返回值。

function b(num1,num2){

return num1+num2;

}

alert (b(1,3));

//3.除return語句外，無任何聲明也能表示返回值

function c(num1,num2){

return num1+num2;

}

var result=c(1,4);

alert(result);

//4.函數執行完return立即退出，return之后的語句永遠不會執行

function d(num1,num2){

return num1+num2;

//return后面的語句永遠不會執行

alert(num1+num2);

}

alert(d(1,5));

//5.一個函數可以多個return

function e(num1,num2){

if(num1>num2){

return num1-num2;

}

else{

return num2-num1;

}

alert(e(1,2));

alert(e(3,1));

//6.return可以不帶返回值，會返回undefined

function f(num1,num2){

return;

}

alert(f(1,6));

輸出

1、針對用戶的

alert()

<button onclick="alert('我是alert方式的彈框!')">alert</button>

alert

confirm()

<button onclick="confirm('我是confirm方式的彈框!')">confirm</button>

confirm

prompt()

兩個參數一個提示信息一個默認值

<button onclick="prompt('我是prompt方式的彈框1',6)">confirm</button>

prompt

2、針對HTML文檔元素

innerHTML

雙向功能：獲取對象的內容或向對象插入內容；

//獲取對象的內容

function gets(){

alert(document.getElementById("innerHtml").innerHTML);

}

//向對象插入內容

function puts() {

document.getElementById("innerHtml").innerHTML="i am not here";

}

</script>

<button onclick="gets()">innerHtmlGets</button>

<button onclick="puts()">innerHtmlPets</button>

document.write()

function myFunction() {

document.write(Date());

}

</script>

<button onclick="document.write(Date());">document.write</button>

使用 document.write() 僅僅向文檔輸出寫內容,如果在文檔已完成加載后執行 document.write，整個 HTML 頁面將被覆蓋。

document.write()

3、控制臺

console.log()

瀏覽器支持調試

可以在瀏覽器中顯示 JavaScript 值。

瀏覽器中使用 F12 來啟用調試模式

在調試窗口中點擊 "Console" 菜單。

c=5+6;

console.log(c);

注釋

//我不會執行

/* 我不會執行 */

、abbr

abbr 全稱是 abbreviations，意思是縮寫。應用場景也很簡單，為一些文章中的縮寫增加注釋。

以前在文章中對于縮寫的解釋經常會這么做：

DAU（Daily Active User），日活躍用戶數 ......

那我們用 abbr 標簽呢？

<abbr title="Daily Active User">
    DAU
</abbr>
<span>，日活躍用戶數 ......</span>

展示的效果如下：

這個標簽就可以把全稱隱藏掉，弱化信息量，讓真正不知道該縮寫的用戶主動去獲取縮寫的具體意思，這個在 markdown 里經常會出現。

二、mark

<mark/> 在 markdown 中也是很常用的，用于將包裹的文本高亮展示。

<mark>高亮文本</mark>

效果如下：

如果全文統一高亮樣式，可以專門對 mark 標簽進行樣式重置，這樣就不用對你用的每個 div 加一個 highlight 的類名了，又不語義化，又徒增文檔大小。

三、sup、sub

<sup/>和<sub/>分別表示上標和下標，在 markdown 中出現得也很頻繁，比如數學公式和引用。

<div>3<sup>[2]</sup></div>
<div>4<sub>2</sub></div>

效果如下：

上標和下標的樣式原理也比較簡單，主要就是利用了 vertical-align 的 top 和 sub 屬性值，然后將字號縮小，不過有現成的標簽，干嘛不用呢？

四、figure

figure 是用于包裹其它標簽的內容的，然后再利用另一個標簽 figcaption ，可以對包裹的內容進行一個文本描述，例如：

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="大象">
    <figcaption>這是一張大象的照片</figcaption>
</figure>

效果如下：

那要是圖片掛了呢？

再友好點處理，我們把 img 標簽的 alt 屬性去掉。

漂亮，終于把我一直厭煩的圖裂 icon 給干掉了，樣式還巨好看。

當然不止能包裹 img 標簽，其它任何都是可以的。

嘿嘿，給大家在本文來個實戰，下面這個可以點擊，樣式也是利用了 figure 這個標簽。

我是figure標簽產生的

五、progress

說到 <progress/> 這個標簽就很有意思了，去年有段時間我做的業務里涉及到了進度條，當時是前同事做的，然后有一些性能問題，我就在研究如何優化，減少進度條改變帶來的性能問題。

雖然最后問題是解決了，但是也有幸收到了張鑫旭大佬的評論，他告訴我 progress 這個標簽就足夠了，既有語義化，又有進度條的功能，性能還好，兼容性也很不錯。后來經過一番嘗試，還真是，當時是我孤陋寡聞了，也安利給大家。

<!-- 進度條最大值為100，當前進度為60，即60% -->
<progress max="100" value="60"/>

瀏覽器自帶的樣式就已經很好看了，效果如下：

業務中我們也就可以通過控制 value 屬性，來改變進度條的進度了。

六、area

area 這個標簽也非常有意思，它的作用是為圖片提供點擊熱區，可以自己規定一張圖的哪些區域可點擊，且點擊后跳轉的鏈接，也可以設置成點擊下載文件，我們來舉個例子：

  <img src="example.png" width="100" height="100" alt="" usemap="#map">

  <map name="map">
    <area shape="rect" coords="0,0,100,50" alt="baidu" href="https://www.baidu.com">
    <area shape="rect" coords="0,50,100,100" alt="sougou" href="https://www.sogou.com/">
  </map>

area 一般要搭配 map 標簽一起使用，每個 area 標簽表示一個熱區，例如上面代碼中，我們定義了兩個熱區，熱區形狀都為rect（矩形），他們的熱區分別是：

坐標 (0,0) 到坐標 (100,50) 的一個矩形
坐標 (0,50) 到坐標 (100,100) 的一個矩形

我們都知道，默認的坐標軸是這樣的：

因此，我們劃分的兩個熱區就是:

最后再來看一下我們的實際效果：

七、details

details 字面意思是 "詳情"，在 markdown 里也經常用，用該標簽包裹了的內容默認會被隱藏，只留下一個簡述的文字，我們點擊以后才會展示詳細的內容。

<details>
  <p>我是一段被隱藏的內容</p>
</details>

效果如下：

這還沒有加任何一行的 js 代碼，我們點擊后，details 標簽上會多一個 open 的屬性，被隱藏的內容就展示出來了。

默認情況下，簡要文字為 "詳情"，想要修改這個文字，要搭配 summary 標簽來使用。

<details>
  <summary>點擊查看更多</summary>
  <p>我是一段被隱藏的內容</p>
</details>

就搞定了！

八、dialog

瀏覽器自帶彈窗方法 alert、confirm、prompt，樣式固定且每個瀏覽器不同，同時還會阻塞頁面運行，除了這個還提供了一個 dialog 標簽，它的使用方式有點類似于現在各大組件庫的 Modal 組件了，瀏覽器還為該標簽提供了原生的 dom 方法：showModal、close，可以直接控制彈窗的展示和隱藏。

<dialog id="dialog">
    <input type="text">
    <button id="close">ok</button>
</dialog>
<button id="openBtn">打開彈框</button>

<script>
    const dialog=document.getElementById('dialog')
    const openBtn=document.getElementById('openBtn')
    const closeBtn=document.getElementById('close')
  
    openBtn.addEventListener('click', ()=> {
        // 打開彈框
        dialog.showModal()
    })
    closeBtn.addEventListener('click', ()=> {
        // 隱藏彈框
        dialog.close()
    })
</script>

效果如下：

細心的你有沒有發現，這原生的彈框還自帶背景蒙層，點擊是關閉不掉的，但起碼它不會阻塞頁面。

然后我們在彈窗展示時，也可以通過 esc 鍵來關閉彈窗。

九、datalist

datalist 是用于給輸入框提供可選值的一個列表標簽，類似咱們常用的 Select 組件。

我可以用其實現一個 "輸入聯想" 的功能。

<label> 輸入C開頭的英文單詞：</label>
<input list="c_words"/>

<datalist id="c_words">
  <option value="China">
  <option value="Click">
  <option value="Close">
  <option value="Const">
  <option value="Count">
</datalist>

來試一試：

剛點擊時會把所有推薦的選項都列出來，然后根據后面輸入的內容，會過濾掉不匹配的選項，比如我輸入 cl，會過濾掉不是 cl 開頭的單詞，最后只剩下 Click 和 Close 了。

最后我發現，他這個下拉框有點好看啊？為啥這原生的 input 框默認樣式那么丑，啥時候改改。

十、fieldset

fieldset 標簽是用于分組管理 form 表單內的元素的，若 fieldset 設置了 disabled 屬性，則被其包裹的所有表單元素都會被禁用置灰，且不會隨著表單一起提交上去，是的就成了擺設。

什么意思呢？看個例子：

<form action="/example">
  <fieldset disabled>
    <legend>被禁用區域</legend>
    <label>ID：</label>
    <input type="text" name="id" value="1">
    <label>郵箱：</label>
    <input type="text" name="email" value="1234567@163.com">
  </fieldset>
  <label>名字：</label>
  <input type="text" name="name">
  <button type="submit">提交</button>
</form>

這里我們把 ID 和郵箱的表單包裹了起來，且設置了 disabled，只開放了一個 name 的輸入控件，此時界面如下：

可以看到除了 name 輸入框，其它的兩個輸入框都被禁用了，此時點提交會是什么樣子呢？

嗯，只提交了 name 字段。

十一、noscript

這個標簽是在瀏覽器不支持或禁用了 javascript 時才展示的，大多用于對 js 強依賴的應用，比如現在大部分的 SPA 頁面，一旦不支持 javascript，頁面基本上什么內容都沒了，此時可以靠這個標簽做友好提示。

一般我們不需要特地去使用，大多都是在打包過程中自動插入到 html 靜態文件里去的，例如：

// init.js
const root=document.getElementById('root')
const button=document.createElement('button')
button.innerText='點擊出彈窗'
root.appendChild(button)

<!-- index.html -->
<script defer src="./init.js"></script>

<noscript>
  不好意思，你的瀏覽器不支持或禁用了 JavaScript，請更換瀏覽器或啟用 JavaScript
</noscript>

<div id="root"></div>

未禁用 javascript 時，頁面是這樣的：

禁用了 javascript 時，是這樣的：

單元素屬性2

為了不再被疑似涉嫌低俗，我只能給大家提供這種圖片了，耐得住寂寞才能學有所成！吸引人的東西未必珍貴。

昨天我們學習了《HTML表單元素初識1——零基礎自學網頁制作》（目錄在結尾），大家通過學習對HTML頁面中的表單元素的基本寫法已經非常熟悉了。同時也學會了通過變換<input/>標簽中的type屬性的值為表單賦予不同的功能，例如輸入文本和建立多選表單。期間，對name與value這兩個屬性的作用與特點進行了闡釋。今天我們繼續學習新的表單內容。

建立單選表單：單選表單把<input/>標簽的type屬性修改為"radio"（收音機），為什么單選表單使用"收音機"這個詞呢？其實道理很簡單，收音機調頻旋鈕是對應角度對應相應調頻，不可能一個角度對應兩個調頻，所以選這個就不能選其他的表單中的type屬性使用"radio"這個詞表示，是不是很形象。

示例代碼如下：

<form>
  最高學歷：<br>
  <input type="radio" name="education" value="highSchool"/>高中
  <input type="radio" name="education" value="bachelor"/>本科
  <input type="radio" name="education" value="master"/>碩士
  <input type="radio" name="education" value="doctor"/>博士
  <br>
  <input type="submit" value="submit"/>
</form>

因為描寫的是最高學歷，一般人最高學歷只有一個，不可能又是學士又是博士，因此使用單選表單。

向服務器提交時，name叫做"education"（教育），value對應不同層次。

頁面效果如下：

大家可以點點試試，每次只能有一個被選中。如圖：

綜合練習：到這為止，我們把之前零散的代碼拼湊一下看看效果吧！

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>表單 </title>
  </head> 
  <body>
  <form>
  會員名稱：
  <input type="text" placeholder="請輸入英文或漢語拼音" name="memberName"/><br>
  會員密碼：
  <input type="text" placeholder="請輸入英文字母、特殊符號、數字" name="passWord"/><br>
  確認密碼：
  <input type="text" name="confirmPassWord"/><br>
  <input type="submit" value="提交"/><br>
  </form>
  <hr>
  <form>
  興趣愛好：
  <br>
  <input type="checkbox" name="hobby" value="reading"/>讀書
  <input type="checkbox" name="hobby" value="film"/>電影
  <input type="checkbox" name="hobby" value="painting"/>繪畫
  <input type="checkbox" name="hobby" value="music"/>音樂
  <br>
  最高學歷：<br>
  <input type="radio" name="education" value="highSchool"/>高中
  <input type="radio" name="education" value="bachelor"/>本科
  <input type="radio" name="education" value="master"/>碩士
  <input type="radio" name="education" value="doctor"/>博士
  <br>
  <input type="submit" value="submit"/>
  </form>
  </body>
  </html>

頁面效果如下：

密碼輸入：我們在使用上述表單輸入密碼時發現，密碼時實時顯示在輸入框中，這一點是不安全的，如圖：

如何讓密碼隱藏呢？其實看過上一篇中type屬性列表的小伙伴肯定猜到了，把type從"text"改為password。示例代碼如下：

會員密碼：
<input type="password" placeholder="請輸入英文字母、特殊符號、數字" name="passWord"/><br>
確認密碼：
<input type="password" name="confirmPassWord"/><br>

頁面效果如下：

上傳文件：使用type="file"可以上傳文件！

示例代碼如下：寫在"submit"的上面即可。

<input type="file"/><br><input type="submit" value="submit"/>

頁面效果如下：

點擊"瀏覽"看下效果：

神奇！

使用圖片制作按鈕：將type="image"即可，代碼如下：

<input type="image" src="img/示例圖片/submit.jpg"/><br>

頁面效果如下：用一個src導入圖片即可。

示例圖片：路徑自行設置即可！

為表單設置一個重置按鈕：如果用戶打算重置表單內容后從新填寫，我們可以給他這樣一個按鈕：

<input type="reset" /><br>

頁面如圖所示：

大家要注意的是這個"重置"按鈕的作用范圍僅僅是它所在的<form></form>標簽之間！

舉個例子，如圖：

下面我們點擊"重置"后效果如下：

form1中的內容沒有被清空，"重置"按鈕所在的form2內容被清空了！

type屬性值講解我們到此結束了，hidden值這里先不給大家介紹，以后有機會再細說。

button值以后在JavaScript部分還會細說，這里也先略過。

除了<input/>外，還有其他一些標簽，例如<select>或<textarea>等有趣且實用的標簽，我們明天再學習吧！

今天的內容先到這里。希望大家看完之后可以寫寫代碼進行實操。代碼這種東西即使再簡單，寫過和沒寫過的體會也是不一樣的。這個部分的代碼使用"文本編輯器"就可以實踐。具體操作請詳見《》。

碎片化的知識其實對人并沒有多大作用，但是我們的時間在現代化的生活節奏中被撕地越來越碎，因此我希望大家可以利用碎片時間來學習完整的知識，所以，以短篇的形式，每天20分鐘左右，通過積少成多的辦法為大家提供零基礎頁面制作的教程體系是我的主要目的。希望大家學有所成！

喜歡我的教程的小伙伴請關注我，點贊也會讓我充滿動力！

喜歡的小伙伴請關注和轉發，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

在線咨詢

上一篇：python爬取高匿代理IP（再也不用擔心會進小黑屋
下一篇：JavaScript對象轉數組的三種簡單方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript入門

源

是什么

作用

組成

創建方式

數據類型

函數

輸出

注釋

、abbr

二、mark

三、sup、sub

四、figure

五、progress

六、area

七、details

八、dialog

九、datalist

十、fieldset

十一、noscript

單元素屬性2

HTML完整學習目錄

您的項目需求