JavaScript知识5

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

  <script>

        /**

         * 判断指定年份是否为闰年

         * 参数 year：待判断的年份

         * 返回值：true，表示是闰年，false，表示非闰年

         */

        function isRun(year){

            if(year%4==0&&year%100!=0||year%400==0){

                return true;

            }else{

                return false;

            }

        }

        function calDate(){

            var year = Number(prompt("请输入年:"));

            var month = Number(prompt("请输入月:"));

            var day = Number(prompt("请输入日:"));

            var totalDays = 0;//天数累加变量

            //1、计算从1900年开始，到year-1年共有多少天

            for(var i=1900;i<year;i++){

                //判断 i 年是否为闰年

                if(isRun(i)){

                    totalDays += 366;

                }else{

                    totalDays += 365;

                }

            }

            //2、累加当前年从1月开始到month-1月的天数

            for(var i=1;i<month;i++){

                switch(i){

                    case 1:

                    case 3:

                    case 5:

                    case 7:

                    case 8:

                    case 10:

                        totalDays += 31;

                        break;

                    case 4:

                    case 6:

                    case 9:

                    case 11:

                        totalDays += 30;

                        break;

                    case 2:

                        if(isRun(year)){

                            totalDays += 29;

                        }else{

                            totalDays += 28;

                        }

                        break;

                }

            }

            //3、累加 day 到 totalDays 后

            totalDays += day;

            //4、结果 1-6，星期一-星期六，0，星期日

            var date = totalDays % 7;

            var msg = year+"年"+month+"月"+day+"日是星期";

            switch(date){

                case 1:

                    msg += "一";

                    break;

                case 2:

                    msg += "二";

                    break;

                case 3:

                    msg += "三";

                    break;

                case 4:

                    msg += "四";

                    break;

                case 5:

                    msg += "五";

                    break;

                case 6:

                    msg += "六";

                    break;

                case 0:

                    msg += "日";

                    break;

            }

            console.log(msg);

        }

    </script>

    <button onclick="calDate()">日期计算器</button>

 </body>

</html>

一，函数：
　　由ES提供的函数
　　在网页中无需声明，就可以直接使用
　　已学：parseInt() / parseFloat() / Number()

1、isNaN(value)
　　判断value是否为非数字
　　　　true:不是数字
　　　　false:是数字
2、eval()
　　执行由字符串来表示的JS代码

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

  <script>

        function runJS(){

            var input = prompt("请输入一段JS代码:");

            eval(input);

        }

    </script>

    <button onclick="runJS()">运行JS</button>

 </body>

</html>

二、局部变量与全局变量

1、全局变量
　　一经声明后，在JS的任何位置处都能使用的变量就是全局变量

（1）、
<script>
var uname = "sanfeng.zhang"; //全局变量
function show(){
console.log(uname); //输出 sanfeng.zhang
}
</script>

（2）、
<script>
function show(){
uname = 'sf.zh';//全局变量,容易出问题
}
</script>

推荐：
　　全局变量声明的时候：
　　　　1、使用 var 关键字
　　　　2、一律放在<script>中，所有function之外
2、局部变量
　　使用var关键字，并且声明在 function 中的变量就是局部变量；
　　局部变量的作用域只在声明的函数内，出了函数就不能使用；

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

  <script>

        function show(){

            uname = "sanfeng.zhang";

            console.log("show:"+uname);

        }

        function print(){

            console.log("print:"+uname);

        }

    </script>

    <button onclick="show()">调用show()</button>

    <button onclick="print()">调用print()</button>

 </body>

</html>

三、数组
1、什么是数组
　　数组(Array)是一个用于保存批量数据的结构，即一个变量中允许保存多个数据。是按照线性结构的方式来保存数据的；
2、创建数组
　　（1）创建一个空数组
　　　　var 数组名 = [];
　　（2）创建数组并初始化元素
　　　　var 数组名 = [元素1,元素2,... ...];
　　（3）创建一个空数组
　　　　var 数组名 = new Array();
　　（4）创建数组并初始化元素
　　　　var 数组名 = new Array(元素1,元素2,... ...);

练习：
1、使用 [] 的方式创建一个数组并构建元素
张无忌,张翠山,张三丰,金毛狮王
2、使用 new 的方式创建一个数组并构建元素
赵敏,殷素素,周芷若,金花婆婆
3、在控制台中直接将两个数组进行打印

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

  <script>

        function testArray(){

            //1、使用 [] 创建数组

            var names1 = ["张三丰","张无忌","张翠山","金毛狮王"];

            //2、使用 new 创建数组

            var names2 = new Array("金花婆婆","赵敏","周芷若","殷素素");

            console.log("******打印数组******");

            console.log("names1"+names1);

            console.log("names2"+names2);

            console.log("******获取元素******");

            console.log("names1中的第2个元素:"+names1[1]);

            console.log("names2中的第3个元素:"+names2[2]);

            console.log("names1中的第9个元素:"+names1[8]);

            console.log("******为元素赋值****");

            //将 names1 中的第一个元素设置为 漩涡鸣人

            names1[0] = "漩涡鸣人";

            console.log("names1修改后:"+names1);

            //为 names1 中的第五个元素赋值为 佐助

            names1[4] = "佐助";

            console.log("names1增加后:"+names1);

            //为 names1 中的第十个元素赋值为 雏田

            names1[9] = "雏田";

            console.log(names1);

            console.log(names1[6]);

        }

    </script>

    <button onclick="testArray()">创建数组</button>

 </body>

</html>

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

  <script>

        function testLength(){

            var names = ["鸣人","佐助","小樱","卡卡西"];

            console.log("names数组中元素的个数:"+names.length);

            //循环遍历 names 中的每一个元素

            for(var i=0;i<names.length;i++){

                console.log(i+":"+names[i])

            }

        }

    </script>

    <button onclick="testLength()">测试Length()</button>

 </body>

</html>

3、数组的使用
　　获取或设置数组中的元素，一律都使用下标
　　下标范围：从0开始，到元素个数-1为止
　　（1）、想获取数组中的第2个元素
　　　　数组名[1]
　　（2）、为数组元素赋值
　　　　数组名[下标] = 值;

4、获取数组的长度
　　属性：length
　　用法：数组名.length
eg:
var names = ["鸣人","佐助","小樱","卡卡西"];
console.log(names.length);//4

使用场合：
　　1、配合循环，遍历数组中的每一个元素
　　2、能够找到数组中，最新要插入元素的位置
　　　　var names = ["鸣人","佐助","小樱","卡卡西"];

　　　　names[names.length] = "纲手";
练习：
　　1、让用户循环的从弹框中录入数据，并将数据保存进一个数组中，直到输入 exit 为止(exit不存)。打印数组到控制台中
　　2、声明一个数组(初始化若干整数)，查找该数组中的最大值

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

  <script>

        function saveName(){

            var names = [];

            while(true){

                var input = prompt("输入姓名:");

                if(input == "exit"){

                    break;

                }

                names[names.length] = input;

            }

            console.log(names);

        }

        function findMax(){

            var nums = [875,63,-129,3,7893,67,125];

            var max = nums[0];

            for(var i=1;i<nums.length;i++){

                if(nums[i] > max){

                    max = nums[i];

                }

            }

            console.log("该数组中的最大值为:"+max);

        }

    </script>

    <button onclick="saveName()">录入数据</button>

    <button onclick="findMax()">获取最大值</button>

 </body>

</html>

5，关联数组

　　（1）概念： js中数组分为索引数组和关联数组；

　　索引数组：由数字做下标；

　　关联数组：由字符串做下标；

　　（2）声明和使用关联数组；

var names = [];

names["xyj"] = "西游记";
names["hlm"] = "红楼梦";
names["shz"] = "水浒传";

console.log(names["hlm"]);

　　（3）注意： length只能统计出索引数组的长度，而关联数组则不包含在内；

　　（4）使用 for.....in 遍历数组；

　　　　作用：能够遍历数组中所有的数字下标和字符串下标；

　　　　语法： for (var 变量 in 数组){

　　　　　　　　变量：数组中所有的数字下标和字符串下标；

　　　　　　　　}

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>关联数组</title>

 </head>

 <body>

  <script>

        function testArray(){

            var names = [];

            names[0] = "西游记";

            names[1] = "水浒传";

            names["xyj"] = "古代神话小说";

            names["shz"] = "古代武侠小说";

            console.log(names[0]);

            console.log(names["xyj"]);

            console.log("数组的长度:"+names.length);

            for(var i = 0; i < names.length ; i ++){

                console.log(i+":"+names[i]);

            }

            for(var i in names){

                console.log(i+":"+names[i]);

            }

        }

    </script>

    <button onclick="testArray()">测试关联数组</button>

 </body>

</html>

6，数组的常用API

（1） toString()

　　作用：将数组转换为字符串返回；

（2）join(seperator)

　　作用：返回一个由指定连接符连接的数组元素的字符串；

　　参数： seperator : 连接符

（3）concat(arr1, arr2,.......)

　　作用：拼接多个数组到一起，并返回拼接后的结果；

　　语法： arr.concat(arr1,arr2,.....)

　　注意：该函数并不会改变数组，而是返回拼接后的一个副本；

（4）reverse()

　　作用：反转

　　语法：arr.reverse()

　　注意：该函数会改变现有数组的结构；

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

  <script>

        function testToString(){

            var names = ["李白","杜甫","李清照","白居易"];

            console.log(names);

            console.log(names.toString());

            console.log(names.join('and'));

        }

        function testConcat(){

            var name1 = ["潘金莲","李师师","鄢颇系"];

            var name2 = ["刘姥姥","林黛玉","王熙凤"];

            var name3 = ["大乔","小乔","貂蝉"];

            var newArr=name1.concat(name2,name3);

            console.log(newArr);

        }

        function decode2Bin(){

            var num = Number(prompt("请输入一个数字:"));

            var arr = [];

            //循环获取 num 与 2的余数，并保存进arr，再将num/2变为整数后再赋值给 num

            while(num > 0){

                //1、获取 num 与 2 的余数

                var yu = num % 2;

                //2、将yu保存进 arr 数组中

                arr[arr.length] = yu;

                //3、将 num / 2 取整，再赋值给 num

                num=parseInt(num / 2);

            }

            //将 arr 进行反转

            arr.reverse();

            console.log(arr.join(""));

        }

        /**

         * 声明一个 升序的排序函数

         */

        function sortAsc(a,b){

            return a-b;

        }

        function testSort(){

            var nums = [38,6,121,76,65,23,1128];

            console.log("排序前:"+nums);

            //nums.sort(sortAsc); //升序排序

            //使用匿名函数完成降序排序

            nums.sort( function(a,b){

                return b-a;

            } );

            console.log("排序后:"+nums);

        }

        function testStack(){

            var names = ["张无忌","张翠山"];

            console.log("原始数组:"+names);

            //1、向names数组中追加新元素 张三丰

            var len = names.push("张三丰");

            console.log("新数组:"+names);

            console.log("长度:"+len);

            //2、向数组头部增加一个新匀速 赵敏

            len = names.unshift("赵敏");

            console.log("新数组:"+names);

            console.log("长度:"+len);

            //3、删除names头部和尾部的元素

            var delFirst = names.shift();

            var delLast = names.pop();

            console.log("数组:"+names);

            console.log("删除:"+delFirst);

            console.log("删除:"+delLast);

        }

    </script>

    <button onclick="testToString()">测试toString()</button>

    <button onclick="testConcat()">测试concat</button>

    <button onclick="decode2Bin()">十进制转二进制</button>

    <button onclick="testSort()">测试排序</button>

    <button onclick="testStack()">测试栈式操作</button>

 </body>

</html>

（5） sort()

作用：对先用数组进行排序；

　　默认情况下，按照元素的Unicode码进行排序（升序）；

注意：该函数会改变现有数组的内容；

允许通过自定义的排序函数来指定数字的排序规则；

语法： arr.sort(排序函数)；

　　指定排序函数：

　　var nums = [2,1,8,43,55,98,11];

　　function sortAsc(a,b){

　　　　return b - a

　　}

　　nums.sort(sortAsc)；

（6）进出栈操作；

栈式操作：提供了快速操作数组头部或尾部的方法；

push() 入栈，向数组的尾部添加新元素，并返回新数组的长度；

　names.push("ccccc") 等同于 names[names.length] = "ccccc"

　pop() 出栈，删除并返回数组尾部的元素；

　unshift() 　向数组的头部增加新元素并返回新数组的长度；

　shift()　　删除并返回数组头部的元素；

练习：

已知数组：
names = ["张无忌","张翠山"];
1、向names数组中追加 "张三丰"，并打印追加后数组的长度
2、向names数组的头部，增加 "赵敏"，并打印新数组长度
3、删除 names 中的最后一个元素和第一个元素

7，二维数组；

概念：什么是二维数组：数组中的数组，在一个数组中的每个元素又是一个数组；

声明二维数组

var names = [
["贾1","王2","陈3"],
["李1","马2","白3"]
];

console.log(name[1][1])

三，字符串-string

（1）声明字符串：

　　var str1 = "字符串1"

　　var str2 = String("字符串2")

　　var str3 =new String("字符串3")

（2）length 属性

　　作用：返回当前字符串中字符的个数；

（3）常用函数--String API

　　<1> 大小写转换函数：

　　 toUpperCase()　　返回字符串的完全大写形式；

　　 toLowerCase()　　返回字符串的完全小写形式；

ex:
var str = "Hello World";
console.log(str.toUpperCase());
// HELLO WORLD

练习：
1、创建一个函数 testVilidateCode()
2、创建四位随机验证码
范围：0-9,A-Z,a-z
3、在弹框中弹出四位验证码，并让用户同时输入一段数据
4、忽略大小写比较生成的四位验证码和用户输入的数据
相等提示，验证成功
不相等提示，验证失败

　　<2> 获取指定位置的字符或Unicode码

　　　 1,　charAt(index) 返回指定下标位置处的字符；

　　　　　 eg:　var msg="Hello World";

　　　　　　 var r = msg.charAt(6);

　　　　　　　　 r = W

　　　　2, charCodeAt(index) 返回指定下标位置处的字符的Unicode码 (十进制)

　　　　　　　 var msg = "Hello World" ;

　　　　　　　　var r= msg.charCodeAt(6);

　　　　　　　　 r :W 的ASCII 码

　　　　<3>，检索字符串

　　　　　　作用：查询子字符串在指定字符串中的起始下标；

　　　　　　函数：1， indexOf(value, fromIndex)

　　　　　　　　　　value: 要查询的子字符串；

　　　　　　　　　　fromIndex : 从哪个位置处开始查，如果省略的话，则从头查找；

　　　　　　　　　　返回值：返回第一次出现的子字符串的下标，如果未找到，则返回-1 ；

　　　　　　　　2， lastIndexOf(value, fromIndex)

　　　　　　　　　　作用：查找value 最后一次出现的下标；

　　　　　　　　　　注意：该函数的查找方式是从后向前找；

练习：
1、从弹框中输入一个邮箱
2、判断输入的数据是否满足邮箱的格式
1、字符串必须包含@
2、字符串必须包含.
3、最后一个.的位置必须要在@之后

　　　　　<4> 截取子字符串

　　　　　　函数： substring(start,end)

　　　　　　作用：返回从start 到end -1 之间的子字符串，如果省略end的话，则截取到末尾；

作业：
1、声明一个数组，内容随意
2、从弹框中录入一个数据
3、判断录入的数据是否出现在数组中
1、如果出现了的话，则打印数据的下标
2、如果未出现，则提示该数据不存在

巴特西

WEBBASE篇：第十篇， JavaScript知识5

JavaScript知识5

最新文章

热门文章

巴特西

WEBBASE篇： 第十篇， JavaScript知识5

JavaScript知识5

最新文章

热门文章

WEBBASE篇：第十篇， JavaScript知识5