web前端框架技术：实验三

文章目录

新建
task1
task2
task3
task4
task5
task6
问题
- 顺序问题
- if条件问题

新建

task1

<input>能直接写，不用必须放在form表单中

就是写个函数，给按钮设置点击事件

联系对象和对象事件处理函数的东西 就是 句柄
句柄命名一般是统一的，就是在事件前面加一个on
click 点击事件的句柄是 onclick

可以用这个，但是

但是我们学习新的知识

hello是赋值，hello（）是调用函数。你要是写成
bt1.onclick = hello();保存之后就会直接调用函数，不点按钮直接弹出告警框

task2

方法一：这两个方法是因为js是按照顺序执行的，可以写多个script标签

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a id="a" href="https://www.bilibili.com/">跳转到b站</a>
	</body>
	<script type="text/javascript">
		//console.log(a.href);//测试用id拿到超链接对象
		a.onclick = function (){
			var sel = confirm("确定跳转吗？");
			if(!sel){
				return false;
			}
		}
		</script>
</html>

方法二：预处理

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript">
		window.onload = function() {//这个是预处理，就是说先把整个界面执行，再来执行script。此时就认识id了
			a.onclick = function() {
				var sel = confirm("真的要跳转吗？")
				if(!sel) {
					return false;
				}
			}
		}
	</script>
	<body>
		<a id="a" href="https://www.bilibili.com/">跳转到b站</a>
	</body>
</html>

task3

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			document.oncontextmenu = function(){
				alert('已屏蔽右键');
				return false;//我对return的用法不懂
			}
		</script>
	</body>
</html>

task4

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form name="form1" method="post" action="ok.html">
			姓名：<input type="text" name="txtName" id="txtname">
			<input type="submit" name="button" id="button" value="提交">
		</form>
		
		<script type="text/javascript">
			form1.onsubmit = function (){
				if(form1.txtname.value == ''){
					alert("姓名不能为空！");
					txtname.focus();//聚焦到输入框
					return false;
				}
				return true;
			}
		</script>
	</body>
</html>

task5

先复制图片放进来

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		 <img id='dog' src="img/dog.jpg"/>
		 <script type="text/javascript">
		 	dog.onmouseover = function (){
		 		dog.src = "img/dog2.jpg";
		 	}
		 	dog.onmouseout = function (){
		 		dog.src = "img/dog.jpg";
		 	}
		 	dog.onclick = function (){
		 		alert("汪汪汪！")
		 	}
		 </script>
	</body>
</html>

task6

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		字符：<input type="text" id="text1"></br>
		键码：<input type="text" id="text2" value="">
		<script type="text/javascript">
			text1.onkeydown = function(){
				var code = event.keyCode;//event是事件，keyCode是他的一个属性，
				//作用是设置或获取与导致事件的按键关联的 Unicode 按键代码。
				if(this.value.length>=5){
					return false;
				}
				//console.log(code);
				text2.value = code;
			}
		</script>
	</body>
</html>

问题

顺序问题

所以，既然 script 这个标签在任何位置都能放，那为了以防万一运行不出来，那就直接放在下面

能写多个 script 标签
js是按顺序执行的在最开始执行的时候，还不认识下面定义的id

name不唯一，但是 id唯一！！

解决方法：预处理

就是说先把整个界面执行，再来执行script。

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript">
		window.onload = function() {//这个是预处理，就是说先把整个界面执行，再来执行script。此时就认识id了
			a.onclick = function() {
				var sel = confirm("真的要跳转吗？")
				if(!sel) {
					return false;
				}
			}
		}
	</script>
	<body>
		<a id="a" href="https://www.bilibili.com/">跳转到b站</a>
	</body>
</html>

if条件问题

我不知道为什么这个不行，但是我试了，如果是下面的代码，我点击 取消 ，还是会跳转到b站
if(sel){
				return true;
			}