javascript发展史和入门教程

╰+哭是因爲堅強的太久メ 2022-06-13 02:51 162阅读 0赞

5 Javascript入门  
5.1 引入  
html：负责网页结构  
css： 负责网页美观  
javascript：负责用户与浏览器交互。  
5.2 javacript的来由  
1994时，网景公司研发了livescript语言，领航者浏览器（把livescript语言植入到浏览器）  
微软公司的IE浏览器，后来自己花钱20亿美金研发jscript

1995年，Sun公司，推出jdk1.1 .谈合作。livescript-》javascript
    
        1998，美国在线收购网景。
    
        2003，直接关闭网景。网景6-7亿美金。2千万美金，组建谋智基金（火狐）
    
        javascript   jscript    语法不同。 ECMA（欧洲制造商联盟）
    
        scirpt的语法：
            1）基础语法（ECMA规范）
            2）BOM编程（没有统一）
            3）DOM编程（没有统一）

--------------------

1.1 javascript使用  
javascript的注释：单行 // 多行 /\* \*/  
css的注释：css 多行注释 /\* \*/  
html的注释：

常用的函数：
        alert("提示框");
        document.write("向浏览器输出内容");
    
    javascript的使用方法：
        1）内部javacript:
            a)在html页面中使用<script>标签，在<script>标签体中写js内容
            b)弊端：和html代码混杂在一起，不好维护，不好重用
    
       2）外部javascript（推荐使用）
           注意： 不能使用<script src="01.js"/> 空标签方式导入

1.2 变量和数据类型

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的数据类型分类：
            a）number： 无论整数还是小数，都是number类型
            b) string:  无论字符还是字符串，都是string类型
            c) boolean
            d) object  对象类型

1.3 类型转换函数  
string->number(整数) : parserInt(变量)  
string->number(小数): parserFloat(变量)

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

1.5 流程控制语句  
/\*  
if语句  
if(表达式)\{  
语句  
\}else\{  
语句  
\}

条件可以是：
        布尔值：true：成立 ； false:不成立
        number：非0：成立； 0： 不成立
        string: 非空字符串： 成立 ； 空字符串： 不成立
        object: 非null: 成立；  null：不成立
    */

/*
        if(null){
            alert("条件成立");  
        }else{
            alert("条件不成立");
        }
        */
    
    
        /*
        swtich语句
            swtich(变量){
            case 选项1:
                语句;
                break;  如果不break，就会继续下面选项的语句    
            case 选项2:：
                语句;
                break;
            default:
                默认;
            }
    
        注意：
            case的条件：
                1）可以是常量. string,number
                2）可以是变量。（java是不能是变量）
                3)可以是表达式 （java不能这样）
        */
        /*
        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;
        }
        */
        /*
        var age = 20;
        switch(true){
        case age>=18:
            document.write("他是成年人");
            break;
        case age<18:
            document.write("他是未成年人");
            break;
        }
        */
    
        /*
        for语句：
            for(初始化语句;条件判断语句;流程控制语句){
                循环体语句
            }
    
        需求：页面上打印十次helloworld
        需求：对1-100进行求和
        */
        /*
        var result = 0;
        for(var i=1;i<=100;i++){
            result+=i;
        }
        document.write("结果为:"+result);
        */
    
        /*
        while语句
            初始化语句
            while(条件判断语句){ 
            循环体语句;
            条件控制语句;
            }
    
            执行流程：

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

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

do-while语句
        初始化语句;
        do{
            循环体语句;
            条件控制语句;
        }while(判断条件语句)
    
    需求：在页面上打印十次helloworld;

var i = 0;
    do{
        document.write("helloworld");
        i++;
    }while(i<10);

循环语句课堂练习（for循环的嵌套）：
    1，显示"*"为三角型，5行，第1行有1个"*"，第2行有2个"*"……
    
    2. 打印99乘法表（作业）

with语句：方便函数的调用（以上练习题网页拿过来直接讲解）
        with(对象){
            直接写对象的方法，无需写对象的名称   
        }

1.6 函数

函数定义：
        function 函数名称(形式参数列表){
            语句  
        }
    
    调用函数:
        函数名称(实际参数列表);
    
        注意： 
            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天

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
        function checkMonth()
        {
         
            var month = document.getElementById("month").value;
            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>
    </head>
    <body>
        请输入要查询的月份：<input type="text" id="month" />
        <input type="button" value="查询天数" onclick="checkMonth()" />
    </body>
    </html>

1.7 基于对象编程  
内置对象  
1.String对象  
方式一：定义String对象  
var str1 = new String(“hello”);  
var str2 = new String(“hello”);  
document.write(“结果：”+(str1==str2)+”  
”);  
valueOf（）:该方法返回对象的内容  
document.write(“结果：”+(str1.valueOf()==str2.valueOf()));

方式二：
            var str1 = "hello";
            var str2 = "
            ";  
            document.write("结果："+(str1==str2)+"<br/>");
    
        常用方法：
            charAt(索引): 返回指定索引的内容
            indexOf(字符串): 返回首次出现指定字符的索引位置
            lastIndexOf(字符串): 返回最后出现指定字符的索引位置
            fontcolor("red"): 直接给字符串添加颜色
            split("字符串"): 使用指定字符串切割字符串，返回字符串数组
            substring(start,end); 截取字符串，start：开始索引， end:结束索引
            substr(start,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    /*
    1.String对象定义
    方式1:var s1 = new String("hello");
    方式2:var s2 = "hello";
    
    charAt(索引): 返回指定索引的内容
    indexOf(字符串): 返回首次出现指定字符的索引位置
    lastIndexOf(字符串): 返回最后出现指定字符的索引位置
    fontcolor("red"): 直接给字符串添加颜色
    split("字符串"): 使用指定字符串切割字符串，返回字符串数组
    substring(start,end); 截取字符串，start：开始索引， end:结束索引
    substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度
    
    
    */
    var s1 = new String("hello");
    var s2 = "world";
    
    //charAt(索引): 返回指定索引的内容
    var s3 = s1.charAt(1);
    
    //indexOf(字符串): 返回首次出现指定字符的索引位置
    var s4 = s1.indexOf("h");
    
    //split("字符串"): 使用指定字符串切割字符串，返回字符串数组
    var s5 = s1.split("e");
    document.write(s5);
    document.write("<br />");
    
    </script>
    </head>
    <body>
    
    </body>
    </html>

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());
    
    
            Boolean对象
            var b1 = new Boolean(true);
            var b2 = new Boolean(true);
            document.write((b1==b2)+"<br/>");
            document.write(b1.valueOf()==b2.valueOf());
    
    
            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/>");

Date对象
            //创建日期
            var date = new Date(); //取当前系统日期时间    java: SimpleDateFormat对象 yyyy-MM-dd 格式化
            //document.write(date);  //默认格式
            //格式： 2015年06月01日 15时12分30秒
            //年份
            document.write(date.getFullYear()+"年");
            //月
            document.write((date.getMonth()+1)+"月");
            //日
            document.write(date.getDate()+"日");
            //星期
            document.write("星期"+date.getDay()+" ");
            //时
            document.write(date.getHours()+"时");
            //分
            document.write(date.getMinutes()+"分");
            //秒
            document.write(date.getSeconds()+"秒");
    
            案例练习：网页时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <span id="sapnTime"></span>
    </body>
    <script type="text/javascript">
    
        //创建一个获取当前时间的方法
        function getTime(){
         
            //获取span标签对象
            var spanTime = document.getElementById("sapnTime");
            //创建日期对象
            var date = new Date();
            //获取年月日,时分秒进行字符串拼接
            var time = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"  "+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds();
    
            //给标签体设置内容,innerHTML这个属性
            spanTime.innerHTML=time;
    
            }
    
        //调用设置时间的方法
        //getTime();//这样的方式对上面设置时间的方法只调用了一次,所以我们的时间无法实现动态的设置变化
    
        //如果需要让时间动起来的话,我们需要每隔一秒调用getTime()这个方法一次
        window.setInterval("getTime()",1000);
        //参数1:调用的函数名称   参数2:每隔多久调用一次,调用的次数没有限制
    
    
    </script>
    </html>

Array数组对象   
        方式一：创建数组
        1.1 指定数组长度
        var arr = new Array(3);
    
        1.2 不指定数组长度、默认0个元素
        var arr = new Array();
    
        1.3 指定具体内容
        var arr = new Array(10,"hello",true);
    
        方式二： 不需要new，直接指定内容
        var arr = [10,"java",false];
    
    
        注意：
        1）数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。
        2) js的数组可以存放任意类型的元素。
    
        常用的方法：
        join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串
        reverse(): 反转数组中的元素
    
        常用的属性：length 数组的长度
    
            for-in语句（数组讲完之后再讲，和普通for循环遍历对比）：
            for(var 遍历 in  数组){
    
            }
            var arr = [10,20,30,40];
            作用：遍历数组 
            需求：定义数组进行遍历
    
    
    （作业）设计一个猜数字小游戏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
        //生成随机数
        var num = Math.floor(Math.random()*100+1);
        alert(num);
        function checkNumber(){
         
            //1.获取输入狂内部输入的数字
            var inputNumber = document.getElementById("inputNumber").value;
    
            //将数字的类型进行转换
            inputNumber = parseInt(inputNumber);
    
            //做if判断并给出提示
            if(inputNumber>num){
                alert("大了");
                }else if(inputNumber<num){
                    alert("小了");
                    }else if(inputNumber==num){
                        alert("对了");
                        }
    
            }
    
    </script>
    </head>
    
    <body>
    请输入你猜测得数字:<input type="text" id="inputNumber" />
    <input type="button" onclick="checkNumber()" value="猜数字" />
    
    </body>
    </html>