學習JavaScript-簡單範例

Posted on Edited on In Views: Disqus:

 

1.修改Html Attributes

經由onclick事件，作兩張圖片互換動作

<!DOCTYPE html>
<html>
<body>
    <img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

    <p>Click the light bulb to turn on/off the light</p>

    <script>
    function changeImage() {
        //宣告一個image變數用來儲id為myImage的element
        var image = document.getElementById('myImage');

        //如果Attritute src裡有出現pic_bulbon.gif字串時則變圖
        if (image.src.match("pic_bulbon.gif")) {
            image.src = "pic_bulboff.gif";
        } else {
            image.src = "pic_bulbon.gif";
        }
    }
    </script>
</body>
</html>

 

2.修改CSS

<!DOCTYPE html>
<html>
<body>
    <h1>My First JavaScript</h1>

    <p id="demo">JavaScript can change the style of an HTML element.</p>

    <button type="button" onclick="myFunction()">Click Me!</button>

    <script>
    function myFunction() {
        var x = document.getElementById("demo");
        x.style.fontSize = "25px";
        x.style.color = "red";
    }
    </script>

</body>
</html>

 

3.使用JavaScript做驗證功能

<!DOCTYPE html>
<html>
<body>
    <script>
        function myFunction() {
            var x = document.getElementById("inp");
            if (isNaN(x.value) == false && x.value >= 1 && x.value <= 10) {
                document.getElementById("p").innerHTML = "legal";
            }
            else {
                document.getElementById("p").innerHTML = "illegal";
            }
        }
    </script>

    <input id="inp" type="text">
    <button id="btn" type="button" onclick="myFunction()">Check</button>
    <p>
        result:
        <span id="p"></span>
    </p>
</body>
</html>

(1)isNaN(value)：輸入一數值，如果為非數字則傳回true，否則為false，注意大小寫不得有誤。

(2)花括號curly bracket"}"要成對出現，雖然有人認為直覺到不值得一提，但我就是為了這Debug了很久。

 

4.External JavaScripts

從外部讀取JavaScript程式碼的語法格式為

<!DOCTYPE html>
<html>
<body>

    <script src="myScript.js">
    </script>

</body>
</html>
 
5.直接寫字串(日期)在HTML上
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<script>
document.write(Date());
</script>

</body>
</html>

 

6.將資訊寫進console端(偵錯用)

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

於瀏覽器按F12可在主控台看到由console.log(c)寫入的值為11

 

7.讀入外部JavaScript方式之一

<!DOCTYPE html>
<html>
<body>
 
    <script src="myScript.js">
    </script>
 
</body>
</html>

 

8.一些javascript用來debug顯示數值的方式

(1).alert('debug value');

(2).藉由jQuery將值秀在網頁上

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id ='toDebug'></div>
  <script>
    $('<div/>').text('debugValue').appendTo($('#toDebug'));
  </script>
</body>
</html>

(3).callback function除錯

dataRef.set("I'm writing data", function(error) {
  if (error) {
    alert("Data could not be saved." + error);
  } else {
    alert("Data saved successfully.");
  }
});