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

javascript

JS基础入门篇（一）

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

生活随笔收集整理的這篇文章主要介紹了 JS基础入门篇（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.JS存放在代碼中的位置

1.JS寫在行間

<div style="background-color: red;" onclick="alert(1)" >hello world</div>

優點：直接，簡單
缺點：不方便復用和維護,不符合結構行為分離規范

2.JS寫在script ( 一般寫在body結束標簽之前 )
因為JS的執行順序，需要將元素加載完成，才能獲取到元素，故一般寫在body結束標簽之前。

<body><div id="box">hello</div><div id="box2">world</div> <script>document.getElementById("box").onclick = function(){alert(1);};document.getElementById("box2").onclick = function(){alert(2);};</script> </body>

優點：只要是在這個頁面中就可以使用這段 js。
缺點： 1. 不方便修改維護 2. 不符合規范

3.寫在js文件中

1.創建一個js文件,寫入js代碼
2.讓html文件和js文件產生關聯,通過script標簽的 src 屬性鏈接到js文件。

<body><div id="box">miaov</div><script src="index.js"></script> </body>

優點：

1.結構行為完全分離 2.方便修改維護 3.可復用性強

2.JS執行的順序

針對js的存放位置，如果js放在script標簽中，必須放到body結束標簽之前。原因是js會讀取dom節點，必須等到dom節點都加載完成了，js代碼才取得到對應節點。

如果JS代碼非要放在所有節點之前呢？？？
可以將script代碼寫到head中，用window.onload把代碼塊包起來放到script中。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>#box{width:100px;height:100px;background-color:red;}</style><script>window.onload = function(){document.getElementById("box").onclick = function(){alert(1);}}</script></head><body> <div id="box">miaov</div></body> </html>

以上方法不支持，因為window.onload是等到頁面所有dom節點，圖片資源加載完成才執行的。如果圖片資源很多的話，那么用戶對頁面的操作就無效了。所以，一般放在body結束標簽之前。

3.注釋

分為單行注釋和多行注釋。

//單行注釋//單行注釋//單行注釋

/*多行注釋多行注釋多行注釋*/

4.變量

變量：可變的量。
作用：復用數據，存儲數據。
申明變量： var 變量名; 以分號結束。只申明一個變量不賦值的話，那這個變量中默認存儲的是undefined
變量命名規范：可以是數字(1234567890) 字母(abcdefg...)下劃線 ( _ )美元符( $ )組成。
禁止：
1. 不允許數字開頭 2. 不允許使用關鍵字3. 不允許使用保留字

推薦：駝峰式命名法+語義化單詞駝峰式命名法:從第二個單詞開始，每個單詞的首字母大寫。

屬性操作：

以下三種寫法都可以。

box.style["background-color"] = "green"; box["style"]["background-color"] = valStr; box.style.backgroundColor = "green";

如果[ ]中間沒有用引號包起來,那么會把中間的內容當做變量處理。

當需要改變的屬性值是一個變量的時候只能使用[ ],方括號中間如果是變量的話，不需要加引號。

當操作屬性的時候屬性名不符合變量命名規范的時候可以使用[ ]。

如果一定要使用點( . )的話，需要改變成駝峰式命名法。

5.函數

（一）簡介

函數的作用：代碼塊的復用
函數的分類：
1.有名函數
2.匿名函數

（二）使用

1-有名函數聲明:function 函數名(){ 代碼塊 }調用:函數名();2-匿名函數聲明: 直接聲明一個匿名函數會報錯調用:可以直接通過事件調用

eg：
案例一：有名函數的聲明和調用
案例二：匿名函數直接聲明會報錯，可以通過事件調用
案例三：有名函數的錯誤調用，btn.onclick = fn();這樣調用是錯誤的，只會使函數立刻執行，傳給點擊事件的是個null。沒有點擊click按鈕，直接打開就發生變化了。
案例三：有名函數的正確調用，btn.onclick = fn;這樣調用是正確的。點擊click按鈕，紅色方塊才發生變化

6.innerHTML 和 src

innerHTML:修改雙標簽里面的內容。
innerHTML舉例：以下代碼的作用是，點擊頁面任何位置，修改紅色方塊的內容。
src：需要注意的是，在js中，img.src獲取到的是絕對路徑，很少進行比較。

7.基礎篇練習

看完以上的小伙伴，可以看兩個例子的效果，試著做一下。
練習一：點擊按鈕，設置方塊大小
練習二：點擊按鈕，增加或減小字體大小

總結

以上是生活随笔為你收集整理的JS基础入门篇（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： PrincetonAlgorithm I
下一篇： selenium - Select类 -