天天看點

如何引入javascript腳本代碼

作者:寒笛過霜天

如何引入javascript腳本代碼

1 通過<script></script>标記對導入

<script language="javascript" type="text/javascript">

document.write("Hello World!");

</script>

2 通過<script></script>标記src屬性導入

<script language="javascript" type="text/javascript" src="test.js"></script>

test.js檔案内容

document.write("Hello World!");

3 通過javascript僞URL引入

<form name="MyForm">

<input type="text" name="MyText" value="滑鼠點選"

onclick="javascript:alert('滑鼠已點選文本框!')">

</form>

注意: "javascript:"可以省略

4 通過HTML文檔事件處理程式引入

<script language="javascript" type="text/javascript">

function ClickMe()

{

alert("滑鼠已單擊按鈕");

}

</script>

<form name="MyForm">

<input type=button name="MyButton" value="滑鼠單擊" onclick="ClickMe()">

</form>

單引号和雙引号的問題解決:

var username = "xuchenkai";

onclick='show(\""+username+"\")'

function ClickMe(username)

{

alert("滑鼠已單擊按鈕"+username);

}

以上javascript腳本代碼可以簡化為

<script type="text/javascript">

document.write("Hello World!");

</script>

注意:javascript腳本标簽中type屬性是必須的

加載腳本位置<head></head>和<body></body>标記之間的位置

language:使用的語言腳本, 早期方式

type:使用的語言腳本, 主流方式

編寫JavaScript的流程

布局:HTML+CSS

屬性:确定要修改哪些屬性

事件:确定使用者做哪些操作(産品設計)

編寫JavaScript:在事件中,用JavaScript來修改頁面元素的樣式

如何将html代碼封裝(轉換)成JS實作調用?

步驟一:打開Dreamweaver或者類似軟體,事先寫好需要封裝的HTML代碼。

步驟二:打開站長工具裡面的HTML/JS轉換頁面, 将需要封裝的HTML代碼轉換成JS代碼

将HTML代碼字元引号前加上"\"(相當于addslashes()函數), 包含在document.writeln("")方法中。

如: document.writeln("<table id=/"tab1/"border=/"1/"width=/"500/"><tbody><tr><td>1</td><td>Blue</td><td>27</td></tr><tr><td>2</td><td>張三</td>

<td>23</td></tr><tr><td>3</td><td>李四</td><td>28</td></tr><tr><td>4</td><td>王五</td><td>25</td></tr><tr><td>5</td><td>張偉</td><td>24</td></tr></tbody></table>");

步驟三:在Dreamweaver中建立一個JS檔案, 将轉換後的JS代碼複制粘貼進去,儲存為banner.js檔案。

步驟四:加載banner.js

<script src="banner.js" type="text/javascript"></script>