前端研习录（16）——JavaScript引入、注释及输出方式讲解及示例说明

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入JavaScript引入、注释及输出方式部分

一、JavaScript引入到文件

1、直接嵌入到HTML中

我们可以直接将JavaScript代码嵌入到HTML文件中，如下所示：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    
    <script>
        
        // js代码

    script>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2、引入本地独立js文件

我们可以直接在项目文件夹下新建js文件来单独编程js代码，而后引入到HTML文件中，如下所示：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script type="text/javascript" src="./js/jsdemo.js">script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12

3、引入网络来源文件

我们可以直接引用网络中的js文件到HTML文件中，如下所示：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
head>
<body>

body>
html>>
1
2
3
4
5
6
7
8
9
10
11
12
13

二、JavaScript注释

1、单行注释

单行注释采用双斜杠“//”的方式，如下：

var str 
//str = "这是一行输出文本"
console.log(str)
1
2
3

2、多行注释

多行注释采用“/* */”的方式，如下：

var str 
/*
str = "这是一行输出文本"
console.log(str)
*/
1
2
3
4
5

三、JavaScript输出方式

JavaScript有很多种输出方式，可以让我们更直观的看到程序运行的结果，常用的有以下三种输出方式

1、弹出对话框

在浏览器中弹出一个对话框，然后把要输出的内容展示出来，alert都会将要展示的内容先转换为字符串再进行输出，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        alert("welcome！！！")
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果如下：

在这里插入图片描述

2、输出至页面

document.write 可将内容输出至页面，示例如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
    <style>
        h1{
            color: red;
        }
    style>
head>
<body>
    <script>
        var str;
        str = "welcome
"
        document.write(str)
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果如下：
在这里插入图片描述

3、输出至控制台

console.log() 可以将内容输出至控制台，示例如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        var str;
        str = "请将这行打印在控制台"
        console.log(str)
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果如下：
在这里插入图片描述

相关阅读:
项目快讯｜深汕特别合作区气膜羽毛球馆正式开工
vue+elementUI 设置el-descriptions固定长度并对齐
SwiftUI AR教程之应用程序中使用 RealityKit 生成 3D 文本（教程含完整源码）
sonarqube源码
第九章聚类
ServletConfig和ServletContext接口
CodeForces - 448B Suffix Structures
C++指针解读（8） -- 指针数组和二重指针
Converting HTML to PDF in .NET 7 Crack
vue - Vue脚手架/消息订阅与发布

原文地址：https://blog.csdn.net/WXKKang/article/details/126149096