一些JavaScript的应用

关于JavaScript的应用

记录了一些作业的过程……比较随意，因为不是实验报告，也就是笔记而已，格式就不要求自己了吧。

验证密码

输入两个密码，如果不相同则会弹出信息。

随意设计的界面，毕竟我也没有加css进去，有点丑陋。

如果两次输入的密码不相同，则会有：

相同的话就没有处理了。

markdown里面放html代码会和网页生成的html混在一起，所以还是放图片吧。

主要还是使用document中的getElementById语句，获取对应id的元素，并从value中取出对象对应的内容。

alert是弹出的警告框。

幻灯片

可能结合图片会更清楚是什么。

其实就是那种滚动的图片。当鼠标在图片上方时，显示左右箭头，并停止动画。当鼠标离开画面时，隐藏左右箭头，重新启动动画。动画是会隔2s中自动向左滑动到下一张图片。可惜markdown不能放视频，其实可以gif，不过我比较懒。每次点击左右箭头将移动一副图像。右下角的三个点每个点对应一幅图像，当前图像的变化时所对应的点也会变化。点击它们时会显示对应的图像。

css

css的部分就不细说了，毕竟之前练了一些。

(1) 图片采用三个img，并用一个div包含，样式white-space要加上nowrap。这样使得三个图片并列在一行上，同时设置div的高度和宽度为一行图片的高度和宽度。

(2) 外层再用一个div，设置宽度为一个图片的宽度，并设置overflow为hidden。

(3) 上面的两个div均为relative。

(4) 每个点和箭头采用div和背景图实现，三个点再采用一个div封装，该div和两个箭头的div均采用绝对定位。

就这样吧，意思意思一下。

JavaScript

先来学习如何获取多个元素。在document中有querySelector和querySelectorAll可以获取元素。前者取得与CSS选择器匹配的第一个节点，后者取得与CSS选择器匹配的所有元素的集合，都只限于html5。

幻灯片的第一步是动画。动画用setTimeout的定时器功能，该方法用于在指定的毫秒数后调用函数或计算表达式。首先我们设置一个全局的id表示当前的图片的id，flag表示鼠标是否正在画面上方，而pos表示这三张图片的x轴的位置。动画设计为，0.1s内完成一张图片的切换，然后停留2s。具体来说，一张图片的宽度是773ps，也就是一帧移动7.73px。用位置来控制定时任务即可。

然后是箭头显示和隐身的部分，这其实就是控制箭头这个元素的display，none表示不显示，而block表示显示。同时需要控制一个flag标记，用于控制动画是否继续进行。

箭头切换图片和点切换图片的部分，和动画的部分有一些不一样。动画是缓慢移动的，而点击箭头和点，图片应该瞬间变换。那这更好办了，直接写一个通项公式就可以了。

注意要点

有一些要点是要注意的，比如scrpit放的位置：

head标签内：外部引入的js文件，或者不涉及页面元素操作的js代码块。
body标签内：放哪都行，只要保证放在操作元素下面就行，但是如果需要自执行js就需要放在这里面。一般推荐放在最后面。

一开始我就是放在了head里面，发现动画不动（我记得老师上课没有讲吧，不排除我走神了，但是我记得我好好听课了的）。

onmousemove和appearmouse的位置，我一开始设置是在图片的div元素上的，也就是id是images的位置。后来发现，我的鼠标移动到箭头上方的时候，箭头会不停地闪烁。确实，因为箭头和点都不属于这个图片元素。所以还是得把onmousemove和appearmouse设置到整个元素上面，也就是main元素上。

setTimeout的使用也有一点点考究，用于在指定的毫秒数后调用函数或计算表达式，意思是他只会执行一次。我就说我一开始讲setTimeout放在主函数体中，动画怎么不动。其实应该放在move的函数体中，回调调用。

还有一些很愚蠢的错误就不说了。

菜单

先前已经用css设计过一个菜单，现在尝试用JavaScript也做一个。

我们的目标是这个样子的：

html body

通过 li 元素写好html后，在未设置css前，长这个样子：

body部分大概长这个样子（url什么的就不要管了）：

css

首先第一步，是设置css（怎么也得先排版好吧）。

这样就通过鼠标hover的方式实现了这个菜单。

JavaScript

那么现在将hover方式改写成JavaScript。大概的思路就是取消css的hover功能，并用mouseover和mouseout进行实现。

但是我不知道为什么改写后子菜单的位置会变化，转而要改一下left和top。

注意要点

设置了好久背景图片都没有显示，background-image不生效，但是background却是生效的。很奇怪，设置了display、background-position、width、height等能调整的都调整了，仍然不奏效。最后想到一个办法，debug的时候直接把span标签改成了img标签，马上发现病痛所在。我发现它显示的图片是找不到该图片。但是我很清楚图片的路径是没有问题的。那问题在哪，我往上翻，发现了一个很致命的标签。老师设置了base标签，将所有的相对路径改成了绝对路径。我注释掉这句话，终于看见那张图片了。在网上查了好久如何破解base，毫无办法。于是，在不改动html的情况下，我将这个base标签放在了style下方，这样就影响不到我的图片了。

DOM

DOM用正文为空的dom.html，通过javascript的DOM操作，实现以下html网页(jys.html)：

首先第一步，把样子设计好。就直接用html和css开写了：

然后就按照这个样子，将html元素用js的形式创建。

节点的创建采用document.createElement()、document.createTextNode()和e.cloneNode()实现；
加入元素采用e.appendChild()实现。
可以用document.body.appendChild(e);把元素加入当前网页。

步骤为：

先设计第一行，除了第一个上标，第二上标采用克隆第一个上标实现。
上标中的属性采用e.style.verticalAlign=”super”和e.style.fontSize=”12px”实现
第二行采用克隆第一行实现，利用childNodes和nodeValue修改文本节点的内容。

注释掉html和css，加入如下：

Ajax-get技术

Ajax简介

传统的网页如果需要更新内容，必需重载整个网页。使用AJAX (Asynchronous Javascript And XML) 技术除了可以利用从 Web 服务器上获取的信息局部更新网页，还可以实现在保持当前网页的情况下提交数据给Web服务器。

2005年2月，Adaptive Path公司的Jesse James Garrett在文章“Ajax: A New Approach to Web Applications”中最早提出这个概念。这篇文章认为将XHTML、CSS、 JavaScript、DOM和XMLHttpRequest混合使用来开发Web应用将会成为一种新的趋势。事实上，在Ajax这个概念出现之前就已经有了丰富的Ajax应用，例如，Google Maps 和Google Suggest就是应用了XMLHttpRequest异步从服务器端来获取数据，实现了客户端无刷新的效果。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。