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、如果未出现，则提示该数据不存在
WEBBASE篇： 第十篇， JavaScript知识5的更多相关文章
- WEBBASE篇： 第十一篇， JavaScript知识6
JavaScript 知识6 一, String 对象 1,分隔字符串, 函数: split(seperator) 作用: 将字符串,通过seperator 拆分成一个数组: eg: var msg= ...
- 如约而至，Java 10 正式发布！ Spring+SpringMVC+MyBatis+easyUI整合进阶篇（十四）Redis缓存正确的使用姿势 努力的孩子运气不会太差，跌宕的人生定当更加精彩 优先队列详解(转载)
如约而至,Java 10 正式发布! 3 月 20 日,Oracle 宣布 Java 10 正式发布. 官方已提供下载:http://www.oracle.com/technetwork/java ...
- 第十篇 SQL Server安全行级安全
本篇文章是SQL Server安全系列的第十篇,详细内容请参考原文. 不像一些其他industrial-strength数据库服务,SQL Server缺乏一个内置保护个别数据记录的机制,称为行级安全 ...
- [老老实实学WCF] 第十篇 消息通信模式(下) 双工
老老实实学WCF 第十篇 消息通信模式(下) 双工 在前一篇的学习中,我们了解了单向和请求/应答这两种消息通信模式.我们知道可以通过配置操作协定的IsOneWay属性来改变模式.在这一篇中我们来研究双 ...
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇（十五）阶段总结
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 一 每个阶段在结尾时都会有一个阶段总结,在<SSM整合基础篇& ...
- 【译】第十篇 SQL Server安全行级安全
本篇文章是SQL Server安全系列的第十篇,详细内容请参考原文. 不像一些其他industrial-strength数据库服务,SQL Server缺乏一个内置保护个别数据记录的机制,称为行级安全 ...
- Egret入门学习日记 --- 第二十篇（书中 9.1~9.3 节 内容 组件篇）
第二十篇(书中 9.1~9.3 节 内容 组件篇) 第八章中的内容. 以上都是基本的Js知识,我就不录入了. 直接来看 第9章. 开始 9.1节. 以上内容告诉你,Egret官方舍弃了GUI,使用了E ...
- Spring cloud系列教程第十篇- Spring cloud整合Eureka总结篇
Spring cloud系列教程第十篇- Spring cloud整合Eureka总结篇 本文主要内容: 1:spring cloud整合Eureka总结 本文是由凯哥(凯哥Java:kagejava ...
- 【基于WPF+OneNote+Oracle的中文图片识别系统阶段总结】之篇一：WPF常用知识以及本项目设计总结
篇一:WPF常用知识以及本项目设计总结:http://www.cnblogs.com/baiboy/p/wpf.html 篇二:基于OneNote难点突破和批量识别:http://www.cnblog ...
随机推荐
- [转]axios的兼容性处理
来源: https://www.cnblogs.com/leaf930814/p/6807318.html ---------------------------------------------- ...
- AutoLayout的坑
本文投稿文章,作者:MangoMade(简书) AutoLayout非常强大也非常易用,可读性也很强,加上各种第三方AutoLayout库,让你布起局来犹如绷掉链子的狗!根本停不下来!以前的 1 la ...
- 【基础】使用cookies，实现免登陆（七）
实现过程: 1.测试网站:www.dx.com 2.登陆后的cookies:"DXSSO","Token=20A0FA7D-XXXX-XXXX-XXXX".至于 ...
- Spring AOP 的实现机制
作者:大名Dean鼎 http://www.importnew.com/28342.html AOP(Aspect Orient Programming),一般称为面向切面编程,作为面向对象的一种补充 ...
- Freeswitch 各版本一键安装脚本 Freeswitch 快速安装 G729编解码库
最近有时间整理,写了freeswitch的一键安装包分享一下,里面带有 mysql=0 是否选择安装mysql. 其他提示:脚本里面集成了安装g729脚本,支持录音.转码的bcg729脚本. 1.下载 ...
- How to find out which version of tensorflow is installed in my pc? - 如何找出我的电脑中安装了哪个版本的 tensorflow？
I'm using tensorflow and have got some weired issues. I'm told it might be related to the version of ...
- 列举至少3种Support包中提供的布局或工具
android.support.v7.widget.CardView 继承自FrameLayout并实现了圆角和阴影效果,常用于ListView或RecyclerView中Item布局的根节点 示例代 ...
- 构建Spring Cloud微服务分布式云架构
大型企业分布式微服务云架构服务组件 实现模块化.微服务化.原子化.灰度发布.持续集成 commonservice zipkinSpring 日志收集工具包,封装了Dapper和log-based追踪以 ...
- shell编程（二）
第三十二次课 shell编程(二) 目录 十五.shell中的函数 十六.shell中的数组 十七.告警系统需求分析 十八.告警系统主脚本 十九.告警系统配置文件 二十.告警系统监控项目 二十一.告警 ...
- Python基础（条件判断，循环，占位符等）
Python 自动化 系统开发用的语言和自动化脚本可以不同 学习peython可用于: 网路爬虫,数据分,web开发,人工智能,自动化运维,自动化测试,嵌入式,黑客 第三方库比较全 脚本语言:功能单一 ...