文章目录
- 新建
- task1
- task2
- task3
- task4
- task5
- task6
- 问题
- 顺序问题
- if条件问题
新建
task1
<input>能直接写，不用必须放在form表单中
就是写个函数，给按钮设置点击事件
联系对象和对象事件处理函数的东西 就是 句柄
句柄命名一般是统一的，就是在事件前面加一个on
click 点击事件的句柄是 onclick
可以用这个，但是
但是我们学习新的知识
hello是赋值，hello（）是调用函数。你要是写成
bt1.onclick = hello();保存之后就会直接调用函数，不点按钮直接弹出告警框
task2
方法一：这两个方法是因为js是按照顺序执行的，可以写多个script标签
<!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>
方法二：预处理
<!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
<!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
<!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
先复制图片放进来
<!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
<!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。
<!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;}
