慕課網(wǎng)js入門筆記

時(shí)間：2023-06-07 14:21:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-07 14:21:01 來源：網(wǎng)站運(yùn)營(yíng)

慕課網(wǎng)js入門筆記：

document對(duì)象

document.write("hello");document.getElementById("p1").style.color="blue";





html中插入js代碼

<script type="text/javascript"> document.write("開啟JS之旅!");//js語句</script>





js代碼外鏈

在html文件中寫：

<script src="script.js"></script>在script.js文件中直接寫js代碼







js代碼位置

我們可以將JavaScript代碼放在html文件中任何位置，但是我們一般放在網(wǎng)頁的head或者body部分。 放在head部分 最常用的方式是在頁面中head部分放置<script>元素，瀏覽器解析head部分就會(huì)執(zhí)行這個(gè)代碼，然后才解析頁面的其余部分。 放在body部分 JavaScript代碼在網(wǎng)頁讀取到該語句的時(shí)候就會(huì)執(zhí)行。







注意: javascript作為一種腳本語言可以放在html頁面中任何位置，但是瀏覽器解釋html時(shí)是按先后順序的，所以前面的script就先被執(zhí)行。比如進(jìn)行頁面顯示初始化的js必須放在head里面，因?yàn)槌跏蓟家筇崆斑M(jìn)行（如給頁面body設(shè)置css等）；而如果是通過事件調(diào)用執(zhí)行的function那么對(duì)位置沒什么要求的。







每一句JavaScript代碼格式:語句;

先來看看下面代碼

<script type="text/javascript"> alert("hello!");</script>例子中的alert("hello!");就是一個(gè)JavaScript語句。

一行的結(jié)束就被認(rèn)定為語句的結(jié)束，通常在結(jié)尾加上一個(gè)分號(hào)";"來表示語句的結(jié)束。







單行注釋，在注釋內(nèi)容前加符號(hào) “//”。

<script type="text/javascript"> document.write("單行注釋使用'//'"); // 我是注釋，該語句功能在網(wǎng)頁中輸出內(nèi)容</script>多行注釋以"/*"開始，以"*/"結(jié)束。

<script type="text/javascript"> document.write("多行注釋使用/*注釋內(nèi)容*/"); /* 多行注釋 養(yǎng)成書寫注釋的良好習(xí)慣 */</script>





變量名可以任意取名，但要遵循命名規(guī)則:

1.變量必須使用字母、下劃線(_)或者美元符($)開始。

2.然后可以使用任意多個(gè)英文字母、數(shù)字、下劃線(_)或者美元符($)組成。

3.不能使用JavaScript關(guān)鍵詞與JavaScript保留字。







語法

if(條件){ 條件成立時(shí)執(zhí)行的代碼 }else{ 條件不成立時(shí)執(zhí)行的代碼 }假設(shè)我們通過年齡來判斷是否為成年人，如年齡大于等于18歲，是成年人，否則不是成年人。代碼表示如下**:**

<script type="text/javascript"> var myage = 18; if(myage>=18) //myage>=18是判斷條件 { document.write("你是成年人。");} else //否則年齡小于18 { document.write("未滿18歲，你不是成年人。");}</script>





函數(shù)

函數(shù)是完成某個(gè)特定功能的一組語句。如沒有函數(shù)，完成任務(wù)可能需要五行、十行、甚至更多的代碼。這時(shí)我們就可以把完成特定功能的代碼塊放到一個(gè)函數(shù)里，直接調(diào)用這個(gè)函數(shù)，就省重復(fù)輸入大量代碼的麻煩。

如何定義一個(gè)函數(shù)呢？基本語法如下:

function 函數(shù)名(){ 函數(shù)代碼;}說明:

1. function定義函數(shù)的關(guān)鍵字。
2. "函數(shù)名"你為函數(shù)取的名字。
3. "函數(shù)代碼"替換為完成特定功能的代碼。

我們來編寫一個(gè)實(shí)現(xiàn)兩數(shù)相加的簡(jiǎn)單函數(shù),并給函數(shù)起個(gè)有意義的名字：“add2”，代碼如下：

function add2(){ var sum = 3 + 2; alert(sum);}函數(shù)調(diào)用:

函數(shù)定義好后，是不能自動(dòng)執(zhí)行的，所以需調(diào)用它,只需直接在需要的位置寫函數(shù)就ok了,代碼如下:













document.write()

<script type="text/javascript"> var a = 'hello'; document.write(a+"<br>"); document.write('world');</script>





警告彈窗

alert("字符串"); alert(變量名);例如

<script type="text/javascript"> alert("警告"); alert("第二條警告");</script>





confirm消息對(duì)話框

confirm 消息對(duì)話框通常用于允許用戶做選擇的動(dòng)作，如：“你對(duì)嗎？”等。彈出對(duì)話框(包括一個(gè)確定按鈕和一個(gè)取消按鈕)。

語法:

confirm("str");參數(shù)說明:

str：在消息對(duì)話框中要顯示的文本返回值: Boolean值返回值:

當(dāng)用戶點(diǎn)擊"確定"按鈕時(shí)，返回true當(dāng)用戶點(diǎn)擊"取消"按鈕時(shí)，返回false注: 通過返回值可以判斷用戶點(diǎn)擊了什么按鈕

看下面的代碼:

<script type="text/javascript"> var mymessage=confirm("你喜歡JavaScript嗎?"); if(mymessage==true) { document.write("很好,加油!"); } else { document.write("JS功能強(qiáng)大，要學(xué)習(xí)噢!"); }</script>





prompt消息對(duì)話框

彈出消息對(duì)話框,通常用于詢問一些需要與用戶交互的信息。彈出消息對(duì)話框（包含一個(gè)確定按鈕、取消按鈕與一個(gè)文本輸入框）。

prompt(str1,str2);str1: 要顯示在消息對(duì)話框中的文本，不可修改str2：文本框中的內(nèi)容，可以修改返回值:

1. 點(diǎn)擊確定按鈕，文本框中的內(nèi)容將作為函數(shù)返回值2. 點(diǎn)擊取消按鈕，將返回nullvar myname = prompt("請(qǐng)輸入姓名:");if(myname!=null) { alert("你好"+myname); }else { alert("你好我的朋友"); }





打開新窗口

window.open('URL','窗口名稱','參數(shù)字符串');窗口名稱：可選參數(shù)，被打開窗口的名稱。 1.該名稱由字母、數(shù)字和下劃線字符組成。 2."_top"、"_blank"、"_self"具有特殊意義的名稱。 _blank：在新窗口顯示目標(biāo)網(wǎng)頁 _self：在當(dāng)前窗口顯示目標(biāo)網(wǎng)頁 _top：框架網(wǎng)頁中在上部窗口中顯示目標(biāo)網(wǎng)頁 3.相同 name 的窗口只能創(chuàng)建一個(gè)，要想創(chuàng)建多個(gè)窗口則 name 不能相同。 4.name 不能包含有空格。參數(shù)字符串：可選參數(shù)，設(shè)置窗口參數(shù)，各參數(shù)用逗號(hào)隔開。例如:打開http://www.imooc.com網(wǎng)站，大小為300px * 200px，無菜單，無工具欄，無狀態(tài)欄，有滾動(dòng)條窗口：

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





關(guān)閉窗口

window.close(); //關(guān)閉本窗口窗口對(duì)象.close();//關(guān)閉指定窗口例如<script style="text/javascript"> var newWindow = window.open('http://www.imooc.com'); newWindow.close();</script>注意:上面代碼在打開新窗口的同時(shí)，關(guān)閉該窗口，看不到被打開的窗口。







DOM

獲取id

document.getElementById("這里是id");var myId = document.getElementById("這里是id");document.write("id的標(biāo)簽是"+myId);





innerHTML屬性

innerHTML 屬性用于獲取或替換 HTML 元素的內(nèi)容。

語法:

Object.innerHTML





使用js改變html的樣式

Object.style.屬性 = new style;Object是通過document.getElementById("id")獲取的元素對(duì)象





display屬性

Object.stytle.display = value ;value : none（不顯示該元素） block（以塊元素顯示）





控制類名

Object.className = 類名 ;