详解JavaScript实现JS弹窗的三种⽅式
⽬录
⼀、前⾔
⼆、什么是JavaScript，有什么⽤?
三、HTML嵌⼊JavaScript的⽅式：
第⼀种⽅式：
第⼆种⽅式：
第三种⽅式：
总结
⼀、前⾔
html和css的学习⼤致完成，我们进⼊重要的JavaScript学习阶段
⼆、什么是JavaScript，有什么⽤?
Javascript是运⾏在浏览器上的脚本语⾔。简称JS。
他的出现让原来静态的页⾯动起来了，更加的⽣动。
三、HTML嵌⼊JavaScript的⽅式：
第⼀种⽅式：
1、要实现的功能:
⽤户点击以下按钮，弹出消息框。
2、弹窗
JS是⼀门事件驱动型的编程语⾔，依靠事件去驱动，然后执⾏对应的程序。在JS中有很多事件，其中有⼀个事件叫做:⿏标单击，单词:click。并且任何事件都会对应⼀个事件句柄叫做:onclick。【注意：事件和事件句柄的区别是：事件句柄是在事件单词前添加⼀个on。】，⽽事件句柄是以HTML标签的属性存在的。
3、οnclick=js代码"，执⾏原理是什么?
页⾯打开的时候，js代码并不会执⾏，只是把这段ss代码注册到按钮的click事件上了。等这个按钮发⽣click事件之后，注册在onclick后⾯的js代码会被浏览器⾃动调⽤。
4、怎么使⽤JS代码弹出消息框?
js脚本编程入门
在JS中有⼀个内置的对象叫做window,    全部⼩写，可以直接拿来使⽤，window代表的是浏览器对象。  window对象有⼀个函数叫做:alert，⽤法是:window.alert("消息")；这样就可以弹窗了。
5、window.可以省略
下⾯两个等价
<input type="button" value="hello" onclick="window.alert('hello world')"/>
<input type="button" value="hello" onclick="alert('hello world')"/>
6、设置多个alert可以⼀直弹窗
<input type="button" value="hello" onclick="alert(hello java")
alert(hello python')
alert('hello javaScript!)"/>
JS中的字符串可以使⽤双引号，也可以使⽤单引号。JS中的⼀条语句结束之后可以使⽤分号";"也可以不⽤。
<input type="button" value="hello" onclick="alert('hello world')"/>⽆分号，内单外双引号
<input type="button" value="hello" onclick= 'alert("hello jscode");'/> 有分号，内双外单引号
整体代码：
<!doctype html>
<htm1>
<head>
<title>JavaScript第⼀种</title>
</head>
<body>
<input type="button" value="hello" onclick="window.alert('hello world')"/>
<input type="button" value="hello" onclick='window.alert("hello jscode")'/>
<input type="button" value="hello" onclick="alert('hello zhangsan');
alert('hello lisi');
alert('hello wangwu')"/>
</body>
</html>
弹窗效果：
第⼆种⽅式：
脚本如：
<script type="text/javascript">
window.alert("Hello JavaScript")
</script>
javascript的脚本块在⼀个页⾯当中可以出现多次。
javascript的脚本块出现位置也没有要求。
如：
<script type="text/javascript">
window.alert("head ");
window.alert("Hello World!")
</script>
<!doctype html>
<html>
<head>
<title>HTML中嵌⼊JS代码的第⼆种⽅式</title>
</head>
<body>
<script type="text/javascript">
window.alert("min");
window.alert("Hello World!")
</script>
<input type="button"value="按钮"/>
</body>
</html>
<script type="text/javascript">
window.alert("last");
window.alert("Hello World!")
</script>
alert有阻塞当前页⾯加载的作⽤。(阻挡，直到⽤户点击确定按钮。
在脚本块当中的程序，在页⾯打开的时候执⾏并且遵守⾃上⽽下的顺序依次逐⾏执⾏。    (这个代码的执⾏不需要事件，即运⾏就开始)第三种⽅式：
引⼊外部独⽴的js⽂件如，外部⽂件路径
<!doctype html>
<html>
<head>
<title>HTM中嵌⼊JS代码的第三种⽅式：引⼊外部独⽴的js⽂件。</title>
</head>
<body>
<!--这个src表⽰路径，在text⽬录的1.js⽂件  -->
<script type="text/javascript" src="text/1.js"></script>
</body>
</html>
在需要的位置引⼊js脚本⽂件
引⼊外部独⽴的js⽂件的时候，js⽂件中的代码会遵循⾃上⽽下的顺序依次逐⾏执⾏。
①在引⼊的外部脚本中⼜加alert，则这个不会⽣效
②需要另外写⼀个才会⽣效
如：
<!doctype html>
<html>
<head>
<title>HTM中嵌⼊JS代码的第三种⽅式：引⼊外部独⽴的js⽂件。</title>
</head>
<body>
<!--这个src表⽰路径，在text⽬录的1.js⽂件  -->
<script type="text/javascript" src="text/1.js">
<!--下⾯这个不会起作⽤ -->
window.alert("hello");
</script>
<!--需要另外写⼀个脚本才会⽣效，如： -->
<script type="text/javascript">
window.alert("hello");
</script>
</body>
</html>
总结
本篇⽂章就到这⾥了，希望能够给你带来帮助，也希望您能够多多关注的更多内容!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。