大内高手社区

标题: JavaScript 用法汇总 [打印本页]

作者: 火龙果 时间: 2021-11-18 17:55
标题: JavaScript 用法汇总
　　一、<script>标签

　　如需在HTML页面中插入JavaScript，请使用<script>标签。

　　<script>和</script>会告诉JavaScript在何处开始和结束。

　　<script>和</script>之间的代码行包含了JavaScript:
　　

[JavaScript] 纯文本查看 复制代码

<script>

alert("我的第一个 JavaScript");

</script>

　　您无需理解上面的代码。只需明白，浏览器会解释并执行位于<script>和</script>之间的JavaScript代码

　　那些老旧的实例可能会在<script>标签中使用type="text/javascript"。现在已经不必这样做了。JavaScript是所有现代浏览器以及HTML5中的默认脚本语言。

　　二、<body>中的JavaScript

　　在本例中，JavaScript会在页面加载时向HTML的<body>写文本：

　　实例

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

<body>

.

.

<script>

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落</p>");

</script>

.

.

</body>

</html>

　　三、JavaScript函数和事件

　　上面例子中的JavaScript语句，会在页面加载时执行。

　　通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

　　如果我们把JavaScript代码放入函数中，就可以在事件发生时调用该函数。

　　您将在稍后的章节学到更多有关JavaScript函数和事件的知识。

　　四、在<head>或者<body>的JavaScript

　　您可以在HTML文档中放入不限数量的脚本。

　　脚本可位于HTML的<body>或<head>部分中，或者同时存在于两个部分中。

　　通常的做法是把函数放入<head>部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

　　五、<head>中的JavaScript函数

　　在本例中，我们把一个JavaScript函数放置到HTML页面的<head>部分。

　　该函数会在点击按钮时被调用：

　　实例
　

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction()

{

    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

</script>

</head>

<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button">尝试一下</button>

</body>

</html>

　 六、<body>中的JavaScript函数

　　在本例中，我们把一个JavaScript函数放置到HTML页面的<body>部分。

　　该函数会在点击按钮时被调用：

　　实例
　

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button">尝试一下</button>

<script>

function myFunction()

{

    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

</script>

</body>

</html>

　　七、外部的JavaScript

　　也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

　　外部JavaScript文件的文件扩展名是.js。

　　如需使用外部文件，请在<script>标签的"src"属性中设置该.js文件：

　　实例

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

<body>

<script src="myScript.js"></script>

</body>

</html>

　　你可以将脚本放置于<head>或者<body>中，放在<script>标签中的脚本与外部引用的脚本运行效果完全一致。

　　myScript.js文件代码如下：

[JavaScript] 纯文本查看 复制代码

function myFunction()

{

    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

　　外部脚本不能包含<script>标签。

欢迎光临大内高手社区 (http://bbs.tedu.cn/)