使用 JavaScript

时间：2016-07-14 02:48:55 阅读：206 评论：0 收藏：0 [点我收藏+]

我们要用 JavaScript，但是把它写在哪里呢？

这里 ↘

1. HTML 页面中。

2. 单独的一个文件中，文件后缀名是“.js”。

—————————————————————————

我们先讨论第一种情况 —— 在 HTML 页面中使用 JavaScript。

这时 JavaScript 代码：

1）必须位于 <script> 与 </script> 标签之间。

2）可以被放在 HTML 页面的 <body> 和 <head> 部分中。

下面是三个小例子：

小例一：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>在 HTML 页面中使用 JavaScript</title>
</head>

<body>

    <script>
        // JavaScript 代码在 HTML 文档的 <body> 部分中，而且
        // 在 <script> 与 <\/script> 标签之间
        document.write("<h1>海明威说</h1>");
        document.write("<p>任何初稿，都是一堆臭狗屎。</p>");
    </script>

</body>

</html>

有时我们会看到在 <script> 标签中使用“type="text/javascript"”。现在已经完全没必要了，JavaScript 是所有现代浏览器以及 HTML5 中默认使用的脚本语言。

上面“小例一”中的 JavaScript 代码，会在页面加载时执行。通常，我们不会这么做。

我们用 JavaScript 代码写出一个函数，当 HTML 页面中出现某个事件时（比如点击事件），调用这个函数。

你现在可能听不太懂，没关系，你会在稍后的文章里学习到函数和事件的知识。

小例二：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>在 HTML 页面中使用 JavaScript</title>

    <script>
        // JavaScript 代码在 HTML 文档的 <head> 部分中，而且
        // 也在（必然的） <script> 与 <\/script> 标签之间
        function myRespondToHit() {
            document.getElementById("yesID").innerHTML = "Oops!!";
        }
    </script>

</head>

<body>

    <h1>A day so happy :)</h1>

    <p>A:<span id="yesID">Yes, once I was the same.</span></p>

    <button type="button" onclick="myRespondToHit()">Hit you!</button>

</body>

</html>

我们将一个 JavaScript 函数放置到了 HTML 文档的 <head> 部分。

小例三：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>在 HTML 页面中使用 JavaScript</title>
</head>

<body>

    <h1>A day so happy :)</h1>

    <p>A:<span id="yesID">Yes, once I was the same.</span>
    </p>

    <button type="button" onclick="myRespondToHit()">Hit you!</button>

    <script>
        // JavaScript 代码在 HTML 文档的 <head> 部分中，而且
        // 也在（必然的） <script> 与 <\/script> 标签之间
        function myRespondToHit() {
            document.getElementById("yesID").innerHTML = "Oops!!";
        }
    </script>

</body>

</html>

这里只是将“小例二”中的 JavaScript 函数改变至 <body> 部分中，这样确保在 <p> 元素创建之后再执行脚本。

<head> 和 <body> 中的 JavaScript

你可以在 HTML 页面中放入任意多个 JavaScript 代码（或者说成“脚本”）。

脚本可以位于 HTML 文档的 <body> 或 <head> 部分中，又或者同时存在于两个部分中。

通常做法是，把函数都放在 <head> 部分中，或者都放在页面底部。这样脚本在一块了，就不会干扰页面内容了。

—————————————————————————

第二种情况：外部的 JavaScript 代码

也可以把 JavaScript 代码写在外部文件中。这样做可以：让脚本与页面代码分离；有时，这个脚本，可能会被多个页面同时使用，这样乐意提高代码的重用性。

外部的脚本文件的扩展名是“.js”。

如果要使用外部文件，请在 <script> 标签的 “src”属性中引入这个“.js”文件。

小例四：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>引入外部的 JavaScript 代码</title>

    <script src="js/helloScript.js"></script>

</head>

<body>

    <h1>A day so happy :)</h1>

    <p>A:<span id="yesID">Yes, once I was the same.</span></p>

    <button type="button" onclick="myRespondToHit()">Hit you!</button>

</body>

</html>

在 <head> 和 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。

还有，外部脚本不能包含 <script> 标签。

（完）

使用 JavaScript

原文：http://www.cnblogs.com/zhangbao/p/5668635.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)