三種嵌入html方式
<!doctype html> <html> <head> <title>HTML中嵌入JS代碼的第一種方式</title> </head> <body> <!-- 1、要實現的功能： 用戶點擊以下按鈕，彈出消息框。 2、JS是一門事件驅動型的編程語言，依靠事件去驅動，然后執行對應的程序。 在JS中有很多事件，其中有一個事件叫做：鼠標單擊，單詞：click。並且任何 事件都會對應一個事件句柄叫做：onclick。【注意：事件和事件句柄的區別是： 事件句柄是在事件單詞前添加一個on。】，而事件句柄是以HTML標簽的屬性存在 的。 3、onclick="js代碼"，執行原理是什么？ 頁面打開的時候，js代碼並不會執行，只是把這段JS代碼注冊到按鈕的click事件上了。 等這個按鈕發生click事件之后，注冊在onclick后面的js代碼會被瀏覽器自動調用。 4、怎么使用JS代碼彈出消息框？ 在JS中有一個內置的對象叫做window，全部小寫，可以直接拿來使用，window代表的是瀏覽器對象。 window對象有一個函數叫做:alert，用法是：window.alert("消息");這樣就可以彈窗了。 5、JS中的字符串可以使用雙引號，也可以使用單引號。 6、JS中的一條語句結束之后可以使用分號“;”，也可以不用。 --> <input type="button" value="hello" onclick="window.alert('hello js')"/> <input type="button" value="hello" onclick='window.alert("hello jscode")'/> <input type="button" value="hello" onclick="window.alert('hello zhangsan') window.alert('hello lis') window.alert('hello wangwu')"/> <!-- window. 可以省略。--> <input type="button" value="hello" onclick="alert('hello zhangsan') alert('hello lis') alert('hello wangwu')"/> <input type="button" value="hello" onclick="alert('hello zhangsan'); alert('hello lis'); alert('hello wangwu');"/> </body> </html>
<!-- javascript的腳本塊在一個頁面當中可以出現多次。沒有要求。 javascript的腳本塊出現位置也沒有要求，隨意。 --> <script type="text/javascript"> // alert有阻塞當前頁面加載的作用。（阻擋，直到用戶點擊確定按鈕。） window.alert("first......."); </script> <!doctype html> <html> <head> <title>HTML中嵌入JS代碼的第二種方式</title> <!--樣式塊--> <style type="text/css"> /*css代碼*/ </style> <script type="text/javascript"> window.alert("head............"); </script> </head> <body> <input type="button" value="我是一個按鈕對象1" /> <!--第二種方式：腳本塊的方式--> <script type="text/javascript"> /* 暴露在腳本塊當中的程序，在頁面打開的時候執行， 並且遵守自上而下的順序依次逐行執行。（這個代 碼的執行不需要事件） */ window.alert("Hello World!"); // alert函數會阻塞整個HTML頁面的加載。 // JS代碼的注釋，這是單行注釋。 /* JS代碼的多行注釋。和java一樣。 */ window.alert("Hello JavaScript!"); </script> <input type="button" value="我是一個按鈕對象" /> </body> </html> <script type="text/javascript"> window.alert("last......."); </script> <!-- /** * * javadoc注釋，這里的注釋信息會被javadoc.exe工具解析提取生成幫助文檔。 */ -->
<!doctype html> <html> <head> <title>HTML中嵌入JS代碼的第三種方式：引入外部獨立的js文件。</title> </head> <body> <!--在需要的位置引入js腳本文件--> <!--引入外部獨立的js文件的時候，js文件中的代碼會遵循自上而下的順序依次逐行執行。--> <!-- <script type="text/javascript" src="js/1.js"></script> --> <!--同一個js文件可以被引入多次。但實際開發中這種需求很少。--> <!-- <script type="text/javascript" src="js/1.js"></script> --> <!--這種方式不行，結束的script標簽必須有。--> <!-- <script type="text/javascript" src="js/1.js" /> --> <!-- <script type="text/javascript" src="js/1.js"></script> --> <script type="text/javascript" src="js/1.js"> // 這里寫的代碼不會執行。 // window.alert("Test"); </script> <script type="text/javascript"> alert("hello jack!"); </script> </body> </html>