Javascript 快速入门¶

演示一¶

实现开关灯。

        <article>
            <h2 id="demo">JS Lab</h2>
            <button onclick="changeContent()">Change it!</button>
            <p>Javascript can change HTML attribute values.</p>
            <button onclick="document.getElementById('bulb').src='images/pic_bulbon.gif'">Turn on the light</button>
            <img id="bulb" src="images/pic_bulboff.gif">
            <button onclick="document.getElementById('bulb').src='images/pic_bulboff.gif'" ">Turn off the light</button>
        </article>

演示二¶

通过函数改变标题内容

定义函数¶

<script>
  
  function changeContent() {
    document.getElementById('demo').innerHTML = "Javascript Lab"
}

</script>

调用函数¶

<button onclick="changeContent()">Change it!</button>

演示三¶

将脚本放入独立文件进行调用

在 script.js中输入下方函数

function changeContent() {
    document.getElementById('demo').innerHTML = "Javascript Lab"
}

在 head文件中引用该脚本

    <script type="text/javascript" src="script.js">
    </script>

Javascript的基本语法¶

函数的输出

        <script>
            window.alert("Welcome to my Website!")
        </script>

参考资料

Javascript Cheat Sheet

JavaScript Tutorial

演示四¶

让用户输入数值后，相加后返回结果

获得用户输入

        <form>
            <h2>My Calculator</h2>
            <label>Please input Number 1</label>
            <input id="txt1 " type="number "></input>

            <label>Please input Number 2</label>
            <input id="txt2 " type="number "></input>



            <button id="btn1 " onclick="addNumbers () ">Add</button>

        </form>

脚本

function addNumbers() {
    // Selecting the input element and get its value 
    var inputVal1 = document.getElementById("txt1 ").value;
    var inputVal2 = document.getElementById("txt2 ").value;

    // Displaying the value
    alert(Number(inputVal1) + Number(inputVal2));
}