กดปุ่มแล้วแสดงข้อความ html

ตัวอย่าง ท่านอาจทำการซ่อนอีเลเมนต์เมื่อไม่ใช่ target และแสดงอีเลเมนต์เมื่อเป็น target เป็นต้น ตัวอย่างด้านล่างแสดงเมนูที่มีสี่ไอเท็ม ซึ่งแต่ละไอเท็มจะลิ้งไปยังข้อความ แต่เมื่อไม่มีการกดลิ้งจะไม่มีการแสดงข้อความใดๆ เมื่อลิ้งถูกกดจึงจะแสดงข้อความเท่านั้น

สารบัญ Show

ตัวอย่าง
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง

ข้อความนี้อยู่ในไอเท็ม 1 ซึ่งจะไม่แสดง หากท่านไม่กดลิ้งที่กำหนดเป็น "#item1".

หากท่านกดลิ้งไอเท็ม 2 ท่านจะเห็นข้อความนี้

ท่านจะเห็นข้อความนี้เมื่อกดไอเท็มสาม จะสังเกตได้ว่าไอเท็มแต่ละอันเป็น URL ท่านสามารถนำไปวางไว้หน้าเพจใดก็ได้ เมื่อต้องการลิ้งมายังไอเท็มนี้โดยตรง

การทำงานของเมนู มีสองส่วนด้วยกัน คือ ส่วน HTML ที่ลิ้งมายังอีเลเมนต์ตามไอดีที่กำหนดไว้ และส่วน property 'display':

ไอเท็ม 1 ไอเท็ม 2 ไอเท็ม 3 เคลียร์

... ไอเท็ม 1...

... ไอเท็ม 2...

...

สไตล์ชีทจะกำหนดให้ซ่อนอีเลเมนต์ P ทั้งหมดใน DIV แต่เมื่อมีการเรียก P เป็น target (กดลิ้ง) จึงจะแสดงข้อความ:

div.items p {display: none}
div.items p:target {display: block}

ท่านอาจกำหนด สี, margin, ขอบ, อื่นๆ เพื่อให้ดูเหมือนเมนู โดยท่านสามารถดูซอร์สของหน้านี้เพื่อเป็นศึกษาการทำงานได้

ซึ่งตามจริงแล้วเรายังใส่ ':not(:target)', เพื่อให้เบราเซอร์ที่ไม่รองรับ CSS3 ยังแสดงอีเลเมนต์อยู่ ดังนั้นสไตล์ชีทจะเป็นดังนี้:

เริ่มต้นสร้างโฟลเดอร์ Ep.3 ขึ้นมาก่อนเลยพร้อมทั้งไฟล์ HTML ไฟแรกของ Ep นี้ ที่มีชื่อว่า innerhtml-example.html

โฟลเดอร์งานของ Ep.31. การใช้ innerHTML

การที่จะเข้าถึง HTML element ได้นั้น คำสั่งพื้นฐานสุดเลยของ JavaScript คือการใช้เมธอด

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Write</title>
</head>
<body>

    <h1>This is document.write()</h1>

    <script>
        document.write(10*5)
    </script>

</body>
</html>

โดย

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Write</title>
</head>
<body>

    <h1>This is document.write()</h1>

    <script>
        document.write(10*5)
    </script>

</body>
</html>

1 แอททริบิวต์ นั้นจะทำการกำหนดตัว HTML element และตัวพรอพเพอตี้innerHTML นั้นจะทำการกำหนด HTML content:

ตัวอย่าง

innerhtml-example.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inner HTML</title>
</head>
<body>

    <h1>This is innerHTML</h1>
    <p id="demo"></p>

    <script>
        var nextYearVal = 1;
        document.getElementById("demo").innerHTML = 2020 + nextYearVal
    </script>
</body>
</html>

How code works ?

เขียน JS โดยใช้เมธอด getElementById( ) โดย id มีชื่อว่า “demo” โดยใช้คำสั่ง innerHTML เพื่อทำการแสดงผล innerHTML ซึ่งมีคอนเทนต์ก็คือ 2020 ซึ่งเป็นตัวเลขจำนวนเต็ม และนำไปบอกกับตัวแปร nextYearVal ซึ่งมีค่าเท่ากับ 1 เมื่อนำมารวมกันจะได้เท่ากับ 2021
สร้าง <p> tag แล้วรับ id “demo” เพื่อแสดงผล 2020 + nextYearVal(2021) บน <p> tag

แสดงผล2. การใช้ document.write()

สำหรับคำสั่งนี้จะสะดวกและเหมาะสำหรับใช้ในการทดสอบและดีบั๊กค่า

สร้างไฟล์ที่มีชื่อว่า document-write.html ขึ้นมา จากนั้นทำการเขียนโค้ดดังตัวอย่างด้านล่าง

ตัวอย่าง

document-write.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Write</title>
</head>
<body>

    <h1>This is document.write()</h1>

    <script>
        document.write(10*5)
    </script>

</body>
</html>

How code works ?

เขียน JS โดยใช้เมธอด document.write( ) และมีข้อมูลอยู่ในเมธอดนี้คือ 10*5 (10 คูณ 5) ซึ่งจะได้เท่ากับ 50 คำสั่งนี้ค่อนข้างง่ายและตรงไปตรงมา

50 ถูกแสดงผลออกมาจากการคูณกันของ 10*5

การใช้ document.write() หลังจากที่ตัว HTML document ถูกเรียกใช้งาน จะทำให้ตัว HTML elements ต่าง ๆ ที่มีอยู่ในไฟล์นั้นจะถูกลบไปด้วย ซึ่งจะเหลือแต่ข้อมูลที่อยู่ใน document.write()

ตัวอย่าง

document-write2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Write2</title>
</head>
<body>

    <h1>This is document write2</h1>
    <p>These HTML elements will be deleted after document.write() is loaded</p>

    <button type="button" onclick="document.write(4+5)">Click</button>

</body>
</html>

ตัวเมธอด document.write() ควรจะเอาไว้สำหรับใช้ในการทดสอบเท่านั้น

How code works ?

เขียน JS โดยใช้ button เข้ามาเสริมโดยจะให้กดปุ่มแล้วทำอะไรบางอย่าง โดยใช้คำสั่ง onclick
ในคำสั่ง onclick จะทำการกำหนดเป็น document.write(4+5) ซึ่งเมื่อกดปุ่มนี้ จะแสดงผล 9 และข้อความก่อนหน้า ก่อนที่ปุ่มจะถูกกดก็จะหายไป

ทำการคลิ๊ก

ตัว HTML elements ซึ่งก็คือข้อความต่าง ๆ ก่อนหน้าจะถูกลบออกไปหมดและข้อมูลที่อยู่ในเมธอด document.write() จะถูกแสดงผลขึ้นมาแทน3. การใช้ window.alert()

ตัวเมธอด alert() จะเอาไว้ใช้ในการแจ้งเตือนอะไรบางอย่างออกมาทางหน้าจอ

สร้างไฟล์ที่มีชื่อว่า window-alert-example.html ขึ้นมา จากนั้นทำการเขียนโค้ดดังตัวอย่างด้านล่าง

ตัวอย่าง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>"Window Alert"</title>
</head>
<body>

    <h1>This is window alert</h1>
    <p>This will display or alert any message to our window</p>

    <script>
        var altMessage = "Hello window alert";
        window.alert(altMessage);
    </script>

</body>
</html>

เราสามารถใช้ alert() ได้เพียว ๆ โดยไม่จำเป็นต้องใช้ window ก็ได้เช่นกัน เรียกได้ว่าตัว window คือ Option ซึ่งจะใส่หรือไม่ใส่ก็ได้

How code works ?

เขียนคำสั่ง window.alert() เพื่อแจ้งเตือนอะไรบางอย่าง
ทำการส่งตัวแปร altMessage ซึ่งเก็บข้อมูล “Hello window alert” เข้าไปในเมธอด alert()
จะปรากฎไดอะล็อกบ็อกซ์ขึ้นมา พร้อมแจ้งแสดงผลข้อความ “Hello window alert”

จะแสดงหน้าต่างข้อความแจ้งเตือนขึ้นมา

4. เมื่อกดตกลง ตัวเว็บบราวเซอร์ก็จะนำเข้าสู่หน้าเพจปกติ ซึ่งจะแสดงผลข้อความตามภาพด้านล่าง

เมื่อคลิ๊กตกลง4. การใช้ console.log()

สำหรับการทดสอบในการดีบั๊กค่าต่าง ๆ เราสามารถใช้ เมธอด console.log() ในการทดสอบเพื่อแสดงผลข้อมูลได้ ซึ่งเมธอดนี้ สาวก JS คงไม่มีใครรู้จัก ถ้าเทียบกับ syntax ของภาษาไพธอน ตัวไพธอนก็จะเป็นคำสั่ง print()

สร้างไฟล์ที่มีชื่อว่า console-log-example.html ขึ้นมา จากนั้นทำการเขียนโค้ดดังตัวอย่างด้านล่าง

ตัวอย่าง

console-log-example.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Console Log</title>
</head>
<body>

    <h1>This is console log()</h1>
    <p>It's used for only debugging purposes</p>

    <script>
        var num1 = 15;
        var num2 = 20;

        console.log(num1 + num2);
    </script>

</body>
</html>

How code works ?

กำหนดค่าให้กับตัวแปร num1, num2 ซึ่งจะมีค่า 15 และ 20 ตามลำดับ
ใช้คำสั่ง console.log() แล้วดำเนินการอะไรบางอย่างในเมธอดนี้ ซึ่งในที่นี้ก็คือนำตัวแปร num1 และ num2 มาบวกกัน ก็จะได้เท่ากับ 35
จากนั้นกดเปิดไฟล์ขึ้นมา ก็จะแสดงผลข้อความตามที่ได้เขียนไว้ในแท็ก <h1> และ <p> ด้านบน แต่ข้อมูลที่อยู่ใน console.log(35) จะไม่แสดงผลในหน้าเว็บ
ทำการคลิ๊กขวา เลือก “Inspect” หรือตรวจสอบ
จากนั้นจะปรากฏหน้า Dev Tools(ในภาพใช้ Google Chrom)
จากนั้นเลือก Console จะพบกับ 35 ซึ่งเป็นข้อมูลที่ได้จากการนำ 15 และ 20 มาบวกกัน

คลิ๊กขวา Inspect และทำการคลิ๊กที่ ConsoleJavaScript Print

เราสามารถเรียกใช้งานเมธอด

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Write</title>
</head>
<body>

    <h1>This is document.write()</h1>

    <script>
        document.write(10*5)
    </script>

</body>
</html>

4 ในการแสดงผลหรือปริ้นซ์ข้อมูลออกทางหน้าจอปัจจุบันที่เรากำลังใช้งาน

สร้างไฟล์ที่มีชื่อว่า window-print-example.html ขึ้นมา จากนั้นทำการเขียนโค้ดดังตัวอย่างด้านล่าง

ตัวอย่าง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>"Window Print"</title>
</head>
<body>

    <h1>This is window print</h1>
    <p>Click the button to print out the current page</p>

    <button type="button" onclick="window.print()">Click to print</button>

</body>
</html>

How code works ?

เขียนคำสั่ง window.print() อยู่ภายใน button เมื่อกดปุ่ม(onclick) จะทำอะไรบางอย่าง ในที่นี้จะให้ทำการพิมพ์หน้าเพจออกมา

คลิ๊กเพื่อพิมพ์หน้านี้ออกมา

จะพบกับโหมดการพิมพ์

เมื่อจบ Ep.3 จะได้ไฟล์ดังนี้

จบเรียบร้อยแล้วครับกับ Ep.3 เป็นยังไงกันบ้างครับ งงกันหรือเปล่า ? หวังว่าจะไม่งงนะครับ เพราะผมพยายามใส่ภาพและอธิบายเพื่อให้เข้าใจง่ายที่สุดที่จะทำได้ อย่าลืมหมั่นทบทวนความเข้าใจกันด้วยนะครับ