WEBBASE篇：第十篇， JavaScript知识5

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>

View Code

一，函数：
　　由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>

View Code

三、数组
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>

View Code

<!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>

View Code

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>

View Code

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>

View Code

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>

View Code

（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、如果未出现，则提示该数据不存在

posted on 2018-09-10 23:18 微子天明阅读(218) 评论(0) 编辑收藏举报

刷新页面返回顶部

微子天明

WEBBASE篇：第十篇， JavaScript知识5

JavaScript知识5

公告

导航

微子天明

WEBBASE篇： 第十篇， JavaScript知识5

JavaScript知识5

公告

导航

WEBBASE篇：第十篇， JavaScript知识5