4. java web 之 JavaScript

最新推荐文章于 2023-03-09 08:12:07 发布

Harden13up

最新推荐文章于 2023-03-09 08:12:07 发布

阅读量227

点赞数 1

本文链接：https://blog.csdn.net/Harden13up/article/details/88055430

版权

java web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript语言与Java并不相似。 <Script> ... </Script>

所以在head内的js一般要先执行完后，才开始渲染body页面。为了避免head引入的js脚本阻塞流浪器中主解析引擎对dom的解析工作，对dom的渲染，一般原则是，样式在前面，dom文档，脚本在最后面。遵循先解析再渲染再执行script这个顺序。 ---知乎用户

如果没有什么意外，html页面的文档流应该是顺序加载，假设<script>放在 header里的话，那么 html页面会先加载head，然后加载html 内容，这会造成html页面空白。。。

定时器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<!--点击开启关闭，分别调用两个js的函数-->
		<input type="button" value="开启定时器" onclick="startDinshiqi()" /><br />
		
		<h1 id="aaa" style="display: none;">计时到</h1>
		
		<input type="button" value="取消定时器" onclick="stopDingshiqi()"/><br />
		<script>
			//window 对象是一个最顶层对象
			function test(){
				var uh1 = document.getElementById("aaa")
				uh1.style.display = "block"
			}
			var timerID;
			function startDinshiqi(){
				var uh1 = document.getElementById("aaa")
				uh1.style.display = "none"
				timerID = setTimeout("test()",3000);
			}
			
			function stopDingshiqi(){
				clearTimeout(timerID);
			}
			
		</script>
	</body>
</html>

切换图片：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="点击切换图片" onclick="changeImg()" />
		<br />
		<img src="../img/222.jpg" id="img1" />
		
		<script>
			/*
				1. 事件: 点击事件 onclick
				2. 事件要触发函数: changeImg
				3. 在函数中
			*/
			function changeImg(){
//				alert("要切换了")
				var img = document.getElementById("img1");
				img.src = "../img/1-161104143944.gif";
			}
		</script>
	</body>
</html>

表单校验：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			确认事件
			事件触发函数
			函数操作元素
			
			校验用户名
				1. 当用户鼠标移动到输入框中时候, 请给用户一个提示
					事件: 焦点事件 onfocus
					触发函数
					函数里面要做一些事情
						span 给用户提示信息
						
				2. 当用户鼠标移开时候, 校验一下用户输入
					事件: 失去焦点  onblur
					触发函数
					函数要干事情:
						校验用户输入
						得到用户输入的值
						
				3. 当用户按键输入抬起的时候, 校验一下用户输入
		-->
		<script>
			//当onfocus（获得焦点）时，把span里的内容改为msg，即用户名长度不能小于6位)
			function showTips(spanID,msg){
				var span = document.getElementById(spanID);
				span.innerHTML = msg;
			}
			
			function checkUsername(){
				
				/*
				 alert(this)  每一个函数中都隐藏着一个this指针, 指向的是当前事件触发对象 
				*/
				var uValue = document.getElementById("username").value;
//				alert(uValue);
				var span = document.getElementById("span_username");
				if(uValue.length < 6){
					span.innerHTML = "对不起,太短啦!"
					return false;
				}else{
					span.innerHTML = "恭喜您,够用!"
					return true;
				}
			}
			
			function checkForm(){
				var flag = checkUsername();
				return flag;
			}
			
		</script>
	</head>
	<body>
		<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()">
			用户名:<input type="text" id="username" onblur="checkUsername()"  onfocus="showTips('span_username','用户名长度不能小于6位')" /><span id="span_username"></span> <br />
			<input type="submit" value="注册" />
		</form>
			
	</body>
</html>

http://www.runoob.com/js/js-howto.html 菜鸟教程