JavaScript 简介
JavaScript 是什么?
JavaScript 是一种广泛应用于客户端网页(浏览器)开发的脚本语言,如用来给 HTML 网页添加动态功能,比如响应用户的各种操作等。
JavaScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言,大部分情况下是由网页浏览器来执行的。
JavaScript 是美国 Sun 公司的注册商标,目前 Javascript 的最新版本为 1.9 版,遵循 Ecma 国际(前身为欧洲计算机制造商协会)的 ECMA-262标准(即ECMAScript),该版本还在不断发展中。
JavaScript 特点
脚本编写语言
JavaScript 是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript 是一种解释性语言,在浏览器执行的时候被逐行的翻译。
基于对象的语言
JavaScript 是一种基于对象的语言,同时也可以看作是面向对象的,这意味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
简单性
要使用了编写 JavaScript 是非常简单的,您无需安装特定的开发环境,只需要一个简单的记事本即可编写 JavaScript 脚本。它具有基本的程序语法和语言结构以及弱数据类型,而这些都是很容易学习和使用的。
安全性
JavaScript 是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失。
动态性
JavaScript 是动态的,它可以直接对用户的输入做出响应,无须经过 Web 服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,是指在网页中执行了某种操作所产生的动作,就称为“事件”(Event):比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的 JavaScript 事件响应。
跨平台性
JavaScript 是由网页浏览器来执行,与操作系统环境无关,只要能运行浏览器的计算机,并支持 JavaScript 的浏览器就可正确执行。
直接写入 HTML 输出
<html> <head> <script> alert('Hello, world'); </script> </head> <body> <p>...</p> </body> </html>
对事件的反应
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <button type="button" onclick="alert('你好!')">点我!</button> </body> </html>
改变 HTML 内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo"> 内容。 </p> <script> function myFunction() { x=document.getElementById("demo"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改变内容 } </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
改变 HTML 图像
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.gif"; } else { element.src="/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> <p>点击灯泡查看效果</p> </body> </html>
改变 HTML 样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo"> 改变 HTML 的样式。 </p> <script> function myFunction() { x=document.getElementById("demo") // 找到元素 x.style.color="blue"; // 改变样式 } </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
验证输入
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false} } } </script> </head> <body> <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>