第二十九章：Java编程之JavaScript

JavaScript

     JavaScript是一种在网页浏览器中执行的脚本语言，也是HTML的好基友，有了它，HTML才有灵魂。HTML本身只是内容的展示，没法做很多动态的事情，如用户点击某个按钮的时候，跳转到某个页面，也没法在用户输入错误的邮箱地址后及时给用户错误提示。

本文目标

     因为JavaScript也是一门完整的编程，涵盖的内容也非常多，但是因本专栏主要精力是介绍Java编程，所以不会全面深入去介绍JavaScript，但是会介绍常见的一些功能特性，满足日常Java编程的需求。

入门样例

代码简析：

1. 第8行，向页面中添加了一个按钮（button）。通过指定onclick事件来调用JavaScript函数：alert。最终实现的效果是弹出一个对话框，具体效果如下：

上面是最简单的使用JavaScript函数的方法，不过一般平常使用，则还是采用下面这种方式：

代码简析：

1. 第5到9行，增加script标签，在里面定义JavaScript函数，这里定义了一个clickButton函数，效果就是弹出一个对话框，显示“嘿嘿嘿”。
2. 第13行，设置onclick属性，让按钮点击时调用clickButton函数。

点击按钮后的效果图：

数据校验

     对于用户输入的数据提前进行校验，保证用户提交的数据准确无误，这是JavaScript常见的用途之一，下面我们看看这个是如何做的：

代码简析：

1. 上方代码，大部分是HTML的，如果大家对HTML还不大了解，可以看本专栏第二十七章，里面会有详细的介绍。
2. 第18行，通过设置onsubmit属性，当用户点击“提交”按钮时，会先调用check函数，如果这个函数返回true才能正常提交，否则不能。
3. 第6到13行，定义了一个用于校验数据的函数，命名为check。
4. 第7行 ，从当前HTML页面中获取到邮箱输入框中的内容，并赋值给赋值给一个常量：email。
5. 第8行，判断email是否是空的。如果为空，则执行第9行弹出提示框，执行第10行返回false，表示校验不通过。

界面效果：

如果用户在邮箱里没有输入任何信息就点击了“提交”按钮，那么就会看到如下界面：

留个问题：上面校验了用户是否输入了邮箱，那要校验是否输入了密码，代码应该怎么写？欢迎在评论区留言，看看你答得对不对？

改变HTML页面内容

    HTML本身是固定内容的展示，如果我们希望页面上的信息会变化，那就只能用JavaScript来操作了。JavaScript可以修改页面上任何信息，包括背景、文字、图片等等。

1、修改文字

下面举个例子来介绍下如何修改页面内容：

代码简析：

• 第18行，增加了一个按钮，按钮点击时会调用check函数。
• 第6行，定义了一个变量count，用于记录点击的数量。
• 第8行，定义了一个check函数。
• 第9行，将count值加1。
• 第10行，修改文字控件counterValue的内容，显示count变量的值。

效果：

  不断地点击“加1”按钮，

2、改变背景

代码简析：

• 第14行，增加了一个按钮，按钮点击时会调用changeBackground函数，传入参数“#FF0000”，表示修改成红色。
• 第15行，增加了一个按钮，按钮点击时会调用changeBackground函数，传入参数“#00FF00”，表示修改成绿色。
• 第6行，定义了一个changeBackground函数，带有一个输入参数：colorStr，用于指定颜色。
• 第7行，修改文本显示控件myText的背景。

效果：

最上面是原始效果；中间的背景修改成了红色；最小面的背景修改成了绿色。

页面跳转

    在HTML页面里面，除了通过链接可以跳转到其他页面上，还可以通过JavaScript来控制页面跳转。用户可以在点击按钮或者图片等东西的时候，让浏览器跳转到其他页面上，那具体怎么做呢？ 看下面的代码：

代码简析：

1. 第17行，增加了一个按钮，点击后会调用函数：gotoBaidu。
2. 第18行，增加了一个按钮，点击后会调用函数：gotoToutiao。
3. 第6到8行，定义了gotoBaidu函数，里面通过修改window.location.href的值为百度网址来进行跳转。
4. 第10到12行，定义了gotoToutiao函数，里面通过修改window.location.href的值为头条网址来进行跳转。

动画

      大家平时看到很多炫酷的网页，其实都是用JavaScript来写的动画。通过代码来控制页面上的物体的位置、颜色、形状等，就能得到非常不错的效果。不过一个炫酷的效果，通常代码也非常多，本文不希望拿一个复杂的例子直接把大家带坑里去，所以就尽可能简化表述，当然功能就不会很炫酷了。（大家如果想学习炫酷的页面动画，网上会有很多资料，确实想了解的可以评论留言。）

     本文教大家做个秒表的网页，效果图如下：

看看代码具体是怎么写的？

实现思路：

1、用户点击开始按钮时，启动一个内部定时器，定时执行，并将时间累积值不断地累加。每次累加后，都更新界面上的时间显示控件显示出最新的累积时间。

2、用户点击暂停按钮时，就暂停定时器。

代码简析：

1. 第40行，添加了一个文本控件（控件id定义为：time_text），用来显示秒表当前的时间。
2. 第41行和42行，分别添加了两个按钮，用来启动和暂停秒表。
3. 第6到9行，定义了几个变量，用来存放待显示的时间（包括时分秒等）。
4. 第11到13行定义了启动秒表的函数start，用来定时调用timer函数执行时间计算和刷新页面秒表时间显示。
5. 第15到31行，主要是把毫秒数转化为时分秒+毫秒，并最终刷新页面显示信息。
6. 第33到35行，定义函数stop用来暂停定时器。暂停后，页面就不再刷新了。

声明： 因本文前期在头条发布并且当时名称为“十代码农”，所以截图带有十代码农的水印。