JavaScript的变量及数据类型问题:

关于JavaScript中的变量定义:

var 变量名 = 值;

注意:

1> 在js中,var可以用来定义任何数据类型的变量,可以省略,但不建议省略;

2> var可以重复定义变量(后面的值会被覆盖掉),是因为JavaScript弱类型语言,而Java是一种强类型语言;

3> 如果一个变量,但是变量没有值(undefined),没有定义的变量不能直接使用;

JavaScript的数据类型:

1> 不管是整数还是小数都是number类型;

2> 不管是整数还是小数都是number类型(小写);

3> boolean类型;

4> object:对象类型;

举例:

//定义变量
var a = 10 ;
//重复定义
//var a ;
var b = 12.34 ;
var c = 'a' ;
var d = "hello" ;
var e = true ;
var f = new Object() ;
//输出变量
document.write("a的值是:"+a+",a的数据类型是:"+typeof(a)+"
") ;document.write("b的值是:"+b+",b的数据类型是:"+typeof(b)+"
") ;document.write("c的值是:"+c+",c的数据类型是:"+typeof(c)+"
") ;document.write("d的值是:"+d+",d的数据类型是:"+typeof(d)+"
") ;document.write("e的值是:"+e+",e的数据类型是:"+typeof(e)+"
") ;document.write("f的值是:"+f+",f的数据类型是:"+typeof(f)+"
") ;

数据转换函数:

string----number类型的整数parseInt(变量);
stirng----number类型的小数parseFloat(变量);
举例:
//定义一个变量
var a = "10" ; //string :里面的值10
document.write("转换前a的数据类型是:"+typeof(a)+"
") ;//转换
a = parseInt(a) ;
document.write("转换后a的数据类型是:"+typeof(a)+",值是:"+a) ;
document.write("
") ; 
 
var b = "3.14" ;
document.write("转换前b的数据类型是:"+typeof(b)+"
");//转换
b = parseFloat(b) ;
document.write("转换后b的数据类型是:"+typeof(b)+",值是:"+b+"

JavaScript中的运算符:

算术运算符:+(加),-(减),*(乘),/(除);

比较运算符:>=,<=, . . . ;

逻辑运算符:&&(逻辑双与),||(逻辑双或),!(逻辑非);

三元运算符:表达式?true的结果:false的结果;

注意:JavaScript中true代表1,false代表0;

举例:

var a = 10;
var b = 20 ;
document.write((a+true)+"
") ; //11document.write(a-b) ; //-10
var a = 10;
var b = 20 ;
document.write(a<=b) ;
document.write((false && true)+"
") ;document.write((ftrue && true+)"
") ;document.write("
") ; 
 
var age = 12 ;
document.write((age >= 18 ? "成年人": "未成年人")) ;
流程语句:
if语句:
格式:
if(表达式){
语句1;
} else {
语句2;
}

表达式的类型:

1> 如果是numbler类型,(整数类型,小数),0表示条件不成立;

2> 如果是string类型,要么字符要么字符串,必须有数据,如果是空串,条件不成立;

3> 如果是boolean类型,true成立,false不成立;

4> 如果是object类型,必须有对象,才成立,为null不成立;

switch语句:

格式:

和Java相同;

和Java的区别:

1> js中的case后面也可以跟常量,还可以跟变量,还可以跟表达式;

2> java中case后面只能跟常量;

举例:

//case后面跟表达式
var age = 25 ;
switch(true){
case age >=18 :
document.write("你是成年人...") ;
break;
case age<18 :
document.write("你是未成年人呢...") ;
break ;
}
document.write("
"); 
 
var i = "b" ; //和Java语言一样,case后面可以常量,
var b = "b" ;
switch(i){
case "a" :
document.write("a") ;
break ;
case b :
document.write("b") ;
break ;
case "c" :
document.write("c") ;
break ;
case "d":
document.write("d") ;
break ;
}

JavaScript中的循环语句:

如:do-while,for,while 循环语句与java中的循环语法结构相同;

练习:

//显示"*"形,第一行有一个...
for(var i = 0 ; i<5; i++){//外层循环控制行数
for(var j= 0 ; j<=i; j ++){//内层循环控制列数
document.write("* ") ; // 空格 转义字符
}
document.write("
") ;}
document.write("
") ; 
 
//table标签: 使用js里面嵌套表格标签
//document.write("
for(var i = 1 ; i <=9 ; i++){
//
for(var j = 1 ; j<=i ;j++){
document.write(i+"*"+j+"="+(i*j)+" ") ;
}
document.write("
") ;}
wIth语句:
格式:
with(document){
语句;
}

特点:将document对象当做witch语句参数,然后直接使用它里面的write();

举例:

//with语句:格式 with(document){....}
//将document对象当做witch语句参数,然后直接使用它里面的write() ;
//with语句
with(document){
for(var i = 0 ; i < 5 ; i ++){
for(var j = 0 ; j <=i ; j++){
write("* ");
}
write("
") ;}
write("
") ; 
 
for(var i = 1 ; i <=9 ; i++){
for(var j = 1 ; j <= i ;j++){
write(i+"*"+j+"="+(i*j)+" ") ;
}
write("
") ;}
}

for-in语句:

作用:针对数组或者对象进行遍历;

格式:

for(var 遍历的变量名 in 数组名称/对象名称){
输出变量名;
}

举例:

var arr = [10,20,30,40] ; //类似于Java中的静态初始化
for(var i =0 ; i < arr.length; i++){
document.write(arr[i] +" ") ;
}
document.write("
"); 
 
//使用for-in语句
for(var i in arr){
document.write(arr[i] +" ") ;
}
函数:
格式:
function 函数名称(形式参数列表){
语句;
}

函数调用:

函数名称(实际参数列表);

函数中注意的问题:

1> 函数的形式参数不能有var关键字定义,否则报错;

2> 在js中函数是可以有return语句的,直接return,但是没有返回值;

3> 在js中,函数是不存在的重载概念,后面定义的函数回覆盖掉前面定义的函数;

4> 当实际参数的数量小于形式参数的数量,就会出现一个值肯定是NaN;

如果实际参数大于形式参数,那么最终会计算前面的值,然后将后面的数据丢弃掉;

5> 在js的每一个函数中,里面存在默认的数组:arguments,它的作用就是将实际参数从左到右依次赋值给形式参数(从左到右);

举例:

//定义一个函数
//只写参数名称
function add(var a, var b, var c){// a =10 ,b =20 , c= 30 d =40(实际没有了,就会丢弃掉)
for(var i = 0 ; i < arguments.length ; i++){
document.write(arguments[i] +" ") ;
}
var result = a+b + c;//NaN:None a None 没有具体结果
//var result =10 +20 + NaN = NaN;
document.write("result:"+result);
}
//调用函数
var s = add(10,20) ;
document.write("s:"+s) ; //输出NaN
var s1=add(10,20,30,40) ; //输出前三项的和
document.write("s1:"+s1);

练习:

函数练习

//定义一个函数
function check() {
//alert("hello") ;
//获取用户在表单中输入的值:DOM编程 通过标签中的id来获取标签对象
var month = document.getElementById("month").value; //通过获取到input标签对象,然后通过标签对象.value:获取表单的值
//在js中string类型的数据和number类型的整数在进行比较(==)的时候,默认转换提升为number类型
//使用if选择结构语句
if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
alert("当前月份有31天...");
} else if(month == 4 || month == 6 || month == 9 || month == 11) {
alert("该月份有30天");
} else if(month == 2) {
alert("该月份有28天");
} else {
alert("没有该月份");
}
}

请您输入要查询的月份:

String对象:

表现形式:

方式1:String str = new String() ;

例:var str1 = new String("hello") ;

方式2:var str = "字符串";

例:var str = "hello" ;

注意:在js中valueOf():默认比较的是他们的内容是否相同;

常用方法:

chatAt():返回指定索引位置处的字符;

indexOf():表示某个子字符串在当前字符串中第一次出现的索引;

lastindexOf():表示墨云歌字符串在当前字符串中最后一次出现的索引;

fontColor():给当前字符串设置一个颜色标记;

substring(start,end):截取功能(从索引start开始到索引end之前结束);

substr(start,length):截取功能(从索引start开始,读取长度为length个字符);

举例:

var str = "hellojava" ;
document.write(str.charAt(4)+"
") ;document.write(str.indexOf("a")+"
");document.write(str.lastIndexOf("a")+"
");document.write(str.fontcolor("#00ff00")+"
") ;document.write(str.substring(4,9)+"
") ;document.write(str.substr(3,4)+"
") ;

Number对象:

表现形式:

方式1:var num1 = new Number(100) ;

方式2:var num1 = 100 ;

注意:在js中valueOf():默认比较的是他们的内容是否相同;

Math对象:

举例:
//向上取整//在整数位置+1
var num = 4.30 ;
document.write(Math.ceil(num)+"
");//向下取整 :如果有小数部分,将小数部分去除掉,保留整数位
document.write(Math.floor(num)+"
");//四舍五入
document.write(Math.round(num)+"
");//获随机数 random():包含0,但是不包含1
document.write(Math.random()*100+"
") ;//max/min
document.write(Math.max(num,100)) ;

Date对象:

举例:

//如何创建一个Date对象
var date = new Date() ;
//alert(date) ;//Sun Jun 17 2018 16:05:35 GMT+0800 (中国标准时间)
//获取系统时间: 2018年6月17日XXX时:xx分:xx秒--->Java中存在一个类:SimpleDateFormat
//getFullYear :获取年份
document.write(date.getFullYear()+"年") ;
//获取月份:getMonth 方法返回一个处于 0 到 11 之间的整数,
document.write((date.getMonth()+1)+"月") ;
//获取月份中的日期
document.write(date.getDate()+"日"+" ") ;
//获取一天当中的小时
document.write(date.getHours()+":") ;
//获取分
document.write(date.getSeconds()+":") ;
//获取分钟的秒
document.write(date.getMinutes()) ;

练习:简单动态时钟;

网页时钟


当前系统时间为:

function newDate(){
//生成一个系统时间的格式:2018-6-17 时:分:秒
//创建Date对象
var date = new Date() ;
//dateStr就是系统时间
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+
date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;
//获取span标签对象,通过id获取
var dateTip = document.getElementById("dateTip") ; //dateTip is null
//设置span标签的innerHTML属性:文本属性
dateTip.innerHTML = dateStr;
}
//定时器
//1)setInterval("任务",毫秒值) ; 每经过多少毫秒重复执行这个任务(函数)
//2)timeout("任务",毫秒值) ;经过多少毫秒后执行一次这个任务
window.setInterval("newDate()",1000) ;

本文将讲解了关于JavaScript基础的相关讲解,