现在位置: 首页 / JavaScript / JavaScript / 正文

JS入门：第一个JavaScript程序

JavaScript是脚本语言，它可以直接嵌入到HTML网页，由浏览器一边解释一边执行。JavaScript程序一般是在客户端运行，当然也可以在服务器端运行。例如：Node.js就可以让JavaScript运行在服务端，使用JavaScript技术构建WEB服务器。为便于描述，JavaScript也称为JS，后面内容的JavaScript和JS都是指JavaScript脚本语言。

编写第一个嵌入网页的JS程序

编写第一个嵌入HTML网页的JS程序：
<html>
<head>
    <title>这是登录页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function verify(){
alert(document.getElementById("username").value)
}
</script>
</head>
<body>
       <h3>请输入用户名和密码登录系统</h3>
       <hr>
      <form action="/login.jsp">
          <p> 用户名：<input type="text" id="username" name="username" maxlength="20" value=""/></p>
          <p> 登录密码：<input type="password" id="psw" name="psw" maxlength="10" value=""/></p>
          <p><input type="button" value="验证" onclick="verify()"/></p>
     </form>    
</boyd>
<html>

上面的网页代码可以使用记事本、也可以使用高级一点的编辑工具，如Noteped++、EditPlus、UltraEdit、Dreamweaver等软件。

将上面的代码保存为HTML网页文件。在浏览器打开保存的HTML网页文件，浏览器会显示下图所示的内容：
在用户名和登录密码输入域随意输入内容，然后用鼠标单击【验证】按钮，浏览器会弹出对话框，显示最近输入的用户名的名称。
JS脚本程序就是下面的代码：
<script type="text/javascript">
function verify(){
alert(document.getElementById("username").value)
}
</script>

JS脚本代码必须放置在<script> 与</script> 标签之间。<script>标签的type属性表示脚本语言是javascript。<script>标签可放置在HTML 页面的<body>或者<head>标签内。

初识JavaScript

JavaScript是一种基于对象和事件驱动的脚本语言，它可以嵌入到HTML网页内，让网页具有与用户互动的功能，并且可以动态操作网页内容，发送请求到服务器，并接收和处理服务器返回的内容。
JavaScript语法结构类似Java语言，但JavaScript的语法规则要比Java语言的语法规则简单的多，若在Java语言基础上，再学习JavaScript就会很容易上手。
JavaScript的简单性主要体现在下面几个方面：
（1）JavaScript代码是解释执行
JavaScript代码不需要编译即可运行，代码的运行由JS解释器来执行，JS解释器一边读取代码一边解释并执行代码。
（2）JavaScript是弱数据类型
在JavaScript中，变量声明采用弱类型，即变量在使用前不需要做声明，而是由解释器在运行时检查其数据类型。例如下面的语句：
value = 26.9
name = “26.9”

执行上述代码时，解释器会自动将value转换为浮点类型的变量，name转换为字符串类型的变量。

（3）JavaScript可以方便操作各类对象
JavaScript是基于对象的脚本语言，它本身提供了非常丰富的内部对象给开发人员使用，同时它也可以使用浏览器提供的对象。
例如：document对象就是浏览器提供的对象，它可以让开发人员通过JS脚本，操作 HTML 页面中的所有元素。
<script type="text/javascript">
function verify(){
alert(document.getElementById("username").value)
}
</script>
在上面的JS脚本代码中，就使用了document对象，该对象在JS脚本内不需要实例化可以直接使用。document对象的getElementById()方法可以通过HTML元素的id值获取对应的HTML元素，在浏览器环境中，每个HTML元素都是一个对象，都可以在JS脚本内使用。
（4）JavaScript是跨平台的脚本语言
JavaScript代码的执行依赖于浏览器，与浏览器所在系统环境无关，只要计算机能运行浏览器，并且浏览器支持JavaScript代码，就可正确执行。