黑马JS教程笔记（JavaScript教程）——JS基础

本文链接：https://blog.csdn.net/Dontla/article/details/145569943

~~黑马pink老师-JavaScript基础语法~~

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

文章目录

~~黑马pink老师-JavaScript基础语法~~（取消，别看这个，看后面那个！）
黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

黑马pink老师-JavaScript基础语法（取消，别看这个，看后面那个！）

001-计算机编程基础

002-计算机编程基础

编程语言和标记语言区别

编程语言，如Js，标记语言，如html

在这里插入图片描述

003-计算机基础

数据存储单位

在这里插入图片描述

004-初识JavaScript

JavaScript的历史

在这里插入图片描述

JavaScript是什么（运行在客户端的脚本语言）

在这里插入图片描述

JavaScript作用

如果每次用户操作都请求服务器，服务器压力就会比较大，所以设计JS，将一些简单操作在用户浏览器上完成，就无需请求到服务器，大大减轻服务器压力（如邮箱格式验证等）

在这里插入图片描述

HTML/CSS/JS 的关系

在这里插入图片描述

005-初识JavaScript

006-浏览器执行JS简介

渲染引擎，如Chrome blink；JS引擎，如Chrome V8

在这里插入图片描述

007-JS的组成

在这里插入图片描述

ECMAScript（Javascript语法）

在这里插入图片描述

DOM（文档对对象模型）

在这里插入图片描述

BOM（浏览器对象模型）

在这里插入图片描述

008-JS初体验

JS三种写法

在这里插入图片描述

行内式

在这里插入图片描述

内嵌式

在这里插入图片描述

外部

在这里插入图片描述

009-JS注释

单行注释：ctrl + /
多行注释：alt + shift + /

010-JS输入输出框

alert()、console.log()、prompt()

在这里插入图片描述

011-变量学习课程目标

012-变量的概述

013-变量的使用

在这里插入图片描述

声明变量

在这里插入图片描述

赋值

在这里插入图片描述

变量初始化

在这里插入图片描述

014-变量案例把内容输出到控制台

015-变量案例

016-变量语法扩展

声明变量特殊情况

在这里插入图片描述

017-变量的命名规范

命名规范

在这里插入图片描述

不要用name作为变量命令，浏览器中可能有特殊含义。

以下哪些是合法变量名？

在这里插入图片描述

018-案例：交换两个变量的值

019-变量总结

020-数据类型目标介绍

021-变量的数据类型

js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的

在这里插入图片描述

js是动态语言变量的数据类型是可以变化的

在这里插入图片描述

数据类型分类

简单数据类型

在这里插入图片描述

复杂数据类型

022-数字型

在这里插入图片描述

数字型进制

在这里插入图片描述

数字型范围

在这里插入图片描述

数字型三个特殊值（Infinity、-Infinity、NaN）

在这里插入图片描述

023-isNaN用法（判断输入是否是数字）

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript练习</title>
</head>

<body>
    <script>
        let time = 6;
        console.log(isNaN(time));
    </script>
</body>

</html>

在这里插入图片描述

024-字符串转义

字符串型可以是引号中的任意文本，其语法为双引号""和单引号

在这里插入图片描述

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双）

在这里插入图片描述

字符串转义符

在这里插入图片描述

025-弹出警示框案例

在这里插入图片描述

026-字符串长度与拼接

字符串长度

在这里插入图片描述

字符串拼接

在这里插入图片描述

027-字符串拼接加强

在这里插入图片描述

028-显示年龄案例

在这里插入图片描述

029 布尔型Boolean

在这里插入图片描述

029-undefined和null

在这里插入图片描述

030-typeof（可用来获取检测变量的数据类型）

在这里插入图片描述

030 根据打印颜色判断类型

在这里插入图片描述

031-字面量

在这里插入图片描述

032-数字型转换为字符串的三种方法

在这里插入图片描述

033-字符串型转换为数字型01

在这里插入图片描述

034-字符串转换为数字型02

在这里插入图片描述

035-计算年龄案例

在这里插入图片描述

036-简单加法器

在这里插入图片描述

037-转换为布尔型

在这里插入图片描述

038-解释型语言与编译型语言

在这里插入图片描述

039-标识符、关键字、保留字

在这里插入图片描述

040-课后作业

001-JavaScript运算符

002-算数运算符

在这里插入图片描述

浮点数精度问题

在这里插入图片描述

003-表达式和返回值

在这里插入图片描述

004-前置递增运算符

在这里插入图片描述

005-后置递增及合并一起使用

在这里插入图片描述

006-递增运算符练习

在这里插入图片描述

007-前置递增和后置递增小结

在这里插入图片描述

008-等号小结

在这里插入图片描述

009-逻辑运算符

010-逻辑运算符练习

011-逻辑中断之逻辑与

012-逻辑中断之逻辑或

013-赋值运算符

014-运算符优先级

015-流程控制介绍

016-顺序流程控制

017-if分支语句

018-进入网吧案例

019-if esle双分支语句

020-判断闰年案例

021-if else if多分支语句

022-判断成绩案例

023-三元表达式

024-数字补0案例

在这里插入图片描述

025-switch语句

026-switch注意事项

在这里插入图片描述

027-查询水果案例

028-switch和if else if区别

001-循环的介绍

002-循环的目的

003-for循环

004-for循环的执行过程

005-断点调试查看for循环执行过程（★）

在这里插入图片描述

006-for循环重复执行相同的代码

007-for循环重复执行不同的代码

008-求1-100累加的和

009-for循环案例

010-求学生成绩案例01

011-求学生成绩案例02

012-一行打印五个星星

013-双重for循环讲解

014-打印5行5列

015-打印n行n列

016-打印倒三角形

017-九九乘法表

018-for循环小结

019-while

020-while的三个案例

021-do while介绍

022-do while三个案例

023-循环小结

024-continue介绍

025-break用法

026-JavaScript命名规范（看到这）

https://www.bilibili.com/video/BV1BL411g7R1/?p=94

027-循环作业

01-数组的介绍

02-数组的概念、创建数组

03-数组的获取

04-遍历数组

05-数组的长度

06-案例求总和及平均值

07-求数组最大值

08-数组转换为分割字符串

09-数组中新增元素

10-数组新增的案例

11-数组新增案例2

12-案例：取新数组长度作为索引

13-数组案例：数组去重

14-翻转数组

15-复习交换两个变量的值

16-冒泡排序介绍

17-冒泡排序代码实现

01-函数的介绍

02-函数的概念

03-函数的使用

04-利用函数封装求1-100之间函数的和

05-函数的参数

06-案例利用函数求两个数之间的和

07-函数实参形参个数不匹配问题

08-函数的返回值

09-案例：求2个数的最大值

010-函数版求数组最大值

11-函数返回值注意事项1

12-函数返回值注意事项2

13-透过榨汁机看透函数

14-arguments的使用

15-arguments案例求最大值

16-函数封装翻转数组

17-函数封装冒泡排序

18-函数封装闰年及flag用法

19-函数可以相互调用

20-函数调用案例：闰年

021-函数的两种声明方式

001-作用域介绍

002-JavaScript的作用域

003-变量的作用域

004-JavaScript没有块级作用域

005-作用域链介绍

006-作用域链案例

007-预解析目录介绍

008-预解析

009-预解析案例

010-对象目录介绍

011-对象的概念介绍

012-利用字面量创建对象

013-变量属性函数方法的区别

014-利用new Object创建对象

015-我们为什么需要构造函数

16-利用构造函数创建对象01

17-利用构造函数创建对象02

18-构造函数和对象

19-new关键字执行过程

20-for…in遍历对象

21-对象小结

22-内置对象目录介绍

23-内置对象简介

24-查阅文档MDN

25-Math对象最大值max的使用

26-案例封装自己的math对象

27-math绝对值和三个取整方法

28-Math对象随机数方法

29-猜数字游戏

30-Date日期对象

31-格式化日期-年月日

32-日期格式化-时分秒

33-获取日期总的毫秒数

34-倒计时案例01

35-倒计时案例02

36-创建数组的两种方式_

37-检测是否为数组

38-添加数组的方法

39-删除数组方法

40-添加数组案例-筛选数组

41-数组排序reverse和sort

42-数组索引indexOf

43-数组去重案例

44-数组转化为字符串

45-基本包装类型

46-字符串的不可变性

47-根据字符串返回位置indexOf

48-查找字符串中某个字符出现的位置及次数

49-根据位置返回字符

50-返回字符串位置(重点案例)

51-返回字符串位置(重点案例2)

52-concat,substr用法

53-replace、 split用法

54-简单数据类型和复杂数据类型目录介绍

55-堆栈介绍

56-简单类型传参

57-复杂数据类型传参

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

JS基础Day1-00-JavaScript核心与进阶课程安排

JS基础Day1-01-必看-基本软件以及准备工作

JS基础Day1-02-JavaScript简介和体验

JS基础Day1-03-JavaScript书写位置

JS基础Day1-04-JavaScript注释和结束符

JS基础Day1-05-js输入和输出语句和字面量

输出语法：document.write()、alert()、console.log()

在这里插入图片描述

输出语法：prompt()

在这里插入图片描述
https://www.bilibili.com/video/BV1Y84y1L7Nn?spm_id_from=333.788.videopod.episodes&vd_source=efd687bf530a46807ba46e69286cafd4&p=6

JavaScript代码执行顺序

在这里插入图片描述

字面量

在这里插入图片描述

JS基础Day1-06-变量的声明和赋值

JS基础Day1-07-变量的更新以及输入用户名案例

JS基础Day1-08-交互两个变量案例

JS基础Day1-09-变量的本质和命名规则

JS基础Day1-10-输入姓名案例以及var和let区别

var和let区别

在这里插入图片描述

JS基础Day1-11-数组的基本使用

声明语法

在这里插入图片描述

取值语法

在这里插入图片描述

JS基础Day1-12-常量

JS基础Day1-13-数字数据类型和算术运算符

JS基础Day1-14-字符串数据类型以及拼接

JS基础Day1-15-模板字符串

使用场景

在这里插入图片描述

语法

在这里插入图片描述

JS基础Day1-16-布尔型、null和undefined以及类型检测

JS基础Day1-17-隐式转换和显示转换

隐式转换

在这里插入图片描述

显式转换

在这里插入图片描述

JS基础Day1-18-综合案例-渲染表格案例以及作业

JS基础Day2-19-赋值运算符

JS基础Day2-20-自增运算符

JS基础Day2-21-比较运算符

JS基础Day2-22-逻辑运算符以及优先级

JS基础Day2-23-if单分支语句以及判断成绩案例

JS基础Day2-24-if双分支语句以及判断闰年案例

JS基础Day2-25-if多分支语句以及上午总结

JS基础Day2-26-三元运算符以及求最大值案例

JS基础Day2-27-数字补0案例

JS基础Day2-28-switch分支语句

JS基础Day2-29-断点调试

JS基础Day2-30-while循环

JS基础Day2-31-while循环大练习

JS基础Day2-32-退出循环以及你爱我吗案例

JS基础Day2-33-综合案例-简易ATM取款机案例以及作业

JS基础Day3-34-for循环以及案例

JS基础Day3-35-遍历数组

JS基础Day3-36-退出循环

JS基础Day3-37-循环嵌套

JS基础Day3-38-循环嵌套大练习

JS基础Day3-39-99乘法表案例

JS基础Day3-40-数组的基本使用以及案例

JS基础Day3-41-求数组最大值和最小值

JS基础Day3-42-数组操作-修改

JS基础Day3-43-数组操作-新增

JS基础Day3-44-数组筛选案例

JS基础Day3-45-数组操作-删除

JS基础Day3-46-综合案例-渲染柱形图案例上

效果图

在这里插入图片描述

代码：16-综合案例-根据数据生成柱形图.html

参考文章：黑马JS教程笔记（JavaScript）——JS基础——Day3-46-综合案例-渲染柱形图案例上——16-综合案例-根据数据生成柱形图.html（代码和代码解释）

JS基础Day3-47-综合案例-渲染柱形图案例下（步骤就像是用JavaScript去写html和css代码）

在这里插入图片描述

JS基础Day3-48-了解冒泡排序和作业安排

JS基础Day4-49-函数的基本使用以及封装练习

函数介绍

在这里插入图片描述

函数使用

函数声明

在这里插入图片描述

函数命名规范

在这里插入图片描述

函数调用

在这里插入图片描述

JS基础Day4-50-函数的参数以及默认参数

JS基础Day4-51-函数封装数组求和案例

JS基础Day4-52-函数返回值return

返回值

在这里插入图片描述

JS基础Day4-53-函数返回值细节以及上午总结

JS基础Day4-54-函数返回值案例-求最大值和最小值

JS基础Day4-55-函数复习以及断点进入函数

JS基础Day4-56-作用域

JS基础Day4-57-变量的访问原则

访问原则

在这里插入图片描述

JS基础Day4-58-匿名函数之函数表达式

函数表达式

在这里插入图片描述

应用场景

在这里插入图片描述

JS基础Day4-59-匿名函数之立即执行函数（这样的代码分享给别人执行不用担心会跟别人的变量名冲突）

立即执行函数

在这里插入图片描述

示例

在这里插入图片描述

JS基础Day4-60-综合案例-封装计算时间函数

JS基础Day4-61-逻辑中断

逻辑中断

在这里插入图片描述

应用示例：获取像素比并在不能获取时应用默认值

在这里插入图片描述

JS基础Day4-62-转换为布尔型以及作业

显式转换

在这里插入图片描述

console.log(0 && 20)	//0
console.log(10 && 20)	//20

这个会先判断左边是true还是false，如果是false取左边，如果是true取右边。

黑马JS教程笔记（JavaScript教程）——JS基础

文章目录

黑马pink老师-JavaScript基础语法（取消，别看这个，看后面那个！）

001-计算机编程基础

002-计算机编程基础

编程语言和标记语言区别

003-计算机基础

数据存储单位

004-初识JavaScript

JavaScript的历史

JavaScript是什么（运行在客户端的脚本语言）

JavaScript作用

HTML/CSS/JS 的关系

005-初识JavaScript

006-浏览器执行JS简介

渲染引擎，如Chrome blink；JS引擎，如Chrome V8

007-JS的组成

ECMAScript（Javascript语法）

DOM（文档对对象模型）

BOM（浏览器对象模型）

008-JS初体验

JS三种写法

行内式

内嵌式

外部

009-JS注释

010-JS输入输出框

alert()、console.log()、prompt()

011-变量学习课程目标

012-变量的概述

013-变量的使用

声明变量

赋值

变量初始化

014-变量案例把内容输出到控制台

015-变量案例

016-变量语法扩展

声明变量特殊情况

017-变量的命名规范

命名规范

不要用name作为变量命令，浏览器中可能有特殊含义。

以下哪些是合法变量名？

018-案例：交换两个变量的值

019-变量总结

020-数据类型目标介绍

021-变量的数据类型

js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的

js是动态语言 变量的数据类型是可以变化的

数据类型分类

简单数据类型

复杂数据类型

022-数字型

数字型进制

数字型范围

数字型三个特殊值（Infinity、-Infinity、NaN）

023-isNaN用法（判断输入是否是数字）

024-字符串 转义

字符串型可以是引号中的任意文本，其语法为双引号""和 单引号

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双）

字符串转义符

025-弹出警示框案例

026-字符串长度与拼接

字符串长度

字符串拼接

027-字符串拼接加强

028-显示年龄案例

029 布尔型Boolean

029-undefined和null

030-typeof（可用来获取检测变量的数据类型）

030 根据打印颜色判断类型

031-字面量

032-数字型转换为字符串的三种方法

033-字符串型转换为数字型01

034-字符串转换为数字型02

035-计算年龄案例

036-简单加法器

037-转换为布尔型

038-解释型语言与编译型语言

039-标识符、关键字、保留字

040-课后作业

js是动态语言变量的数据类型是可以变化的

024-字符串转义

字符串型可以是引号中的任意文本，其语法为双引号""和单引号

007-前置递增和后置递增小结