เดวิดเจลัน: ทั้งหมดขวา เพื่อให้ที่นี่เป็นแขน Myo วงคู่ที่เรา มีสำหรับโครงการสุดท้าย CS50 และนั่นก็คือการสาธิตการจัดคิวเรา คุณขึ้นล่วงหน้าที่เป็นหลัก แขนค่อนข้างแน่นนี้วงดนตรีขึ้นที่นี่ ฟังการเคลื่อนไหวของกล้ามเนื้อของคุณ ที่ถูกแมปแล้วในซอฟแวร์ แล็ปท็อปของโคลตันซึ่งมากกว่าที่นี่ iTunes และมีที่ เพลงแล้วคิวขึ้น แทนที่จะฉัน demoing นี้ โคลทันได้รับในห้องปฏิบัติการ ชัดเจนทุกสัปดาห์ได้รับการสาธิต พร้อมสำหรับการเป็นอาสาสมัครคนหนึ่งที่กล้าหาญ ถ้ามีคนอยากจะมา ใน up-- เห็นมือของคุณครั้งแรก มาขึ้น [00:01:09] สิทธิ์ทั้งหมด และสิ่งที่เป็นชื่อของคุณ? 

[00:01:13] ผู้ชม: เอ่อ, มาเรีย 

[00:01:14] เดวิดเจลัน: มาเรียมีความสุขที่จะเห็นคุณ มาที่นี่ ผมขอแนะนำให้คุณโคลทัน โคลตันนี้เป็นมาเรีย 

[00:01:21] COLTON: สวัสดีครับยินดีที่ได้พบคุณ 

[00:01:23] เดวิดเจลัน: ทั้งหมด ขวาดังนั้นขั้นตอนที่หนึ่งเราไม่ จะมีคุณใส่ นี้ไปยังแขนของคุณ เพื่อให้มันสวย แน่นขึ้นมาใกล้ข้อศอกของคุณ และในขณะเดียวกันให้มี วางอยู่บน Google แก้วของเรา และเราจะผสมเทคโนโลยีวันนี้ 

[00:01:33] COLTON: ครั้งแรกที่เราจะต้อง เบ็ดนี้เป็นสิ่งที่ 

[00:01:36] เดวิดเจลัน: OK ที่จริงขอนำแขนของคุณเป็น ใกล้กับสายเคเบิลนี้จะเป็นไปได้ เพื่อให้เราสามารถซิงค์มันขึ้นมา 

[00:01:41] COLTON: Let 's ทำเช่นนี้ 

[00:01:42] เดวิดเจลัน: และในขณะเดียวกันดังนั้น ที่ทุกคนจะได้รับอย่างใกล้ชิด เราจะโยนกล้องแอนดรู ขึ้นบนหน้าจอมี ดังนั้นเราจึงมีสาย USB ที่ ถูกเสียบเข้ากับปลอกแขนของมาเรีย และแจ้งให้เราโยนหน้าจอของโคลทัน ขึ้นบนโปรเจ็กต่อไป 

[00:02:00] ดังนั้นการตัดสินใจที่มีการลงทะเบียนอุปกรณ์ ขณะนี้เป็น Myo เชื่อมต่อกับสายเคเบิลนี้ และตอนนี้สิ่งที่มาเรีย จะทำชั่วขณะ เป็นจริงที่เดินผ่าน ขั้นตอนการสอบเทียบ และสอนซอฟแวร์ วิธีการตอบสนองของกล้ามเนื้อของเธอ เมื่อเธอทำบางอย่างที่กำหนดไว้ล่วงหน้า ท่าทางว่าซอฟต์แวร์ที่เข้าใจ หากคุณต้องการที่จะไปใน หน้าจอ ตกลงให้พยายาม 

[00:02:30] COLTON: ไปเช่นนี้ และเช่นเดียวกับที่ และตลอดทางไปทางขวา กลับไป 

[00:02:35] เดวิดเจลัน: OK มุมมองที่แตกต่างกัน มันไม่ใช่คุณ มันเป็นเรา 

[00:02:40] MARIA: OK เดวิดเจลันเลขที่ ขอย้ายมันสูงขึ้นไปดังนั้นจึงเป็น ใกล้ชิดกับข้อศอกของคุณหรือแม้แต่ที่เข้มงวดมากขึ้น สิทธิ์ทั้งหมด 

[00:02:52] ไปเลย นี้จะเป็นเวลาที่ดีสำหรับ CS52X มีที่เราจะไป 

[00:02:57] ดีมาก ตกลง นิ้วหัวแม่มือกับพิ้งกี้ 

[00:03:02] ดีมาก กระจายนิ้วมือข​​องคุณ ดี คลื่นที่เหมาะสม มันอยากรู้อยากเห็นการแสดง คุณมี hand-- ซ้าย 

[00:03:17] COLTON: ใช่ว่าแปลก เดวิดเจลัน: คลื่น ที่เหมาะสมและก้าวไปข้างหน้า ไปข้างหน้าอย่างรวดเร็วที่จะข้ามหรือถัดไป ที่ตกลงคลื่นขวา 

[00:03:25] MARIA: ผม don't-- รอสักครู่ 

[00:03:26] เดวิดเจลัน: ต้องการความช่วยเหลือบางอย่าง? 

[00:03:28] COLTON: คุณกำลังจะไปเช่นนี้ MARIA: มันเปลี่ยน สิ่งอื่น ๆ แต่ COLTON: มันเป็น เดวิดเจลัน: ใช่ผมไม่ทราบ ทำไมมันแสดง Leftie COLTON: คุณไม่ try-- ทำไม เพียงลองไปเช่นนี้ 

[00:03:38] เดวิดเจลัน: ไม่? บางทีถึงแขนของคุณ ออกมาตรง ๆ หน่อย ๆ และทำให้มันฉับพลันมากขึ้นเช่นนี้ ใช่ตกลงมา 

[00:03:48] MARIA: ฉันขอโทษ เดวิดเจลัน: มันไม่ใช่ความผิดของคุณ COLTON: มันเป็นอย่างดี เดวิดเจลัน: ขวาทั้งหมด สวยหน่อย 

[00:03:56] MARIA: เราควรจะข้ามนี้แล้ว? เดวิดเจลัน: ใช่ขอ ช่วยให้คุณออกจากเบ็ด ดังนั้นหากใครต้องการที่จะทำ โครงการสุดท้ายใช้การตัดขอบนี้ ฮาร์ดแวร์รู้ว่ามันอาจเพียง ใช้เวลาเล็กน้อยรับใช้ และเจ้านี่ความเป็นจริงนี้ เป็นจริงมากมีเลือดออกที่ขอบ 

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

[00:04:26] MARIA: ขอบคุณ 

[00:04:28] เดวิดเจลัน: ขอบคุณ เราจะแขวนในนี้ แต่เราจะให้ you-- วิธีการเกี่ยวกับลูกความเครียดที่นี่? โอ้ and-- ใดถ้าใช่ขอบคุณ สิทธิ์ทั้งหมด ดังนั้นอยากรู้อยากเห็นถ้าคุณมี ที่ไม่คุ้นเคยกับตัวเลือกเสียง ที่เราทำมี ก่อนหน้านี้ทีวีที่น่าตื่นตาตื่นใจ แสดงให้เห็นว่าคุณควรอย่างยิ่ง จะดื่มสุราดูใน Netflix เป็นหนึ่งที่นี่ 

[00:04:51] ลำโพง 1: ท่านสุภาพบุรุษและสุภาพสตรี นักมายากลชื่อจอช 

[00:05:04] เดวิดเจลัน: และที่เห็นได้ชัดก็คือ สิ่งที่ฉันให้กับข้อความในระหว่างการบรรยายตอนนี้ ผมได้รับการบอกว่ามาเรีย มีวันเกิดเมื่อวานนี้ วันเกิดที่มีความสุขดังนั้นจาก CS50 กับมาเรียได้เป็นอย่างดี 

[00:05:18] ดังนั้นคุณอาจได้อ่านในเดือนที่ผ่านมา ที่สุภาพบุรุษที่นี่สตีฟ Ballmer ที่เป็นจริง ชั้นเรียนของ 1977 ที่วิทยาลัย, เพิ่งเกษียณสำหรับไมโครซอฟท์ เขาเป็นระดับปริญญาตรีที่นี่ จากนั้นสองสามปีต่อมา พบว่าตัวเองที่ Stanford โรงเรียนธุรกิจ เมื่อเขาได้รับโทรศัพท์ โทรจากเพื่อนคนหนึ่งของเขาที่ เคยอาศัยอยู่ในห้องโถงลง จากเขาที่นี่ที่ฮาร์วาร์ ชื่อของเพื่อนที่ได้รับบิล เกตส์และในเวลานั้น เขากำลังพยายามที่จะสรรหาสตีฟจะเป็น คนธุรกิจแรกจริงๆ ที่ชื่อของ บริษัท ไมโครซอฟท์ที่มีขนาดเล็ก 

[00:05:45] เรื่องยาวสั้น, สตีฟ ในที่สุดก็ชนะไป เข้าร่วม Microsoft เมื่อพวกเขา มีเพียงแค่ 30 คน และตามเวลาที่เขา ออกค่อนข้างเร็ว ๆ นี้ บริษัท มีพนักงาน 100,000 ในช่วงไม่กี่ปีที่ผ่านมา และเพื่อให้เว็บไซต์เป็นที่รู้จักกัน Verge เตรียมบรรณาการวิดีโอนี้ ที่เราคิดว่าเราควรที่จะ ร่วมกันที่จะช่วยให้คุณ ความรู้สึกของเพียงวิธีพลังงานมากสตีฟ นำมาสู่การนำเสนอที่เขาให้การใด ๆ [การเล่นวิดีโอ] -Microsoft เป็นเหมือนเด็กที่สี่ เด็กทำออกจากบ้าน ในกรณีนี้ผมคิดว่า ผมออกจากบ้าน เฮ้บิล whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] -Hey, wazzap? เราได้รับ โอกาสที่ยิ่งใหญ่ และบิลให้เรามีโอกาสที่ ผมอยากจะขอขอบคุณสำหรับการที่บิล ฉันต้องการให้คุณเกินไป ก้าวของนวัตกรรม จะไม่ชะลอตัว 

[00:06:42] มันเป็นไปได้เร็วขึ้นและเร็วขึ้น อาจจะมีคู่แข่งขันน้อยราย ที่มีการตัดออก แต่น่าเสียดาย! 

[00:06:54] ฉันรัก บริษัท นี้ ใช่! ผม PC, และฉันรัก บริษัท นี้! 

[00:07:08] นักพัฒนานักพัฒนานักพัฒนา, นักพัฒนานักพัฒนานักพัฒนา, นักพัฒนานักพัฒนา ใช่! นักพัฒนาเว็บ! 

[00:07:19] นักพัฒนาเว็บ! นักพัฒนาเว็บ! ฟังอะไรที่คุณ ได้รับไม่มีค่าใช้จ่าย! 

[00:07:28] MS-DOS ผู้บริหารได้รับการแต่งตั้ง ปฏิทิน, กองการ์ด, แผ่นบันทึก, นาฬิกา, แผงควบคุม และคุณสามารถเชื่อว่ามันได้หรือไม่ Reversie! 

[00:07:35] การเผาไหม้ให้ซีดี! โพสต์ให้ MSN! คุณส่งไปให้เพื่อน! 

[00:07:40] ทั้งหมดด้วยคลิกเดียว! หนึ่งไมโครซอฟท์, กลยุทธ์หนึ่งหนึ่ง team-- เน้นระเบียบวินัยมืออาชีพ และมีความเชี่ยวชาญในสิ่งที่เราทำ ให้ฉันใช้เส้นจากหนังเก่า 

[00:07:52] ความสัมพันธ์ที่เป็นเหมือนฉลาม พวกเขาก้าวไปข้างหน้าหรือพวกเขาตาย ที่จริงผมคิดว่าเทคโนโลยี บริษัท จะเหมือนกัน 

[00:08:01] [จบการเล่นวิดีโอ] เดวิดเจลันดังนั้นเราจึงยินดีที่จะ ประกาศว่าสตีฟจะมีการร่วมงานกับเรา ที่นี่ใน CS50 วันพุธหน้าเวลา สถานที่ตามปกติและเวลาอยู่ที่นี่ พื้นที่อาจจะถูก จำกัด และอื่น ๆ ที่จะเข้าร่วมกับเราในคนโปรด มุ่งหน้าวันนี้หรือหลังจากนั้นไม่นาน เพื่อ cs50.harvard.edu/register 

[00:08:22] และเราจะติดตามโดย อังคารยืนยันจุด มองไปข้างหน้าว่าต่อไป พุธในระหว่างการบรรยายใน CS50 ขณะนี้ในข่าวอื่น ๆ ที่เกิดขึ้นกับผม เจอในสีแดงเพียง เมื่อวันก่อน 

[00:08:34] ปรากฎว่าหนึ่งในพนักงานของ CS50 และอย่างน้อยหนึ่งในนักศึกษาของ CS50 ขณะนี้การทำงานสำหรับ UC ประธานและรองประธาน ซึ่งทำให้ฉันกลับ วันของตัวเองกลับมา เมื่อฉันได้สูญเสียการเลือกตั้ง UC เข็ญใจ แต่ซับเงิน ในที่ฉันมักจะ บอกเล่าเรื่องราวที่เป็นที่ หนึ่งที่ผมแน่ใจว่า หลายเหตุผลที่ผมหายไป การเลือกตั้งเป็นขาดความสมบูรณ์ ของความสามารถในการพูดในที่สาธารณะ และค่อนข้างตรงไปตรงมัน ขับรถฉันประสบการณ์ที่ ผมคิดว่าปีจูเนียร์ของฉันที่จะลงนามจริง สำหรับฮาร์วาร์คอมพิวเตอร์สังคมซึ่ง เป็นกลุ่มในมหาวิทยาลัยที่ ถือการเจรจาทางเทคนิคต่างๆ และสิ่งอื่น ๆ และผมเอาไปสอน การสัมมนาและดังนั้นจึง มีโอกาสเป็น โอกาสที่ยอดเยี่ยม ที่จะเริ่มต้นการทำงานในตรงนี้ แต่ก็ยังมีผมได้มีโอกาส ในช่วงประสบการณ์นี้ ที่จะสอนตัวเองทั้งหมด HTML มากขึ้น และดังนั้นผม procrastinated คืนที่ผ่านมาโดย มองผ่านเว็บไซต์ HTML ตาม ฉันทำเช่นในปี 1997 ที่ 98 สำหรับฉัน แคมเปญซึ่งมีลักษณะเช่นนี้ที่นี่ ฉันรู้ว่า 

[00:09:29] Because-- และแน่นอนแจ้งให้ทราบล่วงหน้า นี้การตัดสินใจการออกแบบที่น่าตื่นตาตื่นใจในปี 1998 หรือ whatnot สิ่งแรกที่คุณต้องการให้ผู้ใช้ จะทำอย่างไรกับการเยี่ยมชมเว็บไซต์ของคุณ เป็นไปได้ที่จะคลิกลิงก์อื่นเพียงแค่ เพื่อเข้าสู่เว็บไซต์ของคุณที่นี่กับพระภิกษุสงฆ์ อยู่เบื้องหลังเช่นผ้าม่านที่ปกคลุมไปด้วย เห็นได้ชัดแพลตฟอร์มแคมเปญของฉันคือ และนี่เป็นสิ่งที่คุณจะได้รับ วันนี้เป็นเพียงแค่ภาพหน้าจอ แต่ผมอ่านผ่านเช่น โปสเตอร์หาเสียงของฉันคืน และแพลตฟอร์มของฉัน 

[00:09:50] และฉันก็โกรธมากในเวลานั้น แพลตฟอร์มของฉัน was-- มันน่าสนใจ ดังนั้นผมจึงได้สงบลงตั้งแต่นั้นมา แต่สักวันหนึ่งผมจะทำงานอีกครั้งและ หวังว่าจะดีกว่าเวลานี้ 

[00:10:03] ดังนั้น HTML, ภาษาที่ฉันทำว่า ที่ in-- คุณเร็ว ๆ นี้จะทำให้ more-- มาก เป็นสิ่งที่เราได้รับ พูดคุยเกี่ยวกับของสาย และส่วนใหญ่สละเพื่อรับตอนนี้ ที่เราได้ย้ายไปอยู่ในภาษาอื่น ๆ แต่ขอหยุดเพียงแค่ชั่วครู่หนึ่งและ ใส่บางสิ่งเหล่านี้ในบริบท ดังนั้นในประโยคสิ่งที่เป็น HTML ได้ไหม? 

[00:10:18] หรือสิ่งที่จะใช้หรือไม่? ใคร? ใช่ 

[00:10:20] ผู้ชม: มาร์กอัปสำหรับเว็บไซต์ เดวิดเจลัน: มาร์กอัปสำหรับเว็บไซต์ ดังนั้นจึงเป็นภาษามาร์กอัปที่ ช่วยให้คุณโครงสร้างหน้าเว็บ หัวขึ้นที่นี่ชื่อ ที่นี่, ร่างกายที่นี่ นี่คือความหนานี้เป็น italics-- การเรียงลำดับของรายละเอียดที่ 

[00:10:33] ตกลงที่ดี ดังนั้น CSS ช่วยให้ you-- และฉัน เอาเสรีภาพบางส่วนมี ด้วยตัวหนาหันหน้าและตัวเอียงเพราะ ที่ดำเนินการที่ดีกว่านี้ CSS เท่าไหร่อะไร? พูดในประโยค ทุกคนเลย ใช่ 

[00:10:46] ผู้ชม: Embellishments และ สิ่งเช่นวิธีการออกแบบ เดวิดเจลัน: ตกลงที่ดี การปรุงแต่งที่ช่วยให้คุณ การออกแบบหรือทันสมัย​​จนมัน กับสิ่งที่ต้องการและหนา ตัวเอียงและสีและดียังมี การวางตำแหน่งขององค์ประกอบเม็ดเล็ก การเรียงลำดับของมันช่วยให้คุณสามารถใช้สิ่งที่ ไมล์สุดท้ายเพื่อที่ว่าถ้ายกตัวอย่างเช่น ใน Pset7 คุณอาจจะได้สังเกตเห็นคุณ หน้าผลงานถ้าคุณอยู่ที่จุดนี้ แล้วว่าตารางเริ่มต้นที่คุณ ทำให้การแสดงถือครองหุ้นของผู้ใช้ และเงินที่อาจจะดูน่าเกลียดสวย โดยเริ่มต้นด้วยไม่มีพื้นที่สีขาว ชนิดของทุกอย่างหนาตา ร่วมกันในแถวและคอลัมน์ 

[00:11:18] ดีกับบิตของ CSS ที่คุณอาจตระหนัก จริงคุณสามารถปรับแต่งว่าและทำให้มัน บางสิ่งบางอย่างมากขึ้นคุ้นเคยและอื่น สวยไปดูที่ ดังนั้น CSS เป็นเรื่องเกี่ยวกับ stylization ของเว็บไซต์ แต่เราก็แนะนำให้รู้จักอีก ภาษา PHP ซึ่งจะช่วยให้เราทำในสิ่งที่? 

[00:11:36] ขอเพียงทำในสิ่งที่? ใคร ๆ ได้รับที่จะร่วมเกิน ครั้งแรกแถวคู่ ใช่ 

[00:11:40] ผู้ชม: สร้างเนื้อหาแบบไดนามิก เดวิดเจลันเพอร์เฟ สร้างเนื้อหาแบบไดนามิก และคุณสามารถทำเช่นนี้ใน จำนวนภาษาใด ๆ เราเกิดขึ้นจะใช้ PHP เพราะมันเป็น ในส่วนนี้จึงคล้ายกับไวยากรณ์ C 

[00:11:50] แต่ PHP ไม่ตรงที่ ซึ่งช่วยให้คุณแบบไดนามิกสร้างผลผลิต และบางส่วนของการส่งออกที่อาจจะ HTML, ในขณะที่เราได้รับมักจะทำ และก็ยังเพราะ ภาษาการเขียนโปรแกรมเป็น กลไกผ่านทางที่ เราสามารถพูดคุยกับฐานข้อมูล 

[00:12:03] และเราสามารถทำให้แบบสอบถามเพื่อ เซิร์ฟเวอร์อื่น ๆ เช่น Yahoos และโปรแกรมทำอะไร จริงๆที่คุณอาจเป็นอย่างอื่น ต้องการที่จะบังคับให้เครื่องคอมพิวเตอร์ที่จะทำ ดังนั้น PHP ช่วยให้เราเริ่มต้น แสดงผลแบบไดนามิกเนื้อหา ดังนั้นโดยตรรกะนี้ฉันไม่ได้มี เว็บไซต์แบบไดนามิกกลับมาในปี 1998 

[00:12:16] มันเป็นเพียงหน้าเว็บแบบคงที่ เนื้อหาของฉันจะต้องมีการเปลี่ยนแปลงได้โดย ด้วยตนเองกับ Gedit หรือเทียบเท่าบาง แต่ PHP เป็นสิ่งที่เรานำมาใช้หรือ จะได้ใช้ค่อนข้าง สำหรับสิ่งที่ต้องการ เว็บไซต์ frosh IMs ซึ่ง ก็ควรจะใช้เวลาการจดทะเบียนและ จัดการรายชื่อของสิ่ง users-- ว่า เป็นจริงที่เปลี่ยนแปลงไป เวลาแม้ว่าเราจะเกิดขึ้น ที่จะใช้ Perl ที่แตกต่างกัน ภาษาในเวลานั้น 

[00:12:35] แล้วสุดท้ายเราได้แนะนำ โครงสร้าง SQL-- Query Language ดังนั้นยังอีกภาษาหนึ่ง ที่ใช้สำหรับสิ่งที่? ที่ใช้สำหรับการอะไร? เราสามารถร่วม slight-- ตกลงเราจะไม่ ที่จะได้รับไกลมาก กว่าวงดนตรีที่นี่ ผู้ชม: มันเป็นโปรโตคอล ที่ใช้ในการพูดคุยกับฐานข้อมูล เดวิดเจลัน: โปรโตคอล ที่ใช้ในการพูดคุยกับฐานข้อมูล ผมขอปรับแต่ง มันเป็นธรรมชาติที่ใช้ภาษา จะพูดคุยกับเลือก databases-- และแทรกและลบ และการปรับปรุงและจริง คุณสมบัติมากขึ้นว่า เราไม่ได้พุ่งแม้ เป็น แต่คุณอาจต้องการที่จะมี explore-- ในการสำรวจสำหรับการพูด, โครงการสุดท้าย ดังนั้นจึงมีชิ้นส่วนต่างๆเหล่านี้ 

[00:13:09] และหวังว่า Pset7 แม้ว่า ข้อกำหนดของค่อนข้างยาว มันจงใจนานในการเดินคุณ ผ่านวิธีการที่สิ่งเหล่านี้สามารถทั้งหมด จะพิมพ์ด้วยกัน ตอนนี้ในวันจันทร์ที่เรา แนะนำภาษาสุดท้ายของเรา ที่เราจะแนะนำอย่างเป็นทางการใน course-- ที่เป็น JavaScript นี้เช่น PHP เป็น แปลภาษา 

[00:13:25] แต่ความแตกต่างที่สำคัญ ผมนำเสนอในวันจันทร์ที่ ก็คือว่าในขณะที่กำลังดำเนิน PHP หรือ ถูกตีความบนเซิร์ฟเวอร์ซึ่ง ในกรณีนี้เป็นเครื่องใช้ CS50, หรืออาจจะมีบางเว็บในเชิงพาณิชย์ เซิร์ฟเวอร์บนอินเทอร์เน็ต ใช้งาน JavaScript โดยทั่วไป เป็นภาษาที่ทำงานฝั่งไคลเอ็นต์ ไม่ side-- เซิร์ฟเวอร์ดังนั้นในเบราว์เซอร์ ซึ่งก็คือการพูดเช่นเดียวกับเมื่อฉันเปิด ขึ้นซอร์สโค้ด Facebook และพบทั้งหมด ไฟล์ .js เหล่านั้นความหมายก็คือ ที่ว่าเมื่อคุณเข้าเยี่ยมชม Facebook หรือมากที่สุด เว็บไซต์วันนี้คุณจะได้รับ ไม่เพียง แต่ HTML ไม่เพียง แต่ CSS, แต่ทั้งกลุ่มของ JavaScript รหัสมักจะอยู่ในรูปแบบของไฟล์ .js และแล้วก็ browser-- ของคุณเอง Mac หรือ PC-- ที่รันรหัสที่ 

[00:14:03] แต่เบราว์เซอร์ของคุณดำเนินการได้ คุณสามารถคิดในการเรียงลำดับจาก sandbox เพื่อให้รหัส JavaScript ไม่ควรจะเป็น สามารถที่จะลบไฟล์ในคอมพิวเตอร์ของคุณ มันไม่ควรจะสามารถที่จะ ส่งอีเมลในนามของคุณ ชนิดเบราว์เซอร์ของคุณ จำกัด สิ่งที่คุณสามารถทำอะไรกับมัน 

[00:14:17] ดังนั้นในแง่ที่ว่ามันเป็นเรื่องเล็ก ๆ น้อย ๆ ที่มีประสิทธิภาพน้อยบางทีกว่า C. แต่ใช้งาน JavaScript สามารถเป็น กันถูกนำมาใช้บนเซิร์ฟเวอร์ แม้ว่าเราจะไม่ได้มีแนวโน้มที่จะพูดคุย เกี่ยวกับเรื่องนี้ในบริบทที่ ดังนั้นตอนนี้ขอผูกเหล่านี้ร่วมกัน สัปดาห์บวกที่ผ่านมาเรานำเสนอบาง HTM​​L บนหน้าเว็บ left-- สุดน่าเบื่อ 

[00:14:34] เพียงแค่บอกว่าสวัสดีชาวโลก และจากนั้นผมนำเสนอเกี่ยวกับ ขวาชนิดของเราสามารถขโมยความคิด จากการสนทนาของเรา โครงสร้างข้อมูลใน C และคิดว่าเกี่ยวกับวิธีการลำดับชั้นนี้ ภาษามาร์กอัปด้านซ้าย สามารถวาดหรือดำเนินการในหน่วยความจำ เป็นโครงสร้างที่เกิดขึ้นจริงกับโหนด และตัวชี้และชนิดของรายละเอียด ด้านขวาที่เราเรียกว่า ว่าเอกสาร DOM-- วัตถุ Model-- ซึ่งเป็นเพียง วิธีที่จินตนาการของบอกว่าต้นไม้ 

[00:14:56] ตอนนี้ทำไมเป็นแบบนี้มีประโยชน์ในการ คิดว่ามันในทางนี้หรือไม่? เพราะตอนนี้มี JavaScript, เพราะเรามี รหัสที่ได้รับในการเล่นในครั้งนี้ สภาพแวดล้อม, HTML จริงที่เป็น ถูกส่งไปยังเบราว์เซอร์ แล้วและที่มีอยู่แล้ว ถูกโหลดลงในหน่วยความจำโดย เบราว์เซอร์เป็นต้นไม้ในของเครื่องคอมพิวเตอร์ของคุณ RAM เช่นนี้เราสามารถใช้ JavaScript ที่จริงการสำรวจหรือการเดินหรือการค้นหา หรือเปลี่ยนต้นไม้ DOM ว่า แต่ที่เราต้องการ ดังนั้นในความเป็นจริงถ้าคุณคิด เกี่ยวกับ facebook.com, หากคุณใช้คุณลักษณะการแชทถ้าคุณ การใช้งาน Gmail และคุณลักษณะ gchat, สิ่งที่คุณมี ข้อความมาอีกครั้งและอีกครั้ง และอีกครั้งข้อความเหล่านั้นอาจจะ, เหมือน LI แท็กรายการแท็กรายการอาจจะ 

[00:15:35] หรือบางทีพวกเขากำลังเพียง divs ที่ให้ปรากฏ ทุกครั้งที่คุณจะได้รับข้อความโต้ตอบแบบทันที และอื่น ๆ ที่เพียงแค่หมายความว่าสิ่งที่ Facebook หรือ Google จะทำ เป็นเวลาที่คุณได้รับ ข้อความจากเซิร์ฟเวอร์ พวกเขาอาจจะมีการใช้ JavaScript เพียงแค่เพิ่มโหนดอื่น นี้ tree-- โหนดนี้อีก ต้นไม้ที่แล้วสายตาก็ดูเหมือน เช่นบรรทัดใหม่ของข้อความบนหน้าจอของคุณ แต่พวกเขากำลังใส่ เป็นโครงสร้างข้อมูลนี้ 

[00:15:57] ดังนั้นในชั้นเรียนเช่น CS124 และคนอื่น ๆ ที่คุณจะ จริงเขียนโค้ดมากขึ้นกับ โครงสร้างข้อมูลเช่นนี้ แต่ตอนนี้ใน JavaScript, เราก็จะถือว่า เราได้รับทั้งหมดของการทำงานนี้ ฟรีจากภาษาตัวเอง ดังนั้นเรามาดูตัวอย่าง 

[00:16:09] ผมขอเปิดแฟ้มที่เรียกว่า form.html มันง่ายสุด มันก็มีลักษณะเช่นนี้ 

[00:16:15] ไม่มี CSS, ความคิดที่จะไม่มีความสวยงาม มันทำงานได้อย่างหมดจด และเห็นได้ชัดฉัน ขออีเมล, รหัสผ่าน, รหัสผ่านอีกครั้งแล้วการตรวจสอบ จะเห็นด้วยกับข้อตกลงและเงื่อนไขบางอย่าง สิ่งที่รหัสแหล่งที่มาของเรื่องนี้ ดูเหมือนว่าน่าจะเป็นสิ่งที่ คุณอาจคิดว่ามี นิด ๆ หน่อย ๆ ของความคิดตอนนี้ ฉันมีแท็กรูปแบบที่นี่ 

[00:16:32] การดำเนินการจะเห็นได้ชัดที่จะไป ไปที่ไฟล์ที่เรียกว่า register.php วิธีที่ฉันจะใช้คือการได้รับ และจากนั้นผมได้มีข้อความ เขตข้อมูลที่มีชื่ออีเมล์ 

[00:16:40] ฉันมีรหัสผ่าน ชื่อที่เป็นรหัสผ่าน ฉันมีอีก รหัสผ่านที่มีชื่อ คือการยืนยันค่อนข้างพล มันเป็นเพียงพารามิเตอร์ HTTP อื่น 

[00:16:49] แล้วเราเราไม่ได้ใช้เหล่านี้ยกเว้น ตั้งแต่ Frosh IMs สาธิตใน class-- กล่องกาซึ่งเป็น ชนิดก็เท่ากับการตรวจสอบ และฉันจะโทรห​​าข้อตกลงที่ ดังนั้นผมจึงได้ชนิดของพล แต่ ชื่อสะดวกเขตข้อมูลเหล่านี้ เพื่อที่ว่าตอนนี้เมื่อรูปแบบนี้ได้รับ ส่งเรามาดูสิ่งที่เกิดขึ้น ถ้าฉันทำ malan@harvard.edu, ฉันจะทำรหัสผ่านของสีแดงเข้ม ฉันจะทำรหัสผ่านของอะไร ขอไม่ให้ความร่วมมือ 

[00:17:10] และฉันจะไม่ตรวจสอบกล่อง ให้ฉันคลิกที่สมัครสมาชิก และกล่าวว่า, HM, คุณลงทะเบียน ไม่เชิง 

[00:17:16] แต่ URL ที่เปลี่ยน ดังนั้นรูปแบบนี้ได้รับอนุญาตอย่างชัดเจน เพื่อส่งไปยัง register.php แต่สันนิษฐานว่าผมควรจะเป็น จับบางส่วนของข้อผิดพลาดเหล่านี้ ขณะนี้ใน Pset7 และบาง ตัวอย่างการบรรยายของเรา เรามักจะพิมพ์ออกมา เกิดข้อผิดพลาดสีแดงขนาดใหญ่ที่นี่ บอกชื่อหายไป หรือหายไปรหัสผ่าน ที่เราเคยทำมาก่อนและเราได้ เซิร์ฟเวอร์ทำการตรวจสอบข้อผิดพลาดด้าน 

[00:17:37] แต่เว็บไซต์จำนวนมากวันนี้ ทำตรวจสอบข้อผิดพลาดด้านลูกค้า ที่ URL ที่ไม่เปลี่ยนแปลง ทั้งหน้าไม่รีเฟรช คุณจะได้รับการตอบรับทันที จากเบราว์เซอร์ บางทีอะไรสีแดง 

[00:17:48] บางทีคุณอาจจะได้รับป๊อปอัพ แต่คุณไม่ต้องเสียเวลาส่งไปยัง ข้อมูลของเซิร์ฟเวอร์ที่ไม่สมบูรณ์ ดังนั้นเรามาดูวิธีการที่เราอาจจะ บรรลุคุณลักษณะที่ดี 

[00:17:56] ให้ฉันไป form1.html, ซึ่งมีลักษณะเดียวกัน แต่ถ้าเวลานี้ฉันทำ malan@harvard.edu และฉันพิมพ์สีแดงเข้ม และผมก็ไม่ให้ความร่วมมือต่อไป แต่คลิกที่สมัครสมาชิกแจ้งให้ทราบตอนนี้ มันไม่ใช่การแก้ปัญหาที่เซ็กซี่ที่สุด ฉันได้อย่างน้อยจับข้อผิดพลาดนี้ และผมเคยใช้การแจ้งเตือน ฟังก์ชั่นใน JavaScript-- ซึ่งเรากำลังใช้เพียงในชั้นเรียน โดยทั่วไปแล้วคุณไม่ควรใช้นี้ เพราะมันได้อย่างรวดเร็วสามารถได้รับการออก ของการควบคุม แต่รหัสผ่านที่ไม่ตรงกับข้อผิดพลาด 

[00:18:19] ให้ฉันไปข้างหน้าและคลิกตกลง แต่สิ่งที่ Takeaway ที่สำคัญที่นี่ เป็นว่า URL ที่ไม่เปลี่ยนแปลง การสูญเสียดังนั้นฉันไม่ได้ใส่ใจ เวลาของเซิร์ฟเวอร์ขอ คำถามที่ฉันจะมี คิดออกคำตอบกับตัวเอง 

[00:18:30] และผู้ใช้แม้ว่า รับการพูดคุยเกี่ยวกับเรื่องนี้ นานกว่าที่ของผู้ใช้ จะคิดเกี่ยวกับเรื่องนี้ กำลังจะมีความคิดเห็นทันที มีความล่าช้าด้วยไม่ได้ เชื่อมต่อเครือข่าย ดังนั้นให้ดูที่รหัสแหล่งที่มานี้ 

[00:18:40] ดู Form1.html โครงสร้างคล้ายขึ้นที่นี่ รูปแบบในความเป็นจริงเหมือนกัน แต่เรามาดูสิ่งที่ผมทำลงที่นี่ และมีวิธีการที่แตกต่างกันการทำเช่นนี้ และฉันได้ทำตรงมากที่สุด ลูกศิษย์ แต่ไม่วิธีที่สง่างามที่สุดยัง ฉันมีแท็กสคริปต์ จากนั้นผมก็โทรหา document.getElementById ('ลงทะเบียน') และฉันเก็บค่าที่ ในรูปแบบตัวแปร 

[00:19:04] ดังนั้นสิ่งที่ฉันได้ทำ? ที่คุณสามารถคิด document.getElementById เป็น ฟังก์ชั่นพิเศษที่ JavaScript ช่วยให้คุณ ที่แท้จริงมือคุณ ตัวชี้ไปยังหนึ่งของโหนด หรือรูปสี่เหลี่ยมในต้นไม้ต้นนี้ ดังนั้นตอนนี้ว่าเป็นสิ่งที่ตัวแปรแบบฟอร์มของเรา ใน JavaScript เป็นจริงชี้ไปที่ 

[00:19:21] ดังนั้นตอนนี้ไวยากรณ์จะแตกต่างจาก C. แต่เรากำลังทำสิ่งที่ไม่กี่ที่นี่ หนึ่งคนนี้เป็นแปลก ๆ มองอย่างแน่นอนเมื่อเทียบกับซี แต่มองไปที่เส้น 35 ดังนั้นใน form.onsubmit ซ้าย จำ onsubmit ที่ เช่นข้อมูลใน struct ถ้าคุณคิดว่ารูปแบบของตัวแปร เป็นเพียงการ struct C, มันอาจจะมีบางสาขา 

[00:19:42] กลับในวันที่เรามีชื่อนักเรียน รหัสบ้านชนิดของเขตข้อมูลเหล่านั้น เพียงแค่คิดว่า onsubmit เป็นอีกสนาม แต่มันเป็นเขตพิเศษเพราะ เบราเซอร์ที่ตั้งโปรแกรมที่คาดหวัง .onsubmit ไม่เป็นค่า เช่นตัวเลขหรือสตริง แต่ที่จริงเป็นหน้าที่ หรือที่อยู่ของฟังก์ชัน ในหน่วยความจำของคอมพิวเตอร์ 

[00:20:02] และแน่นอนว่าเป็นสิ่งที่ คำหลักนี้ที่นี่ไม่ นี้บอกให้ฉันฟังก์ชั่นใหม่ แต่สิ่งที่เป็นชื่อของมัน จะเห็นได้ชัด? 

[00:20:09] คิดย้อนกลับไปถึงวันจันทร์ เป็นชื่อของเรื่องนี้คืออะไร ฟังก์ชั่นขึ้นอยู่กับรูปแบบนี้? ไม่ฉันหมายถึงมีความชัดเจน ไม่มีชื่อ associated-- แน่นอน ไม่ได้อยู่ในสิ่งที่ฉันได้เน้นที่นี่ 

[00:20:21] แต่ที่ตกลงจริง นี้เป็นฟังก์ชั่นที่ไม่ระบุชื่อหรือ ฟังก์ชั่นแลมบ์ดาขณะที่บางคนอาจเรียกว่า และนั่นก็หมายความว่า ก็ยังคงฟังก์ชั่น มันเป็นเพียงแค่คุณไม่สามารถเรียกมันโดยใช้ชื่อ แต่ที่ตกลง เพราะอีกครั้งเบราว์เซอร์ที่ได้รับ ตั้งโปรแกรมโดย บริษัท เช่น Google หรือ Microsoft หรือ Mozilla หรืออื่น ๆ ที่จะ เพียงแค่รู้ว่าถ้าเขตข้อมูล .onsubmit ภายในขององค์ประกอบแบบฟอร์มมี ค่ารักษามันเป็นฟังก์ชัน ตัวชี้ฟังก์ชันถ้าคุณจะ และเรียกว่าเมื่อการส่งแบบฟอร์ม 

[00:20:46] ดังนั้นสิ่งที่รหัสควรจะดำเนินการ เมื่อฟอร์มถูกส่ง? เห็นได้ชัดว่าทุกอย่าง ภายในวงเล็บปีกกา และนี่เป็นเพียงแค่โวหาร 

[00:20:53] คุณสามารถทำเช่นนี้ เรามีแนวโน้มที่จะทำอย่างไรใน CS50 แต่ใน JavaScript คนส่วนใหญ่ มีแนวโน้มที่จะเก็บไว้ในบรรทัดเดียวกัน เพียงเพราะมันชัดเจนมากขึ้นคือ ที่เกี่ยวข้องกับการทำงานของคำหลักที่ ดังนั้นตอนนี้ฉันกำลังทำอะไรอยู่? 

[00:21:03] หาก form.email.value เท่ากับเท่ากับ สตริงที่ว่างเปล่าหรือไม่มีอะไรที่นี่ การแจ้งเตือนที่ฉันจะพูดว่า คุณต้องให้ที่อยู่อีเมลของคุณ แล้วกลับเท็จ และมันเป็นเรื่องที่ผิดพลาดกลับมาว่า ป้องกันไม่ให้รูปแบบจากการถูกส่ง ในขณะเดียวกันถ้าค่ารหัสผ่าน ว่างเปล่า, ฉันจะตะโกนใส่หน้าผู้ใช้ และพูดว่าคุณจะต้องให้รหัสผ่าน 

[00:21:21] ในขณะเดียวกันสิ่งที่จะได้รับ น้อยนักเล่นที่นี่ หาก form.password.value ไม่ form.confirmation.value เท่ากัน ข้อมูลอื่น ๆ ที่ตะโกนใส่หน้า ผู้ใช้ที่รหัสผ่าน ไม่ตรงกับที่พวกเขา ไม่ได้สักครู่ที่ผ่านมา แล้วคนนี้เป็น เซ็กซี่เล็ก ๆ น้อย ๆ เพราะผม รู้ว่าฉันรู้ว่าแนวคิดที่ว่า การตรวจสอบเป็นชื่อกล่องกาเครื่องหมายของ 

[00:21:40] ดังนั้นผมก็สามารถใช้อัศเจรีย์ จุดที่จะบอกว่าถ้าตรวจสอบไม่ได้ checked-- เป็นบูลีน ค่าจริงหรือ false-- ฉันจะตะโกนใส่หน้าผู้ใช้สำหรับเหตุผลที่ มิฉะนั้นถ้าเราได้รับผ่าน ทั้งหมดของเงื่อนไขเหล่านี้ ขอเพียงแค่กลับจริง ให้รูปแบบที่ถูกส่ง แล้วนี้จะเกิดขึ้น 

[00:21:56] ลองพิมพ์ในสีแดงเข้ม ขอตรวจสอบกล่องคลิกสมัครสมาชิก และตอนนี้ฉันผ่านไปยังปลายทาง ขณะนี้มีฐานข้อมูลไม่มี ไม่มีอะไรที่น่าสนใจคือ ใน register.php ผมเพียงแค่ต้องการบางสิ่งบางอย่าง ที่จริงการพูดคุยกับ เพื่อให้ฉันหยุดที่นี่ คำถามใด ๆ เกี่ยวกับสิ่งที่เราได้ทำเพียงแค่ หรือสิ่งที่บางส่วนของไวยากรณ์ใหม่นี้คืออะไร? ตกลงใช่? 

[00:22:17] ผู้ชม: ดังนั้นช่องใด ๆ โดยอัตโนมัติบูลีน คุณไม่ได้มีการประกาศเช่นนั้น 

[00:22:21] เดวิดเจลัน: ถูกต้อง ช่องใด ๆ ที่ส่งถึงคุณจาก รูปแบบ HTML เพื่อ JavaScript รหัสของคุณ จะได้รับใช่เป็น บูลีน value-- จริงหรือเท็จ มันเป็นคำถามที่ดี ในขณะที่ค่าอื่น ๆ ของ แน่นอนว่าข้อความที่ได้รับสตริง AKA 

[00:22:36] สิทธิทั้งหมดเพื่อให้ฉัน ย้อนกลับบิตต่อไป สิ่งที่เป็นจุดรวมของการนี​​้หรือไม่? เพียงเพื่อให้มีความชัดเจน เหมือนที่เรารู้อยู่แล้วว่าแม้จาก Pset7 และแม้กระทั่งจากการบรรยายสัปดาห์สุดท้ายของ ตัวอย่างที่เห็นได้ชัดว่าเราสามารถตรวจสอบ $ _GET $ _POST ดูว่าผู้ใช้ให้เรา ค่าว่าง โปรดจำไว้ว่าฟังก์ชั่นที่ว่างเปล่าใน PHP 

[00:22:54] ดังนั้นเพียงแค่ต้องมีความชัดเจนอะไร เหตุผลหนึ่งที่เราอาจจะยัง ต้องการจะทำการตรวจสอบข้อผิดพลาดนี้ ภายในของเบราว์เซอร์? อะไรคือแรงจูงใจที่นี่? ใช่ 

[00:23:06] ผู้ชม: ได้เร็วขึ้นและที่คุณทำไม่ได้ ส่งข้อมูลไร้ประโยชน์ไปยังเซิร์ฟเวอร์ เดวิดเจลัน: ดี มันเร็วกว่า คุณไม่ได้ส่งผล ข้อมูลไปยังเซิร์ฟเวอร์ 

[00:23:12] ดังนั้นคุณจะได้รับกลับมามากขึ้น การตอบสนองทันที และโดยรวมผู้ใช้ ประสบการณ์จะดีกว่า คิดเกี่ยวกับทางเลือก 

[00:23:17] ถ้า Gmail-- และเป็น กรณีที่หลายปีที่ผ่านมา สมมติว่าคุณได้รับอีเมลใหม่ Gmail ของคุณ บัญชี แต่วิธีเดียวที่ผ่าน จะเห็นว่าเป็นเหมือน โหลดทั้งหน้า หรือสมมติว่าคุณคลิกที่ เชื่อมโยงไปยังอ่านอีเมล 

[00:23:29] ทุกอย่างมีที่จะโหลดเพื่อ ที่คุณสามารถดูอีเมล์ หรือ Facebook-- คุณจะได้รับข้อความการแชท คุณไม่เห็นมันจนกว่าคุณจะโหลด หน้าเว็บหรือคลิกที่ลิงค์บาง 

[00:23:36] เช่นนี้จะเป็นชะมัด ประสบการณ์การใช้งานที่น่ารำคาญ และนี่คือสิ่งที่มันเป็นเหมือน อย่างชัดเจนกลับมาเมื่อฉันวิ่งไปหา UC และเว็บได้มากน้อยแบบไดนามิก และ JavaScript ไม่เป็นที่นิยม ตามที่ขณะนี้ และสิ่งที่จะได้รับมาก ขึ้นแบบไดนามิกและอื่น ๆ อีกมากมาย ด้านลูกค้าในแง่ที่ว่า 

[00:23:49] แต่มีการจับที่นี่และ นี้เป็นชนิดของ gotcha ที่น่ารำคาญ เพียงเพราะคุณเพิ่มฝั่งไคลเอ็นต์ การตรวจสอบเช่นนี้ไม่ได้หมายความว่า คุณสามารถหรือควรละทิ้ง การตรวจสอบด้านเซิร์ฟเวอร์ คุณเป็นหลักต้องการที่จะนำคุณ ข้อผิดพลาดในการตรวจสอบสถานที่ทั้งสอง เพราะสิ่งที่เป็นหนึ่ง บทเรียนที่ได้เรียนรู้ จากบทความที่ผมอ่านบทสัมภาษณ์บางส่วน จากนี้ CMS system-- โง่ การจัดการเนื้อหา System-- ที่ ระบบการตรวจสอบการดำเนินการของ เข้าสู่ระบบผ่านทางสิ่งที่กลไก? ของ JavaScript 

[00:24:20] ผู้ชม: JavaScript เดวิดเจลัน: JavaScript, ว่าใช่มั้ย? มันเป็นโดยใช้ JavaScript และตัวอักษรที่พวกคุณมี เล่นนิด ๆ หน่อย ๆ อาจจะ กับ Chrome ได้ตรวจสอบ และถ้าผมสามารถหาได้ตรวจสอบองค์ประกอบ 

[00:24:30] ผมขอไปกว่าที่จะทำ ตัวเลือกทั้งหมดของ Chrome ได้ และนี่คือวิธีที่ง่ายก็คือการ ปิดการใช้งาน JavaScript ในเบราว์เซอร์ ตรวจสอบ, JavaScript ไม่มาก 

[00:24:38] ดังนั้นในความเป็นธรรมจำนวนมาก ของเว็บวันนี้ เป็นเพียงการไปที่จะทำลายเพราะ Gmail และ sites-- อื่น ๆ Facebook-- คิดว่า เปิดใช้งาน JavaScript แต่ถ้าคุณกำลังทำอะไรโง่ เช่นเดียวการตรวจสอบผู้ใช้งานป้อน และการตรวจสอบมัน ข้อผิดพลาดในฝั่งไคลเอ็นต์ ฝ่ายตรงข้ามได้อย่างง่ายดายสามารถทำเช่นนี้ และจากนั้นได้อย่างชาญฉลาด ฝ่ายตรงข้ามเหมือนพวกคุณ ตอนนี้อาจจะใช้ Telnet หรือ Curl หรือคำสั่งสายเพียงแค่คำสั่ง และที่จริงการส่งข้อความไปยังเซิร์ฟเวอร์ ในทำนองเดียวกันว่าจะไม่ได้รับการตรวจสอบข้อผิดพลาด 

[00:25:05] ดังนั้นนี่เป็นมากกว่า การตัดสินใจส่วนติดต่อผู้ใช้ มากกว่าที่เป็นอยู่ตามความเป็นจริงทางเทคนิค improvement-- การดำเนินการ ด้านลูกค้าบางอย่างเช่นนี้ ดังนั้นตอนนี้อย่างรวดเร็ว แต่แล้ว ฉันจะเลื่อนไปเดินเล่นออนไลน์ ผ่านหนึ่งนี้ ในรูปแบบที่สองเราจริงผ่านไป และทำความสะอาดรหัสนิด ๆ หน่อย ๆ แต่ให้ฉันเลื่อนไปอย่างใดอย่างหนึ่ง ของวิดีโอที่เราจะมีโอกาส ฝังใน Pset8 ที่เพียงแค่แสดงให้คุณเห็น ไวยากรณ์ที่คล้ายกันโดยใช้ห้องสมุดที่เรียกว่า jQuery ซึ่งเป็นซุปเปอร์ซุปเปอร์ ห้องสมุดที่เป็นที่นิยมใน JavaScript ว่าคนที่ตรงไปตรงมามากที่สุด เพียงแค่ใช้วันนี้ และแม้กระทั่งการสร้างความสับสนให้เป็น เป็น JavaScript ตัวเอง 

[00:25:37] และมีแนวโน้มที่จะเกี่ยวข้องกับ สัญญาณบางอย่างเงินดอลลาร์ และคำหลักเช่นเอกสาร ในวงเล็บที่นี่ แต่อีกครั้งให้ฉันเลื่อนไป บางบทเรียนช้าออนไลน์ มากกว่าที่จะได้รับการผูกขึ้นในไวยากรณ์เพียง ขอย้ายไปยัง บางสิ่งบางอย่างเล็ก ๆ น้อย ๆ เย็น ในแง่ของการใช้งานนี้ 

[00:25:50] ดังนั้นโดยเฉพาะอย่างยิ่งให้ฉันไป ข้างหน้าและเปิดขึ้นที่นี่ มา มีที่เราจะไป 

[00:25:59] ผมขอเปิดภาพนี้ที่นี่ ที่ซับซ้อนโดยไม่จำเป็น มอง แต่มัน อธิบายถึงเทคนิคที่เรียกว่า AJAX-- Asynchronous JavaScript และ XML ที่ X สำหรับ XML ที่เป็นจริง ใช้ไม่ได้จริงๆ มันมีแนวโน้มที่จะใช้สิ่งที่ อื่นที่เรียกว่า JSON 

[00:26:13] แต่ที่นี่เป็นวิธีการบางอย่างเช่น Google Maps หรือ Google Earth ทำงาน ลองนี้ในการบินจริง ให้ฉันไปข้างหน้าและเปิด ขึ้น Chrome บนเบราว์เซอร์ของฉัน 

[00:26:21] และแจ้งให้เราไปลง พูด maps.google.com และที่จริงถ้าคุณเก่า พอที่จะจำอะไร เช่น MapQuest เป็นเหมือนย้อนกลับไปในวันนั้น และบางทีพวกเขายังคงทำงานเช่นนี้ เมื่อคุณใช้ในการค้นหาบางสิ่งบางอย่าง 33 ถนน Oxford, Cambridge, Mass, ขอทำเจ้านี่คุณ จะจริงถ้าคุณ ต้องการที่จะเลื่อนขึ้นและ ลงซ้ายและขวา คุณจะมีลักษณะอย่างไร ลูกศรขนาดใหญ่อยู่ด้านบนและมัน จะแสดงให้คุณอีก กรอบของแผนที่ขึ้นที่นี่ หรือคุณจะคลิกซ้ายและคุณ จะผ่านไปที่นี่หรือคลิกอื่น และคุณจะผ่านไปที่นี่ แต่แทนที่จะเหล่านี้ วันของเราแน่นอนเพียง จะได้รับที่เราสามารถไป รอบเคมบริดจ์สวยได้อย่างรวดเร็ว เพียงแค่คลิกและลาก แต่แจ้งให้ทราบว่ามีบกพร่องบาง 

[00:26:59] ถ้าผมทำเช่นนี้เร็วพอ สิ่งที่ดูเหมือนจะเกิดขึ้น ขณะที่ผมลากเล็ก ๆ น้อย ๆ เร็วเกินไป สำหรับเครื่องคอมพิวเตอร์เพื่อให้ทัน? สิ่งที่คุณเห็น? ใช่ 

[00:27:07] ผู้ชม: พิกเซลไม่รีเฟรช เดวิดเจลัน: พิกเซลไม่รีเฟรช มีที่จริงและคุณเป็น จะได้เห็นนี้จริง ถ้าคุณกำลังรับชมออนไลน์และหยุดการทำงานชั่วคราว นี้หรือจริง ๆ แล้วสิ่งที่ช้าลง สำหรับ once-- คุณจะเห็นว่ามี กระเบื้องสี่เหลี่ยมหรือสี่เหลี่ยมที่ จะหายไปจากแผนที่จนกว่า เสี้ยววินาทีต่อมาข้อมูลเพิ่มเติม ภาพมากขึ้นจริง ปรากฏบนหน้าจอ และในความเป็นจริงถ้าเราทำเช่นนี้โดยการมอง ขึ้น Chrome's-- สมมุติว่า Chrome-- เรามาดู เราไม่สามารถทำเช่นนั้นได้ 

[00:27:31] โอ้ขออภัย ลองเปิด maps.google.com ผมขอให้หน้าต่างที่ใหญ่กว่าอีกครั้ง 

[00:27:36] กลับไปที่ 33 Oxford Street อะไรคือสิ่งที่เว็บไซต์ของผมในเร็ว ๆ นี้หรือไม่? ฉันมีนี้เช่นพูดจาโผงผางส่วนตัวถึง ตัวเองว่าฉันควรที่ข้อความนั้นทันที เพื่อนที่ออนไลน์ใด ๆ ที่ต้องการที่จะได้ยินมัน มีเว็บไซต์บางส่วนเป็น ฉันคิดว่ามัน Comcast-- ดังนั้น ผู้ให้บริการอินเทอร์เน็ตอเมริกันขนาดใหญ่มาก คุณสามารถเมื่อลงทะเบียนสำหรับสายเคเบิลใหม่ บริการโมเด็มหรือบริการเคเบิลทีวี พวกเขามีรูปแบบมากพอสมควร ที่พวกเขาขอที่อยู่ของคุณ และมีความน่าตื่นตาตื่นใจนี้ คุณลักษณะที่เรียกว่าสมบูรณ์อัตโนมัติ เช่น Google, ที่เริ่มต้นที่จะเติม ในการตอบคำถามของคุณ 

[00:28:04] ปัญหาคือพวกเขาจะสมบูรณ์อัตโนมัติ ในสิ่งแรกที่คุณพิมพ์ ดังนั้นหากคุณเริ่มพิมพ์ใน 33 ก็ จะแสดงให้คุณอย่างแท้จริงบ้านทุกหลัง ในอเมริกาที่เริ่มต้น ด้วยหมายเลข 33 ก่อนที่จะดำเนินการต่อไป คาดหวังให้คุณพิมพ์มากขึ้น ดังนั้นถ้าคุณพิมพ์ 33 ฟอร์ด, แล้วมันแสดงให้คุณเห็นทุกถนน ในอเมริกาที่มี 33 ฟอร์ดใน ชื่อโดยไม่คำนึงถึงเมืองของตน ว่าคุณอยู่ใน 

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

[00:28:34] และฉันก็จะออก ที่สัมผัสกันนี้อีกครั้ง แต่มีวิธีการที่ดีที่จะมี ใช้ JavaScript และวิธีการที่ไม่ดี และที่ไม่จำเป็นต้องเป็นหนึ่งที่ดีที่สุด 

[00:28:40] แต่จุดที่นี่ก่อนหน้านี้ ด่าก็จะเปิดเครื่องมือลงที่นี่ และเปิดเครื่องมือสำหรับนักพัฒนา, ที่เราได้รับการสนับสนุนก่อนหน้านี้ และเครือข่ายในการรับชม แท็บเป็นฉันคลิกอย่างรวดเร็วจริงๆ และสังเกตเห็นทั้งกลุ่ม ได้รับการร้องขอของที่เกิดขึ้น ทั้งหมดนี้เกิดขึ้นตั้งแต่ผมลาก 

[00:28:57] และส่วนใหญ่แน่นอน จำนวนมากของแถวเหล่านี้ ขณะนี้มีภาพ JPEG เฉือน ประเภท MIME หรือชนิดเนื้อหา นั่นเป็นเพราะสิ่งที่โครเมี่ยมจะทำ เวลาที่ฉันคลิกและลากทุกคลิก และลากคือมันตระหนักโอ้ฉัน ต้องไปถาม Google สำหรับกระเบื้อง บนแผนที่ที่มากกว่าที่นี่ ได้อย่างรวดเร็วดาวน์โหลดได้ผ่านทาง HTTP, แล้วเพิ่มไปที่เรียกว่า DOM กับเว็บเบราเซอร์ในต้นไม้หน่วยความจำ การเป็นตัวแทนเพื่อให้ผู้ใช้ ผมเห็นว่ากระเบื้องปรับปรุง และนี้เป็นเพราะ เทคนิคที่เรียกว่า AJAX ย้อนกลับไปในวันนั้นจริงๆ กรณีที่เกิดขึ้นว่าถ้าคุณ ต้องการที่จะเปลี่ยนแปลงสิ่งที่อยู่บนหน้าจอ คุณจะต้องคลิกขึ้นลงซ้าย ขวา แล้วหน้าใหม่จะเปิด แต่วันนี้ทุกอย่าง เป็นแบบไดนามิกมากขึ้น มันเกิดขึ้นในทางที่มนุษย์เราจะ หวังว่ามันจะจริงจะโต้ตอบ และมันก็ประสบความสำเร็จในเรื่องนี้โดย วิธีการเทคนิคที่เรียกว่า AJAX ซึ่งอาจจะเป็นที่ที่ดีที่สุด อธิบายโดยยกตัวอย่างเช่น แรกให้ฉันไปข้างหน้า และเปิดไฟล์ เรียกว่า quote.php ใน รหัสการกระจายของวันนี้ 

[00:29:53] แล้วให้ฉันทำขออภัย symbol-- ให้ฉันทำสัญลักษณ์ = GOOG เพียงหุ้นบางส่วน หรือที่จริงขอทำ จาก Pset ฟรี เข้าสู่ 

[00:30:05] และตอนนี้สังเกตเห็นสิ่งที่ฉันได้รับกลับมา ดังนั้นนี่คือจริงๆ สั้นไฟล์ PHP ที่ฉัน เขียนว่าเพียงแค่ยืมรหัส จากฟังก์ชันการค้นหา Pset7 ของ และถ่มน้ำลายออกมาโดยใช้วงเล็บปีกกานี้และ ราคาและสัญกรณ์ลำไส้ใหญ่เห็นได้ชัด ราคาหุ้นปัจจุบันสำหรับ บริษัท ที่คุณส่งผ่านทางได้รับ ดังนั้นนี่คือที่แตกต่างกัน จากส่วนใหญ่ของสิ่งที่เราได้ ทำในหนังสือผมว่า แท้จริงคายออก สิ่งที่ดูเหมือนว่ารหัส JavaScript 

[00:30:27] ในความเป็นจริงนี้เป็นวัตถุ JavaScript ในความเป็นจริงเพียงเพื่อให้มีความชัดเจนมากขึ้น วัตถุ JavaScript สัญลักษณ์โดย JSON-- เป็นเพียงวิธีที่จินตนาการของบอกว่าคุณ สามารถแสดงข้อมูลใน JavaScript มาก เช่นเดียวกับที่คุณสามารถใน PHP โดยใช้คู่ค่าที่สำคัญ ดังนั้นถ้าผมต้องการที่จะประกาศ ตัวแปรใน JavaScript เพื่อแสดงให้เห็นถึง Zamyla สำหรับ instance-- struct สำหรับ Zamyla-- และเราจะเรียกมันว่า นักเรียนตัวแปรนี้ ID ของเธอเป็นหนึ่งในบ้านเป็น วินและชื่อเป็น Zamyla 

[00:30:53] แต่ผมยังสามารถมีอาร์เรย์ของว​​ัตถุ ดังนั้นหากที่จริงผมอยากจะมี อาร์เรย์ใน JavaScript ที่มี วัตถุดังกล่าวหลายนี้ เวลาที่เป็นตัวแทนของพนักงาน ผมอาจจะมีทั้งสาม ชิ้นของรหัสกลับ การสำรองข้อมูลการสำรองข้อมูลเหล่านี้ สามอดีตสมาชิกในทีมงาน ดังนั้นไวยากรณ์สวย คล้ายกับ both-- กับ PHP แต่นี้เป็นโดยเฉพาะอย่างยิ่ง JavaScript มันเป็นสัญกรณ์วัตถุ ดังนั้นสิ่งนี้มีประโยชน์หรือไม่? 

[00:31:17] ถ้าผมเขียนโค้ดที่ถ่มน้ำลายออกมา JSON-- วัตถุ JavaScript สัญลักษณ์โดยสิ่งที่ ลักษณะเช่นนี้หรือสิ่งที่ ดูเหมือนว่าโครงสร้าง Zamyla ของ ที่จริงผมสามารถใช้นี้ ในโปรแกรมที่ผมเขียน ให้ฉันไป ajax0.html และนี่ too-- ไม่มาก คิดว่าให้ความสวยงาม แต่ดูสิ่งที่เกิดขึ้น 

[00:31:34] ให้ฉันไปข้างหน้าและพิมพ์ฟรีที่นี่ คลิกที่ได้รับใบเสนอราคา และขอให้สังเกต URL ที่ไม่ได้เปลี่ยนแปลง แต่ฉันไม่ได้รับป๊อปขึ้นมาพร้อมกับเห็นได้ชัด เงินของราคาหุ้นในปัจจุบันของ $ 0.15 จึงไม่สิ่งที่ไม่ดี แต่ความแตกต่างก็คือว่าอย่างใด ข้อมูลเหล่านี้กลับมาที่ผมโดยตรง แต่ขอใช้ขั้นตอนต่อ สิ่งที่คุ้นเคยมากขึ้น หนึ่งในรุ่นนี้ให้ฉัน พิมพ์ฟรีอีกครั้งคลิกรับใบเสนอราคา, และ now-- โอ้นี้คือ จริงรุ่น jQuery เพื่อให้ me-- ฉันไม่ได้ อย่างรวดเร็วไปข้างหน้าค่อนข้างไกลพอ ให้ฉันไปถึงสองรุ่น ซึ่งเป็นที่ที่ฉันต้องการ ขอให้สังเกตสิ่งที่ฉันได้ทำที่นี่ ผมมีเว็บ Page-- ซุปเปอร์ รุ่นที่เรียบง่ายของหน้าเว็บใด ๆ คุณอาจใช้วันนี้กับช่องข้อความ ที่นี่ฟรีแล้วเห็นได้ชัดเพียง ข้อความ 

[00:32:14] นี้ไม่ได้รูปแบบที่นี่เห็นได้ชัด แต่ถ้าฉันคลิกรับ อ้างสังเกตเห็นหน้าเว็บของฉัน เป็นเรื่องเกี่ยวกับการเปลี่ยนแปลงว่าผม เพียงแค่มีข้อความโต้ตอบแบบทันทีใหม่ หรือว่าผมเพิ่งย้าย แผนที่และต้องการที่จะได้รับข้อมูลเพิ่มเติม เพิ่มแบบไดนามิกไปยังหน้าเว็บ โดยไม่ต้องเปลี่ยน URL และผู้ใช้ ประสบการณ์การขัดจังหวะ อันที่จริงฉันยังคงที่ ที่แน่นอน ajax2.html กิจกรรมดังนั้นเล็กน้อยเดียวกัน 

[00:32:35] เพื่อให้ดูเฉพาะในตัวอย่างนี้ และดูว่านี้เกิดขึ้น ให้ฉันเข้าไป ajax2.html และสังเกตเห็นรูปแบบเป็นครั้งแรก 

[00:32:44] ลงที่นี่ผมเปลี่ยน ออกรถยนต์ที่สมบูรณ์ บางครั้งจะได้รับ ที่น่ารำคาญถ้าเบราว์เซอร์ พยายามที่จะแสดงให้เห็นว่า ประวัติความเป็นมาของคุณ เพื่อให้คุณสามารถทำมันได้ในรูปแบบ HTML โดย เพียงแค่บอกว่ารถยนต์ที่สมบูรณ์ออก 

[00:32:53] ฉันได้รับช่องข้อความนี้ symbol-- ค่อนข้าง ID ของสัญลักษณ์ และตอนนี้เป็นคุณลักษณะที่น่าสนใจ เรายังไม่ได้พูดคุยเกี่ยวกับช่วง แต่คุณสามารถคิดเกี่ยวกับมัน เช่นแท็กวรรคหรือแท็ก div มันเป็นสิ่งที่เรียกว่า ในบรรทัดองค์ประกอบซึ่ง หมายความว่าคุณจะไม่ได้รับวรรค ทำลายบนและด้านล่างมัน มันก็จะอยู่ในบรรทัดโดยไม่ต้อง ตีเทียบเท่ากับการป้อน ดังนั้นผมจึงได้ให้ก้อน html นี้ จะถูกกำหนดระบุที่ไม่ซ้ำ ที่ฉันพลเรียกว่าราคา และฉันมีปุ่มส่ง 

[00:33:21] เพราะตอนนี้ขึ้นตรงนี้และนี่คือ รหัสว่าน้อยจริงที่น่าตื่นตาตื่นใจสุด คุณสามารถเขียนที่จะทำ ค่อนข้างเรียบร้อย things-- สังเกตเห็นสิ่งที่ฉันได้ทำขึ้นที่นี่ถ้าฉัน เลื่อนขึ้นไปยังส่วนหัวของหน้านี้ เราได้รวมตัวครั้งแรกใน หัวของฉันแท็กสคริปต์ ที่จริงอ้างอิง JavaScript ไฟล์อื่น ๆ นี้มาจากองค์กร ที่เขียน jQuery, และนี่เป็นเพียงการให้คุณใหม่ล่าสุด รุ่นของห้องสมุด jQuery ของพวกเขา 

[00:33:42] ดังนั้นนี่คือชนิดเช่นคมชัด รวมถึงใน C หรือต้องมีใน PHP คุณสามารถใช้แท็กสคริปต์ มีแหล่งที่มาแอตทริบิวต์ แต่ตอนนี้รหัสของฉันเอง จะเป็นสิทธิในการที่นี่ 

[00:33:52] ขอให้สังเกตผมมีฟังก์ชันที่เรียกว่าคำคม และมันก็ดูเล็ก ๆ น้อย ๆ ความลับได้อย่างรวดเร็วก่อน แต่ขอแซวนี้นอกเหนือ ให้ฉัน URL ตัวแปรที่เรียกว่า กำหนดตัวอักษรสายนี้ ดังนั้นราคาเดียวราคาคู่ใน จาวาสคริปต์เพียงแค่ให้ฉันสตริง อะไรบวกทำอย่างไร concatenation 

[00:34:08] ดังนั้นในตอนนี้เป็นไวยากรณ์ jQuery ซึ่งจะใช้เวลาเล็กน้อยรับใช้ แต่เพียงแค่นี้หมายถึงการไปรับฉัน DOM โหนดที่ระบุเป็นสัญลักษณ์ที่เป็นเอกลักษณ์ hashtag มีหมายความว่า สัญลักษณ์ระบุที่ไม่ซ้ำ 

[00:34:21] เครื่องหมายดอลลาร์ใน วงเล็บหมายถึงเพียงแค่ห่อนี้ ใน jQuery การเรียงลำดับของซอสลับเพื่อ คุณจะได้รับฟังก์ชันการทำงานเพิ่มเติม แล้ว .val เห็นได้ชัด ฟังก์ชั่นหรือที่เราพูดตอนนี้ วิธีการภายในของโหนดนี้ ที่เพิ่งให้ค่า ดังนั้นในระยะสั้นน่าเกลียดและสับสน เช่นนี้ดูเหมือนได้อย่างรวดเร็วก่อน นี้ก็หมายความว่าได้รับกับผู้ใช้พิมพ์ ในใส่ไว้ที่ท้ายสตริง โดยเชื่อมโยงมัน นั่นคือทั้งหมดที่ 

[00:34:43] ดังนั้นตอนนี้สามบรรทัดสุดท้าย คุณสามารถบีบมาก ฟังก์ชั่นออกมาจากสามบรรทัด เครื่องหมายดอลลาร์นี้เป็น กันเป็นเพียงชื่อเล่น สำหรับตัวแปรทั่วโลกพิเศษ ที่เรียกว่าอักษร jQuery 

[00:34:55] เครื่องหมายดอลลาร์เพียงแค่ดูดี ดังนั้นชุมชน jQuery เพียงชนิด ของใช้มันเป็นสัญลักษณ์พิเศษของพวกเขา มันไม่ได้หมายความว่ามันหมายถึงใน PHP ใน JavaScript, เครื่องหมายดอลลาร์เป็น เช่นเดียวกับตัวอักษร หรือจำนวนของตัวแปร 

[00:35:07] คุณก็สามารถมีมันเป็นชื่อที่ เพียงแค่ดูดี ดังนั้นชุมชน นำมาใช้เป็นชื่อเล่น สำหรับห้องสมุดของตัวเองที่เรียกว่า jQuery 

[00:35:13] และมันก็เป็นที่นิยมสุด เพื่อให้ได้รับ JSON เป็นว่าที่ เป็นหน้าที่ที่ folks ที่ jQuery เขียน ที่ได้รับจาก JSON server-- JavaScript Object สัญลักษณ์ จากสิ่งที่ URL ที่เป็นมันไป เพื่อให้ได้ข้อมูลที่? เห็นได้ชัดจาก URL ที่นี่ 

[00:35:27] และสิ่งที่เบราว์เซอร์ควรทำตามที่ เร็วที่สุดเท่าที่จะได้รับการตอบสนองนี้กลับ? และนี่คือความมหัศจรรย์ของ AJAX เพื่อที่จะ speak-- Asynchronous JavaScript ในรูปแบบ XML มันยากที่จะมองเห็นได้ด้วยเช่น ตัวอย่างง่ายๆที่เรามีที่นี่ 

[00:35:41] แต่นี่เป็นไม่ตรงกันใน รู้สึกว่ารหัสของฉันเมื่อ ดำเนินการส่งข้อความไปยัง เซิร์ฟเวอร์ที่จะไปรับฉันบาง JSON และมันเกิดขึ้นเร็วสุด ที่ผมได้รับการตอบสนอง แต่สิ่งที่น่าสนใจคือที่นี้ บรรทัดของรหัสไม่ได้แขวนเครื่องคอมพิวเตอร์ของฉัน 

[00:35:55] ผมไม่ได้เห็นไอคอนหมุน ผมไม่ได้สูญเสีย ความสามารถในการเลื่อนเมาส์ของฉัน เบราว์เซอร์ของฉันเป็นจริงสมบูรณ์ดี 

[00:36:01] เพราะวิธีการใช้งาน JavaScript จัดการ ตอบสนองจากเซิร์ฟเวอร์มีดังนี้ คุณลงทะเบียนสิ่งที่คุณต้องการเรียก ฟังก์ชันโทรกลับที่ ก็หมายความว่าเฮ้, JavaScript ทันทีที่เซิร์ฟเวอร์ ตอบสนองกับ JSON, กรุณาโทรฟังก์ชั่นที่ไม่ระบุชื่อ 

[00:36:18] และโปรดผ่านเข้ามาในฟังก์ชั่นนี้ สิ่งที่สตริงเซิร์ฟเวอร์คายออก เป็นอาร์กิวเมนต์เรียกข้อมูล ดังนั้นในคำอื่น ๆ หาก ฉันประกอบแบบไดนามิก quote.php URL ที่ผ่านในนี้ สัญลักษณ์เช่นฟรีหรือ GOOG หรือ whatnot, ฉันบอกแล้ว JavaScript ไปได้รับ URL ที่ โปรดจำไว้ว่าเบราว์เซอร์ กำลังจะกลับมาบางสิ่งบางอย่าง ที่มีลักษณะเหมือนที่เราเห็น earlier-- นี้ 

[00:36:42] และสิ่งที่เป็นอาร์กิวเมนต์ที่สอง ที่นี่เพื่อรับ JSON จะพูด มีการเรียกใช้ฟังก์ชันนี้ เมื่อเซิร์ฟเวอร์ที่ได้รับกลับมา ไม่ว่าจะเป็น 10 มิลลิวินาที จากนี้หรือ 10 วินาทีต่อจากนี้ และทันทีที่คุณทำ เพิ่มราคาไปยังหน้า รูปแบบนี้ที่นี่เพียง หมายถึงการไปรับโหนด จากต้นไม้ที่มีการระบุที่ไม่ซ้ำ เป็น price-- ช่วงที่เราเห็นก่อนหน้านี้ว่า 

[00:37:01] วิธีการที่เรียกว่า HTML นี้ เพียงแค่บอกว่าให้ไปแทนที่ HTML ที่นั่นกับ data.price อะไร data.price คืออะไร? ดีเบราว์เซอร์, จำ แสดงให้เห็นว่าฉันนี้กลับมา ดังนั้นนี่คือข้อมูล 

[00:37:14] และดังนั้นจึงเป็นเรื่องที่เป็นความลับเล็ก ๆ น้อย ๆ จะเห็นเครื่องหมายจุลภาคที่นี่ แต่ในความเป็นจริงให้ฉันทำเช่นนี้ ผมขอเพียงแค่วางนี้ รวดเร็วจริงเป็น Gedit และแสดงนี้เหมือนอย่างที่เราแสดงให้เห็นว่า โครงสร้าง Zamyla ก่อนหน้านี้ 

[00:37:27] สิ่งที่เซิร์ฟเวอร์จะส่งกลับเป็น วัตถุเล็ก ๆ น้อย ๆ ที่มีลักษณะเช่นนี้ และเพื่อให้เป็น data.price เพียงแค่ให้ฉัน 0.1515 ดังนั้นจำนวนมากในการเคลื่อนย้าย ส่วนที่นี่ทั้งหมดในครั้งเดียว 

[00:37:39] แต่ประเด็นสำคัญคือ ว่าเรามีความสามารถนี้ เพื่อให้ HTTP เพิ่มเติม การร้องขอโดยใช้ JavaScript โดยไม่ต้องโหลดหน้าเว็บ และจากนั้นเราสามารถทำได้จริง เปลี่ยนหน้าเว็บได้ทันที และปรากฎว่า JavaScript และภาษาอื่น ๆ สามารถใช้ในขณะนี้ไม่เพียง การกลายพันธุ์หน้าเว็บ แต่ที่จริงเขียนซอฟต์แวร์ ในคอมพิวเตอร์ที่เกิดขึ้นจริง ไม่ได้ จำกัด อยู่เพียงการ Chrome หรือเหมือน 

[00:38:00] ในความเป็นจริงใดถ้าโคลทันคุณจะ ชอบที่จะเข้าร่วมกับเรากลับมาที่นี่ ด้วยรหัสห้องปฏิบัติการของคุณและช้างเช่นกัน? ลองไปข้างหน้ามีการพูดคุยเกี่ยวกับ ฟังก์ชั่นไม่ระบุชื่อและเรียกกลับ และจริงๆล่อใจชะตากรรมที่นี่ มีการสาธิตสดที่มีเลือดออก เทคโนโลยีที่ทันสมัย​​แห่งหนึ่งของ อุปกรณ์เหล่านี้ยอดเคลื่อนไหว ตอนนี้อุปกรณ์นี้เรียกคืน เป็นอุปกรณ์ USB เล็ก ๆ น้อย ๆ รวม that-- ที่ beautiful-- ที่ปลั๊กในพอร์ต USB ของคุณ 

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

[00:38:46] ดังนั้นฉันจึงไม่ใช้เหตุผล แทงในตอนแรกนี้หรือไม่? และให้ไปข้างหน้าและโยน คุณขึ้นอยู่กับค่าใช้จ่ายที่นี่ ดังนั้นขอใส่แล็ปท็อปของโคลตันขึ้นที่นี่ เราได้มีแอนดรูในทีวี และสิ่งที่คุณอยากให้ผมทำครั้งแรก? 

[00:39:00] COLTON: ไปข้างหน้าและเพียงแค่ เอามือของคุณผ่านผู้ชายคนนี้ และคุณจะเห็นแววบางอย่างที่เหลือเชื่อ 

[00:39:04] เดวิดเจลัน: ดีมาก นี่คือทั้งหมดที่เกิดขึ้นในเวลาจริง ตกลง ขวาทั้งหมดครับ ให้ดี สิทธิทั้งหมดว่าอะไรที่เราจะทำอย่างไร 

[00:39:15] COLTON: ไปที่หน้าจอถัดไปและดู 

[00:39:17] เดวิดเจลัน: ทั้งหมดขวา 

[00:39:19] COLTON: เป็นเกมที่สนุก ๆ ที่คุณได้รับที่จะทำให้หุ่นยนต์ 

[00:39:21] เดวิดเจลันสิทธิทั้งหมดดังนั้นนี้ เป็นมือปลอมแสดงให้ฉันว่าจะทำอย่างไร COLTON: ใช่ดังนั้นไปข้างหน้า และคว้าหนึ่งของบล็อก และวางไว้ที่ด้านบนของร่างกายของหุ่นยนต์ที่ เดวิดเจลัน: โอ้มีมือของฉัน โอ้ ตกลงที่น่ารัก รอสักครู่ตกลง มีที่เราจะไป 

[00:39:41] COLTON: ฉันทำอย่างใดอย่างหนึ่งในการเกิดอุบัติเหตุ 

[00:39:43] เดวิดเจลัน: ตกลงฉันจะได้รับผู้ชายคนนี้ ประณามมัน! เมื่อเรากำลังฝึกซ้อมที่ผ่านมา คืนคุณรู้ว่าสิ่งนี้ตกทอดเป็น? 

[00:39:51] เช่นนี้ ตกลง อย่างใดอย่างหนึ่งต่อไปหรือไม่ 

[00:39:55] COLTON: แน่นอน 

[00:39:56] เดวิดเจลัน: ทั้งหมดขวา และมีที่สาม สิทธิ์ทั้งหมด COLTON: และในนี้คุณจะได้รับ to-- เดวิดเจลัน: โอ้ หนึ่งที่สวยงามนี้ COLTON: --yeah เลือกนอกเหนือดอกไม้นี้ เดวิดเจลัน: OK ไม่มี? ที่ไม่ได้รับ 

[00:40:14] COLTON: โอ้มีคุณไป 

[00:40:15] เดวิดเจลันโอ้ดูว่า ดีมาก ดีทำไมไม่ 'ที่เราใช้ หนึ่งอาสาสมัครที่นี่ ที่ต้องการที่จะมาขึ้น วิธีการเกี่ยวกับสิทธิที่มี สีเขียว, มันคืออะไร? 

[00:40:27] สิทธิทั้งหมดและขอ have-- แทนการทำที่บางส่วนของคุณ อาจจะรู้ว่าเกมนี้ตรงนี้ ตัดเชือกบางที? ลองมาดูกัน เรามีแว่นตาของเราในช่วงที่นี่? 

[00:40:37] ตกลง ขอบคุณ คุณชื่ออะไร? 

[00:40:39] ผู้ชม: ลอร่า 

[00:40:40] เดวิดเจลัน: ลอร่า? ดีที่จะเห็น หากคุณไม่ทราบวาง Google แก้วกว่าแว่นตาของคุณ นี่คือโคลทัน 

[00:40:46] COLTON: สวัสดี ยินดีที่ได้พบคุณ 

[00:40:48] เดวิดเจลัน: ตกลงมาในรอบ สิทธิทั้งหมดดังนั้นสิ่งที่คุณกำลังจะไป ทำที่นี่มีการเล่นแบบนี้มาก่อน จะใส่มือของคุณผ่าน เคลื่อนไหว Leap ที่นี่ และตอนนี้ลูกศรของคุณควรย้าย โอ้ Nope 

[00:40:57] ผู้ชม: ครั้ง 

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

[00:41:06] เพื่อเลื่อนไปเล่น และเพียงแค่หนึ่งนิ้วเป็นเรื่องปกติ และตอนนี้คลิกที่เล็ก ๆ น้อย ๆ คนที่แต่งตัวประหลาดสีเขียวด้านซ้าย และตอนนี้ค้างไว้จนกว่ามันเติมขึ้นสีเขียว ดี ตอนนี้เหมือนระดับหนึ่งขึ้นด้านบน 

[00:41:16] ผู้ชม: ใช่เราต้องการระดับหนึ่งที่นี่ 

[00:41:20] เดวิดเจลัน: ดี ตกลงดังนั้นสิ่งที่คุณมี ทำคือการตัดเชือก เคอร์เซอร์ของคุณเป็นสีขาวลงไปที่นั่น 

[00:41:28] ดีมาก สิทธิทั้งหมดมันเป็นเรื่องยากที่จะได้รับ ดังนั้นค้างไว้ที่นิ้วของคุณผ่านทางต่อไปนี้ ดี อันนี้เป็นเรื่องยาก 

[00:41:39] ผู้ชม: โอ้อึ ตกลง ก็ต้องการที่จะไปทางนั้น โอ้อึ that-- 

[00:41:44] เดวิดเจลัน: ใช่ เป้าหมายรองคือการได้รับดาวทั้งหมด สิทธิทั้งหมดต่อไป 

[00:41:53] ลองดูว่าคุณจะได้รับนี้หนึ่งในสาม ดี ตกลงไปที่นั่น 

[00:42:06] แน่ใจ โอ้ดีมาก สิทธิ์ทั้งหมด 

[00:42:11] ดังนั้นทำไมเราไม่เลื่อนนี่ในวันนี้? ให้ใครมาขึ้นที่อยากจะเล่น ขอบคุณมากที่ลอร่าอาสาสมัครของเรา และเราจะเห็นคุณในวันจันทร์ที่ 

[00:42:18] ผู้ชม: คุณอาจต้องการเหล่านี้กลับ 

[00:42:21] ลำโพง 2: ที่ CS50-- ต่อไป