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

57 阅读1分钟

注:事件和事件句柄的区别是:事件句柄 是在 事件 单词前添加一个on

而且事件句柄是以HTML标签的属性存在的;

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

那么如何通过点击按钮这个事件弹出消息框呢?

在JS中有一个内置的对象叫做window,全部小写,可以直接拿来使用,window代表的是浏览器对象;

window对象有一个函数叫做:alert,用法是:window.alert("消息");这样就可以弹窗了;

示例如下:

HTML中嵌入JS代码的第一种方式

<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')"/>

脚本块


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

格式为:

示例如下:

HTML中嵌入JS代码的第二种方式

引入外部独立的js文件


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

导入的语法如下:<scrip type="text/javascript" src="test.js"></script>

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

还有一点:一定要注意区分,在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代码:

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