table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1rem;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
pre {
background-color: #f8f8f8;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
}
35、创建一个网页，该网页包含一个使用 DOM 0 内联事件连接到链接的 onclick 事件处理程序。事件处理程序应显示一个提示框，内容为“你点击了这里”。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Onclick</title>
<script type="text/javascript">
function handleclick() {
alert("你点击了这里");
return false;
}
</script>
</head>
<body>
<p>
<a href="#" onclick="return handleclick();">Click Here</a>
</p>
</body>
</html>
36、创建一个网页，使用 ehandler.js 中较新的事件处理方式，连接点击（click）事件，当点击链接时显示警报信息‘You Clicked Here’。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Onclick</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
function handleclick() {
alert("You Clicked Here");
return false;
}
</script>
</head>
<body>
<p><a href="#">Click Here</a></p>
<script type="text/javascript">
var aLink = document.getElementById("clickMe");
EHandler.add(aLink, "click", function() {
handleclick();
});
</script>
</body>
</html>
37、创建一个网页，其中包含一个指向 http://www.microsoft.com 的链接，并使该链接在新标签页中打开。
可以使用锚点元素的
target
属性来实现链接在新标签页中打开，示例代码如下：
<a target="_blank" href="http://www.microsoft.com">Go To Microsoft</a>
将此代码添加到网页的 HTML 文件中即可。
38、创建一个向浏览器发送 cookie 的网页。将过期日期设置为提前一天。通过在设置时查看或在其存储到计算机后查看，验证 JavaScript 代码是否已将 cookie 发送到浏览器。你可以使用 JavaScript 或查看计算机上的 cookie 来完成练习的第二部分。
以下是实现该功能的步骤和示例代码：
步骤：
创建 HTML 文件，在其中编写 JavaScript 代码来设置 cookie 并设置过期时间为一天前。
可以通过浏览器开发者工具或者 JavaScript 代码来验证 cookie 是否被正确设置。
示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(name, value, days) {
var d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
// 设置 cookie，过期时间为 -1 天（提前一天）
setCookie("myCookie", "testValue", -1);
// 验证 cookie 是否设置成功
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
var cookieValue = getCookie("myCookie");
if (cookieValue) {
alert("Cookie 已成功设置，值为: " + cookieValue);
} else {
alert("Cookie 设置失败");
}
</script>
</head>
<body>
</body>
</html>
在浏览器中打开该 HTML 文件，若弹出提示框显示“Cookie 已成功设置”，则说明 JavaScript 代码已成功将 cookie 发送到浏览器。也可以通过浏览器的开发者工具（如 Chrome 的 Application 面板中的 Cookies 选项）来查看 cookie 是否被正确设置。
39、创建一个网页，发送一个有效期提前设置为一周且设置了安全标志的 cookie。该 cookie 的名称要与已有的一个 cookie 不同，以保证创建两个独立的 cookie。此外，要确保为这个新创建的 cookie 启用安全标志。
以下是实现该功能的网页代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello Cookie</title>
<script type="text/javascript">
var cookName = "cookie2";
var cookVal = "testvalue";
var date = new Date();
date.setTime(date.getTime() + 604800000); // 一周，单位为毫秒
var expireDate = date.toGMTString();
var myCookie = cookName + "=" + cookVal + ";expires=" + expireDate + ";secure";
document.cookie = myCookie;
</script>
</head>
<body>
<p>Hello</p>
</body>
</html>
40、创建一个网页，尝试读取设置了安全标志的 cookie。你收到这个 cookie 了吗？如果没有，你需要做什么才能收到它？
除非使用安全套接字层（SSL）连接，否则无法读取设置了安全标志的 cookie。若没收到，需要使用 SSL 连接（如 HTTPS 连接）才能收到。
41、创建一个网页，读取已创建的cookie。使用for循环和if条件语句，当在循环中找到名称为 ‘cookie1’ 的cookie时，显示一个alert()对话框。不要为其他任何cookie显示alert()对话框。
<html>
<head>
<title>Reading Cookie</title>
<script type="text/javascript">
var incCookies = document.cookie.split("; ");
for (var c = 0; c < incCookies.length; c++) {
var splitCookies = incCookies[c].split("=");
if (splitCookies[0] == "cookie1") {
alert(incCookies[c]);
}
}
</script>
</head>
<body>
<p>Hello</p>
</body>
</html>
42、创建一个预加载的悬停图像，并确保将 JavaScript 函数与 HTML 分离。
# 创建预加载的悬停图像并分离 JavaScript 与 HTML
可按以下步骤操作：
## 1. 明确原理
预加载图像是创建图像对象，调用其 `src` 属性指向要预加载的图像。因预加载具有异步性，每个需预加载的图像都要创建新的图像对象。
## 2. 分离 JavaScript 与 HTML
将 JavaScript 代码放在外部文件中，通过 `<script>` 标签引入 HTML 文件。
## 3. 示例代码
在 HTML 文件中，使用 `<script>` 标签引入外部 JavaScript 文件，如：
```html
<script type="text/javascript" src="ehandler.js"></script>
在 JavaScript 文件中，编写预加载和悬停效果的代码，示例如下：
function rollover() {
var images = document.getElementsByTagName("img");
var imgLength = images.length;
var preLoad = [];
for (var i = 0; i < imgLength; i++) {
if (images[i].id.match(/rollover/)) {
preLoad[i] = new Image();
preLoad[i].src = images[i].id + "_over.png";
EHandler.add(images[i], "mouseover", function(i) {
return function() {
images[i].src = images[i].id + "_over.png";
};
}(i));
EHandler.add(images[i], "mouseout", function(i) {
return function() {
images[i].src = images[i].id + "_default.png";
};
}(i));
}
}
}
43、预加载图像映射中使用的所有图像，使得当访问者将鼠标悬停在地图的不同区域时，无需下载这些图像。
为图像映射中的每个图像创建一个新的图像对象，调用其
src()
方法指向要预加载的图像。示例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rollover</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
function rollover() {
var images = document.getElementsByTagName("img");
var imgLength = images.length;
var preLoad = [];
for (var i = 0; i < imgLength; i++) {
if (images[i].id.match(/rollover/)) {
preLoad[i] = new Image();
preLoad[i].src = images[i].id + "_over.png";
EHandler.add(images[i], "mouseover", function(i) {
return function() {
images[i].src = images[i].id + "_over.png";
};
}(i));
EHandler.add(images[i], "mouseout", function(i) {
return function() {
images[i].src = images[i].id + "_default.png";
};
}(i));
}
}
}
</script>
</head>
<body>
</body>
</html>
44、创建一个基于选择框输入类型显示警告对话框的网页表单。
首先定义一个函数，当表单的更改事件触发时调用该函数。
```javascript
function displayValue() {
var selected = document.forms["starform"].startype.value;
alert("You selected " + selected);
}
该 JavaScript 代码会显示从下拉菜单中选择的值。
然后在 HTML 中，选择框的 HTML 包含一个名为
selected
的属性，用于指示显示哪个选项，示例中选择一个空选项，使选择框的初始值为空：
<option selected="selected"> </option>
完整代码在
sel.htm
文件中。
##45、创建一个基本的 HTML 文档，该文档使用样式表，样式表可以在文档内部，也可以通过外部文件引入。确保页面至少有两个 <p> 元素和一个 <h1> 元素，并为每个元素赋予 ID 属性。
以下是一个使用内部样式表的示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 这里可以添加样式 */
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
</body>
</html>
若使用外部样式表，可将样式写在一个
.css
文件中，如
styles.css
，并在 HTML 中引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
</body>
</html>
styles.css
文件内容示例：
/* 这里可以添加样式 */
46、使用 JavaScript 更改其中一个
元素的样式，将其颜色属性更改为蓝色。
可以通过以下步骤实现：
首先为
<p>
元素设置
ID
属性。
然后使用
document.getElementById()
方法获取该元素。
最后设置其
style.color
属性为
'blue'
。
示例代码如下：
HTML 部分：
<p id='myPara'>这是一个段落。</p>
JavaScript 部分：
document.getElementById('myPara').style.color = 'blue';
47、使用 JavaScript 更改所有
元素的样式，将它们的可见性设置为隐藏。
以下代码可使用级联样式表（CSS）的
visibility
属性隐藏所有
<p>
元素：
<script type="text/javascript">
var pelements = document.getElementsByTagName("p");
var pelmLength = pelements.length;
for (var i = 0; i < pelmLength; i++) {
pelements[i].style.visibility = "hidden";
}
</script>
48、使用 JavaScript 检索
元素可见性的当前样式，并使用 alert() 对话框显示当前可见性设置。
可以使用以下代码实现：
var pelements = document.getElementsByTagName("p");
var pelmLength = pelements.length;
for (var i = 0; i < pelmLength; i++) {
alert(pelements[i].style.visibility);
pelements[i].style.visibility = "hidden";
alert(pelements[i].style.visibility);
}
49、使用附加到窗口对象的onerror事件处理程序，在函数未定义时处理错误。错误处理程序应采用比使用alert()更友好的方式呈现错误。
可将使用
alert()
的错误处理部分替换为在页面特定位置显示错误信息。以下是示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>onerror</title>
</head>
<body>
<div>Hi</div>
<script type="text/javascript">
function init() {
doSomething();
}
function errorHandler() {
var errorDiv = document.createElement('div');
errorDiv.textContent = '发生错误：' + arguments[0] + '，位于第' + arguments[2] + '行';
document.body.appendChild(errorDiv);
return true;
}
window.onload = init;
window.onerror = errorHandler;
</script>
</body>
</html>
这样错误信息会以更友好的方式显示在页面上。
50、构建一个网页表单，并使用 try/catch 块来捕获在文本字段中输入的城市不是“斯德哥尔摩”的情况。提供视觉反馈以表明输入的城市不正确。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Try/Catch</title>
<script type="text/javascript"></script>
</head>
<body>
<form name="formexample" action="#">
<div>Enter a City: <input name="city"></div>
<div><input type="submit"></div>
</form>
<script type="text/javascript">
function checkValid() {
try {
var cityField = document.forms[0]["city"];
if (cityField.value != "Stockholm") {
throw "It's not Stockholm";
}
} catch(errorObject) {
alert(errorObject);
}
}
function init() {
document.forms[0].onsubmit = function() { return checkValid() };
}
window.onload = init;
</script>
</body>
</html>
51、构建一个网页表单，并使用 try/catch/finally 块来捕获输入数字大于 100 的情况。确保无论访客输入的值是有效还是无效，每次使用表单时都向他们表示感谢。
function checkValid(eventObj) {
try {
var numField = document.forms[0]["num"];
if (isNaN(numField.value)) {
var err = new Array("It's not a number", numField);
throw err;
} else if (numField.value > 100) {
var err = new Array("It's greater than 100", numField);
throw err;
} else if (numField.value < 1) {
var err = new Array("It's less than 1", numField);
throw err;
}
return true;
} catch (errorObject) {
var errorText = document.createTextNode(errorObject[0]);
var feedback = document.getElementById("feedback");
var newspan = document.createElement("span");
newspan.appendChild(errorText);
} finally {
// 在这里添加感谢信息，如弹出感谢提示框
alert('感谢您使用表单！');
}
}
52、使用 DOM 交替设置表格每行的颜色，使每隔一行具有灰色背景。提示：#aaabba 是这种灰色的十六进制表示。
以下是使用 DOM 交替设置表格每行颜色的代码：
// 假设已经获取到表格元素 table
var table = document.getElementsByTagName('table')[0];
var rows = table.rows;
for (var i = 0; i < rows.length; i++) {
if (i % 2) {
rows[i].style.backgroundColor = '#aaabba';
}
}
上述代码通过遍历表格的每一行，使用取模运算符
%
判断行索引是否为奇数，如果是则将该行的背景颜色设置为
#aaabba
。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
