人人都能看懂的全栈开发教程——JavaScript

人人都能看懂的全栈开发教程——JavaScript

Chris Yue No Comment
Posts

按需求,我们还需要在网页里添加新增任务的页面,另外我们的命令行程序也需要有新增任务的功能。我们先来处理页面新增功能。有了之前重构的经验,我们也应该很容易想到我们需要添加 M,V,和 C 三个文件。

然而,似乎我们显示新增任务页面时并不需要从数据库里获取什么数据,所以 M 我们可以省略,我们先创建模板文件 new.html.php

<!DOCTYPE html>
<html>
  <head>
    <title>添加任务</title>
  </head>
  <body>
    <form action="add.php" method="post">
      <textarea name="content"></textarea>
      <input type="submit" value="提交">
    </form>
  </body>
</html>

然后我们再添加我们的控制器文件 new.php,也就是 C,目前只有很简单的一句:

<?php

include 'new.html.php';

打开 http://localhost:8000/new.php 你就可以看到简陋而朴实的任务输入页面了。

这里要解释一下,<form> 标签在 HTML 表示表单,而它里面的 <textarea> 以及 <input> 都是用户可以交互的元素。HTML 提供了丰富的用户交互元素,除了我们现在用的多行文本输入框,还有单行文本输入框,可以自动隐藏输入的密码框,单选下拉框,多选下拉框,等等,甚至 HTML5 里还加入了选色控件,不过我们依然不做扩展讲解,相关参考大家自行查询就好,记得常访问我之前分享过的网站 MDN。

另外 <form> 上出现了我们之前没见过但是有提到过的『属性』,与 XML 一样,标签里标签名后面有名有值的那些就是属性,我们的 <form> 第一个属性 action,表示当我们点击表单的确认按钮后,浏览器将用户的输入内容提交给什么地址,是的,这就是一种可以在页面间(或者说地址间)传递数据的方式,我们给的值是 add.php,但目前还没有这个页面对应这个地址,所以是我们即将要添加的。

接下来是 method 属性,它只有两个值,getpost 。没错,HTML 传递数据的方式还不只一种,而这是跟我们后面要说的 HTTP 协议有关,先不多说,现在只用知道,如果表单是要改变数据库里的数据,比如我们现在新增任务就会导致数据库的数据有变化,那么就用 post

按理说我们应该添加第三个控制器文件,对应 add.php 这个访问地址,但别忘了我们对用户的输入还有一个要求:用户的输入不能为空,而这个需求,我们可以先通过 JavaScript 来帮我们。

JavaScript 是我们除了 PHP 以外,接触的第二个 GPL 了,首先申明一下,JavaScript 和 Java 是两种语言。JavaScript 在曾经主要作用就是用来写页面的『脚本』。我记得微软以前还出过 JScript,跟 JavaScript 很像,可以用来写批处理脚本和网站,但跟 JavaScript 不完全一样。而现在得益于 Node.js 的发展, JavaScript 已经同 PHP 一样,可以用来干很多其他事情了,作为与时俱进的全栈工程师,我们后面也会接触到。

我们接下来就来看看如何使用 JavaScript 来实现对用户输入的非空检查,我们在 HTML 代码里的 </body> 前面,即 body 标签关闭之前,写入以下代码,依然注意代码中的注释,另外 JavaScript 常简写为 JS,我们后面也都会用简写

<script>
// JS 的注释方式跟 PHP 完全一样
/*
同样支持
多行注释
*/
// document 是浏览器自带的对象,它其中一个方法 getElementsByTagName 表示通过标签名来找到若干元素(element)
// 此方法返回包含若干元素的数组,同处理 PHP 的数组类似,我们可以通过 [n] 来获取其中第 n 个元素(从 0 开始计),目前页面只有一个 form 所以肯定是 0。
let form = document.getElementsByTagName('form')[0]
// HTML 的元素都可以响应某些事件,比如常见的鼠标点击事件。如果我们要在某个事件发生的时候做一些事情,就可以通过 addEventListener 方法来处理
// 我们现在要监听的是表单的提交(submit)事件,即第一个参数,第二个参数是一个匿名函数,当事件发生时,就会运行这个函数,并且还将事件对象(e)传递给此函数
form.addEventListener('submit', function (e) {
    // document getElementsByName 方法用于获取若干元素
    // 另外常见的还有 getElementById,每个元素都可以添加 id 属性,可以发现此方法名里 Element 不是负数,只能返回一个元素,这也说明一个 HTML 文档里每个元素都应当有不同的 id
    let textarea = document.getElementsByName('content')[0];
    if ('' === textarea.value) {
        // alert 为浏览器内置的另外一个对象 window 的方法,window 可省略不写
        alert('输入为空');
        // 事件 e 的 preventDefault 方法意为『阻止默认(的行为发生)』
        // 对于表单来说提交事件的默认行为就是带着数据跳转到另外一个地址去
        e.preventDefault();
    }
});
</script>

我们知道 PHP 代码需要通过 PHP 解释器来跑,JS 代码也需要 JS 解释器来运行,之所以浏览器能运行 JS,是因为浏览器里内置了 JS 的解释器。

不同于 PHP,上面的 JS 代码里,我们发现很多对象(document, window)都已经是现成的了,实际上这些都是浏览器在网页加载时就帮我们创建好的,我们称之为浏览器文档对象,或者 DOM(Document Object Model)。还记得之前介绍 HTML 发展的时候有说过对于 HTML 和 CSS 的支持,在老版本的浏览器之间存在着差异,实际上 DOM 也是如此,这给开发者带来了很多麻烦,通过标签名找元素,以及阻止事件默认行为,光是 IE6 自己都有一种以上的写法。

正是因为大家意识到当时浏览器缺乏标准,导致了很多精力的浪费,现在的浏览器厂商都朝着 W3C DOM 的标准实现。另外,在那段混乱的时间,也有为了解决各浏览器之间的差异而出现的 JS 库,比如 jQuery,它将某些功能封装,通过判断运行时的浏览器特性,来分别执行不同的 JS 代码。jQuery 风靡一时,以至于现在都还有不少人用,如果有读者现在或者以后从事前端开发,很有可能还会接触它(当然我觉得还有一个很重要的一个原因是它的 API 设计得的确很好用)。

不得不提一点,在 HTML5 里,如果要判断某个输入是否必须输入,已经不需要用 JS 了,在我们的例子里,我们的 <textarea> 也可以直接添加 required 属性表示必须输入

<textarea name="content" required></textarea>

但为了引出 JS 这个话题,所以就稍微麻烦了一点。我们现在的校验需求比较简单,如果还要求字数,或者对输入的文字有要求,比如必须带中文等,面对更加灵活复杂的需求时,也依然只有 JS 才能胜任。

另外,HTML5 里 required 属性的写法,也提现了与 XML 的不同,标准 XML 必须有属性名和属性值,假如按照 XML (或者 XHTML)的写法,上面代码就应该写作

<textarea name="content" required="reqruired"></textarea>

本章的完整代码看这里

人人都能看懂的全栈开发教程——JavaScript by Chris Yue is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

微信赞赏码

写作累,服务器还越来越贵
求分担,祝愿好人一生平安
天使打赏人

发表评论

− 6 = 3