HTML嵌入JS代码的三种方式

一、HTML嵌入JS代码的第一种方式:直接加一个事件句柄跟表达式

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML嵌入JS代码的第一种方式title>
	head>
	<body>
		<input type="button" value="hello" onclick="window.alert('hello ')" />
	body>
html>
  1. 用户点击按钮,弹出消息框。
  2. 任何一个事件都会对应一个事件句柄叫做:onclick ,以属性方式存在。
  3. 鼠标单击事件:click。
  4. JS中有个内置对象叫windows,windows有个函数叫alert,就是用于消息弹窗的。

二、HTML嵌入JS代码的第二种方式:脚本块

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML嵌入JS代码的第二种方式title>
	head>
	<body>
		<script type="text/javascript">
			window.alert("hello");
		script>
		<input type="button"/>
	body>
html>

  1. 脚本块中的代码不需要事件就能执行。
  2. 脚本块中的代码,在页面打开时按自上而下顺序逐行执行。
  3. 写在脚本块中的alert()会阻塞html后续代码的执行
  4. 脚本块出现位置没有要求,在html代码中可以出现多个脚本块。

三、HTML嵌入JS代码的第三种方式:外部引入js文件

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script type="text/javascript" src="js/1.js">script>
	body>
html>

你可能感兴趣的:(JavaScript,javascript,html,前端)