# JavaScript 介绍⚡️

# 什么是 JavaScript❓

# JavaScript 权威网站: 😉 点击表情进入

官方定义:

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

作用：

页面特效（监听用户的一些行为让网页做出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获取后台的数据，渲染到前端）
服务端编程（node.js）

# JavaScript 的组成🗜

# JavaScript 可以分成两大类🍃

# ECMAScript⭐️

JavaScript 语言基础
- JavaScript 遵循的是 ECMAScript 的规范
- 规定了 js 基础语法核心知识
  - 比如: 变量，分支语句，循环语句，对象等等

# Web APIs ⭐️

# 又分为 : DOM，BOM

# DOM🌟

页面文档对象模型

操作文档，比如对页面元素进行移动，大小，添加，删除等操作

# BOM🌟

浏览器对象模型

操作浏览器，比如页面弹窗，检测窗口宽度，存储数据到浏览器等等

# JavaScript 书写位置🎸

# 1. 内部 JavaScript🍸

直接写在 html 文件里，用 Script 标签包住

规范：Script 标签写在 </body> 上面

扩展：alert (' 你好，js'); 页面弹出警告对话框

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<!--内部js-->
	<script>
	<!--弹出警示框-->
	alert('你好,js');
	</script>
	</body>
	<!--内部js的错误写法-->
	<!--<script></script>-->
	</html>

注意事项 ⚠️

我们将 <script> 放在 html 文件的底部附近的原因是浏览器会按照代码在文件中的 顺序加载 HTML。
如果先加载的 JavaScript 期望修改其下方的 HTML, 那么它可能由于 HTML 尚未被加载而失效。
因此， 将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略 。📗

# 2. 外部 JavaScript🗑

代码写在以.js 结尾的文件里

🎮 语法 : 通过 Script 标签，引入到 html 页面中。

# 目录结构🦂

在其它文件夹下创建一个我们要引入的 js 文件

alert('我是外部.js')

在 index.html 文件中引入外部的 js 文件

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<!-- 引入外部 js-->
	<script src="./static/My.js"><!-- 这里不能写内容 --></script>
	</body>
	</html>

注意事项 : ⚠️ 🔴

script 标签中间无需代码，否则会被忽略。
外部 JavaScript 会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

# 3. 行内 JavaScript🍀

代码写在标签内部

语法：👾

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<!--行内JavaScript-->
	<button onclick="alert('我被点击了')">我是按钮</button>
	</body>
	</html>

# JavaScript 注释🎄

JavaScript 中可以把注释分为两种: 🎯

# 第一种：单行注释🌲

符号：//

作用：// 右边这一行的代码会被忽略

	<script>
	// 单行注释
	</script>

# 第二种：块注释🌴

符号：/* */

作用：在 /* 和 */ 之间的所有内容都会被忽略

	<script>
	/* 多行注释 / 块注释 */
	</script>

# 结束符⏱

⚱️ 作用：使用英文的 ; 代表语句结束

📋 实际情况：实际开发中，可写可不写，浏览器（JavaScript 引擎）可以自动推断语句的结束位置

📋 现状：在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符

约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求） 🔺

# 输入和输出的语法🔘

什么是语法 ❓

人和计算机打交道的规则约定
我们要按照这个规则去写

输出和输入可理解为人和计算机的交互，用户通过键盘，鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

# 输出语法📤

语法 1 🎲
- 作用：向 body 内输出内容

	<script>
	/* 多行注释 / 块注释 */
	document.write('这是写出的内容');
	</script>

⚠️ 注意：如果输出的内容写的是标签，也会被解析成网页元素。

	<script>
	/* 多行注释 / 块注释 */
	document.write('这是写出的内容');
	document.write('<h1>我是标题</h1>');
	</script>

语法 2 🎲

:clipboard: **作用**：页面弹出警告对话框

	<script>
	alert('你好,js');
	</script>

语法 3 🎲
- 📋 作用：控制台输出语法，程序员调式使用

	<script>
	console.log('控制台打印:你好,js');
	</script>

# 写出一个 99 乘法表打印到页面上🌠

	<!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>
	<style>
	#table td{
	text-align:center;
	border:red 2px solid;
	border-radius:35%;
	background-color: blueviolet;
	}
	</style>
	</head>
	<body>
	<script>
	document.write('<table id="table">');
	for(let i = 1;i <= 9;i++){
	document.write('<tr>');
	for(let j = 1;j <= i;j++){
	document.write('<td>'+i+''+j+'='+ij+'</td>');
	}
	document.write('</tr>');
	}
	document.write('</table>');
	</script>
	</body>
	</html>

效果

# 输入语法📥

语法:🎲
- 📋 作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

	<script>
	<!--显示一个带有提示的对话框,让用户输入-->
	prompt('请输入您的姓名:');
	</script>

# JavaScript 代码执行顺序⚜️

按 HTML 文档流顺序执行 JavaScript 代码

alert 和 prompt 它们会跳过页面渲染先被执行🕵

	<script>
	/* 执行顺序:
	prompt: 第一个执行
	write: 第二个执行
	console: 第三个执行 */
	// 显示一个带有提示的对话框，让用户输入
	let name = prompt('请输入您的姓名:');
	document.write('你好'+name);
	console.log(name+'打开了控制台');
	</script>

# 字面量🎄

🏜

在计算机科学中，字面量（literal）是在计算机中描述事 / 物 。

比如：

我们工资是：1000 此时 1000 就是数字字面量
‘ 乾坤未定 ’ 字符串字面量
还有接下来我们学的 [] 数组字面量 {} 对象字面量等等

计算机学科 js