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>

继续学习

新建文件

<!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>

提交重置代码

自动运行

章节

笔记

提问

课件

反馈

捐赠