เริ่มต้นกับ HTML5

เริ่มต้นกับ HTML5
คู่มือนี้สามารถดาวน์โหลดได้ฟรีในรูปแบบ PDF ดาวน์โหลดไฟล์นี้เลย . อย่าลังเลที่จะคัดลอกและแบ่งปันสิ่งนี้กับเพื่อนและครอบครัวของคุณ

สารบัญ

§1. บทนำ





§2–มาร์กอัปความหมาย



§3–แบบฟอร์ม





§4 – ปานกลาง

§5–CSS3 การแปลงและแอนิเมชั่น



§6–แค่ Javascript ที่เพียงพอ

§7–ผ้าใบสร้างสรรค์



§8–ที่ไหนต่อไป?

1. บทนำ

คุณเคยได้ยินเกี่ยวกับมัน: HTML5 ทุกคนใช้มัน ได้รับการประกาศว่าเป็นผู้กอบกู้อินเทอร์เน็ต ซึ่งช่วยให้ผู้คนสามารถสร้างหน้าเว็บที่สมบูรณ์และมีส่วนร่วมได้โดยไม่ต้องใช้ Flash และ Shockwave



แต่แท้จริงแล้วมันคืออะไร?

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

HTML5 คือทั้งหมดนั้นและอื่น ๆ แล้วหนังสือเล่มนี้เกี่ยวกับอะไร?

ในบทช่วยสอน HTML5 นี้ ฉันจะถือว่าคุณได้สัมผัสกับ HTML และ CSS ในบางจุด บางทีคุณอาจสร้างธีม Wordpress ของคุณเอง หรือแก้ไขเค้าโครง MySpace ในอดีต บางทีคุณอาจเคยอ่านคู่มือ XHTML ของ MakeUseOf ประเด็นคือ ฉันคิดว่าคุณคงรู้วิธีการของคุณเกี่ยวกับหน้าเว็บ และสิ่งที่เราพูดถึงในคู่มือนี้จะไม่แปลกเกินไปสำหรับคุณ

จุดมุ่งหมายของคู่มือนี้ไม่ใช่เพื่อสอนคุณเกี่ยวกับ HTML5 ทั้งหมด ที่จะอยู่นอกขอบเขตของหนังสือเล่มนี้ทั้งหมด จุดมุ่งหมายคือการให้คำแนะนำอย่างอ่อนโยนเกี่ยวกับเทคโนโลยีเว็บใหม่ที่น่าทึ่งเหล่านี้ และเพื่อแสดงวิธีเจ๋ง ๆ ในการรวมเทคโนโลยีเหล่านี้เข้ากับเว็บไซต์ของคุณ

ทำไมคุณถึงต้องการเรียนรู้ HTML5

เป็นคำถามที่ยุติธรรม ในโลกของสมาร์ทโฟนและแอพ การเรียนรู้วิธีเขียนโปรแกรมหน้าเว็บมีความสำคัญจริงหรือ

เชื่อหรือไม่ เป็นเรื่องปกติที่จะเขียนแอปพลิเคชันสมาร์ทโฟนโดยใช้เทคโนโลยี HTML5 ก่อนหน้านี้ แอพ Facebook สำหรับ Android เขียนด้วย HTML5, CSS และ Javascript

Blackberry เป็นบริษัทใหญ่อีกบริษัทหนึ่งที่กระตือรือร้นกับ HTML5 อย่างมาก สิ่งนี้ชัดเจนในการทำซ้ำล่าสุดของระบบปฏิบัติการมือถือ Blackberry OS 10 ซึ่งพวกเขาสนับสนุนให้นักพัฒนาพัฒนาแอพพลิเคชั่นสำหรับโทรศัพท์ของพวกเขาโดยใช้เทคโนโลยีเว็บ

สมาร์ทโฟน Firefox OS ใหม่ทำงานบนแอป HTML5 ทั้งหมดเช่นกัน ความรู้ในการทำงานของ HTML5 เป็นสิ่งสำคัญในสภาวะแวดล้อมของสมาร์ทโฟนในปัจจุบัน

นอกจากนี้ การเรียนรู้ HTML5 ยังดีสำหรับอาชีพของคุณ ไม่เชื่อฉัน? อ้างอิงจาก Indeed.com เงินเดือนประจำปีเฉลี่ยสำหรับนักพัฒนา HTML5 คือ 89,000 ดอลลาร์ที่น่าจับตามอง เนื่องจากมีบริษัทจำนวนมากขึ้นเรื่อยๆ ที่เปลี่ยนเว็บไซต์ของตนเพื่อใช้เทคโนโลยี HTML5 นักพัฒนาที่รู้จัก HTML5 stack จึงเป็นที่ต้องการ มากกว่าที่เคย

1.1 ข้อกำหนดเบื้องต้น

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

แท็กไม่น่ากลัวเกินไป และคุณไม่กลัวที่จะทำให้มือสกปรกในซอร์สโค้ดบางตัว

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

หากคุณกำลังเกาหัวของคุณที่ด้านบนไม่ต้องกังวล สิ่งที่ดีที่สุดอย่างหนึ่งเกี่ยวกับ HTML และ CSS ก็คือมันง่ายมากจริงๆ อันที่จริง MakeUseOf มีคู่มือ XHTML ที่เหลือเชื่อที่จะช่วยให้คุณทำงานได้อย่างรวดเร็ว

หลังจากอ่านคู่มือดังกล่าวแล้ว คุณอาจต้องการดูบทความต่อไปนี้ด้วย:

คุณจะต้องใช้โปรแกรมแก้ไขข้อความและเบราว์เซอร์ที่ทันสมัย Internet Explorer เวอร์ชันใดก็ตามที่เก่ากว่า IE 9 และ Safari, Chrome และ Firefox เวอร์ชันเก่าบางรุ่นจะมีปัญหากับคุณลักษณะมากมายที่เป็นส่วนหนึ่งของ HTML5 และอาจป้องกันไม่ให้คุณปฏิบัติตามคู่มือนี้

ด้วยเหตุนี้ คุณจึงควรดาวน์โหลดเบราว์เซอร์รุ่นใหม่ ฉันแนะนำ Google Chrome และฉันจะใช้มันในแต่ละตัวอย่าง

ยิ่งไปกว่านั้น สิ่งที่คุณต้องการคือความเต็มใจที่จะเรียนรู้ โอ้และโปรแกรมแก้ไขข้อความ

1.2 โปรแกรมแก้ไขข้อความสำหรับการพัฒนาเว็บ

โปรแกรมแก้ไขข้อความของคุณคือสิ่งที่คุณจะใช้ในการเขียนโค้ดของคุณ คุณอาจสงสัยว่าโปรแกรมแก้ไขข้อความคืออะไร

อย่างแรกเลยไม่ใช่โปรแกรมประมวลผลคำ โปรแกรมต่างๆ เช่น Microsoft Word และ Apple's Pages ไม่เหมาะสำหรับการพัฒนาเว็บโดยสิ้นเชิง นั่นเป็นเพราะพวกเขาแนบข้อมูลเพิ่มเติมกับไฟล์ HTML, CSS และ Javascript ที่ทำให้เว็บเบราว์เซอร์ของคุณอ่านได้ยาก

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

คอมพิวเตอร์ของคุณมีอยู่แล้ว หากคุณกำลังใช้พีซีที่ใช้ Windows Notepad คือโปรแกรมแก้ไขข้อความที่คุณน่าจะติดตั้งไว้

สำหรับ Mac สถานการณ์จะแตกต่างออกไปเล็กน้อย OS X มาพร้อมกับโปรแกรมแก้ไขข้อความสี่แบบ สิ่งเหล่านี้เรียกว่า Vim, Emacs, Pico และ Nano อย่างไรก็ตาม ต่างจาก Notepad ที่ใช้งานได้ในเทอร์มินัล

สิ่งนี้ค่อนข้างน่ากลัวสำหรับผู้ที่ยังใหม่ต่อการพัฒนาเว็บและไม่ควรใช้โดยผู้ที่ยังใหม่ต่อการพัฒนาซอฟต์แวร์ เราจะไม่ใช้ในคู่มือนี้ อย่างไรก็ตาม เมื่อคุณมีความมั่นใจมากขึ้นอีกเล็กน้อยกับซอฟต์แวร์และการพัฒนาเว็บ การดู Vim และ Emacs นั้นคุ้มค่าแน่นอน พวกมันเป็นทั้งโปรแกรมแก้ไขข้อความที่ทรงพลัง และเมื่อเชี่ยวชาญแล้วจะช่วยคุณประหยัดเวลาได้มาก

บน Linux โปรแกรมแก้ไขข้อความเริ่มต้นจะแตกต่างกันไปตามแต่ละรุ่น บน Ubuntu มีแนวโน้มว่า Gedit ซึ่งเป็นโปรแกรมแก้ไขข้อความที่ค่อนข้างดีซึ่งไม่ต่างจาก Notepad มากนัก

อย่างไรก็ตาม ในหลักสูตรนี้ เราจะเขียนโค้ดของเราโดยใช้เครื่องมือสามอย่างที่แตกต่างกัน

อย่างแรกคือ Sublime Text 2 ฉันไม่สามารถแนะนำสิ่งนี้ได้มากพอ มันมาพร้อมกับทุกสิ่งที่ทำให้ชีวิตง่ายขึ้นสำหรับนักพัฒนามือใหม่ ประการแรก มันจะทำให้โค้ดของคุณอ่านง่ายขึ้นโดยการระบายสีบางส่วน ประการที่สอง ช่วยให้คุณสามารถสลับไปมาระหว่างไฟล์ต่างๆ ได้อย่างง่ายดายและเพื่อจัดการโครงการของไฟล์ทั้งหมด เหมาะอย่างยิ่งสำหรับการสลับระหว่างไฟล์และการแก้ไขโค้ดหลายบิตในทันที

ที่สามคือคอนโซล Javascript ที่สร้างขึ้นใน Google Chrome ซึ่งช่วยให้เราเขียน Javascript และดูว่ามันทำงานทันที และจะใช้เพื่ออธิบายแนวคิดการเขียนโปรแกรมพื้นฐาน

ประการที่สองคือเว็บไซต์ที่เรียกว่า Codepen.io เว็บไซต์ที่โดดเด่นนี้จะช่วยให้คุณเขียนโค้ด HTML, CSS และ Javascript ในเบราว์เซอร์และใช้งานได้ฟรี นอกจากนี้ยังช่วยให้คุณเห็นการเปลี่ยนแปลงของคุณได้ทันที

2. มาร์กอัปความหมาย

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับ Semantic Markup และวิธีจัดระเบียบโค้ดของคุณตามเนื้อหา

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

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

มาร์กอัปความหมายเป็นคุณลักษณะใหม่ใน HTML5 แท็กใหม่เข้ามาซึ่งทำงานในลักษณะเดียวกับแท็ก 'div' แต่ใช้สำหรับแท็กส่วนทั่วไปของหน้า

ดังนั้นพวกเขาทำงานอย่างไร? พิจารณารหัสต่อไปนี้

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

โอนไฟล์จาก Google ไดรฟ์เครื่องหนึ่งไปยังอีกเครื่องหนึ่ง

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

เมื่อคุณคิดเกี่ยวกับมัน เว็บไซต์จำนวนมากปฏิบัติตามอนุสัญญาเหล่านี้ เว็บไซต์ส่วนใหญ่มีส่วนที่สงวนไว้สำหรับการนำทาง พวกเขามักจะมีเนื้อหา พวกเขามากกว่าน่าจะมีส่วนหัว

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

จำรหัสที่เรามีมาก่อนได้ไหม ลองดูที่มันด้วยมาร์กอัปความหมายที่เพิ่มเข้ามา

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

มาดูแท็กมาร์กอัปที่มีความหมายมากกว่ากัน

2.1 มาตรา

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

2.2 บทความ

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

2.3 กัน

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

2.4 ส่วนหัว

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

2.5 การนำทาง

องค์ประกอบนี้สงวนไว้สำหรับส่วนการนำทางของเว็บไซต์ของคุณ ซึ่งจะมีลิงค์ไปยังเว็บไซต์อื่นหรือไปยังหน้าอื่น ๆ บนเว็บไซต์ ภายในบริบทของ MakeUseOf นี่อาจเป็นส่วนหนึ่งของหน้าที่อยู่ใต้ส่วนหัว

แท็กนี้สงวนไว้สำหรับส่วนล่างของหน้า ที่นี่ คุณสามารถใส่รายละเอียดการติดต่อ ข้อมูลลิขสิทธิ์ แผนที่ หรือลิงก์ไปยังหน้า 'เกี่ยวกับฉัน' ของคุณ

2.7 ทดสอบตัวเอง

  • Semantic Markup คืออะไรและมีไว้เพื่ออะไร?
  • ฉันกำลังสร้างหน้าเว็บและต้องการใช้แท็กเชิงความหมายเพื่อเก็บประวัติเกี่ยวกับตัวฉัน อันไหนที่ฉันใช้?

3. แบบฟอร์ม

หากคุณเคยทำการออกแบบเว็บมาบ้างแล้ว คุณอาจรู้วิธีสร้างฟอร์มอย่างง่ายใน HTML หากคุณฉลาดจริงๆ คุณอาจรู้วิธีนำข้อมูลที่คุณได้รับจากแบบฟอร์มและวิธีดำเนินการกับแบบฟอร์ม เช่น นำข้อมูลดังกล่าวไปไว้ในฐานข้อมูล

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

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

วิธีการใหม่ที่เราเขียนแบบฟอร์มใน HTML5 นั้นเจ๋งมาก ประการแรก คุณสามารถมั่นใจได้ว่าจะต้องกรอกบางฟิลด์เพื่อที่จะส่ง เพียงแค่เปลี่ยนมาร์กอัปของแบบฟอร์มเอง นอกจากนี้ คุณไม่จำเป็นต้องเขียนจาวาสคริปต์หรือ PHP เพื่อดำเนินการนี้อีกต่อไป มันง่ายนิดเดียว

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

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

3.1 การปรับปรุงแบบฟอร์ม

มาดูฟอร์มกันดีกว่าว่าเราจะทำให้ดีขึ้นได้อย่างไร

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

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

3.2 ประเภทและรูปแบบอินพุต

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

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

นอกจากนี้เรายังต้องการยกตัวอย่างอีเมลในสาขาของเรา เพื่อให้ผู้ใช้ไม่มีความกำกวมในสิ่งที่เขาหรือเธอต้องส่ง มันง่ายมากที่จะทำ เพียงสร้างแอตทริบิวต์ใหม่ของ 'ตัวยึดตำแหน่ง' ด้วยที่อยู่อีเมลตัวอย่าง

เราจะตรวจสอบให้แน่ใจว่าจำเป็นต้องมีฟิลด์ 'สีโปรด' ในวงเล็บมุมสุดท้าย (>) ในแท็กอินพุตอีเมล เพียงแค่เขียน 'required' แค่นั้นแหละ. ตอนนี้ เมื่อคุณพยายามส่งแบบฟอร์มของคุณโดยไม่มีค่า มันจะสร้างข้อความแสดงข้อผิดพลาด

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

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

อ่านเพิ่มเติม:

  • CSS Tricks – มาเขียนมาร์กอัปความหมายกันเถอะ
  • HTML5 Doctor – Let's Talk About Semantics

3.3 ทดสอบตัวเอง

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

  • ชื่อ
  • ที่อยู่อีเมล
  • หมายเลขโทรศัพท์
  • โรคภูมิแพ้

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

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

4. เฉลี่ย

เคยมีช่วงเวลาหนึ่งที่วิธีเดียวที่คุณสามารถแทรกวิดีโอหรือเสียงลงในหน้าเว็บได้คือการใช้ Flash, Shockwave หรือ SilverLight

นี้ไม่เหมาะ ประการแรก ไม่มีกรอบงานใดที่ทำงานได้ดีบนอุปกรณ์พกพา พวกเขาไม่พร้อมสำหรับโลกสมัยใหม่ของสมาร์ทโฟนและแท็บเล็ต

วิธีแชร์เกม xbox one 2016

นอกจากนี้ยังเป็นรูปแบบที่เป็นกรรมสิทธิ์ ด้วยเหตุนี้ ผู้ใช้ Linux และ OS X อาจได้รับประสบการณ์ที่ดี หรือแม้แต่ถูกขัดขวางจากการใช้บริการสื่อ เนื่องจากไม่มีให้บริการสำหรับแพลตฟอร์มของตน

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

4.1 HTML5 ทำให้วิดีโอและเสียงยอดเยี่ยมได้อย่างไร

HTML5 เปลี่ยนแปลงสิ่งนี้โดยอนุญาตให้นักพัฒนาเว็บรวมวิดีโอและเสียงลงในหน้าเว็บด้วยโค้ดเพียงไม่กี่บรรทัด มันใช้งานได้ดีบนอุปกรณ์พกพาและใช้งานได้กับทุกเว็บเบราว์เซอร์ที่ทันสมัย

ด้วยเหตุนี้ บริษัทใหญ่ๆ เช่น YouTube, Vimeo และ Netflix จึงใช้ประโยชน์จากการปฏิวัติ HTML5 ทำไมคุณไม่เข้าร่วมกับพวกเขา

4.2 ทั้งหมดเกี่ยวกับตัวแปลงสัญญาณ

ในบทนี้ คุณจะได้เรียนรู้วิธีใช้พลังของ HTML5 เพื่อรวมเสียงและวิดีโอในหน้าเว็บของคุณ

ประการแรก ฉันจะต้องเริ่มต้นด้วยคำเตือน แม้ว่าคุณจะใช้วิดีโอ HTML5 ได้ในทุกเว็บเบราว์เซอร์สมัยใหม่ แต่ก็ใช้ไม่ได้ผลเหมือนกันในเว็บเบราว์เซอร์แต่ละเว็บ ตัวแปลงสัญญาณที่ใช้โดยแต่ละเบราว์เซอร์จะแตกต่างกันไป ใน Internet Explorer คุณจำกัดการใช้วิดีโอ MP4 เท่านั้น Chrome มีความเอื้อเฟื้อเผื่อแผ่มากขึ้นและให้คุณใช้วิดีโอ WebM, MP4 และ Ogg Theora Opera มีข้อ จำกัด มากกว่าเล็กน้อยและอนุญาตให้คุณใช้วิดีโอ Theora และ WebM เท่านั้น

ด้วยเหตุนี้ คุณจึงต้องฉลาดขึ้นเล็กน้อยในการแทรกวิดีโอลงในหน้าเว็บของคุณ เรามาดูกันว่ามันทำงานอย่างไร

4.3 เริ่มต้นด้วยวิดีโอ

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

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

สิ่งต่อไปที่เราต้องการจะทำคือสร้างทางเลือก สิ่งนี้หมายความว่า? ดังนั้น สมมติว่าคุณกำลังใช้เบราว์เซอร์ที่เก่ากว่าและเจ๋งน้อยกว่าตัวใดตัวหนึ่งที่มีอยู่ เบราว์เซอร์รุ่นเก่าเหล่านี้จำนวนมากไม่สนับสนุนวิดีโอ HTML5 ดังนั้นจึงไม่สามารถเล่นวิดีโอ HTML5 ได้ คุณจะต้องฝากข้อความเพื่อแจ้งให้ทราบว่าพวกเขาต้องการอัปเกรดเบราว์เซอร์ และจนกว่าพวกเขาจะทำเช่นนั้น พวกเขาจะไม่สามารถดูวิดีโอของคุณได้

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

ตอนนี้ มาเพิ่มวิดีโอกัน ฉันจะทดสอบสิ่งนี้บน Google Chrome ดังนั้นฉันจะลิงก์ไปยังภาพยนตร์ MP4 ในการทำเช่นนั้น ฉันสร้างแท็ก Source และให้แอตทริบิวต์ของ src ซึ่งมีค่าของวิดีโอที่ฉันต้องการรวมไว้

หน้าของฉันพร้อมที่จะเปิดในเว็บเบราว์เซอร์ของฉันแล้ว ฉันได้เชื่อมโยงกับภาพยนตร์ที่ใหญ่มากจริง ๆ และด้วยเหตุนี้เมื่อเปิดออกจะมองเห็นได้เฉพาะโปสเตอร์เท่านั้น

4.4 การเพิ่มเสียง

สามารถแทรกเสียงลงในหน้าเว็บของคุณได้ในลักษณะที่ชวนให้นึกถึงวิธีที่เราแทรกวิดีโอลงในหน้าเว็บของเรา

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

จากนั้น ให้คุณใส่แท็กที่มาในไฟล์ MP3 ที่คุณต้องการเชื่อมโยง คุณไม่ต้องกังวลเรื่องความเข้ากันได้ของตัวแปลงสัญญาณมากนัก เว็บเบราว์เซอร์ล่าสุดส่วนใหญ่มีความสามารถในการเล่นไฟล์เสียง MP3 แม้ว่าจะเป็นแนวปฏิบัติที่ดีที่จะรวมไฟล์ '.ogg' และ '.wav' ไว้ด้วย - เผื่อไว้ด้วย

สุดท้าย คุณสามารถสร้างทางเลือกสำหรับเบราว์เซอร์รุ่นเก่าได้ ซึ่งทำได้ในลักษณะเดียวกับที่คุณสร้างทางเลือกสำหรับวิดีโอของคุณ

ผลลัพธ์ที่ได้จะมีลักษณะเช่นนี้

เมื่อคุณเปิดสิ่งนี้ในเว็บเบราว์เซอร์ของคุณ ควรมีลักษณะดังนี้

4.5 ทดสอบตัวเอง

  • จุดประสงค์ของการมีโปสเตอร์ในแท็กวิดีโอของคุณคืออะไร?
  • ตัวแปลงสัญญาณใดที่คุณไม่สามารถใช้ใน Internet Explorer
  • หากฉันต้องการให้หยุดเสียงชั่วคราว คุณจะเพิ่มแอตทริบิวต์ใดลงในแท็ก 'เสียง' ของคุณ

อ่านเพิ่มเติม:

5. CSS3 การแปลงและแอนิเมชั่น

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

ผู้คนได้ทำสิ่งที่น่าอัศจรรย์บางอย่างด้วย CSS3 ตั้งแต่การสร้างนาฬิกาดิจิทัลไปจนถึงการเขียนเกม Pong แบบเต็ม มีคนใช้มันเพื่อสร้างเครดิตเบื้องต้นให้กับ Mad Men เป็นเทคโนโลยีที่ทรงพลังอย่างแท้จริง และเมื่อเป็นผู้เชี่ยวชาญแล้ว ก็สามารถใช้เพื่อเพิ่มระดับการทำงานที่น่าทึ่งให้กับหน้าเว็บของคุณได้

ในบทนี้ ผมจะแนะนำคุณสั้นๆ เกี่ยวกับ CSS3 และแสดงวิธีเพิ่มเอฟเฟกต์ที่น่าทึ่งให้กับเพจของคุณ

ขั้นแรก ไปที่ codepen.io และสร้างปากกาใหม่ เราจะใช้พื้นที่นี้เป็นพื้นที่ทำงานตลอดระยะเวลาของบทนี้

เราจะเริ่มอย่างง่ายและสร้างการแปลงรูปภาพอย่างง่ายที่หมุนรูปภาพ 3 องศาเมื่อวางเมาส์เหนือ ก่อนอื่น สร้างแท็ก div และให้ ID ในตัวอย่างด้านล่าง ฉันได้ระบุ ID ของ 'muo'

5.1 CSS Hover Effects

ใน div นั้น ให้ใส่รูปภาพที่คุณเลือก ฉันได้รวมสำเนาโลโก้สำหรับ MakeUseOf

จากนั้นคุณจะต้องเขียนกฎของสไตล์ชีต ในตัวอย่างด้านล่าง ฉันได้สร้างระยะขอบด้านบนและด้านซ้ายเพื่อให้รูปภาพมีพื้นที่บางส่วน ฉันได้รวมกฎของสไตล์ชีตที่ดูน่าสงสัยซึ่งขึ้นต้นด้วย '#muo:hover' นั่นคืออะไร?

เมื่อคุณแนบ ':hover' กับกฎของสไตล์ชีต ไม่ว่าจะเป็นองค์ประกอบ ID หรือคลาส คุณกำลังบอกให้เบราว์เซอร์ใช้สไตล์นี้อย่างมีประสิทธิภาพเมื่อเมาส์ของคุณควบคุมองค์ประกอบ สวยเย็นใช่มั้ย?

ภายในกฎ '#muo:hover' เรามีบรรทัดที่ระบุว่า '-webkit-transform: rotation(3deg)' อย่างที่ฉันแน่ใจว่าคุณเดาได้ นี่กำลังบอกให้เบราว์เซอร์หมุนองค์ประกอบ div นั้นสามองศา

อย่างไรก็ตาม เป็นที่น่าสังเกตว่าแท็กนี้ใช้ได้เฉพาะใน Chrome และ Safari หากคุณต้องการให้โค้ดของคุณทำงานใน Firefox หรือ Internet Explorer 9 ขึ้นไป คุณจะต้องเปลี่ยนไฟล์ CSS ให้รวมบรรทัดต่อไปนี้

ตอนนี้ เมื่อคุณวางเมาส์เหนือรูปภาพ จะมีลักษณะดังนี้:

5.2 การใช้ CSS3 เพื่อปรับขนาดรูปภาพ

แล้วหยุดอยู่ตรงนั้นทำไม? คุณทราบหรือไม่ว่าคุณยังสามารถใช้วิธี 'แปลง' เพื่อขยายหรือย่อขนาดรูปภาพได้ มาเปลี่ยนไฟล์ CSS ของเราให้รวมบรรทัดต่อไปนี้

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

อย่างที่คุณเห็นจากโค้ด ฉันจะเพิ่มขนาดของโลโก้ MakeUseOf div ขึ้น 50% คุณสามารถทดสอบการทำงานนี้ได้โดยวางเมาส์เหนือมัน คุณจะเห็นว่าตอนนี้โลโก้ 'MakeUseOf' ขยายออกมากขึ้นอย่างเห็นได้ชัด

นี่เป็นการแนะนำการเปลี่ยนแปลง CSS3 ที่สุภาพมาก แม้ว่า CSS3 จะใหม่มาก แต่ตอนนี้คุณสามารถเห็นได้ว่าคุณสามารถจัดการกับมันได้มากมาย

5.3 ทดสอบตัวเอง

  • เราจะนำสไตล์ไปใช้กับองค์ประกอบเมื่อวางเมาส์เหนือได้อย่างไร
  • คุณจะหมุนรูปภาพโดยใช้ CSS3 ได้อย่างไร
  • คุณปรับขนาดภาพโดยใช้ CSS3 ได้อย่างไร
  • จะเกิดอะไรขึ้นหากคุณผ่านวิธีการแปลงของคุณ 'translate(50px, 50px)'

อ่านเพิ่มเติม:

HTML5 Rocks - การนำเสนอ

6. แค่จาวาสคริปต์ก็พอ

หากคุณต้องการใช้สคริปต์ในเว็บเบราว์เซอร์ของคุณ คุณต้องใช้ Javascript มันไม่มีทางเป็นไปได้สองทางหรอก น่าเสียดาย เป็นภาษาที่มีแฟน ๆ หลายคน และผู้ว่าหลายคนด้วย ในภาษาต่างๆ ก็มีหูดจำนวนมาก มีเหตุผลที่หนังสือที่โดดเด่นที่สุดเกี่ยวกับภาษานี้เรียกว่า 'Javascript: The Good Parts'

เป็นไปไม่ได้ที่จะสอนวิธีใช้ Javascript ในบทเดียว นั่นไม่ใช่จุดมุ่งหมายที่นี่ จุดมุ่งหมายคือการสอน Javascript ให้เพียงพอ เพื่อให้คุณเข้าใจในบทต่อไป ซึ่งเกี่ยวกับการใช้เทคโนโลยีที่เรียกว่า Canvas เพื่อสร้างภาพวาดและแอนิเมชั่น

6.1 การเข้าถึงคอนโซล

ในการดำเนินการนี้ เราจะใช้คอนโซล Javascript ที่มีอยู่ใน Google Chrome ทุกชุด หากต้องการเข้าถึง คุณสามารถคลิกขวาที่หน้าเว็บใดก็ได้ แล้วกด 'ตรวจสอบองค์ประกอบ' จากนั้นคลิกที่ 'คอนโซล' คุณควรเห็นสิ่งนี้

เป็นเรื่องปกติที่โปรแกรมแรกที่นักพัฒนามือใหม่ทุกคนเคยเขียนคือโปรแกรม 'Hello World' นี่เป็นโปรแกรมง่ายๆ ที่พิมพ์วลี 'Hello World' และไม่มีอะไรมากไปกว่านั้น ในคอนโซลของคุณ ให้พิมพ์ 'console.log('Hello world!');

6.2 โปรแกรมแรกของคุณ

แล้วเราทำอะไรกันแน่? ก่อนอื่น เราเรียกสิ่งที่เรียกว่า 'console.log' นี่เป็นโค้ดเล็กๆ น้อยๆ ที่สร้างขึ้นในคอมพิวเตอร์ ซึ่งจะพิมพ์สิ่งที่คุณบอกให้ทำได้ง่ายๆ จากนั้นเราได้ใส่วงเล็บลงไป และใส่เครื่องหมายคำพูดคู่ 'Hello World' สิ่งนี้เรียกว่า 'การส่งต่ออาร์กิวเมนต์' และประเภทของอาร์กิวเมนต์ที่เราส่งผ่านเรียกว่า สตริง เมื่อใดก็ตามที่คุณต้องการทำบางสิ่งเกี่ยวกับตัวอักษรและอักขระพิเศษ คุณเพียงแค่ต้องใช้เครื่องหมายคำพูดเดี่ยว อย่างไรก็ตาม หากคุณต้องการทำอะไรโดยใช้ตัวเลข คุณไม่จำเป็นต้องใส่เครื่องหมายคำพูดดังที่แสดงด้านล่าง

6.3 ตัวแปรใน JavaScript

คุณยังสามารถส่งตัวแปรไปที่ 'console.log' ได้อีกด้วย ตัวแปรฟังดูซับซ้อน แต่จริงๆ แล้วมันคือพื้นที่สำหรับใส่ข้อมูล สิ่งเหล่านี้มักเป็นตัวเลขหรือตัวอักษร ในการทำเช่นนั้น คุณประกาศตัวแปรโดยใช้คีย์เวิร์ด 'var' ตั้งชื่อมัน แล้วใส่เครื่องหมายเท่ากับ คุณให้ค่ากับมัน ดังนั้น ฉันจะสร้างตัวแปรที่เรียกว่า 'hello' แล้วกำหนดค่าเป็น 'Hello World!' ฉันจะส่งต่อไปยัง console.log

โปรดทราบว่าฉันไม่ส่ง 'สวัสดี' ไปยัง console.log โดยใช้เครื่องหมายคำพูด นั่นเป็นเพราะฉันต้องการพิมพ์เนื้อหาของ 'สวัสดี' ลงในคอนโซล ไม่ใช่ 'สวัสดี' เอง

6.4 ฟังก์ชั่นทำอะไร

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

6.5 ทำซ้ำการกระทำด้วย 'For' Loop

สมมติว่าคุณต้องการทำสิ่งเดียวกันเป็นจำนวนครั้งที่กำหนด ด้วยเหตุนี้เราจึงใช้ลูป 'for' พวกเขาดูน่ากลัวในตอนแรก แต่ทำได้ง่ายเมื่อคุณเข้าใจ คุณเริ่มต้นด้วยการเขียน 'for()'

ในวงเล็บ เราจะต้องการสร้างตัวแปรที่นับจำนวนครั้งที่เราได้ดำเนินการ ดังนั้นเราจึงได้สิ่งที่มีลักษณะเช่นนี้ 'for(var i = 0;)'

เราต้องการตรวจสอบว่า i ไม่ตรงตามเงื่อนไข ในกรณีนี้ เราต้องการเห็นว่ามันน้อยกว่า 10 ดังนั้นหลังจากเครื่องหมายอัฒภาค เราเขียนว่า 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

ถ้าฉันน้อยกว่า 10 เราต้องบวกมันทีละตัวแล้วทำบางอย่าง ดังนั้นเราจึงใส่ 'i = i + 1' ลูปของเราใกล้จะเสร็จแล้ว: 'for(var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

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

โครงสร้างการเขียนโปรแกรมสองรายการสุดท้ายที่เราจะดูคือคำสั่ง 'if' และ 'while' ลูป

6.6 ถฉาถ้อยแถลง

คำสั่ง 'if' จะดำเนินการหากตรงตามเกณฑ์ที่กำหนด คล้ายกับลูป 'for' ในการก่อสร้าง และทำงานดังนี้ สมมติว่าคุณมีตัวแปรชื่อ 'cheeseburgers' และคุณต้องการดูว่ามีค่า 'tasty' หรือไม่ ถ้าใช่ คุณต้องการล็อก 'yum, cheeseburgers' ไปที่หน้าจอ ในการทำเช่นนั้น คุณจะต้องเขียนอะไรแบบนี้

สังเกตว่าฉันเขียนว่า 'if(cheeseburgers == 'tasty')' อย่างไร คุณใช้ double หรือ triple equals เพื่อตรวจสอบความเท่าเทียมกันและ single equals เพื่อกำหนดค่า

6.7 ในขณะที่ลูป

ในที่สุด วนรอบ 'ในขณะที่' ดำเนินการในขณะที่ตรงตามเกณฑ์ ลองนึกภาพว่าคุณต้องการบันทึก 'yum, cheeseburgers' ในขณะที่ชีสเบอร์เกอร์ก็อร่อยไม่แพ้กัน เมื่อต้องการทำเช่นนั้น คุณจะต้องเขียนต่อไปนี้

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

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

6.8 ทดสอบตัวเอง

  • ฉันต้องการนับถอยหลังจาก 30 เขียนวง 'for' ที่จะทำอย่างนั้น
  • ฉันต้องการสร้างตัวแปรที่เรียกว่า 'makeuseof' และให้ค่าเป็น 'awesome' มันทำอย่างไร?
  • ฉันต้องการสร้างฟังก์ชันที่พิมพ์ 'MakeUseOf Is Awesome' เมื่อถูกเรียก เขียนฟังก์ชันนั้น

อ่านเพิ่มเติม:

7. ผ้าใบสร้างสรรค์

Canvas เป็นเทคโนโลยีสุดเจ๋งที่ให้คุณวาดภาพและสร้างแอนิเมชั่นโดยไม่ต้องใช้ Flash หรือ Silverlight ผู้คนใช้มันเพื่อสร้างสิ่งมหัศจรรย์และแปลกประหลาด รวมถึงเครื่องจำลองเครื่องเป่าผมและวิดีโอเกมต่างๆ เป็นเทคโนโลยีชิ้นใหญ่ที่ยอดเยี่ยมและน่าเหลือเชื่อ ในบทช่วยสอนนี้ ฉันจะแนะนำคุณคร่าวๆ เกี่ยวกับมัน

เป็นที่น่าสังเกตว่า Canvas ใช้งานได้กับเว็บเบราว์เซอร์สมัยใหม่เท่านั้น หากคุณใช้ IE, Chrome หรือ Firefox เวอร์ชันเก่า คุณอาจไม่สามารถทำตามบทนี้ได้ หากเป็นกรณีนี้ คุณควรพิจารณาดาวน์โหลด Google Chrome เวอร์ชันล่าสุด ซึ่งเป็นเว็บเบราว์เซอร์ที่ฉันสร้างบทช่วยสอนนี้

7.1 เริ่มต้นใช้งาน Canvas

ก่อนอื่น คุณจะต้องเปิดเว็บเบราว์เซอร์และไปที่ codepen.io สร้างปากกาใหม่

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

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

เราจะสร้างตัวแปร (ฉันเรียกมันว่า 'สาธิต') จากนั้นเลือกองค์ประกอบผ้าใบและกำหนดให้กับตัวแปรนั้น ในการทำเช่นนั้น คุณใช้ document.getElementByID() และส่ง ID ขององค์ประกอบที่คุณต้องการเลือก

บรรทัดที่สองในสคริปต์ของเราสร้างตัวแปรอื่นที่เรียกว่า 'บริบท' จากนั้นเรียกใช้ 'demo.getContext('2d')' สิ่งนี้บอกเบราว์เซอร์ว่าเรากำลังทำงานกับภาพ 2 มิติ จากนั้นจึงส่งต่อฟังก์ชันที่จำเป็นที่เราต้องการเพื่อวาดไปยังหน้าจอ

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

ที่ไม่น่าประทับใจแม้ว่า มาทำอะไรที่ล้ำหน้ากว่านี้อีกหน่อย และใช้ความมหัศจรรย์ของ Javascript และ Canvas เพื่อสร้าง MakeUseOf โลโก้ใหม่

7.2 รูปร่างและข้อความ

ลบบรรทัดที่สี่ของเราแล้วแทนที่ด้วยเส้นที่วางสี่เหลี่ยมผืนผ้าไว้ที่มุมซ้ายบนและยืดออกตามความยาวของผืนผ้าใบของเรา

อาร์กิวเมนต์สองข้อแรกกำหนดตำแหน่งที่เราต้องการวางตำแหน่งแกน x และ y ของรูปร่าง มาตั้งค่าสองตัวนี้เป็น '0' กันก่อน อาร์กิวเมนต์ที่สามหมายถึงความกว้างของรูปร่าง มาตั้งค่าเป็น '200' แล้วปล่อยให้อาร์กิวเมนต์ที่สี่เป็น '50' ตอนนี้คุณควรมีบางอย่างที่มีลักษณะเช่นนี้

นี่เป็นการเริ่มต้นที่ดี แต่ไม่ได้กล่าวถึง MakeUseOf เลย ดังนั้นเราจะเพิ่มข้อความ มาสร้างตัวแปรที่มี 'makeuseof' แล้วเราจะเรียกตัวแปรนั้นว่า 'MakeUseOf'

จากนั้นเราจะต้องการสร้างตัวแปรบริบทอื่น เรียกสิ่งนี้ว่า 'context2' และตรวจสอบให้แน่ใจว่าเป็น 2d นี่คือสิ่งที่เราจะใช้ในการเขียนข้อความของเรา

เราจะต้องการให้ข้อความของเราเป็นสีน้ำเงินและซ้อนทับสี่เหลี่ยมสีแดงของเรา เหมือนกับเมื่อก่อน เราจะใส่สไตล์การเติมเป็น 'สีน้ำเงิน' ตอนนี้ เราจะเลือกลักษณะของข้อความของเรา เราต้องการให้มีขนาดใหญ่ 20px จัดรูปแบบตัวหนาและใช้แบบอักษร Arial เราเรียกแบบอักษรบนบริบท2 และกำหนดค่า 'ตัวหนา 20px arial'

เนื่องจากเราต้องการให้ข้อความนี้ซ้อนทับกล่องสีแดงก่อนหน้าของเรา เราจึงต้องเรียก 'textBaseLine' ในบริบท2 และให้ค่าเป็นค่าสูงสุด เมื่อเสร็จแล้ว เราจะเรียก 'fillText' ในบริบท2 และส่งผ่านตัวแปรที่มีข้อความของเราและพิกัด x และ y ที่เราตั้งใจจะวางข้อความของเรา ผลลัพธ์สุดท้ายของโค้ดของเราเป็นแบบนี้

ภาพที่ผลิตโดยโค้ดมีลักษณะดังนี้

7.3 คำบนผ้าใบ

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

วิธีลบลายน้ำออกจากภาพโดยใช้โปรแกรมระบายสี

7.4 ทดสอบตัวเอง

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

อ่านเพิ่มเติม:

8. ที่ไหนต่อไป?

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

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

แบ่งปัน แบ่งปัน ทวีต อีเมล การอัพเกรดเป็น Windows 11 คุ้มค่าหรือไม่?

Windows ได้รับการออกแบบใหม่ แต่นั่นเพียงพอที่จะโน้มน้าวให้คุณเปลี่ยนจาก Windows 10 เป็น Windows 11 หรือไม่

อ่านต่อไป หัวข้อที่เกี่ยวข้อง
  • Wordpress & การพัฒนาเว็บ
  • HTML5
  • Longform
  • คู่มือ Longform
เกี่ยวกับผู้เขียน Matthew Hughes(386 บทความที่ตีพิมพ์)

Matthew Hughes เป็นนักพัฒนาซอฟต์แวร์และนักเขียนจากลิเวอร์พูล ประเทศอังกฤษ แทบจะไม่มีใครพบเขาเลยหากไม่มีกาแฟดำเข้มข้นในมือ และชื่นชอบ Macbook Pro และกล้องของเขาเป็นอย่างยิ่ง คุณสามารถอ่านบล็อกของเขาได้ที่ http://www.matthewhughes.co.uk และติดตามเขาทางทวิตเตอร์ที่ @matthewhughes

เพิ่มเติมจาก Matthew Hughes

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก