詳解JavaScript實(shí)現(xiàn)JS彈窗的三種方式

更新時(shí)間：2022年01月10日 15:39:23 作者：執(zhí)久呀

這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)JS彈窗的三種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>

一、前言

html和css的學(xué)習(xí)大致完成，我們進(jìn)入重要的JavaScript學(xué)習(xí)階段

二、什么是JavaScript，有什么用?

Javascript是運(yùn)行在瀏覽器上的腳本語(yǔ)言。簡(jiǎn)稱JS。

他的出現(xiàn)讓原來靜態(tài)的頁(yè)面動(dòng)起來了，更加的生動(dòng)。

三、HTML嵌入JavaScript的方式：

第一種方式：

1、要實(shí)現(xiàn)的功能:

用戶點(diǎn)擊以下按鈕，彈出消息框。

2、彈窗

JS是一門事件驅(qū)動(dòng)型的編程語(yǔ)言，依靠事件去驅(qū)動(dòng)，然后執(zhí)行對(duì)應(yīng)的程序。在JS中有很多事件，其中有一個(gè)事件叫做:鼠標(biāo)單擊，單詞:click。并且任何事件都會(huì)對(duì)應(yīng)一個(gè)事件句柄叫做:onclick?！咀⒁?事件和事件句柄的區(qū)別是:事件句柄是在事件單詞前添加一個(gè)on。】，而事件句柄是以HTML標(biāo)簽的屬性存在的。

3、οnclick=js代碼"，執(zhí)行原理是什么?

頁(yè)面打開的時(shí)候，js代碼并不會(huì)執(zhí)行，只是把這段ss代碼注冊(cè)到按鈕的click事件上了。等這個(gè)按鈕發(fā)生click事件之后，注冊(cè)在onclick后面的js代碼會(huì)被瀏覽器自動(dòng)調(diào)用。

4、怎么使用JS代碼彈出消息框?

在JS中有一個(gè)內(nèi)置的對(duì)象叫做window, 全部小寫，可以直接拿來使用，window代表的是瀏覽器對(duì)象。 window對(duì)象有一個(gè)函數(shù)叫做:alert，用法是:window.alert("消息");這樣就可以彈窗了。

5、window.可以省略

下面兩個(gè)等價(jià)
<input type="button" value="hello" onclick="window.alert('hello world')"/>
<input type="button" value="hello" onclick="alert('hello world')"/>

6、設(shè)置多個(gè)alert可以一直彈窗

<input type="button" value="hello" onclick="alert(hello java")
                                            alert(hello python')
                                            alert('hello javaScript!)"/>

JS中的字符串可以使用雙引號(hào)，也可以使用單引號(hào)。JS中的一條語(yǔ)句結(jié)束之后可以使用分號(hào)";"也可以不用。

<input type="button" value="hello" onclick="alert('hello world')"/>無分號(hào)，內(nèi)單外雙引號(hào)
<input type="button" value="hello" onclick= 'alert("hello jscode");'/> 有分號(hào)，內(nèi)雙外單引號(hào)

整體代碼：

 
<!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的腳本塊在一個(gè)頁(yè)面當(dāng)中可以出現(xiàn)多次。
javascript的腳本塊出現(xiàn)位置也沒有要求。

如：

  
 <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有阻塞當(dāng)前頁(yè)面加載的作用。(阻擋，直到用戶點(diǎn)擊確定按鈕。

在腳本塊當(dāng)中的程序，在頁(yè)面打開的時(shí)候執(zhí)行并且遵守自上而下的順序依次逐行執(zhí)行。 (這個(gè)代碼的執(zhí)行不需要事件，即運(yùn)行就開始)

第三種方式：

引入外部獨(dú)立的js文件如，外部文件路徑

 
<!doctype	html>	
  <html>
    <head>
       <title>HTM中嵌入JS代碼的第三種方式:引入外部獨(dú)立的js文件。</title>
   </head> 
  <body>
  <!--這個(gè)src表示路徑，在text目錄的1.js文件  -->
   <script type="text/javascript" src="text/1.js"></script> 
  </body>
 </html>

在需要的位置引入js腳本文件

引入外部獨(dú)立的js文件的時(shí)候，js文件中的代碼會(huì)遵循自上而下的順序依次逐行執(zhí)行。

①在引入的外部腳本中又加alert，則這個(gè)不會(huì)生效

②需要另外寫一個(gè)才會(huì)生效

如：

 
<!doctype	html>	
  <html>
    <head>
       <title>HTM中嵌入JS代碼的第三種方式:引入外部獨(dú)立的js文件。</title>
   </head> 
  <body>
  <!--這個(gè)src表示路徑，在text目錄的1.js文件  -->
   <script type="text/javascript" src="text/1.js">
  <!--下面這個(gè)不會(huì)起作用 -->
     window.alert("hello");
  </script> 
<!--需要另外寫一個(gè)腳本才會(huì)生效，如： -->
<script type="text/javascript">
 window.alert("hello");
 </script>
  </body>
 </html>