溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關JavaScript實現JS彈窗的三種方式分別是什么，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
html和css的學習大致完成，我們進入重要的JavaScript學習階段
Javascript是運行在瀏覽器上的腳本語言。簡稱JS。
他的出現讓原來靜態的頁面動起來了，更加的生動。
1、要實現的功能:
用戶點擊以下按鈕，彈出消息框。
2、彈窗
JS是一門事件驅動型的編程語言，依靠事件去驅動，然后執行對應的程序。在JS中有很多事件，其中有一個事件叫做:鼠標單擊，單詞:click。并且任何事件都會對應一個事件句柄叫做:onclick。【注意:事件和事件句柄的區別是:事件句柄是在事件單詞前添加一個on。】，而事件句柄是以HTML標簽的屬性存在的。
3、οnclick=js代碼"，執行原理是什么?
頁面打開的時候，js代碼并不會執行，只是把這段ss代碼注冊到按鈕的click事件上了。等這個按鈕發生click事件之后，注冊在onclick后面的js代碼會被瀏覽器自動調用。
4、 怎么使用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>上述就是小編為大家分享的JavaScript實現JS彈窗的三種方式分別是什么了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
