JS-JavaScript初识
0. JavaScript简介
概念：JavaScript是一种运行在客户端（浏览器）的编程语言。
作用：
- 网页特效（监听用户的一些行为让网页做出相应的反馈）
- 表单验证（针对表单数据的合法性进行判断）
- 数据交互（获取后台的数据，渲染到前端）
- 服务端编程（node.js）
组成：
1.ECMAscript
2.DOM
3.BOM
（DOM和BOM属于WebAPIs）
1. 引入方式
JavaScript 程序不能独自运行，它需要被嵌入到 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种引入方式：
1.1 内部引入
通过 script 标签包裹 JavaScript 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
<script>
alert('嗨，你好！')
</script>
</body>
</html>
1.2 外部引入
一般将 JavaScript 代码写在独立的以 .js 为结尾的文件中，然后通过 script 标签的 src 属性引入
// demo.js 中
document.write('嗨，你好')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js">
//此处代码会自动忽略
</script>
</body>
</html>
注意：如果用了外部引入，则 script 标签中的代码会自动忽略
2. 注释和结束符
通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：
2.1 单行注释
使用 // 注释单行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 注释</title>
</head>
<body>
<script>
// 这种是单行注释的语法
// 一次只能注释一行
// 可以重复注释
document.write('嗨，欢迎！');
</script>
</body>
</html>
2.2 多行注释
使用 /* */ 注释多行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 注释</title>
</head>
<body>
<script>
/* 这种的是多行注释的语法 */
/*
更常见的多行注释是这种写法
在些可以任意换行
多少行都可以
*/
document.write('嗨，欢迎！')
</script>
</body>
</html>
注：编辑器中注释的快捷键为 ctrl + /
3. 结束符
在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 结束符</title>
</head>
<body>
<script>
alert(1);
alert(2);
alert(1)
alert(2)
</script>
</body>
</html>
实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;
4. 输入和输出
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。
4.1 输出
JavaScript 可以接收用户的输入，然后再将输入的结果输出，有三种形式：
- 弹出警示框：
alert('哈哈哈') - 页面文字输出：
document.write('吼吼吼') - 控制台输出（多用于程序员调试）：
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>Document</title>
</head>
<body>
<script>
alert('你好 JS~')
document.write('JavaScript我来了')
console.log('它~会魔法吧~')
</script>
</body>
</html>
4.2 输入
向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
该语法会返回输入框中的输入内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 输入输出</title>
</head>
<body>
<script>
// 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
prompt('请输入您的姓名:')
</script>
</body>
</html>
注意：一般来说，对代码的执行顺序是按照从上到下的顺序来执行的，但是此处alert()和prompt()作为弹窗会优先执行。
浙公网安备 33010602011771号