1. 程式人生 > >javascript 完整知識點整理(基於w3school教程)

javascript 完整知識點整理(基於w3school教程)

目錄

一 5種基本型別

JavaScript 變數均為物件。當您宣告一個變數時,就建立了一個新的物件。

undefined

//不賦值就是undefined型別
var testUndefined1;
//undefined型別唯一的值是undefined
var testUndefined = undefined;
//null型別唯一的值是null
var testNull = null;
//undefined “繼承”自 null
alert(testUndefined==testNull);//true

//boolean
var testBoobean = true;  
/*
資料型別    轉化成true的值   轉化成false的值
Boolean             ture    false
String      所有的非空字串                    ""(空字串)
Number  任何非零數字(包括無窮大)               0和NaN                                    
Object  任何物件    不存在
Undefined           不存在 undefined
*/
//string var testString = "Hello"; //number //所有 JavaScript 數字均為 64 位 // 整數(不使用小數點或指數計數法)最多為 15 位。 // 小數的最大位數是 17,但是浮點運算並不總是 100% 準確 var x=0.2+0.1;//!=0.3 010==8 0x10==16 1.0 .1//not recommended 2.3e7 /* 算數 round(double... x) //支援小數和負數的四捨五入 random(double... x) //0 到 1 之間的隨機數。 max(double... x)。 min(double... x) */ //var testNull = null;
var testObject = {a:1}; /* person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue"; */ //function //只要函式執行完畢,本地變數就會被刪除。 //函式內部宣告的變數(使用 var)是區域性變數,所以只能在函式內部訪問它。 //在函式外宣告的變數是全域性變數,網頁上的所有指令碼和函式都能訪問它。 var testFunction = function(){return;}; /* 例外: 如果您把值賦給尚未宣告的變數,該變數將被自動作為全域性變數宣告。 這條語句: carname="Volvo"; 將宣告一個全域性變數 carname,即使它在函式內執行。 */
//array var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo"; var cars=new Array("Audi","BMW","Volvo"); var cars=["Audi","BMW","Volvo"]; //javascript支援混合型別的陣列 var cars=[1,"s"]; for(i=0;i<cars.length;i++) { alert(typeof cars[i]); } //number string

 typeof 關鍵字

typeof 變數名返回字串
僅對undefined有效
alert(testUndefined == undefined)

通用:
alert(typeof testUndefined == “undefined”)

 三種強制型別轉換

Boolean(value)
Number(value)
String(value)

 日期

顯示十分秒

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
/*setTimeout() 只執行 code 一次。如果要多次呼叫,請使用 setInterval() 或者讓 code 自身再次呼叫 setTimeout()。*/
t=setTimeout('startTime()',500)//遞迴呼叫 HTML DOM setTimeout() 方法重新整理時間
}

function checkTime(i)
{
if (i<10)
  {i="0" + i}
  return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

二 if語句,for語句,while,do-while,switch-case

if, for, while, switch 都離不了比較運算子和邏輯運算子, js中的比較運算子和邏輯運算子和 Java 中的很像

 比較運算子

==
!=
=== 全等(值和型別)

x=5;
x===5 //為 true;
x==="5" //為 false

 邏輯運算子

&&
||
!
variablename=(condition)?value1:value2

 if, for語句, while, do-while, switch-case

//if
if (age<18) document.write("Too young");

if() {
    //
}else if() {
    //
}
else {
    //
}

//for
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}

//while
while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }

//do-while
do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5);

//switch
var day=new Date().getDay();
switch (day)
{
case 6:
  x="Today it's Saturday";
  break;
case 0:
  x="Today it's Sunday";
  break;
default:
  x="Looking forward to the Weekend";
}

三 JavaScript 是指令碼語言。瀏覽器會在讀取程式碼時,逐行地執行指令碼程式碼

四 Javascript 內建字串方法

"foo".length    //字串的長度
/*
anchor()    建立 HTML 錨。
big()   用大號字型顯示字串。
blink() 顯示閃動字串。
bold()  使用粗體顯示字串。
charAt()    返回在指定位置的字元。
charCodeAt()    返回在指定的位置的字元的 Unicode 編碼。
concat()    連線字串。
fixed() 以打字機文字顯示字串。
fontcolor() 使用指定的顏色來顯示字串。
fontsize()  使用指定的尺寸來顯示字串。
fromCharCode()  從字元編碼建立一個字串。
indexOf()   檢索字串。
italics()   使用斜體顯示字串。
lastIndexOf()   從後向前搜尋字串。
link()  將字串顯示為連結。
localeCompare() 用本地特定的順序來比較兩個字串。
match() 找到一個或多個正則表示式的匹配。
replace()   替換與正則表示式匹配的子串。
search()    檢索與正則表示式相匹配的值。
slice() 提取字串的片斷,並在新的字串中返回被提取的部分。
small() 使用小字號來顯示字串。
split() 把字串分割為字串陣列。
strike()    使用刪除線來顯示字串。
sub()   把字串顯示為下標。
substr()    從起始索引號提取字串中指定數目的字元。
substring() 提取字串中兩個指定的索引號之間的字元。
sup()   把字串顯示為上標。
toLocaleLowerCase() 把字串轉換為小寫。
toLocaleUpperCase() 把字串轉換為大寫。
toLowerCase()   把字串轉換為小寫。
toUpperCase()   把字串轉換為大寫。
toSource()  代表物件的原始碼。
toString()  返回字串。
valueOf()   返回某個字串物件的原始值。
*/

其中,支援正則表示式的 String 物件的方法
search() 檢索與正則表示式相匹配的值
match() 找到一個或多個正則表示式的匹配
replace() 替換與正則表示式匹配的子串
split() 把字串分割為字串陣列

 正則表示式

new RegExp(pattern, attributes); 引數pattern
引數attributes
如果 pattern 是正則表示式,而不是字串,則必須省略該引數。attributes可以是 “g”、”i” 和 “m”,分別用於指定全域性匹配、區分大小寫的匹配和多行匹配。

以下程式碼定義了名為 patt1 的 RegExp 物件,其檢索模式模式是 - 字串 “e”:

var patt1=new RegExp("e");

RegExp 物件有 3 個方法:test()、exec() 以及 compile()。

test() 方法檢索字串中的指定值。返回值是 true 或 false。類似java Regex類的find()方法

exec() 方法檢索字串中的指定值。返回值是被找到的值。如果沒有發現匹配,則返回 null。類似java Regex類的group() 方法

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
//增加模式d
patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

五 JavaScript 錯誤 - Throw、Try 和 Catch

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()">
</body>

</html>

 throw

throw exception

異常可以是 JavaScript 字串、數字、邏輯值或物件。

六 Javascript驗證

E-mail 驗證

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>

七 HTML DOM操作

本例查詢 id=”main” 的元素,然後查詢 “main” 中的所有<p> 元素:

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

本例改變了 元素的 src 屬性:

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

 操作css

下面的例子會改變

元素的樣式:

<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

<p>上面的段落已被一段指令碼修改。</p>

</body>
</html>

 通過css的visibility屬性隱藏 DOM 節點

<!DOCTYPE html>
<html>
<body>

<p id="p1">這是一段文字。</p>

<input type="button" value="隱藏文字" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="顯示文字" onclick="document.getElementById('p1').style.visibility='visible'" />

</body>
</html>

八 事件

 使用 js 來分配事件觸發那個函式

HTML DOM 允許您通過使用 JavaScript 來向 HTML 元素分配事件:
例項
向 button 元素分配 onclick 事件:

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

 onload 和 onunload 事件

onload 和 onunload 事件會在使用者進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器型別和瀏覽器版本,並基於這些資訊來載入網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。
例項

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("已啟用 cookie")
    }
else
    {
    alert("未啟用 cookie")
    }
}
</script>

<p>提示框會告訴你,瀏覽器是否已啟用 cookie。</p>
</body>
</html>

 onchange(輸入框內容改變,失去焦點時自動觸發)onfocus

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

請輸入英文字元:<input type="text" id="fname" onchange="myFunction()">
<p>當您離開輸入欄位時,會觸發將輸入文字轉換為大寫的函式。</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>

請輸入英文字元:<input type="text" onfocus="myFunction(this)">

<p>當輸入欄位獲得焦點時,會觸發改變背景顏色的函式。</p>

</body>
</html>

 onmouseover onmouseout(滑鼠事件)

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把滑鼠移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="謝謝"
}

function mOut(obj)
{
obj.innerHTML="把滑鼠移到上面"
}
</script>

</body>
</html>

 onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 構成了滑鼠點選事件的所有部分。首先當點選滑鼠按鈕時,會觸發 onmousedown 事件,當釋放滑鼠按鈕時,會觸發 onmouseup 事件,最後,當完成滑鼠點選時,會觸發 onclick 事件。

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">請點選這裡</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="請釋放滑鼠按鈕"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="請按下滑鼠按鈕"
}
</script>

</body>
</html>

九 操作DOM節點(HTML標籤)

 建立

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

 刪除

刪除已有的 HTML 元素
如需刪除 HTML 元素,您必須首先獲得該元素的父元素:

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

DOM 需要清楚您需要刪除的元素,以及它的父元素。
這是常用的解決方案:找到您希望刪除的子元素,然後使用其 parentNode 屬性來找到父元素:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

十 物件

JavaScript 是面向物件的語言,但 JavaScript 不使用類。
在 JavaScript 中,不會建立類,也不會通過類來建立物件(就像在其他面向物件的語言中那樣)。
JavaScript 基於 prototype,而不是基於類的。

<!DOCTYPE html>
<html>
<body>

//建構函式
<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
function changeName(name)
{
this.lastname=name;
}
}

myFather=new person("Bill","Gates",56,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

</body>
</html>

 遍歷屬性(Java反射!)

<script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};

for (x in person)
{
txt=txt + person[x];
}

document.getElementById("demo").innerHTML=txt;
}
</script>

十一 Browser Object Model

window
screen
location
history
navigator
popupAlert
Timing
Cookies

十二 JS庫

請參考jQuery, AngularJS, React教程

現在主流從 jQuery 慢慢轉向 AngularJS 和 React

十三 AJAX

asynchronous javascript and xml

2005 年穀歌提出,應用在搜尋時提供搜尋建議

事件驅動函式loadXMLDoc()

XMLHttpRequest 物件()

xmlhttp=new XMLHttpRequest();

通過 xmlhttp.responseText 屬性獲得伺服器返回字串
eval將字串轉成物件陣列 json = eval(json);

通過 xmlhttp.responseXML 獲得 XML 形式的響應資料。

 open(method,url,async)

規定請求的型別、URL 以及是否非同步處理請求。

method:請求的型別;GET 或 POST. 傳送包含未知字元的使用者輸入時,POST 比 GET 更穩定也更可靠

url:檔案在伺服器上的位置. 通常是php或asp. 路徑是相對於網站根目錄的.
async:true(非同步)或 false(同步)

 async=true

必須是true非同步
通過 AJAX,JavaScript 無需等待伺服器的響應,而是:
在等待伺服器響應時執行其他指令碼
當響應就緒後對響應進行處理

當使用 async=true 時,請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函式:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

每當 readyState 改變時,就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態資訊。

0: 請求未初始化
1: 伺服器連線已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成,且響應已就緒

 async=false

Async = false
如需使用 async=false,請將 open() 方法中的第三個引數改為 false:
xmlhttp.open(“GET”,”test1.txt”,false);
我們不推薦使用 async=false,但是對於一些小型的請求,也是可以的。
請記住,JavaScript 會等到伺服器響應就緒才繼續執行。如果伺服器繁忙或緩慢,應用程式會掛起或停止。
註釋:當您使用 async=false 時,請不要編寫 onreadystatechange 函式 - 把程式碼放到 send() 語句後面即可:
xmlhttp.open(“GET”,”test1.txt”,false);
xmlhttp.send();
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

 send(string)

將請求傳送到伺服器。

string:僅用於 POST 請求

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

 使用 Callback 函式

該函式呼叫應該包含 URL 以及發生 onreadystatechange 事件時執行的任務(每次呼叫可能不盡相同):

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    xmlhttp.onreadystatechange=cfunc;
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

function myFunction()
{
    loadXMLDoc(
        "/ajax/test1.txt",
        function()
        {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
              document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }
    );
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通過 AJAX 改變內容</button>

</body>
</html>

AJAX 小例子 - 搜尋提示

技術細節:
1. 輸入框的onkeyup事件
2. 傳送get請求 “/ajax/gethint.asp?q=” + str
3. `

建議:

<html>
<head>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h3>請在下面的輸入框中鍵入字母(A - Z):</h3>
<form action="">
姓氏:<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>建議:<span id="txtHint"></span></p>

</body>
</html>

 伺服器端 php檔案

<?php
// 用名字來填充陣列
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//獲得來自 URL 的 q 引數
$q=$_GET["q"];

//如果 q 大於 0,則查詢陣列中的所有提示
if (strlen($q) > 0)
  {
  $hint="";
  for($i=0; $i<count($a); $i++)
    {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
      {
      if ($hint=="")
        {
        $hint=$a[$i];
        }
      else
        {
        $hint=$hint." , ".$a[$i];
        }
      }
    }
  }

// 如果未找到提示,則把輸出設定為 "no suggestion"
// 否則設定為正確的值
if ($hint == "")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//輸出響應
echo $response;
?>

 AJAX 資料庫

<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form action="" style="margin-top:15px;">
<label>請選擇一位客戶:
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</label>
</form>
<br />
<div id="txtHint">客戶資訊將在此處列出 ...</div>

</body>
</html>

 伺服器端 php檔案

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")
%>