JS入門_JS在頁面中的位置

JS在頁面中的位置

在HTML頁面中,我們可以講JavaScript代碼放在任何位置,但是我們一般放在網頁的head和body部分。

放在head部分

最常用的方式是在頁面中head部分放置< script>元素,瀏覽器解析head部分就會執行這個代碼,然後才解析頁面的其餘部分。

放在body部分

JavaScript代碼在網頁讀取到該語句的時候就會執行。

註意:

javascript作為一種腳本語言可以放在html頁面中任何位置,但是瀏覽器解釋html時,是按照先後順序的。所以前面的script就先被執行。比如進行頁面顯示初始化的js必須放在head裡面,因為初始化都要求提前進行(比如給頁面的body設置css等);而如果是通過實踐調用執行的function那麼對位置沒有什麼要求的。

JS語句和符號

語句和符號
javascript語句是發給瀏覽器的命令。
栗子:

<script type="text/javascript">
   document.write("I");
   document.write("love");
   document.write("JavaScript");
</script>

一行的結束就被認定為語句的結束,通常在結尾加上一個分號”;”來表示語句的結束。

註意:

1、”;”號要在英文狀態下輸入,同樣JS中的代碼和符號都要在英文狀態下輸入。
2、結尾分號也可以不寫,但是為代碼規范,建議書寫。

註釋
(1)單行註釋,在註釋內容前加符號”//”

<script type="text/javascript">
  document.write("單行註釋使用'//'");  // 我是註釋,該語句功能在網頁中輸出內容
</script>

(2)多行註釋,在開頭出以”/“開始,以”/”結束

<script type="text/javascript">
   document.write("多行註釋使用/*註釋內容*/");
   /*
    多行註釋
    養成書寫註釋的良好習慣
   */
</script>

變量
定義變量使用關鍵字var,語法如下:

var 變量名

變量名和以任意取名,但要遵循命名規則:

1、變量必須使用字母、下劃線(_)或者美元符()開始。2、然後可以使用任意多個英文字母、數字、下劃線()或者美元符()組成。
3、不能使用javascript關鍵詞與javascript保留字。

變量要先聲明再賦值,如下:

var mychar;
mychar="javascript";
var mynum=6;

變量可以重新賦值:

var mychar;
mychar="javascript";
mychar="hello";

註意:

1、在JS中區分大小寫,如變量mychar和myChar是不一樣的,表示兩個變量。
2、變量雖然也可以不聲明,直接使用,但不規范,需要先聲明,後使用。

判斷語句(if…else)

if…else語句是在指定的條件成立時執行代碼,在條件不成立時執行else後面的代碼。

javascript函數
函數是完成某個特定功能的一組語句。
函數的定義:基本語法。

function 函數名(){
     函數代碼;
}

說明:

1、function定義函數的關鍵字
2、”函數名”為函數取的名字
3、”函數代碼”替換為完成特定功能的代碼

javascript-輸出內容(document.write)

document.write()可以用於直接向HTML輸出流寫內容。簡單的說:就是直接在網頁中輸出內容。

javascript-警告(alert消息對話框)
語法:

alert(字符串或變量);  

javascript-確認(confirm消息對話框)
confirm消息對話框通常用於允許用戶做選擇的動作。彈出對話框(包括一個確定按鈕和一個取消按鈕)。
語法 :

confirm(str);

參數說明:

str:在消息對話框中要 顯示的文本
返回值:Boolean值

返回值:

當用戶點擊”確定”按鈕時,返回true
當用戶點擊”取消”按鈕時,返回false

JavaScript-提問(prompt 消息對話框)
語法:

prompt(str1, str2);

參數說明:

str1:要顯示在消息對話框中的文本,不可修改
str2:文本框中的內容,可以修改

返回值:

1、點擊確定按鈕,文本框中的內容將作為函數返回值
2、點擊取消按鈕,將返回null

註意:在用戶點擊對話框的按鈕前,不能進行任何其他操作。

JavaScript-打開新窗口(window.open)
open()方法可以查找一個已經存在或者新建的瀏覽器窗口。
語法:

window.open([URL], [窗口名稱], [參數字符串])

參數說明:

URL:可選參數,在窗口中要顯示網頁的網址或者路徑。如果省略此參數,或者它的值是空字符串,那麼窗口不顯示任何文檔。
窗口名稱:可選參數,被打開的窗口的名稱。
(1)、該名稱由字母、數字和下劃線字符組成。
(2)、”_top”、”_blank”、”_self”具有特殊意義的名稱。
-top:框架網頁中在上部窗口中顯示目標網頁
_blank:在新窗口顯示目標網頁
_self:在當前窗口顯示目標網頁
(3)、相同name的窗口隻能創建一個,要想創建多個窗口則name不能相同
(4)name不能包含有空格
參數字符串:可選參數,設置窗口參數,個參數用都好隔開
這裡寫圖片描述

栗子:打開https://www.baidu.com網站,大小為300px*200px,無菜單,無工具欄,無狀態欄,有滾動條窗口。

<script type="text/javascript"> window.open('https://www.baidu.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

JavaScript-關閉窗口(window.close)
close()關閉窗口。
用法:

window.close();   //關閉本窗口

或者<窗口對象>.close(); //關閉指定的窗口

栗子:打開一個新窗口,並且關閉掉。

<script type="text/javascript">
   var mywin=window.open('https://www.baidu.com'); //將新打的窗口對象,存儲在變量mywin中
   mywin.close();
</script>

註意:在打開新的窗口的同時,關閉該窗口,看不到被打開的窗口。

DOM操作

文檔對象模型DOM(Document Object Model)定義訪問和處理HTML文檔的標準方法。DOM將HTML文檔呈現為帶有元素、屬性和文本的樹機構(節點樹)。

將HTML代碼分解為DOM節點層次圖:
這裡寫圖片描述

HTML文檔可以說是由節點構成的集合,三種常見的DOM節點:

1、元素節點

上圖中< html>、 < body>、< p>等都是元素節點,即標簽

2、文本節點

向用戶展示的內容,如< li>…< li>中的javascript、DOM、CSS等文本。

3、屬性節點

元素屬性,如< a>標簽的鏈接屬性href=“https://www.baidu.com”

通過ID獲取元素
標簽的id屬性值是唯一的,在網頁中,我們可以通過id先找到標簽,然後進行操作。
語法:

document.getElementById(“id”) 

結果:

返回結果為null或者[Object HTMLParagraphElement]

註意:

獲取的元素是一個對象,如想對元素進行操作,我們要通過它的屬性或方法。

innerHTML 屬性
語法:

Object.innerHTML

註意:

1、Object是獲取元素的元素對象,如果通過document.getElementById(“ID”)獲取的元素。
2、註意書寫,innerHTML區分大小寫。

改變HTML樣式
HTML DOM允許JavaScript改變HTML元素的樣式。

語法:Object.style.property=new style;

Object是獲取的元素對象,如果通過document.getElementById(“id”)獲取的元素。

基本屬性表(prooerty):
這裡寫圖片描述

顯示和隱藏(display屬性)
網頁中經常會看到顯示和隱藏的效果。可以通過display屬性來設置。
語法:Object.style.display = value
value取值:
這裡寫圖片描述

控制類名(className屬性)

className屬性設置返回元素的calss屬性。
語法:object.className = classname
作用:

1、獲取元素的calss屬性
2、為網頁內的某個元素指定一個css樣式來更改該元素的外觀

發佈留言