001-在HTML中嵌⼊JavaScript脚本的三种⽅式-回顾学习
JavaScript是Web的原始脚本语⾔，在默认情况下，<script>元素包含或引⽤JavaScript代码。如果要使⽤不标准的脚本语⾔，如VBScript，就必须⽤type属性指定脚本的MIME类型，例如：
<script type="text/vbscript"></script>
type 属性的默认值是 ”text/javascript“。
⽬录结构如下图所⽰：
<img alt="" data-cke-saved-src="img-blog.csdn/20170824172304471" src="img-blog.csdn/20170824172304471" />下载地址:
<!-- 在HTML中嵌⼊JavaScript脚本的第⼀种⽅式中内容如下 -->
<html>
<head>
<meta charset="utf-8" />
<title>在HTML中嵌⼊JavaScript脚本的第⼀种⽅式</title>
</head>
<body>
<!--
1.这是HTML的注释，不是JavaScript注释
2.JavaScript是⼀种脚本语⾔，什么是脚本语⾔?
如果⼀个编程语⾔执⾏的时候不需要进⾏提前的编译，
该语⾔的⽬标程序是以⼀种‘普通⽂本’的形式保存，
这种编程语⾔统⼀都可以被纳⼊脚本语⾔。java不是脚本语⾔。
脚本语⾔⼀般都是遵守⾃上⽽下的顺序依次‘解释’执⾏。
3.需求：
当⽤户点击‘hello’按钮的时候，执⾏⼀段JavaScrip代码
4.JavaScript脚本语⾔是⼀种基于事件驱动型的编程语⾔。
当发⽣某个特殊的事件之后，调⽤⼀段特殊的JavaScript程序。
当然，在JavaScript中有很多事件，其中有⼀个⾮常常⽤的事件，叫做⿏标单击事件，英语单词是click，
在JavaScript当中每⼀个事件都会对应⼀个事件句柄，每⼀个事件句柄的命名规则是：on事件，
也就是说⿏标单击事件click对应的事件句柄是onclick
通常⼀个‘事件句柄’是⼀个HTML标签的属性。
5.以下程序的执⾏原理：
当HTML页⾯打开的时候，不会执⾏JavaScript代码
当⽤户点击hello按钮的时候，发⽣了⿏标单击事件 ->
此时‘注册’在onclick后⾯的JavaScript代码会被浏览器⾃动调⽤，然后解释执⾏。
6.JavaScript中有⼀个内置对象，可以直接拿来使⽤，该内置对象的名字叫做：window，注意：必须全部⼩写。
window内置对象代表的是当前浏览器窗⼝。
7.window内置对象有⼀个函数叫做：alert("消息")；该函数的作⽤是弹出消息窗⼝！
8.JavaScript语句也要以“;”结尾，但这不是必须的！[这是⼀种编程好习惯！]
9.JavaScript中的字符串可以使⽤单引号或者双引号括起来。
10.window.alert("消息")；或者window.alert('消息')；或者alert('消息')；或者alert("消息");
window可以省略不写！
-->
<input type="button" value="hello1" onclick="window.alert('helloworld!');"/>
<input type="button" value="hello2" onclick='window.alert("HelloWorld!");window.alert("弹⽬");'/>
<input type="button" value="hello2" onclick='window.alert("HelloWorld!");window.alert("弹⽬");'/>
<input type="button" value="hello3" onclick='alert("llllllllllllll");'/>
</body>
</html>
<!-- 在HTML中嵌⼊JavaScript脚本的第⼆种⽅式中内容如下 -->
<script type="text/javascript">
alert("<--------");
</script>
<html>
<head>
<meta charset="utf-8">
<title>在HTML中嵌⼊JavaScript脚本的第⼆种⽅式</title>
<script type="text/javascript">
alert("111111");
</script>
</head>
<body>
<!-- 使⽤脚本块，在脚本块中编写javascript代码 -->
<script type="text/javascript">
//javascript注释在运⾏阶段不起作⽤，只是对javascript脚本程序的解释说明。
//javascript单⾏注释
/*
javascript多⾏注释
*/
//暴露在脚本块中的javascript代码在浏览器
//打开的时候遵守⾃上⽽下的顺序依次解释执⾏
window.alert("222222");
//alert函数会导致阻塞加载，⽤户只有点击了弹出框的确认按钮，alert⽅法才会执⾏结束。
alert("333333");
</script>
<!-- 这⾥的按钮什么时候显⽰？在以上的所有弹出框执⾏结束之后 -->
<input type="button" value="我是⼀个⼩按钮，我在上⾯所有弹框弹出后显⽰" />
<!-- 在⼀个⽹页中script脚本块的编写位置没有限制，编写数量没有限制 -->
<script type="text/javascript">
alert("444444");
alert("555555");
</script>
</body>
</html>
<script type="text/javascript">
alert("666666");
</script>
<!-- 在HTML中嵌⼊JavaScript脚本的第三种⽅式中内容如下 -->
<html>
<head>
<title>在HTML中嵌⼊JavaScript脚本的第三种⽅式</title>
<meta charset="utf-8">
</head>
<body>
<!-- 在HTML的任意位置引⼊外部独⽴的js脚本⽂件 -->
<!-- 引⼊js脚本⽂件的时候，脚本程序会遵守⾃上⽽下的顺序依次解释执⾏ -->
<!-- 这⾥的src属性的路径是⼀个相对路径，相对于当前⽽⾔，从当前路径下出发开始common.js⽂件 --> <script type="text/javascript" src="common.js"></script>
<!-- 不要下⾯这样编写，这样编写当前不会出错，但是影响后续的程序 -->
<!-- <script type="text/javascript" src="my.js" /> -->
<input type="button" value="I'am sky!" />
<!-- ⼀个js⽂件可以被引⼊多次 -->
<script type="text/javascript" src="common.js"></script>
<!-- 除了引⼊单独的js⽂件之外，还可以单独编写脚本块 -->
<script type="text/javascript">
alert("单独编写脚本块！");
</script>
<!-- 可以再次引⼊其他js⽂件 -->
<script type="text/javascript" src="my.js"></script>
<script type="text/javascript" src="my.js">
//这⾥不要编写任何程序，不会执⾏
alert("会不会执⾏呢？");
</script>
</body>
</html>
⽂件：my.js 与⽂件：common.js 与⽂件：在HTML中嵌⼊JavaScript脚本的第三种⽅式在同⼀路径下⽂件my.js中的内容：
window.alert("我是my.js！");
⽂件common.js中的内容：
window.alert("我爱天空！");
window.alert("我爱海洋！");
js脚本编程入门window.alert("我爱⽣活！");
希望对你有帮助，祝你有⼀个好⼼情，加油！
若有错误、不全、可优化的点，欢迎纠正与补充；转载请注明出处！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论