WEB学习Day04——js学习01

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);