您当前的位置: 首页 >  Java

蓝不蓝编程

暂无认证

  • 0浏览

    0关注

    706博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

第二十九章:Java编程之JavaScript

蓝不蓝编程 发布时间:2021-09-10 07:20:26 ,浏览量:0

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用来暂停定时器。暂停后,页面就不再刷新了。

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

关注
打赏
1639405877
查看更多评论
立即登录/注册

微信扫码登录

0.0766s