JS基础

目标：了解JavaScript语言的基本概念及语法规则，培养编程思维能力，为后面学习网页交互效果课程打下坚实的基础

day01(基础语法)

目标：理解变量、数据类型、等基础概念，能够实现数据类型的转换，具备利用模板字符串渲染表格的能力

JS的简介

• 概念

  • JavaScript 是一种运行在客户端（浏览器）的编程语言

• 作用

  • 1. 网页特效 (监听用户的一些行为让网页作出对应的反馈)
  • 2. 表单验证 (针对表单数据的合法性进行判断)
  • 3. 数据交互 (获取后台的数据, 渲染到前端)
  • 4. 服务端编程 (node.js)

• 组成

  • ECMAscript
  • DOM
  • BOM

初体验

• 案例引入

  • tab栏切换案例

  • 引入案例的目的： 让学生明白html+css+js如何进行相互交互合作做效果

• JS的注释

  • //
  • /* */

• 分号规范

• script标签的位置

  • 外部式
  • 内部式
  • 内联式

输入输出语法

• 语法

  • 人和计算机打交道的规则约定

  • 我们要按照这个规则去写

    • 你吃了吗

  • 我们程序员需要操控计算机，需要计算机能看懂

• 输入语法

  • prompt

• 输出语法

  • alert
  • console.log
  • document.write

• js代码执行顺序

• 案例练习：

字面量

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

  • 123

    • 是数字字面量

  • '黑马程序员' 字符串字面量

  • [] 数组字面量

变量

• 概念和作用

  • 容器

• 声明赋值的几种写法

  • 先声明,再赋值

  • 声明并直接赋值

  • 同时声明多个变量

  • 练习

    • 文字形式描述

      • 声明一个变量，用于存放用户购买的商品数量为20件
      • 声明一个变量，用于存放用户的姓名为"张三"

  • 案例：

  • 案例：

    • 交换两个变量

• 变量的本质

  • 在内存中开辟一个空间

• 命名规则和规范

  • 规则

    • 由字母、数字、下划线、$符号组成，不能以数字开头
    • 不能是关键字和保留字，例如：var for while
    • 严格区分大小写

  • 规范

    • 变量名必须有意义
    • 遵守小驼峰式命名法

  • 练习

    • 大厂面试题

• var声明变量和let的区别(了解)

  • let为了解决var的一些问题

  • var声明:

    • 可以先使用 在声明 (不合理)
    • var声明过的变量可以重复声明(不合理)
    • 比如变量提升、全局变量、没有块级作用域等等

• 数组

  • 什么是数组? 为什么需要数组?

    • 存储班级所有人的姓名

  • 创建数组

    • 字面量

  • 取值

    • 数组[下标]

数据类型

• 概念和作用

  • 1. 更加充分和高效的利用内存
  • 2. 也更加方便程序员的使用数据

• 分类介绍

  • 基本数据类型

    • • number 数值型

    • • string 字符串

        • 单引号

        • 双引号

        • 反引号

        • 字符串拼接

          • '+ 变量名 +' 去替换需要替换的内容

          • 有拼接不方便引申出模板字符串

            • 模板字符串(ES6)

        • 案例：

          • 页面弹出对话框，输入名字和年龄，页面显示： 大家好，我叫xxx，今年xx岁了
    • • boolean 布尔型
    • • undefined 未定义
    • • null 空引用

  • 引用数据类型

    • • object 对象
    • • function 函数
    • • array 数组

数据类型的转换

• 为什么需要转换?

  • 从用户得到的数据都是字符串,而字符串和数字相加会变成相连

• 显示转换

  • 转换成数字

    • Number()

    • parse系列

      • 如果介绍parse系列就是介绍区别和使用场景

    • 三者的区别

    • 案例

      • 加法器：页面输入2个数，计算两者的和，打印到页面中

  • 转换成字符串

    • String()

    • 变量.toString()

      • 括号里面可以跟进制

    • 两者区别

• 隐式转换的小技巧

  • +号作为正号解析可以转换成Number
  • 任何数据和字符串相加结果都是字符串

收尾案例

• 计算数额案例

day02(流程控制)

理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易ATM取款机程序能力

运算符

• 算术运算符

  • 加、减、乘、除、取模 (+, -, *, /, %)

  • 加号上下文

    • 如果+号左右只有一个值 解析的结果是正号 可用于隐式转换
    • 如果两边都是数值(Number)类型 则是+号运算符
    • +号的左右如果有一个数据是字符串数据类型的话 那么这个+号会被解析成连接符

  • 优先级

  • 案例

    • 对话框中输入圆的半径，算出圆的面积并显示到页面

• 赋值运算符 (=)

  • 将等号右边的值赋予给左边, 要求左边必须是一个容器
  • 累加 +=

• 一元运算符

  • 一元运算符: 仅操作一个操作数. 比如: 正负号等

  • 自增自减运算符

    • 相同点

      • 不管是++或者-- 是在前还是在后,都是在原来的取值上自行增1或减1 类似于 => a += 1

    • 不同点

      • 符号前置 => 先加1 再使用 (快捷记忆: ++在前 先加)
      • 符号后置 => 先使用 再加1 (快捷记忆: ++在后, 后加)

    • 面试题

• 逻辑运算符

  • 逻辑与
  • 逻辑或
  • 逻辑非

• 比较运算符

  • , < , >= , <= , == , === , != , !==

  • 重点介绍 等于和全等的区别, 推荐使用全等

  • 特殊说明

    • 如果是数字和"其他值"的比较 则其他值会自动转换成数字去比较
    • 涉及到"NAN"都是false （NaN）
    • 如果是"字符串"和"字符串"比较 则会比较每一个字符的ASCII码,同时是按位进行比较
    • 如果是布尔值参与比较 布尔值会转换成数字0和1

• 运算符优先级

语句

• 表达式和语句

  • 表达式

    • 表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果

      • x = 7
      • 3 + 4
      • num++

  • 语句

    • js 整句或命令，js 语句是以分号结束（可以省略）

      • if 条件语句
      • for 循环语句

  • 区别

    • 达式计算出一个值，但语句用来自行以使某件事发生。

      • 表达式 3 + 4
      • 语句 alert() 弹出对话框

• 语句分类

  • 顺序语句
  • 分支语句
  • 循环语句

• 分支语句

  • if分支

    • 单条分支

      • 案例

        • 用户输入高考成绩，如果分数大于700，则提示恭喜考入黑马程序员

    • 双分支

      • 案例

        • 1.用户输入，如果工龄大于1年，年底奖金+2000， 否则年底没奖金
        • 2.让用户输入年份，判断这一年是闰年还是平年并输出

    • 多条分支

      • 案例

        • 根据输入不同时间，输出不同的问候语
        • 作业--输入分数，根据分数奖励不同的车(评级)

  • 三元运算符

    • 条件 ? 表达式1 : 表达式2

    • 对比if两条分支的区别

    • 练习案例

      • 两个数的最大值

      • 数字补0案例

        • 09

  • switch case

    • 出现定值判断使用

    • 特点说明

      • 1. switch case语句一般用于等值判断,不适合于区间判断
      • 2. switch case比较的值全等 ===
      • 3. switch case一般需要配合break关键字使用 没有break会造成case穿透

    • 案例

      • 简单加法器

  • 分支语句的综合

    • if 分支

      • 使用的最多的分支语句 任何情况下都可以通用

    • 三元运算

      • 可以简单理解为两条分支的简写形式,一些简单的两条分支可以使用三元运算符代替
      • 相较正常的两条分支语句来说多了一个返回值

    • switch case语句

      • 当出现了定值判断的时候可以使用

    • 多分支语句和switch的区别

      • 如果值比较精确用switch ，效率更高
      • 如果有范围的判断，用多分支语句

• 断点调试

  • 是为了演示循环语句的过程

• 循环语句

  • while循环

    • 语法

    • 练习

      • • 打印1-100以内 所有偶数
      • • 打印1-100的和
      • • 打印1-100以内所有偶数的和

  • while的使用场景介绍

    • 更适合使用在循环的次数不确定时候使用

    • 练习

      • 询问“我爱你，嫁给我吧？”，如果输入为“嫁” 跳出循环打印 “我们形影不离”，否则一直询问
      • 让用户输入用户名和密码，只有当用户名=admin并且用户密码=123456的时候才提示登录成功（跳出循环），否则一直让用户输入
      • while (true) { if (条件) { break; } } // break: 可以用来跳出循环

  • do while 循环(课下了解)

  • 综合案例

    • 存钱取钱案例

day03(数组)

知道什么是数组及其应用的场景，掌握数组声明及访问的语法，具备利用数组渲染柱形图表的能力

for循环

• 根据while练习的四要素引入for循环

  • 1. 循环变量初始值
  • 2. 循环的条件
  • 3. 循环体
  • 4. 循环变量自增自减运算

• 练习

  • • 打印1-100的和
  • • 打印1-100以内所有偶数的和

• for循环开发中常见的作用是循环数组

  • 案例： 打印班级名单案例

循环的小结

• for循环: 当如果明确了循环的次数的时候推荐使用for循环
• while循环: 当不明确循环的次数的时候推荐使用while循环

循环语句的跳出

• break和continue

  • 说明区别

    • 1. break: 一般用于结果已经得到, 后续的循环不需要的时候可以使用
    • 2. continue: 一般用于排除或者跳过某一个选项的时候, 可以使用continue

循环加强

• 双层for循环嵌套

  • 在网页上打印出一个五行五列的星星
  • 在网页上打印出一个五行递增列的星星
  • 在网页上打印99乘法表

什么是数组? 为什么需要数组?

• 存储班级所有人的姓名

创建数组

• 字面量
• 构造函数(提一嘴)

数组的使用

• 数组本质是数据集合,使用无非就是增删改查

• 查

  • 数组[下标]

• 改

  • 数组[下标] = 新值

• 增

  • arr.push(新增的内容)

    • push可以实现一次性添加多个的效果, 推荐使用

  • arr.unshift(新增的内容)

• 删

  • arr.pop()
  • arr.shift()
  • arr.splice(操作的下标,删除的个数)

遍历数组

• 访问数组里面的每一个数据
• 依次访问
• 循环访问
• 提取公式

遍历数组的练习

• 求一组数中的所有数的和及其平均值
• 要求将数组中的0项去掉，将不为0的的值存入到新的数组 生成新的数组
• 求一组数中的最大值和最小值 以及所在位置
• 冒泡排序

综合案例-输入数据生成柱形图

day04(函数)

目标：理解封装的意义，能够具备封装函数的能力

什么是函数?为什么需要函数?

• 函数可以理解为一个 特定的代码块 容器 ，它可以完成特定的需求, 并且可以 重复 使用
• 需求: 让99乘法表重复使用 ?

函数声明和函数调用

• 函数默认不会主动执行,必须通过函数名() 调用才会执行.

• 函数一次声明可以多次调用,每一次函数调用函数体里面的代码会重新执行一次.

• 我们曾经使用的 alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用

• 思考小问题: 函数的复用和循环的重复有什么不同?

• 小练习

  • 封装一个打招呼的函数
  • 封装一个函数，计算两个数的和
  • 封装一个函数，计算1-100之间所有数的和
  • 问: 这些函数有什么缺陷

函数传参

• 根据上面练习的缺陷引出函数传参

  • 把函数在复用过程中会改变的值提取出来, 作为参数传递进去.这样可以极大提高函数的灵活性

• 需求: 封装一个可以跟任何人打招呼的函数

• 函数传参的语法

  • 完成上述需求

• 细节说明

  • 1. 术语1: 在声明函数的小括号里面写的数值我们称之为形式参数
  • 2. 术语2: 在调用函数的小括号里面写的数值我们称之为实际参数
  • 3. 形参作用: 本质上就是在函数内部声明变量
  • 4. 实参作用: 给形参赋值
  • 5. 我们曾经使用过的 alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参

• 练习

  • 1. 计算1-n之间所有数的和
  • 2. 计算m-n之间所有数的和
  • 3. 学生的分数是一个数组,计算每个学生的总分

函数的返回值

• 我们使用过的返回值引出为什么需要返回值

  • 使用过的返回值

    • let result = prompt('请输入你的年龄?');
    • let result2 = confirm('你确定要删除这条记录么?')
    • let result3 = parseInt('111');
    • // 函数的返回值不是必须的, 比如: alert() let result4 = alert('弹出一个内容');

  • 上面都是我们使用过的函数返回值的情况. 只是这些函数是JS底层内置的.我们直接就可以使用

    • 引出我们自己自定义的函数如何拥有返回值

  • 介绍语法

    • function doSomething(){ // doing return result; }

let jieguo = doSomething();

• 场景介绍

  • 调用两次求和函数,得到每一次求和的结果,再比较这两个结果的大小

    • function getSum(a, b) { let sum = a + b; return sum; }

let sum1 = getSum(10, 20); let sum2 = getSum(5, 16);

let max = sum1 > sum2 ? sum1 : sum2; console.log(max);

- return result 和 console.log(result)的区别 ???

	- 银行取钱的案例介绍

• 返回值练习

  • 根据下面的模板, 计算不同学生的总成绩(将每科成绩累加), 并求出当中的最高分
  • // 声明 function getScore(arr) { }

// 张三的分数数组 getScore([100, 90, 85]); // 李四的分数数组 getScore([95, 92, 89]); // 王五的分数数组 getScore([69, 100, 100]);

• 综合练习

  • 1. 求任意数组中的最大值并返回这个最大值
  • 2. 求任意数组中的最小值并返回这个最小值
  • 3. 求任意2个数中的最大值, 并返回

断点调试

• f11进入函数内部

细节补充

• 两个相同的函数后面的会覆盖前面的函数

• 在Javascript中 实参的个数和形参的个数可以不一致

  • 如果形参过多 会自动填上undefined (了解即可)
  • 如果实参过多 那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)

• 函数一旦碰到return就不会在往下执行了 函数的结束用return

  • 1. 思考: break的结束和return结束有什么区别 ?
  • 2. 思考: 如何返回多个数据 ?

作用域

• 什么是作用域? 为什么要了解作用域

  • 准备好一个变量在不同的情况下,取值不同的问题例子作为开场

• 作用域分类

  • 全局作用域:
  • 函数作用域
  • 块作用域: ?

• 变量分类

  • 全局变量

    • 在函数外部let 的变量 => 全局变量在任何区域都可以访问和修改

  • 局部变量

    • 在函数内部let 的变量 => 局部变量只能在当前函数内部访问和修改

  • 块级变量

    • let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问

  • 大坑: 局部变量必须是函数里面声明过(let)的变量

• 变量访问原则

  • 在能够访问到的情况下 先局部 局部没有在找全局

• 练习

匿名函数

• 没有名字的函数, 无法直接使用

• 使用方式

  • 将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式

  • 自执行（匿名函数自执行）

    • 场景介绍: 避免全局变量之间的污染

综合案例

day05(对象)

目标：知道对象数据类型的特征，具备对象数组数据渲染页面的能力。

什么是对象? 为什么需要对象?

• 何为对象：万物皆对象,对现实事物的描述。客观世界中的具体的实体都是对象 如一个人,一个气球,一辆汽车,咱们的 班主任等.

• 需求: 如何在JS中存储班主任这个对象的信息 ?

  • • 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
  • • 动态行为 (点名, 唱, 跳, rap) => 使用函数表示

对象的基本语法介绍

• 在Js中, 对象就是一组无序的键值对的集合

• 说明

  • 1. 我们把冒号左边的内容称之为属性, 右边称之为值, 成对出现, 故称之为键值对
  • 2. 当右边的值为函数的时候, 我们更喜欢将这个属性称之为方法
  • 3. 对象本质上也是一种数据集合, 对比数组来说它里面装的都是不同类型的数据, 并且有对应的属性提示数据的含义
  • 提问: 上述信息是否可以使用数组存储

对象的基本使用

• 对象本质上也是数据集合,使用无外乎增删改查

• 查语法: 对象名.属性

• 改语法: 对象名.属性 = 新值

• 增语法: 对象名.新属性名 = 新值

• 删语法（一嘴带过）

  • delete 对象名.属性名

对象遍历

• 引入[]语法操作对象属性

  • 对比点语法的相同点和不同点

    • 1. 都可以访问对象的属性 对象名.属性名 === 对象名['属性名']
    • 2. []语法里面的值如果不添加引号 默认会当成变量解析
    • 3. 没有必要的时候直接使用点语法, 在需要解析变量的时候使用 [] 语法

• 遍历对象

  • for 遍历对象的问题：

    • 对象没有像数组一样的length属性,所以无法确定长度
    • 对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标

  • 通过for in 语法

    • 1. for in语法中的 attr 是一个变量, 在循环的过程中依次代表对象的属性名
    • 2. 由于attr是变量, 所以必须使用 [ ] 语法解析

• 综合案例

内置对象

• 什么是内置对象？ 为什么要学习内置对象

• Math

  • Math.PI

  • 最大值/最小值

  • 绝对值

  • 取整

  • 随机数

    • 求 0 -n之间的随机数
    • 求m-n之间的随机数
    • 练习： 随机抽奖 / 猜数字游戏

综合案例

• 学成在线页面渲染案例

简单类型和复杂类型

• 堆和栈
• 简单数据类型传参
• 复杂数据类型传参