JavaScript实用案例

最新推荐文章于 2024-10-19 10:47:45 发布

原创最新推荐文章于 2024-10-19 10:47:45 发布 · 67 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #浏览器 #HTML #ViewUI

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用JavaScript进行前端表单验证的方法，并演示了如何输出浏览器信息。通过具体实例展示了如何利用JavaScript处理页面元素，包括事件绑定、DOM操作等。

使用案例

表单验证：

<html>
	<head>
		<script type="text/javascript">
			function check(username){
				if(username.length<=3){
					document.getElementById("usernameError").innerHTML=
					"<font color='red'>用户名长度需大于3</font>";
				} else{
					document.getElementById("usernameError").innerHTML="";
				}
			}
		</script>
	</head>
	<body>
		用户名：<input type="text" name="uName" onblur="check(this.value);"/>
		<span id="usernameError"></span>
	</body>
</html>

onblur代表元素失去焦点的时候触发的事件。

this关键字代表此标签，此时指input标签。this.value指input标签的value值。

document.getElementById(""); 按id获得元素。

innerHTML：设置两个标签之间的内容，这个内容是动态指定的。可以是<div>标签或<span>标签。

-------------------------------------------------------------------------------------------------------------

输出浏览器信息：

<html>
	<body>
		<script type="text/javascript">
			window.document.write("浏览器："+window.navigator.appName)
			document.write("<br>");
			document.write("浏览器版本："+parseFloat(navigator.appVersion))
		</script>
	</body>
</html>

window对象是浏览器窗口对象，是JavaScript中的根对象。window可以省略不写。

document是window对象的属性，而本身也是一个对象。是文档对象。

navigator是window对象的属性，而本身也是一个对象。浏览器对象。

-------------------------------------------------------------------------------------------------------------