HTML-JavaScript基礎（非常詳細）

么是JavaScript

JavaScript是一種基于對象和事件驅動的、并具有安全性能的腳本語言，已經被廣泛用于Web應用開發，常用來為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

JavaScript特點

是一種解釋性腳本語言（代碼不進行預編譯）。

主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行為。

可以直接嵌入HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。

跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。

JavaScript組成

JavaScript日常用途

1、嵌入動態文本于HTML頁面。

2、對瀏覽器事件做出響應。

3、讀寫HTML元素。

4、在數據被提交到服務器之前驗證數據。

5、檢測訪客的瀏覽器信息。

6、控制cookies，包括創建和修改等。

7、基于Node.js技術進行服務器端編程。

JavaScript的基本結構

<script type="text/javascript">
 <!—
 JavaScript 語句;
 —>
</script >

示例：

……
<title>初學JavaScript</title>
</head>
<body>
<script type="text/javascript">
 document.write("初學JavaScript");
 document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>

<script>…</script>可以包含在文檔中的任何地方，只要保證這些代碼在被使用前已讀取并加載到內存即可

JavaScript的執行原理

網頁中引用JavaScript的方式

1、使用<script>標簽

2、外部JS文件

<script src="export.js" type="text/javascript"></script>

3.直接在HTML標簽中

<input name="btn" type="button" value="彈出消息框" 
 onclick="javascript：alert('歡迎你');"/>

JavaScript核心語法：

1. 變量

①先聲明變量再賦值

var width;
width = 5;
var － 用于聲明變量的關鍵字
width － 變量名

②同時聲明和賦值變量

var catName= "皮皮";
var x, y, z = 10;

③不聲明直接賦值【一般不使用】

width=5;

變量可以不經聲明而直接使用，但這種方法很容易出錯，也很難查找排錯，不推薦使用。

2. 數據類型

①undefined：示例：var width;

變量width沒有初始值，將被賦予值undefined

②null：表示一個空值，與undefined值相等

③number：

var iNum=23; //整數

var iNum=23.0; //浮點數

④Boolean：true和false 但是JS會把他們解析成1；0

⑤String：一組被引號（單引號或雙引號）括起來的文本 var string1="This is a string";

3. typeof運算符

typeof檢測變量的返回值；typeof運算符返回值如下：

①undefined：變量被聲明后，但未被賦值.

②string：用單引號或雙引號來聲明的字符串。

③boolean：true或false。

④number：整數或浮點數。

⑤object：javascript中的對象、數組和null。

、可維護性代碼

通常說代碼可維護就意味著它具備以下的特點：

容易理解，無須求助原始開發者，任何人一看代碼就知道它是干什么的，以及它是怎么實現的；
符合常識，代碼中的一切都顯得順理成章，無論操作多么復雜；
容易適配，即使數據發生變化也不用完全重寫；
容易擴展，代碼架構經過認真設計，支持未來擴展核心功能；
容易調試，出問題時，代碼可以給出明確的信息，通過它能直接定位問題；

二、編碼規范-可讀性

要想讓代碼容易維護，首先必須使其可讀。代碼縮進是保證可讀性的重要基礎，如果所有人都是用相同的縮進，整個項目的代碼就會更容易讓人看懂。縮進通常使用空格數而不是tab鍵來定義，因為tab鍵在不同文本編譯器中的顯示不同，一般來說縮進是4個空格。

可讀性的另一方面是代碼注釋。在大多數的編程語言中，廣泛接受的做法是為每個方法都編寫注釋。

一般來說，以下地方應該寫注釋：

函數和方法，每個函數和方法都應該有注釋來描述其用途，以及完成任務所用的算法。同時，也寫清楚這個函數或方法的前提，每個參數的含義，以及函數是否返回值。
大型代碼塊，多行代碼但用于完成單一任務的，應該在前面給出注釋，把要完成的任務寫清楚。
復雜的算法，如果使用了獨特的方法解決問題，要通過注釋解釋明白。這樣不僅可以幫助別人查看代碼，也可以幫助自己今后查看代碼。
使用黑科技，一些特殊的方法，特定的假設。

三、變量和函數命名

代碼中變量和函數的適當命名對于其可讀性和可維護性至關重要。

變量名應該是名稱；
函數名應該以動詞開始；
變量、函數、方法都以小寫字母開頭，使用駝峰大小寫形式；
名稱要盡量用描述性和直觀的詞匯，但不要過于冗長；

四、松散耦合

只要應用程序的某個部分對另一部分依賴的過于緊密，代碼就會變得緊密耦合，因而難以維護。

典型的問題是在一個對象中直接引用另一個對象，這樣，修改其中一個，可能必須還得修改另一個。緊密耦合的軟件難以維護，肯定需要頻繁的重寫。

1、解耦HTML和JavaScript

web開發中最常見的耦合是HTML和JavaScript，在網頁中，HTML和JavaScript分別代表不同層面的解決方案，HTML是數據，JavaScript是行為。這是因為它們之間要相互操作，需要通過不同的方式將這兩種技術聯系起來。可惜的是，其中一些方式會導致HTML與JavaScript緊密耦合。

把JavaScript直接嵌入在HTML中，要么使用包含嵌入代碼的

document.write("hello 哪吒編程");

</script>

雖然技術上這樣做沒有問題，但實踐中，這樣會將表示數據的HTML與定義行為的JavaScript緊密耦合在一起，理想情況下，HTML和JavaScript應該完全分開，通過外部文件引入JavaScript，然后使用DOM添加行為。

一般來說，應該避免在JavaScript中創建大量的HTML。同樣，這主要是為了做到數據層和行為層各司其職，在出錯時更容易定位問題所在。

2、解耦CSS和JavaScript

web應用程序的另一層是CSS，負責頁面樣式顯示、

JavaScript和CSS緊密相關，都構建咋HTML之上，因此經常一起使用。

CSS和JavaScript緊密相連的例子：

element.style.color = "red";

element.style.backgroundColor = "blue";

3、解耦應用程序邏輯和事件處理程序

每個web應用程序中都會有大量事件處理程序在監聽各種事件。可是，其中很少能做到應用程序邏輯與事件處理程序分離。

以下是解耦應用程序邏輯和業務邏輯時應該注意的幾點：

不要把event對象傳給其他方法，而是只傳遞event對象中必要的數據；
應用程序中每個可能的操作都應該無須事件處理程序就可以執行；
事件處理程序應該處理事件，而把后續處理交給應用程序邏輯；

做到以上幾點能夠給任何代碼的可維護性帶來巨大的提升，同時也能為將來的測試和開發提供很多可能性。

五、編碼慣例

1、尊重對象所有權

2、不聲明全局變量

最多可以創建一個全局變量，作為其他對象和函數的命名空間。

3、不要比較null

4、使用常量

重復出現的值
用戶界面字符串
URL
任何可能變化的值

六、作用域意識

隨著作用域鏈中作用域數量的增加，訪問當前作用域鏈外部變量所需要的時間也會增加，訪問全局變量始終比訪問局部變量要慢，因為必須遍歷作用域鏈，任何可疑縮短遍歷作用域鏈時間的舉措都能提升代碼性能。

1、避免全局查找

改進代碼性能非常重要的一件事，可能就是要提防全局查找。全局變量和函數相比于局部變量始終是最費時間的，因為需要經歷作用域鏈查找。

如果for循環中多次引用document，可以通過在局部作用域中保存document對象的引用，能夠明顯提升這個函數的性能，因為只需要作用域鏈查找。

2、不適用with語句

在性能很重要的代碼中，應避免使用with語句，與函數類似，with語句會創建自己的作用域，因此也會加長其中代碼的作用域鏈。在with語句中的diamagnetic一定比在它外部執行的代碼慢，因為作用域鏈查找時多一步。

七、優化循環

循環時編程中常用的語法構造，因此在JavaScript中十分常見，優化這些循環時性能優化的重要內容，因為循環會重復多次運行相同的代碼，所以運行時間會自動增加。

1、簡化終止條件

因為每次循環都會計算終止條件，所以它應該盡可能地快。

2、簡化循環體

循環體是最花時間的部分，因此要盡可能優化。要確保其中不包含可以輕松轉移到循環外部的密集計算。

3、使用后測試循環

最常見的循環時for和while循環，這兩種循環都屬于先測試循環。do-while就是后測試循環，避免了對終止條件初始化評估，因此會更快。

4、展開循環

如果循環的次數是有限的，那么通常拋棄循環而直接多次調用函數會更快。

八、語句最少化

JavaScript代碼語句的數量影響執行的速度。一條可以執行多個操作的語句，比多條語句中每個語句執行一個操作要快。那么優化的目標就是尋找可以合并的語句，以較少整個腳本的執行時間。

1、多個變量聲明

2、插入迭代性值

任何時候只要使用迭代性值（遞增或者遞減），都要盡可能使用組合語句。

比如

let name = values[i++]

替代

let name = values[i];

i++;

3、使用數組和對象字面量

九、優化DOM交互

在所有JavaScript代碼中，涉及DOM的部分無疑是非常慢的。DOM操作和交互需要占用大量時間，因為經常需要重新渲染整個或部分頁面。此外，看起來簡單的操作也可能花費很長時間，因為DOM中攜帶著大量信息。理解如何優化DOM交互可以極大地提升腳本的執行速度。

1、實時更新最小化

訪問DOM時，只要訪問的部分是顯示頁面的一部分，就是在執行實時更新操作。之所以稱其為實時更新，是因為涉及立即更新頁面的顯示，讓用戶看到。每次這樣的更新，無論是插入一個字符還是刪除頁面上的一個內容，都會導致性能損失。這是因為瀏覽器需要為此重新計算數千項指標，之后才能執行更新。實時更新的次數越多，執行代碼所需的時間也越長。

2、使用innerHTML

在頁面中創建新DOM節點的方式有兩種，使用DOM方法如createElement()和appendChild()，以及使用innerHTML。對于少量DOM更新，兩種技術區別不大，但對于大量DOM更新，使用innerHTML要比使用標準DOM方法創建同樣的結構快得多。

在給innerHTML賦值時，后臺會創建HTML解析器，然后使用原生DOM調用，而不是JavaScript的DOM方法來創建DOM結構，原生DOM方法速度更快，因為該方法時執行編譯代碼而非解釋代碼。

3、使用委托事件

大多數web應用程序會大量使用事件處理程序實現用戶交互。一個頁面中事件處理程序的數量與頁面響應用戶交互的速度有直接關系，為了減少對頁面響應的影響，應該盡可能使用事件委托。

事件委托利用了事件的冒泡，任何冒泡的事件都可以不在事件目標上，而在目標的任何祖先元素上處理。基于這個認知，可以把事件處理程序添加到負責多個目標的高層元素上。只要可能，就應該在文檔級添加事件處理程序，因為在文檔級可以處理整個頁面的的事件。

4、注意HTMLCollection

由于web應用程序存在很大的性能問題，只要訪問HTMLCollection，無論是它的屬性還是方法，就會觸發查詢文檔，而這個查詢相當耗時，減少訪問HTMLCollection的次數可以極大地提升腳本的性能。

可以優化HTMLCollection訪問最關鍵的地方就是循環。

十、JavaScript思維導圖

[機智]點擊獲取資料

現代web開發中，表單是用戶與網站互動的重要方式之一。HTML5為表單提交提供了強大的功能和豐富的輸入類型，讓收集和驗證用戶輸入數據變得更加容易和安全。本文將詳細介紹HTML5表單的各個方面，包括基本結構、輸入類型、驗證方法和提交過程。

基本結構

HTML表單由<form>標簽定義，它可以包含輸入字段、標簽、按鈕等元素。一個基本的表單結構如下所示：

<form action="/submit_form" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">電子郵箱：</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="提交">
</form>

在這個例子中，表單有兩個輸入字段：姓名和電子郵箱。每個輸入字段都有一個<label>標簽，這不僅有助于用戶理解輸入的內容，也有助于屏幕閱讀器等輔助技術。<form>標簽的action屬性定義了數據提交到服務器的URL，method屬性定義了提交數據的HTTP方法（通常是post或get）。

輸入類型

HTML5提供了多種輸入類型，以支持不同的數據格式和設備。

文本輸入

<!-- 單行文本 -->
<input type="text" name="username" placeholder="請輸入用戶名" required>

<!-- 密碼 -->
<input type="password" name="password" required minlength="8">

<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">

<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">

數值輸入

<!-- 數值 -->
<input type="number" name="age" min="18" max="100" step="1" required>

<!-- 滑動條 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 電話號碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">

日期和時間輸入

<!-- 日期 -->
<input type="date" name="birthdate" required>

<!-- 時間 -->
<input type="time" name="appointmenttime">

<!-- 日期和時間 -->
<input type="datetime-local" name="appointmentdatetime">

選擇輸入

<!-- 復選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂</label>

<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<!-- 下拉選擇 -->
<select name="country" required>
  <option value="china">中國</option>
  <option value="usa">美國</option>
</select>

特殊輸入

<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">

<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>

驗證方法

HTML5表單提供了內置的驗證功能，可以在數據提交到服務器之前進行檢查。

必填字段

<input type="text" name="username" required>

正則表達式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請輸入5位數的郵政編碼">

數值范圍

<input type="number" name="age" min="18" max="99">

長度限制

<input type="text" name="username" minlength="4" maxlength="8">

表單提交

當用戶填寫完表單并點擊提交按鈕時，瀏覽器會自動檢查所有輸入字段的有效性。如果所有字段都滿足要求，表單數據將被發送到服務器。否則，瀏覽器會顯示錯誤信息，并阻止表單提交。

<input type="submit" value="提交">

可以使用JavaScript來自定義驗證或處理提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  // 檢查表單數據
  if (!this.checkValidity()) {
    event.preventDefault(); // 阻止表單提交
    // 自定義錯誤處理
  }
  // 可以在這里添加額外的邏輯，比如發送數據到服務器的Ajax請求
});

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>

<!-- 表單定義 -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>

  <label for="email">電子郵件：</label>
  <input type="email" id="email" name="email">
  <br>

  <input type="button" value="提交" onclick="submitForm()">
</form>

<script>
// JavaScript函數，處理表單提交
function submitForm() {
  // 獲取表單元素
  var form = document.getElementById('myForm');
  
  // 創建一個FormData對象
  var formData = new FormData(form);
  
  // 創建一個空對象來存儲表單數據
  var formObject = {};
  
  // 將FormData轉換為普通對象
  formData.forEach(function(value, key){
    formObject[key] = value;
  });
  
  // 將對象轉換為JSON字符串
  var jsonString = JSON.stringify(formObject);
  
  // 彈出包含JSON字符串的對話框
  alert(jsonString);
  
  // 阻止表單的默認提交行為
  return false;
}
</script>

</body>
</html>

在這個例子中：

我們定義了一個包含姓名和電子郵件輸入字段的表單，以及一個按鈕，當點擊按鈕時會調用submitForm函數。
在submitForm函數中，我們首先獲取表單元素并創建一個FormData對象。然后，我們遍歷FormData對象，將表單數據復制到一個普通的JavaScript對象formObject中。
接著，我們使用JSON.stringify方法將formObject轉換成JSON字符串。
最后，我們使用alert函數彈出一個包含JSON字符串的對話框。

注意，這個例子中我們使用了type="button"而不是type="submit"，因為我們不希望表單有默認的提交行為。我們的JavaScript函數submitForm會處理所有的邏輯，并且通過返回false來阻止默認的表單提交。如果你想要使用type="submit"，你需要在<form>標簽上添加一個onsubmit="return submitForm()"屬性來代替按鈕上的onclick事件。

結論

HTML5的表單功能為開發者提供了強大的工具，以便創建功能豐富、用戶友好且安全的網站。通過使用HTML5的輸入類型和驗證方法，可以確保用戶輸入的數據是有效的，同時提高用戶體驗。隨著技術的不斷進步，HTML5表單和相關API將繼續發展，為前端工程師提供更多的可能性。

在線咨詢

上一篇：利用IE法提取網頁數據基礎
下一篇：抖音上很火的3D立體動態相冊實現代碼！趕快學起來吧

您的項目需求

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

整合營銷服務商