javascript的知识点

2019-11-11 05:41:12

字体：大中小

来源：转载

供稿：网友

一、了解javascript

Javascript的翻转器技术(rollover)。 1.1、Javascript的三个不能： 1. JavaScript 不允许写服务器机器上的文件。 2. JavaScript 不能关闭不是由它自己打开的窗口。这是为了避免一个站点关闭其他任何站点的窗口，从而独占浏览器。 3. JavaScript 不能从来自另一个服务器的已经打开的网页中读取信息。 1.2、Ajax 是一种创建交互式Web 应用程序的方式 1.3DOM（Document Object Model）：用来表示文档中对象的标准模型。 1.4处理事件：事件（event）是用户在访问页面时执行的操作。提交表单和在图像上移动鼠标就是两种事件。这里写图片描述 1.5结构、表现、行为： HTML：包含页面的内容和结构；CSS：控制页面的外观和表现；JavaScript：控制页面的行为。

表示块级的，有行的分级；表示行内的。1.6使用外部脚本：<!DOCTYPE html><html><head><title>My second script</title><script src="script02.js"></script></head><body><h1 id="helloMessage"></h1></body></html>

1.7第一个javascript的程序：

<html><head><title>Barely a script at all</title><script>//getElementById ：就是通过ID来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单就是给每个标签分配一个ID号//innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTMLwindow.onload = function() {document.getElementById ("myMessage").innerHTML = "Hello, Cleveland!";}</script></head><body><h1 id="myMessage"></h1></body></html>

二、处理图像：

这里写图片描述翻转器（rollover）：替换（replacement）图像，这样就产生了运动或动画效果 css片段：

body {background-color: #FFF;}img {border-width: 0;}img#arrow, img#arrowImg {width: 147px;height: 82px;}#button1, #button2 {width: 113px;height: 33px;}.centered {text-align: center;}#adBanner {width: 400px;height: 75px;}

显示简单的翻转器：

<!DOCTYPE html><html><head><title>A Simple Rollover</title><link rel="stylesheet" href="script01.css"><!-链接首先指定当用户单击图像时，浏览器将转到哪里--></head><body><a href="next.html" onmouSEOver="document.images['arrow'].src='images/arrow_on.gif'" onmouseout=➝"document.images['arrow'].src='images/arrow_off.gif'"><img src="images/arrow_off.gif" id="arrow"➝alt="arrow"></a></body></html>

构建更有用的翻转器

<!DOCTYPE html><html><head><title>A Simple Rollover</title><script src="script02.js"></script><link rel="stylesheet" href="script01.css"><!-链接首先指定当用户单击图像时，浏览器将转到哪里--></head><body><a href="next1.html"><img src="images/button1_off.gif" alt="button1" id="button1"></a>  <a href="next2.html"><img src="images/button2_off.gif" alt="button2" id="button2"></a></body></html>

js代码

window.onload = rolloverInit;function rolloverInit() {for (var i=0; i<document.images.length;i++) {if (document.images[i].parentNode.tagName == "A") { /*第一部分document.images[i]是当前的图像。它的parentNode属性是包围它的容器标签，而tagName 提供容器标签的名称。所以，圆括号中代码的意思是：“对于这个特定的图像，包围它的标签是A 吗？”*/setuPRollover(document.images[i]);}}}function setupRollover(thisImage) {thisImage.outImage = new Image();thisImage.outImage.src = thisImage.src;thisImage.onmouseout = function() {this.src = this.outImage.src;}thisImage.overImage = new Image();thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";thisImage.onmouseover = function() {this.src = this.overImage.src;}}

三、窗口与框架

1.1框架这里写图片描述

四、javascript和cookie

Web 术语中，cookie 是一小段信息，当用户第一次访问Web 服务器时，服务器将这些信息发送给浏览器。这个用户以后每次访问这个Web 站点时，Web 服务器可以通过cookie 识别这个用户。远程服务器保存cookie 的一部分，其中包含关于访问者的信息；浏览器将cookie 作为纯文本文件保存在计算机硬盘上。 cookie 技术背后的本质是“识别”。 cookie 不能实现哪些操作:

1. 无法获得关于用户的任何真实信息，比如他们的电子邮件地址； 2. 无法使用cookie 查看用户硬盘上的内容； 3. cookie也无法传输计算机病毒。

上一篇：JavaScript call()和apply()方法

下一篇：JavaScript实现瀑布流效果