JavaScript入门JavaScript专题1

Posted 坚果前端の博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript入门JavaScript专题1相关的知识，希望对你有一定的参考价值。

javascript入门

从今天开始就与大家一起学习JavaScript了

在本系列教程中，您将学习如何制作 JavaScript 驱动的网页。

JavaScript 入门

在这里，您将了解使用 JavaScript 向网页添加交互性是多么容易。但是，在我们开始之前，请确保您对 html 和 CSS 有一定的了解。

如果不太了解。我不建议，会出一期对html和css的介绍，如果有在评论区需要，请告诉我！

好吧，让我们开始使用最流行的客户端脚本语言。

将 JavaScript 添加到您的网页

向网页中添加 JavaScript 的方法通常有以下三种：

  • 在一对<script>和</script>标签之间嵌入 JavaScript 代码。
  • 创建带有.js扩展名的外部 JavaScript 文件，然后通过标签的src属性将其加载到页面中<script>。
  • 使用特殊的标记直接放置JavaScript代码的HTML标记内属性，例如onclick，onmouseover，onkeypress，onload，等。

以下部分将详细描述这些过程中的每一个：

嵌入 JavaScript 代码

您可以通过将 JavaScript 代码放置在<script>和</script>标记之间，将其直接嵌入到您的网页中。该<script>标记指示浏览器将包含的语句解释为可执行脚本而不是 HTML。下面是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedding JavaScript</title>
</head>
<body>
    <script>
    var greet = "Hello World!";
    document.write(greet); // Prints: Hello World!
    </script>
</body>
</html>

上面示例中的 JavaScript 代码将简单地在网页上打印一条文本消息。在接下来的章节中，您将了解这些 JavaScript 语句的含义。

调用外部 JavaScript 文件

你也可以将你的 JavaScript 代码放到一个带有.js扩展名的单独文件中，然后通过标签的src属性在你的文档中调用该文件<script>，如下所示：

如果您希望相同的脚本可用于多个文档，这将非常有用。它使您免于一遍又一遍地重复相同的任务，并使您的网站更易于维护。

好吧，让我们创建一个名为“hello.js”的 JavaScript 文件，并将以下代码放入其中：

// A function to display a message
function sayHello() 
    alert("Hello World!");


// Call function on click of the button
document.getElementById("myBtn").onclick = sayHello;

现在，您可以使用<script>标记在网页中调用此外部 JavaScript 文件，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Including External JavaScript File</title>        
</head>
<body>    
    <button type="button" id="myBtn">Click Me</button>
    <script src="js/hello.js"></script>
</body>
</html>

注意：通常在第一次下载外部 JavaScript 文件时，它会存储在浏览器的缓存中（就像图像和样式表一样），因此不需要从制作网页的 Web 服务器多次下载加载更快。

内嵌 JavaScript 代码

您也可以将JavaScript代码内嵌通过使用特殊标记直接将其插入HTML标记中的属性，如onclick，onmouseover，onkeypress，onload，等。

但是，您应该避免内联放置大量 JavaScript 代码，因为它会使您的 HTML 与 JavaScript 混在一起，并使您的 JavaScript 代码难以维护。下面是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inlining JavaScript</title>        
</head>
<body>    
    <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

上面的示例将向您显示单击按钮元素时的警报消息。

**提示：**您应该始终将网页的内容和结构（即 HTML）与表示 (CSS) 和行为 (JavaScript) 分开。

脚本在 HTML 文档中的定位

该<script>元素可以放置在HTML 文档的<head>、 或<body>部分中。但理想情况下，脚本应该放在 body 部分的末尾，就在结束</body>标记之前，这将使您的网页加载速度更快，因为它可以防止初始页面呈现的障碍。

每个<script>标签都会阻止页面渲染过程，直到它完全下载并执行了 JavaScript 代码，因此将它们<head>无任何正当理由放置在文档的头部部分（即元素）将显着影响您的网站性能。

**提示：**您可以<script>在单个文档中放置任意数量的元素。但是，它们是按照它们在文档中出现的顺序从上到下进行处理的。

客户端和服务器端脚本之间的区别

客户端脚本语言如 JavaScript、VBScript 等由 Web 浏览器解释和执行，而服务器端脚本语言如 php、ASP、Java、Python、Ruby 等在 Web 服务器上运行并输出以 HTML 格式发送回 Web 浏览器。

与传统的服务器端脚本方法相比，客户端脚本有许多优点。例如，您可以使用 JavaScript 检查用户是否在表单字段中输入了无效数据，并在将表单提交到 Web 服务器以进行最终数据验证和进一步处理之前，实时显示相应的输入错误通知，以防止不必要的网络带宽使用和服务器系统资源的利用。

此外，与客户端脚本相比，来自服务器端脚本的响应速度较慢，因为服务器端脚本是在远程计算机上而不是在用户的本地计算机上处理的。

Hello, world！

本教程的这一部分是关于核心 JavaScript，即语言本身。

但是我们需要一个工作环境来运行我们的脚本，而且由于本书是在线的，浏览器是一个不错的选择。我们会将特定于浏览器的命令（例如alert）的数量保持在最低限度，这样如果您打算专注于另一个环境（例如 Node.js），就不会在这些命令上花费时间。在本教程的下一部分，我们将重点介绍浏览器中的 JavaScript 。

首先，让我们看看如何将脚本附加到网页上。对于服务器端环境（如 Node.js），您可以使用类似"node my.js".

“脚本”标签

JavaScript 程序几乎可以使用<script>标签插入到 HTML 文档的任何位置。

例如：

<!DOCTYPE HTML>
<html>

<body>

  <p>Before the script...</p>

  <script>
    alert( 'Hello, world!' );
  </script>

  <p>...After the script.</p>

</body>

</html>

该<script>标签包含当浏览器处理标签，其被自动执行JavaScript代码。

现代标记

该<script>标签具有很少采用时下，但仍可以在旧代码中发现了几个属性：

  • 该type属性：<script type=…>

    旧的 HTML 标准 HTML4 要求脚本具有type. 通常是type="text/javascript"。它不再需要了。此外，现代 HTML 标准完全改变了该属性的含义。现在，它可以用于 JavaScript 模块。但这是一个高级主题，我们将在教程的另一部分讨论模块。

  • 该language属性：<script language=…>

    此属性旨在显示脚本的语言。此属性不再有意义，因为 JavaScript 是默认语言。没有必要使用它。

  • 脚本前后的注释。

    在真正古老的书籍和指南中，您可能会在<script>标签中找到注释，如下所示：<script type="text/javascript"><!-- ... //--></script>这个技巧在现代 JavaScript 中没有使用。这些注释对不知道如何处理<script>标签的旧浏览器隐藏了 JavaScript 代码。由于过去 15 年发布的浏览器没有这个问题，这种注释可以帮助您识别真正的旧代码。

外部脚本

如果我们有很多 JavaScript 代码，我们可以把它放到一个单独的文件中。

脚本文件通过以下src属性附加到 HTML ：

<script src="/path/to/script.js"></script>

这里，/path/to/script.js是从站点根目录到脚本的绝对路径。还可以提供当前页面的相对路径。例如，src="script.js"表示"script.js"当前文件夹中的一个文件。

我们也可以提供完整的 URL。例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

要附加多个脚本，请使用多个标签：

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

请注意：

通常，只将最简单的脚本放入 HTML。更复杂的文件驻留在单独的文件中。

单独文件的好处是浏览器将下载它并将其存储在其缓存中。

引用相同脚本的其他页面将从缓存中获取它而不是下载它，因此该文件实际上只下载一次。

这减少了流量并使页面更快。

如果src设置，脚本内容将被忽略。

单个<script>标签不能同时包含src属性和代码。

这行不通：

<script src="file.js">
  alert(1); // the content is ignored, because src is set
</script>

我们必须选择外部<script src="…">或常规<script>代码。

上面的例子可以分成两个脚本来工作：

<script src="file.js"></script>
<script>
  alert(1);
</script>

概括

  • 我们可以使用<script>标签向页面添加 JavaScript 代码。
  • 将type和language属性不是必需的。
  • 外部文件中的脚本可以插入<script src="path/to/script.js"></script>.

关于浏览器脚本及其与网页的交互，还有更多内容需要了解。但是请记住，本教程的这一部分专门针对 JavaScript 语言，因此我们不应该通过浏览器特定的实现来分散自己的注意力。我们将使用浏览器作为运行 JavaScript 的一种方式，这对于在线阅读非常方便，但只是众多方式中的一种。
下一节带来JavaScript语法
关注我，继续追更！

以上是关于JavaScript入门JavaScript专题1的主要内容，如果未能解决你的问题，请参考以下文章

[WWCodeSH 前端专题] JavaScript函数式编程一小时从入门到精通(误)

JavaScript专题专栏目录

3. 现代 javascript 数组专题

专题讲解：JavaScript中while以及do while循环

JavaScript专题深浅拷贝

JavaScript专题专栏目录