前端研习录（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

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

相关阅读:
算法面试手撕代码高频题汇集
接口自动化测试分层设计与实践总结01
Linux实验五：进程管理
PDF格式分析（八十一）——声音注释（Sound）
微信浏览器大字体模式按钮文字居中用line-height 显示异常
AI 开发狂飙！.NET 11 Preview 4 原生集成向量搜索 + MCP 模板，EF Core 直接对标 RAG 应用
语料库数据处理个案实例（句子检索相关个案）
字符串函数以及内存函数的模拟实现（万字总结）
【小程序】微信公众号模板消息跳转小程序发送失败：errcode=40013 , errmsg=invalid appid rid:...
【3D人脸】AI Mesh 数据工程调研

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