JavaScript คืออะไร? ทำไมมันถึงทำให้เว็บไซต์มีชีวิต? เข้ามาเรียนรู้ JavaScript และเรามีโค้ด JavaScript ตัวอย่าง

JavaScript คือ ภาษาการเขียนโปรแกรม ชนิดหนึ่ง ที่ถูกออกแบบมาเพื่อทำให้ เว็บเพจมีความโต้ตอบ (interactive) และ มีชีวิตชีวา มีการแสดงออกเชิงการโต้ตอบอย่างชัดเจน หรือมีการโต้ตอบเชิงขั้นตอนที่เป็นรูปธรรมในด้านการมองเห็นและมองไม่เห็น

ถ้าเว็บไซต์ไม่มี JavaScript มันจะเหมือนหนังสือที่มีแต่ตัวหนังสือ อ่านได้อย่างเดียว กดอะไรก็ไม่เกิดอะไรขึ้น แต่ถ้ามี JavaScript เข้ามา ทุกอย่างจะเปลี่ยนไป เช่น

• กดปุ่มแล้วมีข้อความขึ้นมา
• เลื่อนหน้าเว็บแล้วมีรูปหรือข้อความแอนิเมชัน
• ระบบแจ้งเตือนข้อผิดพลาดทันที (เช่น กรอกอีเมลผิด)
• โหลดข้อมูลใหม่ได้โดยไม่ต้องรีเฟรชหน้าเว็บ

สามารถนำไปทำเว็บส่วนตัวได้ ทำพอร์ตฟอลิโอ ทำเว็บร้านค้าเล็กๆ สามารถนำมาทำให้เว็บดูไม่นิ่ง กดปุ่มได้มีการโต้ตอบ ทำให้เว็บไซต์ "ดูมีชีวิต" และดูทันสมัย ทำเว็บแอปฯ แบบ Facebook, YouTube, หรือแอปโต้ตอบอื่น ๆ ได้ ทำแบบฟอร์มให้ฉลาดขึ้น เช่น ตรวจสอบข้อมูลก่อนส่ง ทำเกมเล็ก ๆ หรือระบบนับถอยหลัง

และทาง webdevohm เองนอกจากจะมีบริการเช่า ซื้อโค้ดไปใช้ต่อ หรือสั่งทำกับเรา สามารถอ่านรายละเอียดได้ที่ shop เพื่อหาบริการที่เหมาะกับตัวเองทางทีมงานของเราพร้อมให้คำปรึกษาในทุกๆก้าวเราพร้อมสนับสนุนครับและ ลูกค้าไม่จำเป็นต้องมีพื้นฐานด้านโค้ด ทางเราดูแลให้ครบทุกขั้นตอน ตั้งแต่ร่างโครง สร้างเนื้อหา ไปจนถึงอัปโหลดขึ้นระบบแบบพร้อมใช้งาน ชมเทมเพลต หรือชมเพื่อเป็นตัวอย่าง

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

ตัวอย่างการใช้งานการโต้ตอบหรือแบบต่างๆ JavaScript เบื้องต้น

จะเป็นคล้ายเกมให้เล่นมีทั้งหมด 6 js ที่เราสร้างขึ้นมาเพื่อยกตัวอย่างทั้งหมดมาเล่นกันครับ

• timecount รับค่านับถอยหลังเวลา
• calculate คิดเลขผ่าน js
• วนลูป input หลายตัว แล้วโชว์ออกมาทีเดียว
• กดเพื่อการการกระโดดและเปลี่ยรสีของกล่อง!!
• แปลภาษาไทยเป็นอังกฤษ
• เก็บชื่อของคุณไว้ในเว็บ

timecount นับเวลาถอยหลัง

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

javascript code

let countdownInterval; function startCountdown() { clearInterval(countdownInterval); let timeLeft = parseInt(document.getElementById('timeInput').value); const display = document.getElementById('countdownDisplay'); if (isNaN(timeLeft) || timeLeft <= 0) { display.textContent = "กรุณากรอกตัวเลขที่ถูกต้อง!"; return; } display.textContent = timeLeft + " วินาที"; countdownInterval = setInterval(() => { timeLeft--; if (timeLeft <= 0) { clearInterval(countdownInterval); display.textContent = "หมดเวลาแล้ว!"; } else { display.textContent = timeLeft + " วินาที"; } }, 1000); }

calculate เครื่องคิดเลข

อยากได้เครื่องคิดเลขง่าย ๆ ในหน้าเว็บ? อันนี้ช่วยบวกเลขเร็ว ๆ ได้แบบไม่ต้องโหลดแอป เหมาะกับโปรเจกต์เล็ก ๆ หรือหน้าเว็บที่อยากให้มีฟังก์ชันคำนวณเบา ๆ และ เอาไปทำเครื่องคิดเลขในเว็บ, แบบฟอร์มคำนวณค่างาน, หรือคำนวณเงินเบื้องต้นสำหรับลูกค้า

javascript code

function calculate() { const num1 = parseFloat(document.getElementById('num1').value); const num2 = parseFloat(document.getElementById('num2').value); const operator = document.getElementById('operator').value; const resultDisplay = document.getElementById('result'); if (isNaN(num1) || isNaN(num2)) { resultDisplay.textContent = "กรุณากรอกตัวเลขทั้งสองช่อง!"; return; } let result; switch(operator) { case '+': result = num1 + num2; break; case '-': result = num1 - num2; break; case '*': result = num1 * num2; break; case '/': result = num2 !== 0 ? num1 / num2 : "หารด้วยศูนย์ไม่ได้!"; break; default: result = "ตัวดำเนินการไม่ถูกต้อง"; } resultDisplay.textContent = "ผลลัพธ์: " + result; }

jump กดเพื่อกระโดดและเปลี่ยนสี!

สร้างเลขสุ่มง่าย ๆ เอาไว้ทำเกมเล็ก ๆ หรือสุ่มค่าในหน้าเว็บ แค่กดปุ่ม ก็ได้เลขใหม่ทันที เหมาะกับโปรเจกต์เล่นสนุกหรือเทสโชค และ เหมาะกับระบบสุ่มของรางวัล, กิจกรรมสุ่มผู้โชคดี, หรือสุ่มตัวเลือกแบบเล่น ๆ บนหน้าเว็บ

javascript code

function animateBox() { const box = document.getElementById('box'); // กระโดดขึ้น box.style.top = "-50px"; // เปลี่ยนสีเป็นสีสุ่ม box.style.backgroundColor = getRandomColor(); // แล้วค่อยเด้งกลับลง setTimeout(() => { box.style.top = "0"; }, 300); } function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; }

css code

#box { width: 100px; height: 100px; background-color: teal; position: relative; transition: all 0.5s ease; }

วนลูป input หลายตัว แล้วโชว์ออกมาทีเดียว

บางทีเราต้องการรับหลายค่าพร้อมกัน เช่น เบอร์โทรหลายเบอร์ หรือรหัสสินค้า ตัวอย่างนี้ช่วยวนเก็บค่าจาก input หลายตัวแบบไม่ต้องเขียนยาว ๆ และ ใช้กับแบบฟอร์มที่ต้องกรอกข้อมูลหลายช่อง เช่น ข้อมูลสินค้าหลายชิ้น หรือแบบสอบถาม

javascript code

function showAllInput() { const inputs = document.querySelectorAll('#inputArea input'); let allText = ""; inputs.forEach((input, index) => { allText += `ช่องที่ ${index + 1}: ${input.value}<br>`; }); document.getElementById('output').innerHTML = allText; }

แปลภาษาไทยเป็นอังกฤษ

เปลี่ยนคำหนึ่งให้กลายเป็นอีกคำอัตโนมัติ เช่น "สวัสดี" เป็น "Goodbye" เหมาะกับระบบที่ต้องการแสดงข้อความตอบกลับอัตโนมัติง่าย ๆ สวัสดี, ลาก่อน, ขอบคุณ, ใช่, ไม่ใช่ และเหมาะสำหรับระบบตอบอัตโนมัติ, บอทแชทเบื้องต้น หรือฟอร์มแปลงข้อความ

javascript code

function translateWord() { const dictionary = { "สวัสดี": "Hello", "ลาก่อน": "Goodbye", "ขอบคุณ": "Thank you", "ใช่": "Yes", "ไม่ใช่": "No" }; const thaiWord = document.getElementById('thaiInput').value.trim(); const result = dictionary[thaiWord] || "ไม่พบคำแปลในระบบ"; document.getElementById('result').textContent = "ผลลัพธ์: " + result; }

เก็บชื่อของคุณไว้ในเว็บ

เก็บข้อมูลหลาย ๆ ช่องพร้อมกันแล้วรวมออกมาเป็น JSON ไว้ใช้งานต่อได้เลย เหมาะกับการทำฟอร์มแบบหลายช่อง หรือระบบที่ต้องเก็บข้อมูลเป็นก้อนเดียวไปใช้งานต่อและ เหมาะกับการเก็บข้อมูลฟอร์มลูกค้าหลายช่อง แล้วส่งไปยังฐานข้อมูลหรือ API ภายนอก

javascript code

function saveName() { const name = document.getElementById('nameInput').value.trim(); if (name) { localStorage.setItem('myName', name); alert('บันทึกชื่อเรียบร้อยแล้ว!'); } else { alert('กรุณากรอกชื่อก่อนบันทึก'); } } function loadName() { const name = localStorage.getItem('myName') || 'ยังไม่มีชื่อที่บันทึกไว้'; document.getElementById('displayName').textContent = "ชื่อที่บันทึก: " + name; }

---