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

javascript

尚硅谷_JavaScript_学习笔记

發布時間：2023/12/20 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了尚硅谷_JavaScript_学习笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript簡介

JavaScript 簡介： JavaScript 是一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言，是一種動態、弱類型、基于原型的語言，內置支持類。它的解釋器被稱為 JavaScript引擎，為瀏覽器的一部份。同時也是一種廣泛用于客戶端 Web 開發的腳本語言。最初由網景公司（Netscape）的布蘭登·艾克（Brendan Eich）設計， 1997 年，在 ECMA（歐洲計算機制造商協會）的協調下，由 Netscape、 Sun、微軟、 Borland 組成的工作組確定統一標準： ECMA-262。 JavaScript 是 Sun 公司的注冊商標，和 Java 沒有直接關系。

JS：HelloWorld

1.點擊按鈕彈出文本值
2.HTML 代碼：<button>Click Me!</button>
3.JavaScript 代碼：

4.由 Hello World 引出的四個問題

JavaScript 基本語法和 Java 有什么區別？
為什么要使用 window.onload？
在我單擊按鈕后如何讓程序執行我希望的操作？
HTML 代碼中的 button 標簽在 JavaScript 代碼中是怎么表示的？如何獲取？

JavaScript 基本語法

認識 script 標簽

<script> 標簽用于定義客戶端腳本，比如 JavaScript
在語法上， <script> 標簽可以寫在<html></html>標簽內的任何位置
type 屬性是必需的，用來規定腳本的 MIME 類型。對于 JavaScript，其 MIME類型是 “text/javascript”。
language 屬性：不贊成使用
在文檔中直接插入 JavaScript 代碼

連接外部 JavaScript 文件
- <script>標簽的 src 屬性：規定外部腳本文件的 URL。
- 純 JavaScript 代碼可以保存到“.js”文件中，在“.js”文件中，寫 JavaScript代碼和在 script 標簽中完全一樣
- <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
- 注意：加載外部 CSS 樣式表使用的是 link 標簽，和加載外部 JS 文件
  不同！
  <link rel="stylesheet" type="text/css" href="theme.css" />

JavaScript 數據類型

字符串： JavaScript 中沒有“字符型”數據，單個字符也被當成字符串處理
數字型： JavaScript 不區分整型和浮點型，所有數字都是以浮點型來表示的
布爾型
true： true、非零的數字、非空的字符串
false： false、數字 0、空字符串、 undefined、 null
函數：在 JavaScript 中，函數也是一個對象，可作為一個值賦給變量，函數名就是這個對象的引用。
Null：代表“空”。 Null 是數據類型，它只有一個值： null
不代表數字型的 0，不代表字符串類型的””空字符串
不是一個有效的數字、字符串、對象、數組和函數，什么數據類型都不是
JavaScript 區分大小寫， Null、 NULL 都不等同于 null
typeof(null)返回 Object（為了向下兼容）
undefined：表示：未定義
定義了一個變量但未賦值
使用了一個未定義的變量
使用了一個不存在的對象的屬性

JavaScript 嚴格區分大小寫

JavaScript 標識符命名規范和 Java 完全一樣

變量

使用 var 關鍵字聲明
JavaScript 是弱類型語言，聲明變量時，不需要指定類型。變量在使用中也可以存儲各種類型的數據

函數

JavaScript 代碼寫在什么位置

HTML 標簽內

<button onclick="alert('hello')">ClickMe</button>
js 和 html 強耦合, 不利于代碼的維護。例如：給 10 個 button 按鈕綁定同樣的單擊響應函數。如果要修改函數名則必須在 10個 button標簽處都修改，容易造成遺漏或不一致

<head> 標簽內

這個位置更符合習慣，但有嚴重問題：在 body 節點之前執行的代碼無法直接獲取 body 內的節點。原因：此時 html 文檔樹還沒有加載完成，更準確的說就是——內存中的 DOM 結構還不完整，不包括未加載的 DOM 節點，所以相關節點 JavaScript 程序獲取不到
瀏覽器加載原理分析
- 瀏覽器按照從上到下的順序下載 HTML 文檔，一邊下載，一邊加載到內存，不是全部下載后再全部加載到內存。另外， DOM 樹結構的繪制優先于關聯元素的加載，比如圖片。
- 通常來說，瀏覽器執行 JavaScript 腳本有兩大特性：
  ①載入后馬上執行。
  ②執行時會阻塞頁面后續內容（包括頁面的渲染、其它資源的下載）。
- 瀏覽器加載 HTML 文檔時，如果遇到<script>標簽就會停止后面元素的加載，先對 JavaScript 腳本文件進行解析和執行。

<body>標簽后面

能獲取到 body 內的元素節點
把代碼寫在這個位置嚴重不符合習慣

window.onload

window.onload 事件是在當前文檔完全加載之后被觸發，此時 HTML 文檔樹已經加載完成，可以獲取到當前文檔中的任何節點
最終的加載執行順序
瀏覽器加載 HTML 文檔
遇到<script>標簽停止加載后面的 HTML 元素，開始解析執行 JavaScript 代碼。
將封裝了相關操作的響應函數綁定到 window.onload 事件上
加載 HTML 元素，繪制 DOM 結構
HTML 文檔加載完成，觸發 window.onload 事件
開始執行 window.onload 事件響應函數中的 JavaScript 代碼

事件的監聽和響應

事件的監聽和響應是用戶和應用程序進行交互的方式
為控件綁定事件響應函數
- 從文檔對象模型中獲取控件對象
- 聲明一個事件響應函數
- 將事件響應函數的引用賦值給控件對象的 onclick 屬性

取消控件默認行為
- 超鏈接的跳轉功能： return false;
- 提交按鈕的提交功能： return false;
事件冒泡
- 概念：用戶操作的動作要傳遞給當前控件，響應函數執行完之后，還要繼續傳遞給它的父元素，并一直向上傳遞，直到頂層
- 產生的原因：監聽區域的重合
- 取消的方法： return false;
焦點
- 一個控件被激活時就獲得了焦點，也可以反過來說：一個控件獲得焦點時被
  激活
- 獲得焦點事件： onfocus
- 失去焦點事件： onblur

DOM

Document Object Model：文檔對象模型定義了訪問和處理 HTML 文檔的標準方法。是 W3C 國際組織制定的統一標準，在很多計算機語言中都有不同實現如 C#、PHP、 Java、 Ruby、 perl、 python 等。

DOM 樹

上下為父子關系
左右為兄弟關系

節點

節點的概念來源于網絡理論，代表網絡中的一個連接點。網絡是由節點構成的集合。相應的，我們可以說 HTML 文檔是由 DOM 節點構成的集合。

節點的分類

元素節點：構成 HTML 文檔最基本的 HTML 元素，對應 HTML 文檔中
的 HTML 標簽
屬性節點：對應元素的屬性
文本節點：對應 HTML 標簽內的文本內容

節點的屬性

nodeName: 代表當前節點的名字，只讀屬性。如果給定節點是一個文本節點，nodeName 屬性將返回內容為 #text 的字符串
nodeType：返回一個整數, 這個數值代表著給定節點的類型. 只讀屬性. 1 – 元素節點, 2 – 屬性節點, 3 – 文本節點
nodeValue：返回給定節點的當前值(字符串). 可讀寫的屬性
- 元素節點, 返回值是 null
- 屬性節點: 返回值是這個屬性的值
- 文本節點: 返回值是這個文本節點的內容

獲取元素節點

根據 id 屬性值獲取：調用 document 對象的 getElementById(元素的 id 屬性)，返回的是當前元素節點的引用。
根據標簽名，獲取元素節點
- 調用 document 對象的 getElementsByTagName(標簽名)，返回的是標簽名對應的元素節點的數組
- 也可以通過一個元素節點來調用 getElementsByTagName(標簽名)方法
根據 name 屬性值獲取一組元素節點
- 通過調用 document 對象的 getElementsByName(元素的 name 屬性值) 方法，返回的是一個元素的數組
- 如果 HTML 標簽本身沒有 name 屬性，這時通過 getElementsByName() 方法獲取元素節點
  IE 獲取不到
  嚴格遵守 W3C 標準的瀏覽器可以獲取到
操作屬性
- 推薦方法
  - 讀： element.attrName
  - 寫： element.attrName=”new value”;
- 經典方法
  - 獲取屬性節點對象： element.getAttributeNode(屬性名) 返回一個屬性節點對象的引用
  - 讀取值： attrNode.nodeValue
  - 修改值： attrNode.nodeValue = ” new value”

獲取元素節點的子節點

查看元素節點是否存在子節點:hasChildNodes()。只有元素節點才可能有子節點
通過 childNodes 屬性獲取全部子節點。 IE 和 W3C 的標準有區別： IE 忽略空格（空行）， W3C 標準會把空格也當作子節點
通過 firstChild 屬性獲取元素節點的第一個子節點。該方法經常被用來獲取文本節點如：元素節點對象 .firstChild 。如果要獲取文本值：元素節點對象.firstChild.nodeValue
調用父節點的 getElementsByTagName()，更有針對性

節點的屬性

屬性節點的 nodeValue 是它的屬性值
文本節點的 nodeValue 是它的文本值
獲取文本節點的文本值的方法：文本節點的父節點.firstChild.nodeValue

創建節點

注意：新創建的節點，包括文本節點和元素節點，都不會自動的加入到當前的文
檔中
創建文本節點 document.createTextNode(文本值) 方法，返回一個文本節點的引
用 var textNode = document.createTextNode(“廣州”);
創建元素節點 document.createElement(標簽名) 方法，返回一個新的元素節點的
引用 var liEle = document.createElement(“li”);
將新創建的文本節點，添加到元素節點當中元素節點.appendChild(文本節點)
liEle.appendChild(textNode);
alert(liEle.firstChild.nodeValue);
var cityEle = document.getElementById(“city”);
將新創建的元素節點，添加到文檔中指定的元素節點.appendChild(新創建的元素
節點)
cityEle.appendChild(liEle);

替換節點

調用父節點.replaceChild(新節點,目標節點) 方法，實現節點的替換

獲取元素節點的父節點

子節點.parentNode

復制節點

原元素節點.cloneNode(true) 參數為布爾值： true 包括子節點都復制， false只復制當前節點（默認）

插入節點

將新創建的元素節點，添加到文檔中指定元素節點前面
父節點.insertBefore(新節點,目標節點);
自定義 inserAfter()函數

刪除節點

元素節點.removeChild(要刪除的子節點)

innerHTML

屬性可讀可寫。讀：讀出指定元素節點內的 HTML 代碼，寫：將 HTML 代碼寫入指定元素節點的開始和結束標簽內

nextSibling

元素節點.nextSibling 返回元素節點的下一個兄弟元素

previousSibling

元素節點.previousSibling 返回元素節點的上一個兄弟元素

總結

以上是生活随笔為你收集整理的尚硅谷_JavaScript_学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Microsoft Access、MyS
下一篇：利用Console来调试JS程序、Con