❗HTML引入JavaScript的三种常用方式汇总❗

引言

JavaScript是一门脚本语言,虽然名字里有Java,但是和Java没有一点关系,它原名是LiveScript;现在的前端JavaScript可以说是异常火爆,但是博主本人并不准备向前端发展,但是对前端的一些基础知识还是必须有所了解的;
上一篇博客:❗HTML引入CSS的三种常用方式汇总❗ 已经介绍了HTML嵌入CSS的三种方式,这里就来介绍HTML如何嵌入JavaScript;

ps:由于作者规划以后往java后端发展,所以对于前端的知识只是了解了部分主要内容,以应用为主,所以如果有错误请各位及时指正!


事件句柄

JS是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应的程序;

这里就拿鼠标点击(click)事件来举例子;
每个每个事件都会有对应的事件句柄,就比如这个click例子,事件句柄为:onclick
注:事件和事件句柄的区别是:事件句柄 是在 事件 单词前添加一个on
而且事件句柄是以HTML标签的属性存在的;

所以我们这个例子要实现的功能就是:用户点击以下按钮,弹出消息框

那么如何通过点击按钮这个事件弹出消息框呢?
      在JS中有一个内置的对象叫做window,全部小写,可以直接拿来使用,window代表的是浏览器对象;
      window对象有一个函数叫做:alert,用法是:window.alert("消息");这样就可以弹窗了;

示例如下:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入JS代码的第一种方式title>
	head>
	<body>
		<input type="button" value="hello" onclick="window.alert('hello zhangsan')
													window.alert('hello lis')
													window.alert('hello wangwu')"/>
				
		
		<input type="button" value="hello" onclick="alert('hello zhangsan')
													alert('hello lis')
													alert('hello wangwu')"/>
	body>
html>

脚本块

这种方法和之前CSS总结中提到的内部CSS样式很像,也很简单
格式为:

<script type="text/javascript">
脚本块
script>

示例如下:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入JS代码的第二种方式title>
		
		<script type="text/javascript">
			/*
				暴露在脚本块当中的程序,在页面打开的时候执行,
				并且遵守自上而下的顺序依次逐行执行。(这个代
				码的执行不需要事件)
			*/
			window.alert("head............");//alert函数会阻塞整个HTML页面的加载
		script>
	head>
	<body>
		
		<input type="button" value="我是一个按钮对象1" />
		<script type="text/javascript">
			window.alert("Hello World!");
			window.alert("Hello JavaScript!");
		script>
		<input type="button" value="我是一个按钮对象2" />
	body>
html>

引入外部独立的js文件

为了让HTML页面和js脚本更好的分离,可以将js脚本单独保存到一个*.js的文件中,然后在HTML中导入即可,
导入的语法如下:

再次强调:结束部分一定要有,否则网页不会显示!

还有一点:一定要注意区分,在CSS中引入文件通过link,使用的是href="URL(统一资源定位器)"
                                                                                    而JS使用的是src="URL(统一资源定位器)"
千万不要弄混!

js代码:

window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js!");
window.alert("ending");

html代码:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入JS代码的第三种方式:引入外部独立的js文件title>
	head>
	<body>
		
		<script type="text/javascript" src="js01.js">
			// 这里写的代码不会执行,执行的是js01文件
			// window.alert("Test");
		script>
		
		<script type="text/javascript">
			alert("hello jack!");
		script>
	body>
html>

总结

汇总一下这三点:

  • 事件句柄
  • 脚本块
  • 引入外部独立的js文件

JS的内容相对CSS和HTML还有很多,这也只是一个起点,希望我们能一起加油!

你可能感兴趣的:(JavaWeb,学习笔记,javascript,html,html5)