w3c之js學習總結

①JavaScript：改變 HTML 內容

<p id="demo">JavaScript 能改變 HTML 元素的內容。</p>

<script>
function myFunction(){
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改變內容
}
</script>

<button type="button" onclick="myFunction()">點擊這裏</button>

②JavaScript：改變 HTML 圖像
<script>
function changeImage(){
qian=document.getElementById('myimage')
if (qian.src.match("bulbon")){
qian.src="/i/eg_bulboff.gif";
}
else{
qian.src="/i/eg_bulbon.gif";
}
}
</script>

<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

<p>點擊燈泡來點亮或熄滅這盞燈</p>
③JavaScript：改變 HTML 樣式

<p id="demo">JavaScript 能改變 HTML 元素的樣式。</p>

<script>
function myFunction(){
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改變樣式
}
</script>
<button type="button" onclick="myFunction()">點擊這裏</button>

④JavaScript：驗證輸入 輸入的內容若不是數字，就會彈出提醒
<p>請輸入數字。若是輸入值不是數字，瀏覽器會彈出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction(){
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("Not Numeric");
}
}
</script>
<button type="button" onclick="myFunction()">點擊這裏</button>

⑤請使用 document.write() 僅僅向文檔輸出寫內容。
若是在文檔已完成加載後執行 document.write，整個 HTML 頁面將被覆蓋：

覆蓋 效果：點擊按鈕後以前在的文本全消失了，只剩下「糟糕！文檔消失了。」

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick="myFunction()">點擊這裏</button>

<script>
function myFunction()
{
document.write("糟糕！文檔消失了。");
}
</script>
⑥折行
document.write("Hello \
World!");
⑦變量的聲明 一條語句，多個變量

您能夠在一條語句中聲明不少變量。該語句以 var 開頭，並使用逗號分隔變量便可：

var name="Gates", age=56, job="CEO";

聲明也可橫跨多行：var name="Gates",age=56,job="CEO";