JS入门:第一个JavaScript程序
- JavaScript
- 2024-07-01
- 237热度
- 0评论
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网页文件,浏览器会显示下图所示的内容:
![](http://www.milihua.com/wp-content/uploads/2024/07/图片2.png)
在用户名和登录密码输入域随意输入内容,然后用鼠标单击【验证】按钮,浏览器会弹出对话框,显示最近输入的用户名的名称。
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代码,就可正确执行。