作者：gqk

一：javaScript是什么：

　　w3school 上說明JavaScript 是世界上最流行的編程語言。（吹牛）

　　JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

　　javaScript也被稱為ECMAScript

二：javaScript組成：

?

ECMAScript - JavaScript的核心

定義了javascript的語法規范

JavaScript的核心，描述了語言的基本語法和數據類型，ECMAScript是一套標準，定義了一種語言的標準與具體實現無關

BOM - 瀏覽器對象模型

一套操作瀏覽器功能的API

通過BOM可以操作瀏覽器窗口，比如：彈出框、控制瀏覽器跳轉、獲取分辨率等

DOM - 文檔對象模型

一套操作頁面元素的API

DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節點進行操作

三：BOM的概念

代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。

我們在瀏覽器中的一些操作都可以使用BOM的方式進行編程處理，

比如：刷新瀏覽器、后退、前進、在瀏覽器中輸入URL等

BOM核心—window對象

window是瀏覽器的頂級對象，當調用window下的屬性和方法時，可以省略window 注意：window下一個特殊的屬性 window.name

對話框

• alert()
• prompt()
• confirm()　　

<script type="text/javascript">var isOk = window.confirm("你確定要拋棄我嗎？");//根據用戶的不同相動作做出不同響應if(isOk){ //用戶按下 確定window.alert("祝你好運");}else { //用戶按下 取消window.alert("我們就再玩會吧");} </script> <script type="text/javascript">var msg = prompt("請輸入你的姓名：");if(msg != null && msg.length > 0){alert("歡迎：" + msg);} </script>

?

四：DOM的概念：

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標志語言的標準編程接口。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型就稱為DOM。Document Object Model的歷史可以追溯至1990年代后期微軟與Netscape的“瀏覽器大戰”，雙方為了在JavaScript與JScript一決生死，于是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，既有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的杰作。

• 文檔：一個網頁可以稱為文檔
• 節點：網頁中的所有內容都是節點（標簽、屬性、文本、注釋等）
• 元素：網頁中的標簽
• 屬性：標簽的屬性

DOM經常進行的操作

• 獲取元素
• 動態創建元素
• 對元素進行操作(設置其屬性或調用其方法)
• 事件(什么時機做相應的操作)

JavaScript書寫方式

?

<script>document.write("hello world!"); </script>

　　

五：JavaScript 變量 :變量是用于存儲信息的"容器"

• 變量必須以字母開頭
• 變量也能以 $ 和 _ 符號開頭（不過我們不推薦這么做）
• 變量名稱對大小寫敏感（y 和 Y 是不同的變量）

var pi=3.14; var person="John Doe"; var answer='Yes I am!';

聲明（創建） JavaScript 變量

在 JavaScript 中創建變量通常稱為"聲明"變量。

我們使用 var 關鍵詞來聲明變量：

var usename;

變量聲明之后，該變量是空的（它沒有值）。

如需向變量賦值，請使用等號：

username="gqk";

不過，您也可以在聲明變量時對其賦值：

var username="gqk";

　　Value = undefined

在計算機程序中，經常會聲明無值的變量。未使用值來聲明的變量，其值實際上是 undefined。

在執行過以下語句后，變量 carname 的值將是 undefined：

六：獲取元素對象的幾種方式

1，根據id獲取元素

var div = document.getElementById('main'); console.log(div);　

　注意：由于id名具有唯一性，部分瀏覽器支持直接使用id名訪問元素，但不是標準方式，不推薦使用。　

?2，根據元素獲取對象：

document.getElementsByTagName('div')

3，根據name獲取元素*

document.getElementsByName('hobby')

4，根據類名獲取元素

document.getElementsByClassName('main')

5，根據選擇器獲取元素（了解）

var text = document.querySelector('#text'); console.log(text)

七：事件的基本使用

?

事件三要素

?

• 事件源:觸發(被)事件的元素
• 事件類型:事件的觸發方式(例如鼠標點擊或鍵盤點擊)
• 事件處理程序:事件觸發后要執行的代碼(函數形式)

?

?

案例

?

• 點擊按鈕彈出提示框
• 點擊按鈕修改元素的樣式

非表單元素的屬性

href、title、id、src

案例：

? 點擊按鈕，切換img標簽里的圖片

? 點擊按鈕顯示隱藏div

innerHTML和innerText 區別：

?

　

表單元素屬性

• value 用于大部分表單元素的內容獲取(option除外)
• type 可以獲取input標簽的類型(輸入框或復選框等)
• disabled 禁用屬性
• checked 復選框選中屬性
• selected 下拉菜單選中屬性

案例

• 給文本框賦值，獲取文本框的值
• 點擊按鈕禁用文本框
• 檢測用戶名是否是3-6位，密碼是否是6-8位，
• 設置下拉框中的選中項

?

?

?

?

　

?

?

?

轉載于:https://www.cnblogs.com/520gqk/p/9476705.html

總結

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

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