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