javascript的功能

DHTML

在浏览器中引入javascript的最初目的是实现所谓的动态网页 Dynamic HTML 功能,即DHTML,可简单理解为一些界面特效、内容生成与交互控制。

最初的javascript是仅能在浏览器中运行的脚本语言,经过数十年的发展,javascript已经发展成为可以完全独立运行的程序设计语言

本教程仅讲解浏览器里运行的javscript,并且只限于基本语法,即所谓plain js 或 Vanilla js

简单交互

  • 通知(alert)
  • 确认(confirm)
  • 询问(prompt)

无须借助表单form和后端脚本,在浏览器中即能实现用户与Web页面之间的交互


注意: 上述三种交互方式,在现代前端开发中是不被鼓励的,请读者在接下来的示例中思考其中的原因

通知 (alert)

Export
HTML
Result

如果仅仅出调试的目的,使用console.log()方法更好,它会在浏览器的开发者工具的console标签栏中输出

确认(confirm)

Export
HTML
Result

运行结果: 给用户一个是否继续的选择

提问(prompt)

Export
HTML
Result

运行结果: 允许用户输入数据,并通过脚本接收

窗口与页面

在现代WEB前端编程中,上述三个函数都被弃用了,因为它们生成的界面都是基于窗口的(windows)而不是基于页面(page)

窗口属于操作系统的界面元素,不受浏览器的控制,也就是说无法用css去美化窗口,也无法用js去改变窗口的行为

如果是基于页面的界面元素(html),则可以使用css、js等前端技术进行全面修饰与控制

在当前的前端开发库中,通常都提供了这些函数的替代物,譬如模态弹出层(modal)等

表单交互

Export
HTML
Result

获知表单中用户的输入,可根据输入执行不同的代码

客户端数据检验

Export
HTML
Result

在表单的输入中,通常需要对输入的数据进行检查和检验,譬如用户名必须为英文,长度不得大于20等

客户端检验 与 服务端检验

  • 服务端数据校验:由客户端的表单发送到服务端后(1个网络请求),由服务端脚本进行校验。如果数据不符合规则,一般需要再发起1个网络请求读取错误信息,故等待时间较长,用户体验较差
  • 客户端数据校验:在客户端的表单发送到服务端之前,先由客户端的脚本进行校验,如果不符合规则,则直接报错,无需向服务端发起网络请求,故用户体验较好,且节约网络资源

注意: 恶意用户完全可以通过在浏览中禁用Javascript的方式来绕过客户端数据校验。因此,一般而言都会执行双重校验

页面特效

javascript的能力

  • 程序编程能力
  • 动态修改页面的内容、结构和样式的能力
  • 调用来自浏览器环境所提供的系统功能或硬件接口的能力,例如窗口、操作系统、摄像头等

results matching ""

    No results matching ""