javascript的知识点

最新推荐文章于 2024-08-29 20:45:01 发布

shursulei

最新推荐文章于 2024-08-29 20:45:01 发布

阅读量605

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/shursulei/article/details/54896506

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、了解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>&nbsp;&nbsp;
<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;
}

shursulei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript的知识点

一、了解javascriptjavascript的翻转器技术(rollover)。 1.1、Javascript的三个不能： 1. JavaScript 不允许写服务器机器上的文件。 2. JavaScript 不能关闭不是由它自己打开的窗口。这是为了避免一个站点关闭其他任何站点的窗口，从而独占浏览器。 3. JavaScript 不能从来自另一个服务器的已经打开的网页中读取信息。
复制链接

扫一扫

专栏目录