JavaScript 入门教程

JavaScript是一门Web编程语言，用来实现网页的交互功能，它和HTML、CSS共同组成了个Web开发的基础工具集合，也是前端开发者必备的技能；学习JavaScript教程可以了解它在网页开发中的所有特性和相关概念，让我们能够更加快速的去开发Web应用。

W3CAPI

2020-06-18 07:05:48

文档目录

我的书签

请登录

JavaScript 和 HTML 文档

将JavaScript嵌入HTML中

HTML文档

一个HTML文档由HTML元素、HTML元素属性、注释、特殊字符及文档类型组成。若需为HTML文档添加呈现特性，可通过附加CSS实现；若需增强动态用户体验（如弹窗、警告消息、动画效果等），则需添加JavaScript。JavaScipt到你的HTML文档中。

若浏览器属性中禁用了JavaScript，即便在HTML文档中附加了外部脚本或在<script>...</script>标签内编写了脚本，这些脚本仍将处于非激活状态。

某些JavaScript脚本无法在所有浏览器中正常运行，有时某个脚本只能在某个特定版本的网页浏览器及以上（或反之）版本中运行。

脚本标签

这个script是一个HTML元素。HTML脚本元素用于在HTML文档内嵌入客户端脚本（如JavaScript）。

Syntax

<script>
  JavaScript statements....... 
  </script>

执行一下

script元素包含四种属性类型：

1. language

language属性用于指定脚本语言及其对应封闭代码的版本。在以下示例中，JavaScript版本为1.2。如果特定浏览器不支持该JavaScript版本，则忽略此代码。若未指定language属性，默认行为将取决于浏览器版本。在HTML 4.01中，language属性已弃用。

示例

 <script language = "JavaScript1.2">
  JavaScript statements....... 
  </script>

执行一下

2. src

这个attribute指定外部脚本的位置。该属性可用于在多个不同页面之间共享函数。需注意：外部JavaScript文件仅包含JavaScript语句，且文件扩展名必须为.js。

示例

 <script src = "common.js">
  JavaScript statements....... 
  </script>

执行一下

3. defer

若设置defer属性，浏览器会延迟脚本的执行或改变脚本的执行顺序。通过将脚本执行推迟至浏览器完成对文档主体内容的读取和呈现后，这种机制可有效提升页面性能。

4. type

该属性用于指定脚本语言。脚本语言通过内容类型格式进行声明（例如："text/javascript"）。text/javascript该属性受所有现代浏览器支持。

示例

 <script type="text/javascript">
  JavaScript statements....... 
  </script>

执行一下

noscript标签

如果任何浏览器不支持JavaScript代码，则位于其中的替代内容将显示出来。noscript标签正在执行。

示例

<noscript>
  ... code ....
  </noscript>

执行一下

HTML文档中的JavaScript

主要分为两大领域：HTML文档whereJavaScript可置于。首处位于…之间。<head>......</head>一个为节段，另一个为具体定位<body>......</body>section。若要在页面加载时通过JavaScript alert命令显示'Good Morning'消息，则必须将脚本置于<head>......</head>部分。以下示例将展示<script>.....</script>标签在HTML文档中的不同位置。

头部中的脚本

<!DOCTYPE html>
  <head>
  <meta charset="utf-8" />
  <title> Script in head section </title>
  <script type = "text/javascript">
  JavaScript statements....... 
  </script>
  </head>
  <body>
  </body>
  </html>

执行一下

Body中的脚本

<!DOCTYPE html>
  <head>
  <meta charset="utf-8" />
  <title> Script in the Body </title>
  </head>
  <body>
  <script type = "text/javascript">
  JavaScript statements....... 
  </script>
  </body>
  </html>

执行一下

头部与主体中的脚本

<!DOCTYPE html>
  <head>
  <meta charset="utf-8" />
  <title> Script in head and body section </title>
  <script type = "text/javascript">
  JavaScript statements....... 
  </script>
  </head>
  <body>
  <script type = "text/javascript">
  JavaScript statements....... 
  </script>
  </body>
  </html>

执行一下

主体中的两个脚本

<!DOCTYPE html>
  <head>
  <meta charset="utf-8" />
  <title> Two Scripts in the Body </title>
  </head>
  <body>
  <script type = "text/javascript" scr="jsexample.js" >
  </script>
  <script type = "text/javascript">
  JavaScript statements....... 
  </script>
  </body>
  </html>

执行一下

注意：可选情况下，若无需在显示body内容前执行脚本，且脚本需较长时间加载对象，可将脚本置于body元素末尾。

JavaScript中单双引号功能相同，可互换但需一致使用。

无首选方法，两者均可使用。若在字符串中已使用一种引号（单引号或双引号），另一种可作为字面量直接使用。

上一篇：JavaScript 与 ECMA 规范
下一篇：JavaScript语法与注释

作者文档