一、了解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 属性设置或返回表格行的开始和结束标签之间的 HTML
window.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也无法传输计算机病毒。
cookieName=cookieValue;//这个字符串的第一部分给cookie 命名并给它赋值。这是cookie 中唯一必须有的部分,字符串的其余部分都是可选的。
expires=expirationDateGMT;//是cookie 的过期日期(expiration date),当到了这个日期,浏览器会自动删除这个cookie
path=URLpath;//过期日期后面是一个URL 路径,这允许在cookie 中存储一个URL
domain=siteDomain//可以在cookie 中存储一个域值。
创建cookie
html代码:
<!DOCTYPE html>
<html>
<head>
<title>Set a cookie based on a form</title>
<script src="script90.js"></script>
</head>
<body>
<form id="cookieForm" action="#">
<h1>Enter your name: <input type="text" id="nameField"></h1>
</form>
</body>
</html>
js代码:
window.onload = nameFieldInit;
function nameFieldInit() {
var userName = "";//空值对变量进行初始化
if (document.cookie != "") {//检测对象是否不包含空值
userName = document.cookie.split("=")[1];
/*split("=")方法将cookie分割成一个数组,数组中第一个元素(cookieField[0])
是cookie的名称,第二个元素(cookie Field [1])是cookie的值,这里将document.cookie.split("=")[1]返回
的值(也就是cookie 的值)赋值给userName。
*/
}
document.getElementById("nameField").value = userName;
/*如果cookie 文件中存储了一个用户名,那么在页面加载时设置getElementById ("nameField")。
value 会把这个用户名放进文本字段中。*/
document.getElementById("nameField").onblur = setCookie;
document.getElementById("cookieForm").onsubmit = setCookie;
/*在第一行中,当用户离开这个文本字段时,onblur 事件处理程序(见第1 章)会调用setCookie()
函数。在第二行,表单的onsubmit 事件处理程序做同样的事情。如果用户在输入姓名后按Enter 键,IE
不会触发onblur 处理程序(由于某些原因)。添加onsubmit 处理程序是为了适应所有浏览器。*/
}
function setCookie() {
var expireDate = new Date();
//获得当前日期并且将它赋值给新变量expireDate。
expireDate.setMonth(expireDate.getMonth()+6);
/*这一行取出expireDate 的月份部分,在月份上加6,然后将expireDate 的月份部分设置为新的值。
换句话说,它将cookie 的过期日期设置为创建cookie 之后6 个月。*/
var userName = document.getElementById ("nameField").value;//为局部变量
document.cookie = "userName=" + userName + ";expires=" + expireDate.toGMTString();
/*这里是写cookie 的地方。请记住,cookie 仅仅是一个文本字符串,所以可以使用任何文本字符串
操作来建立cookie,比如使用加号来连接字符串。我们设置document.cookie 以包含用户名和cookie
过期日期。toGMTString()方法将Date 对象expireDate 转换为文本字符串,以便将它写入cookie 中。*/
document.getElementById("nameField").blur();
return false;
}