JavaScript書寫格式
- CSS書寫格式
- 行內樣式: 寫在標簽內部
- 內嵌樣式（內聯樣式）寫在一對head標簽中的style標簽中
- 外鏈樣式：寫在一個單獨的
.css文件中，再導入進來
- JavaScript書寫格式
- 行內樣式：寫在標簽內部
- 內嵌樣式（內聯樣式）寫在一對head標簽中script標簽中
- 外鏈樣式：寫在一個單獨的
.js文件中，再導入進來
行內樣式：寫在標簽內部
<div onclick="alert('BNTang');">我是Div</div>
內嵌樣式（內聯樣式）寫在一對head標簽中script標簽中
<script>
alert('BNTang');
</script>
外鏈樣式：寫在一個單獨的.js文件中，再導入進來，新建01-JavaScript書寫格式.js
01-JavaScript書寫格式.js
alert('BNTang');
在01-JavaScript書寫格式.html文件中通過script標簽的src屬性進行引入
<script src="01-JavaScript書寫格式.js"></script>
JavaScript書寫格式注意點
- 不推薦直接將JavaScript代碼書寫到標簽內部
- 默認情況下瀏覽器會從上至下的解析網頁，所以如果將JavaScript寫到一對head標簽中的script標簽中，並且需要通過JavaScript代碼操作界面上的元素，那么就不能直接書寫JavaScript代碼，否則無效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-JavaScript書寫格式</title>
<script>
var oDiv = document.querySelector("div");
var text = oDiv.innerText;
alert(text);
</script>
</head>
<body>
<div>BNTang</div>
</body>
</html>
- 如果想將JavaScript寫到一對head標簽中的script標簽中，並且需要在JavaScript代碼中操作界面上的元素，那么必須加上
window.onload = function(){操作界面元素的JavaScript代碼}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-JavaScript書寫格式</title>
<script>
window.onload = function () {
var oDiv = document.querySelector("div");
var text = oDiv.innerText;
alert(text);
}
</script>
</head>
<body>
<div>BNTang</div>
</body>
</html>
- window.onload的含義：等到界面上所有的內容都加載完畢再執行{}中的代碼
- 由於默認情況下瀏覽器會從上至下的解析網頁，所以如果想通過JavaScript操作界面上的元素只需要等到元素被加載解析之后操作就可以了，所以我們還可以將JavaScript代碼寫到body結束標簽的前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-JavaScript書寫格式</title>
</head>
<body>
<div>BNTang</div>
<script>
var oDiv = document.querySelector("div");
var text = oDiv.innerText;
alert(text);
</script>
</body>
</html>
- 如果通過外鏈式導入.js文件，並且需要在.js文件中操作界面上的元素，那么如果是在head標簽中的script標簽中導入的，必須在.js文件中加上window.onload，如果是在body結束標簽前面導入的，那么就不用添加window.onload
01-JavaScript書寫格式.js
window.onload = function () {
var oDiv = document.querySelector("div");
var text = oDiv.innerText;
alert(text);
}
01-JavaScript書寫格式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-JavaScript書寫格式</title>
<script src="01-JavaScript書寫格式.js"></script>
</head>
<body>
<div>BNTang</div>
</body>
</html>
body結束標簽前面導入
01-JavaScript書寫格式.js
var oDiv = document.querySelector("div");
var text = oDiv.innerText;
alert(text);
01-JavaScript書寫格式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-JavaScript書寫格式</title>
</head>
<body>
<div>BNTang</div>
<script src="01-JavaScript書寫格式.js"></script>
</body>
</html>
- 如果需要在一對script標簽中編寫JavaScript代碼，那么就不能同時通過script標簽再導入其它的.js文件，否則書寫的JavaScript代碼無效
<script src="01-javascript書寫格式.js">
alert("外鏈式script標簽中編寫的JavaScript代碼");
</script>