WEB学习Day04——js学习01

最新推荐文章于 2025-02-22 11:54:47 发布

原创最新推荐文章于 2025-02-22 11:54:47 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

Web 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍JavaScript的历史背景，其作为客户端脚本语言的功能与特性，包括数据类型、变量、运算符、控制语句及函数等内容，适合初学者快速掌握JavaScript基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

04.01_JavaScript简介

概述
- 1995年，网景公司与Sun公司合作完成的
- 是基于对象和事件驱动的脚本语言，应用在客户端，简称js
- 基于对象：提供了很多对象，直接拿过来使用
- 事件驱动：html做网站静态效果，js实现动态效果
- 客户端：专门指的是浏览器
js的作用：操作html和css
特点
- 交互性：实现信息的动态交互
- 安全性：不可以直接访问磁盘上的文件
- 跨平台性：只要是可以解析js的浏览器都可以使用，和平台无关
js和Java之间的关系
- 【雷锋和雷峰塔】：js和java没有任何关系，属于两门编程语言
- 开发公司
  - java：Sun
  - js：网景公司
- 对象
  - java；面向对象
  - js：基于对象
- 数据类型
  - java；强类型的语言【每个变量必须指定具体的数据类型】 int i = 10
  - js：弱类型语言【变量的数据类型由值决定】var i = 10 Python中： i = 10
js的组成
- ECMAScript:
  - ECMA:欧洲计算机协会
  - 由ECMA组织指定js的一系列的语法
- BOM
  - Broswer Object Model,浏览器对象模型
- DOM
  - Docuement Object Model,文档对象模型

04.02_ js和html的结合方式

方式一：直接使用标签：

<script  type="text/javascript">  js代码</script>

方式二：使用script标签，引入外部js文件

<script  type="text/javascript" src="js文件的路径">  js代码</script>

注意：

script标签可以出现多次，可以出现在html文件中任何地方，建议写在之间

js代码和html代码执行的顺序：从上往下依次执行

04.03_ js中的注释

* 单行：//           【ctrl+/】
* 多行：/*xxxxxx*/   【ctrl + shift+ /】

04.04_ js变量

变量定义
- 使用关键字var（variety–品种，变化）
变量的命名规则
- a.可以由数字，字母，下划线，美元符号$组成
- b.不能由数字开头
- c.不要包含空格和中文
- d.不能使用保留字和关键字
- e.严格区分大小写，如：age和Age是两个变量
- f.遵循驼峰命名法, stuScore StuScore

04.05_ js的数据类型

一般的数据类型
- Boolean:布尔类型
- Number：数字类型
- String：字符串
- Object：对象
- Array：数组【类似于Python中列表】
- Funtion：函数类型
- RegExp：正则表达式
特殊的数据类型
- null:当定义了一个变量之后，但是这个变量没有任何的指向，则它的类型就是null，
- 使用typeof操作符判断null获取的结果为object
- undefined:定义一个变量，但是没有赋初始值
- NaN:Not a Number,不是一个数字

04.06_ js中的运算符

算术运算符：
- ++ :自增运算符
- – :自减运算符
逻辑运算符
- js：&& 且 || 或 ! 非
关系运算符
- 和Python中一样
赋值运算符
- =
- +=
- -=
三元(目)运算符：
- 格式：关系表达式？表达式1【变量1或者常量1】：表达式2【变量1或者常量1】;
- 工作原理：如果关系运算符成立，则返回表达式1的值，否则返回表达式2的值
==和===之间的区别
- ==值比较字面值，不关心数据类型
- ===比较字面值和数据类型

04.07_ js中的选择和循环语句

顺序语句，分支语句，循环语句
js中的语句：
- 分支语句：if ,if-else, if-else if-else, swicth-case
- 循环语句：while,do-while,for

04.08_ if语句

单分支：
if(条件表达式){
	满足条件执行的语句
}


双分支：
if(条件表达式){
	满足条件执行的语句
} else {
	不满足条件执行的语句
}


多分支：
if(条件表达式1){
	满足条件1执行的语句
} else if(条件表达式2){
	满足条件2执行的语句
} else if(。。。。){
	满足条件...执行的语句
} else{
	不满足条件执行的语句
}



嵌套if：
if(条件表达式1){
	满足条件1执行的语句
	if(条件表达式2){
		满足条件2执行的语句
	}
}

04.09_ switch语句

语法格式：
- switch: 选择结构
- case：满足条件对应的分支
- break: switch语句结束
- default；默认，如果前面的都没有匹配上就执行这一句

switch表达式

switch(表达式或者变量){
case 常量值1：{
	语句1；
	break;
	}

case 常量值2：{
	语句2；
	break;
	}

case 常量值3：{
	语句3；
	break;
	}

...

default:{
	默认：如果前面的都没有匹配上就执行这一句
	}
}

工作原理：可以实现多选一的操作，效果类似于if语句中的多分支
- 根据表达式或者变量的值进行匹配，
- 如果和case分支后面的常量值匹配上了，则执行对应的case分支，
- 从上往下依次进行匹配，当所有的case分支都没有匹配上的时候，则执行default分支

switch案例

//需求：有人加你好友，如果是女的，则欣然同意，如果是男的，则残忍拒绝
var str  = "h";
switch(str){
	
	/*default:{
		document.write("不明性别，不做处理");
		break;
	}*/
	
	case "b":{
		document.write("残忍拒绝");
		break;
	}
	
	case "g":{
		document.write("欣然同意");
		break;
	}
	default:{
		document.write("不明性别，不做处理");
	}
}

04.10_ while语句

while语句：
	while(条件表达式){
		循环体
	}



do-while语句
	do{
		循环体
	} while(条件表达式);


//while和do...while
var num1 = 3;
while(num1 < 1){
	document.write("hello");
}

var num2 = 3;
do{
	document.write("hello~~~~~~~");
}while(num2 < 1);

说明：初始化表达式，条件表达式，循环结束之后的操作表达式

04.11_ for语句

语法：
for(表达式1；表达式2；表达式3){
	循环体
}

说明：
- 表达式1：初始化表达式
- 表达式2：条件表达式
- 表达式3：循环结束之后的操作表达式
- 工作原理：表达式1—》表达式2-----》循环体-----》表达式3----》表达式2----》循环体----》表达式3.。。。。
- 其中，表达式1只会被执行一次，表达式2和表达式3会被多次执行【跟while中的用法完全相同】

九九乘法表

//打印九九乘法表
for(var i = 1;i <= 9;i++) {
	for(var j = 1;j <= i;j++) {
		document.write(j + "x" + i + "=" + i * j + "&nbsp;");
	}
	
	document.write("<br />")
}

04.12_ break和continue

break:表示跳出整个循环或者switch语句
- a.可以使用在分支语句switch中
- b.使用在循环中
continue:结束当前循环，继续下一次循环
- a.只能用在循环语句中

04.13_ js中的函数

Python函数：

方式一：标准写法
def 函数名（参数列表）：
	函数体

方式二：匿名函数
add = lambda a,b:a+b
add(2,3)

js函数：

方式一：使用function关键字
function 函数名（参数列表）{
	函数体
	返回值【可有可无】
	}

//具有返回值的函数
function add1(a,b,c){
	var sum1 = a + b + c;
	//返回值还是通过return关键字返回给调用者
	return sum1;
}

方式二：匿名函数
var 函数名【变量名】 = function(参数列表) {
	函数体
	返回值
	}
var add2 = function(a,b) {
			var sum;
			sum = a + b;
			return sum;
		}


方式三：动态函数，使用js中内置对象Function【动态函数，使用较少，作为了解】	
语法格式：var 函数名【变量名】 = new Function("参数列表"，“函数体和返回值”)；

var add3 = new Function("x,y","var sum;sum = x + y;return sum;");
//调用函数
var r1 = add3(10,20);

var prama = "x,y";
var body = "var sum;sum = x + y;return sum;";
var add4 = new Function(prama,body);
var r2 = add4(10,20);