##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,文档对象模型
- ECMAScript:
##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中的注释
- js中:
- 单行:// 【ctrl+/】
- 多行:/xxxxxx/ 【ctrl + shift+ /】
- Python中:
- 单行:#
- 多行:“”“”“”或‘’‘’‘’
04.04_ js变量
- 变量定义
- 使用关键字var(variety–品种,变化)
- 变量的命名规则
- a.可以由数字,字母,下划线,美元符号$组成
- b.不能由数字开头
- c.不要包含空格和中文
- d.不能使用保留字和关键字
- e.严格区分大小写,如:age和Age是两个变量
- f.遵循驼峰命名法, stuScore StuScore
04.05_ js的数据类型
-
一般的数据类型
扫描二维码关注公众号,回复: 3407134 查看本文章- Boolean:布尔类型
- Number:数字类型
- String:字符串
- Object:对象
- Array:数组【类似于Python中列表】
- Funtion:函数类型
- RegExp:正则表达式
-
特殊的数据类型
- null:当定义了一个变量之后,但是这个变量没有任何的指向,则它的类型就是null,
- 使用typeof操作符判断null获取的结果为object
- undefined:定义一个变量,但是没有赋初始值
- NaN:Not a Number,不是一个数字
04.06_ js中的运算符
- 算术运算符:
- ++ :自增运算符
- –:自减运算符
- 逻辑运算符
- Python:and(&) or(|) not
- js:&& || !
- 关系运算符
- 和Python中一样
- 赋值运算符【和Python中一样】
- =
- +=
- -=
- 三元(目)运算符:
- 格式:关系表达式?表达式1【变量1或者常量1】:表达式2【变量1或者常量1】;
- 工作原理:如果关系运算符成立,则返回表达式1的值,否则返回表达式2的值
- 和=之间的区别
- ==值比较字面值,不关心数据类型
- ===比较字面值和数据类型
04.07_ js中的选择和循环语句
- 顺序语句,分支语句,循环语句
- Python中的语句:
- 分支语句:if,if-else ,if-elif-else
- 循环语句:while,for-in
- 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 + " ");
}
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);
如有错误,请在下面评论。好及时更正,谢谢!