javascript培训讲师 js培训教程下载

转载

编程思想者 2023-10-07 22:25:49

文章标签 javascript培训讲师 js 判断循环运算符 文章分类 JavaScript 前端开发

文章目录

一、序言

1.1、JavaScript历史
1.2、JavaScript作用
1.3、JavaScript组成

二、JavaScript用法

2.1、行内式 JS 代码（不推荐）
2.2、内嵌式 JS 代码
2.3、外链式 JS 代码（推荐使用）

三、JS 中的注释

3.1、单行注释
3.2、多行注释

四、变量（var）

4.1、定义变量及赋值
4.2、变量的命名规则和命名规范

五、数据类型分类

5.1、基本数据类型
5.2、复杂数据类型

六、运算符

6.1、数学运算符
6.2、赋值运算符
6.3、比较运算符
6.4、一元运算符
6.5、逻辑运算符

七、条件分支

7.1、if条件分支结构
7.2、switch条件分支结构
7.3、三元运算（?）

八、循环遍历

8.1、while循环
8.2、do while循环
8.3、for循环
8.4、break终止循环
8.5、continue结束本次循环

九、严格模式

9.1、开启严格模式
9.2、严格模式规则

一、序言

1.1、JavaScript历史

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

1.2、JavaScript作用

常见的网页效果【表单验证，轮播图。。。】
与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
实现应用级别的程序【http://naotu.baidu.com】
实现统计效果【http://echarts.baidu.com/examples/】
地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
在线学编程【https://codecombat.163.com/play/】
js可以实现人工智能【面部识别】
。。。

1.3、JavaScript组成

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

二、JavaScript用法

2.1、行内式 JS 代码（不推荐）

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

<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹窗');">点击试试</a>

<!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹窗')">点击试试</div>

<!--
onclick(点击事件)：当点击元素的时候执行后面的 js 代码
-->

2.2、内嵌式 JS 代码

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

<!-- 在 html 页面书写一个script 标签，标签内部书写 js 代码 -->

<script type="text/javascript">
//type 书写值可写可不写
	alert("我是一个弹窗");
</script>

<!--
scirpt标签可以放在 head 里面也可以放在 body 里面
 -->

2.3、外链式 JS 代码（推荐使用）

用法：新建一个 .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>

三、JS 中的注释

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

3.1、单行注释

用法：

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

// 我是一个单行注释

//下面代码表示浏览器里面出现一个弹出层
alert("我是一个弹窗");

3.2、多行注释

用法：

一般用来写一大段话，或者注释一段代码
可以直接写 /**/ 然后在两个星号中间写注释，也可以按 shift + alt +a

/*
	我是一个多行注释
*/

/*
	注释的代码不会执行
	alert("我是一个被注释掉的弹窗");
*/
	alert("我是一个没被注释的弹窗");

四、变量（var）

介绍：

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

4.1、定义变量及赋值

//定义一个变量
var num;

//给一个变量赋值
num = 100;

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

注意：

一个变量名只能储存一个值
当再次给一个变量赋值的时候，前面一次的值就会被覆盖掉
变量名严格区分大小写

4.2、变量的命名规则和命名规范

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

一个变量名称可以由 数字、字母、_下划线、$美元符号组成
严格区分大小写
不能由数字开头，不要使用中文汉字命名
不能是保留字或者关键字
不要出现空格

规范：建议遵守，不遵守不会保错

变量名尽量有意义，语义化
遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写

五、数据类型分类

5.1、基本数据类型

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

5.2、复杂数据类型

对象类型（object）
函数类型（function）
数组类型（array）

六、运算符

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

6.1、数学运算符

+运算符

只要符号两边都是数字的时候才会进行加法运算
只要符号任意一边是字符串类型，就会进行字符串拼接

"hello" + " world"; // hello world
"3" + 4 + 5; 		// 345
3 + 4 + "5"; 		// 75

-运算符

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

*运算符

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

/运算符

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

%运算符

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

6.2、赋值运算符

=运算符

就是把=右边的赋值给等号左边的变量名
var num = 100；
就是把100赋值给 num 变量
那么 num 变量的值就是 100

+=运算符

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

-=运算符

var a = 10;
a -= 10;		//等价于a = a - 10;
console.log(a);	//=>0

*=运算符

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

/=运算符

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

%=运算符

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

6.3、比较运算符

==运算符

比较符号两边的值是否相等，不管数据类型
1 == "1"
两个的值是一样的，所有得到true

123 == "123" 	// true
1 == true; 		// true

===运算符

比较符号两边的值和数据类型是否相等
1 === "1"
两个值虽然一样，但是因为数据类型不一样，所有得到flase

1 === true; 	// false
123 === "123"; 	// false

!=运算符

比较符号两边的值是否不等
1 != "1"
因为两边的值是相等的，所以比较他们不等的时候得到false

!==运算符

比较符号两边的数据类型和值是否不等
1 !== "1"
因为两边的数据类型确实不一样，所有得到true

>=运算符

比较左边的值是否大于或等于右边的值
1 >= 1 true
1 >= 0 true
1 >= 2 flase

<=运算符

比较左边的值是否小于或等于右边的值
1 <= 2 true
1 <= 1 true
1 <= 0 flase

>运算符

比较左边的值是否大于右边的值
1 > 0 true
1 >1 flase
1 >2 flase

<运算符

比较左边的值是否小于右边的值
1 < 2 true
1 < 1 flase
1 < 0 flase

6.4、一元运算符

++运算符

进行自增运算
分为两种，前置++ 和后置++
前置++，会先把值自动+1，再返回

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

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

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

--运算符

进行自减运算
分为两种，前置-- 和后置–
前置–，会先把值自动-1，再返回

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

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

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

6.5、逻辑运算符

&&运算符

进行且的运算
符号两边必须都为true，才会返回true
符号左边为false，则右边不会执行

true && true	// true
true && false	// false
false && true	// false
false && false	// false

高级用法

// 用法一
option && _.isString(option.label) ? option.label : ''
// 用法二
{(query.mode === ViewMode.CREATE || query.mode === ViewMode.UPDATE) && (
   <Popconfirm title='确认清空处于编辑态的所有表字段？' onConfirm={onClickClearSchema}>
     <Button danger style={{ marginLeft: 4 }}>
       清空表字段
     </Button>
   </Popconfirm>
 )}

||运算符

进行或的运算
符号左边为true或者右边为true，都会返回true
只有两边都是false，那么就会返回false
true || true true
true || false true
false || true true
false || false false

!运算符

进行取反的运算
本身是true的，会变成false
本身是false的，会变成true
!true false
!false true

七、条件分支

介绍：

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

7.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("因为条件为fasle，我会执行");
}

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···基本一致，只不过是在所有条件1都不满足的时候，执行最后else后面的{}

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

7.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之间的数字");
}

7.3、三元运算（?）

三元运算，就是用两个符号组成一个语句
三元运算只是对 if else 语句的一个简写形式
语法：条件 ? 条件为true的时候执行 : 条件为false的时候执行

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

八、循环遍历

介绍：

循环结构，就是根据某些给出的条件，重复的执行同一段代码
循环必须要有某些固定的内容组成

初始化
条件判断
要执行的代码
自身改变

8.1、while循环

while，当条件满足时就执行代码，一旦不满足了就不执行了
语法：while（条件）{满足条件就执行}
因为满足条件就执行，所有我们写的时候一定要注意，就是设定一个边界值，不然就一直死循环下去了

//初始化条件
var num = 0;
//条件判断
while (num < 10){
	//要执行的代码
	console.log("当前的num的值是"+num);
	//自身改变
	num = num + 1;
}
//如果没有自身改变，那么就会一直循环不停了

8.2、do while循环

是一个和while循环类似的循环
while会先进行条件判断，满足就执行，不满足直接就不执行了
但是do while循环是：先不管条件，先执行一回，然后在开始进行条件判断
语法：do{要执行的代码} while(条件)

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

8.3、for循环

和while和do while循环都不太一样的一种循环结构
道理是和其他两种一样的，都是循环执行代码的
语法：for（var i = 0； i < 10; i++）{要执行的代码}

//把初始条件，条件判断，自身改变，写在一起了
for(var i = 1; i <= 10; i++){
	//这里写的是要执行的代码
	console.log(i);
}
//控制台会依次输出1-10。

8.4、break终止循环

在循环没有进行完毕的时候，因为我设置的条件满足，提前终止循环
比如：我要吃5个包子，吃到三个的时候，不能再吃了，我就停止吃包子这个事情
要终止循环，就可以直接使用break关键字

for(var i = 1; i <= 5; i++){
	//没循环一次，吃一个包子
	console.log("我吃了一个包子");
	//当 i 的值为 3 的时候，条件为 true ，执行{}里面的代码终止循环
	//循环就不会继续向下执行了，也就没有 4 和 5 了
	if (i==3){
		break;
	}
}

8.5、continue结束本次循环

再循环中，把循环的本次跳过去，继续执行后续的循环
比如：吃5个包子，到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个
跳过本次循环，就可以使用continue关键字

for(var i = 1; i <= 5; i++){
	//当 i 的值为3 的时候，执行{}里面的代码
	//{}里面有 continue ，那么本次循环后面的代码就不执行了
	//自动算作 i 为 3 的这一次结束了，去继续执行 i= 4 的那次循环
	if(i===3){
		console.log("这是第三个包子，掉地下了，我不吃了");
		continue;
	}
	console.log("我吃了一个包子");
}

九、严格模式

我们都知道 js 是一个相对不很严谨的语言
而且开发的时候，一些代码也不是很严格要求
而严格模式就是对开发的时候写的一些内容做了要求

9.1、开启严格模式

想开启严格模式，直接在代码最开始的位置写上字符串'use strict'

'use strtic'
//下面代码书写要按照严格模式来书写

9.2、严格模式规则

声明变量必须有var关键字

'use strtic'
var num = 100;
num2 = 200;	//这个就会报错

之前了解过，在声明变量的时候，如果没有var 关键字，那么按照作用域的规则会自动定义成全局变量
严格模式下不可以，会报错

函数的形参不可以重复

'use strtic'

function fn(p1,p1){}	//直接就会报错

在非严格模式下，函数两个形参一样，是不会报错的，只不过就是相当于在函数内部只有一个变量了
但是在严格模式下会报错

声明式函数调用的时候函数内部没有this

'use strtic'
function fn(){
	console.log(this)	//undefined
}
fn();

本身，全局声明式函数在调用的时候，函数内部的this是指向window的
在严格模式下，是没有this的

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：写一个实现redist各种数据类型的增删改查工具类 redis具体实现

下一篇：什么是javascript类型转换 javascript类型转换方法

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

javascript培训讲师 js培训教程下载

javascript培训讲师 js培训教程下载

文章目录

一、序言

1.1、JavaScript历史

1.2、JavaScript作用

1.3、JavaScript组成

二、JavaScript用法

2.1、行内式 JS 代码（不推荐）

2.2、内嵌式 JS 代码

2.3、外链式 JS 代码（推荐使用）

三、JS 中的注释

3.1、单行注释

3.2、多行注释

四、变量（var）

4.1、定义变量及赋值

4.2、变量的命名规则和命名规范

五、数据类型分类

5.1、基本数据类型

5.2、复杂数据类型

六、运算符

6.1、数学运算符

6.2、赋值运算符

6.3、比较运算符

6.4、一元运算符

6.5、逻辑运算符

七、条件分支

7.1、if条件分支结构

7.2、switch条件分支结构

7.3、三元运算（?）

八、循环遍历

8.1、while循环

8.2、do while循环

8.3、for循环

8.4、break终止循环

8.5、continue结束本次循环

九、严格模式

9.1、开启严格模式

9.2、严格模式规则

51CTO博客