JavaScript基础

最新推荐文章于 2022-11-23 17:32:46 发布

李嘉豪554

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量332

点赞数

本文链接：https://blog.csdn.net/weixin_44251004/article/details/87989694

版权

在HTML页面中加载JavaScript

如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 <script> 标签。

这样，就可以告诉浏览器 JavaScript 从何处开始，到何处结束。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    document.write('hello world!')
</script>
</body>
</html>

上面的代码会在HTML页面中产生这样的输出：

document.write 字段是标准的 JavaScript 命令，用来向页面写入输出。这样浏览器就会向页面写入 "Hello World!"。

注意：如果我们不使用 <script> 标签，浏览器就会把 document.write("Hello World!") 当作纯文本来处理，也就是说会把这条命令本身写到页面上。

把JavaScript放置到何处

当页面载入时，会执行位于 body 部分的 JavaScript。

当被调用时，位于 head 部分的 JavaScript 才会被执行。

head部分

包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前，脚本已经载入了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function message()
        {
            alert("该提示框是通过 onload 事件调用的。")
        }
    </script>
</head>
<body onload="message()">
</body>
</html>

输出为：

会弹出一个对话框，显示的内容是上面alert()内的内容

body部分

执行位于body部分的脚本。在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。

第一个输出'hello world!'的代码就是放置在body部分的。

外部JavaScript

在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。

将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。

注意：外部文件不能包含 <script> 标签。

然后把 .js 文件指定给 <script> 标签中的 "src" 属性，就可以使用这个外部文件了

主代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="btn">点我点我</button>
<script src="01-体验.js"></script>

</body>
</html>

外部是JavaScript代码文件：

var btn = document.getElementById('btn');
btn.onclick = function () {
    alert('你点我啦')
}

输出为：

因为本人设置的是一个按钮，所以显示出来是一个按钮

点击后会出现这是外部JS文件的内容

JavaScript语句

JavaScript 是由浏览器执行的语句序列。

这些命令的作用是告诉浏览器要做的事情。

这个 JavaScript 语句告诉浏览器向网页输出 "Hello world"：

document.write("Hello world");

通常要在每行语句的结尾加上一个分号。大多数人都认为这是一个好的编程习惯，而且在 web 上的 JavaScript 案例中也常常会看到这种情况。

分号是可选的（根据 JavaScript 标准），浏览器把行末作为语句的结尾。正因如此，常常会看到一些结尾没有分号的例子。

注意：通过使用分号，可以在一行中写多条语句。

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

本例向网页输出一个标题和两个段落：

<script>
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

输出：

JavaScript 代码块

JavaScript 可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

本例向网页输出一个标题和两个段落：

<script>
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>

输出：

JavaScript 注释

可以添加注释来对 JavaScript 进行解释，或者提高其可读性。

单行的注释以 // 开始。

本例用单行注释来解释代码：

<script>
// 这行代码输出标题：
document.write("<h1>This is a header</h1>");
// 这行代码输出段落：
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

JavaScript 多行注释

多行注释以 /* 开头，以 */ 结尾。

本例使用多行注释来解释代码：

<script>
/*
下面的代码将输出
一个标题和两个段落
*/
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

使用注释来防止执行

在本例中，我们用注释来阻止一行代码的执行：

<script>
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
//document.write("<p>This is another paragraph</p>");
</script>

在本例中，我们用注释来阻止若干行代码的执行：

<script>
/*
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
*/
</script>

在行末使用注释

在本例中，注释放置在语句的行末：

<script>
document.write("Hello"); // 输出 "Hello" 
document.write("World"); // 输出 "World" 
</script>

李嘉豪554

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫