1、js是一门事件驱动型的编程语言;依靠事件去驱动,然后执行对应的程序。
2、 在js中有很多事件其中有一个事件叫做:鼠标单机;单词:click;且任何事件都会有一个事件句柄叫做:onclick;
3、事件和事件句柄区别:事件句柄是在事件单词前加on;而事件句柄是以HTML标签的属性存在的
4、onclick=”js代码”,执行原理: 页面打开时js代码并不会执行,只把JS代码注册到按钮的click事件上了,
等这个按钮发生click事件之后,注册在onclick后面的js代码会被浏览器自动调用
5、js代码弹出消息框: js中有一个内置的对象叫做:window,都是小写
window 代表浏览器对象,有一个函数:alert;
语法:window.alert(“消息”);弹窗出现
JavaScript嵌入HTML方式一:弹窗:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML嵌入代码方式1</title> </head> <body> <input type = "button" value="hello" onclick="window.alert('hello js')" /> <input type = "button" value="hello" onclick="window.alert('hello js') window.alert('hello zs') <!--window. 可以省去--> <input type = "button" value="hello" onclick="alert('hello js') alert('hello zs') </body> </html>
JavaScript嵌入HTML方式二:JavaScript脚本块:<script type=’text/javascript’></script>
JavaScript脚本块出现的位置没有要求,可以出现多次
暴露在JavaScript脚本块中的代码打开浏览器直接执行,遵守自上而下的顺序执行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML嵌入代码方式2</title> <!-- javascript 的脚本块在一个页面当中可以出现多次,没有要求 javascript 的脚本块出现的位置也没有要求,随意 --> <script type="text/javascript"> alert("first....") </script> </head> <body> <!--方式2:脚本块方式打开页面就执行--> <script type='text/javascript'> /* 暴露在脚本块当中的程序,在页面打开的时候执行 并且遵守自上而下顺序依次追行执行,这个代码执行不需要事件 */ window.alert("hello word"); //alert有阻挡当前页面加载的作用,直到用户点击确定按钮 window.alert("hello javaScript"); </script> <script type="text/javascript"> //js代码单行注释 /* js代码的多行注释 */ </script> <input type= "button" value="按钮对象" /> </body> </html> <script type="text/javascript"> alert("last....") </script>
JavaScript嵌入HTML方式三:在需位置映入JavaScript脚本文件
<script type="text/javascript" src="3.js/3.js">
<!--引入js文件的同时可以写代码。但是代码不执行,没有用--> </script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML嵌入代码方式3</title> </head> <body> <!--在需要的位置引入js脚本文件--> <!--引入外部独立的js文件时,技术文件中的代码会遵循自上而下的顺序依次执行--> <!--结束的</script> 标签必须要有--> <script type="text/javascript" src="3.js/3.js"> <!--引入js文件的同时可以写代码。但是代码不执行,没有用--> </script> <!--引入js文件时,同时可以引入脚本块--> <script type="text/javascript"> alert("hello...") </script> </body> </html>
原创文章,作者:306829225,如若转载,请注明出处:https://blog.ytso.com/272541.html