花生_TL007

这个屌丝很懒，什么也没留下！

热门标签

【JavaScript】JavaScript 简介 ③ ( JavaScript 单行/多行注释 | 输入输出语句 | prompt 函数 | alert 函数 | console.log 函数 )_script注释

作者：花生_TL007 | 2024-05-31 18:25:13

踩

script注释

文章目录

一、JavaScript 注释
二、JavaScript 输入输出语句

一、JavaScript 注释

1、单行注释

JavaScript 脚本语言中 , 使用 // 符号来进行单行注释 , 在该符号之后的任何内容 , 直到行尾 , 都不会被 JavaScript 解释器执行 ;

单行注释代码示例 :

// 单行注释 , 直到行尾都是注释内容 
var x = 5; // 单行注释 也 可以 在代码行的 末尾添加 
1
2

单行注释快捷键 : Ctrl + / ;

2、多行注释

在 JavaScript 脚本代码中 , 使用 /* 开始和 */ 结束进行多行注释 , 这两个符号之间的所有内容都不会被 JavaScript 引擎解释执行 ;

多行注释代码示例 :

/*  
 	多行注释  
 	使用多行文本解释代码的功能  
*/  
var y = 10;
1
2
3
4
5

多行注释快捷键 :

默认快捷键 : Shift + Alt + A
建议快捷键 : Ctrl + Shift + /

3、设置多行注释快捷键

点击左下角的设置按钮 , 选择 " 键盘和快捷键 " 选项 , 设置快捷键 ;
在这里插入图片描述

多行注释 : 将多行注释快捷键修改为 Ctrl + Shift + / ;
在这里插入图片描述

二、JavaScript 输入输出语句

1、浏览器输入框 - prompt()

JavaScript 中的 prompt() 函数的作用是弹出一个对话框 , 该对话框带有输入字段 , 用户可以在该对话框中输入文本 ;

prompt() 函数语法 :

var text = prompt(message, defaultText);
1

参数解析 :
- message : 可选的字符串 , 指定要在对话框中显示的提示文本 ;
- defaultText : 可选的字符串 , 指定输入字段的默认文本 ;
返回值解析 : 函数返回值可以存储在变量中 , 后续 JavaScript 脚本可以使用该变量 ;

除了输入字段外 , prompt() 对话框包含用户输入文本框 , " 确定 " 按钮 , " 取消 " 按钮 ;

点击 " 确定 " 按钮时 , 函数返回用户输入的文本 ;
点击 " 取消 " 按钮或关闭对话框 , 函数返回 null ;

核心代码 :

    <script>
        // 输入框
        prompt("输入内容");
    </script>
1
2
3
4

完整代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 输入框
        prompt("输入内容");
    </script>
</head>

<body>
</body>

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

展示效果 :

在这里插入图片描述

刷新页面后 , 显示内容 :

在这里插入图片描述

2、浏览器警告框 - alert()

JavaScript 中的 alert() 函数作用是显示警告对话框 , 该对话框中包含指定文本和 " 确定 " 按钮 ;

用户点击 " 确定 " 按钮或关闭对话框时 , 对话框消失 , JavaScript 代码继续执行下一行 ;

alert() 函数的使用场景常用于代码调试 , 或向用户提示警告信息 ;

由于 alert() 函数是阻塞式的 , 会产生阻塞中断 , 在正式的生产环境中谨慎使用 ;

alert() 函数语法 :

alert(message);
1

message 参数解析 : 该参数是可选字符串 , 用于指定要在警告对话框中显示的文本 ;
- 如果省略该参数 , 则弹出空对话框 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 警告框
        alert("Hello World");
    </script>
</head>

<body>
</body>

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

展示效果 :

在这里插入图片描述

刷新页面后 , 显示警告框 :
在这里插入图片描述

3、浏览器控制台输出 - console.log()

JavaScript 语言的 console.log() 函数的作用是在浏览器的开发者控制台或 Node.js 的命令行界面中输出信息 ;

该函数允许开发者执行如下操作 :

查看变量的当前值
输出调试信息
检查代码的执行流程

console.log() 函数用于调试 JavaScript 程序 , 频繁使用该函数会降低页面性能 , 建议在发布到生产环境之前移除或注释掉不必要的 console.log() 函数调用 ;

console.log() 函数语法 :

console.log(msg);  
1

输出字符串 :

var name = "Tom"; 
console.log('Hello, Tom!');
console.log('Hello, ' + name + '!');
1
2
3

输出包含占位符的字符串 :

var name = "Tom"; 
console.log('Hello, ${name}!');
1
2

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 输出信息
        console.log('Hello, Tom!');
    </script>
</head>

<body>
</body>

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

展示效果 :

刷新页面 , 按 F12 键 , 进入到调试模式的 Console 控制台 , 可以看到输出信息 ;

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/653768