
สารบัญ:
2025 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2025-01-23 15:12

หากคุณเป็นมือใหม่ในการเขียนโค้ดหรือมีพื้นฐานด้านการเขียนโค้ด คุณอาจสงสัยว่าจะเริ่มเรียนรู้จากที่ใด คุณต้องเรียนรู้วิธี, อะไร, ตำแหน่งที่จะเขียนโค้ด จากนั้นเมื่อโค้ดพร้อมแล้ว จะปรับใช้อย่างไรให้ทุกคนเห็น
ข่าวดีก็คือการเข้ารหัสนั้นไม่ยาก
กลุ่มเป้าหมาย: บทช่วยสอนนี้มีไว้สำหรับผู้เริ่มต้นที่ต้องการเริ่มต้นอาชีพในการพัฒนาเว็บ มีความเข้าใจในเทคโนโลยีเว็บโดยทั่วไป
สร้างเวลา: 90 นาที
ความยาก: ง่าย.
ขั้นตอนที่ 1: เราจะสร้างอะไร ?
ในตอนท้ายของบทช่วยสอนนี้ เราจะ:
- สร้างเว็บแอปพลิเคชัน To-Do List อย่างง่ายโดยใช้ HTML5
- รวม Bootstrap กับแอพของเราเพื่อเพิ่มรูปลักษณ์ที่ดูดีและรวดเร็ว
- ใช้ไลบรารี JavaScript และ JQuery เพื่อเพิ่มพฤติกรรมแบบไดนามิกให้กับแอปพลิเคชันของเรา
- ปรับใช้แอปพลิเคชันของเราในระบบคลาวด์โดยใช้ Ziet/ตอนนี้
ในการดำเนินการ:
ขั้นตอนที่ 2: บทนำสู่ HTML, Bootstrap, JavaScript & JQuery
HTML คืออะไร?
Hyper Text Markup Language (HTML) ถือได้ว่าเป็น "ภาษาของอินเทอร์เน็ต" HTML เป็นภาษามาร์กอัปมาตรฐานที่ใช้ในการสร้างหน้าเว็บ เดิมทีได้รับการออกแบบมาเพื่อแบ่งปันเอกสารทางวิทยาศาสตร์ การปรับเปลี่ยนให้เป็น HTML ในช่วงหลายปีที่ผ่านมาทำให้เหมาะสมที่จะอธิบายเอกสารประเภทอื่นๆ ที่สามารถแสดงเป็นหน้าเว็บบนอินเทอร์เน็ตได้
ข้อกำหนดเพียงอย่างเดียวที่จำเป็นในการแสดงหน้า HTML คือเว็บเบราว์เซอร์ เช่น Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome หรือ Apple Safari
Bootstrap คืออะไร?
Bootstrap เป็นเฟรมเวิร์ก HTML, CSS และ JavaScript ที่ได้รับความนิยมมากที่สุดสำหรับการสร้างเว็บไซต์ที่ตอบสนองและเน้นมือถือเป็นหลัก Bootstrap เป็นโครงการโอเพ่นซอร์สที่พัฒนาโดย Twitter ประกอบด้วยคลาส CSS ที่สามารถนำไปใช้กับองค์ประกอบเพื่อจัดรูปแบบได้อย่างสม่ำเสมอและโค้ด JavaScript ที่ทำการปรับปรุงเพิ่มเติม
JavaScript คืออะไร?
JavaScript เป็นภาษาโปรแกรมที่ใช้สำหรับการเขียนโปรแกรมฝั่งไคลเอ็นต์ในเว็บแอปพลิเคชัน เบราว์เซอร์เรียกใช้โค้ด JavaScript และอนุญาตให้โปรแกรมเมอร์แอปพลิเคชันเว็บสร้างเนื้อหาเว็บแบบไดนามิกได้ เช่น ส่วนประกอบที่แสดงหรือซ่อนแบบไดนามิก เปลี่ยนลักษณะที่ปรากฏ และตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้ป้อน
JQuery คืออะไร?
JQuery เป็นไลบรารี JavaScript ที่รวดเร็ว ขนาดเล็ก และเต็มไปด้วยคุณลักษณะ ทำให้สิ่งต่างๆ เช่น การข้ามผ่านเอกสาร HTML และการจัดการ การจัดการเหตุการณ์ แอนิเมชันง่ายขึ้นมาก
พลังทั้งหมดของ JQuery สามารถเข้าถึงได้ผ่าน JavaScript ดังนั้นการมีความเข้าใจ JavaScript เป็นอย่างดีจึงเป็นสิ่งจำเป็นสำหรับการทำความเข้าใจ โครงสร้าง และการดีบักโค้ดของคุณ
สำหรับรายละเอียดเพิ่มเติม:
HTML
JavaScript
JQuery
Bootstrap
ขั้นตอนที่ 3: หน้าแรกของคุณด้วย HTML

ขั้นตอนที่ 1: สร้างโฟลเดอร์ใหม่:
mkdir ง่าย todolist
ขั้นตอนที่ 2: สร้างไฟล์ใหม่ภายในโฟลเดอร์ simple-todolist และตั้งชื่อเป็น index.html
cd simple-todolist
แตะ index.html
ขั้นตอนที่ 3: เพิ่มรหัสต่อไปนี้ใน index.html
สิ่งที่ต้องทำ
รายการสิ่งที่ต้องทำของฉัน
ขั้นตอนที่ 4: เปิด index.html บนเบราว์เซอร์ของคุณ
คุณจะเห็นรายการสิ่งที่ต้องทำของฉันปรากฏขึ้น (ดูภาพด้านบน)
ขั้นตอนที่ 4: การเพิ่ม Bootstrap

ในส่วนนี้ เราจะเพิ่มการรองรับ Bootstrap ในหน้า index.html ของเรา เพื่อเพิ่มสไตล์ที่รวดเร็วและดีให้กับแอป To-Do List
หมายเหตุ: ในแอพนี้เราจะใช้ Bootstrap 3 คุณใช้เฟรมเวิร์ก CSS อื่น ๆ เช่น Semantic UI
ขั้นตอนที่ 1: เพิ่มไฟล์ Bootstrap CSS ในแท็กส่วนหัว:
ขั้นตอนที่ 2: เพิ่มไฟล์สคริปต์ Bootstrap และ JQuery CDN ที่ส่วนท้ายของแท็ก body:
ขั้นตอนที่ 3: เปิด index.html บนเบราว์เซอร์ของคุณ
ยินดีด้วย เราเพิ่มการสนับสนุน Bootstrap ให้กับเพจของเราสำเร็จในไม่กี่ขั้นตอน
ขั้นตอนที่ 5: กรอก UI

หลังจากที่เราเพิ่มการสนับสนุน Bootstrap ให้กับแอพของเราเรียบร้อยแล้ว ตอนนี้ ไปต่อและแข่งขันกับ UI (ส่วนต่อประสานผู้ใช้) เพื่อให้ผู้ใช้เพิ่มงานใหม่ รายการสิ่งที่ต้องทำจะสามารถเพิ่มรายการใหม่ลงในรายการ รวมทั้งลบรายการที่มีอยู่ได้
ขั้นตอนที่ 1: เพิ่มรหัสต่อไปนี้ใน index.html
เพิ่มงานใหม่ เพิ่ม ล้างทั้งหมด!
รายการงานของฉัน
ขั้นตอนที่ 2: เปิดไฟล์ index.html บนเบราว์เซอร์ของคุณ
ขั้นตอนที่ 6: การเพิ่มลอจิกไปยังแอพ

เมื่อคุณป้อนชื่องานและคลิกที่ปุ่มเพิ่ม จะไม่มีอะไรเกิดขึ้นในขณะนี้ มาแก้ไขกันเถอะ
เมื่อสิ้นสุดขั้นตอนนี้ เราจะเปลี่ยน index.html ของเราให้เป็นหน้าไดนามิก ดังนั้นหน้าดังกล่าวจะทำหน้าที่โต้ตอบกับผู้ใช้
ขั้นตอนที่ 1: สร้างโฟลเดอร์ใหม่ภายใน simple-todolist ตั้งชื่อเป็น js และตั้งชื่อไฟล์ใหม่เป็น script.js ภายในโฟลเดอร์นั้น:
mkdir js
cd js touch script.js
ขั้นตอนที่ 2: เชื่อมโยง script.js กับ index.html โดยเพิ่มโค้ดต่อไปนี้ที่ส่วนท้ายของแท็ก head:
ขั้นตอนที่ 3: เพิ่มโค้ดต่อไปนี้ลงในไฟล์ script.js
$(เอกสาร).พร้อม(() => {
งาน var = 0 $("#removeAll")).hide(); /* เพิ่มตัวจัดการงานใหม่ */ $("#add")).on("click", (event) => { event.preventDefault(); event.stopPropagation(); var val = $("input") val(); if(val !=="") { งาน +=1; var elm =$("
-
"); $("#mylist")).append(elem); $("input")).val(""); /* ลบตัวจัดการงานที่ไม่ซ้ำ */ $(".text-right")).on(" clikc", function(event) { event.preventDefault(); event.stopPropagation(); task -=1; $(this).parent.remove(); }); /* แสดงปุ่ม removeAll เมื่อเรามีมากกว่า 3 งาน */ if(งาน > 2) { $("#remveAll").show(); } /* removeAll handler */ $("#removeAll").on("click", event => { event.preventDefault (); event.stopPropagation(); $(".disabled").siblings().remove(); tasks = 0; $("#removeAll").hide(); }); } }); });
หมายเหตุ: คุณสามารถรับโคลนหรือดาวน์โหลดรหัสไปรษณีย์จากที่เก็บ GitHub ของฉัน ซึ่งจะช่วยให้คุณไม่ต้องแตะ
git clone github.com/ahmnouira/simple-todolist
ขั้นตอนที่4:ทดสอบรหัส
เปิดเบราว์เซอร์ของคุณและเข้าสู่งาน จากนั้นคลิก เพิ่ม คุณจะเห็นงานใหม่ถูกเพิ่มลงในรายการ หากคุณเพิ่ม 3 งาน คุณจะสังเกตเห็นว่าปุ่ม clearAll ปรากฏขึ้น ปุ่มนี้ช่วยให้เราสามารถลบงานที่เพิ่มทั้งหมดได้ คุณ ยังสามารถลบเพียงหนึ่งงานซื้อโดยคลิกที่ปุ่ม
ขั้นตอนที่ 7: (ไม่บังคับ) ปรับใช้แอป
จนถึงตอนนี้ เราได้สร้างแอปรายการสิ่งที่ต้องทำอย่างง่าย ตอนนี้ได้เวลาปรับใช้แอปในระบบคลาวด์และแชร์งานของเรากับคนอื่นๆ ทั่วโลก
เพื่อให้บรรลุสิ่งนี้ เราจะใช้แพลตฟอร์มคลาวด์ที่เรียกว่า ZEIT Now
ZEIT คืออะไรตอนนี้ ?
ZEIt Now เป็นแพลตฟอร์มระบบคลาวด์สำหรับไซต์แบบคงที่และฟังก์ชันไร้เซิร์ฟเวอร์ ช่วยให้นักพัฒนาสามารถโฮสต์เว็บไซต์และบริการเว็บที่ปรับใช้ได้ทันที ทั้งหมดนี้ไม่มีการกำหนดค่าใดๆ
1. ติดตั้งทันที CLI
ในการปรับใช้กับ ZEIT Now คุณจะต้องติดตั้ง Now CLI
สำคัญ: ต้องแน่ใจว่าคุณติดตั้ง npm แล้ว
npm -v # ตรวจสอบว่า npm ติดตั้งหรือไม่
npm install -g now@latest # ติดตั้งเวอร์ชันล่าสุดของ Now CLI ทั่วโลกตอนนี้ -v # chech หากติดตั้ง Now CLI แล้วและพิมพ์เวอร์ชันนั้น
2. ปรับใช้
สิ่งที่คุณต้องทำคือย้ายไปยังไดเร็กทอรีแล้วปรับใช้แอปของคุณด้วยคำสั่งเดียว:
ตอนนี้ --prod # ปรับใช้แอป
เมื่อปรับใช้แล้ว คุณจะได้รับ URL แสดงตัวอย่างที่กำหนดในการปรับใช้แต่ละครั้งเพื่อแชร์การเปลี่ยนแปลงล่าสุดภายใต้ที่อยู่
แอพของฉัน:
ขั้นตอนที่ 8: สรุป
นั่นคือทั้งหมดที่มีให้ !
รู้สึกอิสระที่จะสำรวจโค้ดโดยการตั้งค่าคุณสมบัติใหม่และขยายแอพ และแบ่งปันประสบการณ์และคำถามของคุณในพื้นที่แสดงความคิดเห็น
หากต้องการดูผลงานของฉันเพิ่มเติม โปรดไปที่โอเพ่นซอร์สของฉันที่ GitHub
มายยูทูบ
myLinkedIn
ขอบคุณที่มีเวลาอ่านคำแนะนำของฉัน ^^
ขอให้เป็นวันที่ดี.
อาเหม็ด นูอิรา
แนะนำ:
การออกแบบเกมในการสะบัดใน 5 ขั้นตอน: 5 ขั้นตอน

การออกแบบเกมในการสะบัดใน 5 ขั้นตอน: การตวัดเป็นวิธีง่ายๆ ในการสร้างเกม โดยเฉพาะอย่างยิ่งเกมปริศนา นิยายภาพ หรือเกมผจญภัย
การตรวจจับใบหน้าบน Raspberry Pi 4B ใน 3 ขั้นตอน: 3 ขั้นตอน

การตรวจจับใบหน้าบน Raspberry Pi 4B ใน 3 ขั้นตอน: ในคำแนะนำนี้ เราจะทำการตรวจจับใบหน้าบน Raspberry Pi 4 ด้วย Shunya O/S โดยใช้ Shunyaface Library Shunyaface เป็นห้องสมุดจดจำใบหน้า/ตรวจจับใบหน้า โปรเจ็กต์นี้มีจุดมุ่งหมายเพื่อให้เกิดความเร็วในการตรวจจับและจดจำได้เร็วที่สุดด้วย
วิธีการติดตั้งปลั๊กอินใน WordPress ใน 3 ขั้นตอน: 3 ขั้นตอน

วิธีการติดตั้งปลั๊กอินใน WordPress ใน 3 ขั้นตอน: ในบทช่วยสอนนี้ ฉันจะแสดงขั้นตอนสำคัญในการติดตั้งปลั๊กอิน WordPress ให้กับเว็บไซต์ของคุณ โดยทั่วไป คุณสามารถติดตั้งปลั๊กอินได้สองวิธี วิธีแรกคือผ่าน ftp หรือผ่าน cpanel แต่ฉันจะไม่แสดงมันเพราะมันสอดคล้องกับ
การลอยแบบอะคูสติกด้วย Arduino Uno ทีละขั้นตอน (8 ขั้นตอน): 8 ขั้นตอน

การลอยแบบอะคูสติกด้วย Arduino Uno ทีละขั้นตอน (8 ขั้นตอน): ตัวแปลงสัญญาณเสียงล้ำเสียง L298N Dc ตัวเมียอะแดปเตอร์จ่ายไฟพร้อมขา DC ตัวผู้ Arduino UNOBreadboardวิธีการทำงาน: ก่อนอื่น คุณอัปโหลดรหัสไปยัง Arduino Uno (เป็นไมโครคอนโทรลเลอร์ที่ติดตั้งดิจิตอล และพอร์ตแอนะล็อกเพื่อแปลงรหัส (C++)
เครื่อง Rube Goldberg 11 ขั้นตอน: 8 ขั้นตอน

เครื่อง 11 Step Rube Goldberg: โครงการนี้เป็นเครื่อง 11 Step Rube Goldberg ซึ่งออกแบบมาเพื่อสร้างงานง่ายๆ ในรูปแบบที่ซับซ้อน งานของโครงการนี้คือการจับสบู่ก้อนหนึ่ง