JavaScript 基础(一)

2024-01-02 08:39:27

实验需新建一个 test.html 文件,用于编写代码。后续的例子中,将不再提醒建立文件,大家根据个人需求自行创建对应的 html 文件,并完成代码练习:

首先来看看范例代码:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script>
      console.log("hello world");
    </script>
  </body>
</html>

上述代码的含义就是在我们的控制台打印一句话:hello world。首先教大家怎么查看:将上述代码复制到一个 html 文件中,然后按照下图所示,启动 Web 服务,并点击右侧 “Web服务”浏览器中运行:

图片描述

之后,再在浏览器中点击 F12,再点击控制台上的 Console,即可查看。如下图所示:

1

值得注意的是我们可以直接在控制台上输入 JavaScript 代码,然后点击 enter 让其执行。如下图所示我们执行几行简单的加减乘除:

1

通过上面的代码,我们可以看出 JavaScript 代码是放在?<script>……</script>?标签里,而包含 JavaScript 代码的 script 标签,我们可以放在?<body>……</body>?标签里,也可以放在?<head>……</head>?标签里。比如上述范例也可以这样写:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script>
      console.log("hello world");
    </script>
  </head>
  <body></body>
</html>

执行结果没有什么区别,不同的是执行顺序,简单的来说,放在前面的会先执行。此外,和 CSS 引入相类似,JavaScript 也可以通过外部引入。首先我们需要创建一个扩展名为 .js 的文件,然后在 html 页面中引入它。同样的拿上述范例来修改,我们首先创建一个叫 test.js,名字可以自己取,但是扩展名一定要是 .js,只有这样才能够识别包含 JavaScript 代码的文件,然后在里面写上我们的 JavaScript 代码:

console.log("hello world");

在 html 文件中写上如下代码:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script src="test.js"></script>
  </body>
</html>

值得注意的是 test.js 文件要和你的 html 文件在同一目录下才能用上面的方式引用,否则的话需要使用绝对路径来引入 js 文件,具体引入需要根据实际情况灵活运用了。前两种方式都是直接把 JavaScript 代码放在 HTML 中,在页面加载的同时,那些 JavaScript 的代码就被解析了。而把 JavaScript 代码放在外部文件中,只有在事件被触发,需要该段 JavaScript 代码时,才调用执行。这样做有个好处,当页面比较复杂的时候,把大量的 JavaScript 代码放到外部文件,只有在需要的时候才执行,那么会明显地加快页面加载速度,而且实现结构化分离,也便于我们维护自己的代码,所以建议大家养成外部引入的方式来写我们的 JavaScript 代码。

文章来源:https://blog.csdn.net/m0_73811154/article/details/135331440
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。