3 javascript

javascript基础

html: 负责了一个页面的结构.
   css: 负责了一个页面的样式。
   javascript： 负责与用户进行交互。

1997年欧洲的计算机协议（ECMA）组织出来给javascript规定协议。
    1. ECMAScirpt(规范了基本的语法而已)
    2. BOM （浏览器对象模型）
    3. DOM  (文档对象模型)
 
javascript的特点：    
    1. 跨平台
    2. 安全性。 （javascript的代码不能直接访问硬盘的内容）

javascript与java之间区别 ：
    1. javascript是属于网景公司产品， java是sun公司的产品。
    2. javascript是基于对象的语言，java是面向对象的语言。
    3. javascript是解释型语言，java是解释、编译型语言。
    4. javascript是弱类型语言， java 是强类型语言。
    
    java中声明变量 的时候必须要明确该变量的数据类型。
    javascript声明变量不需要明确是何种数据类型， 任何的变量都是使用一个关键字var去声明即可。
 
如何编写javascript的代码。
    
    方式1：可以使用<script>标签体内进行编写。
    
        格式：
            <script type="text/javascript">
                    js代码;;
            </script>    
    
    方式2：引入外部的javascript文件。
    
        格式：    
            <script src="1.js" type="text/javascript"></script>
            
        注意：
            1.<script>是有开始标签与结束标签的，千万不要在一个标签中结束了。
            2.如果<script>已经用于引入了js文件，那么该<script>标签体就不能再写js代码了，

javascript常用的函数：
    
    alert("显示的内容..") ; 弹出框    
    
    document.write("数据") ; //向页面输出数据...
 
页面的注释：
    
    html <!--  注释的内容
    
    css的注释  /* 注释的内容*/  
    
    javascript：  //注释的内容  单行注释          /* 注释的内容*/ 多行注释

Code 第一个javascript程序

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            alert("呵呵");
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

Code 引用外部javascript文件

1.js

/* JavaScript Document*/
document.write("这个是我第一个javascript的代码");

html文件

<!DOCTYPE html>
<html>

    <head>
        <script src="js/1.js" type="text/javascript">
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

变量声明

javascript的变量声明：
    格式：
        var 变量名 = 数据;
    声明变量要注意的事项：
        1. 在javascript中声明变量是 使用var关键字声明的，javascript中的变量可以存储任意的数据类型数据.
        2. javascript中变量数据类型是根据存储的值决定的，可以随时更改存储数据的类型。
        3. 定义了多个同名的变量是，后定义的同名变量是覆盖前面定义的同名变量。
        4. 声明变量的时候可以省略var关键字，但是不建议省略。
javascript的数据类型：
    typeof 查看变量的数据类型。
    使用格式： 
            typeof 变量名       
javascript的数据类型：
    number 小数与整数
    string 字符串 注意： javascript中没有字符的概念，只有字符串，字符串可以写在单引号或双引号中。
    boolean 布尔数据类型，
    undefined  undefined代表该变量没有定义。

Code

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            document.write("10数据类型是" + (typeof 10) + "<br/>");
            document.write("3.14数据类型是" + (typeof 3.14) + "<br/>");
            document.write("a数据类型是" + (typeof ‘abc‘) + "<br/>");
            document.write("abc数据类型是" + (typeof "abc") + "<br/>");
            document.write("abc数据类型是" + (typeof true) + "<br/>");
            document.write("a变量数据类型是" + (typeof a) + "<br/>");
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

字符串转数字

字符串转数字
        parseInt()  可以把一个字符串转换成整数。
        parseFloat() 可以把一个字符串转换成小数。

javascript提供一个IsNaN的方法让我们判断该字符串是否是 一个数字。
      is not a muber  不是一个数字。
      不是一个数字返回true，是一个数字返回false.

Code

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            var a = "12";
            a = 12.64;
            a = "123abc123"; /* parseInt方法如果接收的字符串含有非数字的字符，那么parseInt方法会从字符串的首个字符开始寻找，一直找到非数字字符为止，然后就使用前面的数字字符转换成数字， */
            a = "a123"; // NaN not a number(不是一个数字)
            a = "012"; /* 12 如果首位是0，那么就想祛除0再进行转换。*/
            a = "0x10"; /* 如果一个字符串是以0x开头，那么会把字符串中的内容当成十六进行的数据处理的。 */
            var b = parseInt(a);
            document.write("结果：" + b + "<br/>");
            var c = "3.14";
            c = "10"; // 如果是一个字符串是整数的，那么使用parseFloat还是转换 成整数 。
            c = "100a";
            c = "abc123";
            c = parseFloat(c);
            document.write("结果：" + c + "<br/>");
            document.write(isNaN("123") + "<br/>");
            document.write(isNaN("abc123"));
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

运算符和流程控制语句

运算符:    
        +(加法、正数、 连接符)
        
        true 是1. false是0

var a = 1;
    document.write((1+true)+"<br/>");
    document.write((1+false)+"<br/>");
    document.write("hello"+1); // hello1
    
    除法：

var a = 10;
    var b = 3;
    document.write("除法运算是："+(a/b)+"<br/>"); //如果两个整数相除不能整数的时候结果还是小数。

比较运算符
   
字符串与字符串的比较规则是：
    
    情况1： 能找到对应位置上的不同字符，那么就比较第一个不同字符的大小。
    
    情况2： 不能找到对应位置上的不同字符，这时候比较的是两个字符串的长度。

document.write("10大于3吗？"+(10>3)+"<br/>");
    document.write("10字符串大于3字符串吗？"+("190">"19")+"<br/>"); //字符串与字符串比较
    document.write("10大于字符串9吗？"+( 10 > "9")+"<br/>"); /* 字符串还可以与数字进行比较。  凡是数字与字符串 进行比较，会先把字符串转换成数字再进行比较 的。

逻辑运算符:

//没有单与的。
    document.write((true&&true)+"<br/>");
    document.write((true&&false)+"<br/>");
    document.write((false&&true)+"<br/>");
    document.write((false&&false)+"<br/>");

document.write((true||true)+"<br/>");
    document.write((true||false)+"<br/>");
    document.write((false||true)+"<br/>");
    document.write((false||false)+"<br/>");

三目运算符

布尔表达式?值1:值2;

Code

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            var age = 10;
            document.write(age > 18 ? "成年人" : "未成年人");
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

控制流程语句

if语句
    
    格式：
        if(判断条件){
            符合条件执行的代码    
        }    
    
    if语句的特殊之处：
        1. 在javascript中的if语句条件不单止可以写布尔表达式，还可以写任何的数据。
        
        number  非0为true, 0为false.
        string  内容不能空是true， 内容空的时候是false。
        undefined：false
        NaN:    false

var workAge = 0;
    var str ="";
    var b;
    if(b){
        document.write("明天过来面试！！");
    }else{
        document.write("不要在投我们公司了，不要你！");    
    }

选择语句：
    switch语句
    
        switch(变量){
            case 值1:&nbsp;
                
                break;
            case 值2：
                
                break;
            case 值3:
                
                break;
                
            .....
                
            default：
                
                break;
            
        }
        
    特殊之处：
        1.     在javascript中case后面可以跟常量与变量还可以跟表达式。

Code

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            var option = "A";
            var a = "A";
            var score = 98;
            switch (option) {
                case score >= 90 ? "A":
                    "B" :
                    document.write("java");
                    break;
                case "B":
                    document.write("ps");
                case "C":
                    document.write("javascript");
                    break;
                case "D":
                    document.write("C++");
                    break;
            }
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

循环语句

switch

switch语句的特殊之处: case后面可以跟常量与变量或者是表达式。

循环语句：
    
    while
        
        格式：
            while(判断的条件){
                循环体内容    
            }
           
    var count = 0 ;
    while(count<5){
        document.write("hello world<br/>");
        count++;
    }

需求： 计算1~100的总和。

var num = 1;
    var result = 0;
    while(num<=100){
        result +=num;    
        num++;
    }
    
    document.write("结果："+result);

do-while循环语句

do{
        循环语句；
    }while(判断条件);
    
需求；计算1~100奇数的总和。

var num = 1;
    var result = 0;
    do{
        if(num%2!=0){
            result +=num;
        }
        num++;
    }while(num<=100);

document.write("结果："+result);

for循环语句:
    
    格式：
        for(初始化语句; 判断的条件 ; 循环后的语句){
            循环体语句；    
        }
 Code

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
             //需求；计算1~100偶数的总和
            var result = 0;
            for (var i = 1; i <= 100; i++) {
                if (i % 2 == 0) {
                    result += i;
                }
            }
            document.write("结果：" + result);
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

循环语句练习

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
             //需求1：显示"*"为正方形，5行5列。
            for (var i = 0; i < 5; i++) { // 控制行数
                for (var j = 0; j < 5; j++) { //控制列数
                    document.write("*&nbsp;");
                }
                //换行
                document.write("<br/>")
            }
            document.write("<hr/>")
                /*
                输出一个直角三角形

                *
                **
                ***
                ****
                *****

                */
            for (var i = 0; i < 5; i++) {
                for (var j = 0; j <= i; j++) {
                    document.write("*&nbsp;");
                }
                document.write("<br/>");
            }
            document.write("<hr/>")
                //打印九九乘法表
            for (var i = 1; i <= 9; i++) {
                for (var j = 1; j <= i; j++) {
                    document.write(i + "*" + j + "=" + (i * j) + "&nbsp;&nbsp;");
                }
                document.write("<br/>");
            }
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

for in语句

for-in语句：

for-in语句的格式：
        
        for(var 变量名 in 遍历的目标){
            
        }

for-in语句的作用：
    1. 可以用于遍历数组的元素。  注意： 使用for-in语句遍历数组元素的时候遍历出来是数组的下标。
    
    2. 可以用于遍历对象的所有属性数据。 注意： 使用for-in语句遍历对象的属性的时候，遍历出来的是对象的属性名。

Code

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            var arr = [12, 13, 19, 15, 16];
            for (var index in arr) {
                document.write(arr[index] + ",");
            }

            function Person(id, name) {
                    this.id = id;
                    this.name = name;
                }
                //创建一个对象
            var p = new Person(110, "狗娃");
            for (var property in p) {
                document.write(p[property] + ",");
            }
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

with语句

with语句:有了 With 语句，在存取对象属性和调用方法时就不用重复指定对象。
    格式：
        with(对象){               
        }

Code

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            with(document) {
                for (var i = 0; i < 5; i++) {
                    for (var j = 0; j <= i; j++) {
                        write("*&nbsp;");
                    }
                    write("<br/>");
                }
                write("<hr/>");
            }

            function Person(id, name) {
                    this.id = id;
                    this.name = name;
                }
                //创建一个对象
            var p = new Person(110, "狗娃");
            with(p) {
                document.write("编号：" + p.id);
                document.write("姓名：" + name);
            }
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

函数的定义格式：
    
    function 函数名(形参列表){
        函数体 ;    
    }

javascript的函数要注意的细节：
    1. 在 javascript中函数 定义形参时是不能使用var关键字声明变量 的。
    2. 在javascript中 的函数是没有 返回值类型 的，如果函数需要返回数据给调用者，直接返回即可，如果不需要返回则不返回。
    3. 在 javascript中是没有函数 重载 的概念 的，后定义的同名函数会直接覆盖前面定义同名函数。
    4. 在javascript中任何的函数内部都隐式的维护了一个arguments（数组）的对象，给函数 传递数据的时候，是会先传递到arguments对象中，
    然后再由arguments对象分配数据给形参的。

Code

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            function add(a, b) {
                var sum = a + b;
                document.write("两个参数的总和：" + sum);
                //return sum;
            }
            add(11, 21);

/*            function add() {
                    document.write("长度：" + arguments.length + "<br/>");
                    for (var index = 0; index < arguments.length; index++) {
                        document.write(arguments[index] + ",");
                    }
                    //var sum  = a+b+c;
                    //var sum = 0;
                    //document.write("三个参数的总和："+ sum);
                }
                //调用函数
            add(11, 21, 13, 14);*/
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

字符串

var str1 = new String("hello");
    var str2 = new String("hello");
    document.write("两个字符串的对象一样吗？"+(str1.toString()==str2.toString()));

创建一个字符串的方式：
方式1：
    new String("字符串的内容");
    
方式2：
    var str = "字符串的内容";

字符串常用的方法：
    anchor（）   生产锚点
    blink（）     为元素添加blink标签
    charAt()     返回指定索引位置处的字符。
    charCodeAt() 回一个整数，代表指定位置上字符的 Unicode 编码。
    fontcolor()  把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端
    indexOf()    返回 String 对象内第一次出现子字符串的字符位置
    italics()    把 HTML <I> 标记放置在 String 对象中的文本两端。
    link()         把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
    replace()      返回根据正则表达式进行文字替换后的字符串的复制
    split()        切割  
    Substr()       截取子串
    toUpperCase()  转大写
    toLowerCase    转小写

Code

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            document.write("第五章".anchor("five") + "<br/>");
            document.write("第五章".blink() + "<br/>");
            document.write("abc".charAt(1) + "<br/>");
            document.write("abc".charCodeAt(1) + "<br/>"); //chatCodeAt返回的是索引值对应的字符的码值。
            document.write("第六章".fontcolor("red") + "<br/>"); //fontcolor() 给字符串添加font标签，然后设置color的属性值。
            document.write("abchellohehehello".indexOf("hello") + "<br/>"); //返回指定字符串第一次出现的索引值。
            document.write("第五章".italics() + "<br/>"); //给文本添加一个i标签，把文本内容设置成斜体。
            document.write("百度".link("http://www.baidu.cn") + "<br/>"); // 给文本添加一个a标签，
            document.write("明天我们讲xml".replace("xml", "DOM编程") + "<br/>"); // 给文本添加一个a标签，
            var str = "我们-大家-好";
            var arr = str.split("-");
            for (var index = 0; index < arr.length; index++) {
                document.write(arr[index] + ",");
            }
            document.write("<br/>");
            document.write("abc".toUpperCase() + "<br/>"); //转大写
            document.write("ABC".toLowerCase() + "<br/>"); //转小写
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

日期对象（Date）

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            var date = new Date(); //获取到当前的系统时间
            document.write("年：" + date.getFullYear() + "<br/>");
            document.write("月：" + (date.getMonth() + 1) + "<br/>");
            document.write("日：" + date.getDate() + "<br/>");
            document.write("时：" + date.getHours() + "<br/>");
            document.write("分：" + date.getMinutes() + "<br/>");
            document.write("秒：" + date.getSeconds() + "<br/>");
             //xxxx年yy月dd日  hh:mm:ss
            document.write("当前时间是：" + date.toLocaleString()+ "<br/>");
            document.write("当前时间是：" + date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " +
                date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
        </script>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

    </body>

</html>

当前系统时间

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        当前系统时间：<span id="time"></span>
    </body>

    <script type="text/javascript">
        function getCurrentTime() {
            //获取到当前的系统时间
            var date = new Date();
            //把当前系统时间拼装成我指定的格式。
            var timeInfo = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " +
                date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
            //找span对象
            var spanObj = document.getElementById("time");
            //设置span标签体的内容
            spanObj.innerHTML = timeInfo.fontcolor("red");
        }
        getCurrentTime();
         //定时方法.
        window.setInterval("getCurrentTime()", 1000); /* setInterval   定时方法，第一个参数要指定调用的代码，第二参数是每隔指定的毫秒数调用指定的代码。*/
    </script>

</html>

Number对象。
    
创建Number对象的方式：    
    
    方式1：
        var 变量=  new Number(数字)    
        
    方式2：  
        var 变量 = 数字;    
        
常用的方法：    
    toString()  把数字转换成指定进制形式的字符串。
    toFixed()   指定保留小数位,而且还带四舍五入的功能。

Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <script type="text/javascript">
        var num = 10; // 十进制
        document.write("十进制：" + num.toString() + "<br/>");
        document.write("二进制：" + num.toString(2) + "<br/>");
        document.write("八进制：" + num.toString(8) + "<br/>");
        document.write("十六进制：" + num.toString(16) + "<br/>");
        document.write("三进制：" + num.toString(3) + "<br/>"); // 101
        var num2 = 3.455;
        document.write("保留两位小数:" + num2.toFixed(2))
    </script>

    <body>

    </body>

</html>

Math对象常用的方法：

ceil         向上取整
 floor（）   向下取整
 random()  随机数方法 //  产生的伪随机数介于 0 和 1 之间（含 0，不含 1），
 round     四舍五入

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <script type="text/javascript">
        document.write("向上取整：" + Math.ceil(3.14) + "<br/>");
        document.write("向下取整：" + Math.floor(3.14) + "<br/>");
        document.write("随机数：" + Math.random() + "<br/>");
        document.write("四舍五入：" + Math.round(3.75) + "<br/>");
    </script>

    <body>

    </body>

</html>

Array数组对象:
    创建数组的方式1：
        var 变量名 = new Array();  创建一个长度为0的数组。
    
    方式2：
        var 变量名= new Array(长度) 创建一个指定长度的数组对象。
        
    方式3：
         var 变量名 = new Array("元素1","元素2"...);  给数组指定元素创建数组 的对象。
        
    方式4：
        var 变量名 = ["元素1","元素2"...];

数组要注意的细节：
    1.  在javascript中数组的长度是可以发生变化的。

Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <script type="text/javascript">
        var arr = new Array(3); //创建了一个长度为0的数组对象。
        arr[100] = 10;
        document.write("arr长度：" + arr.length + "<br/>");
        var arr2 = new Array("狗娃", "狗剩", "铁蛋");
        arr2 = ["狗娃", "狗剩", "铁蛋", "张三"];
        document.write("arr2长度：" + arr2.length + "<br/>");
    </script>

    <body>

    </body>

</html>

数组常用方法

　　arr1 = arr1.concat(arr2); //concat把arr1与arr2的数组元素组成一个新的数组返回。
      for(var index in arr1){
        document.write(arr1[index]+",");    
      }

var elements = arr1.join(","); // join使用指定的分隔符把数组中的元素拼装成一个字符串返回。
    document.write("数组的元素："+elements);
    
    
    pop ：移除数组中的最后一个元素并返回该元素。
    
    document.write("删除最后的一个元素并返回："+arr1.pop()+"<br/>");
    
    arr1.push("永康"); // 将新元素添加到一个数组中，并返回数组的新长度值。
    
    arr1.reverse(); //翻转数组的元素
    
    document.write("删除第一个元素并返回："+arr1.shift()+"<br/>"); //移除数组中第一个元素，并且返回。
    
    
    var subArr = arr1.slice(1,2); //指定数组 的开始索引值与结束索引值截取数组的元素，并且返回子数组。
    document.write("子数组的元素："+subArr.join(",")+"<br/>");

arr1 = [19,1,20,5];
    arr1.sort(sortNumber);  //排序，排序的时候一定要传入排序的方法。
    
    function sortNumber(num1,num2){
        return num1-num2;
    }
    
        
    arr1.splice(1,1,"张三","李四","王五"); //第一个参数是开始删除元素的 索引值， 第二参数是删除元素的个数，往后的数据就是插入的元素。

Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <script type="text/javascript">
        var arr1 = ["狗娃", "狗剩", "铁蛋"];
        var arr2 = ["永康", "才厚"];

        document.write("数组的元素："+arr1.join(","));
    </script>

    <body>

    </body>

</html>

自定义对象:

在javascript没有类的概念，只要有函数即可创建对象。

自定义对象的方式1： 使用无参的函数创建对象。
    
    例子：
        
        function Person(){}
        var p = new Person(); //创建了一个Person对象了
        p.id = 110;
        p.name = "狗娃";
    
    方式2：使用带参的函数创建对象。
        
        function Person(id,name){
            this.id = id;
            this.name = name;    
            this.say = function(){
                alert(name+"呵呵");    
            }
        }
    
        var p = new Person(110,"狗剩");    //创建对象

方式3： 使用Object函数创建对象
        
        var p = new Object();
        p.id = 110;
        p.name = "铁蛋";
    
    方式4：使用字面量的方式创建.
        
        var p = {
            id:110,
            name:"狗娃",
            say:function(){
                alert(this.name+"呵呵");    
        }    
    }

Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <script type="text/javascript">
        var p = {
            id: 110,
            name: "狗娃",
            say: function() {
                alert(this.name + "呵呵");
            }
        }
        document.write("编号：" + p.id + " 姓名：" + p.name);
        p.say();
    </script>

    <body>

    </body>

</html>

自定义数组工具对象

ArrayTool.js

/*
需求：编写一个js文件，在js文件中自定义一个数组工具对象，
该工具对象要有一个找到最大值的方法，与找元素对应的索引值的方法。
*/

//创建ArrayTool的对象

var tool = new ArrayTool();

function ArrayTool(){

    //找最大值
    this.getMax = function(arr){
        var max = arr[0];
        for(var i = 1 ; i<arr.length ;i++){
            if(arr[i]>max){
                max = arr[i];
            }
        }
        return max;
    }

    //找元素 的索引值
    this.searchEle = function(arr,target){
        for(var i = 0 ; i<arr.length  ; i++){
            if(arr[i] ==target){
                return i;
            }
        }
        return -1;
    }

}

html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <script src="js/ArrayTool.js" type="text/javascript"></script>
    <script type="text/javascript">
        var arr = [12, 15, 9, 4];
        var max = tool.getMax(arr);
        document.write("最大值：" + max + "<br/>");
        var index = tool.searchEle(arr, 9);
        document.write("找到的索引值是：" + index);
    </script>

    <body>

    </body>

</html>

Prototype

需求：想把getMax与searchEle方法添加 到数组对象中。

functoin Array(){
        this.prototype = new Object();    
        
        this.getMax = function(){
        
        }
    }    
Prototype注意的细节：
    1.    prototype是函数(function)的一个必备属性(书面一点的说法是"保留属性")(只要是function,就一定有一个prototype属性)
    2.    prototype的值是一个对象
    3.    可以任意修改函数的prototype属性的值。
    4.    一个对象会自动拥有prototype的所有成员属性和方法。

Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <script type="text/javascript">
        Array.prototype.getMax = function() {
            var max = this[0];
            for (var index = 1; index < this.length; index++) {
                if (this[index] > max) {
                    max = this[index];
                }
            }
            return max;
        }
        Array.prototype.searchEle = function(target) {
                for (var i = 0; i < this.length; i++) {
                    if (target == this[i]) {
                        return i;
                    }
                }
                return -1;
            }
            //var arr = new Array(12,4,17,9);
        var arr = [12, 4, 17, 9];
        var max = arr.getMax();
        var index = arr.searchEle(9);
        document.write("最大值：" + max + "<br/>");
        document.write("索引值：" + index + "<br/>");
    </script>

    <body>

    </body>

</html>

Prototype应用

给字符串对象添加一个toCharArray的方法，然后再添加一个reverse(翻转)的 方法

Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <script type="text/javascript">
         //把 字符串转换成字符数组
        String.prototype.toCharArray = function() {
            var arr = new Array();
            for (var index = 0; index < this.length; index++) {
                arr[index] = this.charAt(index);
            }
            return arr;
        }
        String.prototype.reverse = function() {
            //想把字符串转换成字符数组
            var arr = this.toCharArray();
            arr.reverse();
            return arr.join("");
        }
        var str = "你们厉害啊";
        var charArr = str.toCharArray();
        document.write("数组的元素：" + charArr.join(","));
        str = str.reverse();
        document.write("<br/>翻转后的字符串：" + str);
    </script>

    <body>

    </body>

</html>
时间： 2024-10-11 12:09:54

3 javascript的相关文章

Javascript中call的使用

call 方法应用于:Function 对象调用一个对象的一个方法,以另一个对象替换当前对象.call([thisObj[,arg1[, arg2[,   [,.argN]]]]])参数:thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明:call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.如果没有提供 thisObj 参数,那么 G

你不知道的javascript 之 &gt;&gt;

?远大于符号 在数学公式中,">>"代表远大于符号,表示一个数远大于另一个数,如76>>3,-2>>-99等.庞加莱与波莱尔1901年首先使用了它,很快被数学界所接受,沿用至今. 折叠编辑本段右移运算符 在许多计算机编程语言(例如:C语言.C++语言.Java语言.JavaScript语言.Pascal语言等)中,">>"代表右移运算符,就相当于"shr".该运算符为双目运算符,结合方向为从左到右,

初识JavaScript

JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能.因为JavaScript兼容于ECMA标准,因此也称为ECMAScript. ECMAScript,描述了该语javascript组成言的语法和基本对象. 文档对象模型(DOM),描述处理网页内容的方法

最全解析如何正确学习JavaScript指南，必看！

划重点 鉴于时不时,有同学私信问我:怎么学前端的问题.这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了. "前端怎么学"应该因人而异,别人的方法未必适合自己.就说说我的学习方法吧:我把大部分时间放在学习js上了.因为这个js的学习曲线,先平后陡.项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题.我是怎么学的呢,看书,分析源码.个人这几天统计了一下,前端书籍目前看了50多本吧,大部分都是js的.市面上的书基本,差不多都看过. 第一个问题:看书有啥好处

JavaScript数据类型检测

一.JavaScript 数据类型 1.基本数据类型(6种) Undefined Null Boolean Number String Symbol (ES6新增) 2.引用数据类型: Object 二.数据类型检测 1. typeof 可以检测除null 外的基本类型.null 和所有对象的typeof都是"object", 不能用于检测用户自定义类型. 比如Date, RegExp, Array, DOM Element的类型都是"object". var s

JavaScript的进阶之路（二）函数简介，变量、作用域和内存问题

<h3>ECMAScript中函数不存在函数签名的概念,没有重载</h3><h3>无需指定返回值,可以在任何时候返回任何值.未指定返回值的函数,返回的是一个特殊的undefined值</h3> <script type="text/javascript"> function sayHi(){ console.log("Hi"); }; sayHi(); function sayName(name,age){

JavaScript 二进制的 AST

本文和大家分享的主要是javascript中二进制的 AST相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 背景介绍 多年来,JavaScript 已经从最慢的脚本语言之一,从老爷车发展为兰博基尼,不管是通过 Web 浏览器还是其他环境.它都能够快到可以运行桌面.服务器.移动甚至嵌入式应用程序. 随着 JavaScript 的增长,应用程序的复杂程度和规模都越来越复杂.然而,二十年前,少数使用过 JavaScript 的网站也就加载几千字节的 JavaScript,许多网站

JavaScript 对象

JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... 此外,JavaScript 允许自定义对象. JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 建 JavaScript 对象 通过 JavaScript,您能够定义并创建自己的对象. 创建新对象有两种不同的方法: 定义并创建对象的实例 使用函数来定义对象,然后创建新的对象实例

实现一个函数clone，使JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制. 1 /** 对象克隆 2 * 支持基本数据类型及对象 3 * 递归方法 */ 4 function clone(obj) { 5 var o; 6 switch (typeof obj) { 7 case "undefined": 8 break; 9 case "string": o = obj + &q

javascript的优美与鸡肋

--总结来自:<javascript语言精粹> 任何语言都有其优美的地方和其鸡肋的地方.避归一些语言的糟粕,能相应的降低bug出现的几率. 优美处: 函数是头等对象 基于原型继承的动态对象 对象字面量和数组字面量 糟粕: 1. 全局变量 全局变量有三种表达方式: var声明:var foo = value; 添加属性到全局对象上,即添加到window上:window.foo = value; 未经声明的变量:foo = value; 虽然变量可以未经声明就使用,但是这会导致后期的很多的bug出