跳至内容

网页编程/JavaScript

Add links
来自维基教科书，开放的书籍，面向开放的世界

资源

JavaScript 通常被视为客户端网页编程的关键部分。

JavaScript 是一种脚本语言。当附加到网页 (HTML) 时，它会被网络浏览器解释，并且可用于通过响应各种事件来操作网页。传统上，JavaScript 在客户端运行，以创建动态行为，例如表单验证，以使页面更具交互性。最近，JavaScript 越来越多地用于进行异步网络请求 (ajax) 并在服务器上处理网络请求 (node.js)。

生命周期

[编辑 | 编辑源代码]

Hello world 一个 JavaScript 程序是一个包含 JavaScript 代码的纯文本文件。当脚本文件（代码）加载时，JavaScript 解释器会按顺序解析文件中的语句并执行操作。如果语句定义了一个函数，解释器会记住定义，并且仅在调用该函数时执行该函数。以下 JavaScript 代码定义了一个函数，该函数使用 alert() 函数说“Hello”。当脚本加载时，它会执行一个语句，该语句调用 sayHello() 函数，然后它会执行函数定义中的内容。

function sayHello(){
    alert("Hello!");
}

sayHello();

客户端 JavaScript 文件始终附加到 HTML 文件，这允许脚本访问表示页面的对象 (DOM)。通常，我们在脚本中首先做的事情是将函数附加到页面元素，以处理各种事件。以下 HTML 代码定义了一个按钮，并包含一个 demo.js 文件，通过处理事件使页面具有交互性。

<!DOCTYPE html>
<html>
<head>
  <script src="demo.js" type="text/javascript"></script>
</head>
<body>
<button id="say_hello">Say Hello</button>
</body>
</html>

demo.js 文件包含以下内容。

window.onload = function(){
  document.getElementById("say_hello").onclick = sayHello;
};

function sayHello(){
  alert("Hello!");
}

在脚本中，隐式 window 对象用于将事件处理程序附加到 onload 事件，该事件在整个网页加载完毕时发生。事件处理程序被定义为一个匿名函数，这很好，因为该函数只被引用一次。在函数中，我们使用隐式 document 对象（表示页面）通过其 ID 找到按钮对象，并将 sayHello() 函数附加到按钮的 click 事件。请注意，前三行代码是一个语句，这就是为什么它需要以“;”结尾的原因。匿名函数在整个页面加载之前不会执行，sayHello() 函数在按钮被点击之前不会执行。我们必须等待页面加载完毕才能将事件处理程序附加到页面元素，因为元素必须存在才能引用它们。

脚本可以如下直接包含在 HTML 中。这可以，但它没有干净地分离内容（HTML）和行为（JavaScript），并阻碍了代码重用（你不能在其他页面上使用该脚本）。我将在以后的示例中使用这种样式，因为代码以紧凑的形式保留在一个文件中。

<!DOCTYPE html>
<html>
<body>
<button id="say_hello">Say Hello</button>
<script>
  window.onload = function(){
    document.getElementById("say_hello").onclick = sayHello;
  }

  function sayHello(){
    alert("Hello!");
  }
</script>
</body>
</html>

DOM

[编辑 | 编辑源代码]

在前面的示例中，“document”指向一个 DOM（文档对象模型）对象，该对象表示网页。事实上，在浏览器在屏幕上绘制页面之前，它必须下载定义页面的 HTML 代码，然后在内存中为页面构建一个 DOM 对象。因此，页面的 DOM 对象是屏幕上渲染页面的底层数据结构。我们可以通过更改其 DOM 对象来修改屏幕上的页面，例如修改元素的内容或样式，添加新元素，以及删除元素。

在下一个示例中，我们通过更改段落的内容来说“Hello”，而不是使用弹出窗口，弹出窗口可能会令人讨厌。段落元素有一个名为 innerHTML 的属性，表示其内容。我们可以更改此属性来更改网页上段落的内容。

<!DOCTYPE html>
<html>
<body>
<button id="say_hello">Say Hello</button>
<p id="output"></p>

<script>
  window.onload = function(){
    document.getElementById("say_hello").onclick = sayHello;
  };

  function sayHello(){
    var output = document.getElementById("output");
    output.innerHTML = "Hello";
  }
</script>
</body>
</html>

事件

[编辑 | 编辑源代码]

除了 onclick 事件之外，还有很多 其他事件 我们可以选择处理。大多数事件是由用户操作触发的。有时，我们希望以延迟或周期性的方式以编程方式触发事件。以下示例使用计时器来延迟函数的调用。setTimout() 函数接受两个参数：第一个是我们在计时器到期时要调用的函数的名称，第二个参数指定以毫秒为单位的延迟。

<!DOCTYPE html>
<html>
<body>

<p id="display">5</p>

<button id="start">Start</button>

<script>
  document.getElementById("start").onclick = 
    function() {
      var seconds = document.getElementById('display').innerHTML;
      setTimeout(timesUp, seconds*1000);
    };
  
  function timesUp(){
    alert('Time is up!');
  }
</script>
</body>
</html>

对页面上的倒计时进行动画处理会更有意思，这意味着我们需要定期更新段落的内容。我们可以使用间隔设置计时器，并在计数达到零时清除它。下一个示例演示了这个想法。

<!DOCTYPE html>
<html>
<body>

<p id="display"></p>

<button id="start">Start</button>

<script>
  var seconds = 10;
  var timer;

  document.getElementById('display').innerHTML=seconds;
  document.getElementById("start").onclick = 
    function() {
      timer = setInterval(update, 1000); // expires every second
    };
  
  function timesUp(){
    alert('Time is up!');
  }
  
  function update(){
    seconds = seconds - 1;
    document.getElementById('display').innerHTML=seconds;
    if (seconds==0){
      clearInterval(timer);
      timesUp();
    }
  }
</script>
</body>
</html>

我们可以使用这个想法构建一个完整的秒表。

<html>
<head>
  <script src="stopwatch.js" type="text/javascript"></script>
</head>
	
<body>
<span id="mm">00</span>:<span id="ss">00</span>
<br/>
<button id="reset">reset</button>
<button id="start">start</button>

<script>
window.onload = function(){
  document.getElementById("reset").onclick = reset;
  document.getElementById("start").onclick = start;
};

var timer = null;
var minutes = 0;
var seconds = 0;
 
function reset(){
  //alert("reset");
  document.getElementById("ss").innerHTML = "00";
  document.getElementById("mm").innerHTML = "00";
  minutes = 0;
  seconds = 0;
}

function start(){
  timer = setInterval(update, 100);
  document.getElementById("reset").disabled = "disabled";
  document.getElementById("start").innerHTML = "stop";
  document.getElementById("start").onclick = stop;
}

function stop(){
  clearInterval(timer);
  document.getElementById("reset").disabled = "";
  document.getElementById("start").innerHTML = "start";
  document.getElementById("start").onclick = start;
  //alert("stop");
}

function update(){
  seconds++;
  if (seconds > 59){
    seconds = 0;
    minutes++;
  }
  if (seconds < 10){
    document.getElementById("ss").innerHTML = "0"+seconds;
  }else{
    document.getElementById("ss").innerHTML = seconds;
  }
	
  if (minutes < 10){
    document.getElementById("mm").innerHTML = "0"+minutes;
  }else{
    document.getElementById("mm").innerHTML = minutes;
  }
}
</script>
</body>
</html>

jQuery

[编辑 | 编辑源代码]

jQuery 是一个 JavaScript 库，它扩展了“原生”JavaScript 的功能。它是最受欢迎的 JavaScript 库，因为它

  • 简化了 DOM 操作，
  • 允许使用 CSS 选择器进行元素选择，
  • 解决了浏览器兼容性问题，
  • 提供了函数式编程能力（将操作映射到一组元素），
  • 通过从大多数函数返回调用者对象来提供方法链。

语法

[编辑 | 编辑源代码]

简单的语法规则可以在以下位置找到

常见的实用方法包括

一些有趣的结构包括

$(function () {
  //code here
});

是以下内容的简写

$(document).ready(function(){
  //code here
});

任何依赖于完全加载页面的代码都需要进入此函数。

以下是立即函数，它会立即运行，而无需等待文档准备就绪：在一个语句中定义和调用一个函数。

  (function($){
    //code here
   })(jQuery);

元素选择

[编辑 | 编辑源代码]

jQuery 为选择 HTML 元素提供了更丰富的 API，几乎可以想象所有可能的方式。大多数选择器在 https://w3schools.org.cn/jquery/jquery_selectors.asp 中有描述，你可以在 https://w3schools.org.cn/jquery/trysel.asp 中找到一个全面的演示

jQuery 选择器会查找/选择一些 HTML 元素，我们可以在其上应用操作。

DOM 操作

[编辑 | 编辑源代码]

jQuery 通过提供我们可以使用的一组丰富的 方法来简化 DOM 操作。以下是此类方法的主要类别

  • 获取内容和属性：当选择多个元素时，该方法会连接内容/属性并返回一个字符串。
  • 设置内容和属性：我们可以将相同的值设置为所有选定的元素，或者使用回调函数根据元素在选定元素中的索引设置不同的值。
  • 添加新内容或元素：$('<tag>') 方法可以创建具有任何标签名称的元素。
  • 删除内容或元素: 可以使用选择器过滤要删除的元素。

以下示例在单击按钮时生成一个新的正方形（div）并将其添加到父容器中。

<!DOCTYPE html>
<html>
<head>
<style>
#box{
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.square{
  height: 20px;
  width: 20px;
  background-color: blue;
  float: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('button').click(function(){
    var square = $('<div>').addClass('square');
    $('#box').append(square);
  });
});
</script>
</head>
<body>
<div id="box"></div>
<button id="button">add square</button>
</body>
</html>

CSS 操作

[编辑 | 编辑源代码]

操作样式信息的理想方法是定义 CSS 类，并通过将元素添加到类或从类中删除元素来更改元素的样式：获取和设置 CSS 类。

jQuery 还提供一个通用的 .css() 函数，用于直接操作单个 CSS 属性：css() 方法。当 css() 方法用一个参数调用时，它获取与参数名称相同的属性。当它用两个参数调用时，它使用第二个参数作为值来设置属性。当 css() 方法在一个选定元素集中调用时，它的行为会根据它是获取还是设置而有所不同：获取会返回第一个选定/匹配元素的属性值，而设置会更改所有选定元素的属性值。

事件处理

[编辑 | 编辑源代码]

jQuery 旨在响应 HTML 页面上的各种事件。

效果

[编辑 | 编辑源代码]

可以使用 jQuery 实现以下效果

jQuery UI

[编辑 | 编辑源代码]

jQuery UI 是使用 jQuery、HTML 和 CSS 构建的 GUI 小部件集合。可以在 jQuery 学习中心 找到入门指南。

Retrieved from "https://wikibooks.cn/w/index.php?title=Web_Programming/JavaScript&oldid=4232613"
华夏公益教科书