สร้างเว็บแอปแรกของคุณ: โน้ต + ตัวนับอย่างง่ายและรวดเร็ว 📝⚡

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

สิ่งที่คุณกำลังจะสร้าง

หากทำตามบทช่วยสอนนี้ คุณจะสร้างแอปพลิเคชันเว็บง่ายๆ เพื่อจัดเก็บบันทึกข้อความและนับอักขระและคำ

แอปจะเก็บรักษาข้อมูลไว้ จึงจะจำข้อความไว้เมื่อคุณโหลดซ้ำหรือเปิดหน้าใหม่อีกครั้ง ซึ่งหมายความว่าคุณจะมีวิธีที่สะดวกในการบันทึกข้อความใดๆ ที่คุณต้องการอ้างอิงในภายหลัง เช่น ที่อยู่ URL ฯลฯ 📄🔗

ตัวอย่างแอปพลิเคชันเว็บแบบข้อความง่าย ๆ ที่แสดงบันทึกต่าง ๆ รวมถึงรายการปฏิทินและรายการ URL

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

คุณจะสร้างมันขึ้นมายังไง?

แม้ว่าแอปพลิเคชันเว็บจะมีความหลากหลาย แต่โดยทั่วไปจะเกี่ยวข้องกับเทคโนโลยีหลักสามประการ ได้แก่ HTML, CSS และ JavaScript สิ่งสำคัญคือคุณต้องเข้าใจบทบาทของพวกเขาก่อนที่คุณจะเริ่มต้น

HTML: Hypertext Markup Language ช่วยให้คุณสามารถกำหนดโครงสร้างเนื้อหาของคุณได้ ด้วยเครื่องมือนี้ คุณสามารถทำเครื่องหมายข้อความตามความหมายได้ เช่น ระบุว่าเป็นย่อหน้า หัวเรื่อง หรือรายการในรายการ เป็นต้น
CSS: Cascading Style Sheets ช่วยให้คุณสามารถกำหนดสไตล์ให้กับเนื้อหาของคุณได้ เมื่อใช้ภาษาเหล่านี้ คุณสามารถระบายสีย่อหน้าเป็นสีเขียว ทำลิงก์ทั้งหมดให้เป็นตัวหนา หรือวางแถบด้านข้างถัดจากบทความหลักของคุณได้
JavaScript: ด้วยภาษาโปรแกรมนี้ คุณสามารถเพิ่มฟังก์ชันการทำงานให้กับเว็บไซต์ของคุณได้ คุณสามารถให้ปุ่มแสดงหรือซ่อนส่วนต่างๆ ของเอกสารของคุณเมื่อคลิก หรือใช้โปรแกรมประมวลผลคำหรือวิดีโอเกมเต็มรูปแบบได้

เขา เว็บไซต์.dev (เขียนโดยสมาชิกทีม Chrome) และ MDN เครือข่ายนักพัฒนา Mozillaเป็นแหล่งข้อมูลที่ดีเยี่ยมสองแห่งเกี่ยวกับเทคโนโลยีเว็บพื้นฐาน

หน้าแรกของเว็บไซต์ web.dev ที่มีแหล่งเรียนรู้เกี่ยวกับ HTML, CSS และ JavaScript

โครงสร้างของแอป

แอปที่คุณจะสร้างจะประกอบด้วยไฟล์สามไฟล์ง่าย ๆ คือ 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