簡介：

參照學習菜鳥教程上例子所做本JavaScript知識點歸納之XXX。

1.JavaScript直接寫入HTML輸出流：

<script>
	document.write("<h1>這是由JavaScript寫入的語句</h1>");
</script>

<button type="button" onclick="alert('歡迎來到JavaScript世界')">點選有驚喜</button>

3.javascript能夠改變HTML原定元素內容

<p id="demo">我是一串文字君</p>
<button type="button" onclick="fontShow();">點選改變文字</button>

<script>
function fontShow(){
fonts=document.getElementById("demo");//找到元素
fonts.innerHTML="我是改變了的文字";//改變內容
}
</script>

4.JavaScript改變HTML影象

<img id="myImage" onclick="changeImage()" src="img/pic_off" width="100" height="100">
<script>
function changeImage(){
element = document.getElementById("myImage");//獲取圖片id
if(element.src.math("on")){
element.src="img/pic_off)";
}else{
element.src="img/pic_on";
}
}
</script>
 

http://www.runoob.com/try/try.php?filename=tryjs_lightbulb這個在菜鳥教程上有例子的效果

5.javascript能夠改變HTML元素樣式

<p id="demo">我的將要改變樣式的文字</p>
<button type="button" onclick="changeFont()">點選改變文字樣式</button>
<script>
function changeFont(){
fonts=document.getElementById("demo");//找到元素
fonts.style.color="red";//改變顏色
}
</script>
 

6.javascript驗證輸入

<p>如果不是數字，瀏覽器會彈出提示框</p>
<input id="demo" typ="text">
<button type="button" onclick="number()">點選判斷是否為數字</button>
<script>
function number(){
var number = document.getElementById("demo").value;
if(number==""||isNaN(number)){
alert("不是數字");
}
}
</script>