The first glance at JavaScript

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

＞＞在哪裡放置 JavaScript

JavaScript可以放置在Head或者Body之中，也可以從外部參考。

HTML內嵌JavaScript

<html><head><script type="text/javascript">document.write("<h1>This is a header</h1>"); </script></head><body><script type="text/javascript">document.write("<p>This is a body</p>");</script>
<script type="text/javascript">
//Write a "Good afternoon" greeting if
//the time is larger than 12
var d=new Date()
var time=d.getHours()
if (time>12) {
    document.write("<b>Good afternoon</b>");
}
</script></body></html>

外部參考JavaScript

把 .js 檔案放到網站目錄中通常存放指令碼的子目錄中，這樣更容易管理和維護。

<html><head><script type="text/javascript" src="externaljs.js">....</script></head><body></body></html>

不過，從Performance的角度來看，無論是哪種方式，都放盡量發在Html Body的最後部分，免得Loading JavaScript會block影響整個html頁面的loading。

>> Values/Types

Booleans: true/false

Numbers: 1, 1.0

Strings: "abc", 'abc'

Functions:

    function twice(x) {        return 2 * x;    }    console.log(twice(4)); // 8

Objects:

var obj = {        propName1: 123,        propName2: "abc"};obj.propName1 = 456;obj["propName1"] = 456; // same as previous statement

Arrays:

var arr = [true, "abc", 123];console.log(arr[1]); // abcconsole.log(arr.length); // 3

undefined

null

>>條件控制

if- else if - else:

<script type="text/javascript">var d = new Date();var time = d.getHours();if (time<10){    document.write("<b>Good morning</b>");}else if (time>10 && time<16){   document.write("<b>Good day</b>");}else{   document.write("<b>Hello World!</b>");}</script>

switch - case

<script type="text/javascript">//You will receive a different greeting based//on what day it is. Note that Sunday=0,//Monday=1, Tuesday=2, etc.var d=new Date();theDay=d.getDay();switch (theDay) {   case 5:     document.write("Finally Friday")     break   case 6:     document.write("Super Saturday")     break   case 0:     document.write("Sleepy Sunday")     break   default:     document.write("I'm looking forward to this weekend!")}</script>

>>迴圈控制

for loop:

<script type="text/javascript">var i=0;for (i=0;i<=10;i++){    document.write("The number is " + i);    document.write("<br />");}</script>

while:

<script type="text/javascript">var i=0while (i<=10){    document.write("The number is " + i);    document.write("<br />");    i=i+1;}</script>

do-while:

<script type="text/javascript">var i=0while (i<=10){    document.write("The number is " + i);    document.write("<br />");    i=i+1;}</script>

for ... in:

<script type="text/javascript">var x;var mycars = new Array();mycars[0] = "Saab";mycars[1] = "Volvo";mycars[2] = "BMW";for (x in mycars){    document.write(mycars[x] + "<br />");}</script>

break - continue:

<script type="text/javascript">var i=0;for (i=0;i<=10;i++){    if (i == 3){       break;    }    if(i == 4){        continue;    }    document.write("The number is " + i);    document.write("<br />");}</script>

>> Event

onload/onUnload:

onload在匯入頁面的時候觸發，而onUnload則是在退出的時候觸發。

onFocus, onBlur 和 onChange：

通常相互配合用來驗證表單。

onSubmit

用於在提交表單之前驗證所有的表單域。

onMouseOver 和 onMouseOut

常用來用來建立“動態”按鈕。

>> Error Handling

Exception(try/catch, throw):

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
    if(x>10) 
        throw "Err1"
    else if(x<0)
        throw "Err2"
  }
catch(err)
  {
      txt="Unexcepted error found\n\n"
      txt+="Description: " + err.description + "\n\n"
      txt+="Choose OK to continue.\n\n"
      alert(txt)
  }
}
</script>
</head>

onerror:

<html><head><script type="text/javascript">onerror=handleErrvar txt=""function handleErr(msg,url,l){    txt="There was an error on this page.\n\n";    txt+="Error: " + msg + "\n";    txt+="URL: " + url + "\n";    txt+="Line: " + l + "\n\n";    txt+="Click OK to continue.\n\n";    alert(txt);    return true;}function message(){adddlert("Welcome guest!");}</script></head><body><input type="button" value="View message" onclick="message()" /></body></html>

>> More Materials:

JavaScript: The good part

Javascript 編程風格

JavaScript記憶體泄露

JavaScript W3C School

A quick overview of JavaScript

Major and minor JavaScript pitfalls and ECMAScript 6

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More