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

最新推荐文章于 2024-04-21 15:16:36 发布

清风不渡

最新推荐文章于 2024-04-21 15:16:36 发布

阅读量303

点赞数 1

分类专栏：前端研习录文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/WXKKang/article/details/126149096

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

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

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>

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>>

二、JavaScript注释

1、单行注释

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

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

2、多行注释

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

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

三、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>

效果如下：

在这里插入图片描述

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 = "<h1>welcome</h1>"
        document.write(str)
    </script>
</body>
</html>

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

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>