一.JavaScript简介
一种广泛使用的高级编程语言，主要用于在网页中实现交互功能（HTML和CSS不是编程语言，而是标记语言）
JS的主要特点：
- 动态类型：变量的数据类型在运行时确定，无需提前声明
- 解释型语言：代码通常由浏览器直接解释执行，不需要编译
- 事件驱动：支持响应用户操作（如点击、滚动、键盘输入等）
- 跨平台：可在各种操作系统和设备上的浏览器中运行
- 多范式：支持面向对象、函数式、命令式等多种编程风格
JS的主要用途：
- 前端开发：操控网页内容（通过DOM操作）、响应用户交互（按钮点击、表单验证等）、动态加载内容（如AJAX、Fetch API）
- 后端开发：使用Node.js可以用JavaScript编写服务器端程序、可以构建API、数据库交互、文件处理等
- 移动与桌面应用
- 游戏与动画
二.JS的基础学习
先要安装：
在vscode中要安装扩展插件open in browser和Live Server，还有Error Lens
open in browser插件用于打开浏览器；
Live Server插件便于查看代码运行结果（ctrl+s保存浏览器界面就会自动发生变化，不用再手动点击浏览器左上方的refresh键；且win键加箭头可以分屏显示，让一屏写代码，一屏就能看到运行效果，利用电脑的这个快捷键可以使得开发效率大大提高）
Error Lens可以在写代码的过程中如果出现错误，就会显示出红色的警告！
1.JS的书写位置
和CSS一样，有三种书写位置
1.行内JS
2.内部JS
直接写在HTML文件里，用script标签包裹住。
其中script标签要写body标签中的最末尾，即最靠近</body>的地方。
写在</body>上方而不是<body>下方可以让HTML元素显示在js代码的上方，方便js对HTML元素操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 内部js --> <script> alert('你好，js~') </script> </body> </html>运行结果：
3.外部JS
先新建一个.js文件myjs.js
内容如下：
alert('你好，书写位置在HTML文档外部的js~')然后在HTML文件里书写代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=sc, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./myjs.js"></script> </body> </html>运行结果：
注意：
（1）script标签中无需写代码，写了内容也不会被执行。
（2）外部JS会使代码更加有序，更易于复用；且没有了脚本的混合，HTML也会更加易读。因此书写外部JS代码是一个良好的习惯。
2.JS中的注释与结束符
1.单行注释
//
作用：//右边的内容是注释部分
快捷键：ctrl + /
2.多行注释
/**/
作用：/*和*/中间的部分是注释部分
快捷键：shift + alt + a
3.结束符
用英文的分号；表示语句的结束
在实际开发中，;可写可不写，浏览器（JavaScript引擎）可以自动推断浏览器的位置
在现代开发中，越来越多的人开始在语句结束后不加分号
为了统一，建议要么都加分号，要么都不加分号
3.JS的输入输出语法
1.输出语法
1.document.write()
作用：向body内输出内容
注意：如果输出的内容写的是标签，那么标签也会被解析成网页元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> document.write('向文档写入内容') </script> </body> </html>运行结果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> document.write('向文档写入内容') document.write('一级标题') </script> </body> </html>运行效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> document.write('向文档写入内容') document.write('<h1>一级标题</h1>') </script> </body> </html>运行结果：
打开开发者工具：
2.alert()
作用：页面弹出警告对话框
3.console.log()
作用：控制台输出语法，程序员调试使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> document.write('向文档写入内容') document.write('<h1>一级标题</h1>') console.log('我向控制台输入了内容！') </script> </body> </html>运行效果：
2.输入语法
prompt()
<html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> <script> prompt('请输入你的姓名：') </script> </body> </html>运行效果：
4.JS中的代码执行顺序
JavaScript代码的执行顺序：
按HTML文档流执行JavaScript代码（从上往下执行）
但是有例外，alert()和prompt()会跳过页面渲染先被执行
5.字面量
在计算机科学中，字面量（literal）是计算机描述的事和物
数字字面量： 520
字符串字面量： '黑马程序员'
数组字面量： []
对象字面量： {}
6.变量的声明和赋值
变量是用来存储数据的容器
1.变量的声明
let 变量名声明关键字：let
变量名
2.变量的赋值
等号=，用来赋值
3.代码示例
<html> <head> <meta charset="UTF-8"> <title>JS变量的声明和使用</title> </head> <body> <script> let age age = 18 console.log(age) </script> </body> </html>打开开发者工具并点击控制台（console）：
4.变量的初始化
即在变量的声明的同时就给它赋值
<script> let age = 18 let name = '张三' </script>7.变量的基本使用
1.更新变量
<html> <head> <meta charset="UTF-8"> <title>JS变量的使用</title> </head> <body> <script> let age = 18 console.log(age) age = 19 console.log(age) </script> </body> </html>效果：
不能为已经声明过的变量再声明，如下面：
declare：宣布，声明
variable：易变的，多变的；变量（因此编程中有用var来作为变量名的）
打开开发者工具：
2.声明多个变量
<html> <head> <meta charset="UTF-8"> <title>JS变量的使用</title> </head> <body> <script> // let age = 18 // console.log(age) // let age = 19 // console.log(age) let age = 18, uname = '张三' console.log(age, uname) </script> </body> </html>打开开发者工具并点击Console：
3.输入输出加变量的练习
<html> <head> <meta charset="UTF-8"> <title>JS变量的使用</title> </head> <body> <script> // let age = 18 // console.log(age) // let age = 19 // console.log(age) // let age = 18, uname = '张三' // console.log(age, uname) let uname = prompt("请输入你的名字：") document.write(uname) </script> </body> </html>效果：
会在网页中输出：
