1. 什么是JavaScript?
JavaScript 是用来验证网页中表单信息合法性的。JavaScript 是一种脚本语言,提供用户交互 ,动态更改内容 ,数据验证 。
2.将JavaScript嵌入网页
可以将 JavaScript 语句插入 HTML 文档,方式
如下:
使用 <SCRIPT> 标签将语句嵌入文档
将 JavaScript 源文件链接到 HTML 文档中
1)使用 Script 标签
如:<HTML>
<HEAD>
<SCRIPT language = "JavaScript">
document.write("欢迎来到 JavaScript 世界");
</SCRIPT>
</HEAD>
<BODY>
<P>尽情享受学习的快乐!!!
</BODY>
</HTML>
(2)使用外部 JS 文件
外部 JavaScript 文件可以链接到 HTML 文档中
SCRIPT 标签的 SRC(源文件)属性可用于包括此外部文件
<script language=“JavaScript” src= “文件名.js">
</script>
如:
<HTML>
<HEAD>
<TITLE>使用外部文件</TITLE>
<SCRIPT SRC = "test.js"></SCRIPT>
</HEAD>
<BODY>
<P>以上文本是通过访问外部 JavaScript 文件显示的
</BODY>
</HTML>
3.申明变量
同时声明和初始化变量
var a= 10;
“var” - 用于声明变量的关键字
“a” - 变量名
通常是用:parseInt() 和 parseFloat() 函数将字符串分别转换为整型和小数
常用语句:
条件语句分为if语句,if-else语句、if的嵌套;
多分支语句switch根据表达式的值,进入不同的分支执行;
for循环;do-while;while
定义函数:
function 函数名( 参数1,参数2,… )
{
语句;
}
如:
function sum ( one, two)
{
var result = one + two;
return result;
}
调用函数:
函数调用一般和表单元素的事件一起使用,调用格式为:
事件名=“函数名” ;
如:<INPUT name=“add” type=“button” value=“加法"
onClick="sum(2,5)">
Eval( )函数可以计算某个计算表达式的值,
isNaN( )函数可用于判断是否是一个数字
4.JavaScript 对象简介
a) 浏览器对象
浏览器窗口windon,文档 document ,url地址等
b)脚本对象
String字符串对象 , Date日期对象 , Math数学对象等
c)HTML 对象
各种HTML标签:段落<P>,图片<IMG>,超链接<A>等
设置定时器,使用window对象的setTimeout( )方法
如:DATE 对象中自动刷新时间
<SCRIPT language="JavaScript">
function disptime( )
{
var time = new Date( ); //获得当前时间
var hour = time.getHours( ); //获得小时、分钟、秒
var minute = time.getMinutes( );
var second = time.getSeconds( );
var apm="AM"; //默认显示上午: AM
if (hour>12) //按12小时制显示
{
hour=hour-12;
apm="PM" ;
}
if (minute < 10) //如果分钟只有1位,补0显示
minute="0"+minute;
if (second < 10) //如果秒数只有1位,补0显示
second="0"+second;
document.myform.myclock.value= hour+":"+minute+":"+
second+" "+apm;
var myTime = setTimeout("disptime( )",1000);
}
</SCRIPT>
(1)浏览器对象简介
onFocus获得焦点事件,表示获得鼠标光标, onBlur失去焦点事件,刚好与之相反
打开窗口使用window对象的open( )方法
a) history 对象
方法:
Back ( ) 方法相当于后退按钮
forward ( ) 方法相当于前进按钮
go (1)代表前进1页,等价于forward( )方法;
go(-1) 代表后退1页,等价于back( )方法
如:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>历史记录</title>
</head>
<body>
<a href="test.html">test.html</a>
<a href="javaScript:history.forward()">前进</a>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>测试</title>
<script language="javascript">
<!--
function back()
{
history.go(-1);
}
-->
</script>
</head>
<body>
测试页面...
<a href="javaScript:back();" onMouseOver="javaScript:window.status='俏皮的话'">后退</a>
</body>
</html>
b) Location 对象
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>陕西美景</title>
<script language="javascript">
<!--
function viewPP()
{
var ppdiv=document.getElementById("pp");
ppdiv.innerHTML="<img src='"+document.sxfrm.sp.value+"' width='300' height='350'>";
}
-->
</script>
</head>
<body onLoad="javaScript:window.status='欢迎来到陕西'">
<div id="pp">
</div>
<form action="" method="get" name="sxfrm">
浏览陕西景点:
<select name="sp" onChange="viewPP();">
<option value="m1.jpg">太白山</option>
<option value="m2.jpg">兵马俑</option>
<option value="m3.jpg">青鸟</option>
</select>
</form>
</body>
</html>
5.创建一个表单
单行文本框 <input type="text" >
多行文本框 <textarea name="textarea"></textarea>
密码框 <input type="password" >
多选按钮 <input type="checkbox" >
单选按钮 <input type="radio" >
隐藏域 <input type="hidden" >
文件域 <input type="file" >
跳转菜单 <select name="menu1" > </select>
图像域 <input type="image" >
列表菜单 <select name="select"></select>
提交按钮 <input type=“submit” >
复位按钮 <input type=“reset" >
按钮 <input type=“button" >
分享到:
相关推荐
The Principles of Object-Oriented JavaScript 1st Edition If you've used a more traditional object-oriented language, such as C++ or Java, JavaScript probably doesn't seem object-oriented at all. It ...
javaScript1.md
javascript1课件.ppt欢迎下载
本书结合JavaScript 1 5和Jscript 5 5 由浅入深 循序渐进地全面介绍了JavaScript知识体系及编程设计技巧 全书分4篇 共30章 内容涵盖了JavaScript语法 JavaScript核心内容 JavaScript高级以及JavaScript应用等内容 对...
这个合集包含了从基础到高级的完整教程,分为三个部分,分别对应文件 `javascript 1-20章.pdf`、`javascript 21-33章.pdf` 和 `javascript 34章.pdf`,旨在帮助读者系统地掌握这门广泛应用于Web开发的重要脚本语言。...
本书共分四个部分,第1部分帮助读者快速入手,掌握基本的JavaScript编程要点;第2部分介绍JavaScript的发展和技术背景;第3部分深入探索JavaScript,介绍了语法、值、运算符、布尔类型、数字、字符串、语句、异常...
精通javascript精通javascript精通javascript精通javascript精通javascript
1. **基础语法**:讲解了变量、数据类型、运算符、流程控制(如条件语句、循环)、函数等基本元素,帮助初学者建立JavaScript编程的基本框架。 2. **对象和原型**:深入探讨了JavaScript的面向对象特性,包括对象...
本资源包包含了多个关于JavaScript的重要参考资料,包括“JavaScript权威指南(英文版).chm”、“javascript5.5.chm”、“css2gb.chm”以及“JavaScript对象与数组参考大全 .chm”。 首先,我们来看“JavaScript权威...
《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第...
[Addison-Wesley Professional] Effective JavaScript 编写高质量JavaScript代码的68个有效方法 (英文版) [Addison-Wesley Professional] Effective JavaScript 68 Specific Ways to Harness the Power of ...
JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)...
Publication Date: December 6, 2012 | ISBN-10: 0321812182 | ISBN-13: 978-0321812186 | Edition: 1 “It’s uncommon to have a programming language wonk who can speak in such comfortable and friendly ...
Free JavaScript Editor编辑器是一个先进的Java脚本编辑器,验证器和调试器对于初学者和专家。 免费的JavaScript编辑器是用于专业编辑...我就没发现这个和1st javascript editor 有何区别(除了版本号和名字之外)
1. DOM操作:JavaScript API允许开发者通过DOM来创建、修改和查询HTML或XML文档结构。例如,`document.createElement()`用于创建新的HTML元素,`element.appendChild()`用于将元素添加到父元素,而`querySelector()`...
1. **JavaScript_ProjectSystem.msi**:这是一个项目系统组件,它为Visual Studio提供了管理和构建JavaScript项目的功能。JavaScript Project System使得开发者能够在IDE中创建、编辑、调试和构建基于JavaScript的...
JavaScript是一种广泛应用于网页和网络应用的编程语言,尤其在客户端脚本方面扮演着核心角色。JavaScript手册是学习和掌握这门语言的重要参考资料。手册通常包含了语言的基础语法、数据类型、控制结构、函数、对象、...
JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)...
JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案...