JavaScript实践与网页交互技巧

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;
}

28、在火狐浏览器中安装用户代理切换器插件，或在 Internet Explorer 中安装类似插件。然后使用查看 navigator 对象的代码，对所发现的不同值进行实验。此练习有助于说明为什么不建议仅使用 navigator 对象来确定兼容性。额外任务：自定义你自己的用户代理。

按照要求，先在火狐浏览器安装用户代理切换器插件，或在 Internet Explorer 安装类似插件。

接着用查看

navigator
对象的代码实验不同值，以此明白仅用

navigator
对象确定兼容性不可取。

最后可自定义一个用户代理完成额外任务。

29、创建一个文档，使用 DOM 创建并追加一段文本段落。紧接着该段落，使用 DOM 创建一个指向你选择的网站的链接。确保所有元素都有 id 属性。

以下是实现该需求的代码：


// 创建初始元素
var newelement = document.createElement("p");
newelement.setAttribute("id", "pelement");
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode("This is a paragraph, albeit a short one."));
var anchorelem = document.createElement("a");
anchorelem.setAttribute("id", "aelement");
anchorelem.setAttribute("href", "http://www.braingia.org/");
document.body.appendChild(anchorelem);
anchorelem.appendChild(document.createTextNode("Click Here"));

30、创建一个网页，该网页包含一个使用 DOM 0 内联事件连接到链接的 onclick 事件处理程序。该事件处理程序应显示一条警报，内容为“你点击了这里”。

以下是实现该功能的 HTML 代码示例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Onclick Event Example</title>
</head>
<body>
    <a href="#" onclick="alert('你点击了这里'); return false;">点击此链接</a>
</body>
</html>

在上述代码中，

<a>
标签是一个链接，

onclick
是 DOM 0 内联事件处理程序。当用户点击这个链接时，会触发

alert('你点击了这里')
代码，从而弹出一个显示“你点击了这里”的警告框。

return false;
用于阻止链接的默认跳转行为。

31、将已创建的网页修改为使用 ehandler.js 所示的较新样式的事件处理方式，并将相同的点击/单击事件连接起来，以显示之前创建的警报。

要完成此任务，可按以下步骤操作：

确保

ehandler.js
文件存在于项目中。若不存在，可获取该文件。

在 HTML 文件里添加对

ehandler.js
的引用，示例代码如下：

“`html

“`

编写 JavaScript 代码，运用

EHandler
对象来添加点击事件监听器。示例代码如下：

javascript var element = document.getElementById('yourButtonId'); function showAlert() { alert('Your alert message'); } EHandler.add(element, 'click', showAlert);

其中，

'yourButtonId'
是你想要添加点击事件的元素的 ID，

'Your alert message'
是之前创建的警报消息。

把上述代码添加到 HTML 文件中，或者将其保存为一个单独的 JavaScript 文件并引用。

这样就完成了网页的修改，使其使用

ehandler.js
中的事件处理方式，并且连接了点击事件以显示之前的警报。

32、创建一个网页，包含一个指向 http://www.microsoft.com 的链接，并使该链接在新标签页中打开。

可以使用 HTML 中锚元素（

<a>
）的

target
属性来实现。示例代码如下：


<a href="http://www.microsoft.com" target="_blank">访问微软官网</a>

将这段代码添加到 HTML 文件的合适位置，保存后在浏览器中打开该 HTML 文件，点击链接就会在新标签页中打开

http://www.microsoft.com
。

33、创建一个网页，读取创建好的 cookie。使用 for 循环和 if 条件语句，当在循环中找到名称为 ‘cookie1’ 的 cookie 时，显示一个 alert() 对话框。不要为其他任何 cookie 显示 alert() 对话框。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>

34、创建一个预加载的悬停图像，并确保将 JavaScript 函数与 HTML 分开。

为创建预加载的悬停图像并分离 JavaScript 与 HTML，可按以下步骤操作：

明确预加载图像原理，即创建图像对象并设置其

src
属性指向要预加载的图像，且为每个需预加载的图像创建新的图像对象。

编写 JavaScript 代码，通过

document.getElementsByTagName("img")
获取所有图像元素，遍历这些元素，若元素 ID 匹配特定规则（如包含

'rollover'
），就创建新的

Image
对象并设置其

src
属性为悬停时的图像路径。

将 JavaScript 代码保存为独立文件（如

ehandler.js
），并在 HTML 文件的

<head>
标签里使用

<script type="text/javascript" src="ehandler.js"></script>
引入该文件，以此实现 JavaScript 函数与 HTML 的分离。

35、预加载图像地图中使用的所有图像，使得当访问者将鼠标移到地图的不同区域时，无需再下载这些图像。

可通过创建 JavaScript 函数来预加载图像。首先，要确保 JavaScript 函数与 HTML 分离。可以创建一个数组来存储图像的路径，然后在页面加载时，使用 JavaScript 的

Image
对象来创建图像实例并设置其

src
属性为数组中的路径，以此实现图像的预加载。

示例代码如下：


function preloadImages() {
    var images = [
        'image1.jpg',
        'image2.jpg'
        // 这里添加更多图像路径
    ];
    for (var i = 0; i < images.length; i++) {
        var img = new Image();
        img.src = images[i];
    }
}
window.onload = preloadImages;

将上述代码保存为一个 JavaScript 文件，然后在 HTML 文件中引入该文件，即可完成图像的预加载。

36、创建一个基于选择框输入类型显示 alert() 对话框的网页表单。

可创建一个包含选择框的表单，为选择框的

change
事件绑定一个事件处理函数，在该函数中使用

alert()
函数显示对话框。

示例代码结构如下：

首先在 HTML 中创建表单和选择框：


<form>
  <select name="startype">
    <option value="Ursa Major">Ursa Major</option>
    <option value="Ursa Minor">Ursa Minor</option>
  </select>
</form>

接着在 JavaScript 中连接事件处理函数，在页面的

<body>
部分添加代码为选择框绑定

change
事件：


document.querySelector('select[name="startype"]').addEventListener('change', function() {
  alert('你选择的是: ' + this.value);
});

当选择框选项改变时触发函数，在函数里使用

alert()
显示信息。

37、重新设计披萨订单系统，添加原披萨示例中的按钮，使接单人员能够选择蔬菜特餐、肉类特餐或夏威夷披萨类型。这些按钮随后应选中要制作的特定类型披萨的正确配料复选框。对于蔬菜特餐披萨，选中青椒、蘑菇和洋葱；对于肉类特餐披萨，选中香肠、意大利辣香肠和火腿；对于夏威夷披萨，选中菠萝和火腿。

添加以下代码到披萨应用程序的

<head>
部分：


function flip(pizzatype) {
    if (pizzatype == "veggiespecial") {
        document.getElementById("peppers").checked = "true";
        document.getElementById("onions").checked = "true";
        document.getElementById("mushrooms").checked = "true";
    } else if (pizzatype == "meatspecial") {
        document.getElementById("sausage").checked = "true";
        document.getElementById("pepperoni").checked = "true";
        document.getElementById("ham").checked = "true";
    } else if (pizzatype == "hawaiian") {
        document.getElementById("ham").checked = "true";
        document.getElementById("pineapple").checked = "true";
    }
}

使用以下HTML表单（注意添加了三个按钮并更改了每个配料的

id
属性）：

38、创建一个使用样式表的基本 HTML 文档，样式表可以在文档内部，也可以通过外部文件引入。确保页面至少有两个

元素和一个

元素，并给每个元素添加 ID 属性。

以下是一个示例代码：


<!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"> -->
    <style>
        /* 这里也可以写内部样式 */
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
</body>
</html>

39、使用 JavaScript 更改其中一个

元素的样式，将其颜色属性更改为蓝色。

可先通过

document.getElementById
方法获取特定

元素，再设置其

style.color
属性为蓝色。示例代码如下：

HTML 部分：


<p>这是一个段落。</p>

JavaScript 部分：


var paragraph = document.getElementById("myParagraph");
paragraph.style.color = "blue";

40、使用 JavaScript 更改所有

元素的样式，将它们的可见性设置为隐藏。

以下代码可实现该功能：


<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>

41、使用 JavaScript 获取

元素的当前可见性样式，并使用 alert() 对话框显示当前可见性设置。


<script type="text/javascript">
  var pelements = document.getElementsByTagName("p");
  var pelmLength = pelements.length;
  for (var i = 0; i < pelmLength; i++) {
    alert(pelements[i].style.visibility);
  }
</script>

42、使用附加到窗口对象的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>
    <div></div>
    <script type="text/javascript">
        function init() {
            doSomething();
        }

        function errorHandler(errorMessage, url, lineNumber) {
            var errorDiv = document.getElementById('error-message');
            errorDiv.innerHTML = `很抱歉，出现了错误：${errorMessage} 发生在第 ${lineNumber} 行`;
            return true;
        }

        window.onload = init;
        window.onerror = errorHandler;
    </script>
</body>
</html>

43、构建一个网页表单，并使用 try/catch/finally 块来捕获数字大于 100 的情况。确保无论访问者输入的值是有效还是无效，每次使用表单时都能得到感谢。

以下是一个示例代码，用于构建网页表单并使用

try/catch/finally
块来捕获数字大于 100 的情况，同时在最后感谢访问者：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单验证</title>
</head>
<body>
  <form>
    <label for="numberInput">请输入 1 到 100 之间的数字:</label>
    <input type="number" name="numberInput">
    <input type="submit" value="提交">
  </form>
  <script>
    document.getElementById('myForm').addEventListener('submit', function (event) {
      event.preventDefault();
      try {
        var inputValue = parseInt(document.getElementById('numberInput').value);
        if (isNaN(inputValue)) {
          throw new Error('输入不是有效的数字');
        }
        if (inputValue > 100) {
          throw new Error('输入的数字大于 100');
        }
        if (inputValue < 1) {
          throw new Error('输入的数字小于 1');
        }
        alert('输入有效，提交成功！');
      } catch (error) {
        alert(error.message);
      } finally {
        alert('感谢您使用本表单！');
      }
    });
  </script>
</body>
</html>

上述代码中，创建了一个包含数字输入框和提交按钮的表单。当用户提交表单时，会触发事件监听器。在

try
块中，获取用户输入的数字并进行验证。如果输入不是有效数字、大于 100 或小于 1，会抛出相应的错误。

catch
块会捕获这些错误并显示错误信息。无论输入是否有效，

finally
块都会执行，显示感谢信息。

44、在 HTTP 请求方法中，哪一种最安全？为什么？

在 HTTP 请求方法中，没有一种比其他方法更安全。只有添加安全套接层（SSL）才能在 HTTP 方法之上提供一层安全保障。并且，应该仅将 POST 方法与 SSL 结合使用，因为 GET 方法会将参数直接放在 URL 上，无论是否使用 SSL 都可能被看到，而 POST 请求的参数包含在请求体中，不易被随意查看。

45、构建一个服务器端程序，返回该程序作为参数接收的两个数字的和。使用异步 XMLHttpRequest 对象调用该程序。

服务器端程序（sum.php）代码如下：


<?php 
    print $_GET['num1'] + $_GET['num2'];
?>

使用异步 XMLHttpRequest 对象调用该程序的代码如下：


<script>
    var requestObj = ...; // 假设已通过 readyAJAX() 函数获取 requestObj
    var url = "sum.php?num1=数字1&num2=数字2";
    requestObj.open("GET", url, true);
    requestObj.send();
    requestObj.onreadystatechange = function() {
        if (requestObj.readyState == 4) {
            if (requestObj.status == 200) {
                alert(requestObj.responseText);
            } else {
                alert(requestObj.statusText);
            }
        }
    }
</script>

其中“数字1”和“数字2”需替换为实际要相加的数字。

46、分析常见的JavaScript库和框架。你认为哪个最适合新的JavaScript程序员学习？为什么？


jQuery 可能是新的 JavaScript 程序员最容易学习的。它包含在单个 JavaScript 文件中，有丰富的功能集、强大的选项和良好的扩展性，还拥有出色的社区支持。使用它可以轻松为网页添加效果、增强可用性并简化 AJAX 的数据处理。此外，微软在 Visual Studio 2010 中也预装了 jQuery，这为初学者提供了便利。

47、在使用 jQuery 进行 AJAX 操作的代码基础上，有一个包含多个州名称的列表，每个州名称显示在一个单独的

元素中。添加 CSS 样式，使鼠标悬停在列表中的某个州对应的

元素时，该

元素的背景颜色变为蓝色。提示：有多种实现方法。

一种实现方法是使用

.hover()
函数和

.css()
函数来改变背景颜色，这在

showStates
函数中完成。以下是修改后的

showStates
函数：


function showStates(data, status) {
    $.each(data, function(item) {
        $('#states').append('<div>' + data[item] + '</div>');
        $('#states').children().hover(
            function() {
                $(this).css('background-color', 'blue');
            },
            function() {
                $(this).css('background-color', '');
            }
        );
    });
}