JavaScript基礎1

纤秾發表於2024-10-13

實驗介紹:

JavaScript可以使網頁進行互動。

它和Java沒有任何關係,但在它出現的時候Java很熱門,為了引起人們對它的重視,它起名JavaScript。

理想的web頁面劃分

內容(HTML中)
外觀樣式(css中)
指令碼/程式碼(JavaScript檔案中)

一:JavaScript裡的新概念語法

在越來越複雜的web設計中,屬性和函式捆綁在一起,不同屬性構成了類。為了呼叫類就需要用到dom物件,物件是類的具體例項化。

不理解正常以後還會重複講到

當瀏覽器載入一個網頁時,它會將網頁中的HTML內容解析成一個樹形結構,這個結構就被稱為DOM樹。
image

[此處插入圖片],該圖片作者為未知,來源於百度,僅學習非商用。

getElement物件

Document 物件的 getElementById() 方法 可以透過它指定獲得id的HTML元素。
方法即函式,getElementById() 是內建方法,不用定義
document.getElementByld("所需元素ID")
image

[此處插入圖片],該圖片作者為未知,來源於百度,僅學習非商用。

如果要新增新元素,可以使用
document.createElement()
image

[此處插入圖片],該圖片作者為未知,來源於Mozilla Developer,僅學習非商用。

根據Class屬性值獲取元素物件們
document.getElementsByClassName()

跳脫字元

跳脫字元是鍵盤無法錄入的字元和被當成特殊用途而需要轉回它原來意義的字元。
image

[此處插入圖片],該圖片作者為西安交通大學兩位老師,來源於mooc,僅學習非商用。

字串連線和加法

在字串的連線運算中,只要有一方是字元型,結果就是字元型。
1+3+“5”+7+9從左到右加,1+3都是數字所以結果是4;
4+“5”有字元所以+號充當連線符,結果是字元型“45”,
“45”加7同理。
image

[此處插入圖片],該圖片作者為西安交通大學兩位老師,來源於mooc,僅學習非商用。

變數用var關鍵字宣告

例如:var age= 21
區分大小寫(大小寫敏感);型別不用指定,JavaScript是解釋型語言。

註釋

//單行註釋
/這是Javascript
的多行註釋
/

二:Javascript的函式

字元的轉換

parselnt函式和parsefloat函式
parselnt把值轉換成整數型
parselnt("5years") //輸出:5
parsefloat轉化成浮點型
parsefloat("3.75years349") //後面的數字省略 輸出:3.75
parsefloat("years") //輸出:NaN

字元的擷取和索引號的獲取

substring函式和indexOf函式
var s=“xiannong's blog ”
s.indexOf("")代表取s出現第一個空格的索引號
s.substring(0,s.indexOf(""))從0截到第一個空格出現的索引號。
var s2=s.substring(0,s.indexOf("")); //輸出“xiannong’s”

math屬性函式

Math.PI 圓周率,3.1415。。。
Math.E 自然對數底數,2.718。。。
Math.abx(x) 返回x的絕對值
Math.max(x,y) 返回x和y中最大值

三:JavaScript程式三步驟

1建立HTML控制元件

以建立一個botton按鍵舉例
image
image

2編寫JavaScript事件處理函式

按了按鈕會發生什麼
alert()彈窗輸出內容
image

3連線事件處理程式和控制元件

image
image

相關文章