web前端框架技术:实验三

文章目录

新建


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;
			}
相关推荐
JSLove几秒前
常见 npm 报错问题
前端·npm
sunbyte1 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子2 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua6 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
嘗_21 分钟前
暑期前端训练day5
前端
uncleTom66628 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥31 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF42 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man44 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬1 小时前
理解JS事件环(Event Loop)
前端·javascript