了解JavaScript（1）- Hello World

JavaScript 简介

JavaScript 是一种可以给网页增加交互性的编程语言。
熟悉 JavaScript 的好方法是“站在其他程序员肩膀上”，即Web 上有大量 JavaScript 代码，复制一下并稍作修改，就可以供自己使用。
JavaScript 脚本语言，在 HTML 页面内容是包围在 <script> 标签中，不用使用 type=”text/javascript”属性。JavaScript 是所有现代浏览器以及 HTML5 中默认的脚本语言。
JavaScript 与 Java 无关，市场营销。
JavaScript 的微软版本称为 JScript，ASP 中可以使用 JScript 脚本语言。

Hello, World

老习惯，我们第一个 JavaScript 是向浏览器窗口输出“Hello, World!”，脚本代码（HelloWorld.html）如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, World!</title>
<script>
  function SayHello(){
    document.getElementById("myMessage").innerHTML = "Hello, World!";  
  }
</script>
</head>
<body>
<script>
  document.write("<h1>我们的第一个 JavaScript 程序</h1>");
  document.write("<p id="myMessage">哦， 试试下面的按钮...</p>");
</script>
<button type="button" onClick="SayHello()">尝试一下</button>
</body>
</html>

Firefox 40.0.2 输出效果如下图：

点击“尝试一下”按钮后，<p> 标签的内容发生了变化，如下图：

我们看到了 document.getElementById()，这个方法是 HTML DOM 中定义的。

DOM（Document Object Model）文档对象模型，是用于访问 HTML 元素的正式 W3C 标准。

JavaScript 的局限性

不允许写服务器上的文件。
不能关闭不是由它自己打开的窗口。
不能从来自另外一个服务器的已经打开的页面中读取信息。

使用外部脚本

也可以把脚本保存在外部文件中。外部文件通常包含被多个网页使用的代码，会使站点更容易维护。

外部 JavaScript 文件的扩展名是 .js。

如果需要使用外部文件，请在 <script> 标签中使用 “src”属性中设置，如下：

<!doctype html>
<html>
<head>
<script src="myScript.js"></script>
</head>
<body>
</body>
</html>

在这个外部脚本演示程序中，script_001.html 中引用了外部文件 script_001.js。

script_001.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>外部脚本的使用</title>
  <script src="script_001.js"></script>
</head>
<body>
  <h1 id="helloMessage"></h1>
</body>
</html>

script_001.js

// JavaScript Document
window.onload = writeMessage;

function writeMessage(){
  document.getElementById("helloMessage").innerHTML = "Hello, World!";
}

windows.onload 是一个事件处理程序，意思是当窗口完成加载时，运行 writeMessage 函数。

示例下载

HelloWorld.RAR