第一个JavaScript程序
课程    JavaScript基础教程

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

1、编写第一个嵌入网页的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网页文件,浏览器会显示下图所示的内容:

21.png

在用户名和登录密码输入域随意输入内容,然后用鼠标单击【验证】按钮,浏览器会弹出对话框,显示最近输入的用户名的名称。

22.png

JS脚本程序就是下面的代码:

<script type="text/javascript">
             function verify(){
                     alert(document.getElementById("username").value)
      }
</script>

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

2、  初识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代码,就可正确执行。


读者留言
最新
推荐
用手机学习课程

手机、电脑同步学

用浏览器扫描二维码,即可下载APP。

郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。
  • 备案号:鲁ICP备15001146号
  • @1997-2018 潍坊米粒花网络技术有限公司版权所有