สร้างเว็บแอปแรกของคุณ: โน้ต + ตัวนับอย่างง่ายและรวดเร็ว 📝⚡
การเริ่มต้นการเขียนโปรแกรมอาจดูเป็นเรื่องยาก เนื่องจากมีภาษา เฟรมเวิร์ก และระเบียบวิธีต่างๆ มากมายที่ต้องพิจารณา บางครั้งการมอบหมายทุกอย่างให้ AI จัดการอาจดูง่ายกว่า ไม่ต้องกังวล! การเขียนโปรแกรมสำหรับเว็บสามารถทำได้ง่าย สนุก และที่ดีที่สุดคือ ฟรีโดยสิ้นเชิง!
สิ่งที่คุณกำลังจะสร้าง
หากทำตามบทช่วยสอนนี้ คุณจะสร้างแอปพลิเคชันเว็บง่ายๆ เพื่อจัดเก็บบันทึกข้อความและนับอักขระและคำ
แอปจะเก็บรักษาข้อมูลไว้ จึงจะจำข้อความไว้เมื่อคุณโหลดซ้ำหรือเปิดหน้าใหม่อีกครั้ง ซึ่งหมายความว่าคุณจะมีวิธีที่สะดวกในการบันทึกข้อความใดๆ ที่คุณต้องการอ้างอิงในภายหลัง เช่น ที่อยู่ URL ฯลฯ 📄🔗
นอกจากนี้ยังนับอักขระและคำด้วย ซึ่งถือเป็นการแนะนำที่ดีสำหรับการจัดการสตริง (ข้อความ) แน่นอนว่าแอพนี้เรียบง่ายมาก นั่นคือจุดประสงค์! แต่ด้วยบทช่วยสอนนี้ คุณจะเรียนรู้พื้นฐานของการพัฒนาแอปพลิเคชันเว็บ และโลกทั้งใบนี้จะเป็นของคุณ
คุณจะสร้างมันขึ้นมายังไง?
แม้ว่าแอปพลิเคชันเว็บจะมีความหลากหลาย แต่โดยทั่วไปจะเกี่ยวข้องกับเทคโนโลยีหลักสามประการ ได้แก่ HTML, CSS และ JavaScript สิ่งสำคัญคือคุณต้องเข้าใจบทบาทของพวกเขาก่อนที่คุณจะเริ่มต้น
- HTML: Hypertext Markup Language ช่วยให้คุณสามารถกำหนดโครงสร้างเนื้อหาของคุณได้ ด้วยเครื่องมือนี้ คุณสามารถทำเครื่องหมายข้อความตามความหมายได้ เช่น ระบุว่าเป็นย่อหน้า หัวเรื่อง หรือรายการในรายการ เป็นต้น
- CSS: Cascading Style Sheets ช่วยให้คุณสามารถกำหนดสไตล์ให้กับเนื้อหาของคุณได้ เมื่อใช้ภาษาเหล่านี้ คุณสามารถระบายสีย่อหน้าเป็นสีเขียว ทำลิงก์ทั้งหมดให้เป็นตัวหนา หรือวางแถบด้านข้างถัดจากบทความหลักของคุณได้
- JavaScript: ด้วยภาษาโปรแกรมนี้ คุณสามารถเพิ่มฟังก์ชันการทำงานให้กับเว็บไซต์ของคุณได้ คุณสามารถให้ปุ่มแสดงหรือซ่อนส่วนต่างๆ ของเอกสารของคุณเมื่อคลิก หรือใช้โปรแกรมประมวลผลคำหรือวิดีโอเกมเต็มรูปแบบได้
เขา เว็บไซต์.dev (เขียนโดยสมาชิกทีม Chrome) และ MDN เครือข่ายนักพัฒนา Mozillaเป็นแหล่งข้อมูลที่ดีเยี่ยมสองแห่งเกี่ยวกับเทคโนโลยีเว็บพื้นฐาน
โครงสร้างของแอป
แอปที่คุณจะสร้างจะประกอบด้วยไฟล์สามไฟล์ง่าย ๆ คือ index.html, styles.css และ script.js
ไม่มีข้อกำหนดพิเศษในการเรียกใช้แอป คุณเพียงแค่ต้องมีเว็บเบราว์เซอร์ ไม่มีฟังก์ชันแบ็กเอนด์ ดังนั้นคุณจึงไม่จำเป็นต้องใช้ภาษาสคริปต์เช่น PHP หรือเว็บเซิร์ฟเวอร์ภายใน เมื่อทำเสร็จแล้วคุณสามารถเปิดได้ ไฟล์ index.html โดยตรงในเบราว์เซอร์ของคุณ แล้วทุกอย่างก็จะออกมาดี
สิ่งสำคัญที่ต้องทราบคือแอปนี้จะบันทึกข้อความของคุณโดยไม่เขียนลงในไฟล์ที่ระบุบนดิสก์ เนื่องจาก JavaScript ไม่สามารถเข้าถึงระบบไฟล์ได้ ใช้ Web Storage API ซึ่งเป็นทางเลือกอันทรงพลังแทนคุกกี้
วิธีการสร้างเครื่องจดบันทึก
สร้างไฟล์ทั้งสามไฟล์ต่อไปนี้ในไดเร็กทอรีเดียวกัน จากนั้นเปิด index.html ในเว็บเบราว์เซอร์ นอกจากนี้คุณสามารถดาวน์โหลดไฟล์จาก ที่เก็บข้อมูล GitHub นี้-
การสร้างโครงสร้างด้วย HTML
ไฟล์ index.html กำหนดโครงสร้างเนื้อหาแอปของคุณในรูปแบบ HTML รวมการอ้างอิงถึงไฟล์อีกสองไฟล์เพื่อให้เบราว์เซอร์สามารถรวมเข้าด้วยกันเพื่อสร้างผลิตภัณฑ์ขั้นสุดท้ายได้
เช่นเดียวกับเอกสาร HTML ทั้งหมด โครงสร้างระดับบนสุดประกอบด้วยส่วนหัวที่มีข้อมูลเมตาและส่วนเนื้อหาที่มีเนื้อหาจริงที่จะปรากฏบนหน้า:
เอชทีเอ็มแอล-
<เอชทีเอ็มแอล-
<ศีรษะ-
...
ศีรษะ-<ร่างกาย-
…
ร่างกาย-
เอชทีเอ็มแอล-
เมตาข้อมูลในส่วนหัวนั้นสั้นมาก โดยมีเพียงชื่อหน้า (ซึ่งปรากฏอยู่ในแถบชื่อของเบราว์เซอร์ของคุณ) และการอ้างอิงถึงไฟล์ styles.css:
<ชื่อ-ข้อความชื่อ-
<ลิงค์ เรล="สไตล์ชีท" เอชอาร์อีดี="สไตล์.css" -
ร่างกายจะซับซ้อนกว่าแต่มีเพียงไม่กี่ส่วนที่สำคัญดังนี้:
<แบ่ง รหัส="เคาน์เตอร์"-
คำ: <ช่วง รหัส="คำ"-0ช่วง-
/ ตัวอักษร: <ช่วง รหัส="ตัวอักษร"-0ช่วง-
แบ่ง-<พื้นที่ข้อความ รหัส="ข้อความ" ออโต้โฟกัส=«1»-พื้นที่ข้อความ-
<สคริปต์ แหล่งที่มา=«สคริปต์ js»-สคริปต์-
องค์ประกอบ div ประกอบด้วยจำนวนคำและอักขระของแอป มันจะอยู่ที่ด้านบนของแอปเว็บและจะอัปเดตทุกครั้งที่มีการเปลี่ยนแปลงข้อความ
สังเกตคุณลักษณะ id ซึ่งมีความสำคัญต่อการดำเนินงาน ค่าของ ID จะต้องไม่ซ้ำกัน เพื่อให้แอปสามารถใช้ค่าดังกล่าวระบุรายการที่ต้องการได้ การทำเช่นนี้ช่วยให้เราออกแบบองค์ประกอบเหล่านี้ได้และยังกำหนดเป้าหมายเมื่อเพิ่มฟังก์ชันได้อีกด้วย
Textarea เป็นองค์ประกอบฟอร์มในตัวที่ช่วยให้คุณพิมพ์ข้อความธรรมดาๆ ลงในเบราว์เซอร์ได้ ด้วยคุณสมบัติโฟกัสอัตโนมัติ คุณจะพร้อมเขียนได้ทันทีที่โหลดหน้าเสร็จ ในที่สุดหน้านี้อ้างอิงถึงไฟล์ javascript, script.js
เมื่อถึงจุดนี้ คุณสามารถเปิดไฟล์ index.html ในเบราว์เซอร์ได้ มันจะไม่ทำงานในตอนนี้เลย และมันจะดูไม่ดีด้วยซ้ำ แต่การทดสอบแอปของคุณในทุกขั้นตอนก็มีประโยชน์ เพื่อให้แน่ใจว่าพื้นฐานทำงานตามที่คุณคาดหวัง
ทำให้มันดูดีด้วย CSS
CSS ช่วยให้คุณกำหนดรูปแบบส่วนต่างๆ ของเว็บเพจของคุณโดยกำหนดเป้าหมายไปที่ส่วนเหล่านั้นและระบุค่าสำหรับคุณสมบัติเช่นขนาดตัวอักษรและสีพื้นหลัง แอปตัวอย่างนี้ไม่จำเป็นต้องมีการออกแบบที่ซับซ้อนมากนัก เนื่องจากอินเทอร์เฟซมีความพื้นฐานมาก อย่างไรก็ตาม เราสามารถปรับปรุงขอบที่หยาบให้เรียบเนียนขึ้นได้ด้วยความมีสไตล์
ขั้นแรก ให้จัดแต่งร่างกายเพื่อกำหนดการออกแบบโดยรวม:
ร่างกาย {
ระยะขอบ: 0;
การบุรอง: 0;
แสดง: กริด;
ความสูงขั้นต่ำ: 100วีเอช;
เทมเพลตกริด-แถว: เนื้อหาขั้นต่ำ 1ฟร;
}
CSS นี้ใช้ เค้าโครงกริด เพื่อวางตำแหน่งคำและอักขระให้นับในแถวแคบ ๆ เหนือพื้นที่ข้อความ คุณสมบัติ grid-template-rows ระบุว่าแถวจำนวนนับควรสั้นที่สุดเท่าที่จะเป็นไปได้ (min-content) และพื้นที่ข้อความควรเติมช่องว่างที่เหลือ (1fr)
แถวเคาน์เตอร์มีรูปแบบพื้นฐานเพื่อแยกความแตกต่างจากข้อความส่วนที่เหลือ โดยหลักๆ แล้วคือผ่านพื้นหลัง:
#เคาน์เตอร์ {
ฟอนต์แฟมิลี่: ซานเซอริฟ;
สีพื้นหลัง: #f7f7f7;
การจัดตำแหน่งข้อความ: ศูนย์;
ความกว้าง: 100%;
การบุรอง: 0.5เอ็ม 0;
}
ในที่สุด พื้นที่ข้อความก็ได้รับการออกแบบให้แสดงข้อความที่อ่านออกได้โดยมีพื้นที่ว่างเพียงพอ เส้นที่แยกจำนวนนับจากข้อความคือขอบบนสุดของพื้นที่ข้อความนี้
พื้นที่ข้อความ {
ความกว้าง: 100%;
ความสูง: 100%;
ขนาดตัวอักษร: 16จุด;
การบุรอง: 1ใน;
ขนาดกล่อง: กล่องขอบ;
โครงร่าง: 0;
ชายแดน: ไม่มี;
ขอบบน: 1พิกเซล แข็ง #999;
}
การเพิ่มฟังก์ชันด้วย JavaScript
เมื่อมีโครงสร้างและรูปแบบแล้ว คุณก็พร้อมที่จะเพิ่มฟังก์ชันการทำงานได้แล้ว: โค้ดที่ทำให้แอปง่าย ๆ นี้ทำงานบางอย่างได้จริง
ก่อนที่คุณจะเริ่มเขียนโค้ดที่ง่ายที่สุด ควรทำความเข้าใจก่อนว่าคุณต้องการให้โค้ดทำอะไร ในกรณีนี้มีข้อกำหนดทั่วไปเพียงสองสามข้อ:
- บันทึกข้อความที่ป้อนและโหลดซ้ำเมื่อจำเป็น
- อัปเดตจำนวนอักขระและคำเพื่อให้มีสถิติแบบเรียลไทม์
ข้อกำหนดทั้งสองประการเกี่ยวข้องกับการอัปเดตองค์ประกอบในเอกสาร ดังนั้นสคริปต์จะเริ่มต้นด้วยการรับการอ้างอิงไปยังโหนดเหล่านี้โดยใช้เมธอด getElementById:
คงที่ คำพูด = เอกสาร.getองค์ประกอบตามId("คำ");
คงที่ ตัวอักษร = เอกสาร.getองค์ประกอบตามId("ตัวอักษร");
คงที่ พื้นที่ข้อความ = เอกสาร.getองค์ประกอบตามId("ข้อความ");
โปรดทราบว่า คำ ตัวอักษร และข้อความเป็น ID ขององค์ประกอบที่เกี่ยวข้องในเอกสาร ซึ่งกำหนดไว้ในไฟล์ HTML ด้วยแอตทริบิวต์ id
ต่อไปเราต้องให้แอปตอบสนองเมื่อมีการเปลี่ยนแปลงข้อความ:
textarea.เพิ่มรายการเหตุการณ์"ป้อนข้อมูล", การทำงาน(อีวี) { รายการที่ตั้งในเครื่อง localStorage("ข้อความ", ค่าเป้าหมาย; update_counts(จำนวนเป้าหมาย.ค่า); -
ตัวรับฟังเหตุการณ์คือฟังก์ชันที่ JavaScript จะดำเนินการโดยอัตโนมัติเมื่อเกิดเหตุการณ์บางอย่าง ในกรณีนี้ เราจะแนบตัวรับฟังเข้ากับโหนด textarea ซึ่งจะดำเนินการเมื่อเหตุการณ์ "อินพุต" เกิดขึ้น นั่นคือเมื่อมีคนโต้ตอบกับพื้นที่ข้อความ
ถัดไป เราใช้ Web Storage API เพื่อบันทึกเนื้อหาปัจจุบันของ textarea ซึ่งมาจาก ev.target.value ในโครงสร้างนี้ ev เป็นวัตถุที่แสดงถึงเหตุการณ์ที่กระตุ้นตัวรับฟัง ev.target คือโหนดที่รับเหตุการณ์ และ ev.target.value คือข้อความของพื้นที่ข้อความนั้น
วิธี setItem ใช้พารามิเตอร์สองตัว: ชื่อคีย์ที่จะเชื่อมโยงกับข้อมูลและข้อมูลจริงที่จะจัดเก็บ
ถัดไป เราเรียก update_counts() โดยส่งข้อความเดียวกัน เราจะอธิบายคุณสมบัติดังกล่าวในอีกสักครู่
ตอนนี้เรากำลังบันทึกข้อความ คุณคงจะต้องการโหลดมันอีกครั้งเมื่อแอปเปิดหรือโหลดซ้ำ เราสามารถดูแลเรื่องนั้นได้ด้วยการใช้ตัวรับฟังอื่น:
หน้าต่าง.เพิ่มรายการฟังเหตุการณ์(“โหลด”, การทำงาน(อีวี) {
วาร์ ข้อความ = localStorage.getItem("ข้อความ"- textarea.value = ข้อความ; update_counts(ข้อความ); -
ตัวรับฟังนี้จัดการเหตุการณ์โหลดที่เกิดขึ้นบนวัตถุหน้าต่าง ซึ่งเป็นการแสดงระดับสูงสุดของหน้าต่างเบราว์เซอร์ เมื่อโหลดหน้าต่าง การเรียก getItem() จะส่งคืนค่าข้อความที่จัดเก็บไว้จากพื้นที่จัดเก็บข้อมูลในเครื่อง จากนั้นโค้ดนี้จะตั้งค่าของ textarea ให้เป็นข้อความที่โหลด และเช่นเดียวกับตัวรับฟังด้านบน เรียก update_counts() ด้วยข้อความนี้
งานที่เหลือจะทำในฟังก์ชัน update_counts() ซึ่งมีลักษณะดังนี้:
การทำงาน อัปเดตนับ(ข้อความ) { chars.innerHTML = ความยาวข้อความ; words.innerHTML = ข้อความ.แยก(' ').ความยาว; -
ข้อความทั่วไปไม่เหมือนกับ textarea ไม่มีคุณสมบัติค่า ดังนั้น เราจึงตั้งค่าคุณสมบัติ innerHTML แทน คุณสมบัติความยาวของสตริงเป็นคุณสมบัติแบบอ่านอย่างเดียวที่บอกจำนวนอักขระให้เราทราบ
text.split(' ') จะแยกสตริงที่อักขระช่องว่าง โดยส่งคืนผลลัพธ์เป็นอาร์เรย์ของสตริง เช่นเดียวกับสตริง อาร์เรย์มีคุณสมบัติความยาวซึ่งจะบอกจำนวนองค์ประกอบในอาร์เรย์ให้เราทราบ
อย่างไรก็ตาม หากคุณทดสอบโค้ดนี้ คุณอาจสังเกตเห็นข้อผิดพลาดสองสามข้อ:
- จะไม่นับคำด้วยตัวเองในบรรทัดอย่างถูกต้องเนื่องจากไม่มีอักขระช่องว่างรอบๆ
- หากไม่มีข้อความใดๆ เลย ระบบจะรายงานเพียงคำเดียวเนื่องจากวิธีการแยกข้อมูล
ในการแก้ไขปัญหาแรก คุณสามารถแยกออกเป็นนิพจน์ทั่วไป (\s หมายถึง "อักขระว่าง") แทนช่องว่างได้ เพื่อแก้ปัญหาข้อที่สอง ให้กรองสตริงว่างออกจากผลลัพธ์:
words.innerHTML = ข้อความ.แยก(/\ส/).กรอง(การทำงาน(น) { กลับ น != ''- }).ความยาว;
หากคุณไม่เข้าใจบรรทัดนั้นอย่างสมบูรณ์ โปรดดูหน้า MDN แยก และ กรอง.
คุณสามารถสร้างแอปพลิเคชันเว็บที่มีประโยชน์มากมายด้วยไฟล์เพียงไม่กี่ไฟล์ คุณยังสามารถขยายแอปบันทึกย่อแบบง่ายนี้เพื่อเพิ่มฟังก์ชันอื่นๆ ได้ ตัวอย่างเช่นคุณสามารถใช้ คุณสมบัติตำแหน่งหน้าต่าง เพื่อดึง URL ปัจจุบันและรองรับโน้ตหลายรายการโดยการเปลี่ยนแปลงชื่อที่คุณส่งไปยัง localStorage.setItem
