【JavaScript】JavaScript 简介 ③ ( JavaScript 单行/多行注释 | 输入输出语句 | prompt 函数 | alert 函数 | console.log 函数 )
【JavaScript】JavaScript 简介 ③ ( JavaScript 单行/多行注释 | 输入输出语句 | prompt 函数 | alert 函数 | console.log 函数 )
一、JavaScript 注释
1、单行注释
JavaScript 脚本语言中 , 使用 // 符号来 进行 单行注释 , 在 该符号之后的任何内容 , 直到行尾 , 都不会被 JavaScript 解释器执行 ;
单行注释 代码示例 :
// 单行注释 , 直到行尾都是注释内容
var x = 5; // 单行注释 也 可以 在代码行的 末尾添加 单行注释 快捷键 : Ctrl + / ;
2、多行注释
在 JavaScript 脚本代码中 , 使用 /* 开始 和 */ 结束 进行 多行注释 , 这两个符号之间的所有内容都不会被 JavaScript 引擎 解释执行 ;
多行注释 代码示例 :
/*
多行注释
使用多行文本解释代码的功能
*/
var y = 10;多行注释 快捷键 :
- 默认快捷键 : Shift + Alt + A
- 建议快捷键 : Ctrl + Shift + /
3、设置多行注释快捷键
点击左下角的 设置按钮 , 选择 " 键盘和快捷键 " 选项 , 设置快捷键 ;
多行注释 : 将 多行注释 快捷键修改为 Ctrl + Shift + / ;
二、JavaScript 输入输出语句
1、浏览器输入框 - prompt()
JavaScript 中的 prompt() 函数 的 作用是 弹出一个对话框 , 该对话框带有输入字段 , 用户可以在该对话框中输入文本 ;
prompt() 函数语法 :
var text = prompt(message, defaultText);- 参数解析 :
- message : 可选的字符串 , 指定要在对话框中显示的提示文本 ;
- defaultText : 可选的字符串 , 指定输入字段的默认文本 ;
- 返回值解析 : 函数 返回值 可以存储在变量中 , 后续 JavaScript 脚本可以使用该变量 ;
除了输入字段外 , prompt() 对话框 包含 用户输入文本框 , " 确定 " 按钮 , " 取消 " 按钮 ;
- 点击 " 确定 " 按钮 时 , 函数 返回 用户输入的文本 ;
- 点击 " 取消 " 按钮 或 关闭对话框 , 函数返回
null;
核心代码 :
<script>
// 输入框
prompt("输入内容");
</script>完整代码 :
<!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>展示效果 :
刷新页面后 , 显示内容 :
2、浏览器警告框 - alert()
JavaScript 中的 alert() 函数 作用是 显示 警告对话框 , 该对话框中 包含 指定文本 和 " 确定 " 按钮 ;
- 用户 点击 " 确定 " 按钮 或 关闭对话框 时 , 对话框 消失 , JavaScript 代码 继续执行下一行 ;
alert() 函数 的 使用场景 常用于 代码调试 , 或 向用户提示警告信息 ;
由于 alert() 函数 是 阻塞式 的 , 会产生阻塞中断 , 在正式的生产环境中 谨慎使用 ;
alert() 函数语法 :
alert(message);- 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>展示效果 :
刷新页面后 , 显示 警告框 :
3、浏览器控制台输出 - console.log()
JavaScript 语言的 console.log() 函数 的 作用是 在浏览器的开发者控制台 或 Node.js 的命令行界面中 输出信息 ;
该函数 允许开发者 执行如下操作 :
- 查看变量的当前值
- 输出调试信息
- 检查代码的执行流程
console.log() 函数 用于调试 JavaScript 程序 , 频繁使用该函数 会降低页面性能 , 建议在发布到生产环境之前移除或注释掉不必要的 console.log() 函数 调用 ;
console.log() 函数 语法 :
console.log(msg); 输出 字符串 :
var name = "Tom";
console.log('Hello, Tom!');
console.log('Hello, ' + name + '!');输出 包含占位符的字符串 :
var name = "Tom";
console.log('Hello, ${name}!');代码示例 :
<!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>展示效果 :
刷新页面 , 按 F12 键 , 进入到调试模式的 Console 控制台 , 可以看到输出信息 ;
