文章目录
JavaScript 简介
JavaScript 是什么？
是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
JavaScript 作用（做什么？）
- 网页特效（监听用户的一些行为让网页做出对应的反馈）
- 表单验证（针对表单数据的合法性进行判断）
- 数据交互（获取后台数据，渲染到前端）
- 服务端编程（node.js）
JavaScript 组成
ECMAScript：
- 规定了js基础语法核心知识 比如：变量、分支语句、循环语句、对象等等
Web APIs：
- DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
JavaScript 权威网站：MDN
★JavaScript 书写位置
CSS位置
- 行内样式表
- 内部样式表
- 外部样式表
JavaScript 位置
- 内联 JavaScript
- 内部 JavaScript
- 外部 JavaScript
1、内联 JavaScript
<!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>
<!-- 内联 JavaScript -->
<button onclick="alert(`嘿嘿嘿`)">点击我</button>
</body>
</html>
2、内部 JavaScript
直接写在html文件里面，用script标签包住
规范：script标签写在</body>上面
<!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>
<h1>123</h1>
<!-- 内部 JavaScript -->
<script>
alert(`你好,JavaScript`)
</script>
</body>
</html>
3、外部 JavaScript
新建一个以 .js 结尾的文件
alert(`你好，JavaScript`)
通过script标签，引入到html页面中
<!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>
<h1>123</h1>
<!-- 外部 JavaScript-->
<script src="./01.js"></script>
</body>
</html>
注意事项
用于引入js文件的script标签内无需写代码，否则会被忽略！
JavaScript 注释
1、单行注释
符号：//
作用：// 右边这一行的代码会被忽略
快捷键： ctrl + /
2、块注释
符号：/* */
作用：在/* 和 */ 之间的所有内容都会被忽略
快捷键：shift + alt + A
JavaScript 结束符
- 代表语句结束
- 英文分号 ;
- 可写可不写
- 换行符（回车）会被识别成结束符，所以一个完整的句子，不需要手动换行
- 因此在实际开发中有许多人主张书写JavaScript代码时省略结束符
- 但为了统一风格，要写结束符就每句都写，要么每句都不写
JavaScript 输入输出语法
1、输出语法
// 文档输出
document.write(`ABC`)
// alert 警示框
alert(`ABC`)
// 控制台输出语法
console.log(`我是用来测试的`)
2、输入语法
// 输入语句
prompt(`您今年多大了？`)
字面量
在计算机科学中，字面量是在计算机中描述 事/物
比如：
我们的工资是：1000 此时 1000就是 数字字面量
`我是前端工程师` 字符串字面量还有后面要接触到的 [] 数组字面量 {} 对象字面量
★变量
-变量是什么
变量是计算机存储数据的“容器”
-变量的基本使用
要想使用变量，首先需要创建变量（专业说法：声明变量）
-语法
let 变量名
- 声明变量有两部分构成：声明关键词、变量名（标识）
- let 即关键词、所谓关键字是系统提供的专门用来声明（定义）变量的词语
举例：
let age;
- age 即变量的名称，也叫标识符
变量赋值
定义了一个变量后，你就能够初始化它（赋值）。在变量名之后更上一个 “=” ，然后就是数值。
变量的初始化（赋值）
<script>
// let 声明变量 age变量名
let age
// 赋值
age = 18
document.write (age)
</script>
或者 声明变量的时候直接赋值
<script>
let age = 18
document.write (18)
</script>
注意：let 不允许多少次声明
声明多个变量
变量赋值后，还可以通过简单地给它一个不同的值来更新它。
let age = 18, uname = `hello world`
变量的本质是什么
内存：计算机中存储数据的地方，相当于一个空间
变量：是程序在内存中申请一块用来存放数据的小空间
变量命名规则与规范
规则：
不能用关键字- 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for 等
- 只能用下划线、字母、数字、$组成，且
数字不能开头 - 字母严格
区分大小写，如 Age 和 age 是不同的变量
规范：
- 起名要有意义
- 遵守小驼峰命名法
- 第一个单词字母小写，后面每个单词首字母大写。例：userName
let和var的区别
let为了解决var的一些问题
var声明：
- 可以先使用 在声明（不合理）
- var 声明过的变量可以重复声明（不合理）
- 比如变量提升、全局变量、没有块级作用域等等
开发中尽量统一使用let
不能用关键字
- 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for 等
- 只能用下划线、字母、数字、$组成，且
数字不能开头 - 字母严格
区分大小写，如 Age 和 age 是不同的变量
规范：
- 起名要有意义
- 遵守小驼峰命名法
- 第一个单词字母小写，后面每个单词首字母大写。例：userName
let和var的区别
let为了解决var的一些问题
var声明：
- 可以先使用 在声明（不合理）
- var 声明过的变量可以重复声明（不合理）
- 比如变量提升、全局变量、没有块级作用域等等
开发中尽量统一使用let