JS基础
目标：了解JavaScript语言的基本概念及语法规则，培养编程思维能力，为后面学习网页交互效果课程打下坚实的基础
day01(基础语法)
目标：理解变量、数据类型、等基础概念，能够实现数据类型的转换，具备利用模板字符串渲染表格的能力
JS的简介
-
概念
- JavaScript 是一种运行在客户端（浏览器）的编程语言
-
作用
-
- 网页特效 (监听用户的一些行为让网页作出对应的反馈)
-
- 表单验证 (针对表单数据的合法性进行判断)
-
- 数据交互 (获取后台的数据, 渲染到前端)
-
- 服务端编程 (node.js)
-
-
组成
- ECMAscript
- DOM
- BOM
初体验
-
案例引入
- tab栏切换案例
- 引入案例的目的： 让学生明白html+css+js如何进行相互交互合作做效果
-
JS的注释
-
//
- ctrl + /
-
/* */
- shift + alt + a
-
-
分号规范
- 可写可不写
- 推荐不写
-
script标签的位置
- 外部式
- 内部式
- 内联式
输入输出语法
-
语法
-
人和计算机打交道的规则约定
-
我们要按照这个规则去写
- 你吃了吗
-
我们程序员需要操控计算机，需要计算机能看懂
-
-
输入语法
- prompt
-
输出语法
- alert
- console.log
- document.write
-
js代码执行顺序
-
**案例练习： **
字面量
-
在计算机科学中，字面量（literal）是在计算机中描述事/物
-
123
- 是数字字面量
-
'黑马程序员' 字符串字面量
-
[] 数组字面量
-
变量
-
概念和作用
- 容器
-
声明赋值的几种写法
-
先声明,再赋值
-
声明并直接赋值
-
同时声明多个变量
- let a = 1, b = 2
-
练习
-
文字形式描述
- 声明一个变量，用于存放用户购买的商品数量为20件
- 声明一个变量，用于存放用户的姓名为"张三"
-
-
案例：
-
案例：
- 交换两个变量
-
-
变量的本质
- 在内存中开辟一个空间
-
命名规则和规范
-
规则
- 由字母、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字，例如：var for while
- 严格区分大小写
-
规范
- 变量名必须有意义
- 遵守小驼峰式命名法
-
练习
- 大厂面试题
-
-
var声明变量和let的区别(了解)
-
let为了解决var的一些问题
-
var声明:
- 可以先使用 在声明 (不合理)
- var声明过的变量可以重复声明(不合理)
- 比如变量提升、全局变量、没有块级作用域等等
-
-
数组
-
什么是数组? 为什么需要数组?
- 存储班级所有人的姓名
-
创建数组
- 字面量
- let arr = [1, 2, 3]
-
概念
-
下标 索引
- 数组中的编号 是 从 0 开始的
-
元素
- 数组中的每一项
-
长度
-
arr.length
- [1,2,3,4,5]
- 长度为5
-
-
-
取值
-
数组[下标]
-
arr[4]
- 打印出的结果为5
-
-
数据类型
-
概念和作用
-
- 更加充分和高效的利用内存
-
- 也更加方便程序员的使用数据
-
-
分类介绍
-
基本数据类型
-
-
number 数值型
-
Infinity
- 无限大
-
1e5
- 100000
- 1e+5
- 科学计数法
-
NaN
- Not a Number
-
-
-
-
string 字符串
-
单引号
- ' '
-
双引号
- " "
-
反引号
- ``
-
字符串拼接
-
'+ 变量名 +' 去替换需要替换的内容
-
有拼接不方便引申出模板字符串
- 模板字符串(ES6)
字符串${变量}字符串
-
-
案例：
- 页面弹出对话框，输入名字和年龄，页面显示： 大家好，我叫xxx，今年xx岁了
-
-
-
-
boolean 布尔型
- true
- false
-
-
-
undefined 未定义
- 声明没有赋值
-
-
-
null 空引用
- 本质是一个对象
-
-
-
引用数据类型
-
- object 对象
-
- function 函数
-
- array 数组
-
-
数据类型的转换
-
为什么需要转换?
- 从用户得到的数据都是字符串,而字符串和数字相加会变成相连
-
显示转换
-
转换成数字
-
Number()
-
parse系列
- 如果介绍parse系列就是介绍区别和使用场景
-
三者的区别
-
案例
- 加法器：页面输入2个数，计算两者的和，打印到页面中
-
-
转换成字符串
-
String()
-
变量.toString()
- 括号里面可以跟进制
-
两者区别
-
-
-
隐式转换的小技巧
- +号作为正号解析可以转换成Number
- 任何数据和字符串相加结果都是字符串
收尾案例
- 计算数额案例
