目录
一、JavaScript简介[了解]
1 1、JavaScript概述：
1 2、JavaScript特点：
二、JavaScript初体验
3 1、前端开发三大组件：
3 2、前端项目开发结构
三、第一个JavaScript程序
四、引入JavaScript
① 行内 js 代码
② 内嵌 js 代码
③ 外链 js 代码
五、 JavaScript弹窗
① 警告对话框
② 确认对话框
③ 交互对话框(了解)
六、 JavaScript调试
①控制台查看错误信息
② 源代码调试执行
③、JavaScript基本语法
(2) 三种输出
(3) 变量
(4)数据类型
(5) 基本类型的操作
一、JavaScript简介[了解]
学习技术：javaScript
注：技术描述中禁忌一个字母一个字母拼读
1、JavaScript概述：
JavaScript 是一个基于对象的、事件驱动的、跨平台的、解释型的编程语言
什么是编程语言？
HTML 标记语言：使用特定的、固定的标记/标签，包裹/存储一部分内容
特征：标记语言的特点，就是给数据进行标记的
JavaScript 编程语言：使用特定的语法、固定的执行逻辑，处理一件事情
特征：编程语言的特点，可以执行数据运算
2、JavaScript特点：
基于对象、事件驱动、跨平台、解释型
基于对象： JavaScript 语言中提供了大量的对象可以直接使用，提高程序开发效率
事件驱动：语言可以让项目和用户的操作(敲击键盘、点击鼠标…)之间产生一些良好的交互
跨平台：不同的操作系统上都可以使用
解释型：编程语言可以写多行，逐行解释执行
拓展：
编程语言根据执行过程，区分为编译型、解释型、编译解释型编译型：先整体编译，得到目标文件后，直接执行。编译过程缓慢(不能跨平台)，但是执行速度最快，以C语言为代表
类比生活：一个翻译公司，你发了一篇需要翻译的文章，整体翻译结束后发给你
解释型：将代码解释一行，执行一行。执行过程较慢，代码中的问题定位准确(开发效率较高)，以 JavaScript 、 Python
…为代表 类比生活：一个翻译官，你有一篇需要翻译的文章，翻译一句给你解释一句
编译解释型：先编译得到中间结果，然后解释执行，结合了编译型、解释型语言的优势，以 Java 语言为代表
二、JavaScript初体验
1、前端开发三大组件：
HTML ：标记数据，类似作为一个容器存储一部分数据
CSS ：样式修饰，给数据添加外观
JS ：特效开发，给数据添加动态特效
2、前端项目开发结构
项目空间文件夹/
这是一个文件夹，存储你在计算机上写的所有代码的位置 阶段文件夹/ 存储每个阶段写的所有的代码的文件夹
课程文件夹/ 按天存储每天的代码的文件夹 如：我的计算机上就可以这样来设置 E:/workspace/ 项目空间文件夹
step01/ 第一阶段 step02/ 第二阶段 … 项目文件夹/ 存储每天写的某个项目的文件夹 静态文件夹/
存储项目中静态文件的文件夹|public/static/assets css/ 存储项目中样式文件
images/ 存储项目中的图片文件 index.html
一般表示主页文件，项目中访问的第一个页面 login.html 登陆页面，国外网站：signin.html
register.html 注册页面，国外网站：signup.html profile.html
用户资料 ucenter.html 用户中心 …
三、第一个JavaScript程序
创建第一个 HTML页面 :
<body>
我的第一个动态网页
<hr>
<button onclick="alert('hello javascript!')">点击我试试</button>
</body>
备注： onclick ：是一个标签属性，和 id 、 class 一样以 on 开头的属性，称为事件属性，可以接受用户的某个操作
onclick 属性，可以在标签上接受用户使用鼠标单击的操作 οnclick="…" ：标准的属性编写方式，属性的值使用双引号包含
alert(‘hello javascript’) ：标注的 javascript代码 alert() 表示通知浏览器，弹出一个窗口
‘hello javascript’ ：弹出的窗口中展示引号中包含的内容易错点：
οnclick=“alert(“hello javascript”)” 错误写法 使用了多余的双引号，造成前面两个双引号匹配
“alert(” ，后面一对双引号匹配 “)” ，结果中间一段数据暴露出来了-无效字母
解决方案：外侧使用了双引号，内侧就使用单引号；反之亦然！
四、引入JavaScript
① 行内 js 代码
编写的简单的 js 代码，可以直接写在标签的事件属性中，当标签的事件发生操作的时候执行这些代码
注意：使用较少
记忆：类似行内样式，将样式代码写在 style 属性中
② 内嵌 js 代码
编写较为复杂的 js 代码，放在当前 html 网页中的 script 标签中使用，当打开网页时就会自动执行 script 标签中的 js 代码
注意：使用较为频繁，掌握它的编写格式，将 js 代码写在了一对 script 标签中
记忆：类似页面内嵌样式，将样式代码写在 style 标签中
易错点：
script 标签，可以写在任意位置，也可以写任意多个，建议写在 body 标签的末尾(可以是内部可以是外部)，页面内容加载完成后，再渲染执行 js 代码，不影响页面加载性能。script 标签中，直接编写 js 代码；代码两侧不需要添加引号。引号包含的内容专业术语字符串，表示一段整体的数据！
③ 外链 js 代码
一个成熟的 HTML 网页中，尽量让网页中只包含 HTML 标签、 css 文件中包含样式代码、 js 文件中包含 javascript 代码，做到不同的文件中只包含单纯的一种语法代码，方便后期代码量较多的情况下的代码修改和维护
易错点：
script 标签必须成对，不能简写 标签内部不能包含其他 js 代码，
五、 JavaScript弹窗
弹窗是网页中非常重要的一个功能， JavaScript 语法中提供了三种不同形式的浏览器弹窗可以很方便的支持一些简单的应用
注意：如果我们需要定制样式比较丰富的弹窗，这里默认的弹窗就不要使用
① 警告对话框 alert
警告对话框，也称为信息提示对话框，主要用于以弹窗的形式提示给用户一些信息
特点：在弹窗之后用户必须点击确定或者关闭按钮，才能继续操作页面其他数据
② 确认对话框confirm
用户在页面上执行一些敏感的操作时，需要给用户进行一个友好的提示，用于可以选择点击确定或者取消按钮，当用户点击确定时执行某个操作，点击取消时撤销某个操作！
1）javascript中提供的确认对话框
confirm(“提示信息：确认执行这样的操作吗？”)
2）用户确认的结果，必须通过一个东西(变量)接受进来处理
var result = confirm(“确认删除用户吗？”)
alert(“结果：” + result)
备注：用户点击了确定，result中存储一个true，用户点击了取消，result中存储false
③ 交互对话框(了解)prompt
用户在页面上需要输入一些数据，除了 HTML表单标签 之外， javascript 提供了一个交互对话框，可以接受用户的输入
注意：在实际项目中基本不用
var age = prompt(“请输入您的年龄”, 18)
alert(“用户输入了年龄：” + age)
六、 JavaScript调试
类似 HTML 编写网页，如果出现了错误应该怎么调试来排查错误，页面上的数据发生了错位或者没有达到想要的效果时，可以通过浏览器的检查窗口完成标签和样式的排查。JavaScript 中同样提供了一些操作方式，可以方便的排查出现的错误。页面上的效果没有达到我们的预期，可以通过浏览器的检查窗口(控制台- console )来查看代码中是否出现了问题，或者可以通过检查窗口中(源代码- Source )调试执行代码
① 控制台查看错误信息
编写代码文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var 1result = confirm("确定要删除用户吗？")
alert("用户操作结果：" + result)
</script>
</body>
</html>
此时执行代码，发现浏览器上不再弹出窗口，和我们预期的效果不一致；说明可能代码中出现了问题，打开浏览器的检查窗口，点击 Console/控制台 ，查看信息如下：
Uncaught Syntax Error: Invalid or unexpected token
未处理的 语法 错误： 无效的 或者期望之外的 内容/数据 demo04%E8%B0%83%E8%AF%95.html:11
demo04调试.html中的第11行代码出现了错误
② 源代码调试执行
JavaScript 代码，解释一行执行一行，为了保障每一行代码顺利执行，可以打开浏览器检查窗口，找到源代码-Source ，可以查看编写的 JavaScript源代码 ，用以一 种特殊的方式执行代码：逐行执行
1）打开源代码窗口，鼠标点击左侧导航栏中的文件：打开包含代码的文件
2） 在页面中找到 javascript 代码部分，在左侧行号上，鼠标单击添加断点
断点：代码执行的时候，临时暂停的位置，一般在需要查看代码的位置添加断点
3） 刷新网页，让浏览器执行代码，代码会停留在断点位置准备执行
4） 开发人员控制：
F8 - 直接执行到下一个断点位置
F10 -跨越函数执行，遇到函数直接执行得到结果不进入函数内部
F11 -进入函数，查看执行细节
SHIFT+F11 -从函数内部跳出函数，继续执行函数后面的代码
F9 -逐行执行，比较常用，点击之后逐行执行代码
③、JavaScript基本语法
JavaScript 作为一个编程语言，学习路线都基本是固定的
注释：解释说明的文字，辅助开发人员阅读代码
变量：类似生活中的容器，存储数据
数据类型：类似生活中的分门别类，用来表示事物
运算符：类似生活中的交易，执行数据运算
…
(1) 注释
基本语法：
// 1.单行注释，注释内容较少，只能写一行内容，大部分编辑器支持快捷键Ctrl+/
// 编写一个警告对话框
alert(“提示信息”)
/*
- 2.多行注释，注释内容较多，一行写不下需要编写多行
- 建议多行注释内容中，每行的开头都有一个*符号，让
- 多行注释代码看上去比较整齐
*/
作用 ：
注释的文本不会执行，在代码中非常、非常、非常重要！
注释本质上就是对代码的解释说明的文本内容，是多人协同开发的基础!
(2) 三种输出
程序开发过程中，随时要观察程序中的一些数据具体是多少！最方便快捷的方式就是直接展示到界面上让用户看到！
信息提示框
代码执行的时候会打断浏览器渲染网页，打断执行过程。
适用：非常重要的，紧急的数据提醒；不适用：常规、普通的数据提示：尽量不要使用 alert() ，alert弹窗会影响断点运行
② 控制台输出[掌握]
JS 提供了一个固定语法： console.log(‘数据’)
用于在不影响程序执行过程的情况下，控制台窗口中输出数据
适用于任何场景的数据查看和代码调试
③ 页面输出[了解]
页面输出内容，直接会影响网页布局，如果是临时需要展示的数据尽量避免在网页页
面上输出查看，固定语法： document.write(“数据”)
<script>
**// 3、页面输出内容【了解】**
document.write("浔阳江头夜送客")
document.write("枫叶荻花秋瑟瑟")
document.write("主人下马客在船")
document.write("举酒欲饮无管弦")
</script>
④ 备注：关于末尾分号
第一阶段： JavaScript 早期，参照其他高级语言的特性，末尾要求必须添加分号
第二阶段： JavaScript 发展，发展过程中出现了分歧，有些开发人员认为分号是程序的组成部分必须添加；有些开发人员认为分号打乱了代码逻辑顺序，省略分号让代码逻辑更加清晰；语法中和项目中对于 JS分号 变成了可选内容，具体是否添加跟随当前项目规范的要求
第三阶段： JavaScript 高级语言阶段，对于分号的依赖微乎其微；对于末尾的分号在大部分项目组中已经有规范可以不添加，提高代码逻辑性！
(3) 变量
变量是程序代码中临时存储数据的容器!
需要使用一个变量来存储姓名，某个时刻使用姓名数据
// 在酒杯中，存储红酒数据
var jiuBei = "红酒"
// 使用红酒数据，可以直接通过酒杯使用
console.log("葡萄美酒夜光杯:", jiuBei)
# 打印结果：葡萄美酒夜光杯：红酒
① 为什么使用变量
如果某个数据在代码中使用的地方较多，通过变量存储这个数据和使用这个数据，在后期代码修改和维护上就会方便很多；避免直接编写数据~导致手工修改每个数据位置的尴尬
<script>
// 班级名称
var name = "0608WEB精品班"
// 2、使用变量操作数据：如果班级名称发生变化，只需要修改变量存储数据
console.log("某个位置x9", name)
console.log("某个位置x87", name)
console.log("某个位置x33", name)
console.log("某个位置x108", name)
console.log("某个位置x222", name)
console.log("某个位置x387", name)
// 1、直接使用数据:如果班级名称发生变化，后面的数据手工逐个进行修改
console.log("某个位置1：", "VIP0608WEB")
console.log("某个位置100：", "VIP0608WEB")
console.log("某个位置289：", "VIP0608WEB")
console.log("某个位置310：", "VIP0608WEB")
console.log("某个位置403：", "VIP0608WEB")
console.log("某个位置519：", "VIP0608WEB")
</script>
② 变量基本语法
变量类似生活中的容器
生活中创建了一个容器，才能使用容器装东西
代码中声明了一个变量，才能使用变量存储数据：变量先声明、后使用
// 1、变量的标准声明语法 // 固定语法： var 变量名称 = 要存储的数据; var name = “damu” //
2、变量的扩展声明语法-ES6标准中推荐 // 高级语法进行了完善：let 变量名称 = 要存储的数据; let qq =
“1007821300” // 3、变量的扩展声明语法，了解即可[以后语法逐渐废弃] //
不适用任何关键词，直接写个变量名称存储数据：变量名称 = 要存储的数据 age = 20 //
2、使用变量中的数据：直接通过变量名称使用 console.log(“姓名：” + name, “；qq:” + qq, )
变量的使用
// 1、变量：声明 // 自定义变量名称，需要做到如下规则 // ① 变量名称由 字母、数字、下划线组成，数字不能开头 // ②
变量 尽量使用 英文单词(可以使用词典翻译)；可以适当使用拼音；见名知意 // ③ 变量
由一个或者多个英文单词组成，第一个单词全部小写，后面每个单词首字母大写，称为驼峰命名法 var name = “damu” 正确、合法
var userGender = “男” 正确、合法 var 1age = 20 错误：数字开头 var gender% = “男”
错误：包含特殊符号 var addr info = “北京市” 错误：多个单词之间出现空格 // 快捷声明 var name =
“damu”, age=18, gender=“男” var numberX = numberY = numberZ = 100 //
2、变量：赋值 var name; // 声明变量（一般声明的同时就会赋值） console.log(name) //
undefined name = “damu”; // 变量赋值 console.log(name) // damu //
3、变量：使用 // ① 变量尽量只声明一次 var name = “damu” var name = “xiaoli” //
建议，可以直接赋值，name=“xaioli” // ② 变量中存储的数据，可以修改 var age = 18 age = 20 //
变量重新赋值，相当于修改了变量中的数据 console.log(age) // 20
(4) 数据类型
软件是用来解决生活中的问题的！解决的问题的核心是处理数据！就需要在软件中通过编程语言描述不同类型的事物，才能达到解决问题的初步目的！
结论：如何使用编程语言来表示生活中的所有事物！
任何复杂的事物，都可以由简单的数据进行描述
人：姓名(字符)、身高(整数)、体重(小数)、年龄(整数)、性别(字符)…
电脑：品牌(字符)、尺寸(小数)、配置(字符)、价格(小数)… …
JavaScript 作为一个成熟的编程语言，提供了基础的数据类型
同时 JavaScript 提供了一些复杂类型用于高级操作
(5) 基本类型的操作
① typeof()
检测变量中存储的数据的具体类型
typeof(10) # number
② Number
数值类型，可以用来描述各种数值：整数、负数、浮点数等等
// 1、Number 数值
// 正常数值表示方式[掌握]
var height = 175
var weight = 75.5
var shouRu = -2368
console.log("身高：", height, typeof(height))
console.log("体重：", weight, typeof(weight))
console.log("收入：", shouRu, typeof(shouRu))
// 数值：其他进制表示方式
// 十进制：0 1 2 3 4 5 6 7 8 9 10[使用最多]
// 八进制：0 1 2 3 4 5 6 7 10
// 二进制：0 1 10 11 100 101 110 111
// 十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 ...
// 0开头的数值，默认会被解释成八进制数据
var n1 = 010
console.log("n1: ", n1)
// 特殊数值[熟悉]
// - NaN: Not a Number 不是一个数字；类型-是一个数值
var r = 5 - 3
var r2 = 5 - "a"
console.log("r = 5 - 3: ", r, typeof(r))
console.log("r2 = 5 - 'a': ", r2, typeof(r2))
// -Infinity : 无穷[熟悉]
var r3 = 1 / 0
console.log("r3 = 1 / 0:", r3, typeof(r3))
// - 精度损失：底层数据运算本质上来说不是问题[了解]
// 计算机底层是二进制运算，某些特殊数据处理时，十进制数据转换的问题
// 需要注意：我们在进行应用软件开发时，需要注意这里的精度损失！
var r4 = 0.2 + 0.1
console.log("r4 = 0.2 + 0.1:", r4)
③ String
字符串数据，是程序中使用频率最高的一种类型
// 1、字符串[掌握]
// 程序代码中，使用引号包含的一段字符，称为字符串
var name = "damu"
var name2 = 'xiaoli'
// 字符串直接通过变量使用
console.log(name)
console.log(name2)
// 字符串拼接：使用+符号，可以将多个字符串拼接起来
console.log("姓名：" + name)
console.log("姓名：" + name2)
// 字符串长度，字符串.length 固定语法
console.log("姓名1长度：", name.length)
console.log("姓名2长度：", name2.length)
// 字符串，获取指定位置的字符
console.log("姓名1开头位置：", name[0] )
console.log("姓名2开头违：", name2.charAt(0) )
457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
