JavaScript进阶(下)

指定分隔符连接数组元素join()

join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

语法：

arrayObject.join(分隔符)

参数说明:

注意：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。 我们使用join（）方法，将数组的所有元素放入一个字符串中，代码如下： 
<script type="text/javascript">var myarr = new Array(3);myarr[0] = "I";myarr[1] = "love";myarr[2] = "JavaScript";document.write(myarr.join());
</script>

运行结果：

I,love,JavaScript

我们将使用分隔符来分隔数组中的元素，代码如下：

<script type="text/javascript">var myarr = new Array(3)myarr[0] = "I";myarr[1] = "love";myarr[2] = "JavaScript";document.write(myarr.join("."));
</script>

运行结果：

I.love.JavaScript

颠倒数组元素顺序reverse()

reverse() 方法用于颠倒数组中元素的顺序。

语法：

arrayObject.reverse()

注意：该方法会改变原来的数组，而不会创建新的数组。

定义数组myarr并赋值，然后颠倒其元素的顺序：

<script type="text/javascript">var myarr = new Array(3)myarr[0] = "1"myarr[1] = "2"myarr[2] = "3"document.write(myarr + "<br />")document.write(myarr.reverse())
</script>

运行结果：

1,2,3
3,2,1

选定元素slice()

slice() 方法可从已有的数组中返回选定的元素。

语法

arrayObject.slice(start,end)

参数说明：

1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

2. 该方法并不会修改数组，而是返回一个子数组。

注意：

1. 可使用负值从数组的尾部选取元素。

2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

3. String.slice() 与 Array.slice() 相似。

我们将创建一个新数组，然后从其中选取的元素，代码如下：

<script type="text/javascript">var myarr = new Array(1,2,3,4,5,6);document.write(myarr + "<br>");document.write(myarr.slice(2,4) + "<br>");document.write(myarr);
</script>

运行结果：

1,2,3,4,5,6
3,4
1,2,3,4,5,6

数组排序sort()

sort()方法使数组中的元素按照一定的顺序排列。

语法:

arrayObject.sort(方法函数)

参数说明：

1.如果不指定<方法函数>，则按unicode码顺序排列。

2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。

myArray.sort(sortMethod);

注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下： 

  若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
  若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
  若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

1.使用sort()将数组进行排序，代码如下：

<script type="text/javascript">var myarr1 = new Array("Hello","John","love","JavaScript"); var myarr2 = new Array("80","16","50","6","100","1");document.write(myarr1.sort()+"<br>");document.write(myarr2.sort());
</script>

运行结果：

Hello,JavaScript,John,love
1,100,16,50,6,80

注意:上面的代码没有按照数值的大小对数字进行排序。

2.如要实现这一点，就必须使用一个排序函数，代码如下：

<script type="text/javascript">function sortNum(a,b) {return a - b;//升序，如降序，把“a - b”该成“b - a”
}var myarr = new Array("80","16","50","6","100","1");document.write(myarr + "<br>");document.write(myarr.sort(sortNum));
</script>

运行结果：

80,16,50,6,100,1
1,6,16,50,80,100

编程练习

某班的成绩出来了，现在老师要把班级的成绩打印出来。

效果图:

XXXX年XX月X日 星期X--班级总分为:81

格式要求：

1、显示打印的日期。 格式为类似“XXXX年XX月XX日 星期X” 的当前的时间。

2、计算出该班级的平均分（保留整数）。

同学成绩数据如下：

"小明:87; 小花:81; 小红:97; 小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76"

任务

第一步：可通过javascript的日期对象来得到当前的日期。

提示:使用Date()日期对象，注意星期返回值为0-6，所以要转成文字"星期X"

第二步：一长窜的字符串不好弄，找规律后分割放到数组里更好操作哦。

第三步：分割字符串得到分数，然后求和取整。

提示：parseInt() 字符串类型转成整型。
eg.

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>

<script type="text/javascript">

//通过javascript的日期对象来得到当前的日期，并输出。
var weekly=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var mydate = new Date();
document.write(mydate.getFullYear()+"年"+mydate.getMonth()+"月"+mydate.getDay()+"日"+weekly[mydate.getDay()]+"<br>")



//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var s = new Array();
s = scoreStr.split(";");
var num = new Array();
var sum = 0;
for(var i=0;i<s.length;i++){
num[i]=s[i].substring(3);
sum = sum + parseInt(num[i]);
// document.write(num[i]+"<br>");
}
document.write("班级平均分：" + Math.floor(sum/num.length));

//从数组中将成绩撮出来，然后求和取整，并输出。

</script>
</head>
<body>
</body>
</html>

window对象

window对象是BOM的核心，window对象指当前的浏览器窗口。

window对象方法:

注意:在JavaScript基础篇中，已讲解了部分属性，window对象重点讲解计时器。

任务

在右边编辑器script标签内补充代码，弹出对话框"欢迎来到慕课网"。

定义一个函数，实现打开一个网页，宽为600，高为400。

当点击"点击我，打开新窗口"按钮时，在打开网页。

JavaScript 计时器

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：

 

计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码,交互时间);

参数说明：

1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)
或
setInterval(clock,1000)

我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">var int=setInterval(clock, 100)function clock(){var time=new Date();document.getElementById("clock").value = time;}
</script>
</head>
<body><form><input type="text" id="clock" size="50"  /></form>
</body>
</html>

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">function clock(){var time=new Date();                     document.getElementById("clock").value = time;}
// 每隔100毫秒调用clock函数，并将返回值赋值给ivar i=setInterval("clock()",100);
</script>
</head>
<body><form><input type="text" id="clock" size="50"  /><input type="button" value="Stop" οnclick="clearInterval(i)"  /></form>
</body>
</html>

计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);

参数说明：

1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

当我们打开网页3秒后，在弹出一个提示框，代码如下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>

当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){var t=setTimeout("alert('Hello!')",5000);}
</script>
</head>
<body>
<form><input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){document.getElementById('txt').value=num;num=num+1;setTimeout("numCount()",1000);}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

语法:

clearTimeout(id_of_setTimeout)

参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 "Stop" 按钮来停止这个计数器：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">var num=0,i;function timedCount(){document.getElementById('txt').value=num;num=num+1;i=setTimeout(timedCount,1000);}setTimeout(timedCount,1000);function stopCount(){clearTimeout(i);}
</script>
</head>
<body><form><input type="text" id="txt"><input type="button" value="Stop" onClick="stopCount()"></form>
</body>
</html>

History 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法：

window.history.[属性|方法]

注意：window可以省略。

History 对象属性

History 对象方法

使用length属性，当前窗口的浏览历史总长度，代码如下：

<script type="text/javascript">var HL = window.history.length;document.write(HL);
</script>

返回前一个浏览的页面

back()方法，加载 history 列表中的前一个 URL。

语法：

window.history.back();

比如，返回前一个浏览的页面，代码如下：

window.history.back();

注意：等同于点击浏览器的倒退按钮。

back()相当于go(-1),代码如下:

window.history.go(-1);

返回下一个浏览的页面

forward()方法，加载 history 列表中的下一个 URL。

如果倒退之后，再想回到倒退之前浏览的页面，则可以使用forward()方法,代码如下:

window.history.forward();

注意：等价点击前进按钮。

forward()相当于go(1),代码如下:

window.history.go(1);

返回浏览历史中的其他页面

go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。

语法：

window.history.go(number);

参数：

浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下：

window.history.go(-2);

注意：和在浏览器中单击两次后退按钮操作一样。

同理，返回当前页面之后浏览过的第三个历史页面，代码如下：

window.history.go(3);

Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法:

location.[属性|方法]

location对象属性图示:

location 对象属性：

location 对象方法:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>location</title>
</head>
<script type="text/javascript">
document.write("host:"+location.host+"<br>");
document.write("hostname:"+location.hostname+"<br>");
document.write("hash:"+location.hash+"<br>");
document.write("href:"+location.href+"<br>");
document.write("pathname:"+location.pathname+"<br>");
document.write("protocol:"+location.protocol+"<br>");
// document.write("search:"+location.search+"<br>");
</script>
</head>
<body>
</body>
</html>

Navigator对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性:

查看浏览器的名称和版本，代码如下:

<script type="text/javascript">var browser=navigator.appName;var b_version=navigator.appVersion;document.write("Browser name"+browser);document.write("<br>");document.write("Browser version"+b_version);
</script>

转载于:https://www.cnblogs.com/justtofun/p/5730837.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/573302.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ongl 表达式

ongl 表达式

struts.xml简单配置 <!-- &#xff08;默认false&#xff09;设置ognl表达式是否支持静态方法 --><constant name"struts.ognl.allowStaticMethodAccess" value"true"></constant><package name"ognl" namespace"/ogn…
阅读更多...
Python开发-- Lesson 2--Python数据类型（2016/07/30）

Python开发-- Lesson 2--Python数据类型（2016/07/30）

1、文件操作 python中对文件、文件夹&#xff08;文件操作函数&#xff09;的操作需要涉及到os模块和shutil模块。 得到当前工作目录&#xff0c;即当前Python脚本工作的目录路径: os.getcwd() 返回指定目录下的所有文件和目录名:os.listdir() 函数用来删除一个文件:os.remove(…
阅读更多...
oracle什么是重复组,规范化：“重复组”是什么意思？

oracle什么是重复组,规范化：“重复组”是什么意思？

扬帆大鱼英语的价值一次又一次地重复。这是重复组吗&#xff1f;不。在SUBJECT_MODULE中英语的多次出现不是重复组&#xff0c;甚至不是人们误认为重复组的两件事中的任何一个。它们也不是冗余或缺乏规范化的证据。这样的多个外观可能与冗余或规范化有关&#xff0c;但是在没有…
阅读更多...
清除浮动php,CSS清除浮动

清除浮动php,CSS清除浮动

今天看到一篇文章关于清除浮动的&#xff0c;突然间脑袋短路了&#xff0c;咦&#xff1f;为什么要清除浮动&#xff1f;原谅我的无知&#xff0c;搜了下原来是这样&#xff0c;又倒腾出原来的笔记&#xff0c;唉&#xff0c;本来就有记录啊&#xff0c;而且也会经常用到&#…
阅读更多...
Linux下使用Speedtest测试网速

Linux下使用Speedtest测试网速

导读Speedtest是用来测试网络性能的开源软件&#xff0c;在Linux下面安装Speedtest可以用来测试网络出口的上传和下载速度&#xff0c;帮助排查网络方面导致的故障。Speedtest介绍由于公司几个项目用户访问的时候响应较慢&#xff0c;项目本身没问题&#xff0c;服务及调用的接…
阅读更多...
iOS开发ARC内存管理

iOS开发ARC内存管理

本文的主要内容&#xff1a; ARC的本质ARC的开启与关闭ARC的修饰符ARC与BlockARC与Toll-Free BridgingARC的本质 ARC是编译器&#xff08;时&#xff09;特性&#xff0c;而不是运行时特性&#xff0c;更不是垃圾回收器(GC)。 Automatic Reference Counting (ARC) is a compile…
阅读更多...
php 实时查看公众号加粉数据,公众号实时涨粉数据怎么查看

php 实时查看公众号加粉数据,公众号实时涨粉数据怎么查看

公众号文章发布后如何查看涨粉效果&#xff1f;怎么根据发文情况来调整公众号运营方向呢&#xff1f;这款能监控实时涨粉数据的我们在进行公众号运营时&#xff0c;除了是简单的写文、排版、推送&#xff0c;还需要通过优质的内容不断吸引新用户快速发展新用户&#xff0c;将公…
阅读更多...
iOS - UITextField

iOS - UITextField

前言 NS_CLASS_AVAILABLE_IOS(2_0) interface UITextField : UIControl <UITextInput, NSCoding>available(iOS 2.0, *) public class UITextField : UIControl, UITextInput, NSCoding 1、UITextField 的创建 Objective-C // 实例化 UITextField 对象UITextFi…
阅读更多...
微信php翻译和天气预报整合,微信公众平台天气预报功能开发

微信php翻译和天气预报整合,微信公众平台天气预报功能开发

本来是想自己直接从中国天气网获取信息并处理&#xff0c;后来发现处理起来太麻烦&#xff0c;而且要获取所有城市的城市编码&#xff0c;再有就是&#xff01;不支持国外天气&#xff01;&#xff01;(我们学校有很多毕业生在国外上学&#xff0c;所以我考虑还是做出支持国外天…
阅读更多...
关于Jenkins找不到依赖Jar包问题

关于Jenkins找不到依赖Jar包问题

昨晚在Jenkins发布时遇到一个Jar包找不到的问题&#xff0c;控制台的报错信息如下&#xff1a; 说白了就是找不到依赖的Jar包&#xff0c;但是当我们回退到灰度的时候发现灰度的环境是构建是没有问题的&#xff0c;为什么同一套代码在两个环境却有天壤之别呢&#xff0c;本着试…
阅读更多...
VBS基础篇 - Dictionary对象

VBS基础篇 - Dictionary对象

VBS基础篇 - Dictionary对象 Dictionary是存储数据键和项目对的对象&#xff0c;其主要属性有Count、Item、Key&#xff0c;主要方法有Add、Exists、Items、Keys、Remove、RemoveAll。 建立字典 Dim Dict : Set Dict CreateObject("Scripting.Dictionary")添加键值对…
阅读更多...
linux编译mesa,如何在Ubuntu 16.04，17.10中安装Mesa 17.3.3

linux编译mesa,如何在Ubuntu 16.04，17.10中安装Mesa 17.3.3

最新的MESA 3D图形库17.3.3现在在Ubuntu-X team PPA存储库中为Ubuntu 16.04和Ubuntu 17.10提供。Mesa 17.3.3实现了OpenGL 4.5 API&#xff0c;但由glGetString(GL_VERSION)或glGetIntegerv(GL_MAJOR_VERSION)/glGetIntegerv(GL_MINOR_VERSION)报告的版本取决于所使用的特定驱动…
阅读更多...
iOS开发Swift篇—（三）字符串和数据类型

iOS开发Swift篇—（三）字符串和数据类型

一、字符串 字符串是String类型的数据&#xff0c;用双引号""包住文字内容 let website "http://www.github.com" 1.字符串的常见操作 &#xff08;1&#xff09;用加号 做字符串拼接 let scheme "http://" let path “www.github.com” le…
阅读更多...
linux查看xml文件的配置,3、kvm虚拟机日常管理与配置

linux查看xml文件的配置,3、kvm虚拟机日常管理与配置

KVM虚拟机的管理主要是通过virsh命令对虚拟机进行管理。1. 查看KVM虚拟机配置文件及运行状态(1) KVM虚拟机默认配置文件位置: /etc/libvirt/qemu/autostart目录是配置kvm虚拟机开机自启动目录。(2) virsh命令帮助# virsh -help或直接virsh命令和&#xff0c;再执行子命令。如下…
阅读更多...
linux桌面环境是什么意思,Linux 黑话解释：什么是桌面环境？

linux桌面环境是什么意思,Linux 黑话解释：什么是桌面环境？

在桌面 Linux 世界中&#xff0c;最常用的术语之一就是 桌面环境(Desktop Environment)(DE)。如果你是 Linux 的新手&#xff0c;你应该了解一下这个经常使用的术语。什么是 Linux 中的桌面环境?桌面环境是一个组件的组合体&#xff0c;为你提供常见的 图形用户界面(graphical…
阅读更多...
Hadoop 2.5.1集群安装配置

Hadoop 2.5.1集群安装配置

本文的安装只涉及了hadoop-common、hadoop-hdfs、hadoop-mapreduce和hadoop-yarn&#xff0c;并不包含HBase、Hive和Pig等。 http://blog.csdn.net/aquester/article/details/24621005 1. 规划 1.1. 机器列表 NameNode SecondaryNameNode DataNodes 172.16.0.100 172.16.0.…
阅读更多...
ubuntu14.04 x86编译upx 3.92 及so加固

ubuntu14.04 x86编译upx 3.92 及so加固

的参考文章&#xff1a; http://www.cnblogs.com/fishou/p/4202061.html 1.download upx和所依赖的组件 upx3.92&#xff1a;https://www.pysol.org:4443/hg/upx.hg/archive/tip.tar.gzLZMA4.43&#xff1a;http://nchc.dl.sourceforge.net/project/sevenzip/LZMA%20SDK/4.43/l…
阅读更多...
关闭linux系统中读写页缓存,Linux文件系统FAQ

关闭linux系统中读写页缓存,Linux文件系统FAQ

Linux文件系统FAQ2010年03月25日最近实验室搞了一些列讲座&#xff0c;阿福师兄关于文件系统的讲座帮我弄清楚了一些以前不清楚的问题&#xff0c;以问答的形式对文件系统常见的问题进行了总结。Q: 文件系统如何看待底层物理块设备&#xff1f;文件系统把块设备简单的看做线性的…
阅读更多...
Unity3d 札记-Let's try shooting 知识点汇总

Unity3d 札记-Let's try shooting 知识点汇总

1\LineRenderer LineRenderer是用来在3d场景画直线的一个工具。 public LineRenderer laserline;laserline.SetPositon(0,startposition);laserline.SetPositon(1,endposition);//设置结束位置startpositon,endposition均为Vector3 ,空间三维坐标 laserline.enabled(true); las…
阅读更多...
使用Eclipse创建maven项目

使用Eclipse创建maven项目

前提&#xff1a;Eclipse中安装了maven插件&#xff0c;或者Eclipse版本在Mars以上&#xff08;自集成maven&#xff09; 1、new project --maven project 2、默认点击next 3、选择构建类型 4、填写groupId和artifactId,groupId就是顶级项目名,artifactId就是模块名&#xff08…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023