天天看点

如何引入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>