1、代碼位置
- HTML內(nèi)部：
位于 <script> 與 </script> 標(biāo)簽之間。可被放置在 HTML 頁面的 <body> 和 <head> 部分中。 - 外部單獨(dú)文件中，不需要 <script></script>標(biāo)簽，外部文件通常包含被多個(gè)網(wǎng)頁使用的代碼。
外部 JavaScript 文件的文件擴(kuò)展名是 .js。
如需使用外部文件，請(qǐng)?jiān)?<script> 標(biāo)簽的 "src" 屬性中設(shè)置該 .js 文件：
外部.js文件
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
<head>標(biāo)簽中：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一個(gè) JavaScript 函數(shù)";
}
</script>
</head>
<body>
<h1>我的 Web 頁面</h1>
<p id="demo">一個(gè)段落</p>
<button type="button" onclick="myFunction()">嘗試一下</button>
</body>
</html>
<body>標(biāo)簽中：
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 頁面</h1>
<p id="demo">一個(gè)段落</p>
<button type="button" onclick="myFunction()">嘗試一下</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一個(gè) JavaScript 函數(shù)";
}
</script>
</body>
</html>
2、輸出
JavaScript 輸出：
JavaScript 沒有任何打印或者輸出的函數(shù)。
JavaScript 可以通過不同的方式來輸出數(shù)據(jù)：
使用 window.alert() 彈出警告框。
使用 document.write() 方法將內(nèi)容寫到 HTML 文檔中。
可以直接寫到html頁面。也可以通過函數(shù)，整個(gè)頁面加載完成后執(zhí)行，會(huì)覆蓋整個(gè)html頁面。使用 innerHTML 寫入到 HTML 元素。
要訪問某個(gè)元素，可以在標(biāo)簽中指定id="id name"，然后使用document.getElementById("id name")獲取標(biāo)簽內(nèi)容。
document.getElementById("demo") 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。該方法是 [HTML DOM]中定義的。
innerHTML = "Paragraph changed." 是用于修改元素的 HTML 內(nèi)容(innerHTML)的 JavaScript 代碼。使用 console.log() 寫入到瀏覽器的控制臺(tái)。
通過瀏覽器的調(diào)試工具查看，F(xiàn)12，console。相比alert的方式，通過控制臺(tái)不會(huì)再打斷正常的顯示效果。
代碼demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript輸出</title>
</head>
<body>
<h1>JavaScript輸出示例</h1>
<p id="demo">段落示例</p>
<p>如果在文檔已完成加載后執(zhí)行 document.write，整個(gè) HTML 頁面將被覆蓋。</p><br>
<button type="button" onclick="over()">點(diǎn)擊覆蓋整個(gè)html頁面</button><br>
<script>
window.alert("使用window.alert()彈出警告框來顯示數(shù)據(jù)");
document.getElementById("demo").innerHTML="修改指定元素來獲取或插入數(shù)據(jù)";
document.write("使用document.write()寫入數(shù)據(jù)到html頁面上");
function over()
{
document.write("已執(zhí)行over函數(shù)中的document.write()");
}
a = 5;
b = 6;
c = a+b;
console.log(c+"使用console.log()寫到瀏覽去控制臺(tái)");
</script>
</body>
</html>
效果展示：
彈窗警告框.png
指定元素已修改.png
加載完成后覆蓋效果.png
console寫到控制臺(tái).png
