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

什麼是變數？

變數是用於儲存資訊的容器

變數的聲明

文法：

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：選擇性參數，在視窗中要顯示網頁的網址或路徑。如果省略這個參數，或者它的值是Null 字元串，那麼視窗就不顯示任何文檔。

視窗名稱：選擇性參數，被開啟視窗的名稱。

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('http://www.jb51.net'); //將新打的視窗對象，儲存在變數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屬性）

文法：

Object.style.display = value

value值：

none 此元素不會被顯示（及隱藏）

block 此元素將顯示為區塊層級元素（即顯示）

mychar.style.display = "block"

控制類名（className屬性）
className屬性設定或返回元素的class屬性。
文法：

object.className = classname

作用：
1、擷取元素的class屬性
2、為網頁內的某個元素指定一個css樣式來更改該元素的外觀

p2.className = "two";

以上這篇Javascript基礎學習筆記(菜鳥必看篇)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。