亲宝软件园·资讯

展开

在HTML中嵌入JS代码的3种方式总结

innocence_123 人气:0

一,在HTML中嵌入JS代码的第一种方式:行间事件

行间事件是指将JavaScript函数写到HTML元素中的执行事件。

1、JavaScript 是一种事件驱动型的编程语言,通常都是在发生某个事件的时候,去执行某段代
码。其中,事件包括很多,例如:鼠标单击事件 click,鼠标经过事件 mouseover 等。并且在 JavaScript 当中任何一个事件都有对应的事件句柄(事件发生时要进行的操作)。

例如:click 对应的事件句柄是 onclick,mouseover 对应的 事件句柄是 onmouseover。

2、怎么使用 JS 代码弹窗?

在 JS 当中有一个内置的 BOM 对象,可以直接拿来使用,全部小写:window

其中 window 对象有一个方法/函数叫做 alert,这个函数专门用来弹出对话框。

window.alert('hello world!');

通过下面这个代码可以知道:JS 中的字符串可以使用单引号括起来。

(1)语句各自独占一行,通常可以省略结尾的分号;

(2)程序结束或者右花括号(})之前的分号也可以省略;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="hello1" onclick="window.alert('Hello World');" />
		<input type="button" value="hello2" onclick='window.alert("Hello jQuery");
		window.alert("Hello Kitty")
		window.alert("你好,中国")'/>
		<!-- window.可以省略 -->
		<input type="button" value="Hello3" onclick="alert('你好,世界');" />
	</body>
</html>

二,在HTML中嵌入JS代码的第一种方式:页面script 标签嵌入,脚本块的方式。

脚本块的位置随意,没有限制!

使用工具 ,不打尖括号 <,可以出提示

<script type="text/javascript"></script>
<script src="" type="text/javascript" charset="utf-8"></script>

打了尖括号 提示无法出现

<script></script>

在脚本块中,代码执行的顺序都是从上到下的

<!-- 脚本块的位置随意,没有限制! -->
<script type="text/javascript">
alert("Page Begin")
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在 HTML 中嵌入 JS 代码的第二种方式:页面 script 标签嵌入,脚本块的方式</title>
</head>
<body>
<!-- 这个按钮 1 会先被加载到浏览器内存。 -->
<input type="button" value="按钮 1" />
<!-- 脚本块 -->
<!-- 一个页面中脚本块可以出现多个。 -->
<script type="text/javascript">
/*在这里直接编写 JS 代码,这些 JS 代码在页面打开的时候自上而下的顺序依次逐行
执行!*/
alert("Hello World"); 
alert("Hello Kitty"); 
alert("Hello China"); 
</script>
<!-- 最后加载这个按钮 2 -->
<input type="button" value="按钮 2" />
</body>
</html>
<script type="text/javascript">
alert("Page End")
</script>

三、在 HTML 中嵌入 JS 的第三种方式:引入外部独立的 JS 文件

这是一堆 JS 代码,这些 JS 代码在 HTML 引入的时候,遵循自上而下的顺序依次逐行执行

alert("Hello World")
alert("Hello Kitty")

引入外部独立的 CSS 文件,这个标签 link 中属性是 href

<link rel="stylesheet" type="text/css" href=""/>

引入外部独立的 JS 文件,script 标签引入 js 文件的时候,是 scr 属性

<script src="js/1.js" type="text/javascript" charset="utf-8"></script>

提问:JS文件能不能引入第二次?

答:能,但是引入第二次,这个操作没有意义,测试结果:只要引入一次 JS 文件,JS 文件中的代 码就会全部执行一遍

<script src="../js/1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/1.js" type="text/javascript" charset="utf-8">
alert("hello world 1 这里能执行吗~~~~"); //这里的代码不会执行
</script>

提问:单独的脚本块能执行吗?

答:能,经过测试,发现其会不断循环执行。

<script type="text/javascript" >
alert("hello world 单独的脚本块能执行吗~~~~"); 
</script>

总结

加载全部内容

相关教程
猜你喜欢
用户评论