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