Javascript基礎學習筆記(菜鳥必看篇)

2019-11-20 09:26:07

字體：大中小

來源：轉載

供稿：網友

什么是變量？

變量是用于存儲信息的容器

變量的聲明

語法：

var 變量名

變量名 = 值;

變量要先聲明再賦值

變量可以重復賦值

變量的命名規則

變量必須以字母開頭；

變量也能以$和_符號開頭（不過我們不推薦這么做）；

變量名稱對大小寫敏感（a和A是不同的變量)。

語句

語句以一個分號結尾；如果省略分號，則由解析器確定語句的結尾。

有個好的編碼習慣，都要以 ; 結尾

數據類型

在JavaScript中，一段信息就是一個值（value）。值有不同的類型，大家最熟悉的類型是數字。字符串（string）值是包圍在

引號中的一個或多個單詞。

數字任何數字值。數字可以帶小數點，也可以不帶 68.57

字符串引號中的字符。您可以使用單引號或雙引號 "hello, world"

布爾值（Boolean） true或false true

Undefined 和 Null Undefined 這個值表示變量不含有值。可以通過將變量的值設置為 null 來清空變量。

對象與對象相關聯的任何值

函數函數返回的值

1 var a; //a為undefined2 var a = 6; //a 為數字3 var a = "Jason"; // a 為字符串

什么是函數？

函數是一組執行某一任務的JavaScript 語句

基本語法：

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

函數名();

說明：

function定義函數關鍵字。

"函數名"你為函數取的名字。

"函數代碼"替換為完成特定功能的代碼。

"第二個函數名"函數調用的一種

1 function add2(){2 var sun = 3 + 2;3 alert(sun);4 }5 add2();//調用函數直接寫函數名直接彈出函數代碼

1 <input type="button" value="點擊我" onclick="add2()" />2 <!-- 單擊按鈕后，調用函數，onclick為點擊事件 -->

輸出內容（document.write）

document.write()直接在網頁中輸出內容。

第一種：輸出內容用“”括起，直接輸出“”號內的內容。

document.write("I love JavaScript!");

第二種：通過變量，輸出內容

var mystr = "hello world";document.write(mysrt);//直接寫變量名，輸出變量存儲的內容

第三種：輸出多項內容，內容之間用+號連接。

var mystr = "hello";document.write(mystr + "I love Java Script");//多項內容之間用+號連接

第四種:輸出HTML標簽，并起作用，標簽使用“”括起來。

var mystr="hello";document.write(mystr+"<br>");//輸出hello后，輸出一個換行符document.write("JavaScript");

警告（alert 消息對話框）

我們在訪問網站的時候，有時會突然彈出一個小窗口，上面寫著一段提示信息文字。如果你不點擊“確定”，就不能對網頁做任

何操作，這個小窗口就是使用alert實現的。

語法：alert(字符串或變量);

var mynum = 30;alert("hello!");alert(mynum);

結果：按順序彈出消息框（alert彈出消息對話框包含一個確定按鈕）

注意:

1. 在點擊對話框"確定"按鈕前，不能進行任何其它操作。

2. 消息對話框通常可以用于調試程序。

3. alert輸出內容，可以是字符串或變量，與document.write 相似

確認選擇（confirm 消息對話框）

除了向用戶提供信息，我們還希望從用戶那里獲得信息。這里就用到了confirm 消息對話框。

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

語法：confirm(str);

參數說明：str:在消息對話框中要顯示的文本返回值：Boolean值

返回值：

當用戶點擊"確定"按鈕時，返回true

當用戶點擊"取消"按鈕時，返回false

注: 通過返回值可以判斷用戶點擊了什么按鈕

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

提問（prompt 消息對話框）

有時候，不僅希望用戶回答Yes/No。而是希望得到更特定的響應。這中情況我們可以利用prompt。

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

語法：

prompt(str1,str2);

參數說明：

str1:要顯示在消息對話框中的文本，不可修改

str2:文本框中的內容，可以修改

返回值：

1、點擊確定按鈕，文本框中的內容將作為函數返回值

2、點擊取消按鈕，將返回null

function rec(){  var score; //score變量，用來存儲用戶輸入的成績值。  score = prompt("請輸入你的成績","90");  if(score>=90){    document.write("你很棒!");  }else if(score>=75){    document.write("不錯吆!");  }else if(score>=60){    document.write("要加油!");  }else{    document.write("要努力了!");  };} ;

<script>    var myName = prompt("輸入您的名字");     if(myName != null && myName != ""){      document.write("welcom to" + myName);    }else{      document.write("welcom to my friend");    }</script>

打開新窗口（window.open）

語法：

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

參數說明:

URL：可選參數，在窗口中要顯示網頁的網址或路徑。如果省略這個參數，或者它的值是空字符串，那么窗口就不顯示任何文檔。

窗口名稱：可選參數，被打開窗口的名稱。

1.該名稱由字母、數字和下劃線字符組成。

2.窗口名稱：可選,該字符串是一個由逗號分隔的特征列表，聲明了被打開窗口的名稱。可以

是"_top"、"_blank"、"_selft"、"_parent"等。

_blank 在新窗口顯示目標網頁

_selft 在當前窗口顯示目標網頁

_parent 框架網頁中當前整個窗口位置顯示目標網頁

_top 框架網頁中在上部窗口中顯示目標網頁

3.相同 name 的窗口只能創建一個，要想創建多個窗口則 name 不能相同。

4.name 不能包含有空格。

參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。

參數表：

top　　　　Number　　窗口頂部離開屏幕頂部的像素數
left　　　　Number　　窗口左端離開屏幕左端的像素數
width　　　　Number　　窗口的寬度
height　　　　Number　　窗口的高度
menubar　　　　yes,no　　窗口有沒有菜單
toolbar　　　　yes,no　　窗口有沒有工具條
scrollbars　　　　yes,no　　窗口有沒有滾動條
status　　　　　　yes,no　　窗口有沒有狀態欄

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

關閉窗口（window.close）

close()關閉窗口

用法：

1 window.close();//關閉本窗口2 <窗口對象>.close();//關閉指定的窗口

例如:關閉新建的窗口。

1 <script type="text/javascript">2   var mywin=window.open('//m.survivalescaperooms.com'); //將新打的窗口對象，存儲在變量mywin中3   mywin.close();4 </script>

innerHTML屬性

innerHTML屬性用于獲取或替換HTML元素的內容。

語法：

 Object.innerHTML

Object是獲取的元素對象，如通過document.getElementById("ID")獲取元素。

<h2 id="con">javascript</H2>

<script type="text/javascript">　　var mychar=document.getElementById("con");　　document.write("原標題:"+mychar.innerHTML+"<br>"); //輸出原h2標簽內容　　mychar.innerHTML="hello world"　　document.write("修改后的標題:"+mychar.innerHTML); //輸出修改后h2標簽內容</script>

改變HTML樣式

語法：

Object.style.property=new style;

注意：Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素

<h2 id="con">I love JavaScript</h2>

<script type="text/javascript">  var mychar= document.getElementById("con");  mychar.style.color="red";  mychar.style.background="#ccc";  mychar.style.width="300px";</script>

顯示和隱藏（display屬性）

語法：