TOMAS ไรเมอร์: สวัสดีครับทุกคน ชื่อของฉันโทมัสไรเมอร์ MIKE Rizzo: และผมไมค์ Rizzo TOMAS ไรเมอร์: เราเป็นสอง CS50s TS และวันนี้เรากำลังนำการสัมมนาเรื่อง JavaScript และ CSS สำหรับปพลิเคชันเว็บ หากคุณต้องการที่จะทำตาม การเชื่อมโยงที่ถูกต้องไปที่นั่น และคุณต้องการที่จะนำมันขึ้น ในเวลาสั้น ๆ ที่คอมพิวเตอร์ได้อย่างไร มีการเชื่อมโยงเป็น มันเป็นสถานที่ขนาดเล็กซึ่งมีการเชื่อมโยงไปยัง ทรัพยากรทั้งหมดที่เรากำลังจะเป็น ชี้คุณในวันนี้และยังมีจำนวนมาก ข้อมูลที่เป็นประโยชน์ที่เขียนโดยเรา อ่านเพิ่มเติมในเชิงลึกเมื่อคุณกลับไป และคุณกำลังพยายามที่จะจำสิ่งที่ เราไม่พูดว่าสิ่งที่เป็นคุณ พูดคุยเกี่ยวกับการและอื่น ๆ MIKE Rizzo: ทั้งหมดขวา ดังนั้นขอเริ่มต้น TOMAS Reimers: ดังนั้นคุณจึงต้องการจะเริ่มต้นอย่างไร ตกลง MIKE Rizzo: ใช่ ดังนั้นครั้งแรกที่เราอยากจะเริ่มต้นด้วยความกว้าง ภาพรวมเกี่ยวกับอินเทอร์เน็ตและ ชนิดแฟ้มเมื่อออกแบบเว็บไซต์ ในขณะที่นำเสนอนี้เราไม่ต้องการที่จะ ได้รับเป็นจำนวนมากเข้ามาใน JavaScript มาก ต่อมาในวันที่เราต้องการที่จะเริ่มต้นด้วย เพียงแค่ชนิดของเช่นเดียวกับมุมมองตานก ของสิ่งที่เว็บไซต์และวิธีการที่ ที่จะคิดเกี่ยวกับการออกแบบ เว็บไซต์สำหรับการเริ่มต้น ดังนั้นพวกคุณที่จุดนี้ - กับมัน เป็นคืนวันศุกร์ - ควรจะมี ส่ง CS50 การเงินของคุณ ชุดปัญหา หวังว่าที่เป็นรสชาติที่ดี ของสิ่งที่เขียนโปรแกรมเว็บสามารถ แต่ที่นี่เราต้องการที่จะชนิดของให้ คุณได้ลิ้มรสอีกด้วยเช่นกัน TOMAS Reimers: ดังนั้นเพียงเพื่อสรุปสิ่งที่ ที่เกิดขึ้นเมื่อคุณพิมพ์ใน URL ของคุณจะ เว็บเบราว์เซอร์ของคุณ URL ที่ได้รับ เงยหน้าขึ้นในคอมพิวเตอร์ และเครื่องคอมพิวเตอร์ของคุณเชื่อมต่อ ยังคอมพิวเตอร์เครื่องอื่น ซึ่งเป็นเจ้าภาพเว็บไซต์ที่ OK ดังนั้นเมื่อคุณไปที่ google.com คุณ เชื่อมต่อกับอย่างใดอย่างหนึ่งของ Google คอมพิวเตอร์ซึ่งมี ไฟล์สำหรับการ google.com จากนั้นก็ถามหาไฟล์ที่ระบุ ดังนั้นถ้าคุณไป - ผมไม่ทราบว่า - example.com / index.html หรือ / test.html, คุณกำลังจะขอ ไฟล์ที่ระบุว่า และเว็บเซิร์ฟเวอร์ที่จะ ที่จะกลับมาให้คุณ จากนั้นเมื่อคุณไปถึงไฟล์ที่ - เมื่อคุณได้รับเครื่องคอมพิวเตอร์ที่ ไฟล์ - มันจะเริ่มต้น ในการสร้างหน้าเว็บ ดังนั้นตอนนี้ก็มีไฟล์ HTML, ซึ่งเป็นประเภทเช่น โครงสร้างของหน้าเว็บ ไฟล์ HTML ยังสามารถอ้างอิง ไฟล์ CSS ที่กำหนด รูปแบบของหน้าเว็บ ไฟล์จาวาสคริปต์ที่กำหนด การมีปฏิสัมพันธ์กับหน้าเว็บ ไฟล์ภาพซึ่งเป็นภาพเพียง และอาจจะเชื่อมโยงไปยังไฟล์ HTML อื่น ๆ ซึ่งคุณสามารถเยี่ยมชม MIKE Rizzo: ตกลงที่ดี ดังนั้นพวกคุณมีบางที พยายามตั้งขึ้นพื้นที่ท้องถิ่นของคุณ บนเครื่องเสมือนของคุณ และที่เพียงแค่ชนิดของเป็นท้องถิ่น โดเมนที่เครื่องคอมพิวเตอร์ของคุณเป็นเจ้าภาพจัดงานเพียง สำหรับคุณที่อยู่ IP ของคุณเอง ดังนั้นภายในที่แล้วคุณสามารถเพิ่ม ไปหน้าเว็บของคุณเอง ผมหมายถึงใน CS50 การเงินคุณควรมี เพิ่มบางหน้า HTML ซึ่งเป็น การจัดเรียงของในห่อกระดาษห่อ PHP แต่ในที่สุดสิ่งที่หน้า PHP ของคุณ ถูกแสดงผลเป็นแบบ แต่คิดกลับไปที่จุดเริ่มต้นมาก pset ของเรามีการตั้ง สิทธิ์สำหรับทุกอย่างใช่มั้ย? ดังนั้นเพียงแค่นี้โดยทั่วไปจะช่วยให้เรารู้ว่า ที่สามารถอ่านเขียนและอาจเป็นไปได้ การดำเนินการแต่ละไฟล์ ดังนั้นเรากำลังจะทำอย่างรวดเร็ว - หือ? TOMAS Reimers: ดังนั้นเราจะ ที่จะทำสาธิตรวดเร็ว ดังนั้นเพียงแค่จะเตือนคุณเมื่อคุณ เชื่อมต่อกับคอมพิวเตอร์ของ Google - ใครก็ตามที่ - และขอไฟล์คอมพิวเตอร์เป็นครั้งแรก ความต้องการที่จะให้แน่ใจว่าคุณได้รับอนุญาต ที่จริงดูไฟล์ที่หรืออ่านว่า ยื่นเพราะคุณไม่สามารถเพียงแค่ถาม ไฟล์ใด ๆ ในคอมพิวเตอร์ที่ใช่มั้ย ที่จะเป็นอันตรายต่อการรักษาความปลอดภัย ดังนั้นไฟล์ในระบบที่เราใช้เช่น เครื่องใช้ CS50 นี้มีสาม คนทั่วไปที่สามารถมี สิทธิ์ในการบางสิ่งบางอย่าง ประการแรกคือการที่เกิดขึ้นจริง เจ้าของไฟล์กล่าวว่า สองคือกลุ่มที่ ไฟล์เป็น เราจะไม่ให้ความสำคัญ มากเกินไปในที่ และสิ่งสุดท้ายคือการจัดเรียงของเช่น โลกหรือเหมือนคนอื่นที่เป็น ไม่เฉพาะไฟล์ที่และไม่ได้ มีสิทธิการเป็นเจ้าของใด ๆ ที่มากกว่านั้น ดังนั้นถ้าเรามีเจ้าของกลุ่ม แล้วโลก แล้วสำหรับแต่ละกลุ่มเหล่านี้คุณ สามารถมีหนึ่งในสามของสิทธิ์ ตกลงหรือหลายของพวกเขา คุณสามารถมีสิทธิ์อ่าน คุณสามารถมีสิทธิ์ และคุณสามารถมีผู้สิทธิ์ ดังนั้นในแง่ของประเภทไฟล์ที่เกิดขึ้นจริงอ่าน ได้รับอนุญาตเป็นเหมือนจริงอ่าน เนื้อหาของแฟ้ม ได้รับอนุญาตที่ถูกต้องคือการเขียน ที่จะบอกว่าไฟล์ ได้รับอนุญาตดำเนินการทำงาน เช่นไฟล์ที่คุณทำเมื่อคุณเรียกใช้อย่างใดอย่างหนึ่ง โครงการ CS50 ของคุณ ดังนั้นเมื่อเรากำลังคิดเกี่ยวกับไฟล์ เช่นเมื่อเราต้องการที่จะอ่าน HTML ไฟล์ที่ต้องโลก สามารถอ่านได้ใช่มั้ย น่าจะยังเจ้าของต้องการ เพื่อให้สามารถแก้ไขไฟล์ที่ เพื่อให้เจ้าของที่จะต้อง อ่านและเขียนสิทธิ์ พวกเขาไม่ได้จริงๆต้องดำเนินการ กลุ่มเราจะรักษา เช่นเดียวกับโลกตอนนี้ ดังนั้นพวกเขาจึงจำเป็นต้องอ่านสิทธิ์ แต่พวกเขาไม่จำเป็นต้องเขียน หรือผู้สิทธิ์ และตอนนี้ถ้าเราคิดว่ากลับไปอดีต PSETs สิ่งที่เราตระหนักคือชนิดเหล่านี้ มีลักษณะเหมือนของไบนารีใช่ไหม 1 ยืนใช่ 0 ไม่ และเราจริงสามารถแปล นี้เพื่อไบนารี ดังนั้นที่ 110 ในไบนารีจะ 6 100 จะเป็น 4 เช่นเดียวกันกับโลก ดังนั้นจำนวนที่คุณจะได้รับ สิทธิ์นี้จะเป็น 644 MIKE Rizzo และถ้าคุณคิดว่ากลับไป เมื่อคุณ chmoded สิ่งที่ผมเชื่อว่า พวกเขาให้ในปัญหาที่กำหนด ตัวอย่างของการที่คุณสามารถทำ สิ่งที่ต้องการ chmod 644 แล้วชื่อไฟล์ 644 แล้วตอนนี้คุณสามารถมองเห็นได้โดยตรง ที่ที่มาจาก เพื่อหวังว่าจะทำให้ เล็ก ๆ น้อย ๆ ที่ชัดเจนมากขึ้น และเพื่อความชัดเจนแล้วคุณคนที่แต่งตัวประหลาด - โอ้ใช่นี่เป็นอีกครั้งที่ ดังนั้น 600 แล้วก็จะเป็นตัวอย่าง เราให้ขึ้นที่นี่ที่เจ้าของมี อ่านและสิทธิ์ในขณะที่กลุ่ม และโลกไม่ได้รับอนุญาตใด ๆ การเข้าถึงไฟล์ TOMAS ไรเมอร์: และแล้วเราก็มีอย่างรวดเร็ว รายการของสิทธิ์ที่พบบ่อย ดังนั้นไดเรกทอรีที่คุณต้องการ ที่จะ chmod 711 จริง ด่วนกัน - ไดเรกทอรีที่จะมี ได้รับอนุญาตปฏิบัติการหมายความว่าจะสามารถ เพื่อเปิดไดเรกทอรี ภาพ, CSS, JavaScript, HTML ความต้องการ 644 เพราะพื้นโลก ความต้องการสิทธิ์ในการอ่าน และ PHP ซึ่งพวกคุณได้เห็น ถึงแม้ว่าเราจะไม่ได้พูดคุยเกี่ยวกับเรื่องนี้ อย่างเคร่งครัดเป็น chmoded โดยทั่วไปจะมี 600 ได้รับอนุญาตเพราะมันทำงานด้วย สิทธิ์ของเจ้าของ อย่างน้อยในเครื่อง MIKE Rizzo: ดังนั้นถ้าคุณทำไม่ได้โดยเฉพาะ ระบุชนิดของไฟล์ที่ ที่คุณต้องการในการตั้งค่าจริง ขึ้นนำเสนอนี้ - เรามีปัญหากับเรื่องนี้เพราะ ทุกอย่างไม่ได้อย่างถูกต้อง chmoded - คุณกำลังจะได้รับชนิดของ ข้อผิดพลาดที่ต้องห้ามที่เว็บไซต์ ไม่จริงไม่ได้รับอนุญาต การเข้าถึงไฟล์ใด คุณต้องการที่จะเข้าถึง และแน่นอนที่สามารถแก้ไข - ในขณะที่ปัญหาการตั้งค่า - โดยการเปลี่ยน สิทธิ์ที่เหมาะสม TOMAS ไรเมอร์: และสุดท้ายสำหรับการแสดงความคิดเห็น การพัฒนาท้องถิ่นได้อย่างรวดเร็วเป็น - เรา นี้ขึ้นมา แต่เราแค่อยาก ที่จะนำมันขึ้นมาอีกครั้ง - ถ้าคุณถามสำหรับเซิร์ฟเวอร์ - พื้นที่ท้องถิ่นนั้น ตัวอย่างเช่น com หรือสิ่ง. - และคุณไม่ได้ระบุแฟ้มที่เฉพาะเจาะจง ไฟล์ที่เครื่องคอมพิวเตอร์ของคุณจะ จะขอเรียกว่า index.html หรือถ้าไม่ได้อยู่ index.php เย็น เพื่อให้เป็นเพียงสรุปของทุกอย่าง หวังว่าที่เราได้ครอบคลุมใน ส่วนและการบรรยาย และจนถึงขณะนี้ใน CS50 และตอนนี้เรากำลังจะเริ่มต้นการพูดคุย เกี่ยวกับห้องสมุดเฉพาะ และ CSS ห้องสมุด ปพลิเคชันเว็บ ดังนั้นเหตุผลหนึ่งที่รวดเร็วเหตุผลที่เรามี ห้องสมุดมีการเขียนโปรแกรม - มีจำนวนมากของปัญหาในการเป็น การเขียนโปรแกรมที่ให้ popping ขึ้น อีกครั้งและอีกครั้งและอีกครั้ง คุณอาจพบว่าจำนวนมากของเว็บไซต์ ต้องมีความสามารถในการเลื่อนลง เมนูตัวอย่างเช่นหรือต้องการความสามารถในการ จะมีปุ่มมาตรฐานมาก รูปแบบซึ่งอาจจะไม่เป็น สิ่งที่ง่ายที่สุด ตอนนี้คุณเริ่มต้นที่จะได้รับเป็น HTML คุณ ตระหนักดีว่าปุ่มสามารถจริง ดูน่าเกลียดจริงๆถ้าคุณ ไม่ได้ทำอะไร ดังนั้นคนจำนวนมากได้เขียน เรียกว่าห้องสมุด และในบริบทนี้พวกเขากำลัง ที่เรียกว่ากรอบ เรากำลังจะใช้ สองสลับกัน และสิ่งที่พวกเขาเป็นพวกเขากำลังโดยทั่วไป เพสตรี้ชิ้นของรหัส - ทั้ง CSS หรือ JavaScript - ที่ใช้เวลาไปมาก ทีมที่คุณมีในการเข้ารหัส ดังนั้นพวกเขาก่อนกำหนดพวงของการเรียนหรือ ก่อนกำหนดพวงของฟังก์ชั่น กรณี JavaScript ซึ่ง คุณสามารถเรียกในภายหลัง และจากนั้นคุณสามารถเรียงลำดับของรับ การเข้าถึงรหัสนี้ได้โดยไม่ต้อง ไม่ต้องทำอะไร ตัวอย่างของห้องสมุดเป็น CS50.H. นั่นคือห้องสมุดที่เรามอบให้คุณกลับมา ในสัปดาห์หนึ่งซึ่งได้รับอนุญาตให้คุณทำ สิ่งที่ต้องการ GetInt ที่และ GetString โดยไม่ต้องเขียน รหัสใด ๆ ด้วยตัวคุณเอง MIKE Rizzo: ทั้งหมดขวา ดังนั้นที่นี่เช่นเดียวกับที่เราจะต้องรวมถึง ในคของเราไฟล์ที่แตกต่างกัน ห้องสมุดเรายังควรจะรวมอยู่ใน HTML ของเราไฟล์ห้องสมุดที่แตกต่างกัน ตัวอย่างเช่นถ้าเราต้องการที่จะรวม ห้องสมุด JavaScript เฉพาะที่นี่ บางทีหนึ่งที่เราได้เขียน ตัวเองเป็นก็จัดไว้ เรียกว่า script.js เราเพียงแค่ ใช้เครื่องหมายนี้ ดังนั้นเราจึงมีประเภทสคริปต์เท่ากับ JavaScript แหล่งเท่ากับ JavaScript.js และถ้าคุณคิดว่ากลับไป CS50 ของคุณ ปัญหาทางการเงินที่กำหนดถ้าคุณมองใน header.php ในโฟลเดอร์แม่แบบ คุณควรจะได้เห็น บางส่วนของเหล่านี้รวมถึง ดังนั้นนี่เป็นครั้งแรกหนึ่ง - สคริปต์ - รวมถึงห้องสมุด JavaScript รวมทั้งห้องสมุด CSS เป็น นิด ๆ หน่อย ๆ ที่แตกต่างกัน ที่นี่แทนของสคริปต์ แท็กแท็กที่คุณต้องการเชื่อมโยง แล้วประเภท CSS ข้อความ จะแตกต่างกันเพียงเล็กน้อย คุณไม่เคยมีการรวม แผ่นลักษณะ rel แต่ผมคิดว่ามันเป็นโดยทั่วไป การปฏิบัติที่ดี และแล้วในที่สุด HREF ซึ่งคุณ อาจจะได้เห็นใน ATAGs ของคุณสำหรับการเชื่อมโยง ในการเชื่อมโยงที่แตกต่างกันเพียงแค่ระบุ การเชื่อมโยงในการที่จะพบว่า ตัวอย่างเช่นถ้าเราต้องการที่จะเชื่อมโยง ห้องสมุดแตกต่างกัน - ให้เพียงกล่าวว่า - ที่อาศัยอยู่ใน styles.css และเราต้องการที่จะเชื่อมโยงว่าในที่ พื้นที่บนเว็บเราจะคัดลอก แล้ววางลงในสิ่งที่ เรามีสิทธิที่นี่แทน TOMAS Reimers: OK หวังว่าคุณ คนคุ้นเคย กับวิธีการที่จะเชื่อมโยง CSS คุณมีที่จะทำใน ชุดสีน้ำตาลที่ผ่านมาของคุณ JavaScript, บางส่วนของคุณอาจจะ มีประสบการณ์บางอย่างกับ บางส่วนของคุณอาจไม่ได้ ดังนั้นสำหรับตอนนี้รู้ว่าไฟล์ JavaScript เป็นอย่างมากเช่นไฟล์ CSS ใน ความรู้สึกที่ว่าคุณสามารถเชื่อมโยงกับมันหรือ ที่คุณสามารถรวมไว้ภายใน และจะช่วยให้คุณไปสู่​​สิ่งที่สคริปต์ และเรากำลังจะนำคุณผ่าน นิด ๆ หน่อย ๆ ของจาวาสคริปต์ในภายหลัง ดังนั้นการใช้ห้องสมุด - เมื่อคุณได้รวมมันเป็น ง่ายๆเป็นตัวอักษรโทร ฟังก์ชั่นหรือเพิ่ม ชื่อชั้นไป สิ่งสุดท้ายที่เราต้องการที่จะพูดคุย เกี่ยวกับในแง่ของห้องสมุด - และนี่เป็นอีกบันทึกทางเทคนิค - เป็นใบอนุญาตเปิดแหล่งที่มา ดังนั้นเมื่อคุณพบห้องสมุดที่เกิดขึ้นจริงเหล่านี้ คุณอาจจะคิดของ คำถามที่ชอบมันก็โอเคว่าฉันแค่ โดยใช้รหัสของคนอื่นโดยเฉพาะอย่างยิ่ง เพราะนั่นคือสิ่งที่เราเป็นอย่างมาก บอกว่าคุณจะไม่ทำในหลักสูตรนี้ ดังนั้นในกรณีที่มีการออกใบอนุญาตเปิดแหล่งที่มาที่ จำนวนมากของนักพัฒนา - เมื่อพวกเขาได้เขียนห้องสมุด ซึ่งพวกเขาคิดว่าอาจจะเป็น เป็นประโยชน์กับคนอื่น ๆ - จะเผยแพร่ไปยังเว็บ และให้ใบอนุญาต และใบอนุญาตโดยทั่วไปว่าผมขอ อนุญาตอื่น ๆ คนที่จะใช้ชิ้นส่วนของซอฟต์แวร์นี้ ด้วยการเรียงลำดับดังต่อไปนี้ ข้อกำหนด เราได้รวมการเชื่อมโยงไปยังเว็บไซต์ที่ดีที่จะ ช่วยให้คุณเข้าใจในใบอนุญาต กรณีที่คุณใช้ในพวกเขา ข้อกำหนดทั่วไปเป็นสิ่งที่ต้องการ คุณยินดีที่จะใช้ห้องสมุดของฉันดังนั้น ตราบใดที่คุณให้ฉันเครดิต คุณสามารถใช้ห้องสมุดของฉัน ตราบใดที่เมื่อแบ่ง คุณไม่โทษฉัน คุณสามารถใช้ห้องสมุดของฉันนาน ๆ ที่คุณไม่ได้ใช้ในการทำเงิน ด้วยตัวคุณเอง เหล่านี้เป็นชนิดที่พบบ่อย ข้อกำหนด สำหรับโครงการสุดท้ายนี้ CS50 พวกเขา ไม่ควรจะเกี่ยวข้องสุดเพราะ โครงการที่ว่าพวกคุณใช้เป็น อาจค่อนข้างจัดเรียงของที่รู้จักกัน แต่เมื่อคุณจริงออกไปสู่ โลกและเริ่มต้นการใช้ห้องสมุดที่ อาจจะหรืออาจไม่สามารถดำเนินการเช่นเดียวกับที่ บางคนที่ได้รับความนิยมมากขึ้นเรา ไปได้ที่จะผ่าน มันเป็นเรื่องดีที่จะสามารถที่จะเข้าใจ ใบอนุญาตเหล่านี้และเพื่อ เข้าใจในสิ่งที่พวกเขาหมายถึง และจะกลับไป MIKE Rizzo: OK ดังนั้นตอนนี้ย้ายไปยังตัวอย่าง ของ CSS ที่เกิดขึ้นจริง ณ จุดนี้ที่ทำให้คุณอาจ ไม่ได้พบนี้ แต่คุณอาจได้พบมันใน ชีวิตประจำวันของคุณที่บางสิ่งบางอย่าง ที่มีลักษณะเดียวกับเบราว์เซอร์ ไม่อาจมีลักษณะเดียวกัน วิธีการในการเบราว์เซอร์อื่น นี้เรียกว่าเบราว์เซอร์เบราว์เซอร์ ความเข้ากันได้ และมากขึ้นก็กลายเป็นมากขึ้นและ ปัญหามากขึ้นโดยเฉพาะอย่างยิ่ง เบราว์เซอร์จะมีเสรีภาพมากขึ้นและมากขึ้น ที่จะใช้สิ่งที่พวกเขาต้องการ เพื่อที่จะเอาชนะนั้นมีจริง ห้องสมุดที่ดีที่เรียกว่า Normalize.CSS TOMAS ไรเมอร์: เรารวมถึงการเชื่อมโยง ณ จุดนี้ก็เป็นประโยชน์ถ้า คุณมีแล็ปท็อปของคุณมี ดูที่เว็บไซต์ และเราจะให้นี้ให้กับคุณได้ ตอนนี้เพียงเพราะ CS50 สุดท้าย โครงการเป็นจริงจะ ขอให้คุณที่จะใช้มัน ในทำนองเดียวกันและผ่านเบราว์เซอร์ ดังนั้นเพียงแค่เก็บไว้ในด้านหลังของของคุณ หัวนี้เป็นห้องสมุดที่ยอดเยี่ยม เพราะมันจะเรียงลำดับของ มาตรฐานสิ่งที่ ใน Firefox, บางสิ่งบางอย่างอาจแสดง เป็นหนึ่งพิกเซลไปทางซ้าย แล้ว Chrome อาจตัดสินใจว่าจริง สิ่งที่คุณหมาย 10 พิกเซล ไปทางซ้าย และคุณต้องการที่จะสร้างมาตรฐานนี้ ปกติจริงจะทำดีจริงๆ งานของการตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณ ดูเบราว์เซอร์ข้ามเดียวกัน MIKE Rizzo: ดังนั้นหากเราต้องการที่จะเพียงแค่ คลิกที่ลิงค์จริงๆได้อย่างรวดเร็วและการแสดง สิ่งที่มีลักษณะเหมือนคุณ สามารถดาวน์โหลดได้โดยใช้ ปุ่มดาวน์โหลดยักษ์ หรือฉันขอแนะนำให้คุณอ่านเพิ่มเติมเกี่ยวกับมัน โดยคลิกที่ลิงก์นี้ในที่ต่ำกว่า มุมขวา TOMAS ไรเมอร์และถ้าคุณจริง คลิกอ่านเพิ่มเติมที่นั่น - คลิกแหล่งที่ GitHub - คุณจริงจะเห็นโอเพนซอร์ส ใบอนุญาตใน LICENSE.md มีสิทธิ และคุณจะเห็นที่นี่เป็น ใบอนุญาตที่นิยมมาก อีกครั้งถ้าคุณอ่านผ่านข้อความ คุณจะสามารถค้นหาได้ในเว็บไซต์ เราก่อนที่จะอ้างอิงและสามารถที่จะ เข้าใจได้โดยไม่ต้องอ่าน ผ่านศัพท์แสงทางกฎหมาย MIKE Rizzo: ตกลงที่ดี ดังนั้นที่ทำให้ปกติ เราต้องการที่จะให้คุณ ที่จริงได้อย่างรวดเร็ว โอ้คุณมีคำถามหรือไม่ ผู้ชม: ดังนั้นเมื่อคุณดาวน์โหลดได้คุณ เพียงทำตามรหัสที่พวกเขาได้ว่า ภายใต้ปุ่มดาวน์โหลดหรือไม่ TOMAS ไรเมอร์: ใช่ดังนั้น เมื่อคุณดาวน์โหลด - MIKE Rizzo: โอ้ว่าเป็นจุดที่ดี ดังนั้นคำถามคือวิธีการทำ เราจริงดาวน์โหลดมันได้หรือไม่ ดังนั้นถ้าเราคลิกลิงค์ที่เราเห็น ว่ามันจริงปรากฏขึ้น รหัสที่มา ดังนั้นการทำเช่นนี้สิ่งที่เราจะทำได้ จะเป็นเพียงการคลิกบันทึกเป็น บันทึกเป็นและที่ควร นำขึ้นไฟล์ และแล้วเราสามารถเลือกที่จะบันทึก เป็น normalize.CSS แล้วคุณจะต้องเชื่อมโยงใน - TOMAS ไรเมอร์: วิธีเดียวกับที่คุณ การเชื่อมโยงในไฟล์อื่น ๆ และเมื่อคุณเชื่อมโยงในสิ่งที่ดี เกี่ยวกับการทำให้ปกติมันเป็นจริงจะ ดูแลทุกอย่างหนัก ทำงานด้วยตัวเอง ซึ่งหมายความว่าคุณไม่ได้มี เพื่อเพิ่มการเรียนใด ๆ คุณไม่ต้องทำอะไรแปลก มันจะปกติโดยคุณ ทำอะไรต่อไป ใช่คุณต้องมีมัน Google Chrome ไม่ตอบสนอง เพียงแค่ได้อย่างรวดเร็วกัน - ผมสังเกตเห็นเรากระโดดลงไปในนี้ ส่วนที่เหลือของงานนำเสนอนี้เป็น จะเป็นภาพรวมอย่างรวดเร็ว การสำรวจของห้องสมุด โดยทั่วไปสิ่งที่พวกเขามี สิ่งที่พวกเขาทำ วิธีที่พวกเขากำลังที่มีประโยชน์ วิธีที่คุณอาจจะใช้พวกเขา หากคุณต้องการที่จะเริ่มมองหาที่พวกเขา ต่อไปนี้พร้อมและการอ่านผ่าน พวกเขาก็จะสูงสนับสนุนให้ หรือคุณยินดีที่จะ เริ่มต้นการดาวน์โหลดพวกเขาและรวมทั้ง พวกเขาอยู่ในสายตาเพียงเพื่อดูสิ่งที่พวกเขา มีลักษณะเหมือนหรือสิ่งที่พวกเขาทำอย่างไรถ้าคุณมี แล็ปท็อปของคุณในหน้าของคุณ ถ้าไม่คุณยินดีที่จะให้ ฟังเราพูดคุย เรากำลังจะให้พูด และเรามีเวลาที่สิ้นหวังว่า เราจริงจะได้รับในการแสดง สิ่งที่บางส่วนของห้องสมุดเหล่านี้ มีลักษณะเหมือน MIKE Rizzo: Cool ขวาทั้งหมดดังนั้นตอนนี้ขอพูดคุย เกี่ยวกับอักษรน่ากลัว TOMAS ไรเมอร์: ตัวอักษรเพื่อให้น่ากลัวคือ เว็บไซต์ที่ประณีตจริงๆโดยเฉพาะอย่างยิ่งสำหรับผู้ที่ ของเราที่จะไม่งดงาม มีความสามารถ โดยไม่สนใจตัวอักษรชื่อน่ากลัวมันจะช่วยให้ คุณพวงของไอคอนที่มี มีประโยชน์มาก ดังนั้นหลายครั้งที่คุณจะใช้ ไอคอนที่คุณอาจต้องการเช่น x ดีมาก ที่คุณสามารถปิดบางสิ่งบางอย่าง หรือคุณอาจต้องการชนิดของปุ่มแก้ไขบางส่วน ด้วยดินสอเขียนเหมือน คนอื่นมี และที่ว่าเมื่อคุณได้เรียนรู้ว่า วาดภาพไอคอนที่สามารถ น่าเบื่อมากและยาก ตัวอักษรน่ากลัว - ถ้าคุณจริง ไปที่เว็บไซต์ - จะช่วยให้คุณจำนวนมากของไอคอนที่อยู่ภายใต้ ไอคอนที่ด้านบน ใช่เพียงแค่ด้านบน มันจะทำให้คุณเป็นจำนวนมาก ไอคอนฟรี ดังนั้นที่นี่คุณจะเห็นว่าเรามีสิ่งที่ต้องการ เครื่องหมาย, บาร์, สายฟ้า, ปฏิทิน, ข้อผิดพลาด, หนังสือและอื่น ๆ นี้จะมีประโยชน์มาก รวมถึงวิธีการที่คุณนี้ก็คือค​​ุณมี แท้จริงไฟล์ CSS และหลังจากที่คุณได้รวมไฟล์ CSS, สิ่งที่คุณสามารถทำได้คือการที่คุณสร้าง แท็กที่เรียกว่าฉันมัน satands เพื่อ icon ที่มีระดับเอฟเอ ยืนตัวอักษรน่ากลัว และแล้วสิ่งที่ชั้นที่คุณต้องการ ดังนั้นถ้าผมต้องการที่ไอคอนบวกนี้ ตารางที่นี่ฉันจะให้ มันคลาสเอฟเอ แล้วเอฟเอบวกยัติภังค์ยัติภังค์ตาราง MIKE Rizzo: Cool, โอคลาโฮมา TOMAS ไรเมอร์: แล้ว CSS ล่าสุด ห้องสมุดที่เราต้องการที่จะได้รับผ่านทางเรา พยายามที่จะให้มันน้อยที่สุดใน CSS ห้องสมุดเพราะเราไม่ตระหนักถึง ชื่อเรื่องของงานนำเสนอนี้ เป็นห้องสมุด JavaScript แต่เราคิดว่าเราอาจได้เป็นอย่างดี แนะนำคุณกับห้องสมุดอื่น ๆ ในขณะที่เรากำลังพูดถึงห้องสมุด มัน Google เว็บแบบอักษร และสิ่งที่ Google เว็บแบบอักษรที่ช่วยให้คุณ ทำคือการเพิ่มตัวอักษรในเว็บไซต์ของคุณ ซึ่งเป็นวิธีที่ง่ายมากที่จะทำให้มัน สวยและความแตกต่างที่กำหนดไว้ จากคนอื่นคือถ้ามันมี ตัวอักษรที่ดีหรือถ้ามันมีดี คอลเลกชันของตัวอักษร Google เว็บแบบอักษรที่เป็นสิ่งที่ดีไม่เหมือนที่อื่น ห้องสมุดในแง่ที่ว่ามันเป็น การติดตั้งที่แนะนำจริงๆ ดังนั้นถ้าคุณทำตามลิงค์ก็ google.com / แบบอักษรที่ผมเชื่อว่า ถ้าคุณทำตามที่คุณ สามารถเลือกแบบอักษรของคุณ คุณสามารถเลือกที่ด้านซ้ายจาก ความหนา, เอียงและอื่น ๆ และจากนั้นเมื่อคุณได้เลือกอย่างใดอย่างหนึ่ง คุณสามารถคลิกที่การใช้งานได้อย่างรวดเร็ว ที่นั่น ด้านล่างขวาของกล่อง แล้วเลื่อนลงมา แรกของทั้งหมดที่พวกเขาให้คุณ CSS ที่ คุณจำเป็นต้องจริงเชื่อมโยงไป มันอยู่ที่นั่น คุณก็สามารถคัดลอกและวางที่ค่ะ และสิ่งที่ดีเกี่ยวกับเรื่องนี้คือ คุณไม่จริงจำเป็นต้อง ดาวน์โหลดไฟล์ สิ่งที่มันจะทำคือมันจะ เชื่อมโยงไปยังรุ่นของ Google มัน เพื่อกลับไปยังสิ่งที่หมายความว่า ซึ่งหมายความว่าเมื่อผู้ใช้ ดาวน์โหลดไฟล์ของคุณ - ดาวน์โหลดหน้า HTML ของคุณ - HTML ของคุณ หน้าจะอ้างอิงไฟล์นี้ ดังนั้นแล้วคอมพิวเตอร์ของคุณจะเห็น โอ้ก็โฮสต์บน google.com ค่อนข้าง กว่า theirsite.com ให้ฉันไปถาม Google สำหรับไฟล์ที่ และจากนั้นก็จะรวมถึง มันเกือบจะเป็นถ้าเป็น เป็นส่วนหนึ่งของเว็บไซต์ของคุณเอง TOMAS Reimers: Cool และเมื่อคุณรวมถึงที่แล้ว รวมไว้ใน CSS ของคุณจะช่วยให้คุณ เส้นที่เกิดขึ้นจริง เพื่อให้คุณตั้งตระกูลแบบอักษรสถานที่ให้บริการ เท่ากับชื่อของแบบอักษรของคุณ MIKE Rizzo: OK ดังนั้นเราเพิ่งเสร็จสิ้นด้วย CSS และบางส่วนของคุณอาจจะคิดดี เรามีบางอย่างใน CSS CS50 การเงิน แต่ห้องสมุด CSS เป็นบูต จริงเรามีเงินทุนน้อย ต่อมาภายใต้ JavaScript เพราะด้วย ห้องสมุด Bootstrap CSS ยังมาพร้อม ที่มีจำนวนมากของ JavaScript ที่ บูตหรือ Twitter - ที่ทำให้เงินทุน - ใช้ในการจัดการทั้งหมดของ CSS ของพวกเขา TOMAS ไรเมอร์: ทุกคนมีใด คำถามเพื่อให้ห่างไกลเกี่ยวกับ CSS ในการทั่วไป เราดีหรือไม่? น่ากลัว MIKE Rizzo: น่ากลัว TOMAS Reimers: ดังนั้นการเคลื่อนย้าย เพื่อ JavaScript MIKE Rizzo: ดังนั้นเราต้องการที่จะพูดคุย เกี่ยวกับ jQuery เพื่อเริ่มต้นด้วย มีใครได้ยิน jQuery ก่อนหรือใช้มันได้หรือไม่ ใช่คู่หรือไม่ ดังนั้นหากคุณเพียงแค่ทำงานร่วมกับชาวพื้นเมือง JavaScript, คุณจะพบว่าตัวเอง พิมพ์จำนวนมากที่มีตัวเลือกยาวมาก ดังนั้นสิ่งที่ jQuery ไม่สามารถที่จะให้ เสื้อคลุมที่ดีสำหรับ JavaScript ภาษาที่ช่วยให้คุณสามารถเลือก และจัดการกับองค์ประกอบที่แตกต่างกัน ภายในรูปแบบวัตถุเอกสารของ หน้าเว็บหรือ DOM ซึ่งผมคิดว่า พวกคุณเคยได้ยินใน บรรยายที่จุดนี้ TOMAS ไรเมอร์: ถ้าคุณยังไม่เคยได้ยินของ หรือการบรรยายถ้าคุณยังไม่ได้ดู ยังแบบวัตถุของเอกสารเป็น โดยทั่วไปว่าสิ่งที่เป็นตัวแทนของ HTML ดังนั้นการจัดเรียงของดูเหมือนต้นไม้ จริงเมื่อคุณวาดมันออกมา คุณมีองค์ประกอบที่ด้านบน คุณมีหัวและลำตัว แล้วภายในที่คุณ มีทุกอย่างอื่น ที่เรียกว่า DOM - แบบวัตถุของเอกสาร ดังนั้นรูปแบบที่เป็นตัวแทนของวัตถุใน เอกสารเป็นวิธีที่ง่ายที่จะคิด เกี่ยวกับที่ และเป็นหนึ่งในสิ่งที่ดีเกี่ยวกับ jQuery คือจริงๆมันทำให้ traversing ที่และองค์ประกอบการจัดการภายใน ที่ง่ายอย่างไม่น่าเชื่อ เพื่อให้ง่ายในความเป็นจริงที่ว่าส่วนใหญ่ของ จาวาสคริปต์ห้องสมุดหรือถ้าไม่ได้ ส่วนใหญ่ส่วนใหญ่ของคนที่ คุณจะเห็นจริงต้อง jQuery ดังนั้น ที่พวกเขาสามารถเรียกตัวเองเพียง เพราะถ้าคุณไม่ได้มี jQuery คุณ จะเสียเวลามากพยายามที่จะ คิดออกว่าจะเลือกบางอย่าง องค์ประกอบและวิธีการที่จะทำสิ่งอื่น ๆ และสิ่งที่ดีอื่น ๆ เกี่ยวกับ jQuery คือว่ามันเป็นเบราว์เซอร์ข้ามกัน ดังนั้นอย่าลืมกลับมาเมื่อเรากล่าวว่า ไม่ได้ใช้เบราว์เซอร์ทั้งหมด สิ่งที่ทางเดียวกันได้หรือไม่ นี้จะเป็นจริงได้ใน JavaScript และหนึ่งในสิ่งที่ดีเกี่ยวกับ jQuery คือการที่จะตรวจสอบ เบราว์เซอร์และตรวจสอบ วิธีการที่เหมาะสม ดังนั้นหากคุณต้องการที่จะเลือกองค์ประกอบ Internet Explorer อาจจะบอกว่าคุณ ควรจะทำด้วยวิธีนี้ Firefox อ​​าจจะบอกว่าถูกต้อง วิธีนี้เป็นวิธีที่ jQuery ไม่สนใจ เมื่อคุณบอก jQuery เพื่อเลือก องค์ประกอบมันจะคิดออกว่าเป็น ควรที่จะทำภายในเบราว์เซอร์ ผู้ใช้อยู่ในขณะนี้และจากนั้นทำ มันเป็นแบบนั้น MIKE Rizzo: ดังนั้นขอไม่พูดคุยเกี่ยวกับ การใช้งานของ jQuery นิด ๆ หน่อย ๆ เช่นเดียวกับ PHP, jQuery มีโดยเฉพาะอย่างยิ่ง ความรักเครื่องหมายดอลลาร์ ดังนั้นคุณจะพบว่า jQuery ใด ๆ - ดีที่ไม่ได้ทั้งหมด บางครั้งคุณสามารถแทนที่เงินดอลลาร์ เซ็นสัญญากับคำ jQuery แต่โดยทั่วไปเพียงเพราะ สั้นเมื่อใดก็ตามที่คุณเห็น jQuery เป็น ใช้มันจะอยู่กับเครื่องหมายดอลลาร์ ดังนั้นที่นี่เรากำลังแสดงให้เห็นจุดเริ่มต้น เลือกองค์ประกอบใน DOM ที่นี่เรามีเครื่องหมายดอลลาร์ตาม โดยวงเล็บเปิดแล้วคำพูด และภายในเครื่องหมายคำพูดไปตัวเลือกของเรา สำหรับองค์ประกอบที่แตกต่างกัน เช่นเดียวกับในการใช้ CSS ที่เราต้องการตัวเลือกที่จะ จะสามารถรูปแบบองค์ประกอบที่แตกต่าง ภายในหน้า ผู้ที่ตัวเลือกที่แตกต่างกันแปล ว่าเป็น jQuery และ JavaScript, ส่วนใหญ่ ดังนั้นที่นี่เรามี foo จุด ดังนั้นถ้าคุณจำได้จากการบรรยาย จุดก็หมายความว่าชั้น ดังนั้นเราเลือกองค์ประกอบ ด้วย foo ชั้น ดังนั้นถ้าฉันไปข้างหน้าและเปิดขึ้นของเรา คอนโซล JavaScript ที่นี่ได้อย่างรวดเร็วจริงๆ เพียงแค่แสดงให้เห็นว่าถ้าฉันเพียงแค่พิมพ์ เครื่องหมายดอลลาร์เราจะเห็นว่ามันเป็นบางส่วน ฟังก์ชั่นที่เกิดขึ้น และจะกำหนดไว้เพียงแค่ jQuery TOMAS ไรเมอร์: สำ​​หรับบรรดาของคุณ ที่ไม่คุ้นเคยคอนโซลเป็นเครื่องมือ ภายใน Chrome ซึ่งช่วยให้คุณไป โดยทั่วไปในการเรียกใช้ JavaScript หน้าปัจจุบัน นี้คุณจะพบว่ามีประโยชน์อย่างไม่น่าเชื่อเมื่อ คุณจริงการแก้จุดบกพร่องและคุณ ต้องการที่จะเป็นเหมือนสิ่งที่เป็นปัจจุบัน ค่าของบางตัวแปรทั่วโลกหรือสิ่งที่ เป็นสิ่งอื่นใด มันเป็นชนิดเช่น GDB มีข้อยกเว้น ที่คุณสามารถจริง จัดการกับองค์ประกอบบนหน้าเว็บที่มี ในแฟชั่นมากขึ้น และยังไม่ได้โดยทั่วไปให้ตรวจสอบ ในกับคุณก่อนที่จะได้ทำอะไรเลย ดังนั้นในขณะที่ GDB อาจจะเหมือนที่คุณ แน่ใจหรือว่าต้องการที่จะใช้ขั้นตอนต่อไปหรือไม่ คอนโซลเป็นจริง ดังนั้นเป็นหน้าเว็บจะแสดงผลและ ทำสิ่งที่มันทำ สภายังทำงานร่วมกับมัน และคุณสามารถใส่รหัส impute เป็น คอนโซลที่ซึ่งจะ จะทำงานบนหน้า MIKE Rizzo: ดังนั้นจะเข้าสู่คอนโซล ผมคิดว่าผมควรจะสั้น กล่าวถึงวิธีการทำที่ ปัญหาสุดท้ายที่คุณอาจจะมี ใช้ Chrome ของการตรวจสอบองค์ประกอบ ฟังก์ชั่นหรือดูที่มาหน้า - และผู้ที่จะสามารถเข้าถึงได้เพียงแค่ขวา คลิกที่หน้าหรือเฉพาะเจาะจง องค์ประกอบและการทำอย่างใดอย่างหนึ่งตรวจสอบ องค์ประกอบหรือมุมมองเพจที่มา นอกจากนี้เรายังสามารถเข้าถึง JavaScript คอนโซลโดยตรง เลือกตรวจสอบองค์ประกอบ คอนโซลเป็นอย่างนั้นคุณเพียงแค่กด บนด้านขวาสุด หรือคุณจะได้ไปยัง ที่มุมขวาบน ที่ถูกตัดออกไปบนหน้าจอนี้ที่ มันมีสามแถบแนวนอน และคุณจะไปลงไปที่เครื่องมือและ แล้ว JavaScript คอนโซล ที่นี่ที่สามารถดู - อย่างน้อยใน Windows - ทางลัดคือการควบคุมการเปลี่ยนเจดังนั้นแล้ว ถ้าเราต้องการที่จะเลือกองค์ประกอบ ภายในหน้านี้เช่นเดียวกับที่ผมแสดงให้เห็นว่า ก่อนที่เราจะเปิด parens เครื่องหมายดอลลาร์ แล้วคำพูด สิ่งที่น่าสนใจคือโดยทั่วไป ราคาเดียวและราคาคู่เป็น ซึ่งแลกได้ ดังนั้นคนจำนวนมากเพียงแค่ใช้เพียงครั้งเดียว คำพูดเพราะพวกเขากำลังได้เร็วขึ้นในการพิมพ์ กว่าคำพูดสองเพราะคุณทำไม่ได้ ต้องกด Shift ค้างไว้ ดังนั้นฉันจะทำอย่างนั้นได้ในขณะนี้ ดังนั้นผมจึงต้องการที่จะเลือกสิ่งที่ กับชั้น คอนเทนเนอร์เพียงเพราะฉันรู้ว่า สิ่งที่เป็นของเรา หน้าเว็บที่เหมาะสมในขณะนี้ และฉันกด Enter และเราจะเห็นว่ามันเลือกมัน ดังนั้นจึงแสดงให้เห็นว่ามัน กลับมาที่วัตถุ เพื่อให้เป็นทางเลือกขั้นพื้นฐาน ถ้าเราต้องการที่จะจัดการกับมันจริง, คุณจะต้องเรียกสิ่ง ในการเลือกที่ซึ่ง เราจะได้รับในภายหลัง TOMAS Reimers: ดังนั้นเพียงแค่มองไปที่ว่า เพิ่มเติมในเชิงลึกนี้ไม่แตกต่างกัน กว่าสายงานที่เราทำใน C. ชื่อของฟังก์ชันนี้จะเป็น แปลกเล็กน้อย มันเป็นเครื่องหมายดอลลาร์ มันเป็นเพียงแค่ชื่อของฟังก์ชัน ไม่มีอะไรพิเศษเกี่ยวกับมัน เรามีวงเล็บเปิด จากนั้นเรามีหนึ่งข้อโต้แย้งของเราซึ่ง ในกรณีนี้เกิดขึ้นจะเป็นสตริง ซึ่งเป็นตัวเลือกสำหรับมัน แล้วเรามีของเรา วงเล็บปิด นั่นแหล่ะ มันไม่ใช่ว่าแตกต่างกันอย่างมากมาย แม้ว่ามันจะดูแปลกมาก และที่สามารถจัดเรียงของเกาะ จุดที่คนจำนวนมาก MIKE Rizzo: ดังนั้นในทำนองเดียวกันถ้าเราต้องการ เพื่อเลือกองค์ประกอบที่ ID, ตอนนี้เราต้องการที่จะเลือกโดย ID แทนของชั้น มันจะเป็นสิ่งที่คล้ายกันที่เรา เพียงแค่ทำเครื่องหมายชาร์ปหมายเลข ดังนั้นเราเลือกที่นี่ทั้งหมด องค์ประกอบที่มีแถบ ID TOMAS ไรเมอร์: และนี้ขยาย CSS ที่ขยาย เช่นเดียวกับใน CSS คุณสามารถเลือกได้ทุก เชื่อมโยงที่มี foo ชั้น นี่ก็เป็นสิ่งเดียวกัน คุณสามารถทำ a.foo ซึ่งจะเลือก ทั้งหมดของการเชื่อมโยงกับ foo ชั้น คุณสามารถทำบาร์คมที่จะ เลือกการเชื่อมโยงที่มีแถบรหัสและอื่น ๆ และอื่น ๆ เลือก CSS ใด ๆ ที่เป็นที่ถูกต้อง เลือก jQuery MIKE Rizzo: ใช่ ตกลงดังนั้นตอนนี้ขอเข้าเล็กน้อย ของการจัดการที่เราสามารถทำอะไรกับ jQuery ของเรา ดังนั้น jQuery มีประเภทเฉพาะ ของสัญกรณ์ที่เราเพียงแค่ใช้ จุดที่สิ้นสุด และคุณสามารถคิดเช่นนี้ใน C วิธีการที่เรามี structs ที่แตกต่างกัน และจะไปสู่​​ structs ที่คุณจะ ใช้จุดที่จะได้รับในพวกเขา นี้เป็นชนิดของสิ่งที่คล้ายกัน เพียง แต่ตอนนี้เรามีฟังก์ชั่นนี้ภายใน ตัวเลือกที่เราสามารถเรียกมัน ดังนั้นที่นี่ตัวอย่างแรกมาก คุณสามารถเห็นคือเลือก CSS และโดยทั่วไปสิ่งที่ไม่ได้เป็น ใช้ CSS องค์ประกอบแรกนี้ สิ่งที่คุณเลือก - องค์ประกอบนี้ที่คุณเลือก - ด้วยค่าที่ TOMAS Reimers: ดังนั้นการแปลง่าย ว่าจะเป็นอย่างไรถ้า jQuery พื้น เพียงแค่เอา foo และจากนั้นใน CSS กล่าวว่า สีแดงและใกล้ชิด มันเป็นความคิดเดียวกัน สิ่งที่มันทำคือจะเลือก องค์ประกอบ foo ทั้งหมด และจากนั้นก็นำไปใช้ การเรียงลำดับของสีสถานที่ให้บริการ เท่ากับสีแดง MIKE Rizzo: ในทำนองเดียวกันเรายังสามารถปรับเปลี่ยน เนื้อหาที่แท้จริงของสิ่งที่เป็น แสดงใน HTML ของหน้าซึ่ง เป็นเย็นจริงๆเพราะมันหมายถึงคุณ หน้าเว็บในขณะนี้สามารถเป็นแบบไดนามิกอย่างสมบูรณ์ และไม่จำเป็นต้องเป็นแบบคงที่ ที่คุณพิมพ์ออกมาโดยใช้ PHP ที่จุดเริ่มต้นมาก หน้ากำลังโหลด ดังนั้นที่นี่ถ้าเราต้องการที่จะปรับเปลี่ยน HTML ที่เกิดขึ้นจริงของหน้าเราจะตอนนี้ เรียกใช้ฟังก์ชัน HTML ที่แล้วเพียง แทรกสิ่งที่เราระบุใน องค์ประกอบที่เราเลือกที่ ดังนั้นที่นี่เรากำลังเลือกองค์ประกอบด้วย foo ชั้นแล้วบอกว่ามันเป็น HTML ก็ตอนนี้โลกสวัสดี TOMAS ไรเมอร์: และเมื่อคุณคิดเกี่ยวกับ สิ่งที่เป็นโปรแกรมที่มีประโยชน์ของ นี้, CSS นี้หนึ่งสิ่งแรกที่ คุณสามารถเริ่มต้นที่จะคิดเกี่ยวกับการเป็น ในแง่ของการได้เลื่อนลงเมนู คุณสามารถเริ่มต้นที่จะทำสิ่งที่ต้องการเมื่อ ผู้ใช้ hovers เหนือส่วนบน ของหล่นลงที่คุณต้องการที่จะทำให้ ส่วนด้านล่างที่มองเห็นได้ ใช่มั้ย? ดังนั้นใน CSS เรามีคุณสมบัติ ที่จะทำให้สิ่งที่มองเห็นได้ สิ่งที่เหมือนใครลำไส้ใหญ่การแสดงผล จะทำให้มันมองไม่เห็น บล็อกแสดงจะทำให้มันสามารถมองเห็นได้ หรือแม้กระทั่งถ้าคุณต้องการที่จะไปง่ายคุณ มีสิ่งที่ต้องการเท่ากับการมองเห็น ที่มองเห็นและการมองเห็นที่ซ่อนเท่ากับ และคุณสามารถเริ่มต้นที่จะใช้สิ่งที่ เช่นเลื่อนลงเมนูที่เหมาะสม หลังจากที่คุณได้รับผ่านความคิดของวิธี คุณสามารถคิดออกเมื่อเปิด ซึ่งเราจะได้รับผ่านมากในเวลาสั้น ๆ แต่เราสามารถเริ่มต้นที่จะเห็น การใช้งานนี้ ในความหมายที่คล้ายกันถ้าคุณได้ลอง และดำเนินการขอพูดคุย เครื่องยนต์และคุณต้องการที่จะทำให้น้อย ฟองพูดขึ้นมาเมื่อใดก็ตามที่คุณได้ มีข้อความใหม่เมื่อคุณได้รับ ข้อความใหม่ที่คุณสามารถทำน้อย ฟองพูดขึ้นมาโดยการเปลี่ยน HTML ของหน้าเว็บใช่ไหม โดยการเพิ่มฟองคำพูดที่พิเศษ ด้วยข้อความที่พิเศษอยู่ในนั้น ใช่? ผู้ชม: ดังนั้นคุณจะฝังภายใน รหัส HTML ในประเภทเช่น [ไม่ได้ยิน]? MIKE Rizzo ขวา ใช่เราจะไปที่ ในนิด ๆ หน่อย ๆ ใช่มันเป็นความที่คล้ายกัน นิด ๆ หน่อย ๆ ที่จะ PHP ไม่ได้เหมือนกันว่า ความแตกต่างที่ดีเพื่อให้เป็นสิ่งที่นี้ เป็นจริงการแก้ไขเมื่อเราแก้ไข หน้าเพราะไม่ได้ไปได้ การแก้ไขแฟ้มที่เกิดขึ้นจริงที่จะถูก เก็บไว้บนเซิร์ฟเวอร์เพราะโลก ไม่ควรได้รับอนุญาต เพื่อแก้ไขไฟล์ของคุณ นี้เป็นเพียงการแก้ไขสิ่งที่อยู่บนหน้า และสิ่งที่มีการแสดงภายใน เบราว์เซอร์ ดังนั้นถ้าคุณจะโหลดหน้าหลัง กล่าวว่าการลบสิ่งที่เป็นเรา เห็นที่เราสามารถทำได้ด้วยการเรียกเอาที่ สิ่งที่เกิดขึ้นอีกครั้งจากนั้นก็จะ TOMAS Reimers: ดังนั้นวิธีหนึ่งที่จะคิดเกี่ยวกับ นี้คือถ้าฉันคอมพิวเตอร์ของคุณและ ไมค์เป็นเรียงลำดับของเซิร์ฟเวอร์ สิ่งที่จะเกิดขึ้นคือผมกำลังจะไป ถามไมค์, เฮ้, ฉันสามารถมีสำเนาของ หน้าเว็บนี้ และเขาจะให้สำเนาของมันฉัน ไม่มีก็ไม่ได้ในสิ่งที่เป็นต้นฉบับ มันเป็นเพียงแค่การคัดลอก แล้วมันจะเป็นเช่นโอ้ มีจาวาสคริปต์ที่นี่ เห็นได้ชัดว่าผมควรจะแก้ไข หน้าจะเป็นเช่นนี้ และฉันมีการแก้ไขสำเนาของคุณ แต่ที่ไม่ได้มีผลกระทบต่อ สำเนาที่เกิดขึ้นจริง และถ้าผมจะถามเขาอีกครั้ง รีเฟรชหน้า - เฮ้ฉันสามารถมีสำเนาสะอาดอีก - เขาจะให้ฉัน คัดลอกทำความสะอาดอีก แล้วฉันจะทำสิ่งเดียวกัน เช่นโอ้ JS นี้ที่นี่ที่บอกว่า การแก้ไขนี้ และฉันจะให้ทำที่ MIKE Rizzo: ดังนั้นสิ่งที่เย็นจริงๆ ที่คุณสามารถทำอะไรกับ jQuery เป็น จริงเพิ่มประเภทที่แตกต่างกัน ของภาพเคลื่อนไหวไปยังหน้าเว็บของคุณ ผมไม่ทราบว่าถ้าคุณเคยเห็นที่ คุณกำลังพยายามที่จะเติมแบบฟอร์ม ออนไลน์และคุณไม่ได้กรอก สิ่งที่ถูกต้อง ดังนั้นเป็นสิ่งที่น้อยสไลด์ลง ที่ด้านบนและบอกว่าคุณ ยังไม่ได้ทำนี้อย่างถูกต้อง โปรดลองอีกครั้ง แล้วมันอาจแม้เพียงแค่เลื่อนขึ้น จะเปิดออก jQuery ได้สร้างขึ้นในฟังก์ชั่น ที่ทำให้ทั้งหมดที่ ภาพเคลื่อนไหวจริงๆเรื่องง่าย จึงมีครั้งแรกที่จางหาย ฟังก์ชั่นออกมาซึ่ง คุณสามารถโทรหาในสิ่งที่ และเป็นวิธีที่จะเปลี่ยน CSS ของ องค์ประกอบในทางที่เคลื่อนไหวที่ ดังนั้นมันต้องใช้องค์ประกอบใด ที่คุณเรียกว่าหายไปใน แล้วค่อย ๆ เปลี่ยนความทึบมัน จนกว่าจะไปโปร่งใสอย่างสมบูรณ์ TOMAS ไรเมอร์: หนึ่งที่นิยมอื่น ๆ จะถูกเลื่อนลงซึ่งจะทำให้ สิ่งที่ปรากฏโดยการเลื่อนลง ดังนั้นในกรณีที่มีการเลื่อนลงเมนู อีกครั้งเมื่อเราได้เรียนรู้วิธีการตรวจสอบ เมื่อได้รับการบินว่อนอยู่เหนือ, คุณก็สามารถบอกได้ด้านล่างนี้ สไลด์ลงมาเป็นส่วนหนึ่งในขณะนี้ และจากนั้นก็จะปรากฏ โดยการเลื่อนลง MIKE Rizzo: แล้วถ้าคุณเพียงแค่มี บางชนิดของภาพเคลื่อนไหวในใจว่า jQuery ไม่จำเป็นต้องให้ ตัวอย่างเช่นสมมติว่า jQuery ไม่ให้คุณมีสไลด์ ลงและเลื่อนขึ้น ดีขอบอกว่าคุณต้องการที่จะเลื่อน บางสิ่งบางอย่างจากด้านซ้ายหรือจาก สิทธิชนิดของเช่น CS50 หน้าหลักไม่เมื่อใดก็ตามที่ คุณไปที่แผงใหม่ คุณก็อาจจะต้อง ใช้มันตัวเองโดยใช้ ฟังก์ชั่นการเคลื่อนไหวภายใน jQuery ดังนั้นในทำนองเดียวกันคุณก็มีชีวิต แล้วภายในก็จะใช้เวลา พจนานุกรมของค่าที่แตกต่างกัน ที่คุณควรจะผ่าน ดังนั้นที่นี่ถ้าเราต้องการที่จะมีชีวิต foo องค์ประกอบดังกล่าวว่าความกว้างของทั้ง ขยายหรือสัญญาถึง 80 พิกเซล ขึ้นอยู่กับสิ่งที่มันเป็นอยู่ในปัจจุบัน เพียงแค่เราจะผ่านที่เป็น การโต้แย้งภายใน ชีวิตยังมีบางข้อโต้แย้งอื่น ๆ ที่คุณสามารถผ่านมันตัวอย่างเช่น ความเร็วของการเคลื่อนไหว ที่คุณต้องการที่จะให้มัน และการทำเช่นนั้นผมก็จะบอกว่า Google ได้อย่างรวดเร็ว jQuery เคลื่อนไหว แล้วนำขึ้นหน้านี้คุณสามารถ เห็นมันมีพวงของการที่แตกต่างกัน แห่งที่คุณสามารถผ่านมัน และผมขอแนะนำให้คุณ - เมื่อใดก็ตามที่คุณมา ในสิ่งที่คุณทำไม่ได้ รู้หรือเพียงแค่ต้องการที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ โดยเฉพาะอย่างยิ่งวิธีการที่คุณสามารถเรียก ในสิ่งที่ - Google เพียงแค่มัน jQuery เป็นอย่างมาก เอกสารที่ดี และบ่อยครั้งมีจำนวนมาก ตัวอย่างที่พวกเขาให้สำหรับคุณ ถ้าเราเลื่อนลง - ทางลง - ว่าเราสามารถใช้งานได้เป็นอย่างดี อีกครั้งเมื่อนักพัฒนาจริงไป ผ่านปัญหาของการเขียน ห้องสมุดพวกเขามักจะต้องการ คนที่จะใช้มัน ดังนั้นข้างเป็นไป เป็นเอกสาร และเอกสารที่จะสามารถ พบได้ในหน้าโครงการซึ่งเป็น เหตุผลที่เราให้คุณเว็บไซต์เดิมที่อยู่ใน จุดเริ่มต้นที่เชื่อมโยงคุณไปยัง หน้าโครงการเพื่อให้คุณสามารถ โปรดดูเอกสารที่ โดยปกติแล้วหน้าโครงการในกรณีที่ ของ [ไม่ได้ยิน] มันบอกคุณ ชื่อของชั้นเรียน ในกรณีที่มีจาวาสคริปต์ที่จะช่วยให้ ชื่อของฟังก์ชั่น โดยวิธีการที่ถ้าเราเลื่อนขึ้นไปด้านบน สังเกตด้านอย่างรวดเร็วในการทำงานคือ เมื่อใดก็ตามที่คุณเห็นฟังก์ชั่นการใช้งาน เช่นนี้กับฮาร์ด วงเล็บอยู่ตรงกลางที่หมายถึง ที่สถานที่ให้บริการที่เป็นตัวเลือก เพียงแค่หัวขึ้น ผมเคยเห็นคำถามจำนวนมาก เกี่ยวกับที่ ดังนั้นที่นี่เราจะเห็นว่า เคลื่อนไหวโดยใช้คุณสมบัติ เป็นอาร์กิวเมนต์ที่จำเป็น และทุกอย่างอื่นเป็นตัวเลือก ด้านหมายเหตุ - คุณสามารถคิดนี้การจัดเรียง ของเหมือนหน้าคน หน้าคนเป็นเอกสารสำหรับซีและ สำหรับจำนวนมากของสิ่งอื่น ๆ ได้เป็นอย่างดี MIKE Rizzo: ดังนั้นเราจึงได้เรียนรู้วิธีการ เปลี่ยน CSS ที่แตกต่างกันในหน้า มันเคลื่อนไหวและลบเพิ่ม HTML แต่หนึ่งในมีประสิทธิภาพมากที่สุดจริงๆ สิ่งที่เกี่ยวกับ JavaScript และโดยเฉพาะอย่างยิ่ง jQuery - สิ่งที่จะช่วยให้คุณทำคือการตอบสนองต่อการ องค์ประกอบที่แตกต่างที่เกิดขึ้น ตัวอย่างเช่นที่นี่เรามี ตัวจัดการเหตุการณ์ และนั่นก็หมายความว่าเมื่อใดก็ตามที่นี้ เหตุการณ์ที่เกิดขึ้นเราจัดการกับมันใน วิธีใดวิธีหนึ่ง ดังนั้นที่นี่ jQuery เหตุการณ์ทั่วไป จัดการเป็นจุดบน แล้วสิ่งแรกที่คุณให้ คือสิ่งที่เหตุการณ์ที่ควร ได้รับฟัง ดังนั้นที่นี่ก็คลิกที่ เรากำลังรอคอย TOMAS ไรเมอร์: หรือคุณมี เกี่ยวกับการเลื่อนซึ่งเป็นที่นิยมมากอย่างใดอย่างหนึ่ง ดังนั้นหลังการลดลงของฉันลงความคิดเมนู คุณจะต้องอย่างใดอย่างหนึ่งบนเลื่อน และแล้วคุณสามารถเปลี่ยนที่ MIKE Rizzo ขวา และจากนั้นเมื่อที่เกิดขึ้นมันเป็นเพียงแค่ ดำเนินการฟังก์ชั่นนี้ที่เราให้มัน เป็นอาร์กิวเมนต์และที่ มันแจ้งเตือนหรือ hi สวัสดี TOMAS Reimers: ดังนั้นในกรณีของ JavaScript นี้เป็นสถานที่ที่เราจำเป็นต้อง เอาตัวเองจาก C. เราสามารถจริง ใช้ฟังก์ชั่นเป็นอาร์กิวเมนต์ และมีจำนวนมากจริงๆ วิธีการที่ซับซ้อนในการทำเช่นนี้ เราจะส่งเสริมวิธีหนึ่ง ซึ่งเป็นคุณสามารถกำหนด มีฟังก์ชั่นที่เหมาะสม ดังนั้นเมื่อคุณกำลังขอให้สำหรับการทำงานในฐานะที่เป็น พารามิเตอร์คุณพื้นเพียง จะกำหนดฟังก์ชั่น คาที่ และวิธีที่คุณกำหนดฟังก์ชั่น ใน JavaScript เป็นคุณ ตัวอักษรบอกว่าฟังก์ชั่น จากนั้นมักจะชื่อ ฟังก์ชั่น แต่เราไม่เคยไปอ้างอิง ฟังก์ชั่นนี้อีกครั้ง ดังนั้นเราจึงปล่อยให้มันนิรนาม แล้ววงเล็บแล้วหยิก จัดฟันแล้วรหัสภายในที่ ดังนั้นเราจึงสามารถเข้าใจนี้ ทำให้เกิดความสับสนเล็กน้อย ดังนั้นเราจะให้คุณในรูปแบบทั่วไปของ สิ่งที่ตัวจัดการเหตุการณ์ที่ดูเหมือนว่า ด้านล่างซึ่งเป็นเหตุการณ์ที่เกิดขึ้น แล้วรหัสของคุณภายในที่ MIKE Rizzo: จะมีผู้ใด คำถามเกี่ยวกับเรื่องนี้ นี้สามารถทำให้เกิดความสับสนเล็กน้อย ครั้งแรกที่คุณเห็นมัน TOMAS ไรเมอร์: คุณจริงต้องการ เปิดไฟล์และแสดงให้พวกเขาบาง jQuery ในขณะนี้ MIKE Rizzo: ใช่ลองทำ ตกลง TOMAS Reimers: ดังนั้นตอนนี้เรา ในเครื่องใช้ไฟฟ้า และสิ่งที่เราได้ทำคือเราได้รับ เสรีภาพในการสร้างทั้ง index.html แฟ้มที่เชื่อมโยงไปยัง ไฟล์ JavaScript และเราสามารถเปิด - ใช่ ดีก็ไม่สองสิ่ง แรกคือมันเชื่อมโยงไป ไฟล์จาวาสคริปต์ และเราจะเห็นว่าที่นี่ เราจะเห็นว่าในหัวของ เอกสาร HTML โดยเฉพาะอย่างยิ่ง ดังนั้นคุณจะเห็นว่ามี เราโดยทั่วไปพูด SRC, ซึ่งย่อมาจากแหล่งที่มา และที่ URL ดังนั้นที่นี่คุณสามารถพูดได้ว่าเราได้ รวม jQuery และเรายังได้รวมสคริปต์ วิธีอื่น ๆ ที่จะรวม JavaScript เป็น ที่คุณสามารถรวมสคริปต์แบบอินไลน์ แท็กที่เรามีที่อยู่ด้านล่างที่มัน กล่าวว่าประเภทสคริปต์คือข้อความ JavaScript ดังนั้นเรากำลังจะบอกว่าฟังเรา เกี่ยวกับการที่จะรวมสคริปต์ และประเภทของสคริปต์ที่เป็น JavaScript ซึ่งเป็นประเภทของข้อความ ง่ายมาก MIKE Rizzo: ดังนั้นนี้ชนิดที่ได้รับการ คำถามของคุณเกี่ยวกับวิธีการที่เรารวมถึง จาวาสคริปต์ในไฟล์ของเราเพราะเมื่อเรา PHP ได้เราทำอะไรเช่นนี้ และจากนั้นก็มีฟังก์ชั่น PHP ของเรา - สมมุติว่าหุ้นที่ทำ บางสิ่งบางอย่างกับที่ - จะไปอยู่ที่นั่น แต่ตอนนี้เรามีแท็กสคริปต์ ที่เราให้มันที่เป็นจริง ส่วนหนึ่งของ HTM​​L ตัวเองเพราะมันไม่ได้ แกล้งเป็นไฟล์ HTML เหมือนมัน เป็นใน PHP เพราะถ้าคุณจริงไปใน และมองไปที่แหล่งที่มาของเพจ คุณจะเห็นแท็กของสคริปต์เหล่านี้มี ด้วยจาวาสคริปต์ที่เกี่ยวข้องกับ พวกเขาอยู่ในที่ ดังนั้นแล้วถ้าเราต้องการที่จะ เขียนบาง JavaScript - ขอเพียงแค่บอกว่าเราต้องการที่จะเปลี่ยนแปลงร่างกาย เพราะตอนนี้ผมไม่ได้มี แท็กอื่น ๆ ใด ๆ ที่ฉันสามารถจริงๆ แก้ไขนอกเหนือจากร่างกาย ให้เพียงกล่าวว่าฉันต้องการที่จะ เปลี่ยน CSS ที่ ดังนั้นเราจะไปข้างหน้าและการเปลี่ยนแปลง สีของมันเป็นสีแดง ดังนั้นผมจึงบันทึกแฟ้ม ลองกลับไปที่หน้าเว็บของเราไปฟื้นฟู และมันไม่ได้โดยอัตโนมัติ เพราะมันไม่ได้ดูเหมือนรอ เลยเพราะเราไม่ได้ฟัง สำหรับเหตุการณ์หรืออะไรอย่างนั้น TOMAS Reimers: ดังนั้นถ้าเรากลับไปที่ ยื่นโดยเฉพาะ - HTML ไฟล์ - สิ่งที่คุณกำลังจะ ที่เห็นคือเรามี - จำไว้ว่านี้จะถูกโหลด การเรียงลำดับของลำดับ ดังนั้นเราจึงมีหัวเป็นครั้งแรก โหลดทั้งสองไฟล์ จากนั้นเราก็ไปที่ร่างกาย และเราจะเห็นโลกสวัสดี ดังนั้นเราจึงทำให้โลก hello และแล้วสิ่งสุดท้ายที่เรามี คือเรามีแท็กสคริปต์ ดังนั้นมันจะทำงานแท็กสคริปต์เพราะมันเป็น ไม่ได้บอกว่าจะรออะไร และที่เป็นพื้นฐานที่สุด วิธีการเรียกใช้ JavaScript กับที่กล่าวว่าคุณสามารถวางสคริปต์ แท็กขึ้นมาในหัวเพียง เพื่อแสดงให้เห็นจุดนี้ และเรียกว่า เราจะแจ้งให้ทราบว่า ไม่ได้เปลี่ยนสี และนี่คือหนึ่งในปัญหาของ JavaScript เป็นว่าสิ่งที่มีการโหลด ในลำดับที่ เพื่อที่เวลาที่รหัสที่ กำลังวิ่งเราเลือก - กลับไป - แท็กร่างกาย แท็กร่างกายไม่อยู่ยังเพราะ JavaScript เป็นในทิศทางเดียวกับ HTML ดังนั้นเบราว์เซอร์เป็นเหมือนเลือกร่างกาย ไม่มีสิ่งนั้นยังเป็น ดังนั้นเราจึงสามารถละเว้นที่ และเราให้ไป และจากนั้นเรากำหนดแท็กร่างกาย แต่ที่ไม่เคยได้รับการปรับปรุง ดังนั้นเมื่อคุณกำลังใช้สคริปต์ แท็กให้แน่ใจว่าคุณวาง หลังแท็กร่างกาย ภาพนิ่งถัดไป MIKE Rizzo: OK ดังนั้นเราจึงมีการเปลี่ยนแปลงบางสิ่งบางอย่าง แต่มันไม่ได้มีลักษณะเช่นนั้นตอบสนองต่อการ เราเลยเพราะมันเป็นเพียงแค่ชนิดของ ทำมันได้ทันทีที่โหลดหน้า ดังนั้นตอนนี้แทนการทำเช่นนี้ทำไม ไม่ได้เราเพิ่มตัวจัดการเหตุการณ์ ดังนั้นเรามาทำอะไรบางอย่าง ต่อร่างกายอีกครั้ง และขอบอกว่าเราทำใน - คลิก เราจะเพิ่มฟังก์ชั่น การเปลี่ยนแปลง Let 's: TOMAS ไรเมอร์ เป็นสีแดงอีกครั้ง ทำไมไม่? MIKE Rizzo: ใช่ขอเปลี่ยนแปลง 'สีแดงอีกครั้งของ ขวาทั้งหมด จึงขอโหลดหน้าเว็บ ตกลงที่เราเห็น - ตามที่คาดไว้ก็ไม่ได้เปลี่ยนเป็นสีแดงยัง แต่เราก็สามารถไปข้างหน้าและคลิก TOMAS ไรเมอร์: และมันจะเปลี่ยนเป็นสีแดง MIKE Rizzo: และมันไม่ เปลี่ยนเป็นสีแดงตามที่คาดไว้ TOMAS ไรเมอร์: และเราจะได้เห็นว่า เราสามารถเริ่มต้นในการสร้างขั้นพื้นฐานมาก ปฏิสัมพันธ์ สิ่งอื่น ๆ ที่เราอาจต้องการที่จะทำคือ ถ้าเราไม่ต้องการที่จะทำให้ร่างกาย สีแดงขอให้ HTML พื้นหลังสีแดง เพียงเพื่อให้มันเป็น CSS เดียวกัน และเมื่อเราเปลี่ยนมันเราสามารถมองเห็นนี้ ผลอย่างมากของการเปลี่ยนแปลง หน้าทั้งหมด ดังนั้นอีกครั้งถ้าคุณกำลังใช้สิ่งที่ คุณสามารถมีส่วนหนึ่ง ซึ่งจะหมายถึงการได้รับการคลิก สมมติว่าปุ่ม Exit และ ส่วนประกอบอื่น ๆ ทั้งหมด ซึ่งหมายถึงการตอบสนอง ดังนั้นคุณจะลบหน้าต่าง ที่เกิดขึ้นเมื่อ MIKE Rizzo: OK เพียงเป็นตัวอย่าง - คุณไม่ได้รับที่จะเห็นก่อนหน้านี้ - ฉันจะแสดงให้คุณเห็นสิ่งที่ดูเหมือน เช่นเมื่อเราซ่อนอะไรบางอย่าง ดังนั้นฉันจะไปข้างหน้าและจะเลื่อนขึ้น TOMAS Reimers: ต้องการห่อว่าใน ประเภทวรรคก่อนที่เราจะทำนั้น MIKE Rizzo: OK ใช่ทำไมเราไม่ทำอย่างนั้นเพียงเพื่อให้ เราสามารถเลือกที่จะเพิ่มอีกนิด TOMAS ไรเมอร์: และให้ ให้ชั้น MIKE Rizzo: ใช่ ตกลงดังนั้นเรามาดู แทนการเลือกของร่างกายที่เกิดขึ้นจริง ตอนนี้ผมก็จะเลือกทุกอย่างด้วย ชั้นสวัสดีซึ่งที่นี่เรา เพียงแค่มีสิ่งหนึ่งที่ ดังนั้นเราจึงไม่ควรจะต้อง กังวลกับการที่ ดังนั้นฉันจะฟื้นฟูมัน ฉันจะไปข้างหน้าและคลิก และจะเรียงลำดับของทำสไลด์แปลก ขึ้นสิ่งซึ่งไม่ได้มองว่า มีเสน่ห์ โดยทั่วไปพวกเขาจะดูดีสวย ผมคิดว่านี้ - สำหรับบางคน เหตุผล - ไม่ได้ ฉันจะทำจางออกเพื่อให้ คุณสามารถดูที่มากเกินไป มากดีกว่า แล้วถ้าฉันเปิด JavaScript ปลอบใจอีกครั้งและเราต้องการที่จะเห็นสิ่งที่ ดูเหมือนว่าเมื่อเราจางหายไปได้เลยค่ะ ตอนนี้ผมเพียงโทรจางหายไปในที่ และมันก็จางหายไปกลับมา ในทำนองเดียวกันเราได้จริงนอกจากนี้ยังผ่าน อาร์กิวเมนต์จะจางหายไปหรือจางหายออก ซึ่งเป็นชนิดของความเร็วของมัน จึงขอไปข้างหน้าและบอกว่าเราต้องการ มันจะไปช้าจางหายไปค่ะ ดังนั้นผมคิดว่ามันยังคงลำบาก อย่างรวดเร็วสวย แต่มันก็ช้ากว่าก่อน TOMAS ไรเมอร์และถ้าคุณต้องการที่จะหา ข้อมูลเพิ่มเติมเกี่ยวกับสิ่งเหล่านี้อีกครั้ง เพียงแค่ไปที่เอกสาร jQuery, ซึ่งเราได้ให้คุณและอ่าน ผ่านเหล่านี้ พวกเขาเอกสารการทำงานของพวกเขา ได้ดีอย่างเหลือเชื่อ MIKE Rizzo: OK ดังนั้นผมคิดว่าเราจะกลับไปนี้ และเราสามารถพูดคุยเกี่ยวกับหน้าสุดท้ายของเรา ดีเราสามารถจบด้วยเงินทุน และแล้วเราก็จะเปิดขึ้น กับคำถามบางอย่าง และถ้าพวกคุณมีความคิดใด ๆ ที่ คุณต้องการที่จะพยายามที่จะโยนขึ้นและดู ถ้าเราสามารถใช้พวกเขาด้วย จาวาสคริปต์ได้อย่างรวดเร็ว อย่างรวดเร็วมากเกี่ยวกับเงินทุนซึ่ง ถูกรวมโดยอัตโนมัติใน ปัญหาที่ผ่านมาของคุณตั้งอยู่ในโฟลเดอร์ CSS และการเชื่อมโยงจริงของคุณ header.php ดังนั้นคุณจะได้เพิ่มชั้นเรียนที่ จะมีการกำหนดภายใน Bootstrap ไป และก็จะมีสไตล์โดยอัตโนมัติ สิ่งเหล่านั้นตาม TOMAS Reimers: ดังนั้นเงินทุนเป็นอย่างมาก สิ่งมหัศจรรย์ที่พัฒนาโดยคน ที่ทวิตเตอร์ และสิ่งที่มันหมายถึงการทำคือ - ก่อนที่เว็บไซต์จริงๆยากที่จะทำให้ ดูดีโดยเฉพาะอย่างยิ่งเมื่อเรามี จำนวนมากของชิ้นส่วนที่พบบ่อย ดังนั้นจำนวนมากของปุ่มบน เว็บมองเดียวกัน จำนวนมากของเขตข้อมูลข้อความที่สามารถทำ ดูดีกว่าข้อความมาตรฐาน เขตข้อมูลที่คุณอาจจะรู้ว่าจริงๆจาก เว็บไซต์เก่าหรือทำไม่ดีจริงๆ เว็บไซต์ที่เพิ่งมีลักษณะเหมือนตัวอักษร กล่องข้อความได้โดยไม่ต้องรูปแบบของข้อความใด ๆ เงาหรือชนิดของโครงร่างที่ดีใด ๆ ดังนั้นสิ่งที่เงินทุนไม่ได้ก็กล่าวว่าดี เรามีรูปแบบที่พบบ่อยมาก ทำไมเราไม่ทำให้การตั้งค่าทั่วไปหนึ่งใน CSS และตั้งค่าทั่วไปของ JavaScript เป็น กันซึ่งสามารถรูปแบบมันเป็นและที่ สามารถให้คนสิ่งที่ต้องการลดลง ลงเมนูที่สามารถให้คน สิ่งที่ต้องการ Modals คำกริยาคือสิ่งที่ปรากฏในหน้า เมื่อใดก็ตามที่มันพูดอย่างเคร่งครัด บางสิ่งบางอย่างที่ยับยั้งการต่อไป จนกว่าคุณจะมีปฏิสัมพันธ์ โต้ตอบกับมัน บางอย่างเช่นนี้คือคุณแน่ใจ คุณต้องการที่จะลบสิ่งนี้ คุณไม่สามารถจริงๆทำอะไรอย่างอื่น จนกว่าคุณจะบอกว่าใช่หรือไม่ มันต้องใช้เวลาทั้งหมดนี้และจะบรรจุมัน ร่วมกันและกล่าวว่าที่นี่เราไป คนตอนนี้สามารถใช้ และคุณสามารถค้นหาได้กว่า ที่ getbootstrap.com มันถูกรวมโดยอัตโนมัติภายใน ปัญหาที่ผ่านมาของคุณตั้ง และคุณมากกว่ายินดีต้อนรับเข้าสู่ ใช้มันในโครงการสุดท้ายของคุณ และถ้าคุณต้องการที่จะทำตามที่ การเชื่อมโยงที่จะได้รับเงินทุน คุณจะได้เห็นที่นี่เป็น เว็บไซต์ CSS บูต คุณจะเห็นเงินทุน และถ้าคุณเลื่อนลงมาคุณจะเห็น วิธีการดาวน์โหลดได้วิธีการ ติดตั้งและอื่น ๆ MIKE Rizzo: และคุณยังสามารถ น่าสนใจพอที่จะปรับแต่ง เป็นสิ่งที่ชนิดของรูปแบบ ที่คุณต้องการ ฉันรู้ว่าเป็นสิ่งที่ฉันได้สำหรับฉัน โครงการสุดท้ายเมื่อฉันเอาชั้น ได้รับการปรับแต่ง รุ่นที่แตกต่างกันของเงินทุนที่ มีโทนสีที่แตกต่างกันและ รูปทรงที่แตกต่างกันบางส่วน สิ่งที่แตกต่าง ดังนั้นผมจึงขอแนะนำให้คุณที่จะเล่นกับที่ เป็นชนิดสนุกที่จะทำ TOMAS ไรเมอร์: มองข้ามด้านบน อีกครั้งก็คล้ายกับตัวอักษร เว็บไซต์ที่น่ากลัว เอกสารจำนวนมากจะเริ่มต้น ดูเหมือนที่คล้ายกันเมื่อคุณได้ เห็นเพียงพอของมัน ดังนั้นที่นี่เรามี CSS ส่วนประกอบของนี้ และคุณจะเห็นว่ามัน สามารถรูปแบบสิ่ง ดังนั้นหากคุณคลิกที่ตารางตัวอย่างเช่น คุณได้ทันทีสามารถทำให้ ตารางสวยโดยเพิ่ม ตารางเรียนไป สิ่งที่เหมือนกันสำหรับปุ่ม หากคุณเพียงแค่เพิ่มการเรียนและ BTN BTN เริ่มต้นหรือ BTN หลักที่คุณสามารถ ได้รับหนึ่งของปุ่มเหล่านี้ ที่มีรูปแบบที่ทำไว้ล่วงหน้าเหล่านี้ แล้วถ้าคุณกำลังมองหา บางสิ่งบางอย่างที่ซับซ้อนมากขึ้นกว่าเพียงแค่ restyling สิ่งที่มีอยู่แล้วกว้างกว่าที่ แท็บ JavaScript ข้ามเราด้านบน มีพวงของส่วนประกอบ ดังนั้นที่นี่เรามีการเปลี่ยน Modals, dropdowns แท็บและคำแนะนำ คำแนะนำเป็นสิ่งที่ปรากฏขึ้นภายใต้ของคุณ เมาส์เมื่อคุณเลื่อนในสิ่งที่ popovers แจ้งเตือนปุ่มยุบ accordions คือสิ่งที่ พวกเขามักจะเรียกว่ากำลัง คิวซึ่งพลิก ผ่านภาพเหมือน ดังนั้นผู้ที่เป็นส่วนประกอบ ของเงินทุน ฉันจะขอแนะนำให้คุณ สูงไปดูพวกเขา มีส่วนประกอบที่เป็น JavaScript และองค์ประกอบ CSS รู้สึกอิสระที่จะใช้พวกเขาเป็นคุณจะ เราไม่ได้จะไปมากเกินไปในพวกเขา เพราะเรารู้สึกเอกสาร จะทำดีจริงๆ และใช่ คุณมีคำถามใด ๆ เกี่ยวกับที่ MIKE Rizzo: เพื่อที่อย่างรวดเร็วจริงๆ ด้านการออกแบบของหน้าเว็บนี้ว่า เราได้อย่างรวดเร็ววางร่วมกันเพื่อ งานนำเสนอนี้เป็น ทำจริงโดยใช้เงินทุน ที่คุณสามารถดูเมื่อเราคลิกที่เหล่านี้ แท็บที่แตกต่างกันเราก็ไม่จริง ออกจากหน้าเว็บ index.html ปัจจุบันนี้ ดังนั้นสิ่งที่เรามีคือ divs ที่แตกต่างกัน ภายใน index.html นี้ และจากนั้นเมื่อใดก็ตามที่เราคลิกที่แตกต่างกัน แท็บก็เพียงแค่เปลี่ยน ซึ่งแสดงให้เห็นอย่างใดอย่างหนึ่ง ดังนั้นมันตามตำแหน่งพวกเขา การเปลี่ยนแปลง HTM​​L ของหน้าเพื่อให้ แท็บปัจจุบันถูกทำเครื่องหมายเป็นที่ใช้งานเพื่อให้ แต่ดูเหมือนว่ามันแตกต่างกันและรูปลักษณ์ ที่ดีจริงๆ TOMAS Reimers: ดังนั้นที่ทำทั้งหมด โดยไม่ต้องเราเขียนเกือบ CSS ใด ๆ นอกจากนี้เรายังเห็นส่วนหัวด้านบนที่ ซึ่งสีที่เรา แต่ที่เกิดขึ้นจริงวางไว้บน ด้านบนของหน้าและทำให้ มันเลื่อนเป็นเงินทุน แล้วแม้สำหรับห้องสมุดอื่น - นี้ ไม่ได้เป็นหนึ่งที่เราพูดคุยเกี่ยวกับ แต่อย่างใดอย่างหนึ่ง คุณสามารถ Google ถ้าคุณต้องการ นี้เรียกว่า prettify.js และจะเน้นไวยากรณ์รหัสของคุณ สำหรับคุณใช้ทั้ง CSS และ JavaScript สิ่งสุดท้ายที่เราต้องการที่จะพูดคุยเกี่ยวกับ ก่อนที่เราจะปล่อยให้คุณออกไป โลกจะมองไปที่ห้องสมุดที่จะคิดออก วิธีการที่จะใช้พวกเขาและหวังว่า อ่านเอกสารและค้นหาสิ่งที่คุณ จำเป็นที่จะต้องเป็นวิธีการที่จะหาห้องสมุด ดังนั้นครั้งแรกก็คือเรากำลังเพียง จะผลักดัน Google ไปที่ Google ว่าแท้จริงสิ่งที่เราทำเมื่อเรา ต้องทำสิ่งที่เรา Google มีห้องสมุด JavaScript ที่ ช่วยให้ผมที่จะจัดการกับเวลาในการ วิธีที่มีประโยชน์? ดังนั้นถ้าผมรู้ว่าผู้ใช้บางคนสร้าง บัญชีที่นี่และนี่คือ เวลาปัจจุบันวิธีการที่ฉันสามารถคำนวณ ความแตกต่างกับที่โดยไม่ต้อง คำนวณเองได้หรือไม่ ดังนั้นนี้เป็นจริงเป็นสิ่งที่ร่วมกัน เวลาห้องสมุด JavaScript และที่นี่เรา Moment.js - อย่างใดอย่างหนึ่งที่นิยมมากที่สุด ถ้าเราต้องการห้องสมุดที่จะจัดการกับ สิ่งที่ชอบสีเพื่อให้สามารถ สร้างพวงของสีที่สุ่ม - อาจเป็นไปได้ในการสร้าง รูปแบบหรืออะไร - เราจะได้สิ่งที่ต้องการ Google ห้องสมุด JavaScript สี และผมมั่นใจว่าเราจะปรากฏขึ้นด้วย พันและหนึ่งในนั้น คุณยินดีที่จะอ่านผ่านพวกเขา ดังนั้นสิ่งที่มากที่สุด - เมื่อคุณพบพวกเขา - จะเป็นเจ้าภาพในหนึ่งใน เว็บไซต์ที่รหัสพื้นที่ พวกเขากำลังเป็นที่นิยมไม่กี่ ที่นิยมมากที่สุดโดย ห่างไกลเป็น github.com และถ้าคุณไปที่ GitHub เป็นจริง ทำให้ปกติท​​ี่เป็นเจ้าภาพ ดังนั้นถ้าคุณต้องการที่จะกลับไปที่ แสดงให้พวกเขาว่า MIKE Rizzo: และที่จริงที่ นี้เป็นเจ้าภาพเกินไปถ้าคุณสังเกตเห็น TOMAS ไรเมอร์: ใช่ ดังนั้นถ้าคุณไปกว่าที่จะทำให้ปกติ และไปที่ GitHub ก็คือ? MIKE Rizzo: สิ่งที่แมวน้อยที่ เป็นสัญลักษณ์ GitHub TOMAS ไรเมอร์: โอ้ ดังนั้น GitHub ใช้วิธีการที่เรียกว่า Git รหัสร้านค้า คือคุณไม่ทราบว่ามันคืออะไรหรือ มันกลัวคุณที่ดี คุณไม่จำเป็นต้องรู้ว่าสิ่งที่ Git เป็น เพราะ GitHub มีปุ่มดาวน์โหลด ที่ด้านล่างขวา สิ่งที่มีประโยชน์อื่น ๆ ที่จะรู้ว่า เกี่ยวกับ GitHub เป็นผลิตภัณฑ์ส่วนใหญ่ จะมีผมอ่าน และถ้าพวกเขาไม่ได้มีเว็บไซต์ อ่านฉันจะพูดคุยเกี่ยวกับวิธีการที่คุณ ติดตั้งวิธีการที่คุณใช้มันในสิ่งที่มัน ไม่และอื่น ๆ และอื่น ๆ และอื่น ๆ สิ่งที่เราได้รับการพื้น เดินคุณผ่าน MIKE Rizzo: เลิกอินเทอร์เน็ต TOMAS ไรเมอร์: ที่ดี สองสิ่งที่เราต้องการ พูดคุยเกี่ยวกับ - เราได้พูดคุยเกี่ยวกับ Git - คือการแก้ไขปัญหา และหนึ่งในนี้ไม่เป็นที่เกี่ยวข้องกับ ผลิตภัณฑ์สุดท้ายที่เป็น เมื่อคุณออกจาก 50 และเมื่อคุณทำงานเป็นผลิตภัณฑ์ การดำเนินการหรือการใช้ห้องสมุด โครงการของคุณเองคุณจะ ที่จะมีคำถามหรือคุณ จะมองหาคำถาม อีกครั้ง Google มัน ว่าแท้จริงสิ่งที่เราทำ นี้จะเสียงโง่ แต่แท้จริงเรา Google มัน และอีกครั้งหนึ่งในสิ่งแรกที่ คุณมักจะใช้เป็นเป็น stackoverflow.com ซึ่งเป็นที่ยอดเยี่ยม คำถามและคำตอบสายตา มันเป็นที่ยอดเยี่ยมทั้งสองเพราะคุณสามารถ โพสต์คำถามและมองหา คำตอบ แต่ยังเพราะ มันมีอยู่แล้วจำนวนมาก เนื้อหาก่อนที่มีประชากรมี ดังนั้นโดยปกติเมื่อคุณ Google การเขียนโปรแกรม คำถามแรกภายใน คู่ฮิตที่คุณอาจจะมีการทำงานอยู่แล้ว ลงไปในระหว่างชุดปัญหาของคุณ และแล้วสิ่งที่สั้น ๆ จริงๆที่ผ่านมา เป็น JSFIDDLE ซึ่งเป็น - วันนี้เราได้ รับการทำมากในการทำงานด้วย JavaScript HTML, CSS JSFIDDLE เป็น app เว็บซึ่งโดยทั่วไป ช่วยให้คุณสามารถใช้ HTML ของคุณของคุณ JavaScript ด้านล่างซ้ายและ CSS ด้านบนขวาของคุณ แล้วก็สามารถสร้างได้อย่างรวดเร็วทำให้ ของมันและดูว่ามันมีปฏิสัมพันธ์ มันเป็นประโยชน์อย่างมากเมื่อมีคนพยายาม การทำหลักฐานการแนวคิดเช่น นี้เป็นวิธีการที่คุณจะ ทำเมนูแบบเลื่อนลง อาจจะเปิดเผยได้อย่างรวดเร็วหรืออะไรก็ตาม MIKE Rizzo: ดังนั้นขอไป ข้างหน้าและคลิกที่นี้ ทราบอย่างรวดเร็ว - ในขณะที่ก่อนที่เราจะได้ ทำในคลิก จะเปิดออก JCorey เกาหลีนอกจากนี้ยังมีการสร้างขึ้น ในการคลิกตัวจัดการเหตุการณ์ที่ ใช้เพียงเพราะตัวเลขที่คุณอยู่ จะต้องการที่จะทำสิ่งต่างๆมากมาย เมื่อคุณต้องการบางสิ่งบางอย่างที่จะคลิก ในทำนองเดียวกันก็ยังมีการเลื่อน แต่เพื่อให้ได้ขอบเขตของ เหล่านั้นให้ดูที่ jQuery เอกสารและทำมัน ผมทำอะไรโง่ที่นี่ TOMAS Reimers: ดังนั้นผมจึงมีได้อย่างรวดเร็วจริงๆ โปรแกรมที่เหมาะสมที่นี่ซึ่งกล่าวว่า คลิกปุ่มบน แล้วเรามีการวน สำหรับ i น้อยกว่า 404 มันก็จะปรากฏขึ้น ข้อความแจ้งเตือนเหล่านี้ MIKE Rizzo: และสิ่งที่เป็น รหัส 404 ยืนใน HTML ได้ไหม? ไม่มีใครจำได้ไหม? ไม่พบขวา โครเมี่ยมยังเพิ่มเรียบร้อยนี้ สิ่งที่คุณสามารถ - TOMAS ไรเมอร์: เพราะคนชอบ ไมค์เริ่มต้นการทำเช่นนี้มากและ ผู้ใช้ที่น่ารำคาญซึ่งจะช่วยให้ คุณจะเห็นข้อมูล MIKE Rizzo: ใช่ TOMAS ไรเมอร์: เรามีคำถามใด ๆ เกี่ยวกับเรื่องนี้เกี่ยวกับ JavaScript ห้องสมุดหาห้องสมุดหรือ สิ่งที่มีลักษณะการพัฒนาเว็บ เช่นเดียวกับในโลกจริงหรือไม่ เรากำลังทำงานขึ้นกับเวลา ดังนั้นผมไม่แน่ใจว่าเราจะ จะได้มีเวลาในการดำเนินการ เว้นแต่จะรวดเร็วจริงๆ เราจะดีหรือไม่? MIKE Rizzo: สิ่งที่พวกคุณต้องการ ที่จะเห็นจริงอย่างรวดเร็วในเช่นสอง นาทีหรือน้อยลงหรือไม่ TOMAS ไรเมอร์: อะไร เราสามารถชี้แจง? วิธีการเขียนใน - ผู้ชม: [ไม่ได้ยิน]? MIKE Rizzo: ใช่ 's ดังนั้น - TOMAS ไรเมอร์: คุณก็สามารถตี ควบคุม-U บนเว็บไซต์ MIKE Rizzo: โอ้ผมไม่ทราบว่า TOMAS ไรเมอร์: ผมคิดว่าใช่ ควบคุม-U ใช่ MIKE Rizzo: โอ้เพื่อที่ว่า สำหรับเว็บไซต์ แต่ถ้าคุณจริงต้องการดาวน์โหลดของเรา ไฟล์และทุกอย่างก็เป็นเจ้าภาพ บน github.com TOMAS Reimers: เฉือนชื่อของฉัน - โทมัสไรเมอร์ - เฉือน สัมมนา CS50 ยัติภังค์ MIKE Rizzo: และคุณสามารถ พบทุกสิ่งที่มี TOMAS ไรเมอร์: นี่คือสิ่งที่ GitHub ดูเหมือนว่าโดยวิธีการที่ ดังนั้นอีกครั้งเมื่อคุณเห็นโอเพนซอร์ส โครงการโดยทั่วไปพวกเขาจะอ่าน ฉันมีที่คุณสามารถอ่าน และถ้าคุณกลับไปคุณจะสังเกตเห็นว่า คุณมีซิปดาวน์โหลดซึ่งจะ ช่วยให้คุณสามารถดาวน์โหลดแหล่งที่มา รหัสที่จะรวม ผลิตภัณฑ์ในสิ่งที่ตัวคุณเอง MIKE Rizzo: ใช่และถ้าเราเพียงแค่คลิกที่ บน index.html อย่างรวดเร็วจริงๆ - TOMAS ไรเมอร์: คุณจะเห็นที่นี่ รหัสแหล่งที่มาสำหรับเว็บไซต์ของเรา MIKE Rizzo: นอกจากนี้ผมลืมที่จะผลักดันที่เหมาะสม ก่อนที่จะมีโต๊ะขนาดใหญ่มัน รวม แต่ยังมีตาราง ของ chmods ที่เรารวม เพียงเพื่อความชัดเจนของคุณ แต่ถ้าเราเลื่อนตลอดทางลงไป ด้านล่างเราไม่ได้ทำจริงมาก มากกับ JavaScript สิ่งที่ทุกนี้ มันเป็นเฉพาะจากทุกอย่าง อื่น ๆ ที่เรามี ดังนั้นขอขอบคุณพวกคุณที่มา และการฟัง เราหวังว่านี้เป็นประโยชน์จริงๆ หากคุณมีจาวาสคริปต์ที่เกี่ยวข้องใด ๆ คำถามหรือเพียงแค่ต้องการที่จะพูดคุยเกี่ยวกับ สิ่งอื่นเช่นสิ่งดีๆอื่น ๆ คุณสามารถทำอะไรกับจาวาสคริปต์ที่เราต้องการความรัก จะคุยกับคุณ TOMAS ไรเมอร์: ถ้าคุณมีคำถาม เกี่ยวกับโครงการของคุณหรือถ้านี้สามารถ ที่เกี่ยวข้องที่เราอาจจะติดรอบ นิด ๆ หน่อย ๆ หลังจากนี้ แต่นอกเหนือจากที่มี วันหยุดสุดสัปดาห์ที่ดี MIKE Rizzo: ใช่สนุก ดูพวกคุณ TOMAS Reimers: ดู ya