定义变量的注意事项
1)在js中定义变量,使用var来定义,var可以省略不写(刚开始,建议写上)
2)javascript是弱类型语言,它的语法结构不严谨! 可以重复定义变量的,后面的变量的值将前面的变量值覆盖掉
3)查看js的变量的数据类型,使用一个函数 typeof(变量名)
4)var可以任意数据类型!
js的基本数据类型
1)无论是整数还是小数,都是number类型, ---- js引擎会自动提升为 Number 对象类型
2) 无论是字符串还是字符,都是string类型----js引擎会自动提升为 String 对象类型
3)boolean类型 ----js引擎会自动提升为 Boolean 对象类型
4)object类型 (创建一个对象 ) ---- js引擎会自动提升为Object对象类型
在Js中,Object对象代表所有js对象的模板!
5)undefined类型 :未定义类型 (这种没有意义),因为没有赋值!
var a = 10 ;
var a = 20 ;
var b = 3.14 ;
c = "hello" ;
var d = 'A' ;
var e = true ;
var f = false ;
var g = new Object() ;
var h ;
//在浏览器中输出内容
document.write("a的值是:"+a+",a的数据类型是:"+typeof(a)+"<br/>") ;
document.write("b的值是:"+b+",b的数据类型是:"+typeof(b)+"<br/>") ;
document.write("c的值是:"+c+",c的数据类型是:"+typeof(c)+"<br/>") ;
document.write("d的值是:"+d+",d的数据类型是:"+typeof(d)+"<br/>") ;
document.write("e的值是:"+e+",e的数据类型是:"+typeof(e)+"<br/>") ;
document.write("f的值是:"+f+",f的数据类型是:"+typeof(f)+"<br/>") ;
document.write("g的值是:"+g+",g的数据类型是:"+typeof(g)+"<br/>") ;
document.write("h的值是:"+h+",h的数据类型是:"+typeof(h)+"<br/>") ;
Js的运算符
Js是弱类型,语法结构不严谨
true,false在运算的时候都自己默认值 true是1,false是0
实际开发中,不会这样去做的,boolean类型值都是直接进行逻辑判断!
算术运算符
+,-,*,/,%
++,--
赋值运算符
=:基本赋值
+=,-=,*=,/=,%=
比较(关系运算符)
<,<=,>,>=,==,!=
逻辑运算符
实际开发中:逻辑双与&&,逻辑双或||
三元(三目)运算符
(表达式)?执行true的结果:false的结果
<script>
//算术运算符
//定义两个变量
var a = 3 ;
var b = 4 ;
document.write((a+b)+"<br/>") ;
document.write((a-b)+"<br/>") ;
document.write((a*b)+"<br/>") ;
document.write((a/b)+"<br/>") ; //Java中是默认取整,js是不会的
document.write((a%b)+"<br/>") ;
document.write((a+true)+"<br/>") ;
document.write((b-false)+"<br/>") ;
document.write((++a)+"<br/>") ;
document.write((--a)+"<br/>") ;
document.write("<hr/>") ;
//赋值运算符
var c = 20 ; //将20赋值给c这个变量
c+=10; // 等价于 c = c + 10 ; //将左边的变量和右边的值相加,在赋值给左边变 量c
document.write("c的值是:"+c) ;
document.write("<hr/>") ;
//比较(关系运算符)
var x = 3 ;
var y = 4 ;
var z = 5 ;
document.write((x+y)>=(x+z)) ;
document.write("<hr/>") ;
document.write(((x+y)<(x+z))+"<br/>") ;
document.write(((x+y)<=(x+z))+"<br/>") ;
//==不能写成=
document.write((x==y)+"<br/>") ;
document.write("<hr/>") ;
//逻辑双与&&:有false,则false
//逻辑双或||:有true,则true
//逻辑双与&&和逻辑双或||和Java的&&和||一样
//&&:左边的表达式为false,则右边不执行了,具有短路效果
//||:左边的表达式为true,则右边不执行了,具有短路效果
//实际开发:这种&&,|| 效率非常高!
document.write(((x>y) && (x>z))+"<br/>") ;
document.write(((x>y) && (x<z))+"<br/>") ;
document.write(((x<y) && (x>z))+"<br/>") ;
document.write(((x<y) && (x<z))+"<br/>") ;
document.write("<hr/>") ;
document.write(((x>y) || (x>z))+"<br/>") ;
document.write(((x>y) || (x<z))+"<br/>") ;
document.write(((x<y) || (x>z))+"<br/>") ;
document.write(((x<y) || (x<z))+"<br/>") ;
document.write("<hr/>") ;
var m = 5 ;
var n = 6 ;
document.write("m:"+m+",n:"+n+"<br/>") ;
document.write((((++m)==5) && ((--n)==6))+"<br/>") ;
document.write("m:"+m+",n:"+n+"<br/>") ;
document.write("<hr/>") ;
//(表达式)?执行true的结果:false的结果
var age = 20 ;
document.write((age>=18)? "成年人!":"未成年人!") ;
</script>
Js中的流程控制语句
三大类
1)顺序结构:js代码从上而下依次加载
2)选择结构
if结构
if(表达式){
语句
}
if(表达式){
}else{
}
if(表达式1){
语句1;
}else if(表达式2){
语句2 ;
...
...
}else{
语句n;
}
//比较两个数据的最大值
var a = 10 ;
var b = 20 ;
//定义一个结构变量
var max ;
//if格式2
if(a>b){
max = a ;
}else{
max = b;
}
document.write("最大值是:"+max+"<br/>") ;
//选择结构之if格式2 :针对两种情况进行判断
//实际开发中,if里面一个表达式---true或者false
//因为js是弱类型语言,
//1)如果if里面是一个非0的整数,条件是成立的;
//2)如果是非空字符串,条件成立;
//3)如果是非null的对象,条件成立的;
/* if(new Object()){
alert("条件成立") ;
}else{
alert("条件不成立")
} */
switch结构
switch(表达式){
case 可以变量/也可以常量:
语句1;
break ;
...
...
default:
语句n;
break ;
}
//switch语句:判断星期
/*
switch语句的结束条件
1)遇见break结束
2)程序默认执行到末尾
case语句后面没有break,会造成"case穿透现象!"
case后面跟Java语言的case语句不一样的地方就是这个case后面可以是变量!
而Java中只能是常量!
*/
3)循环结构
for(使用居多),while(其次while),do-while
//循环
//for循环
/*
for(初始化语句;条件表达式;控制体语句){
循环体语句;
}
*/
//在控制台输出5次"helloworld"
for(var i = 1 ; i <=5 ; i ++){
document.write("helloworld<br/>") ;
}
document.write("<hr/>") ;
/*
while循环
初始化语句;
while(条件表达式){
循环体语句;
控制体语句;
}
*/
//需求:浏览器中输出5次"我爱高圆圆"
var x = 1 ;
while(x<=5){
document.write("我爱高圆圆<br/>") ;
x++ ;
}
document.write("<hr/>") ;
//do-while
/*
初始化语句;
do{
循环体语句;
控制体语句;
}while(条件表达式) ;
和for,while,循环体至少执行一次!
*/
//需求:浏览器中输出5次"我爱高圆圆"
var j = 7 ;
do{
document.write("我爱高圆圆<br/>") ;
j++ ;
}while(j<=5) ;
for-in类似于增强for循环
应用场景:
1)遍历数组
2)遍历对象的属性 (明天讲:js自定义对象 4种方式)
for-in语句的格式
for(var 变量名 in 数组或者对象名称){
使用变量名;
}
for(var i in arr){
document.write(arr[i]+" ") ;
}
在js如何 创建一个数组
方式1: var 数组对象 = new Array() ; //不指定长度
方式2: var 数组对象 = new Array(长度) ;//指定长度
var arr = new Array(2) ;
方式3:静态初始化,
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
简写格式 :var 数组对象名称= [元素1,元素2,元素3,.....] ;
在js中,数组可以存储任何类型元素,实际开发中,还是遵循数据类型一致!
Js中的函数定义以及调用
定义函数的 格式1 形式参数列表
function 函数名称(参数名称1,参数名称2....){
函数的里面业务逻辑
直接在这输出document.write("xxx") ;
}
格式1调用:
单独调用
函数名称(实际参数列表) ;
定义函数,两个数据求和
格式1的写法:
function sum(var a, var b ){//不能带var
function sum( a, b ){
var c = a+b ;
document.write("c:"+c);
}
//调用
sum(10,20) ;
格式2:(推荐)
function 函数名称(参数名称1,参数名称2....){
函数的里面的业务逻辑
return 结果;
}
格式2调用:
赋值调用
var 最终结果变量 = 函数名称(实际参数列表) ;
格式2的写法
function sum(a,b){
var c =a+b ;
return c;
}
function sum(a,b,c){ //a=10,b=15,c=20
//隐藏一个数组名称:arguments
//作用:将实际参数绑定给形式参数
for(var i = 0 ; i< arguments.length;i++){
document.write(arguments[i]+" <br/>");
}
var d = a+b+c ;
return d ;
}
//赋值调用
var result = sum(10,15,20) ;
document.write("result:"+result) ;
定义函数的注意事项:
1)js是弱类型语言,定义函数的时候,参数名称不能携带var
2)js定义时候,没有返回值类型,但是函数中可以携带return语句,代表方法结束!
3)Js中没有函数重载的概念,如果方法名相同,后面定义的函数将前面定义的函数覆盖了
4)实际参数列表 < 形式参数列表,函数依然会被调用,不过值是"NaN",有一个形式参数没有赋值
实际参数列表 > 形式参数列表,将实际参数的值赋值给形式参数,多余的实际参数,直接省略不计!
5)隐藏一个数组名称:arguments,作用:将实际参数绑定给形式参数
Js内置对象Date
Js内置对象:
Date日期,String字符串,Array数组,正则表达式对象..
浏览器在解析javascript的时候,能够识别这个对象,使用里面的方法!
日期对象的基本使用 :
dateObj = new Date()
创建一个日期对象
var date = new Date() ;
//输出
//document.write(date) ;//Mon May 09 2022 16:40:31 GMT+0800 (中国标准时间) 原生Date格式
//获取年份
//getYear() :当前的年份与 1900 年之间的差距
//改用getFullYear()
//var year = date.getYear() ;
var year = date.getFullYear() ;
document.write(year+"年") ;
//获取月份
//getMonth() :返回一个处于 0 到 11 之间的整数
var month = date.getMonth()+1 ;
document.write(month+"月") ;
//月中的日期 getDate( ): 1 到 31 之间的整数
var monthWithDate = date.getDate() ;
document.write(monthWithDate+"日 ") ;
//getHours() 获取小时值
document.write(date.getHours()+":") ;
//getMinutes():获取分钟值
document.write(date.getMinutes()+":") ;
//getSeconds() :getSeconds()
document.write(date.getSeconds()) ;