B站视频对应链接

首推这个老师的JavaScript课程，讲的很棒！！！！

JavaScript （最全）基础+项目

​ 作者：kerwin

​ 版本：QF1.0

​ 版权：千锋HTML5大前端教研院

​ 公众号: 大前端私房菜

前言

1.计算机语言

计算机语言（Computer Language）指用于人与计算机之间通讯的语言。计算机语言是人与计算机之间传递信息的媒介。计算机系统最大特征是指令通过一种语言传达给机器。为了使电子计算机进行各种工作，就需要有一套用以编写计算机程序的数字、字符和语法规划，由这些字符和语法规则组成计算机各种指令（或各种语句）。这些就是计算机能接受的语言。

2.分类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-01CsIAwr-1658883172753)(%E7%AC%94%E8%AE%B0.assets/image-20220510141952652.png)]

一. JavaScript基础

1. JavaScript发展历史（JS）

1. 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。liveScript ==> javaScript ==> ECMAscript2. 1995年Sun公司将Oak语言改名为Java，正式向市场推出。Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运   行"(Write Once, Run Anywhere)，它看上去很可能成为未来的主宰。3. 网景公司动了心，决定与Sun公司结成联盟4. 34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他,他只用10天时间就把Javascript设计出来了。5.(1)借鉴C语言的基本语法(2)借鉴Java语言的数据类型和内存管理(3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位(4)借鉴Self语言，使用基于原型(prototype)的继承机制

2. JavaScript的组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AIUkdXpL-1658883172754)(%E7%AC%94%E8%AE%B0.assets/image-20220510144904468.png)]

1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
2. BOM (Browser Object Model): 浏览器对象模型- 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等
3. DOM (Document Object Model): 文档对象模型- 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等

总结： JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果

3 . JavaScript能干什么

1. 常见的网页效果【表单验证，轮播图。。。】
2. 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
3. 实现应用级别的程序【http://naotu.baidu.com】
4. 实现图表统计效果【https://echarts.apache.org/examples/zh/】
5. js可以实现人工智能【面部识别】
6. 后端开发，app开发，桌面端开发......

4. JavaScript代码的书写位置

• 和 css 一样，我们的 js 也可以有多种方式书写在页面上让其生效
• js 也有多种方式书写，分为 行内式， 内嵌式，外链式

4-1 行内式 JS 代码（不推荐）

• 写在标签上的 js 代码需要依靠事件（行为）来触发

<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a><!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹出层')">点一下试试看</div><!--注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码
-->

4-2 内嵌式 JS 代码

• 内嵌式的 js 代码会在页面打开的时候直接触发

<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script type="text/javascript">alert('我是一个弹出层')
</script><!--注：script 标签可以放在 head 里面也可以放在 body 里面
-->

4-3 外链式 JS 代码（推荐）

• 外链式 js 代码只要引入了 html 页面，就会在页面打开的时候直接触发
• 新建一个 .js 后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面

// 我是 index.js 文件
alert('我是一个弹出层')

<!-- 我是一个 html 文件 --><!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script><!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

5. JS 中的注释

• 学习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是给开发人员看的
• 写好一个注释，有利于我们以后阅读代码

5-1 单行注释

• 一般就是用来描述下面一行代码的作用
• 可以直接写两个 / ，也可以按 ctrl + /

// 我是一个单行注释// 下面代码表示在浏览器里面出现一个弹出层
alert('我是一个弹出层')

5-2 多行注释

• 一般用来写一大段话，或者注释一段代码
• 可以直接写 /**/ 然后在两个星号中间写注释
  • 各个编辑器的快捷键不一样，vscode 是 alt + shift + a

/*我是一个多行注释
*//*注释的代码不会执行alert('我是一个弹出层')alert('我是一个弹出层')
*/
alert('我是一个弹出层')

6. 变量（重点）

• 变量指的是在程序中保存数据的一个容器
• 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
• 也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他
• 语法： var 变量名 = 值

6-1 定义变量及赋值

// 定义一个变量
var num;// 给一个变量赋值
num = 100;// 定义一个变量的同时给其赋值
var num2 = 200;

• 注意：
  1. 一个变量名只能存储一个值
  2. 当再次给一个变量赋值的时候，前面一次的值就没有了
  3. 变量名称区分大小写（JS 严格区分大小写）

6-2 变量的命名规则和命名规范

• 规则： 必须遵守的，不遵守就是错

  1. 一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成
  2. 严格区分大小写
  3. 不能由数字开头
  4. 不能是 保留字 或者 关键字
  5. 不要出现空格

• 规范： 建议遵守的（开发者默认），不遵守不会报错

  1. 变量名尽量有意义（语义化）
  2. 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写
  3. 不要使用中文

6-3 数据类型（重点）

• 是指我们存储在内存中的数据的类型
• 我们通常分为两大类 基本数据类型 和 复杂数据类型

基本数据类型

1. 数值类型（number）
   • 一切数字都是数值类型（包括二进制，十进制，十六进制等）
   • NaN（not a number），一个非数字
2. 字符串类型（string）
   • 被引号包裹的所有内容（可以是单引号也可以是双引号）
3. 布尔类型（boolean）
   • 只有两个（true 或者 false）
4. null类型（null）
   • 只有一个，就是 null，表示空的意思
5. undefined类型（undefined）
   • 只有一个，就是 undefined，表示没有值的意思

判断数据类型

• 既然已经把数据分开了类型，那么我们就要知道我们存储的数据是一个什么类型的数据
• 使用 typeof 关键字来进行判断

// 第一种使用方式
var n1 = 100;
console.log(typeof n1);// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));

7. 数据类型转换

• 数据类型之间的转换，比如数字转成字符串，字符串转成布尔，布尔转成数字等

7.1 其他数据类型转成数值

1. Number(变量)

   可以把一个变量强制转换成数值类型

   可以转换小数，会保留小数

   可以转换布尔值

   遇到不可转换的都会返回 NaN

2. parseInt(变量)

   从第一位开始检查，是数字就转换，知道一个不是数字的内容

   开头就不是数字，那么直接返回 NaN

   不认识小数点，只能保留整数

3. parseFloat(变量)

   从第一位开始检查，是数字就转换，知道一个不是数字的内容

   开头就不是数字，那么直接返回 NaN

   认识一次小数点

4. 除了加法以外的数学运算

   运算符两边都是可运算数字才行

   如果运算符任何一遍不是一个可运算数字，那么就会返回 NaN

   加法不可以用

7.2 其他数据类型转成字符串

1. 变量.toString()

   有一些数据类型不能使用 toString() 方法，比如 undefined 和 null

2. String(变量)

   所有数据类型都可以

3. 使用加法运算

   在 JS 里面，+ 由两个含义

   字符串拼接： 只要 + 任意一边是字符串，就会进行字符串拼接

   加法运算：只有 + 两边都是数字的时候，才会进行数学运算

7.3 其他数据类型转成布尔

1. Boolean(变量)

   在 js 中，只有 ''、0、null、undefined、NaN，这些是 false

   其余都是 true

8. 运算符

• 就是在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在 js 里面还有很多的运算方式

8-1 数学运算符

1. +

   只有符号两边都是数字的时候才会进行加法运算

   只要符号任意一边是字符串类型，就会进行字符串拼接

2. -

   会执行减法运算

   会自动把两边都转换成数字进行运算

3. *

   会执行乘法运算

   会自动把两边都转换成数字进行运算

4. /

   会执行除法运算

   会自动把两边都转换成数字进行运算

5. %

   会执行取余运算

   会自动把两边都转换成数字进行运算

8-2 赋值运算符

1. =

   就是把 = 右边的赋值给等号左边的变量名

   var num = 100

   就是把 100 赋值给 num 变量

   那么 num 变量的值就是 100

2. +=

   var a = 10;
   a += 10;
   console.log(a); //=> 20
   

   a += 10 等价于 a = a + 10

3. -=

   var a = 10;

   a -= 10;
   console.log(a); //=> 0
   

   a -= 10 等价于 a = a - 10

4. *=

   var a = 10;
   a *= 10;
   console.log(a); //=> 100
   

   a *= 10 等价于 a = a * 10

5. /+

   var a = 10;
   a /= 10;
   console.log(a); //=> 1
   

   a /= 10 等价于 a = a / 10

6. %=

   var a = 10;
   a %= 10;
   console.log(a); //=> 0
   

   a %= 10 等价于 a = a % 10

8-3 比较运算符

1. ==

   • 比较符号两边的值是否相等，不管数据类型

     1 == '1'

     两个的值是一样的，所以得到 true

2. ===

   • 比较符号两边的值和数据类型是否都相等

     1 === '1'

     两个值虽然一样，但是因为数据类型不一样，所以得到 false

3. !=

   • 比较符号两边的值是否不等

     1 != '1'

     因为两边的值是相等的，所以比较他们不等的时候得到 false

4. !==

   • 比较符号两边的数据类型和值是否不等

     1 !== '1'

     因为两边的数据类型确实不一样，所以得到 true

5. >=

   • 比较左边的值是否 大于或等于 右边的值

     1 >= 1 结果是 true

     1 >= 0 结果是 true

     1 >= 2 结果是 false

6. <=

   • 比较左边的值是否 小于或等于 右边的值

     1 <= 2 结果是 true

     1 <= 1 结果是 true

     1 <= 0 结果是 false

7. >

   • 比较左边的值是否 大于 右边的值

     1 > 0 结果是 true

     1 > 1 结果是 false

     1 > 2 结果是 false

8. <

   • 比较左边的值是否 小于 右边的值

     1 < 2 结果是 true

     1 < 1 结果是 false

     1 < 0 结果是 false

8-4 逻辑运算符

1. &&

   • 进行 且 的运算

     符号左边必须为 true 并且右边也是 true，才会返回 true

     只要有一边不是 true，那么就会返回 false

     true && true 结果是 true

     true && false 结果是 false

     false && true 结果是 false

     false && false 结果是 false

2. ||

   • 进行 或 的运算

     符号的左边为 true 或者右边为 true，都会返回 true

     只有两边都是 false 的时候才会返回 false

     true || true 结果是 true

     true || false 结果是 true

     false || true 结果是 true

     false || false 结果是 false

3. !

   • 进行 取反 运算

     本身是 true 的，会变成 false

     本身是 false 的，会变成 true

     !true 结果是 false

     !false 结果是 true

8-5 自增自减运算符

1. ++

   • 进行自增运算

   • 分成两种，前置++ 和 后置++

   • 前置++，会先把值自动 +1，在返回

     var a = 10;
     console.log(++a);
     // 会返回 11，并且把 a 的值变成 11
     

   • 后置++，会先把值返回，在自动+1

     var a = 10;
     console.log(a++);
     // 会返回 10，然后把 a 的值变成 11
     

2. --

   • 进行自减运算
   • 分成两种，前置– 和 后置–
   • 和 ++ 运算符道理一样

9. 三元运算符

• 三元运算，就是用 两个符号 组成一个语句

• 语法： 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行

  var age = 18;
  age >= 18 ? alert('已经成年') : alert('没有成年')
  

10. 分支结构

• 我们的 js 代码都是顺序执行的（从上到下）
• 逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码

10-1 IF 条件分支结构（重点）

if 语句

• 通过一个 if 语句来决定代码是否执行

• 语法： if (条件) { 要执行的代码 }

• 通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行

  // 条件为 true 的时候执行 {} 里面的代码
  if (true) {alert('因为条件是 true，我会执行')
  }// 条件为 false 的时候不执行 {} 里面的代码
  if (false) {alert('因为条件是 false，我不会执行')
  }
  

if else 语句

• 通过 if 条件来决定，执行哪一个 {} 里面的代码

• 语法： if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }

• 两个 {} 内的代码一定有一个会执行

  // 条件为 true 的时候，会执行 if 后面的 {}
  if (true) {alert('因为条件是 true，我会执行')
  } else {alert('因为条件是 true，我不会执行')
  }// 条件为 false 的时候，会执行 else 后面的 {}
  if (false) {alert('因为条件为 false，我不会执行')
  } else {alert('因为条件为 false，我会执行')
  }
  

if else if … 语句

• 可以通过 if 和 else if 来设置多个条件进行判断

• 语法：if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }

• 会从头开始依次判断条件

  • 如果第一个条件为 true 了，那么就会执行后面的 {} 里面的内容
  • 如果第一个条件为 false，那么就会判断第二个条件，依次类推

• 多个 {} ，只会有一个被执行，一旦有一个条件为 true 了，后面的就不在判断了

  // 第一个条件为 true，第二个条件为 false，最终会打印 “我是代码段1”
  if (true) {alert('我是代码段1')
  } else if (false) {alert('我是代码段2')
  }// 第一个条件为 true，第二个条件为 true，最终会打印 “我是代码段1”
  // 因为只要前面有一个条件满足了，就不会继续判断了
  if (true) {alert('我是代码段1')
  } else if (true) {alert('我是代码段2')
  }// 第一个条件为 false，第二个条件为 true，最终会打印 “我是代码段2”
  // 只有前一个条件为 false 的时候才会继续向后判断
  if (false) {alert('我是代码段1')
  } else if (true) {alert('我是代码段2')
  }// 第一个条件为 false，第二个条件为 false，最终什么也不会发生
  // 因为当所有条件都为 false 的时候，两个 {} 里面的代码都不会执行
  if (false) {alert('我是代码段1')
  } else if (false) {alert('我是代码段2')
  }
  

if else if … else 语句

• 和之前的 if else if ... 基本一致，只不过是在所有条件都不满足的时候，执行最后 else 后面的 {}

  // 第一个条件为 false，第二个条件为 false，最终会打印 “我是代码段3”
  // 只有前面所有的条件都不满足的时候会执行 else 后面的 {} 里面的代码
  // 只要前面有一个条件满足了，那么后面的就都不会执行了
  if (false) {alert('我是代码段1')
  } else if (false) {alert('我是代码段2')
  } else {alert('我是代码段3')
  }
  

10-2 SWITCH 条件分支结构（重点）

• 也是条件判断语句的一种

• 是对于某一个变量的判断

• 语法：

  switch (要判断的变量) {case 情况1:情况1要执行的代码breakcase 情况2:情况2要执行的代码breakcase 情况3:情况3要执行的代码breakdefault:上述情况都不满足的时候执行的代码
  }
  

  • 要判断某一个变量 等于 某一个值得时候使用

• 例子

  千锋教育JavaScript视频教程笔记相关推荐

  1. 千锋教育 逻辑思维课程笔记

     [千锋]逻辑思维训练教程,看过最详细的视频_哔哩哔哩_bilibili P1   逻辑思维是天生的么 1."懒得像头猪一样."   这也是逻辑思维 2.承认自己比不过大神,但那只是 ...

  2. 千锋教育网络安全课程笔记

     网络安全课程笔记 1.虚拟环境部署 1.1 虚拟机的运行架构 寄居架构(适合用于学习) (这里的硬件就是我们的笔记本电脑) 虚拟机跟真实机是互相独立的,一些危险的程序放到虚拟机里面运行是不会影响到真实 ...

  3. PyEcharts学习笔记整理，基于B站千锋教育

     目录 1. PyEcharts:初始化配置.全局配置项(标题配置.缩放配置) 2. PyEcharts:全局配置项(图例配置项.视觉映射配置项.提示框配置项.坐标轴配置项) 3. PyEcharts: ...

  4. 千锋Node.js学习笔记

     千锋Node.js学习笔记 文章目录 千锋Node.js学习笔记 写在前面 1. 认识Node.js 2. NVM 3. NPM 4. NRM 5. NPX 6. 模块/包与CommonJS 7. 常 ...

  5. 同软件多个线程设置不同ip_软件测试如何自学？收下这份《2020千锋性能测试入门视频教程》...

     萧亚轩在吐槽大会上说:"我只是天赋异禀,一个平平无奇的恋爱小天才."讲真,小千是百分百赞同,毕竟谁不是在平平无奇的生活里悄咪咪的给自己加持各种装备,偶尔一个大招适时放出,真的能够亮 ...

  6. HTML5从入门到精通（千锋教育）免费电子版+PDF下载

     本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...

  7. 千锋教育python2104期总结day2

     千锋教育python2104期总结day2 第一次总结: 基础语法和变量 目录 更改基础设置, 写出第一句代码 基础语法 输入和输出函数 变量 正文 1. 更改基础设置,写出第一句代码 1)设置pyc ...

  8. 千锋教育python2104期总结day14

     千锋教育python2104期总结 第十三次总结: 常用系统模块和文件操作 目录 time模块 datetime模块 hashlib模块 文件操作 读写操作 数据存储操作 作业 正文 1.time模块 ...

  9. 千锋教育-加百利 web

     千锋教育-加百利:https://space.bilibili.com/31452330?spm_id_from=333.788.b_765f7570696e666f.2 cHM6Ly9ibG9nLm ...

  10. 千锋教育python2104期总结day5

      千锋教育python2104期总结 第四次总结: 循环练习和语法 目录 1.复习 2.认识列表 3.添加元素 4.第一周作业(零基础) 5.周末作业-循环练习题 正文 1. 复习 for循环 for ...

  最新文章

  1. vscode中调试react
  2. C中常用字符串处理函数
  3. Python代码块批量添加Tab缩进
  4. option:contains后面加变量_什么是配置环境变量，配置以后有什么作用呢？
  5. 【月报】Java知音的一月汇总
  6. struts2 - View页面中获取Action的成员变量
  7. vm虚拟机win7安装镜像方法
  8. Windows NT 内核版本号对应的操作系统版本号
  9. 十二进制加计数器-20151112
  10. 一代人终将老去，但总有人正年轻
  11. 判断奇数和偶数不常见的方法
  12. 365天 天天学英语
  13. 【转录调控网络】代谢组学与其他组学的联合分析经典模式简介
  14. 解决json数据 key为数字,自动排序问题
  15. 不给电脑，我用手机敲命令十分钟完成了zabbix监控，面试官当场下offer
  16. 音频识别(Audio Classification)学习笔记
  17. 写给所有程序员的心声~千里马常有,但伯乐不常有
  18. 服务化-mysql-01 mysql基础框架
  19. Scikit-learn学习系列 | 4. sklearn特征降维方法汇总（方差过滤，卡方，F过滤，互信息，嵌入法）
  20. java8 四大函数式接口 和 用于数据处理的 stream流 使用详解

  热门文章

  1. 翻译：《CSS权威指南》（第3版）-概览和目录部分
  2. 结合thinkphp5与hplus(h+)写的一个带权限的后台管理系统
  3. android 单位选择器,Android-PickerView
  4. linux删除java_Linux卸载jdk
  5. 元宇宙里“倒腾狗”，预示“下一代互联网”要来了？
  6. java数组的定义(菜鸟教程)
  7. 高等代数第3版下 [丘维声 著] 2015年版_高等代数笔记整理（一）
  8. 蓝桥杯C++AB算法辅导
  9. 使用GWmodel进行GWR模型相关运算
  10. jmeter录制脚本的两种方式