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;
			}
相关推荐
jiangzhihao05151 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI3 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front4 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie4 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀5 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻5 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树5 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔5 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城5 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04126 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端