js简介

回顾一下JavaScript的诞生。1995年，网景公司凭借其Navigator浏览器成为最著名的第一代互联网公司。网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich在两周之内设计出JavaScript语言，事实上只用了10天时间。为什么起名叫JavaScript?原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。
一年后微软模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA(European ComputerManufacturers Asso组织定制了JavaScript语言的标准，被称为ECMAScript标准。所以简单说来就是，ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。那为什么不直接把JavaScript定为标准呢？因为JavaScript是网景的注册商标。不过大多数时候，我们还是用JavaScript这个词。如果你遇到ECMAScript这个词，简单把它替换为JavaScript就行了。
JavaScript有很多设计缺陷，后面会慢慢讲到。由于JavaScript的标准——ECMAScript在不断发展，最新版ECMAScript6标准(简称ES6)已经在2015年6月正式发布了，所以，讲到JavaScript的版本，实际上就是说它实现了ECMAScript标准的哪个版本。由于浏览器在发布时就确定了JavaScript的版本，加上很多用户还在使用IE6这种古老的浏览器，这就导致你在写JavaScript的时候，要照顾一下老用户，不能一上来就用最新的ES6标准写，否则，老用户的浏览器是无法运行新版本的JavaScript代码的。不过，JavaScript的核心语法并没有多大变化。我们的教程会先讲JavaScript最核心的用法，然后，针对ES6讲解新增特性。

一、如何使用js？

HTML中的脚本必须位于"<script>与</script>"标签之间。脚本可被放置在HTML页面的<body>和<head>部分中。
<script>标签
如需在HTML页面中插入JavaScript，要使用<script>标签。<script>和</script>会告诉JavaScript在何处开始和结束。
<script>和</script>之间的代码行包含了JavaScript:

    <script>
      alert("My FirstJavaScript");
   </script>

无需理解上面的代码。只需明白，浏览器会解释并执行位于之间的JavaScript。老旧的实例可能会在<script>标签中使用type="text/javascript"。现在已经不必这样做了。JavaScript是所有现代浏览器以及HTML5中的默认脚本语言。<head>或<body>中的JavaScript可以在HTML文档中放入不限数量的脚本。脚本可位于HTML的<body>或<head>部分中，或者同时存在于两个部分中。通常的做法是把函数放入<head>部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
在本例中，JavaScript会在页面加载时向 HTML 的<body>写文本：

<!DOCTYPE html>
<html>
<body>
 <p>JavaScript 能够直接写入 HTML 输出流中：</p >
 <script>
  document.write("<h1>This is a heading</h1>");
  document.write("<p>This is a paragraph.</p >");
 </script>
 <p>
  您只能在 HTML 输出流中使用 <strong>document.write</strong>。
  如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
 </p >
</body>
</html>

JavaScript函数和事件

`<head>`中的JavaScript函数

本例中：按钮触发

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "My First JavaScript Function";
      }
    </script>
  </head>
<body>
 <h1>My Web Page</h1>
 <p id="demo">A Paragraph.</p >
 <button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

`<body>`中的JavaScript函数

本例中：按钮触发
提示：我们把 JavaScript放到了页面代码的底部，这样就可以确保在<p>元素创建之后再执行脚本。

<!DOCTYPE html>
<html>
<body>
    <h1>My First Web Page</h1>
    <p id="demo">A Paragraph.</p >
    <button type="button" onclick="myFunction()">点击这里</button>
    <script>
       function myFunction() {
         document.getElementById("demo").innerHTML = "My First JavaScript Function";
       }
 </script>
</body>
</html>

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript文件的文件扩展名是.js。

外部的JavaScript

如需使用外部文件，在<script>标签的"src"属性中设置该.js文件
在<head>或<body>中引用脚本文件都是可以的。实际运行效果与您在<script>标签中编写脚本完全一致。外部脚本不能包含<script>标签。

<!DOCTYPE html>
<html>
<body>
 <h1>My Web Page</h1>
 <p id="demo">A Paragraph.</p >
 <button type="button" onclick="myFunction()">点击这里</button>
  <p>
    <b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。
  </p >
  
  <script type="text/javascript" src="/js/myScript.js"></script>
</body>
</html>

二、js与DOM

1.访问HTML元素

JavaScript 通常用于操作 HTML 元素。如需从 JavaScript访问某个HTML元素，您可以使用document.getElementByld(id)方法。请使用“id"属性来标识 HTML元素。下面例子通过指定的 id来访问HTML元素，并改变其内容。JavaScript由web 浏览器来执行。在这种情况下，浏览器将访问id="demo"的 HTML元素，并把它的内容(innerHTML)替换为"My First JavaScript"。
代码如下（示例）：

<!DOCTYPE html>
<html>
<body>
 <h1>My First Web Page</h1>
 <p id="demo">My First Paragraph.</p >
 <script>
  document.getElementById("demo").innerHTML = "My First JavaScript";
 </script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
 <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
 function changetext(id) {
  id.innerHTML = "谢谢!";
 }
</script>
</head>
<body>
 <h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>

2.写到HTML文档输出

（1）下面的例子直接把<p>元素写到HTML文档输出中，代码如下（示例）：

<!DOCTYPE html>
<html>
 <body>
    <h1>My First Web Page</h1>
   <script>
     document.write("<p>My First JavaScript</p >");
   </script>
 </body>
</html>

（2）请使用 document.write()仅仅向文档输出写内容。如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖。代码如下（示例）：

<!DOCTYPE html>
<html>
 <body>
   <h1>My First Web Page</h1>
   <p>My First Paragraph.</p >
   <button onclick="myFunction()">点击这里</button>
  <script>
    function myFunction() {
      document.write("糟糕！文档消失了。");
    }
  </script>
 </body>
</html>

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事件

<!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>