转载 JavaScript Tutorial

karon_fedora

           注意：这个篇文章是rabbit_guang翻译的，虽然还有写完，虽然偶们都是小K,但是我们很努力
  JavaScript Tutorial
  JavaScript Tutorial ——指南
  
  
   
      

   
   
      
        JavaScript is the scripting language of the Web!
        JavaScript是一种工作在Web页面的脚本语言！
      
      
        JavaScript is used in millions of Web pages to improve the design,
        validate forms, detect browsers, create cookies, and much more.
      
      
        JavaScript已经在无数Web页面发挥着作用，他们提升设计效果、验证表单、检测浏览器、创建cookies，等等等等。
      
      
        JavaScript is the most popular scripting language on the
        internet.
        JavaScript是Internet上最流行的脚本语言。
      
      
        JavaScript is easy to learn! You will enjoy it!
        JavaScript容易上手！您可以轻松享受！
      
      
      
      
        Start learning
        JavaScript now!
        
现在开始学习

JavaScript

！

      
   
  
  
  JavaScript Examples ——举例
  Learn by 100 examples! With our editor, you can edit the source code, and
  click on a test button to view the result.
  JavaScript学习100例！通过你的编辑器，您可以编辑源代码，并通过点击测试键（test）看到结果。

• 
      JavaScript Examples
      ——JavaScript例子
     
    
• 
      JavaScript Object
      Examples ——JavaScript对象例子
    
• 
      JavaScript DOM
      Examples ——JavaScript DOM 例子
     
    

  JavaScript Quiz Test ——测试
  Test your JavaScript skills at W3Schools!
  在W3Schools测试您的JavaScript技术！
  Start JavaScript Quiz!
  开始测试JavaScript
  JavaScript References ——JavaScript说明（rfc?）
  At W3Schools you will find complete references of all JavaScript objects and
  the HTML DOM objects.
  您可以在W3Schools找到全部JavaScript的对象和HTML
  Dom
  对象的完整文档。

• 
      Complete reference of
      all JavaScript objects. With examples!
      ——
  带例子的全部
  
  JavaScript
  
  对象完整文档
  
    
• 
      Complete
      reference of all HTML DOM objects. With examples!
      ——
  带例子的全部
  HTML
      DOM
  对象完整文档
  
     
    

  Introduction to JavaScript ——JavaScript介绍

  JavaScript is used in millions of Web pages to improve the design, validate
  forms, detect browsers, create cookies, and much more.
  JavaScript已经在无数Web页面发挥着作用，他们提升设计效果、验证表单、检测浏览器、创建cookies，等等等等
  JavaScript is the most popular scripting language on the internet, and works
  in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape,
  and Opera.
  JavaScript是Internet上最流行的脚本语言，并且在主流浏览器上都能运行，比如IE，Mozilla，Firefox,Netscape，Opera。
  What You Should Already Know ——需要首先掌握的知识
  Before you continue you should have a basic understanding of the following:
  在您开始学习之前，首先应该对下列知识有一些了解

• 
      HTML / XHTML
    

  If you want to study these subjects first, find the tutorials on our
  
Home page
.
  如果您打算先学习这些课题，可以在我们的主页上找到相关指南
  What is
  JavaScript?JavaScript是什么？

• 
      JavaScript was designed to add interactivity to HTML pages
     
        JavaScript是为了增强HTML页面的交互性而出现的
     
    
• 
      JavaScript is a scripting language
     
        JavaScript是一种脚本语言
     
    
• 
      A scripting language is a lightweight programming language
     
        脚本语言是一种轻量级的程序语言
     
    
• 
      A JavaScript consists of lines of executable computer code
     
        JavaScript最终成为可执行的机器代码中的一部分
     
    
• 
      A JavaScript is usually embedded directly into HTML pages
     
        JavaScript通常直接嵌入到HTML页面中
     
    
• 
      JavaScript is an interpreted language (means that scripts execute without
      preliminary compilation)
     
        JavaScript是一种解释性语言（这意味着脚本的执行将不需要进行另外的编译）
     
    
• 
      Everyone can use JavaScript without purchasing a license
     
        任何人都可以使用JavaScript而不需要购买什么许可^_^
     
    

  Are Java and JavaScript the Same?
  Java和JavaScript一样么？
  NO!
  不一样！
  Java and JavaScript are two completely different languages in both concept and
  design!
  无论是从概念还是从设计上看，Java与JavaScript都是两种完全不同的语言
  Java (developed by Sun Microsystems) is a powerful and much more complex
  programming language - in the same category as C and C++.
  Java（Sun公司设计出来的东西）是一种强大的并且十分复杂的程序语言——与C、C++属于同一家族
  What can a JavaScript Do?
  JavaScript能做什么？

• 
      JavaScript gives HTML designers a programming tool - HTML authors are
      normally not programmers, but JavaScript is a scripting language with a very
      simple syntax! Almost anyone can put small "snippets" of code into their
      HTML pages
     
        JavaScript为HTML设计人员提供了一种编程工具——HTML作者通常并不是程序员，而JavaScript这种脚本语言使用的语法非常简单！啥人都能在HTML页面中写这么个小玩意儿出来
     
    
• 
      JavaScript can put dynamic text into an HTML page - A JavaScript
      statement like this: document.write("" + name + "") can
      write a variable text into an HTML page
     
        JavaScript可以把动态文本插入到HTML页面中——如果想写入一段动态文本，JavaScript段就是是介个样子滴：document.write(""
        + name + "")
     
    
• 
      JavaScript can react to events - A JavaScript can be set to execute
      when something happens, like when a page has finished loading or when a user
      clicks on an HTML element
     
        可以通过时间重新激活JavaScript——可以设定JavaScript在某件事情发生时随之执行，比如页面载入完成啦，或者用户点击了HTML上的什么东东啦
     
    
• 
      JavaScript can read and write HTML elements - A JavaScript can read
      and change the content of an HTML element
     
        JavaScript可以对HTML元素进行读写——JavaScript可以读取甚至改变HTML元素的内容
     
    
• 
      JavaScript can be used to validate data - A JavaScript can be used to
      validate form data before it is submitted to a server. This saves the server
      from extra processing
     
        JavaScript可以拿来验证数据——在表单提交到数据库之前，我们可以用JavaScript来验证表单数据。这样做可以降低服务器的负荷
     
    
• 
      JavaScript can be used to detect the visitor's browser - A JavaScript
      can be used to detect the visitor's browser, and - depending on the browser
      - load another page specifically designed for that browser
     
        JavaScript可以检测访问者的浏览器——JavaScript可以检测访问者的浏览器，并且加载一个为这个浏览器设计的页面
     
    
• 
      JavaScript can be used to create cookies - A JavaScript can be used
      to store and retrieve information on the visitor's computer
     
        JavaScript可以创建cookies——JavaScript可以存储和查询存放在访问者的电脑中的（cookies）信息
     
     
    

  JavaScript How To ... JavaScript 怎么写

  The HTML  tag is used to insert a JavaScript into an HTML page.
  HTML中使用标签将JavaScript插入到HTML页面中。
  Examples 例子
  Write
  text 写一段文本
  How to write text on a page. 如何在页面上写一段文字。
  Write
  text with formatting 写带格式的文本
  How to format the text on your page with HTML tags.
  如何在你的页面上使用HTML标签写一段带格式的文本内容。
  How to Put a JavaScript Into an HTML Page 如何把一段JavaScript代码加入到HTML页面中
  
  
   
      
document.write("Hello World!")
   
  
  
  The code above will produce this output on an HTML page:
  上面这段代码将在HTML页面上产生这样一段输出效果：
  
  
   
      Hello World!
   
  
  
  Example Explained 例子解释
  To insert a JavaScript into an HTML page, we use the  tag (also
  use the type attribute to define the scripting language).
  我们可以通过 标签将JavaScript插入到HTML页面中。（同时还要用 type 属性定义使用的脚本语言）
  So, the  and  tells where
  the JavaScript starts and ends:
  像这样用和声明JavaScript的起止：
  
  
   
      
...
   
  
  
  The word document.write is a standard JavaScript command for writing
  output to a page.
  document.write 这段字是JavaScript向页面输出内容的标准命令。
  By entering the document.write command between the  and  tags, the browser will
  recognize it as a JavaScript command and execute the code line. In this case
  the browser will write Hello World! to the page:
  通过在  和  标签之间输入
  document.write 命令，浏览器会自动识别这段JavaScript命令并执行。下面演示了通过这种方法在页面中输出Hello world！
  
  
   
      
document.write("Hello World!")
   
  
  
  Note: If we had not entered the  tag, the browser would
  have treated the document.write("Hello World!") command as pure text, and just
  write the entire line on the page.
  注意：如果我们没有输入标签，浏览器会将 document.write("Hello World!")
  这段命令当作一段纯文本内容，并且直接把这条命令整行输出到页面上。
  Ending Statements With a Semicolon?  用分号作语句结尾？
  With traditional programming languages, like C++ and Java, each code statement
  has to end with a semicolon.
  像C++和Java这类复杂的程序语言中，通常是用分号作为一个表达式或者语句的结尾
  Many programmers continue this habit when writing JavaScript, but in general,
  semicolons are optional! However, semicolons are required if you want
  to put more than one statement on a single line.
  在写JavaScript的时候很多程序员希望延续这种习惯，尽管分号并不是必需的，然而，当您输入的是不止一个语句的时候，那么使用分号仍然是必要的。
  How to Handle Older Browsers  老版本浏览器怎么办
  Browsers that do not support JavaScript will display the script as page
  content. To prevent them from doing this, we may use the HTML comment tag:
  不支持JavaScript的浏览器会把脚本作为页面内容输出的。要防止这种情况，我们可以使用下面这个HTML标签：
  
  
   
      
   
  
  
  The two forward slashes at the end of comment line (//) are a JavaScript
  comment symbol. This prevents the JavaScript compiler from compiling the line.
  命令行前面的两个正斜杠是JavaScript的注释标记。这将防止JavaScript编译器编译这一行。
  JavaScript Where To ...  JavaScript 应该写在哪

  JavaScripts in the body section will be executed WHILE the page loads.
  写在body段里的JavaScript会在页面读取过程中执行。
  JavaScripts in the head section will be executed when CALLED.
  写在head段里的JavaScript会在被调用的时候执行
  Examples  例子
  Head
  section
  Scripts that contain functions go in the head section of the document. Then we
  can be sure that the script is loaded before the function is called.
  包含函数的脚本写在文档的head段。在函数被调用之前，脚本就已经被加载好了，可以随时调用
  Body
  section
  Execute a script that is placed in the body section.
  执行放在body段里的脚本。
  External
  script
  How to access an external script.
  如何访问外部脚本。
  Where to Put the JavaScript 该把JavaScript放在哪
  JavaScripts in a page will be executed immediately while the page loads into
  the browser. This is not always what we want. Sometimes we want to execute a
  script when a page loads, other times when a user triggers an event.
  可能有时候我们会对JavaScript的执行时间有些自己的想法：有时候我们不希望页面上的JavaScript在浏览器加载的时候立刻执行，但也可能有时候我们希望在页面加载的时候就执行一些脚本。
  Scripts in the head section: Scripts to be executed when they are
  called, or when an event is triggered, go in the head section. When you place
  a script in the head section, you will ensure that the script is loaded before
  anyone uses it.
  写在和head段的脚本：head段里的脚本在被调用的时候执行，或者在事件被触发的时候执行。不过放在head段的脚本，却是在被调用前就加载好的。
  
  
   
      
....
   
  
  
  Scripts in the body section: Scripts to be executed when the page loads
  go in the body section. When you place a script in the body section it
  generates the content of the page.
  body段的脚本：body段里的脚本在页面加载的时候就立刻执行了。当你把脚本放在body段里的时候，它会生成一些页面的内容。
  
  
   
      
....
   
  
  
  Scripts in both the body and the head section: You can place an
  unlimited number of scripts in your document, so you can have scripts in both
  the body and the head section.
  body和head段都可以有脚本：你可以在你的文档中安排若干个脚本，所以在head和body段里可以同时各自写有脚本。
  
  
   
      
....
....
   
  
  
  Using an External JavaScript  使用外部JavaScript
  Sometimes you might want to run the same JavaScript on several pages, without
  having to write the same script on every page.
  有时您可能想要在不同的页面执行同一个Javascript，而又不想在每一个页面分别写一次同样的脚本。
  To simplify this, you can write a JavaScript in an external file. Save the
  external JavaScript file with a .js file extension.
  为了简化这种工作，您可以使用外部JavaScript。把外部JavaScript文件保存到一个以.js为扩展名的文件中。
  Note: The external script cannot contain the  tag!
  注意：外部脚本不能包含标签！
  To use the external script, point to the .js file in the "src" attribute of
  the  tag:
  使用外部脚本时，需要在标签中将.js文件在“src”属性中指明：
  
  
   
      
   
  
  
  Note: Remember to place the script exactly where you normally would
  write the script!
  注意：记得把脚本放在你平时写脚本的地方
  JavaScript Variables  JavaScript中的变量

  A variable is a "container" for information you want to store.
  变量是您用来存储信息的容器。
  Examples 例子
  Variable
  变量
  Variables are used to store data. This example will show you how.
  变量是用来存储数据的。这个例子向您展示如何使用。
  Variables  变量
  A variable is a "container" for information you want to store. A variable's
  value can change during the script. You can refer to a variable by name to see
  its value or to change its value.
  变量是您用来存储信息的一个容器。在脚本执行过程中，变量的值是可以改变的。无论值怎么变，您都可以通过变量名来使用这个变量。
  Rules for variable names:  变量命名规则：

• 
      Variable names are case sensitive  变量名是大小写敏感的
    
• 
      They must begin with a letter or the underscore character  必须以字母或下划线开头
    

  IMPORTANT! JavaScript is case-sensitive! A variable named strname is
  not the same as a variable named STRNAME!
  重要信息！JavaScript是大小写敏感的！比如strname和STRNAME这两个变量是不一样的！
  Declare a Variable 声明变量
  You can create a variable with the var statement: 您可以通过下述var语句建立变量：
  
  
   
      var strname = some value
   
  
  
  You can also create a variable without the var statement:
  您也可以通过这种没有var的语句建立变量
  
  
   
      strname = some value
   
  
  
  Assign a Value to a Variable  给变量赋值
  You can assign a value to a variable like this:  可以这样赋值：
  
  
   
      var strname = "Hege"
   
  
  
  Or like this:  这样也行：
  
  
   
      strname = "Hege"
   
  
  
  The variable name is on the left side of the expression and the value you want
  to assign to the variable is on the right. Now the variable "strname" has the
  value "Hege".
  变量名必须写在赋值表达式左边。
  Lifetime of Variables  变量的生命周期
  When you declare a variable within a function, the variable can only be
  accessed within that function. When you exit the function, the variable is
  destroyed. These variables are called local variables. You can have local
  variables with the same name in different functions, because each is
  recognized only by the function in which it is declared.
  当您在一个函数中声明了一个变量，那么这个变量只能在函数内部使用，函数结束的时候这个变量就被销毁。这叫做局部变量。您也可以在不同函数中用相同的变量名再声明一个变量，因为只有在函数内部才能识别这个变量。
  If you declare a variable outside a function, all the functions on your page
  can access it. The lifetime of these variables starts when they are declared,
  and ends when the page is closed.
  如果您在函数外部声明了一个变量，那么所有的函数都能访问这个变量。这个变量的生命周期从声明时开始，直到页面关闭时才结束。
  JavaScript If...Else Statements  JavaScript 的 if…else 条件表达式

  Conditional statements in JavaScript are used to perform different actions
  based on different conditions.
  JavaScript的条件表达式用来对不同条件作出不同响应。
  Examples 例子
  If
  statement If 表达式
  How to write an if statement.  如何写if表达式
  If...else
  statement  If...else表达式
  How to write an if...else statement.  如何写if...else表达式。
  If..else
  if...else statement
  If..else
  if...else表达式
  How to write an if..else if...else statement. 如何写 if..else if...else 表达式
  Random
  link 随即链接
  This example demonstrates a link, when you click on the link it will take you
  to W3Schools.com OR to RefsnesData.no. There is a 50% chance for each of them.
  这个例子演示了一个链接，当您点击这个链接的时候，它将带您到 W3Schools.com 或者 RefsnesData.no。各有50%机率。
  Conditional Statements  条件表达式
  Very often when you write code, you want to perform different actions for
  different decisions. You can use conditional statements in your code to do
  this.
  In JavaScript we have the following conditional statements:

• 
      if statement - use this statement if you want to execute some code
      only if a specified condition is true
    
• 
      if...else statement - use this statement if you want to execute some
      code if the condition is true and another code if the condition is false
    
• 
      if...else if....else statement - use this statement if you want to
      select one of many blocks of code to be executed
    
• 
      switch statement - use this statement if you want to select one of
      many blocks of code to be executed
    

  If Statement
  You should use the if statement if you want to execute some code only if a
  specified condition is true.
  Syntax
  
  
   
      if (condition)
{
code to be executed if condition is true
}
   
  
  
  Note that if is written in lowercase letters. Using uppercase letters (IF)
  will generate a JavaScript error!
  Example 1
  
  
   
      
//Write a "Good morning" greeting if
//the time is less than 10
      var d=new Date()
var time=d.getHours()
if (timeGood morning")
}
   
  
  
  Example 2
  
  
   
      
//Write "Lunch-time!" if the time is 11
      var d=new Date()
var time=d.getHours()
if (time==11)
{
document.write("Lunch-time!")
}
   
  
  
  Note: When comparing variables you must always use two equals
  signs next to each other (==)!
  Notice that there is no ..else.. in this syntax. You just tell the code to
  execute some code only if the specified condition is true.
  If...else Statement
  If you want to execute some code if a condition is true and another code if
  the condition is not true, use the if....else statement.
  Syntax
  
  
   
      if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
   
  
  
  Example
  
  
   
      
//If the time is less than 10,
//you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.
      var d = new Date()
var time = d.getHours()
if (time
   
  
  
  If...else if...else Statement
  You should use the if....else if...else statement if you want to select one of
  many sets of lines to execute.
  Syntax
  
  
   
      if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if condition1 and
condition2 are not true
}
   
  
  
  Example
  
  
   
      
var d = new Date()
var time = d.getHours()
if (timeGood morning")
}
else if (time>10 && timeGood day")
}
else
{
document.write("Hello World!")
}
   
  
  
  JavaScript Switch Statement

  Conditional statements in JavaScript are used to perform different actions
  based on different conditions.
  Examples
  Switch
  statement
  How to write a switch statement.
  The JavaScript Switch Statement
  You should use the switch statement if you want to select one of many blocks
  of code to be executed.
  Syntax
  
  
   
      switch(n)
{
case 1:
  execute code block 1
  break   
case 2:
  execute code block 2
  break
default:
  code to be executed if n is
  different from case 1 and 2
}
   
  
  
  This is how it works: First we have a single expression n (most often a
  variable), that is evaluated once. The value of the expression is then
  compared with the values for each case in the structure. If there is a match,
  the block of code associated with that case is executed. Use break to
  prevent the code from running into the next case automatically.
  Example
  
  
   
      
//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!")
}
   
  
  

  JavaScript Operators

  Arithmetic Operators
  
  
   
      Operator
   
   
      Description
   
   
      Example
   
   
      Result
   
  
  
   
      +
   
   
      Addition
   
   
      x=2
      y=2
      x+y
   
   
      4
   
  
  
   
      -
   
   
      Subtraction
   
   
      x=5
      y=2
      x-y
   
   
      3
   
  
  
   
      *
   
   
      Multiplication
   
   
      x=5
      y=4
      x*y
   
   
      20
   
  
  
   
      /
   
   
      Division
   
   
      15/5
      5/2
   
   
      3
      2.5
   
  
  
   
      %
   
   
      Modulus (division remainder)
   
   
      5%2
      10%8
      10%2
   
   
      1
      2
      0
   
  
  
   
      ++
   
   
      Increment
   
   
      x=5
      x++
   
   
      x=6
   
  
  
   
      --
   
   
      Decrement
   
   
      x=5
      x--
   
   
      x=4
   
  
  
  Assignment Operators
  
  
   
      Operator
   
   
      Example
   
   
      Is The Same As
   
  
  
   
      =
   
   
      x=y
   
   
      x=y
   
  
  
   
      +=
   
   
      x+=y
   
   
      x=x+y
   
  
  
   
      -=
   
   
      x-=y
   
   
      x=x-y
   
  
  
   
      *=
   
   
      x*=y
   
   
      x=x*y
   
  
  
   
      /=
   
   
      x/=y
   
   
      x=x/y
   
  
  
   
      %=
   
   
      x%=y
   
   
      x=x%y
   
  
  
  Comparison Operators
  
  
   
      Operator
   
   
      Description
   
   
      Example
   
  
  
   
      ==
   
   
      is equal to
   
   
      5==8 returns false
   
  
  
   
      ===
   
   
      is equal to (checks for both value and type)
   
   
      x=5
      y="5"
      
        x==y returns true
        x===y returns false
      
   
  
  
   
      !=
   
   
      is not equal
   
   
      5!=8 returns true
   
  
  
   
      >
   
   
      is greater than
   
   
      5>8 returns false
   
  
  
   
      
   
      is less than
   
   
      5
  
  
   
      >=
   
   
      is greater than or equal to
   
   
      5>=8 returns false
   
  
  
   
      
   
      is less than or equal to
   
   
      5
  
  
  Logical Operators
  
  
   
      Operator
   
   
      Description
   
   
      Example
   
  
  
   
      &&
   
   
      and
   
   
      x=6
      y=3
      
        (x  1) returns true
      
   
  
  
   
      ||
   
   
      or
   
   
      x=6
      y=3
      
        (x==5 || y==5) returns false
      
   
  
  
   
      !
   
   
      not
   
   
      x=6
      y=3
      
        !(x==y) returns true
      
   
  
  
  String Operator
  A string is most often text, for example "Hello World!". To stick two or more
  string variables together, use the + operator.
  
  
   
      txt1="What a very"
txt2="nice day!"
txt3=txt1+txt2
   
  
  
  The variable txt3 now contains "What a verynice day!".
  To add a space between two string variables, insert a space into the
  expression, OR in one of the strings.
  
  
   
      txt1="What a very"
txt2="nice day!"
txt3=txt1+" "+txt2
      or
      txt1="What a very "
txt2="nice day!"
txt3=txt1+txt2
   
  
  
  The variable txt3 now contains "What a very nice day!".
  Conditional Operator
  JavaScript also contains a conditional operator that assigns a value to a
  variable based on some condition.
  Syntax
  
  
   
      variablename=(condition)?value1:value2
   
  
  
  Example
  
  
   
      greeting=(visitor=="PRES")?"Dear President ":"Dear "
   
  
  
  If the variable visitor is equal to PRES, then put the string "Dear President
  " in the variable named greeting. If the variable visitor is not equal to
  PRES, then put the string "Dear " into the variable named greeting.
  JavaScript Popup Boxes

  In JavaScript we can create three kinds of popup boxes: Alert box, Confirm
  box, and Prompt box.
  Examples
  Alert
  box
  Alert
  box with line breaks
  Confirm
  box
  Prompt
  box
  Alert Box
  An alert box is often used if you want to make sure information comes through
  to the user.
  When an alert box pops up, the user will have to click "OK" to proceed.
  Syntax:
  
  
   
      alert("sometext")
   
  
  
  Confirm Box
  A confirm box is often used if you want the user to verify or accept
  something.
  When a confirm box pops up, the user will have to click either "OK" or
  "Cancel" to proceed.
  If the user clicks "OK", the box returns true. If the user clicks "Cancel",
  the box returns false.
  Syntax:
  
  
   
      confirm("sometext")
   
  
  
  Prompt Box
  A prompt box is often used if you want the user to input a value before
  entering a page.
  When a prompt box pops up, the user will have to click either "OK" or "Cancel"
  to proceed after entering an input value.
  If the user clicks "OK" the box returns the input value. If the user clicks
  "Cancel" the box returns null.
  Syntax:
  
  
   
      prompt("sometext","defaultvalue")
   
  
  
  JavaScript Functions

  A function is a reusable code-block that will be executed by an event, or when
  the function is called.
  Examples
  
Function
  How to call a function.
  Function
  with arguments
  How to pass a variable to a function, and use the variable in the function.
  Function
  with arguments 2
  How to pass variables to a function, and use these variables in the function.
  Function
  that returns a value
  How to let the function return a value.
  A
  function with arguments, that returns a value
  How to let the function find the product of 2 arguments and return the result.
  JavaScript Functions
  To keep the browser from executing a script as soon as the page is loaded, you
  can write your script as a function.
  A function contains some code that will be executed only by an event or by a
  call to that function.
  You may call a function from anywhere within the page (or even from other
  pages if the function is embedded in an external .js file).
  Functions are defined at the beginning of a page, in the  section.
  Example
  
  
   
      
function displaymessage()
{
alert("Hello World!")
}
      
   
  
  
If the line: alert("Hello world!!"), in the example above had not been written
within a function, it would have been executed as soon as the line was loaded.
Now, the script is not executed before the user hits the button. We have added
an onClick event to the button that will execute the function displaymessage()
when the button is clicked.
  You will learn more about JavaScript events in the JS Events chapter.
  How to Define a Function
  The syntax for creating a function is:
  
  
   
      function functionname(var1,var2,...,varX)
{
some code
}
   
  
  
  var1, var2, etc are variables or values passed into the function. The { and
  the } defines the start and end of the function.
  Note: A function with no parameters must include the parentheses ()
  after the function name:
  
  
   
      function functionname()
{
some code
}
   
  
  
  Note: Do not forget about the importance of capitals in JavaScript! The
  word function must be written in lowercase letters, otherwise a JavaScript
  error occurs! Also note that you must call a function with the exact same
  capitals as in the function name.
  The return Statement
  The return statement is used to specify the value that is returned from the
  function.
  So, functions that are going to return a value must use the return statement.
  Example
  The function below should return the product of two numbers (a and b):
  
  
   
      function prod(a,b)
{
x=a*b
return x
}
   
  
  
  When you call the function above, you must pass along two parameters:
  
  
   
      product=prod(2,3)
   
  
  
  The returned value from the prod() function is 6, and it will be stored in the
  variable called product.
  JavaScript For Loop

  Loops in JavaScript are used to execute the same block of code a specified
  number of times or while a specified condition is true.
  Examples
  For
  loop
  How to write a for loop. Use a For loop to run the same block of code a
  specified number of times.
  Looping
  through HTML headers
  How to use the for loop to loop through the different HTML headers.
  JavaScript Loops
  Very often when you write code, you want the same block of code to run over
  and over again in a row. Instead of adding several almost equal lines in a
  script we can use loops to perform a task like this.
  In JavaScript there are two different kind of loops:

• 
      for - loops through a block of code a specified number of times
    
• 
      while - loops through a block of code while a specified condition is
      true
    

  The for Loop
  The for loop is used when you know in advance how many times the script should
  run.
  Syntax
  
  
   
      for (var=startvalue;var
   
  
  
  Example
  Explanation: The example below defines a loop that starts with i=0. The loop
  will continue to run as long as i is less than, or equal to 10.
  i will increase by 1 each time the loop runs.
  Note: The increment parameter could also be negative, and the
  
  
   
      
var i=0
for (i=0;i
   
  
  
  Result
  
  
   
      The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
   
  
  
  The while loop
  The while loop will be explained in the next chapter.
  JavaScript While Loop

  Loops in JavaScript are used to execute the same block of code a specified
  number of times or while a specified condition is true.
  Examples
  While
  loop
  How to write a while loop. Use a while loop to run the same block of code
  while a specified condition is true.
  Do
  while loop
  How to write a do...while loop. Use a do...while loop to run the same block of
  code while a specified condition is true. This loop will always be executed at
  least once, even if the condition is false, because the statements are
  executed before the condition is tested.
  The while loop
  The while loop is used when you want the loop to execute and continue
  executing while the specified condition is true.
  
  
   
      while (var
   
  
  
  Note: The
  
  
   
      
var i=0
while (i
   
  
  
  Result
  
  
   
      The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
   
  
  
  The do...while Loop
  The do...while loop is a variant of the while loop. This loop will always
  execute a block of code ONCE, and then it will repeat the loop as long as the
  specified condition is true. This loop will always be executed at least once,
  even if the condition is false, because the code is executed before the
  condition is tested.
  
  
   
      do
{
    code to be executed
}
while (var
   
  
  
  Example
  
  
   
      
var i=0
do
{
document.write("The number is " + i)
document.write("
")
i=i+1
}
while (i
   
  
  
  Result
  
  
   
      The number is 0
   
  
  
  JavaScript Break and Continue

  There are two special statements that can be used inside loops: break and
  continue.
  Examples
  Break
  statement
  Use the break statement to break the loop.
  Continue
  statement
  Use the continue statement to break the current loop and continue with the
  next value.
  JavaScript break and continue Statements
  There are two special statements that can be used inside loops: break and
  continue.
  Break
  The break command will break the loop and continue executing the code that
  follows after the loop (if any).
  Example
  
  
   
      
var i=0
for (i=0;i
   
  
  
  Result
  
  
   
      The number is 0
The number is 1
The number is 2
   
  
  
  Continue
  The continue command will break the current loop and continue with the next
  value.
  Example
  
  
   
      
var i=0
for (i=0;i
   
  
  
  Result
  
  
   
      The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
   
  
  
  JavaScript For...In Statement

  The for...in statement is used to loop (iterate) through the elements of an
  array or through the properties of an object.
  Examples
  For...In
  statement
  How to use a for...in statement to loop through the elements of an array.
  JavaScript For...In Statement
  The for...in statement is used to loop (iterate) through the elements of an
  array or through the properties of an object.
  The code in the body of the for ... in loop is executed once for each
  element/property.
  Syntax
  
  
   
      for (variable in object)
{
    code to be executed
}
   
  
  
  The variable argument can be a named variable, an array element, or a property
  of an object.
  Example
  Using for...in to loop through an array:
  
  
   
      
      
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "
")
}
      
   
  
  
  JavaScript Events

  Events are actions that can be detected by JavaScript.
  Events
  By using JavaScript, we have the ability to create dynamic web pages. Events
  are actions that can be detected by JavaScript.
  Every element on a web page has certain events which can trigger JavaScript
  functions. For example, we can use the onClick event of a button element to
  indicate that a function will run when a user clicks on the button. We define
  the events in the HTML tags.
  Examples of events:

• 
      A mouse click
    
• 
      A web page or an image loading
    
• 
      Mousing over a hot spot on the web page
    
• 
      Selecting an input box in an HTML form
    
• 
      Submitting an HTML form
    
• 
      A keystroke
    

  Note: Events are normally used in combination with functions, and the
  function will not be executed before the event occurs!
  For a complete reference of the events recognized by JavaScript, go to our
  complete Event
  reference.
  onload and onUnload
  The onload and onUnload events are triggered when the user enters or leaves
  the page.
  The onload event is often used to check the visitor's browser type and browser
  version, and load the proper version of the web page based on the information.
  Both the onload and onUnload events are also often used to deal with cookies
  that should be set when a user enters or leaves a page. For example, you could
  have a popup asking for the user's name upon his first arrival to your page.
  The name is then stored in a cookie. Next time the visitor arrives at your
  page, you could have another popup saying something like: "Welcome John Doe!".
  onFocus, onBlur and onChange
  The onFocus, onBlur and onChange events are often used in combination with
  validation of form fields.
  Below is an example of how to use the onChange event. The checkEmail()
  function will be called whenever the user changes the content of the field:
  
  
   
      ;
   
  
  
  onSubmit
  The onSubmit event is used to validate ALL form fields before submitting it.
  Below is an example of how to use the onSubmit event. The checkForm() function
  will be called when the user clicks the submit button in the form. If the
  field values are not accepted, the submit should be cancelled. The function
  checkForm() returns either true or false. If it returns true the form will be
  submitted, otherwise the submit will be cancelled:
  
  
   
      
   
  
  
  onMouseOver and onMouseOut
  onMouseOver and onMouseOut are often used to create "animated" buttons.
  Below is an example of an onMouseOver event. An alert box appears when an
  onMouseOver event is detected:
  
  
   
      
   
  
  

  JavaScript Try...Catch Statement

  The try...catch statement allows you to test a block of code for errors.
  Examples
  The
  try...catch statement
  How to write a try...catch statement.
  The
  try...catch statement with a confirm box
  Another example of how to write a try...catch statement.
  JavaScript - Catching Errors
  When browsing Web pages on the internet, we all have seen a JavaScript alert
  box telling us there is a runtime error and asking "Do you wish to debug?".
  Error message like this may be useful for developers but not for users. When
  users see errors, they often leave the Web page.
  This chapter will teach you how to trap and handle JavaScript error messages,
  so you don't lose your audience.
  There are two ways of catching errors in a Web page:

• 
      By using the try...catch statement (available in IE5+, Mozilla 1.0,
      and Netscape 6)
    
• 
      By using the onerror event. This is the old standard solution to
      catch errors (available since Netscape 3)
    

  Try...Catch Statement
  The try...catch statement allows you to test a block of code for errors. The
  try block contains the code to be run, and the catch block contains the code
  to be executed if an error occurs.
  Syntax
  
  
   
      try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
   
  
  
  Note that try...catch is written in lowercase letters. Using uppercase letters
  will generate a JavaScript error!
  Example 1
  The example below contains a script that is supposed to display the message
  "Welcome guest!" when you click on a button. However, there's a typo in the
  message() function. alert() is misspelled as adddlert(). A JavaScript error
  occurs:
  
  
   
      
function message()
{
adddlert("Welcome guest!")
}
   
  
  
  To take more appropriate action when an error occurs, you can add a
  try...catch statement.
  The example below contains the "Welcome guest!" example rewritten to use the
  try...catch statement. Since alert() is misspelled, a JavaScript error occurs.
  However, this time, the catch block catches the error and executes a custom
  code to handle it. The code displays a custom error message informing the user
  what happened:
  
  
   
      
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!")
  }
catch(err)
  {
  txt="There was an error on this page.\n\n"
  txt+="Error description: " + err.description + "\n\n"
  txt+="Click OK to continue.\n\n"
  alert(txt)
  }
}
   
  
  
  Example 2
  The next example uses a confirm box to display a custom message telling users
  they can click OK to continue viewing the page or click Cancel to go to the
  homepage. If the confirm method returns false, the user clicked Cancel, and
  the code redirects the user. If the confirm method returns true, the code does
  nothing:
  
  
   
      
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!")
  }
catch(err)
  {
  txt="There was an error on this page.\n\n"
  txt+="Click OK to continue viewing this page,\n"
  txt+="or Cancel to return to the home page.\n\n"
  if(!confirm(txt))
    {
    document.location.href="http://www.w3schools.com/"
    }
  }
}
      
      
   
  
  
  The onerror Event
  The onerror event will be explained soon, but first you will learn how to use
  the throw statement to create an exception. The throw statement can be used
  together with the try...catch statement.

  JavaScript Throw Statement

  The throw statement allows you to create an exception.
  Examples
  The
  throw statement
  How to use the throw statement.
  The Throw Statement
  The throw statement allows you to create an exception. If you use this
  statement together with the try...catch statement, you can control program
  flow and generate accurate error messages.
  Syntax
  
  
   
      throw(exception)
   
  
  
  The exception can be a string, integer, Boolean or an object.
  Note that throw is written in lowercase letters. Using uppercase letters will
  generate a JavaScript error!
  Example 1
  The example below determines the value of a variable called x. If the value of
  x is higher than 10 or lower than 0 we are going to throw an error. The error
  is then caught by the catch argument and the proper error message is
  displayed:
  
  
   
      
var x=prompt("Enter a number between 0 and 10:","")
try
{
if(x>10)
throw "Err1"
else if(x
   
  
  

  JavaScript The onerror Event

  Using the onerror event is the old standard solution to catch errors in a web
  page.
  Examples
  The
  onerror event (an example with an error)
  How to use the onerror event to catch errors in a web page.
  The onerror Event
  We have just explained how to use the try...catch statement to catch errors in
  a web page. Now we are going to explain how to use the onerror event for the
  same purpose.
  The onerror event is fired whenever there is a script error in the page.
  To use the onerror event, you must create a function to handle the errors.
  Then you call the function with the onerror event handler. The event handler
  is called with three arguments: msg (error message), url (the url of the page
  that caused the error) and line (the line where the error occurred).
  Syntax
  
  
   
      onerror=handleErr
      function handleErr(msg,url,l)
{
//Handle the error here
return true or false
}
   
  
  
  The value returned by onerror determines whether the browser displays a
  standard error message. If you return false, the browser displays the standard
  error message in the JavaScript console. If you return true, the browser does
  not display the standard error message.
  Example
  The following example shows how to catch the error with the onerror event:
  
  
   
      
onerror=handleErr
var 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!")
}
      
      
   
  
  

  JavaScript Special Characters

  In JavaScript you can add special characters to a text string by using the
  backslash sign.
  Insert Special Characters
  The backslash (\) is used to insert apostrophes, new lines, quotes, and other
  special characters into a text string.
  Look at the following JavaScript code:
  
  
   
      var txt="We are the so-called "Vikings" from the north."
document.write(txt)
   
  
  
  In JavaScript, a string is started and stopped with either single or double
  quotes. This means that the string above will be chopped to: We are the
  so-called
  To solve this problem, you must place a backslash (\) before each double quote
  in "Viking". This turns each double quote into a string literal:
  
  
   
      var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)
   
  
  
  JavasScript will now output the proper text string: We are the so-called
  "Vikings" from the north.
  Here is another example:
  
  
   
      document.write ("You \& me are singing!")
   
  
  
  The example above will produce the following output:
  
  
   
      You & me are singing!
   
  
  
  The table below lists other special characters that can be added to a text
  string with the backslash sign:
  
  
   
      Code
   
   
      Outputs
   
  
  
   
      \'
   
   
      single quote
   
  
  
   
      \"
   
   
      double quote
   
  
  
   
      \&
   
   
      ampersand
   
  
  
   
      \\
   
   
      backslash
   
  
  
   
      \n
   
   
      new line
   
  
  
   
      \r
   
   
      carriage return
   
  
  
   
      \t
   
   
      tab
   
  
  
   
      \b
   
   
      backspace
   
  
  
   
      \f
   
   
      form feed
   
  
  
  JavaScript Guidelines

  Some other important things to know when scripting with JavaScript.
  JavaScript is Case Sensitive
  A function named "myfunction" is not the same as "myFunction" and a variable
  named "myVar" is not the same as "myvar".
  JavaScript is case sensitive - therefore watch your capitalization closely
  when you create or call variables, objects and functions.
  White Space
  JavaScript ignores extra spaces. You can add white space to your script to
  make it more readable. The following lines are equivalent:
  
  
   
      name="Hege"
name = "Hege"
   
  
  
  Break up a Code Line
  You can break up a code line within a text string with a backslash. The
  example below will be displayed properly:
  
  
   
      document.write("Hello \
World!")
   
  
  
  However, you cannot break up a code line like this:
  
  
   
      document.write \
("Hello World!")
   
  
  
  Comments
  You can add comments to your script by using two slashes //:
  
  
   
      //this is a comment
document.write("Hello World!")
   
  
  
  or by using /* and */ (this creates a multi-line comment block):
  
  
   
      /* This is a comment
block. It contains
several lines */
document.write("Hello World!")
   
  
  
      

        
Google 文件 － 网络文字处理和电子表格.
  添加至 Digg |   
编辑此页面（如果您有权限）
   |
报告垃圾信息
              


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u1/36086/showart_287746.html