JavaScript（一）--变量和数据类型/流程控制语句/函数/网页时钟/基于对象编程

JavaScript使用

1.javascript的注释：
单行 //
多行 /* */
2.css的注释：
css 多行注释 /* */
3.html的注释：

<!--注释 -->

4.常用的函数：

alert("提示框");

document.write("向浏览器输出内容");

5.javascript的使用方法：
（1）内部javacript:
在html页面中使用<script>标签，在<script>标签体中写js内容；
弊端：和html代码混杂在一起，不好维护，不好重用。

（2）外部javascript（推荐使用）：
优点:可以将html代码和js代码分离,管理起来更加方便。
注意：不能使用<script src="01.js"/> 空标签方式导入。即：不能使用自闭合的script标签导入js文件。

变量和数据类型

1.定义和赋值变量： var 变量名=值;

var a = 10;
            //var a = 20;
            var b = 3.14;
            var c = 'c';
            var d = "hello";
            var e = true;
            var f = new Object();

注意：
1）使用var关键词定义变量，var可以省略的，但是不建议省略var；
2) 在js中可以重复定义变量，后面定义的变量会覆盖前面的变量；
3) js是弱类型语言，使用var来定义任何数据类型；
4）js中变量的类型是由变量的值决定的，所以只定义不赋值的变量，就是一个未赋值变量（undefined），未赋值的变量不能使用。

typeof(变量)：查看变量的数据类型

2.js的数据类型分类：
1)number：无论整数还是小数，都是number类型；
2) string：无论字符还是字符串，都是string类型；
3) boolean
4) object ：对象类型。

3.类型转换函数：

string->number(整数) : parserInt(变量)
string->number(小数)：parserFloat(变量)

4.运算符：
1)算术运算符： + - * / %
2)比较运算符： > < >= <= ==
3)逻辑运算符： && || !
4)三目运算符: 表达式 ? true的结果 : false的结果

流程控制语句

1.if语句：

if(表达式){
        语句  
    }else{
        语句
    }

条件可以是：

布尔值：true：成立； false:不成立
number：非0：成立； 0：不成立
string：非空字符串：成立；空字符串：不成立
object：非null: 成立； null：不成立

2.swtich语句：

swtich(变量){
case 选项1:
    语句;
    break;  如果不break，就会继续下面选项的语句    
case 选项2:：
    语句;
    break;
default:
    默认;
}

case的条件：

1)可以是常量：string,number
2)可以是变量（java不能）
3)可以是表达式（java不能）

例1：

var i = "b";
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;
default:
    document.write("你选择了其他");
    break;
}

例2：

var age = 20;
switch(true){
case age>=18:
    document.write("他是成年人");
    break;
case age<18:
    document.write("他是未成年人");
    break;
}

3.for语句：

for(初始化语句;条件判断语句;流程控制语句){
        循环体语句
    }

需求：对1-100进行求和。

var result = 0;
for(var i=1;i<=100;i++){
    result+=i;
}
document.write("结果为:"+result);

4.while语句：

初始化语句
while(条件判断语句){ 
循环体语句;
条件控制语句;
}

需求：在页面上打印十次helloworld。

var i = 1;
while(i<=5){
    document.write("helloworld<br/>");
    i++;
}

5.do-while语句：

初始化语句;
do{
    循环体语句;
    条件控制语句;
}while(判断条件语句)

6.with语句：方便函数的调用。

with(对象){
    直接写对象的方法，无需写对象的名称   
}

需求：在页面上打印十次helloworld。

 with(document){
    var i = 0;
    do{
        write("helloword");
        write("<br>");
        i++;
        }while(i<10);

       }

函数

1.函数定义：

function 函数名称(形式参数列表){
    语句  
}

2.调用函数：

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

注意：

1）js的函数使用function定义，但是形式参数列表不能使用var关键词；
2）js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型
3) js没有方法重载的概念，后面定义的函数会覆盖前面的函数；
4）js中的形式参数和实际参数的数量可以不一致，依然可以调用；
5）js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值；
6)arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数。

注意：

实际参数<形式参数： NaN
实际参数>形式参数：取前面的实际参数，后面的参数丢失

需求：定义一个函数，输入月份，可以查询到该月份的天数。
1,3,5,7,8,10,12 大月 31天
4,6,9,11 小月 30天
2 小小月 28天

<script type="text/javascript">
    //当按钮的单击事件被触发以后需要执行的操作
    function checkMonth(){
        //获取单行输入域内的用户输入的月份值
        var month = document.getElementById("month").value;
        //使用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("没有这个月份");
                        }


        }

</script>

<body>
请输入你需要查询的月份:<input type="text" id="month"/>
<!--在这里需要给button标签添加一个单击事件-->
<input type="button" value="查询天数" onclick="checkMonth()" />
</body>

基于对象编程

内置对象：
1.String对象：
方式一：定义String对象

var str1 = new String("hello");
var str2 = new String("hello");
document.write("结果："+(str1==str2)+"<br/>");
valueOf（）:该方法返回对象的内容
document.write("结果："+(str1.valueOf()==str2.valueOf()));

方式二：

var str1 = "hello";
var str2 = "hello"; 
document.write("结果："+(str1==str2)+"<br/>");

常用方法：

1） charAt(索引): 返回指定索引的内容
2） indexOf(字符串): 返回首次出现指定字符的索引位置
3）lastIndexOf(字符串):返回最后出现指定字符的索引位置
4）fontcolor(“red”): 直接给字符串添加颜色
5）split(“字符串”):使用指定字符串切割字符串，返回字符串数组
6）substring(start,end); 截取字符串，start：开始索引， end:结束索引
7）substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度

2.Number对象：
方式一：定义Number对象

var num1 = new Number(20);
var num2 = new Number(20);

方式二：

var num1 = 20;
var num2 = 20;

document.write((num1==num2)+"<br/>");
document.write(num1.valueOf()==num2.valueOf());

3.Boolean对象：

var b1 = new Boolean(true);
var b2 = new Boolean(true);
document.write((b1==b2)+"<br/>");
document.write(b1.valueOf()==b2.valueOf());

4.Math对象：
常用的方法：

1）ceil()：向上取整。如果有小数部分的话，直接+1 。
2）floor()：向下取整。如果有小数部分的话，直接丢失小数部分，保留整数位。
3） round()：四舍五入取整。满5进一。
4）random()：生成一个随机的0-1的小数 .包含0，不包含1 。
5）max()：返回最大值。
6）min()：返回最小值。

例如：

var num = 3.50;
document.write(Math.ceil(num)+"<br/>");
document.write(Math.floor(num)+"<br/>");
document.write(Math.round(num)+"<br/>");
document.write(Math.round(Math.random()*100)+"<br/>");
document.write(Math.max(10,6,54,23,76)+"<br/>");
document.write(Math.min(10,6,54,23,76)+"<br/>");

5.Date对象：
（1）创建日期：

var date = new Date();

//document.write(date);  //默认格式

（2）年份：

document.write(date.getFullYear()+"年");

（3）月：

document.write((date.getMonth()+1)+"月");

（4）日：

document.write(date.getDate()+"日");

（5）星期：

document.write("星期"+date.getDay()+"&nbsp;");

（6）时：

document.write(date.getHours()+"时");

（7）分：

document.write(date.getMinutes()+"分");

（8）秒：

document.write(date.getSeconds()+"秒");

输出结果：2015年06月01日 15时12分30秒

需求：网页时钟。

<body>
当前的日期为：<span id="dateTip"></span>
</body>
<script type="text/javascript">
    function genNewDate(){
        //生成一个系统的当前时间，格式：2015-06-01 15:22:30
        var date = new Date();
        //当前日期时间的字符串
        var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"&nbsp;"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
        //把日期字符串放到span中
        //得到span对象
        var dateTip = document.getElementById("dateTip"); //读到了没有加载的标签，无法读取的
        //设置span的innerHTMl属性给span赋值
        dateTip.innerHTML=dateStr;
    }

    //设置定时器，每个多少毫秒调用1次任务（函数）
    window.setInterval("genNewDate()",1000);
</script>

6.Array数组对象：
方式一：创建数组
（1）指定数组长度：

var arr = new Array(3);

（2）不指定数组长度、默认0个元素：

var arr = new Array();

（3）指定具体内容：

var arr = new Array(10,"hello",true);

方式二：不需要new，直接指定内容

var arr = [10,"java",false];

注意：

1）数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。
2) js的数组可以存放任意类型的元素。

常用的方法：

join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串
reverse(): 反转数组中的元素

常用的属性：

length 数组的长度

遍历数组：除了普通for循环还有for-in语句。

for(var 遍历 in  数组){                     
}

例如：

<script>
var arr = [10,20,30,40];
for(var i in  arr){
    document.write(arr[i]); 
    document.write("<br>");                 
    }

</script>