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: 

               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>

3 javascript的更多相关文章

JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
探究javascript对象和数组的异同，及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
JavaScript自定义浏览器滚动条兼容IE、火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
JavaScript进阶之路（一）初学者的开始
一:写在前面的问题和话一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

c# 客户端
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
MyBatis 3与spring整合之使用SqlSession
SqlSessionTemplate是MyBatis-Spring的核心.这个类负责管理MyBatis的SqlSession.调用MyBatis的SQL方法. SqlSessionTemplate是线 ...
ContentProvider官方教程(11)Calendar Provider、Contacts Provider、Storage Access Framework
Calendar Provider: guide/topics/providers/calendar-provider.html Contacts Provider: guide/topics/pro ...
.Net用户控件
用户控件用户控件是个什么东西?自定义的反复重用的控件集合好处?1.代码重用2.结构良好3.分工开发4.局部缓存难点:一.交换信息: 注意信息的交换只在相邻层之间进行交换,如果是嵌套交换信息除Ses ...
利用jdbc处理oracle大数据---大文件和二进制文件
一.Oracle中大数据处理在Oracle中,LOB(Large Object,大型对象)类型的字段现在用得越来越多了.因为这种类型的字段,容量大(最多能容纳4GB的数据),且一个表中可以有多个这种 ...
BZOJ 2879 美食节（费用流-动态加边）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2879 题意:有n道菜,每道菜需要b[i]份,m个厨师,第j个厨师做第i道菜需要时间a[i ...
ASP.NET API盘点
1.控制只返回JSON一种数据 public class JsonContentNegotiator : IContentNegotiator { private readonly JsonMedia ...
DevExpress Crack
开发者论坛 DevExpressComponents-16.1.6.16270.exe http://www.dxper.net/thread-7440-1-1.html http://www.dxp ...
Creating Dynamic LOV in Oracle D2k Forms
Dynamic Lov is a good idea for the form where too many Lov requirement is there with different recor ...
51NOD1433] 0和5（数论，规律）
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1433 数论关于3的倍数有一个推论,就是能被9整除的数的各位和都 ...

3 javascript

3 javascript的更多相关文章

随机推荐

热门专题