javascript基础学习-语法学习(三)

最新推荐文章于 2024-08-07 19:32:42 发布

IluckySi

最新推荐文章于 2024-08-07 19:32:42 发布

阅读量1k

点赞数

分类专栏： ------javascript 文章标签： javascript 基础语法事件 onSubmit

本文链接：https://blog.csdn.net/sidongxue2/article/details/23627747

版权

------javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

上两篇关于javascript的博客简单介绍了一下javascript的变量,运算符和基本语句,下面接着介绍.
1.javascript中数组的用法.

   <html>
	<head>
		<title>ArrayTest</title>
		<script language="javascript">
			var array=new Array(3);
			array[0]=1;
			array[1]=2;
			array[2]=3;
			array[3]=4;
			document.write(array[0]);
			document.write(array[1]);
			document.write(array[2]);
			document.write(array[3]);
		</script>
	</head>
  </html>

结果是页面显示1234,在javascript中不存在数组越界的错误.
2.javascript中关于操作字符串的charAt方法.

 <html>
	<head>
		<title>StringTest</title>
		<script language="javascript">
			var str="StringTest";
			document.write(str.charAt(2));
		</script>
	</head>
  </html>

结果是页面显示r.
3.javascript中function函数的使用.

 <html>
	<head>
		<title>FunctionTest</title>
		<script language="javascript">
			function test() {
				alert("FunctionTest!");
			}
			test();
		</script>
	</head>
 </html>

结果是弹出窗口FunctionTest.
5.javascript中事件的使用.
a.onLoad和onUnload事件.

  <html>
	<head>
		<title>EventTest1</title>
	</head>
	<body οnlοad="javascropt:alert('onLoad')" onUnload="javascript:alert('onUnload')">
	</body>
    </html>

结果是弹出窗口onLoad,当刷新此页面时,即此页面被替换了,页面会依次弹出onUnload和onLoad.
b.onSubmit事件.

 <html>
	<head>
		<title>EventTest2</title>
	</head>
	<body>
		<form name="EventTest2" action="EventTest1.html" onSubmit="return true">
			<input type="submit" value="ok">
		</form>
	</body>
    </html>

结果是显示一个button按钮,按ok按钮弹出onLoad窗口,其中onSubmit事件是提交表单之前触发的事件.
如果将return true改为return false,那么ok按钮无论怎么按都不会跳到action指向的html页面.

onSubmit事件的用途主要是表单的验证,看如下小程序.

   <html>
	<head>
		<title>EventTest3</title>
		<script language="javascript">
			function check(){
				if(document.form.username.value==""){
					alert("用户名不允许为空!");
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form name="form" action="EventTest1.html" onSubmit="return check()">
			<input type="text" name="username">
			<input type="submit" value="ok">
		</form>
	</body>
    </html>

结果显示一个文本框和一个button,如果文本框里什么内容都没有,点击button按钮,页面会做相应的提示.
c.onClick事件.

<html>
	<head>
		<title>EventTest4</title>
	</head>
	<body> 
		<image src="EventTest4.jpg"  onClick="alert('onClick')">
	</body>
    </html>

d.onMouseOnver和onMouseOut事件.

  <html>
	<head>
		<title>EventTest5</title>
	</head>
	<body> 
		<image src="EventTest4.jpg"  onMouseOver="alert('over')" onMouseOut="alert('out')">
	</body>
    </html>

事件是javascript中很重要的一部分内容,这里先简单介绍这些,以后会结合实际需求来深入学习javascript事件.