J2EE进阶之javascript 三

红太狼 2024-02-17 21:42 64阅读 0赞

\# **javaScript**

### JavaScript（js） ###

*  基于对象和事件驱动的脚本语言，作用客户端。
 *  特点
    
     *  交互性
     *  安全性 （不可以访问本地的硬盘）
     *  扩平台性 （浏览器可以解析js文件）
 *  javascript与java是不同 （雷锋与雷峰塔）
    
     *  Netscape（网景）livescript
     *  java诞生了（改名javascript）
 *  javascript的语言组成
    
     *  ECMAScript 标准
     *  BOM 浏览器对象模型
     *  DOM 文档对象模型
 *  JavaScript 是基于对象的，java是面向对象
 *  JavaScript只需解析就可以执行，而java需要先编译成字节码文件，再执行。
 *  JavaScript 是一种弱类型语言，java是强类型语言。

### javascript和html的结合 ###

* HTML提供的标签<script type="text/javascript">js的代码</script>    
    * 引入外部的文件
        在<script>标签通过src的属性引入外部的文件，src的值是js文件的地址
        * 如果<script>标签通过src属性引入了外部的文件，里面的js代码就不会执行。
    
    * 可以放在页面的任意位置（一般都放在body后边）

#### 实例代码 ####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        
    
         <script type="text/javascript" src="dmeo.js">
            //弹窗
            alert("呵呵");
    
         </script>
    
          <script type="text/javascript">
            //弹窗
            alert("嘿嘿");
    
         </script>
    </body>
    </html>

js代码

![SuaUUjU.jpg][]

### js的语法 ###

* 关键字
    * 标示符
    * 注释
        /*
            多行注释
        */
    
        // 单行
    
    * 变量：使用var关键字声明变量。
    * 运算符
        * 算术运算符
        alert(true + 1);    // 2
        * 0或者null代表是false，非0或者非null就是true，默认用1表示
    
        * 比较运算符
            ==      比较值
            ===     又比较值和类型

#### 变量代码示例 ####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <script type="text/javascript">
        /*  
        * js的原始数据类型
            * Undefined、Null、Boolean、Number 和 String
    
            * String        字符串类型
                * 双引号和单引号都是字符串
            * Number        数字类型
                * 不区分整数和小数
            * Boolean       布尔类型
            * Null          空（给引用赋值）
            * Undefined     未定义（声明变量，没赋值）
    
            * 定义变量  就使用一个关键字 var
    
            * 提供了一共方法 typeof()  可以变量的类型
        */
    
        var str = "abc"; //字符串
        var num = "11"; //数字类型
        var flag = true; //布尔
        var data = null;
        var un;
    
        var str2 = "bcd";
        alert(typeof(str2));
        //可以直接改变字符串类型
        var str2 = 15;
        alert(typeof(str2));
    
        </script>
    </body>
    </html>

#### 运算符代码示例 ####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <script type="text/javascript">
    
            /*
                 算术运算符
                    alert(true + 1);    // 2
                    * 0或者null代表是false，非0或者非null就是true，默认用1表示
    
                比较运算符
                    ==      比较值
                    ===     又比较值和类型
            */
    
            var num = 3710;
            // alert(num/1000*1000);        // 3710 
    
            var str = "12";
            //alert(str+1); // 121  链接字符串
    
            //alert(str - 1);   // 11   
    
            //alert("abc" - 1); // NaN
    
            //alert(true + 1);  // 2
    
            //alert(null + 1);  // 1
    
            /* if(5){
                alert("大于0以上的数字就是true");
            } */
            var n = 3;
            var m;
            m = ++n;
            //alert("m="+m+","+"n="+n);
    
            var str4 = "14";
            var num4 = 14;
            //alert(str4 == num4);
            alert(str4 === num4);
        </script>
    </body>
    </html>

### js的语句 ###

* 判断语句
                    if(8 == num){
                        赋值的问题，需要注意。
                    }else{
    
                    }
    
                * 循环语句
                    for(var i=0;i<=8;i++){
                        // 循环体
                    }
                * document对象write("字符串")
                    * 把文本的内容写在浏览器端
    
                * while(){}

#### 示例代码 ####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <script type="text/javascript">
            /* 
                * 判断语句
                    if(8 == num){
                        赋值的问题，需要注意。
                    }else{
    
                    }
    
                * 循环语句
                    for(var i=0;i<=8;i++){
                        // 循环体
                    }
                * document对象write("字符串")
                    * 把文本的内容写在浏览器端
    
                * while(){
    
                }   
    
            */
    
            for(var i=0;i<3;i++){
                //alert("i = " + i);
                window.document.write(" i = "+ i+"<br />"); //页面写内容
            }
    
    
    
        </script>
    </body>
    </html>

### 函数 ###

* java中 public String 方法名称(String str,int num){
                            方法体;
                            return null;
                        }
    
            * js中,用到关键字 function    
                        function 方法名称(str,num){     // 参数列表不能使用var关键字
                            方法体;
                            return;     // 如果没有返回值，retrun可以不写。
                        }       
            * 在方法体内存在一个数组   arguments 通过数组存储参数
    
            * js动态函数（用的不多）
                * js提供了内置的对象    Function
                * var add = new Function("","");
    
            * js匿名函数（用的较多）
                * 没有名称的函数
    
        * js的全局和局部变量
            全局变量：在script里面定义的变量，全局变量。可以在页面的任意位置拿到。
            局部变量：在方法体内部定义的变量，局部变量。

#### 函数示例代码 ####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <script type="text/javascript">
                /*
                java中   public String 方法名称(String str,int num){
                                    方法体;
                                    return null;
                                }
                js中,用到关键字 function  
                            function 方法名称(str,num){     // 参数列表不能使用var关键字
                                方法体;
                                return;     // 如果没有返回值，retrun可以不写。
                            }       
                在方法体内存在一个数组 arguments 通过数组存储参数
    
                js动态函数（用的不多）
                     js提供了内置的对象 Function
                     var add = new Function("","");
    
                js匿名函数（用的较多）
                    没有名称的函数
            */
            function add(){
                //alert("呵呵")   ;
            }
            add();
    
    
            function add2(x,y){
                //alert(arguments.length);
                 var sum = x+y;
                 return sum
            }
            var sum = add2(5,6);
            //alert(sum);
    
            var sum2 = add2(5,8,9,10);
            //alert(sum2);  //13   这是因为默认数组只取前两位
    
            //动态函数
            var param1 = "var sum;sum=x+y;return sum;";
            var param2 = "var sum;sum=x*y;return sum;";
            var param3 = "x,y";
            var add3 = new Function(param3,param1);
            //alert(add3(8,9));
    
            //匿名函数
            var add4 = function (){
                alert("haha");
            };
            add4();
    
    
        </script>
    
    
    
    </body>
    </html>

#### 局部变量和全局变量示例代码 ####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    
        <script type="text/javascript">
            /*
                全局变量：在script里面定义的变量，全局变量。可以在页面的任意位置拿到。
                局部变量：在方法体内部定义的变量，局部变量。
             */
         for(var i=0;i<4;i++){
            document.write("i = " + i+"<br />");
         }
    
            document.write(" i == " + i);
    
            function run(){
                var y = 5;
            }
            document.write(y); //报错，局部变量无法使用
    
            var x = 4;
            function show(x) {
                x = 8;
            }
            show(x);
            alert("x = " + x);
        </script>
    </body>
    </html>

### js的对象 ###

#### js的String对象 ####

##### 示例代码 #####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    
    <script type="text/javascript" src="out.js"></script>
    
    <title>Insert title here</title>
    </head>
    <body>
        <script type="text/javascript">
        /* 
                * js的String对象
                    * var str = "abc";
                    * var str = new String("abc");
    
                    * 属性：length 字符串的长度
                    * 方法
                        * 和HTML相关的
                            * bold()            粗体显示字符串
                            * fontcolor(color)  设置字体的颜色
                            * fontsize(size)    设置字体的大小
                            * italics()         斜体显示
                            * link(url)         设置链接
                            * sup()             上标
    
                        * 和java中String对象类似的方法（*****）
                            * charAt(index)     返回指定位置的字符
                            * indexOf(searchvalue,fromindex)    检索字符串
                            * lastIndexOf()         从后向前的
                            * replace()             替换字符串
                            * substring(start,stop)     从哪开始，到哪结合（包含开始不包含结束）
                            * substr(start,length)      从哪开始，截取长度
    
        */
    
            var str = "abc";
            //alert(str.length);
            //对document.write封装
            println(str);
    
            //println(str.charAt(2));
            //println(str.indexOf("f"));
            //var str2 = str.replace("bc", "ef");
            //println(str2);
    
            println(str.substring(1, 3));   
            println(str.substr(1,3));   
            //bold()    粗体显示字符串
            println(str.bold());
            //document.write(mybold(str));
            function mybold(s){
                var result = "<b>"+s+"</b>";
                return result;
            }
            //println(str.fontcolor("red"));
            //println(str.link("http://www.baidu.com"));
    
            //println(3+"2".sup());
    
        </script>
    </body>
    </html>

##### 输出代码println.js #####

![mQOEmlD.jpg][]

#### js的Array对象 ####

* js的数组
        * var arr = [2,3,4];
        * var arr = new Array(5);   数组长度是5
        * var arr = new Array(5,6); 数组元素是5,6
    
        * 数组的长度
            * length
        * 数组的长度是可变的
    
        * 方法
            * concat()  链接数组或者元素都可以
            * join(separator)   转化成字符串
            * pop()     删除并返回最后一个元素
            * push()    向末尾添加一个元素，返回新的长度

##### 示例代码 #####

#### Date对象 ####

##### 示例代码 #####

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="out.js"></script>
    <title>Insert title here</title>
    </head>
    <body>
    </body>
    
        <script type="text/javascript">
            /* 
                * Date对象
                    * var date = new Date();    当前的时间
    
                    * toLocaleString()  根据本地的日期格式转化成字符串
    
                    * getDate() 返回一个月中的某一天
                    * getDay()  返回一周中的某一天（0-6）
                    * getMonth()    获取月份（0-11）
                    * getFullYear() 获取年
    
                    * getTime()     获取毫秒数
                    * setTime()     通过毫秒数设置日期
    
                    * Date.parse(datestring)    解析字符串，返回毫秒数
                        * 2014-11-2 解析不了
                        * 11/11/2014
                        * 2014,11,11
            */
            var date = new Date();
            /* println(date);
    
            println(date.toLocaleString());
            println(date.toLocaleDateString());
            println(date.toLocaleTimeString()); */
    
            var monthday = date.getDate();
            var weekday = date.getDay();
            var month = date.getMonth()+1;
            var year = date.getFullYear();
    
            println(year+"-"+month+"-"+monthday+" "+getWeek(weekday));
    
            function getWeek(num){
                var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
                return arr[num];
            }
    
            // 1414916247532
            var m = date.getTime();
            //println(m);
    
            var date2 = new Date();
            date2.setTime(1414916247532);
            println(date2.toLocaleString());
    
            var date3 = new Date(1414916247532);
            println(date3.toLocaleString());
    
            var str = "11/11/2014";
            var mm = Date.parse(str);
            var date4 = new Date(mm);
            println(date4.toLocaleString());
    
        </script>
    </html>

#### Math对象 ####

ceil(x)     上舍入
                floor(x)    下舍入
                round(x)    四舍五入
    
                * random()

##### 示例代码 #####

#### RegExp对象 ####

* var reg = new RegExp("表达式");  （开发中不常用）
                * var reg = /^表达式$/（*****）             （开发中常用）
    
                * exec(string)  （开发中不使用）
                * test(string)（*****）   （经常使用）
    
                * reg.exec("12345");        返回匹配的内容，返回null
                * reg.test("12345");        返回true或者false
    
                总结： var reg = /^表达式$/  ，调用exec("12345678")返回匹配的内容，返回null或者test返回true或者false。
                        var reg = new RegExp("表达式");，调用exec("12345678")，返回12345
    
                if(reg.test("12345")){
                    // 
                }else{
                    // 
                }

#### 全局函数 ####

* 游离的函数，直接拿过来用。
        * eval()    可以解析字符串，执行里面的javascript的代码
        * isNaN()   
        * encodeURI()   编码
        * decodeURI()   解码

##### 示例代码 #####

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    
        <form>
            <input type="text" />
        </form>
    
    </body>
    
        <script type="text/javascript">
            /* 
                全局函数
                    * eval()    可以解析字符串，执行里面的javascript的代码
                    * isNaN()   
                    * encodeURI()   编码
                    * decodeURI()   解码
            */
    
            var str = "alert('hehe');";
            // alert(str);
    
            // eval(str);
    
            // alert(isNaN("abc" - 1));
    
            var str2 = "abc张三";
            var str3 = encodeURI(str2);
            alert(str3);
    
            var str4 = decodeURI(str3);
            alert(str4);
    
        </script>
    </html>

### BOM ###

* BOM   （Browser Object Model）  浏览器对象模型
    
            * Window            窗口对象（*****）
            * Navigator         和浏览器版本相关（**）
            * Screen            和屏幕相关（不看）
            * History           和历史相关（**）
            * Location          和链接相关（***）

#### 示例代码 ####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    
    
        <input type="button" value="我是按钮" onclick="run()" />
    
    </body>
    
        <script type="text/javascript">
            /*
                绑定事件onclick
                * Navigator 
                * userAgent 获取浏览器的版本信息
             */
    
             function run(){
                //alert("呵呵");
    
                alert(navigator.userAgent);
            }
    
    
        </script>
    </html>

[SuaUUjU.jpg]: http://i.imgur.com/SuaUUjU.jpg
[mQOEmlD.jpg]: http://i.imgur.com/mQOEmlD.jpg