1购啄、JS的位置和使用方法
一般來說JS的位置是任意的，可以在head嘱么，可以在body狮含，也可以在其他任意地方。
"index.html"
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>熱身</title>
<script>
document.getElementById("p2").style.color="red";
</script>
</head>
<body>
<p id="p1">我是第一段文字</p>
<p id="p2">我是第二段文字</p>
<script type="text/javascript">
document.write("hello");
document.getElementById("p1").sty.color = "blue";
</script>
</body>
</html>
在這里你甚至可以不寫代碼曼振，把js代碼寫在其他文件里辉川，到時(shí)再index.html文件里調(diào)用就好了，是不是很方便
調(diào)用方法<script scr = "url">默認(rèn)是本地文件夾
"index.html"
<!DOCTYPE HTML>
<html>
<head>
<script src = "script.js">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引用JS文件</title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
"script.js"
//請(qǐng)寫入JS代碼
alert("JS代碼");
document.write("引用JS文件!");
2拴测、DOM(document)的使用
文檔對(duì)象模型 (DOM) 是HTML和XML文檔的編程接口乓旗。它提供了對(duì)文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪問集索，從而改變文檔的結(jié)構(gòu)屿愚，樣式和內(nèi)容汇跨。DOM 將文檔解析為一個(gè)由節(jié)點(diǎn)和對(duì)象（包含屬性和方法的對(duì)象）組成的結(jié)構(gòu)集合。簡言之妆距，它會(huì)將web頁面和腳本或程序語言連接起來穷遂。
1、最簡單的輸出
document.write("String")
2娱据、常用的獲取<p>元素的列表
var p=document.getElementById("p-ID");
獲得元素列表后對(duì)其可進(jìn)行許多操作
更改文本內(nèi)容innerHTML
p.innerHTML = "String";
改變HTML樣式
p.style.color= "color"; //字體顏色
p.style.width = "300px"; //一行寬度
p.style.fontSize = "20px"; //字體大小
p.style.background="blue"; //背景顏色
顯示與隱藏
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display = "none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display = "block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做為一個(gè)Web開發(fā)師來說蚪黑，如果你想提供漂亮的網(wǎng)頁、令用戶滿意的上網(wǎng)體驗(yàn)中剩，JavaScript是必不可少的工具忌穿。</p>
<form>
<input type="button" onclick="hidetext()" value="隱藏內(nèi)容" />
<input type="button" onclick="showtext()" value="顯示內(nèi)容" />
</form>
</body>
</html>
通過獲取類名更改CSS樣式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className屬性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使網(wǎng)頁顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互功能。</p>
<input type="button" value="添加樣式" onclick="add()"/>
<p id="p2" class="one">JavaScript使網(wǎng)頁顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互功能结啼。</p>
<input type="button" value="更改外觀" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className = "one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className = "two";
}
</script>
</body>
</html>
3掠剑、一些雜七雜八的以后會(huì)補(bǔ)充
alert("String"); //消息提醒
confirm("String") ;//確定消息框，確定返回true郊愧，否定返回false
prompt();//消息對(duì)話框朴译，獲取用戶輸入的內(nèi)容
window.open('目的網(wǎng)址','打開方式','顯示細(xì)節(jié)')；
window.close(); // window是個(gè)比較廣泛的類属铁，用處用法比較多眠寿，以后補(bǔ)齊
