哪有时间学JavaScript1~25

最新推荐文章于 2024-07-20 23:54:17 发布

yanqiu12138

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量432

点赞数

分类专栏： none 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/yanqiu12138/article/details/128650985

版权

none 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一. JavaScript基础

1. JavaScript发展历史（JS）

1. 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。
	liveScript ==> javaScript ==> ECMAscript

2. 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的组成

请添加图片描述

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 数据类型（重点）

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

基本数据类型

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

判断数据类型

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

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

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

7. 数据类型转换

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

7.1 其他数据类型转成数值

Number(变量)

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

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

可以转换布尔值

遇到不可转换的都会返回 NaN
parseInt(变量)

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

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

不认识小数点，只能保留整数
parseFloat(变量)

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

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

认识一次小数点
除了加法以外的数学运算

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

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

加法不可以用

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

变量.toString()

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

所有数据类型都可以
使用加法运算

在 JS 里面，+ 由两个含义

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

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

7.3 其他数据类型转成布尔

Boolean(变量)

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

其余都是 true

8. 运算符

运算符也叫操作符，可以对操作对象进行运算

8.1 算术运算符

算术（Arithmetic）运算包括加、减、乘、除、求余、取负数等，分别使用运算符+、-、*、/、%和-来表示

+运算符表示加时，任意数据类型的数据与字符串运算时的时候，那个+号就是连接符转化为String型（可以用+“”的方式转化为String型）

-、*、/、%则任意数据类型的数据与Number型运算时，都会转换为Number型再进行运算（可以用-“”的方式转化为Number型）

任何数值与NaN运算都会返回NaN

当+、-表示正负时，会先将操作对象转为Number型，然后再进行运算

JavaScript中的/不分整数除、小数除

8.2 自增、自减运算符

变量自增（Increment）运算符++和自减(Decrement)运算符--，其作用是使被操作的变量的值增加1或减少1。既可以放在变量的前面，称为前++(Prefix Increment)和前- -(Prefix Decrement）；也可以放在变量的后面，称为后++(Postix Increment)和后–（Postix Decrement）结果不同。

8.3 逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。
①&& 与：JS中的“与”属于短路的与，如果第一个值为false，则不会检查第二个值
非布尔值时：如果两个都为true，则返回第二个值。

②|| 或：：JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值
非布尔值时：如果两个都为false ，则返回第二个值。

③! 非：!可以用来对一个值进行非运算，所谓非运算就是对一个布尔值进行取反操作，true变false，false变true。
非布尔值时：先会将其转换为布尔值，然后再取反，所以我们可以利用该特点，来将一个其它的数据类型转换为布尔值，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样

8.4 赋值运算符

赋值（Assignment）运算符的功能是将一个表达式的值赋给一个变量，赋值运算符用=号表示。
还提供另一种形式的赋值运算符，称为复合赋值（Combined Assignment)运算符。它由双目运算符与双目赋值运算符一起构成。

8.5 关系运算符

关系（Relational）运算是用来比较两个操作数的值的运算，比较的结果是一个Boolean值，即只能是“真”或“假”。若比较条件得到满足，则结果为真；否则，结果为假。关系运算共6种，包括：小于、小于或等于、大于、大于或等于、等于、不等于、全等，分别使用运算符<、>、>=、==和!=、===、!==。

对于非数值参与运算时，会把非数值转化为数值进行比较
任何值和NaN比较都是false，包括它本身，判断是否是NaN用isNaN()函数
特例：undefined和null！=0但他俩相等
当两侧都是字符串时，比较第一位Unicode编码，如果一样，则比较下一位，所以比较两个字符串型数字时，一定记得转型

对于===、!==，不会做自动类型转换，所以是用来判断一样不一样（包括格式）
null !==undefined

8.6 条件运算符

条件（Conditional)运算符用于进行简单的条件判断，它由两个符号?和:组成。

8.7 逗号运算符

逗号（Comma）运算符，是最简单的运算符了，它本身没有具体的计算功能，仅仅是将多个表达式连接在一起。

8.8 运算符的优先级

运算符的优先级

9. 分支结构

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

9-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')
}

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

也是条件判断语句的一种
是对于某一个变量的判断

语法：

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

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

例子🌰：根据变量给出的数字显示是星期几

var week = 1
switch (week) {
  case 1:
    alert('星期一')
    break
  case 2:
    alert('星期二')
    break
  case 3:
    alert('星期三')
    break
  case 4:
    alert('星期四')
    break
  case 5:
    alert('星期五')
    break
  case 6:
    alert('星期六')
    break
  case 7:
    alert('星期日')
    break
  default:
    alert('请输入一个 1 ～ 7 之间的数字')
}

11. 循环结构（重点）

循环结构，就是根据某些给出的条件，重复的执行同一段代码
循环必须要有某些固定的内容组成
1. 初始化
2. 条件判断
3. 要执行的代码
4. 自身改变

11-1 WHILE 循环

while，中文叫当…时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了
语法 while (条件) { 满足条件就执行 }

因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了

// 1. 初始化条件
var num = 0;
// 2. 条件判断
while (num < 10) {
  // 3. 要执行的代码
  console.log('当前的 num 的值是 ' + num)
  // 4. 自身改变
  num = num + 1
}

如果没有自身改变，那么就会一直循环不停了

11-2 DO WHILE 循环

是一个和 while 循环类似的循环
while 会先进行条件判断，满足就执行，不满足直接就不执行了
但是 do while 循环是，先不管条件，先执行一回，然后在开始进行条件判断

语法： do { 要执行的代码 } while (条件)

// 下面这个代码，条件一开始就不满足，但是依旧会执行一次 do 后面 {} 内部的代码
var num = 10
do {
  console.log('我执行了一次')
  num = num + 1
} while (num < 10)

yanqiu12138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
哪有时间学JavaScript1~25

/ 定义一个变量 var num;// 给一个变量赋值 num = 100;// 定义一个变量的同时给其赋值 var num2 = 200;注意：一个变量名只能存储一个值当再次给一个变量赋值的时候，前面一次的值就没有了变量名称区分大小写（JS严格区分大小写）
复制链接

扫一扫