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;
			}
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽6 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github