JavaScript是一门弱类型的脚本语言，语法和java相似
1）js中的变量以及变量的类型
<!DOCTYPE html>
<html>
<head>
<!--
1)：在JavaScript中var可以用来定义各种类型的值,var还可以省略
2):var可以重复去定义一个变量，最后的值会是后面的值(后面的值会覆盖前面的值)
3)javascript的四种数据类型
显示类型的方法是：typeof(变量名)
类型1:无论是小数还是整数，它的数据类型都是number
类型2：无论是字符还是字符串，它的数据类型都是String
类型3：第三种数据类型是boolean
类型4：自定义的类型：（f的值是：[object Object]，f的数据类型是：object）
-->
<meta charset="UTF-8">
<title>js的变量以及变量的数据类型</title>
<script type="text/javascript">
//定义数据
var a=21;
var a=23;
var b=12.24;
var c=true;
var d='a';
var e="hello";
var f=new Object();
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+"，b的数据类型是："+typeof(e)+"<br />");
document.write("f的值是："+f+"，f的数据类型是："+typeof(f)+"<br />");
</script>
</head>
<body>
</body>
</html>运行结果：
a的值是:23,a的数据类型是：number
b的值是：12.24，b的数据类型是：number
c的值是：true，c的数据类型是：boolean
d的值是：a，d的数据类型是：string
e的值是：hello，b的数据类型是：string
f的值是：[object Object]，f的数据类型是：object
2）js的类型转换函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--
类型转化函数：
String类型->int
parseInt(变量名)
String类型->float
parseFloat(变量名)
-->
<title>js的数据类型转换</title>
<script type="text/javascript">
var a="12";
document.write("转换前的值是"+a+"，类型是："+typeof(a)+"<br />");
a=parseInt(a);
document.write("转换后的值是"+a+"，类型是："+typeof(a));
document.write("<hr />")
var b="12.32";
document.write("转换前的值是"+b+"，类型是："+typeof(b)+"<br />");
b=parseFloat(b);
document.write("转换前的值是"+b+"，类型是："+typeof(b));
</script>
</head>
<body>
</body>
</html>
运行结果：
转换前的值是12，类型是：string
转换后的值是12，类型是：number
转换前的值是12.32，类型是：string
转换前的值是12.32，类型是：number
3）js中的流程控制语句1：
<!DOCTYPE html>
<html>
<head>
<!--
在运算中当true和false进行运算时，false相当于0；true相当于1
-->
<meta charset="UTF-8">
<title>js的流程控制语句</title>
<script type="text/javascript">
var a=10;
var b=20;
document.write(a+true+"<br />");
document.write(b+false+"<br />");
document.write(a+b);
document.write("<hr />");
document.write(a>b+"<br />");
document.write((false && true)+"<br />");
document.write((true && true)+"<br />");
document.write("<hr />")
var c=18;
document.write((c>=18?"成年人":"未成年人"));
/**
* 括号中如果是number类型的话，小数和整数都成立
* 在JavaScript中0代表的是false，所以在if语句中会执行else语句，不成立
* 括号中如果是String类型的话，字符和字符串都成立,只要有数据就行，但是空串不成立。
* 括号中如果是boolean类型的话，true表示成立，false表示不成立
* 括号中如果是object类型的话，必须有对象，如果是null的话则不成立
*/
if(new Object()){
alert("条件成立");
}else{
alert("条件不成立");
}
</script>
</head>
<body>
</body>
</html>
运行结果:
11
20
30
falsefalse
true
成年人
4）js的流程控制语句2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js流程控制语句2</title>
<script type="text/javascript">
/**
* switch语句后面可以跟常量还可以跟表达式
* 但是在java中只能跟常量
* 记住输出完后得加break，不然后造成case穿透的现象
*/
var i="c";
//var c="c";
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;
}
document.write("<hr />")
var c=21;
switch(true){
case c>=18:
document.write("成年人");
break;
case c<18:
document.write("未成年人");
break;
}
document.write("<hr />")
/**
* 普通for循环
*/
var result=0;
for(var i=0;i<=10;i++){
result+=i;
}
document.write("它的值是："+result);
document.write("<hr />");
/**
* while循环语句
*/
var i=1;
while(i<=5){
document.write("helloworld<br />");
i++;
}
document.write("<hr />")
/**
* do-while循环语句
*/
var j=1;
do{
document.write("hellojs<br />");
j++;
}while (j<=5);
</script>
</head>
<body>
</body>
</html>
运行结果：
c
成年人
它的值是：55
helloworld
helloworld
helloworld
helloworld
helloworld
hellojs
hellojs
hellojs
hellojs
hellojs
5）有关流程语句的练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
<script type="text/javascript">
/**
* 输出三角形
*/
for(var i=0;i<5;i++){//外层控制行数
for(var j=0;j<=i;j++){//内层控制列数
document.write("*"+" ");
}
document.write("<br />");//换行
}
document.write("<hr />")
/**
* 输出九九乘法表
*/
for(var x=1;x<=9;x++){
for(var y=1;y<=x;y++){
document.write(x+"*"+y+"="+x*y+" ")
}
document.write("<br />")
}
</script>
</head>
<body>
</body>
</html>
运行结果：
*
* *
* * *
* * * *
* * * * *
1*1=1
2*1=2 2*2=4
3*1=3 3*2=6 3*3=9
4*1=4 4*2=8 4*3=12 4*4=16
5*1=5 5*2=10 5*3=15 5*4=20 5*5=25
6*1=6 6*2=12 6*3=18 6*4=24 6*5=30 6*6=36
7*1=7 7*2=14 7*3=21 7*4=28 7*5=35 7*6=42 7*7=49
8*1=8 8*2=16 8*3=24 8*4=32 8*5=40 8*6=48 8*7=56 8*8=64
9*1=9 9*2=18 9*3=27 9*4=36 9*5=45 9*6=54 9*7=63 9*8=72 9*9=81
6）js的with语句for-in语句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的with语句和for-in语句.html</title>
<script type="text/javascript">
/**
* with语句，将document放在with语句中
* 就可以在输出时直接调用write方法
*/
with(document){
for(var i=0;i<5;i++){//外层控制行数
for(var j=0;j<=i;j++){//内层控制列数
write("*"+" ");
}
write("<br />");//换行
}
}
/**
* for-in语句输出
*/
//定义一个数组
var arr=[12,23,34,45,56];
for(i in arr){
document.write(arr[i]+" ")
}
document.write("<hr />")
//定义一个对象
//先定义一个函数,函数中的参数不能用var定义，直接书写就行，否则会报错
function Person(name,age){
this.name=name;
this.age=age;
}
//创建函数对象
var p=new Person("baby",32);
for(i in p){
document.write(p[i]+"<br />");
}
</script>
</head>
<body>
</body>
</html>
运行结果：
*
* *
* * *
* * * *
* * * * *
12 23 34 45 56
baby
32
7）js的函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的函数</title>
<script type="text/javascript">
/**
* 函数中的形式参数前面不用var修饰
* 函数中也是不存在重载的，后面定义的函数会覆盖掉前面定义的函数
* 在js的每个函数中都存在个默认的数组arguments，它的作用就是将实际参数从左到右的赋值给实现参数
*/
//先定义一个函数
function method(a,b){
var result=a+b;
document.write("result的值是："+result+"<br />");
}
/**
* 当定义的函数中的形式参数的数量大于输入的实际参数的数量时
* 输出的值就会显示NaN,代表的是空值
*/
function show(a,b,c){
var result=a+b+c;
document.write("result的值时："+result+"<br />");
}
/**
* 当定义的函数中的形式参数的数量大于输入时的实际参数的数量时
* 输出的结果就会运算形式参数中对应的实际参数值，后面多余的值不进行计算
*/
function add(a,b){
for(var x=0;x<arguments.length;x++){
document.write(arguments[x]+"<br />");
}
var result=a+b;
document.write("result的值时："+result);
}
//直接调用方法
method(20,30);
show(10,20);
add(10,20,30);
</script>
</head>
<body>
</body>
</html>
运行结果：
result的值是：50
result的值时：NaN
10
20
30
result的值时：30
8）有关函数的练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的函数练习</title>
<script type="text/javascript">
/**
* 需求：
* 如果是大月就显示该月有31天
* 如果是小月就显示该月有30天
* 如果是2月就显示该月有28天
*/
//创建函数
function check(){
var month=document.getElementById("month").value;
/**
* 我们在表单中的值是字符串类型但是月份是整型，那么为什么没有报错呢？
* 因为在javascript中当字符串与整型进行比较的时候，会默认转换成整型的
*/
/**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("您输入的月份有误，请重新输入...")
}/
/**
* 我们还可以用switch的case穿透来使用
* 但是这时的类型就必须要进行转换了
*/
month=parseInt(month);
switch(month){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
alert("该月还有31天！")
break;
case 4:
case 6:
case 9:
case 11:
alert("该月有30天！");
break;
case 2:
alert("该月有28天");
break;
default:
alert("您输入的月份有误，请重新输入...");
break;
}
}
</script>
</head>
<body>
请输入您要输入的月份：<input type="text" id="month"/><input type="button" value="查询" onclick="check()"/>
</body>
</html>
注意事项，上述可以用两种方法，但是得注意二者的区别，注释的方法不用转换类型，但是switch方法需要转换类型
9）js的内置对象之String对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的内置对象之String对象</title>
<script type="text/javascript">
/**
* 在JavaScript中valueof()方法时来比较二者的内容是否相等
*/
//创建方式1：
// var str1=new String ("hello");
// var str2=new String ("hello");
// document.write((str1==str2)+"<br />");
// document.write(str1.valueOf()==str2.valueOf());
// document.write("<hr />")
//创建方式2：
// var s3="world";
// var s4="world";
// document.write(s3==s4);
// document.write(s3.valueOf()==s4.valueOf());
// document.write("<hr />")
var str="hellojava";
var index=str.charAt(4);
document.write("该索引返回的字符是："+index+"<br />");
document.write("该字符返回的索引是："+str.indexOf("a")+"<br />");
document.write("该字符返回的最后一次索引是："+str.lastIndexOf("a")+"<br />");
document.write(str.fontcolor("#00ff00")+"<br />");//颜色是绿色
document.write(str.substring(2,8)+"<br />");//llojav
//截取从索引3处往后的4个字符
document.write(str.substr(3,7));//lojava
</script>
</head>
<body>
</body>
</html>运行结果：
该索引返回的字符是：o
该字符返回的索引是：6
该字符返回的最后一次索引是：8
hellojava
llojav
lojava
10）js的内置对象之Number和Math对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的内置对象之Number和Math对象</title>
<script type="text/javascript">
//方式1：
var num1=new Number(100);
var num2=new Number(100);
document.write((num1==num2)+"<br />")
document.write(num1.valueOf()==num2.valueOf());
document.write("<hr />")
//方式2：
var num3=200;
var num4=200;
document.write((num3==num4)+"<br />");
document.write(num3.valueOf()==num4.valueOf());
document.write("<hr />");
//Math对象
//向上取整
var number=4.2;
document.write("向上取整的值为"+Math.ceil(number)+"<br />");
//向下取整
document.write("向下取整的值为："+Math.floor(number)+"<br />");
//四舍五入
var num=5.6;
document.write("四舍五入后的值为："+Math.round(num)+"<br/>");
//获取随机数
document.write("获取的随机数是："+Math.random()*100+"<br />");
//求max和min
document.write("最大值是："+Math.max(num,10)+"<br />");
document.write("最小值是："+Math.min(num,10));
</script>
</head>
<body>
</body>
</html>
运行结果：
false
true
true
true
向上取整的值为5
向下取整的值为：4
四舍五入后的值为：6
获取的随机数是：2.437032130546868
最大值是：10
最小值是：5.6
11）内置对象之Date对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的Date对象</title>
<script type="text/javascript">
var date=new Date();
document.write("当前的系统时间是："+date);
document.write("<hr />");
//获取当前时间的年份
document.write(date.getFullYear()+"年");
//获取当前时间的月份
document.write((date.getMonth()+1)+"月");
//获取当前时间的日份
document.write(date.getDate()+"日"+" ");
//获取当前时间的小时
document.write(date.getHours()+":");
//获取当前时间的分钟
document.write(date.getMinutes()+":");
//获取当前时间的秒值
document.write(date.getSeconds()+":");
//获取当前时间的毫秒值
document.write(date.getMilliseconds());
</script>
</head>
<body>
</body>
</html>
运行结果：
当前的系统时间是：Thu Jun 21 2018 11:58:34 GMT+0800 (中国标准时间)
2018年6月21日 11:58:34:92
12）有关Datr对象做个网页时钟的练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的网页时钟</title>
<script type="text/javascript">
function check(){
//创建时间对象
var date=new Date();
//获取当前时间的年月日时分秒
var datetime=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+
date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
var dateStr=document.getElementById("dateStr");
dateStr.innerHTML=datetime;
}
//定时器
window.setInterval("check()",1000);
</script>
</head>
<body>
当前系统时间是：<span id="dateStr"></span>
</body>
</html>