>> [მუსიკის დაკვრა]
>> დავით Malan: ეს არის CS50.
ეს არის დაწყების კვირაში ცხრა.
და ეს არის, თუ რა უნდა ყოფილა ბატონი Boole დაბადების 200 დაბადების დღე.
ასე რომ, ეს არის სტიპენდიანტები ვისაც ჩვენ უკვე მიანიშნა,
საკმაოდ გარკვეული ჯერ გამოყენების შესახებ ლოგიკური ცვლადები ჭეშმარიტი და ყალბი,
1 და 0 და ასეთი.
და ეს იყო Google ხარკი მას დღეს.
იგი არ აღმოჩნდა 200.
ასე რომ, თუ გსურთ, რომ შემოგვიერთდით CS50 ლანჩი,
შევხედოთ ბმული რა თქმა უნდა, მისი ნახვა.
და ასეთი სახეები და მეგობრებს, როგორც ამ დაელოდება თქვენ აქ კემბრიჯში.
სახეები, ისევე როგორც ეს გელოდებათ New Haven.
და, ფაქტობრივად, კენ New Haven იზრუნა
რასაც ანიმაციური GIF ელის აქ ბოლო lunch-- GIF ჯერ კიდევ არ არის
სხვა გრაფიკული ფაილის ფორმატი, რომლითაც თქვენ ნაცნობი, რომ
გამოიყურება პატარა რაღაც მსგავსი.
ასე რომ, უბრალოდ თანმიმდევრობა of-- OK.
აქ არავის კემბრიჯის იცინის.
მაგრამ New Haven, ამ მართლაც სასაცილოა, არა?
ყველა უფლება.
>> ასე რომ შემოგვიერთდნენ არსებობს.
აქ ჰარვარდის, კერძოდ, ამ ოთხშაბათს,
თუ თქვენ მეორე და პირველკურსელთა even-- ან თუნდაც junior-- ფიქრი მიღების
შეცვლა კომპიუტერის მეცნიერების, ვიცი, რომ იქ
იყოს, CS საკონსულტაციო სამართლიანი ოთხშაბათი, ცოტა ხნის შემდეგ კლასი
at 4:00 PM კომპიუტერულ მეცნიერების შენობა Maxwell Dworkin.
ჩვენ დააყენა ეს, რა თქმა უნდა ვებ-გვერდზე ხვალ, ისევე.
Donuts, მე განუცხადა, მოემსახურება.
>> ყველა უფლება.
ასე რომ, სასაცილო story-- მე გააღიზიანოს გარშემო ინტერნეტში,
და მივხვდი, რაღაც ძველი არქივები ჩემი ყოფილი საიტზე.
და თურმე out-- გარშემო დრო, როგორც ჩანს, ძალიან დროული
მას შემდეგ, რაც მე იკრიბებიან, რომ UC არჩევნები დაახლოებით გადაცემათა up ერთხელ.
ასე რომ, მე გაიქცა UC დაკარგა, სავალალოდ.
და იქნებ ეს იყო ნაწილი, რატომ.
ასე რომ, ეს იყო ჩემი ნახვა იმ დროს.
გარკვეული მიზეზების გამო, ვფიქრობდი, ეს იყო კარგი იდეა, ადრე ვეუბნებოდი ხალხს
რა ჩემი პლატფორმა და რატომ უნდა მისცეს ხმა ჩემთვის, რომ მათ აქვთ
დაუწკაპუნეთ გასარკვევად, რომ ინფორმაცია, რომელიც ამ დროის არის
სახის creepy.
მე ნამდვილად არ ვიცი, რა იყო.
>> მაგრამ ეს, რა თქმა უნდა არ დაეხმაროს ჩემი კამპანია.
მე ასევე დაადგინა, რომ უფროსი წლამდე მქონდა ამ Muppet კალენდარი.
Muppets იყო სახის in Vogue მაშინ.
ან იქნებ ისინი არ იყვნენ.
მე მქონდა Muppet კალენდარი მაშინ.
და მე ჩავთვალე მინდა იყოს მაგარი სახელი ჩემი კომპიუტერი ჰარვარდის ქსელში
frogman.student.harvard.edu.
ამავე დროს, ჩვენ ყველანი ცალსახად იდენტიფიცირებადი მასპინძელი სახელები.
თქვენ შეიძლება აირჩიოს გარკვეული ამაოა სახელის ნაცვლად საკუთარი სახელი.
და მივედი frogman რატომღაც.
>> და მერე started-- გავატარე ბევრი დროის დაჭერით მეშვეობით ამ კავშირების
ამ დილით.
და ეს იყო ჩემი შესახებ გვერდზე, რომელიც ახლა ჩანს, როგორც adorable.
მაგრამ ის ასევე ადასტურებს, რომ მხოლოდ რამდენად შორს ტექნოლოგია დადგა.
ვგულისხმობ, რომ უკან დღეს, 486 იყო რაღაც.
ამ დღეებში, ეს არის სუპერ, სუპერ, სუპერ ნელი და კარგად ნაკლები
ვიდრე თქვენ შეიძლება ჰქონდეს თქვენს საკუთარი ჯიბეები ამ დღეებში.
არსებობს უფრო, რომ კიდევ უფრო უხერხულ.
ასე რომ, მე დატოვოს ის, რომ.
მაგრამ ეს იყო ჩემი პირველი ნაბიჯი web-- ო, არა.
ეს არ იყო.
ჩემი პირველი რეალური ნაბიჯი ვებ პროგრამირების იყო ამ საიტზე, რომელიც უბრალოდ დაავიწყდა.
რაღაც მომენტში, გავიგე, როგორ უნდა რათა განმეორებითი ფონზე images.
და ასე რომ მე ეს tiling ეფექტური, ისევე როგორც ჰოკეის მოთამაშე, ფეხბურთი, და გოლფის
ბურთი, ან რასაც არ არის იმ Frosh მესიჯები ნახვა.
და ეს იყო, ფაქტობრივად, ნამდვილად პირველი ვებ დაფუძნებული პროექტის მე მივიღე on--
ვფიქრობ, იქნებ მეორე წელს, უმცროსი წლამდე
მიღების შემდეგ CS50 და CS51, ერთი საერთო შემდგომი კლასი.
შევნიშნე ეძებს მეშვეობით არქივში
რომ ჩემი ერთ-ერთი მემკვიდრე და მეგობრები, Lee, სახის შეიცვალა
საავტორო თავს.
მაგრამ ეს იყო მართლაც რაღაც რომ მე უნდა ფლობდეს არეულობის.
მაგრამ იმ დროს, ამ იყო პირველი ნახვა,
როგორც ვთქვი, რამდენიმე კვირის წინ, რომლითაც ახალბედა შეეძლო
რეგისტრაცია intramural სპორტული აქ.
ასე რომ, გამოდის, ამ ფონზე სურათები
მინდა, რომ არ არის ისეთი კარგი იდეა.
მაგრამ ინტერნეტში იყო ახალი, და ჩვენ ყველა ექსპერიმენტებს.
და ეს არის ის, რაც მე როგორც ჩანს გააკეთა დროს.
ყველა უფლება.
ასე გარეშე ado, ჩვენ გადავიდეს ემზადება დღეს, რათა თქვენ, მართლაც,
საბოლოო ნაჭერი, რომ თქვენ შეიძლება განსაკუთრებით სასარგებლოა საბოლოო პროექტები
არამედ ის, რომ დაიწყება იმისათვის, რომ მთელი მსოფლიო ქსელში
თავს ცოტა უფრო გასაგები.
მართლაც, ჩვენ ვაპირებთ დანერგვა კიდევ ერთი პროგრამირების ენა
მოუწოდა JavaScript, რომ მსგავსი და სხვადასხვა სხვადასხვა გზები
საწყისი ენებზე ჩვენ შევხედე დღემდე.
>> ასე რომ, C, გავიხსენოთ, ამ შედგენილი ენაზე.
თქვენ მოხვდით გაუშვით მეშვეობით შემდგენელი.
თქვენ მიიღებთ კოდის გააპროტესტებენ კოდი, ან ნული და პირობა.
და ეს არის ნული და პირობა, რომ თქვენი CPU, ცენტრალური გენერაციის ერთეულის,
რეალურად მესმის.
PHP განსხვავებით, არ არის შედგენილი ენაზე.
ეს რა არის?
ეს არის გაგებული ენის.
ასე რომ ზოგიერთი პროგრამა თარჯიმანი, რომ
აქვს წაკითხვის it-- დაბრუნება უნდა ქვედა, მარცხნიდან right--
და გაერკვნენ, რა ყველა თქვენი სინტაქსი აკეთებს და იმას ნიშნავს,
თუ არა ეს მარყუჟი ან მდგომარეობა ან ნებისმიერი სხვა რაოდენობის პროგრამირების
აშენებს.
ასე რომ, გაგებული ენის.
>> ამის შემდეგ ჩვენ გააცნო HTML.
და HTML არ არის კიდევ პროგრამირების ენაზე.
გვსურს ეძახით რა?
Markup ენის, რომელიც მხოლოდ ერთგვარი ლამაზი გზა ამბობდა ის
არ აქვს პროგრამირების აშენებს მოსწონს ჩვენ ვნახეთ, მაშინაც კი, დღეს Scratch.
არ არსებობს მარყუჟების.
არანაირი პირობა არ არსებობს.
ეს მართლაც ენის შესახებ მარკირების თქვენი მონაცემები
და ფორმატირება ის ან სტრუქტურირებას რამდენიმე გზა.
>> CSS, იმავდროულად, ასეთივე არ არის პროგრამირების ენა.
ეს კი უფრო ესთეტიურად ორიენტირებული.
და ეს გაძლევთ საშუალებას დაალაგოთ სრულყოფილი რამ, როგორიცაა შრიფტის ზომის და ფერები
და განთავსებისა და ყველა რომ.
მაშინ ჩვენ გვქონდა
>> SQL.
ასე რომ, SQL მართლაც პროგრამირების ენის გარკვეული აზრით,
თუმცა მორგებული კონკრეტულად ბაზაში.
მიუხედავად იმისა, რომ ჩვენ მხოლოდ წარმოგიდგინოთ აირჩიეთ და ჩადეთ და წაშლა, განახლება და
და რამდენიმე სხვები, გამოდის, თქვენ შეგიძლიათ რეალურად
ჩაწერის ფუნქცია ან პროცედურები, რადგან ისინი
მოუწოდა, SQL, რომ გამოიყურებოდეს და იმოქმედოს საკმაოდ მოსწონს PHP და C ფუნქციები.
ასე რომ, იცით, რომ ისინი არსებობს.
მაგრამ ჩვენ კი არ გადაიტვირთოთ მათთან როგორც ჩვენ მხოლოდ ზედაპირს აქ.
და მაშინ JavaScript, ბოლო ჩვენი ენებზე ოფიციალურად წარუდგინა.
ასე რომ, JavaScript, ძალიან, გაგებული ენის.
და ვინც იცნობს, ნუ გსურთ განასხვავებს მას
ზოგიერთი დამახასიათებელი როგორც C და PHP?
რა ხდის სხვადასხვა?
>> აუდიტორია: ეს არ არის შედგენილი.
>> დავით Malan: ამბობენ, რომ კიდევ ერთხელ?
>> აუდიტორია: ეს არ არის შედგენილი.
>> დავით Malan: ეს არ არის შედგენილი.
ასე რომ, ეს, ძალიან, არის გაგებული.
ასე რომ, ეს არ არის შედგენილი.
მაგრამ, რაც მას პატარა, როგორც PHP.
მაგრამ მაინც განსხვავდება PHP ზოგიერთ ნათელი გზა,
მინიმუმ გზა ჩვენ ვიყენებთ მას.
ჰო?
>> აუდიტორია: ეს გადის კლიენტის მხარეს.
>> დავით Malan: ეს გადის კლიენტის მხარეს, როგორც წესი.
ეს მართლაც განმასხვავებელი დამახასიათებელია ჩვენთვის ახლავე.
C იყო სერვერული იმ გაგებით, რომ ჩვენ გავაკეთეთ ყველაფერი CS50 IDE.
PHP დღემდე სერვერული იმდენად, რამდენადაც
როგორც ეს, ძალიან, იღებს interpreted-- არ არის შედგენილი, მაგრამ interpreted--
შიგნით CS50 IDE, რომელიც რა თქმა უნდა მხოლოდ სერვერზე, ან სერვერებზე ღრუბელი.
>> მაგრამ JavaScript, მაშინაც კი, მიუხედავად იმისა, რომ თქვენ თქვენ აპირებს
დაიწყოს წერა, რომ, ვთქვათ, pset რვა და შესაძლოა საბოლოო პროექტს თქვენ
აპირებს უფლება მას CS50 IDE და გადარჩენა მას,
ფაილი ფარგლებში CS50 IDE, CS50 IDE და, თავის მხრივ, ღრუბელი სერვერები
რომელსაც ის უმასპინძლა, არ აპირებენ ინტერპრეტაცია და განახორციელოთ თქვენი კოდი.
პირიქით, ის აპირებს გაიგზავნება უცვლელი სახით ქვემოთ ბრაუზერში.
და ეს მაშინ იქნება IE ან Chrome ან Firefox და Safari
ან რასაც, რომ რეალურად ხსნის ის, ზემოდან, მარცხნიდან მარჯვნივ.
ასე რომ, ძირითადი განმასხვავებელი დამახასიათებელი დღეს
ის არის, რომ JavaScript არის კლიენტის მხარეს და PHP, მაგალითად,
უკვე სერვერის მხარეს.
ახლა, ეს საინტერესო შედეგები მოჰყვეს , ისევე, ინტელექტუალური საკუთრების
და რომელსაც შეუძლია რეალურად ნახოთ თქვენი კოდი.
და მართლაც, შეგიძლიათ წასვლა ინტერნეტში და ვხედავ საუკეთესო
რაიმე კოდი, რომელიც ვინმეს აქვს დაწერილი JavaScript.
ზოგჯერ ეს იკითხება, ზოგჯერ ის obfuscated.
მაგრამ უფრო, რომ თავის დროზე.
>> ასე რომ, JavaScript, ლამაზად საკმარისი, სუპერ მსგავსი, სინტაქსურად, რათა C.
და ჰგავს PHP, იქ არ არის მთავარი ფუნქცია.
თუ გსურთ დაიწყოს წერა JavaScript კოდი, როგორც თქვენ დაინახავთ დღეს,
უბრალოდ წერა მას.
მაგრამ ეს, დაინახავთ, განსაკუთრებით სასარგებლო კონტექსტში ვებ ბრაუზერები.
თუმცა, ჩემი პატარა უარყოფა, როგორც წესი, ადრე
იყო იმის თქმა, რომ თქვენ უფრო დღეს გამოყენების JavaScript სერვერული
გამოყენებით ლამაზი ფარგლებში ე.წ. Node.js რომ ზოგიერთი CS50 საკუთარი პროგრამები
იწერება.
შეამოწმეთ 50 რეალურად იყენებს Node.js.
მაგრამ ჩვენ ვაპირებთ ფოკუსირება JavaScript კლიენტის მხარეს აქ out.
>> ასე რომ, აქ არის კომპლექტი პირობები PHP.
უკაცრავად, შიგნით ფაქტობრივად, განაცხადი, ძალიან სწორია.
აქ არის ასევე კომპლექტი პირობები JavaScript.
სინტაქსურად, ეს არის იდენტურია C და PHP.
ბატონი Boole ის გამონათქვამები, ანალოგიურად, სინტაქსურად
იდენტურია ორივე C და PHP.
ჩვენ ასევე გვაქვს კონცენტრატორები JavaScript, რომ გამოიყურება იდენტურია.
ჩვენ გვაქვს ამისთვის მარყუჟების, რომლებიც სტრუქტურა იდენტურია,
ხოლო მარყუჟების, ნუ ხოლო მარყუჟების.
>> ეს ერთი ცოტა განსხვავებული.
PHP ჰქონდა თითოეული მშენებლობა რომ თქვენ შეიძლება იყოს გამოყენებით
ან გამოიყენოთ pset შვიდი, ალბათ.
JavaScript აქვს ეს სპეციალური ვერსია სადაც შენ ფაქტიურად ამბობენ, რომ რაღაც
ისევე როგორც ცვლადი გასაღები ობიექტი, რომელიც არის ძალიან ლაკონური გზა ამბობდა,
თუ მაქვს object-- და ჩვენ ვისაუბროთ ამ ერთხელ ერთი წუთით
და მე მინდა iterate ყველა ერთი გასაღები ღირებულება წყვილი შიგნით,
მე არ უნდა გაერკვნენ, თუ როგორ უნდა რიცხობრივი ინდექსი მათ ნულოვანი, ერთი,
ორი, სამი.
>> შემიძლია სიტყვასიტყვით ამბობენ, რომ ეს.
და თითოეულ iteration, JavaScript ჩემთვის განაახლებს ცვლადი გასაღები
უნდა იყოს პირველი გასაღები, მაშინ მომდევნო გასაღები, მაშინ მომდევნო გასაღები, მაშინ მომდევნო გასაღები,
და სხვ.
და მე შეუძლია მიიღოს მისი მნიშვნელობა მკურნალობის ობიექტის JavaScript, როგორც ვნახავთ,
თითქოს ეს არის ასოციაციურ მასივში PHP.
მართლაც, თუ საბოლოოდ გახვეული თქვენი იბადება გარშემო რა ასოციაციურ მასივში არის
PHP, თქვენ შეგიძლიათ ვფიქრობ, რომ ახლა, როგორც იდენტურია ობიექტი JavaScript.
მაგრამ ეს ცოტა გამარტივება.
>> მასივები გამოიყურება, ლამაზად საკმარისი, იდენტური იმისათვის, რომ PHP გარდა ერთი ხასიათი.
არსებობს ერთი რამ აკლია აქ რომ ჩვენ არ ვხედავთ გასულ კვირას PHP.
რა გამოტოვებული?
ჰო?
არარის დოლარის ნიშანი.
ასე რომ, ჩვენ უკან ნორმალური მსოფლიოში, სადაც
ცვლადები არ აქვს დოლარის ნიშნები.
მაგრამ თქვენ პრეფიქსი მათ ერთად var, როგორც წესი.
და var ნიშნავს ცვლადი.
და ჰგავს PHP არის თავისუფლად typed--, რომლის დროსაც არსებობს სახის,
არსებობს ციფრები და სიმები და მოძრავი და ასე forth--
JavaScript მსგავსად აქვს სახის.
მაგრამ ის თავისუფლად აკრეფილი, რომ ჩვენ, პროგრამისტები არ დავაკონკრეტებ.
ჩვენ უბრალოდ უნდა იცოდეს რომ სხვადასხვა სახის არსებობს.
>> ცვლადები, meanwhile-- აქ არის თუ როგორ ჩვენ შეიძლება განაცხადოს "hello, world"
როგორც სიმებიანი.
გავითვალისწინოთ, რომ ეს იდენტურია PHP მაგრამ არა დოლარის ნიშანი.
და ეს არის ის, რომ ჩვენ დაიწყოს ხედავს უფრო დღეს,
რომლის დროსაც თქვენ გაქვთ ობიექტი ერთად გასაღებები და ღირებულებები.
და თუ გსურთ ცდილობენ უნდა ითქვას, გასულ კვირას
სინტაქსი არის ცოტა განსხვავებული.
მაგრამ ცოტა საღი აზრის შეამოწმოს, თუ რამდენი გასაღებები ამჯამად ეს ობიექტი, როგორც ჩანს, აქვს?
ასე რომ, მე ვხედავ ოთხ.
მე ვხედავ ორი.
>> ასე რომ, რეალურად ორი.
ასე რომ, ეს არის კოლექცია ორი ძირითადი ღირებულების წყვილი.
გასაღები არის სიმბოლო, რომლის მნიშვნელობა FB.
გასაღები არის ფასი, რომლის ღირებულება არის 101,53.
ეს არის ის ორი ძირითადი ღირებულების წყვილი.
და მახსოვს, PHP-- და ეს კიდევ ერთხელ უბრალოდ სახის სინტაქსური განსხვავება.
ეს არ არის ყველა, რომ ინტელექტუალურად საინტერესო.
PHP შეიძლება არ წერია ეს იგივე რაც შემდეგნაირად ციტირებით შეადგენს.
და მე შეცვალოს ეს, რომ კვადრატულ ფრჩხილებში.
და მერე შეიცვალოს ეს ციტირებული სიტყვა "ფასი".
და მერე არ გამოიყენოთ წერტილი.
რა მე გამოიყენოთ გასულ კვირას?
ჰო, თანაბარი ნიშანი arrow ხმაურიანი ნოტაცია.
>> და მაშინ მე იგივე აქ.
იგივე აქ.
და ეს ყველაფერი.
ასე რომ, ეს ჯარიმა, თუ ეს არ არის ნამდვილად ჩაიძირა მეხსიერება მხოლოდ
კიდევ იმიტომ, რომ ეს მართლაც ინტელექტუალურად უინტერესო.
ეს მხოლოდ სინტაქსური განსხვავებები.
მაგრამ იდეები ზუსტად იგივე.
შიგნით ამ ცვლადის ციტირებით JavaScript
არის კოლექცია ძირითადი ღირებულების წყვილი, ერთ-ერთი, რომელიც არის სიმბოლო, რომელთაგან ერთი
არის ფასი.
და მე შეუძლია მიიღოს იმ ფასეულობების შემდეგი სინტაქსი.
ისევე, როგორც PHP, მე ვერ რაღაც მსგავსი მიადევნე
ჩემთვის, რომ ეს ყუთი ოდნავ დიდი.
ისევე, როგორც PHP, მე ვერ რათა ამას oh, dammit.
კარგით.
>> ისევე, როგორც PHP-- OK, ჩვენ გამოგიგზავნით უბრალოდ გამოიყენოთ წამყვანის აღნიშნავს.
ისევე, როგორც PHP, შემიძლია ამის $ პასუხის $ ციტირება ["სიმბოლო"],
და ეს იქნება კიდევ ჩემთვის ღირებულება "სიმბოლო".
ამ JavaScript, ეს იქნება იდენტური, რომლის მე შემიძლია მხოლოდ ამის გაკეთება.
ერთადერთი, რაც არის აკლია არის დოლარის ნიშანი.
>> ასე ლამაზად საკმარისი, მაშინ, არსებობს ყველა, რომ ბევრი ახალი სინტაქსის.
ასე რომ, რა დღეს ჩვენ ფოკუსირება, მართლაც, არის ზოგიერთი იდეები და პროგრამები.
და პირველი ასეთი პროგრამა, რომელიც თქვენ შეიძლება
არ ჩანს, თუ საპირისპირო მხარეს ბურთის შევიდა pset შვიდი უკვე ეს სინტაქსი.
ასე რომ, pset შვიდი, თუ თქვენ მინახავს და არ მინახავს ჯერ,
ვიცი, რომ არის ფაილი რომ ვაძლევთ თქვენ მოუწოდა config.json-- JavaScript
Object ნოტაცია.
რატომ?
ჩვენ გვინდოდა, რომ შეძლებს მოგაწვდით თარგი ზოგიერთი ძირითადი ღირებულების წყვილი.
ჩვენ გვინდოდა, რომ შეძლებს მისცეს სიას მასპინძელი, სახელი სერვერზე.
ჩვენ გვინდოდა, რომ გადმოგცეთ placeholder თქვენი სახელი
და ჩანაცვლების თქვენი პაროლი.
თუ თქვენ არ ხედავს ეს არ არის, რომ არ ინერვიულოთ.
მეტი ამ წელს pset შვიდი [? სპეც. ?] და მაშინ,
ცხადია, ჩვენ გვინდა, რომ თქვენ შევსება to-dos
იმიტომ, რომ როდესაც თქვენ შეხვიდეთ CS50 IDE, თითოეული თქვენგანის
აქვს საკუთარი სახელი და პაროლი.
>> ასე რომ, ჩვენ ვერ მოვისმინეთ გამოიყენება ნახევარი ათეული ან მეტი სხვადასხვა ფორმატის.
ჩვენ შეიძლება არ გამოიყენება .txt ფაილი.
ჩვენ ვერ გამოიყენება CSV ფაილი.
ჩვენ შეგვიძლია უკვე გამოიყენება INI ფაილი, XML ფაილი,
მთელი bunch მეტი ფორმა, რომელიც თქვენ შეიძლება არ ოდესმე მოისმინა.
ეს არის სახის თვითნებური ბოლოს დღის განმავლობაში.
მაგრამ სუპერ პოპულარულია ამ დღეებში არის ტექსტი ფორმატი მოუწოდა JSON-- JavaScript Object
Notation--, რომელიც ასე გამოიყურება.
ეს არის პატარა cryptic, მაგრამ შეამჩნია ნიმუშები.
თქვენ იწყება ღია curly გაუწიოს, და თქვენ დასრულდება იგივე.
შიგნით რომ არის რაღაც.
ეს არის ძირითადი ღირებულების წყვილი.
ასე რომ, ეს არის ობიექტი, რომ მე ვარ ეძებს ეკრანზე აქ
რომ ერთი გასაღები, რომელსაც აქვს ერთი ღირებულება.
და მხოლოდ inferring საფუძველზე წინა ნიმუში, რა არის გასაღები აქ?
მონაცემთა ბაზა, რამ მარცხენა წერტილი.
>> ახლა, ღირებულება ხდება, რომ მრავალჯერადი ხაზები ამ დროს.
მაგრამ ღირებულება იწყება curly გაუწიოს და მთავრდება Curly გაუწიოს.
ასე რომ, რას ვთავაზობ არის ტიპი ღირებულების მონაცემთა ბაზაში?
A ლექსიკონი, ან, უბრალოდ მეტი მოკლედ, ობიექტი.
მარჯვენა?
ეს არის ერთგვარი მონაცემები სტრუქტურა, რომელიც შეგიძლიათ გამოიყენოთ სხვა სტრუქტურების ფარგლებში თავად.
ასე რომ, თუ ეს მთელი რამ ჩვენ მოუწოდებდა object-- და ობიექტი
არის მხოლოდ რამოდენიმე ძირითადი ღირებულების pairs-- ღირებულება ბაზა თავისთავად ობიექტი.
ღირებულება ბაზაში აქვს მთელი bunch გასაღები ღირებულება წყვილი, რომელთაგან პირველი
მასპინძელი, შემდეგ ასახელებს, მაშინ სახელი, მაშინ პაროლი,
თითოეული რომელთა ფასეულობები, იმავდროულად, ის მხოლოდ მოსაწყენი სიმებიანი ორმაგი შეთავაზებები.
>> ასე რომ, მაშინაც კი, თუ ეს არ არის სუპერ ნათელი უბრალოდ არ არის,
ვიცი, რომ ეს არის მხოლოდ სტანდარტული, საკმაოდ მოსაწყენი გზა
შენახვის მონაცემები სტანდარტული ფორმატი.
მაგრამ საერთო შეცდომები შესაძლოა, თუნდაც pset შვიდი,
ცოტა სულელური რამ, როგორიცაა, თუ შემთხვევით გამომრჩეს მძიმით იქ.
რომ აპირებს იწვევს ფაილი არ არის აუცილებელი, რომ იკითხება.
თუ თქვენ შემთხვევით გამომრჩეს რამ, როგორიცაა შეთავაზებები, ის არ აპირებს იყოს იკითხება.
ასე რომ, ეს საკმაოდ nitpicky ფორმატში, მაგრამ ეს ერთი, რომ სუპერ საერთო.
და ჩვენ არ უნდა გამოიყენოს იგი, მიუხედავად იმისა, რომ თქვენ არ გამოიყენოს ნებისმიერი JavaScript, წინააღმდეგ შემთხვევაში,
ამ pset შვიდი.
>> ყველა უფლება.
დაიმახსოვრე ეს სურათი.
ჩვენ ვისაუბრეთ, HTML, რომ კოდი შეიძლება ასე გამოიყურება.
ეს არის HyperText Markup Language [INAUDIBLE] მხოლოდ "hello, world."
მაგრამ მაშინ ჩვენ შემოთავაზებული ხოლო უკან, რომ თუ ეს ეხმარება,
დაგვჭირდება დაიწყოს ფიქრი ამ უკვე, როგორც ხე.
ფაქტობრივად, წანაცვლება, რომ ჩვენ გამოყენება მხოლოდ readability გულისთვის
ან სტილი გულისთვის on მარცხენა შეუძლია სახის
უნდა ითარგმნოს ეს ხე, სადაც თქვენ გვაქვს სპეციალური ძირეული კვანძის, რომ ჩვენ
generically მოუწოდა დოკუმენტი, რომლის ქვემოთ არის ძირეული ელემენტი და tag, HTML,
რომელიც შემდეგ ორი ბავშვები, ხელმძღვანელი და სხეულის.
>> და მაშინ, თავის მხრივ, თავი აქვს სათაური.
და სათაური ტექსტის მნიშვნელობა.
და სხეულის მსგავსად აქვს ტექსტის მნიშვნელობა.
ასე რომ, თუ თქვენ კომფორტულად გამონათქვამი დიახ, თქვენ ვერ მიიღოს ეს HTML
და დავხატოთ სურათი, როგორც ამ, მარჯვენა მხარეს
არის ლამაზი გონებრივი მოდელი, რადგან ახლა რომ ჩვენ გვაქვს JavaScript, პროგრამირების
ენა, რომ ბრაუზერები შეასრულოს და ინტერპრეტაცია თქვენთვის,
გამოდის, რომ ის, რაც ჩვენ შესახებ გავაკეთოთ კოდი
არის დაიწყოს მანიპულირება ამ ხე სტრუქტურა მეხსიერება.
ჩვენ არ უნდა ავაშენოთ ხე მეხსიერებაში.
ჩვენ არ უნდა გავაკეთოთ ერთგვარი pset ხუთ სტილი მონაცემები სტრუქტურა
სირთულის.
ბრაუზერი, ლამაზად საკმარისი, საფუძველზე წერით HTML ზემოდან,
მარცხნივ და მარჯვნივ, არის ფაქტიურად აპირებს გადასცემს ჩვენს ეკვივალენტს მაჩვენებელი
რომ მთელი ხე უფასოდ.
ეს ყველაფერს აკეთებს მუშაობა.
ეს არის ის რაც Mozilla და Apple და სხვები არ გააკეთა ჩვენთვის.
>> და JavaScript მივდივართ შეძლებთ აკონტროლოთ და შეიცვალოს და
საინტერესო რამ რომ ხე, წინააღმდეგ შემთხვევაში, ცნობილი
როგორც DOM და დოკუმენტის ობიექტური მოდელი.
რა სახის რამ?
ისე, გამოდის, რომ JavaScript, იქ
ამ სამრეცხაო სიაში მოვლენები, რომელიც შეიძლება მოხდეს.
ჩვენ ნამდვილად არ გამოიყენება, რომ სიტყვა წლიდან კვირაში ნულოვანი და pset
ნულოვანი, როდესაც ჩვენ ვისაუბრეთ Scratch.
უმეტესობა ალბათ არ გამოიყენოს ღონისძიება თქვენს Scratch პროექტი.
მაგრამ თქვენ ალბათ გახსოვთ მარტივი მარკო პოლო
მაგალითად, როდესაც ჩვენ გვქონდა ორი sprites, რომელთაგან ერთ-ერთი, განაცხადა, მარკო.
სხვა რომელთაგან შემდეგ, საფუძველზე მოსმენის და მოსმენა, რომ ღონისძიება, განაცხადა, Polo.
თუ არა, მოგერიდებათ ვიხსენებთ, რომ შორს უკან.
>> მაგრამ ეს არის მხოლოდ ამბობენ, და შეგიძლიათ სახის
დასკვნის სახელები ამ რამ, JavaScript, თურმე,
აპირებს მოგვცეს გზა, რათა მოვუსმინოთ მაუსის აპირებს ქვემოთ ან მაუსის იზრდებოდა
ან გასაღები მიდის ქვემოთ და გასაღები იზრდებოდა ან onsubmit onselect
ან onresizing რაღაც.
სხვა სიტყვებით, ნებისმიერი ფიზიკური მოქმედება რომ ადამიანის შეუძლია ბრაუზერში
რომ თქვენ ყოველდღე, თქვენ შეგიძლიათ დაწეროთ კოდი, რომელიც უსმენს იმ მოვლენების
და შემდეგ აკეთებს რაიმე შესაბამისი.
>> მაგალითად, თუ თქვენ იყენებთ Google Maps, რა მოხდება, თუ თქვენ დააჭირეთ და ნაბიჯი
მაუსი, როგორც წესი?
თუ თქვენ დაწკაპეთ და გადაიტანეთ?
ჰო?
ზუსტად.
რუკის იწყებს გადავიდეს.
ასე, რომ თქვენ შეგიძლიათ სახის ვხედავ რა არის აქ, რა არის იქ.
და როგორ უყურებს Google განახორციელოს, რომ?
ისე, სავარაუდოდ, ისინი გამოყენებით რამდენიმე ამ ღონისძიების
მსმენელს, ერთი, რომ ამბობს, მოუსმინოს მაუსის
დანგრევა ასე რომ, როდესაც შესახებ ფიზიკურად უბიძგებს მისი trackpad ან მისი მაუსის
ქვემოთ.
და მაშინ ჩვენ ვეძებთ რაღაც მოძრაობა
ან სხვა ღონისძიება, რომელიც საშუალებას გვაძლევს ხელში დასაბამი.
და სინამდვილეში, drag ერთნაირად ამ dot dot dot სია შესაძლო ვარიანტი.
>> ასე რომ, ეს იქნება ძლიერი გზა, რათა დაიწყოს რეაგირების შესახებ
მაშინაც კი, სანამ იგი რეალურად იმოქმედებს რაღაც გამოკვეთილ როგორიცაა წარუდგინოს.
მაგრამ ჩვენ ვაპირებთ დანერგვა რამდენიმე თემა, რომ იქ.
მაგრამ პირველი, მოდით გარდამავალი ზოგიერთი ფაქტობრივი კოდი.
ამიტომ, მე ვაპირებ წასვლა წინ და გახსენით dom-0,
რომელიც არის ძალიან მარტივი მაგალითი აქ თუ ზომით უბრალოდ
აქვს ამ შეყვანის აქ ჩემთვის.
და მე ვაპირებ წავიდეთ წინ და აკრიფოთ "დავითი" ჩემი სახელი და დააჭირეთ Submit.
>> და მაშინ, თუმცა ერთგვარი იაფად, მე აქვს ამ სწრაფი რომ pops up, რომელიც ამბობს,
"hello, დავით!"
ასე რომ, ეს არის ერთგვარი ისევე როგორც ჩვენი "Hello, World"
რომ ჩვენ გავაკეთეთ awhile უკან C და თუნდაც PHP, რადგან მე დინამიურად
outputted ჩემი სახელი.
მე შემიძლია ამის გაკეთება, სხვისი სახელი აქ.
მე უბრალოდ შეცვალოს ეს, როგორიცაა, Hannah, დააჭირეთ Submit.
და მართლაც, პატარა pop-up ცვლილებები.
>> ახლა, ამომხტარი ერთი ყველაზე მიაყენეს თვისებები ინტერნეტში.
და სინამდვილეში, უკან დღეს pop-up ბლოკატორი
შემოვიდა მოდაში იმიტომ, რომ თქვენ წავიდოდა ზოგიერთი website--
ალბათ საეჭვო მივალ სოფელში რომ მაშინ მოულოდნელად
დაიწყოს peppering თქვენს ეკრანზე მთელი bunch of pop-ups.
ასე რომ, ეს უნარი პოპ up შუშები თვალწინ შესახებ
არ ყოფილა განსაკუთრებით კარგად მიერ მიღებული კაცობრიობის.
ასე რომ, რატომ ხედავთ ეს თავიდან ასაცილებლად, რაც,
რომელიც მხოლოდ ხდის ამ მთელი რამ მახინჯი.
ასე რომ, ჩვენ ვაპირებთ, რომ უნდა უკეთესი გზა შეეკითხება მომხმარებელს.
მაგრამ ახლა, რომ როგორც ჩანს მუშაობა.
ასე რომ, უბრალოდ ინტუიციურად, თუ რა როგორც ჩანს, ხდება აქ?
მე წავიდეთ წინ და დააჭირეთ Submit და მაშინ რაღაც ხდება, ნათლად.
მაგრამ რა არ ხდება, რომ არ მოხდეს გასულ კვირას ნებისმიერ დროს მე დააწკაპებთ წარადგინეთ?
რა არ მოხდეს ეკრანზე?
ბოდიში?
გადატვირთვა.
URL, არ იცვლება.
მე ვთქვი, რომ ეს იყო dom-0, და მე ჯერ კიდევ dom-0.
ჩვეულებრივ, ჩვენ გვინდა კიდევ შეიცვალა ზოგიერთი სხვა URL, როგორც register.php ან მოსწონს.
>> მაგრამ მაშინაც კი, როცა თანამდებობიდან გათავისუფლება ეს ის დაჭერით OK,
შეამჩნია, რომ URL რჩება სრულიად დააყენა.
და, ფაქტობრივად, თუ მე ვარ პატარა სკეპტიკური, ნება მომეცით გახსნა Chrome.
ნება მომეცით გახსენით ქსელი tab.
და შენიშნავს, რომ ის ცარიელი მომენტში.
ნება მომეცით წავიდეთ წინ და ხელახლა მარია.
არ არის ქსელური ტრაფიკის განაწილებაზე.
ასე რომ არ არსებობს HTTP.
>> ასე რომ, მართლაც, თუ გავითვალისწინებთ კოდის for ამას მიადევნე თვალი დახურო ეს ფანჯარა
და წავიდეს წყარო.
საინტერესოა.
როგორც ჩანს, არსებობს გარკვეული ახალი tags, მათ შორის სკრიპტი.
მოდით შევხედოთ ფარგლებში CS50 IDE ზუსტად რა გაგზავნილი შესახებ.
>> ასე რომ, აქ არის მოდით ფოკუსირება მხოლოდ HTML.
აი ქვედა ნახევარში dom-0.html.
და შენიშნავს, რომ მას აქვს სათაური, ხელმძღვანელი tag, სხეულის tag, ფორმა აქვს.
მაგრამ რა jumps გარეთ თქვენ, როგორც სხვადასხვა, განსაკუთრებით, თუ თქვენ არასდროს
დაწერილი ნებისმიერი JavaScript თავს.
ნება მომეცით გადახვევა ცოტა მარჯვნივ აქ.
მაქვს input, სხვა შეყვანის წარუდგინოს.
მაქვს პირადობის მოწმობა, რომელიც სახის ახალი.
მაგრამ ჩვენ არ ვხედავთ ამ CSS.
რა არის ნამდვილად ახალი?
ჰო?
Nice.
>> ყველა უფლება.
ასე რომ, სადაც იგი აცხადებს, onsubmit, შეამჩნია რა, როგორც ჩანს, დაიცვას.
ეს არის ატრიბუტი ამ HTML ნომენკლატურა.
მისი მნიშვნელობა ამ სიტყვებზე სიმებიანი აქ.
და ეს გამოიყურება პატარა უცნაური ერთი შეხედვით.
ეს არ არის HTML.
ეს არ არის CSS.
ეს არის, როგორც თქვენ ალბათ მიხვდები, JavaScript.
ასე რომ, როგორც ჩანს, ჩაშენებული ეს ვებ-გვერდი ფუნქცია მოუწოდა მივესალმო.
და მე inferring რომ მხოლოდ იმიტომ, რომ ეს სიტყვა, მივესალმო.
ეს მივიღე ღია paren, ახლო paren, მძიმით.
როგორც ჩანს, C ფუნქცია, ჰგავს PHP ფუნქცია.
>> და მართლაც, ის აპირებს იყოს JavaScript ფუნქცია.
მაშინ მე დაბრუნების ცრუ.
ჩვენ დავბრუნდებით რომ რაღაც მომენტში.
მაგრამ სად არის ეს ფუნქცია განსაზღვრულია?
ისე ნება მომეცით გადახვევა ზედა ფაილი.
და მიუხედავად იმისა, რომ ეს ხანგრძლივი ხაზი, ეს შედარებით მარტივია.
ნება მომეცით დააშორებს აქ და ფოკუსირება ამ ოთხი ხაზები.
>> ასე რომ, JavaScript, უბრალოდ როგორც PHP, უბრალოდ
ვთქვათ, ფაქტიურად, სიტყვა "ფუნქცია" სახელი ფუნქცია,
და შემდეგ ფრჩხილებში ნებისმიერი არგუმენტი არ არგუმენტები ამ შემთხვევაში.
და არ არსებობს დაბრუნების ტიპის JavaScript, ისევე, როგორც PHP.
ასე რომ, ეს პატარა looser, ვიდრე C. ღია Curly გაუწიოს, მჭიდრო Curly გაუწიოს.
ჩაშენებული JavaScript არის ფუნქცია არ არის რეკომენდებული ფუნქცია
მაგრამ ფუნქცია მოუწოდა alert რომლის ერთადერთი მიზანი ცხოვრებაში
არის დახევის up, რომ საკმაოდ მახინჯი შეგახსენებთ, რომ დავინახეთ მომენტში წინ.
>> ახლა ეს არის ერთგვარი mouthful.
რა ხდება აქ?
ასე რომ, მოდით დავიწყოთ გავუსვა ყველაფერი აქ.
ეს არის იგივე არგუმენტი პირთა.
და რა ხდება?
ეს მხოლოდ ჰგავს სიმებიანი.
და აღმოჩნდება, განსხვავებით PHP და განსხვავებით C, არა აქვს მნიშვნელობა, JavaScript
თუ ერთჯერადი შეთავაზებები და ორმაგი შეთავაზებები.
ისინი უნდა იყოს ექვივალენტს.
და გულწრფელად, უბრალოდ პოპულარული ამ დღეებში
ამისთვის JavaScript პროგრამისტების ყოველთვის გამოიყენოთ ერთჯერადი შეთავაზებები რატომღაც.
ეს არის მხოლოდ ერთი რამ უნდა გააკეთოს.
მაგრამ ჩვენ შეგვიძლია ორმაგ ბრჭყალებში, ისევე.
>> ასე რომ, პლუს არის ახალი ხასიათი.
მაგრამ იმ თქვენ, რომლებიც ვაკეთებ ეს ადრე, რას პლუს ნიშნავს?
ჰო.
Concatenate.
ასე რომ, ჩვენ ვნახეთ ამ PHP.
არსებობს უბრალოდ dot ოპერატორი PHP, რომ
იქნება concatenate ორი strings ერთად.
C იყო ტკივილი კისრის ამის გაკეთება.
შეგახსენებთ, pset ექვსი, რომელიც განსაკუთრებული ტკივილი კისრის,
თქვენ უნდა გამოიყენოთ რაღაც strcat
შემდეგ გამოყოფის მეხსიერება დასტის და ბევრი.
თქვენ უნდა ხტომა მეშვეობით hoops უბრალოდ concatenate ორი სიმები.
ამ JavaScript, ეს არის სუპერ მარტივია.
უბრალოდ გამოიყენოთ პლუს ოპერატორი მათ შორის.
>> ასე რომ, რთული ეძებს რაც, როგორც ჩანს, ამ
იმიტომ, რომ ბოლოს ეს მთელი სიმებიანი, უბრალოდ
concatenate წლის ძახილის წერტილი.
ასე რომ, თუ რა იყო popping up იყო "hello, დავით", "hello, Hannah"
"hello, მარია," და ა.შ., ნათლად რომ შუა რამ ორ
უპირატესობა უნდა მომეცი ხელმისაწვდომობის რა?
რა არის იქ, რა თქმა უნდა?
ჰო.
ასე რომ, მე თითქოს აქ უპასუხოს მათი სახელი, არა?
ასე რომ, მათი სახელი გამოჩნდა საბოლოო შედეგი. ასე რომ, რას ნიშნავს ეს?
ისე, მე შევთავაზე ადრე, რომ სურათს, რომ ე.წ. DOM
აქვს ამ სპეციალური ძირეული ელემენტი გზა დაბრუნება მოუწოდა დოკუმენტი.
და ახლა, თურმე, რომ აპირებს უნდა იყოს სპეციალური გლობალური ცვლადი
JavaScript, ჩაშენებული რომელიც მთელი bunch სასარგებლო ფუნქცია.
მათ შორის სასარგებლო ფუნქცია არის უნარი მიიღოს ნებისმიერ შთამომავალი კვანძი.
იმ მოედნებზე და ოთხკუთხედს და ellipses არის მხოლოდ კვანძების ხე, ასე ვთქვათ.
>> გამოდის, რომ აშენდა შევიდა JavaScript დოკუმენტის ობიექტი
არის ფუნქცია, წინააღმდეგ შემთხვევაში, ცნობილია, როგორც მეთოდი, რომ ე.წ. getElementById.
სინტაქსი მოუწოდებს ფუნქცია JavaScript
რომ არის შიგნით ობიექტის ან ცვლადი მხოლოდ dot ნოტაცია.
და ჩვენ ვნახეთ ამ C რაც struct სინტაქსი.
ხედავთ ამ pset შვიდი, სახის, ერთგვარი, როდესაც ხედავთ CS50 :: შეკითხვაზე.
მსხვილი ნაწლავის ნაწლავის in PHP არის კიდევ ერთი გზა მოუწოდებდა ფუნქცია, რომელიც არის
შიგნით ზოგიერთი ობიექტი.
>> მაგრამ ახლა, JavaScript, ეს მხოლოდ dot.
ასე რომ, ეს ფუნქცია, ლამაზად საკმარისი, სახის
ამბობს, თუ რას აკეთებს მიიღებთ ელემენტი ID.
ელემენტის არის კიდევ ერთი სახელი ამისთვის tag ან კვანძის DOM.
ასე რომ, მიიღებთ ელემენტი ID "სახელი" იმას ნიშნავს, ამას აქ არის ჩემი HTML.
ამის საფუძველზე HTML, რა კვანძის ან რა HTML tag ვარ
აპირებს პროგრამულად იყოს გადასცა დარეკვით document.getElementById?
>> ჰო, ზუსტად.
მე ვაპირებ შეყვანის ელემენტს არსებობს, რომლის ID არის "სახელი".
ასე რომ, კონკრეტულად, თქვენ შეგიძლიათ ვფიქრობ, ამ ფუნქციას,
getElementById, როგორც გზა მინიჭების უკან მომცეთ, რომ კონკრეტული კვანძში
ხე.
ჩვენ არ შედგენილი ამ ხე, მაგრამ ეს არის გზა
მიღების დაშვება, რომ ოთხკუთხედი ან მართკუთხედი
უნიკალური საიდენტიფიკაციო ის მეშვეობით მისი პირადობის მოწმობა.
>> ახლა, რატომ არის ეს სასარგებლო?
ისე, თურმე რომ ერთხელ თქვენ შემოსული
კვანძის, რომ ოთხკუთხედი საწყისი სურათი, რომ კვანძის შიგნით,
თავის მხრივ, აქვს მთელი bunch properties-- ძირითადი ღირებულების წყვილი
ან მონაცემები, ერთ-ერთი, რომელსაც ეწოდება ღირებულება.
ასე რომ, ფაქტიურად, ეს არის ერთგვარი mouthful ასახსნელად მთელი რამ.
თუმცა, დღის ბოლოს, ეს ყველაფერი არ არის, რომ გადმოგცეთ
სიმებიანი რომ მომხმარებლის აკრეფილი ამ იერარქიული მოდის.
მაგრამ მე არ მომწონს რამოდენიმე ესე.
უფრო სწორად, არსებობს გარკვეული ცნობისმოყვარეობა მაინც.
ყველა რომ თითქოს მუშაობა.
როგორ ფიქრობთ, რატომ დავბრუნდი ცრუ დანიშვნის შემდეგ მივესალმო?
ეს გამოიყურება პატარა მახინჯი, რომელიც მე მაქვს ორი განცხადებები არ
ერთმანეთისგან semicolons.
გამოიცანი.
თუ მე ამოღებულ დაბრუნების ცრუ, რა შეიძლება მოხდეს, მხოლოდ ინსტინქტურად?
უკაცრავად, ამბობენ, კიდევ ერთხელ?
>> გახსნა bunch of Windows.
ასე რომ, პოტენციურად შესაძლოა, რაღაც მინდა, რომ მოხდებოდა.
კიდევ რა?
შესაძლოა, თხოვნით საიდან
იმისათვის, რომ იმავე გვერდზე.
ასე რომ, ფაქტობრივად, ეს არის ის, რომ უფრო ახლოს უპასუხოს აქ,
მიუხედავად იმისა, რომ, განსხვავებით წარსულში, მე არ
მითითებული მოქმედება ატრიბუტი, რომელიც ჩვეულებრივ, ჩვენ უნდა გავაკეთოთ.
თურმე არსებობს იყოს. თუ თქვენ არ დააკონკრეტა ქმედება,
ეს იგივეა, თითქოს ამბობდა ციტირებით unquote ან სახელი ფაილი თვით,
რომელიც ამ შემთხვევაში იქნება იყოს, როგორც dom-0.html.
ეს მხოლოდ სახის დასკვნა,, უფრო სწორად გულისხმობდა.
>> ასე რომ, თუ მე არ გააკეთებს, მოდით შეამჩნია.
ნება მომეცით გადარჩენა ამ.
და მე ამოღებულ დაბრუნების ცრუ.
ნება მომეცით დაბრუნდეს ამ მაგალითად და ძალა განაახლეთ იგი.
და თქვენ შეიძლება არ მინახავს მე ვარაუდობენ ამ CS50 საუბარი რამოდენიმე ჯერ.
თუ რამე ოდესმე მოქმედი ხმაურიანი და ბრაუზერი არ იქცევიან, როგორც თქვენ მოველით,
ხშირად თქვენ გსურთ გამართავს Shift და შემდეგ დააჭირეთ Reload.
ეს აიძულებს ყველა ფაილი განაახლეთ და არა ბრაუზერის ადგილობრივი ქეში
ან ასლი ისე, რომ ახლა, ნება მომეცით წავიდეთ წინ და გახსენით ჩემი ინსპექტორი, ქსელის tab.
მე ვაპირებ დააჭირეთ ნაკრძალი შესვლა იმიტომ, რომ მე
არ მინდა, რომ წაშლა რიგები ერთხელ მივიღებ whisked მოშორებით მის ფარგლებს გარეთ.
>> ნება მომეცით წავიდეთ წინ აქ და ტიპის Andi, დააჭირეთ Submit.
ყველა უფლება.
ეს, როგორც ჩანს, როგორც მოსალოდნელი იყო.
იგი აცხადებს, რომ "hello, Andi".
ნება მომეცით დააწკაპუნეთ OK.
საინტერესოა.
გაითვალისწინეთ, რომ გვერდი შეიცვალა, თუმცა ორიგინალური გვერდზე.
გაითვალისწინეთ, რომ URL სახის შეცვლილი.
მან დასძინა, კითხვის ნიშნის, რომელიც, როგორც წესი მაჩვენებელი
რომ ჩვენ შევეცადეთ წარუდგინოს რაღაც.
და მერე ბოლოში, კიდევ უფრო მკაფიოდ,
აქ არის ფაქტობრივი HTTP მოთხოვნის, რომელიც მივიღე პასუხი, 200, რომ
დამაბრუნა აქ.
>> ასე რომ, ეს არ არის ის რაც ჩვენ გვინდა, რომ, არა?
იმიტომ, რომ მე არ მინდა, რომ განაახლეთ მთელი გვერდი.
მე ნაცვლად სურდა დაბრუნება ცრუ, რათა მოკლე ჩართვა
ბრაუზერის default ქცევა, რომელიც იყო, რა თქმა უნდა, უნდა წარმოადგინოს გვერდზე.
>> მოდით შევხედოთ ოდნავ უკეთესი მაგალითი.
ეს არის dom ვერსია ერთ.
და შეამჩნია შემდეგ.
ეს OK, თუ თქვენ არ grok ყველა ხაზი კოდი.
მაგრამ რა არის ფუნდამენტურად განსხვავებული ამ განხორციელება?
მე ითვალისწინებს იგი იქცევა იგივე, იმავეს აკეთებს.
რა მე აშკარად სხვანაირად?
ჰო?
>> აუდიტორია: [INAUDIBLE].
დავით Malan: ჰო.
ასე რომ, არის ფუნქცია განსაზღვრული differently-- სხვა სიტყვებით, არ არსებობს ისეთი ფორმა,
up there on line -7 ბლოკის ან უფრო სწორად, ხაზი 8- აღარ
მაქვს onsubmit ატრიბუტი.
წინა მაგალითად, მე მქონდა ეს.
და მერე ფაქტიურად დავწერე ჩემი კოდი აქ.
და მერე განაცხადა დაბრუნების ცრუ.
და თუ ეს არ რუბლს შეადგენს თქვენ არასწორი გზა არ არის,
ეს უნდა დაიწყოს, იმდენად, რამდენადაც როგორც, ისევე, როგორც HTML,
როდესაც ჩვენ დავიწყეთ თანადაფინანსების mingle ეს ცენტრთან სტილი ატრიბუტები,
უბრალოდ დაიწყო კიდევ ცოტა ბინძურ ან გრძნობს, ცოტა არასწორია.
>> ანალოგიურად აქ, თუ თქვენ დაიწყოს აღების HTML,
და მაშინ ავტომატურად ვეცემით რამდენიმე JavaScript კოდი
შუა ციტირებული სტრიქონი, ის არ იქნება ძალიან maintainable.
მარჯვენა?
ის კი არ არის, ცხადია, პირველ რიგში, ადგილი, სადაც JavaScript კოდი არის.
ასე რომ, ეს იქნება მართლაც ლამაზი პრინციპი უკეთესი დიზაინი,
მოდით შენარჩუნება ჩვენი HTML სრულად გაემიჯნონ ჩვენი JavaScript.
>> ასე უნდა გავაკეთოთ, რომ ის, რაც ჩვენ კეთდება აქ ასეთია
ჩვენ უბრალოდ გამოიყენოთ HTML for markup მხოლოდ.
ასე რომ მობილური ერთი ეს, ყველა მე მაქვს არის ფორმა უნიკალური ID.
და შემდეგ ქვევით აქ, მე უპირატესობების სპეციალური ფუნქცია JavaScript
რომლის დროსაც შემიძლია რა არის მოუწოდა ანონიმური ფუნქცია.
გამოდის, რომ თუ მე მოვუწოდებ document.getElementById of 'დემო
რომ ისევე, როგორც მაძლევს მომცეთ ამ კვანძის ჩემი ხე, ფორმის ელემენტს,
ასე ვთქვათ.
>> ახლა, მე მხოლოდ ის ვიცი, ეხლა იცის, ცოტა HTML
ახლა ჩვენ რომელმაც წაიკითხა ზოგიერთი ონლაინ მითითება, რომ ფორმა ელემენტს მხარს უჭერს
მთელი bunch of ღონისძიება listeners-- in სხვა სიტყვებით, სამრეცხაო სიაში ღონისძიება
მსმენელებს, რომ დავინახეთ მომენტში წინ.
ვიცი დოკუმენტაციის კითხვის რომ onsubmit არის სწორი ღონისძიება
მსმენელი ფორმის ელემენტს.
>> ასე რომ, კიდევ ვიცი, რომ ეს არის უსაფრთხო ჩემთვის
ასეთია მიიღოს, რომ კვანძის საწყისი ხე, ფორმის ელემენტს,
და ხელმისაწვდომობის მისი ე.წ. onsubmit ქონება.
ასე რომ dot მხოლოდ იმას ნიშნავს, ეს არის ქონება,
როგორც სპეციალური მნიშვნელობა შიგნით მას.
და რა ტიპის მონაცემის ვარ მინიჭება, როგორც ჩანს,
რომ onsubmit, რომელიც ეფექტურად ცვლადი შიგნით
რომ კვანძის ხე?
ეს ველი შიგნით რომ struct.
რა არის მონაცემთა ტიპის?
>> ფუნქცია, yeah.
გამოდის, რომ PHP აქვს ამ.
და მიუხედავად იმისა, რომ არ გითხრათ ამის შესახებ,
C ასევე აქვს ფუნქცია პოინტერები, რომ უნარი გაივლის და დანიშნოს ფუნქციების
როგორც ცვლადები 'ღირებულებების თავს.
და ჩვენ არ ვაპირებთ რეგრესი უკან C.
მაგრამ ახლა, გამოდის, რომ მარჯვენა მხარეს აქ,
მიუხედავად იმისა, რომ იგი გამოიყურება ცოტა ხმაურიანი, ეს ნიშნავს, hey ბრაუზერი,
მომეცი ფუნქცია.
მე არ ვაპირებ, რომ კი არ გადაიტვირთოთ მიცემა ეს სახელი იმიტომ, რომ მე ვარ ფაქტიურად
აპირებს დაავალოს მოდით ეძახით მისამართი ამ ფუნქციის
დაუყოვნებლივ onsubmit.
სხვა სიტყვებით, ბრაუზერის, თქვენ არ უნდა რა ეს ფუნქცია მოუწოდა.
თქვენ უბრალოდ უნდა იცოდეს სად არის ის მეხსიერებაში.
ასე რომ, ეს საკმარისია, უბრალოდ, თანაბარი ნიშანი არსებობს
და არ გადაიტვირთოთ დასახელებისგან ამ, ისევე როგორც foo და მივესალმო ან ნებისმიერი სხვა სიტყვა.
და ახლა ეს არის მხოლოდ სტილისტური რამ.
მე ვერ გადავიდეს ამ Curly გაუწიოს გადატანა the-- ბოდიში შემდეგი ხაზი
როგორც ჩვენ, როგორც წესი, CS50.
მაგრამ JavaScript, ეს რეალურად სტილისტურად საერთო
უბრალოდ შეინახოს Curly გაუწიოს, პირველი, რომ პირველი ხაზი.
>> მაგრამ შემდგომში, არსებობს არაფერი საინტერესო.
ეს ღია Curly გაუწიოს მხოლოდ demarcates დაწყების ჩემი ფუნქცია.
ფუნქცია არის იდენტურია, გარდა მე
შედის დაბრუნების ცრუ შიგნით ამ ფუნქციას.
იმის გამო, რომ თურმე out-- და თქვენ მხოლოდ
ვიცი, რომ ეს მოსმენით documentation--
იმ შემთხვევაში, თუ ფუნქცია, რომ თქვენ დაავალოს რომ onsubmit დამმუშავებლის დააბრუნებს false,
ბრაუზერის უბრალოდ იცის და თანახმაა არ წარმოადგინოს ფორმა სერვერზე.
თუ ის დააბრუნებს ასეა, ის წარადგენს ის სერვერზე მიზეზების გამო, ჩვენ დავინახავთ,
არის სასარგებლო რაღაც მომენტში.
>> და შემდეგ მძიმით შემდეგ Curly გაუწიოს არსებობს მხოლოდ
იმას ნიშნავს, მე გაკეთდეს განსაზღვრის ფუნქცია.
თქვენ იცით, რა დავარქვა, როგორც კი როგორც გესმით წარდგენა.
ყველა უფლება.
ეს არის ჯერ კიდევ, ალბათ ერთგვარი მახინჯი.
ასე რომ, რა უფრო შეგვიძლია გავაკეთოთ?
>> ისე, გამოდის, მაშინ ორი ვერსია, რომელიც არის last--
და ჩვენ მხოლოდ ერთი შეხედვით ეს.
რისკის მიღების ეს მახინჯი, თურმე
რომ არის ბიბლიოთეკაში მსოფლიოს მოუწოდა jQuery.
და jQuery არის სუპერ პოპულარული JavaScript ბიბლიოთეკა
რომ იმდენად პოპულარული, რომ ყველაზე ნებისმიერი JavaScript-- ეს არ არის
იშვიათია ადამიანი აღრეული jQuery JavaScript.
რატომ?
JavaScript თავად აქვს ძალიან verbose გზები აკეთებს რამ
document.getElementById, dadadadadada.
თქვენ დასრულდება მდე მქონე ძალიან ხანგრძლივი ხაზი კოდი.
>> ასე რომ თანამემამულე დაასახელა ჯონ მაცხოვრებლებ, რომელიც რეალურად მუშაობს გაშვების
up ამ დღეებში, გამოვიდა ამ ბიბლიოთეკაში წლის
წინ, რომ ბევრი ადამიანი ხელი შეუწყო სახელწოდებით jQuery, რომელიც ცვლის
სინტაქსი შემდეგ გზა.
და მხოლოდ ასე ვნახე ეს, იმიტომ, რომ თქვენ ყოველთვის
ვხედავ, თუ აკეთებს ვებ დაფუძნებული საბოლოო პროექტი,
ეს იქნება ექვივალენტი გზა ახორციელებს, რომ იგივე ფუნქციის გამოყენებით
ეს ბიბლიოთეკა.
>> ახლა, ვიდრე გაღიზიანება გარდა მთლიანად,
მოდით შევჩერდეთ ზოგიერთ ნიმუშები.
ეს სინტაქსი, როგორც ჩანს, რამდენი ანონიმური ფუნქციები
ან უსახელო ფუნქციები ან AKA ლამბდა ფუნქციები?
ორი, არა?
თქვენ იცით, რომ, თუნდაც თქვენ არ სუპერ კომფორტული ერთად,
მხოლოდ ის ფაქტი, რომ ამბობს function () ორჯერ.
>> და აღმოჩნდება, რომ რა ეს კოდი არის აკეთებს
და ჩვენ ეხება ონლაინ ცნობას, საბოლოო ჯამში, გარკვეული დახმარება ამ.
ეს მხოლოდ იმას ნიშნავს, რომ როდესაც დოკუმენტი მზად არის,
წავიდეთ წინ და რეგისტრაცია შემდეგი ფუნქცია
როგორც მიუთითოთ დამმუშავებლის HTML ელემენტს, რომლის უნიკალური იდეა არის დემო.
და მაშინ, როდესაც ეს მოხდება, დარეკეთ ამ ორი ხაზი კოდი.
და ეს არის, სამწუხაროდ, უფრო verbose გზა ამბობდა დაბრუნების ცრუ.
და აღვნიშნეთ ეს მხოლოდ იმიტომ, დაინახავთ კოდი მოსწონს ეს ონლაინ რეჟიმში.
და ეს არაფერი უნდა daunted მიერ.
არამედ, გახსოვდეთ, რომ ის, რაც იქნება საერთო JavaScript
არის ეს პარადიგმა.
და ამიტომაც ჩვენ გაჩვენებთ, რომ ახლა.
ყველა უფლება.
ასე გარეშე მცხოვრები ძალიან ბევრი რამ, რომ სინტაქსი,
არიან არსებობს რაიმე კითხვები ეს მაგალითები და იდეები დღემდე?
ყველა უფლება.
მოდით გამოვიყენოთ ეს რაიმე სასარგებლო.
მიღების ვებ გვერდზე რომ ამბობს hello, ასე და ასე არ არის ყველა, რომ საინტერესო,
არ underwhelm.
ეს ერთი არ იქნება ლამაზი, მაგრამ ეს ხდება, რომ რამე სასარგებლო.
ნება მომეცით დაბრუნდეს ჩემი დირექტორია აქ და გახსენით, ვთქვათ, ფორმა-0.html.
>> ასე რომ, ვფიქრობ, ეს არის პირველკურსელთა intramural სპორტული რეგისტრაციის გვერდი
ყოველგვარი CSS ან გრძნობა დიზაინი.
და მე მინდა, წავიდეთ წინ და რეგისტრაცია აქ პაროლის საშუალებით.
და მე ვაპირებ ვეთანხმები და პირობებს და დააწკაპუნეთ რეგისტრაცია.
და ახლა ვებგვერდზე ნათქვამია, "შენ ხარ რეგისტრირებული? (ისე, ნამდვილად არ.) "
ეს, როგორც ჩანს, იგი მუშაობდა, მაგრამ ნება მომეცით წავიდეთ წინ და აიძულოს განახლება.
>> და მინდა ვთქვა, არა, თქვენ არ უნდა ჩემი ფაქტობრივი ელექტრონული ფოსტის მისამართი.
ან იქნებ ჩვენ უბრალოდ, ვამბობთ mail არსებობს.
პაროლი იქნება, ისევე, 12345.
და მაშინ, მხოლოდ იმიტომ, რომ მე იდიოტი, ახლა 123456789.
და მე არ ვაპირებ, რათა შეამოწმოს თქვენი ყუთში.
>> Hmm.
ყველა უფლება.
ასე რომ, არსებობს რამდენიმე შესაძლებლობები გაუმჯობესებას.
და თქვენ იცით, თუ ნახავთ pset შვიდი, რომ თქვენ შეგიძლიათ დაწეროთ code--
და თქვენ უნდა დაწეროს კოდი PHP-- უნდა დავიცვათ
წინააღმდეგ ამ სახის შესახებ შეცდომები, რადგან შესახებ ნათლად
არ თანამშრომლობდა.
და მას არ მიეცა ყოველივე აფასებს თქვენ სურდა ან თუნდაც ფორმატი
რომ თქვენ სურდა მათ.
ასე რომ თქვენ ხედავთ pset შვიდი, რომ ჩვენ ნამდვილად აქვს გარკვეული
თუ პირობები, რომ ვთქვათ, იმ შემთხვევაში, თუ ელ-ფოსტის მისამართი
არ არის username@something.edu, ჩვენ შეგვიძლია მხოლოდ
ბოდიში და ბოდიშს შესახებ ბევრი, როგორც თქვენ შეიძლება იყოს pset შვიდი.
ან თუ მათ არ გადაამოწმა, რომ ყუთი, გამოდის, PHP, თქვენ შეუძლია აღმოაჩინოს, რომ,
ძალიან.
და რა თქმა უნდა, თუ პაროლები არ ემთხვევა როგორც register.php
ამისთვის pset შვიდი, თქვენ შეუძლია აღმოაჩინოს, რომ.
მაგრამ ეს ტკივილი კისერზე, რომ ახლა ისინი ითხოვენ
რომ წავიდეთ ყველა გზა სერვერზე.
მომხმარებელი ინფორმირებული შეცდომა.
და ბოლოს, თუ თქვენ იყენებთ ზოგიერთი fancier ტექნიკა,
ახლა ისინი უნდა დააჭიროთ უკან arrow.
თუ არ იქნება ლამაზი, როგორც ბევრი საიტები, დღეს,
თუ უფრო დაუყოვნებლივ კავშირი, მყისიერად?
>> სხვა სიტყვებით, ნება მომეცით წავიდეთ ვერსია ერთ-ერთი, რომელიც იქნება არ გალამაზებაში.
მაგრამ ეს იმას აქვს ეს ფუნქცია.
Malan, 12345, 123456789, არ აპირებს შეამოწმოს ყუთი, რეგისტრაცია.
პაროლები არ ემთხვევა.
ასე რომ, მიუხედავად იმისა, რომ ეს pop-up არის ugly-- ჩვენ შეგვიძლია შევცვალოთ ეს, საბოლოო ჯამში,
რაღაც ჩატვირთვის, რომელიც დაინახავთ pset შვიდი
არის ძალიან პოპულარული ბიბლიოთეკა მე აღმოაჩინოს, რომ პაროლები არ ემთხვევა.
ყველა უფლება.
ასევე, ნება მომეცით დაფიქსირება, რომ, როგორც მომხმარებელს.
ნება მომეცით წავიდეთ წინ და აცხადებენ, 12345, 12345.
ჯერ კიდევ არ არის შემოწმების შეთანხმებით.
თქვენ უნდა დაეთანხმოთ ვადები და პირობები.
რატომ?
>> თუ ჩვენ უკვე აღნიშნავს რომ არის გზა,
და ჩვენ საჭირო თქვენ pset შვიდი აღმოაჩინოს შეცდომა
პირობები მოსწონს ეს სერვერული, რატომ უნდა
ვახვევთ ასევე ვაკეთებ ამ JavaScript?
რა არის არგუმენტი სასარგებლოდ დასძინა რა
თქვენ დაახლოებით დაინახოს, როგორც, რაღაც არსებობს დამატებითი სირთულის.
>> შესაძლოა არ არსებობს თავდაყირა.
რა შეიძლება იყოს?
აუდიტორია: [INAUDIBLE].
დავით Malan: ოჰ, საინტერესოა.
პოტენციური ექსპლოიტეტების.
ასე რომ, რა თქმა უნდა, თუ თქვენ არ გატარება მცდარი მომხმარებლის შეყვანის რომ დიდი,
იქნებ ეს ყველაფერი უკეთესი, თუ ეს კი არ აღწევს თქვენს სერვერზე.
მე დააყენებს იქ და ვთქვათ, თქვენ ალბათ
დაფიქსირება ორივე პრობლემები.
მაგრამ, რომ სამართლიანი.
კიდევ რა?
>> აუდიტორია: [INAUDIBLE].
>> დავით Malan: ჰო.
ეს კოდი, როგორც ჩვენ დაწყებამდე განაცხადა, არის განიმარტოს, რომ კლიენტის მხარეს.
ეს არ ადარდებს სერვერზე, რაც იმას ნიშნავს, ეს არ
გავლენა სერვერის დატვირთვა და მოცულობა.
და ახლა, ცოტა ძველი ჩემთვის, ეს არ მნიშვნელოვანი ეფექტი
იმიტომ, რომ მე ერთი მომხმარებლის ახლავე.
>> მაგრამ თუ თქვენ რაიმე ვებ-წესიერი ზომა,
განსაკუთრებით დიდი, როგორიცაა Facebook, მეტი შეგიძლიათ შენარჩუნება ადამიანი off
თქვენი სერვერის უკეთესი იმიტომ, რომ სერვერზე, რა თქმა უნდა,
მხოლოდ სასრულ თანხის RAM, სასრული რაოდენობის გიგაჰერციანი,
სასრული რაოდენობის რამ მას შეუძლია გააკეთოს ერთეულის დრო.
ასე რომ, თუ უფრო მეტი ადამიანი მსოფლიოში hitting თქვენს სერვერზე,
შემთხვევით ხე არასწორად, ისევე, როგორც კარგად თუ
შეგვიძლია შევინარჩუნოთ, რომ დატვირთვის თქვენს სერვერზე.
Plus, განსაკუთრებით მასალა device-- თუ თქვენ ოდესმე
შეხვიდეთ my.harvard ან იელის netid ან მოსწონს,
არსებობს ამ შეყოვნება ბევრი საიტებზე, როგორიცაა, რომ, რომლის დროსაც ის,
ისევე როგორც, რა მეორე ან ორი, ზოგჯერ.
და მაშინ, ღმერთო ჩემო, თუ mistype, მაშინ თქვენ უნდა მოხვდა თავში და redo იგი.
ასე რომ, შეყოვნება, განსაკუთრებით ნელა ქსელის კავშირები.
მაგრამ JavaScript, რადგან ის მუშაობს კლიენტს
და არ უნდა დაბრუნდეს და მეოთხე მთელს პოტენციურად ნელი ინტერნეტი
დაკავშირებით, შეგიძლიათ მიიღოთ თითქმის გამდინარე კავშირი.
>> მოდით შევხედოთ ამ.
ნება მომეცით გახსენით ფორმა 0 და შევხედოთ HTML აქ.
და მოდით უბრალოდ ვნახოთ, რა ხდება.
ეს არის ფორმა, რომლის მოქმედება register.php.
მე უბრალოდ გამოყენებით მიიღოს ასე რომ მე ვერ ვხედავ URL.
მაგრამ პაროლები, ჩვენ გვინდა აუცილებლად გვინდა რომ შეიცვალოს ეს პოსტი რეალობა.
აი ველი ტიპის ტექსტი.
აქ არის კიდევ ერთი input სფეროში ტიპის დაგავიწყდათ.
აქ არის, თუ თქვენ არასოდეს მინახავს, შეყვანის ტიპის ჩამრთველი.
>> მაგრამ არ არსებობს JavaScript აქ განაწილებაზე.
ეს არის მხოლოდ HTML, რომ მიდის register.php.
მაგრამ ვერსიას ერთი, სადაც მე დაიწყო იმ pop-ups,
ვნახოთ, რა ხდება აქ.
ამ ვერსიას ერთი, რა მე ვაპირებ see-- მე
ვიფიქრე, შეიძლება შეაფერხოს საკმარისი საკმარისი სიტყვა, მაგრამ მე გაიქცა.
>> ამ ვერსიას one-- იქ ჩვენ წავიდეთ.
ამ ვერსიას ერთი, შეამჩნია ასეთია და არ არის საუკეთესო განხორციელება,
მაგრამ ეს ჩემი პირველი.
გაითვალისწინეთ, რომ ქვემოთ ფორმა, მე სცენარი აქვს.
და სცენარი აქვს იმას ნიშნავს, hey, ბრაუზერის, აქ
მოდის გარკვეული კოდი, როგორც წესი, JavaScript.
ახლა კი, შეამჩნია, რასაც მე ვაკეთებ.
On ხაზი შემიძლია ძლივს წაკითხვის it-- გამოდიან 32, მისი თქმით,
var form-- ასე მომეცი ცვლადში ფორმა.
და მერე კიდევ document.getElementId საქართველოს "რეგისტრაციის".
რა არის ეს?
ასევე, ნება მომეცით გადახვევა აქ.
და შეამჩნია, ah, მივეცი ფორმა ელემენტს თვითნებური მაგრამ აღწერითი იდეა
რეგისტრაცია.
ასე რომ, ეს მაძლევს ცვლადი, რომელიც საშუალებას იძლევა ჩემთვის დაიბრუნოს, რომ კვანძის,
რომ ოთხკუთხედს ხე ეწოდება ფორმა.
form.onsubmit საშუალებით, hey ბრაუზერი, რეგისტრაცია ღონისძიება მსმენელი
ამ ფორმით.
სხვა სიტყვებით, როდესაც ამ ფორმით წარმოდგენილი, შეასრულოს შემდეგი კოდი.
ეს არ უნდა სახელი რადგან რატომ უნდა იცოდეს სახელი?
თქვენ უბრალოდ უნდა იცოდეს რა უნდა შეასრულოს, ergo
ეს ანონიმური ან ლამბდა ფუნქცია.
და რომ ფუნქცია ყველა ეს ხაზები აქ.
და ახლა, უნდა იყოს პატიოსანი, მიუხედავად იმისა, რომ თქვენ შეიძლება არ ოდესმე დაწერილი JavaScript
ადრე, უბრალოდ C და PHP ლოგიკა.
ასე რომ, თუ form.email.value == "" - ასე რომ, თუ ელ ველი ცარიელი,
დაწეროთ შესახებ ერთად "თქვენ უნდა თქვენი ელექტრონული ფოსტის მისამართი. "
Else თუ form.password.value ცარიელი დაწეროთ შესახებ,
"თქვენ უნდა უზრუნველყოს თქვენი პაროლი."
>> კიდევ უფრო საინტერესოა, ლოგიკურად, თუ form.password.value არ
თანაბარი form.confirmation.value-- სად დადასტურება მოდის?
ნება მომეცით გადახვევა.
ისე, მე კი ამ შეყვანის სფეროში აქ დაგავიწყდათ.
და მე ეს ერთი აქ დადასტურებას.
მე შეეძლო მას დაგავიწყდათ ორი ან არაფერი.
მე უბრალოდ ლოგიკურად შემოწმების რომ ეს ორი ერთი და იგივეა.
Else-- გამოდის, ეს არის ბატონი Boole ერთხელ ლოგიკური მნიშვნელობა, თოლიას.
ასე რომ, თუ მე ვიტყვი, ძახილის point-- თუ არ form.agreement.checked,
დაწეროთ შესახებ, ასევე.
>> ასე რომ, ეს სინტაქსი დაინახავთ არის ძალიან გავრცელებული JavaScript,
სადაც თქვენ უნდა ამ dotted ნოტაცია.
თქვენ იწყება ობიექტი აქ.
თქვენ ჩაყვინთვის უფრო ღრმა წელს რომ უნდა ქონების როგორიცაა პაროლი.
და შემდეგ თქვენ მიიღებთ მისი ფაქტობრივი ღირებულება.
ისევ და ისევ, აქ არის შეყვანილი.
აქ არის დაგავიწყდათ სახელი.
და მისი მნიშვნელობა, რასაც ადამიანს რეალურად აკრეფილი.
>> ასე რომ, ყველა ამ შემთხვევაში, მე დაბრუნდა ყალბი.
მაგრამ თუ არა, TRUE.
ასე რომ, ახლა ჩვენ ვხედავთ მყარი გამოყენება, როდესაც
დაბრუნდნენ ყალბი შეჩერება, რაც მომხმარებლის აკეთებს
და მას და სთხოვს აირჩიეთ კიდევ ერთხელ ან ჩაწერეთ ერთხელ.
წინააღმდეგ შემთხვევაში, ჩვენ დაუბრუნოს ჭეშმარიტი.
>> ნება მომეცით წარმოგიდგინოთ ერთი სხვა ვარიანტი, რომ ეს მხოლოდ
სათესლე ზოგიერთი გაგებას.
ისე, ვერსია 2 ამ, ფორმა, 2- მე ამას ტალღა მხრივ.
ეს არის, მათთვის საინტერესო, რომ jQuery ვერსია,
იმ თქვენ, რომლებიც დაგვჭირდება შეხება, რომ კონკრეტული ბიბლიოთეკა.
მაგრამ მოდით start-- და ნებისმიერი კითხვები?
ნება მომეცით პაუზის მომენტში, რადგან რომ იყო სწრაფი და ბევრი.
>> მაგრამ ლამაზი ისაა, რომ ყველა კოდის საკმაოდ ბევრი იგივე.
ახალი პერსონალის რა არის dom?
რა არის ეს ოთხკუთხედს?
რა არის ეს კვანძების?
რა არის ანონიმური ფუნქცია?
რა არის ღონისძიება დამმუშავებლის?
მაგრამ საბედნიეროდ, ყველაზე მეტად, რომ მხოლოდ სრული წრე, ვთქვათ, კვირაში ნულოვანი.
ყველა უფლება.
ასე რომ, რაღაც ოდნავ უფრო საინტერესო?
ისე, პირველ რიგში, ნება მომეცით წავიდეთ წინ და გახსენით Google Maps.
თქვენ შეამჩნევთ, რომ ერთი მომენტში, გაყოფილი მეორე,
შეამჩნია, რა ხდება, როდესაც მე დააწკაპუნეთ სწრაფი საკმარისი.
და ამასთან დაკავშირებით ჰარვარდის ასე სწრაფად, რომ თქვენ ნამდვილად არ შენიშნეს.
მაგრამ რას სახის სახის ვხედავ თუ მე დაწკაპეთ და გადაიტანეთ მართლაც სწრაფი?
იმ თქვენ თვალს ონლაინ, თუ ნელი ეს 0.5x სიჩქარე,
თქვენ ხედავთ, ეს უკეთესი.
>> რა ხდებოდა მხოლოდ ადრე მე დააწკაპებთ და გამოათრიეს?
ნება მომეცით ცდილობენ აქ ნება მომეცით ამის რაღაც, როგორიცაა 90210.
მოდით წავიდეთ შორს.
ეს იყო მართლაც სწრაფი, ძალიან.
როგორ შესახებ Disney World?
იქ ჩვენ წავიდეთ.
OK.
რას ვხედავ გაყოფილი მეორე?
უბრალოდ, მინდა, მოედნები, უფლება?
Placeholders ფილების?
>> ისე, რა ხდება აქ?
Google Maps არის ლამაზი მაგალითია ამ ტექნოლოგიის, რომ ე.წ. AJAX.
ეს არის სადაც ჩვენ დავიწყებთ გამოყენება JavaScript განსაკუთრებით
მიმზიდველი გზა.
უკან დღეს, არ იყო ამ საიტზე მოუწოდა MapQuest.
და მე უნდა მიღებული screenshot ამ 1990,
სადაც თუ უნდოდა, რომ ეძებოთ აქ რუკაზე,
თქვენ ფაქტიურად დაწკაპეთ arrow ზედა რომ გაჩვენეთ
სხვადასხვა მოედანზე რუკაზე.
თუ უნდოდა გადაადგილება დაუტოვებიათ, თქვენ აირჩიეთ ისარი, რომ გაჩვენეთ
სხვადასხვა მოედანზე რუკაზე.
და ზოგიერთ საიტებზე მაინც ამის გაკეთება დღეს.
მაგრამ მაშინაც კი, MapQuest აქვს მიღებული უკეთესი, როგორიცაა Google Maps.
>> ამის ნაცვლად, რა არის უკეთესი ამ დღის საიტებზე, რომ გამოიყენოთ AJAX.
AJAX-- სხვაგვარად ცნობილია როგორც ასინქრონული JavaScript და XML,
რომელიც არის ლამაზი გზა ამბობდა ტექნოლოგია და ტექნიკა, რომელიც
საშუალებას ბრაუზერის გამოყენებით JavaScript რათა დამატებითი HTTP მოთხოვნა
შემდეგ გვერდზე უკვე დატვირთული.
ასე რომ, რას ნიშნავს ეს?
ისე, ეს იქნება ერთგვარი შემაშფოთებელი Gmail- ში
თუ ყოველ დროს, თქვენ სურდა სანახავად გვერდის,
თქვენ ფაქტიურად მოხვდა კონტროლის-R ან Command-R ან დააჭირეთ Reload ღილაკს
და მთელი darn გვერდი რომ განაახლეთ.
მარჯვენა?
ეს იქნებოდა ფლეშის თეთრი ალბათ მეორე.
თქვენ დაინახავთ, რომ სულელური პროგრესი ბარი.
და მხოლოდ იმიტომ, რომ თუ თქვენ გაქვთ ახალი ფოსტა, მთელი ვებ გვერდზე და URL
თქვენ დროს უნდა განაახლეთ.
>> მაგრამ ეს არ არის ის, რაც ხდება Gmail.
მარჯვენა?
როდესაც თქვენ ახალი ელ Gmail, რა ხდება ეკრანზე?
ეს მხოლოდ იმაზე მიუთითებს, არა?
უბრალოდ magically ჩანს ახალი ზედიზედ მაგიდასთან.
ეს, ფაქტობრივად, გულისხმობს ღირსეული თანხის სირთულის.
სინამდვილეში, თუ ფიქრობთ, რომ ეს ხე, რომელიც, მიუხედავად იმისა, არის მარტივი ერთი აქ,
Gmail-- და მე უნდა გამოიყურებოდეს ზე კოდი უნდა იყოს sure--
ალბათ აქვს HTML მაგიდა ან იქნებ უწესრიგო სია, რომელიც მას უწევს
თითოეული თქვენი inboxes წერილებს.
>> ასე რომ, თუ თქვენ წარმოიდგინეთ, ეს არ ხე მეხსიერებაში, როდესაც თქვენ
იყენებთ Gmail რომელიც გამოიყურება სახის სახის როგორც ეს, როდესაც Google ხვდება, ooh,
თქვენ გაქვთ ახალი ელექტრონული ფოსტის, ეს არ გვინდა აღვადგინოთ მთელი ხე.
პირიქით, მას სურს იპოვოს კვანძის ხე, რომელიც წარმოადგენს თქვენი ბმულები
და უბრალოდ ჩადეთ ახალი კვანძში.
>> ასე რომ, ძალიან ჰგავს pset ხუთ, სადაც თქვენ ჩავსვით კვანძების შევიდა hash მაგიდა,
ანალოგიურად აკეთებს Google მეშვეობით JavaScript კოდი, რომელიც მას არ გაუკეთებია,
ტრავერსზე ამ ხეს, გაერკვნენ, სადაც ის არის, რომ inbox ნაწილი ფანჯარა,
და შემდეგ ჩადეთ ახალი row.
და ახალი ზედიზედ მხოლოდ იმას ნიშნავს, ერთი ან უფრო ახალი კვანძების ხე.
>> ასე რომ, AJAX არის ეს ტექნიკა რომელიც საშუალებას იძლევა ზუსტად რომ.
ერთხელ თქვენ ეწვია URL, თუმცა გიჟები ხანი,
და კიდევ გვერდი აქვს უკვე დატვირთული, თქვენ მაინც
მეტი დაიბრუნოს მონაცემები internet-- თუ არა ეს
ელექტრონული ან ფილა, რომელიც map-- დაიბრუნოს ის კულისებში
და შემდეგ ჩადეთ იგი გვერდი ისე, რომ ადამიანის ნამდვილად არ
უნდა დაველოდოთ მას.
>> Facebook Messenger მუშაობს იგივე გზით.
ნებისმიერი რაოდენობის სხვა websites-- Oh, რეალურად, თუნდაც ეს.
ვგულისხმობ, ეს არის, სიმართლე გითხრათ, სახის შემაშფოთებელი ფუნქცია ამ დღეებში.
თუ დავიწყებ ძებნას cats-- ეს არის ერთგვარი საშინელი გამოცდილება.
უბრალოდ იწყებს ძებნას ჩემთვის.
ისე, რა არის ეს აკეთებს?
URL აქვს ნამდვილად არ შეცვლილა წლიდან დავიწყე ბეჭდვაში.
მაგრამ რა ხდება მთელს wire-- OK, hmm საინტერესო.
რა ხდება მთელს მავთულის აქ მხოლოდ იღებს weirder.
>> OK.
ნება მომეცით წავიდეთ წინ და შეამოწმოს ელემენტი და წასვლა ქსელის tab
და ცდილობენ ეს ტექნიკური და ნაკლებად კატა.
როგორც მე აკრიფოთ, ფაქტიურად, კატა and-- რა ხდება
per-- მე არ ვაპირებ დააჭირეთ რომ.
ყველა უფლება.
ასე რომ, აქ, რა ხდება ყოველ ჯერზე მე აკრიფოთ ხასიათი, როგორც ჩანს?
ისევე, დაბალი დონე?
რა ხდება თითოეული იმ გმირები მე აკრეფის დროს ჩემს კლავიატურაზე?
ჰო?
აუდიტორია: [INAUDIBLE].
>> დავით Malan: ზუსტად.
თითოეული მათგანი გმირები აპირებს Google, ერთ დროს.
ისინი მშენებლობაზე სიმებიანი მათ სერვერზე, რომელიც წარმოადგენს
ყველაფერი მე აკრეფილი დღემდე.
და ყოველ ჯერზე მე აკრიფოთ კიდევ ერთი გმირი, ისინი
გამოიყენონ მათ საიდუმლო სოუსით ერთი ძიება ალგორითმი და გაერკვნენ,
ჯერ ის ნიშნავს ეს კატა გვერდი ან ეს კატა გვერდი და ასე შემდეგ?
ასე რომ, გარკვეული აზრით, ის უზრუნველყოფს ჩემთვის უკეთესი გამოცდილება, რომ მე კი არა
უნდა დაასრულოს ჩემი აზრის.
და მართლაც, ეს არის სასარგებლო რამ, autocomplete ზოგადად.
თუ მათი ალგორითმები საკმარისი და თუ ჩემი ძიებები აშკარაა ისიც,
მე არ უნდა აკრიფოთ მთელი სიტყვა.
ისინი აპირებენ მითხრათ, რა არის მე რეალურად ეძებს.
ასე რომ, რა Google მოუწოდებს მყისიერი ძიება მხოლოდ გამოყენებით AJAX,
გამოყენებით კოდი, რომელიც საშუალებას აძლევს მათ მოითხოვოს დამატებითი შინაარსი მეშვეობით ბრაუზერში
კულისებში გამოყენებით ამ ახალი ენა, JavaScript.
ასე რომ, ჩვენ გვაქვს რამდენიმე წუთი დარჩა.
და მინდა გითხრათ, ჩემი მეგობარი კოლტონი სცენაზე,
მას შემდეგ, რაც, როგორც ჩანს, განსაკუთრებით fun ბოლო დროს
დანერგვა ტექნოლოგია რომ ზოგიერთი
გამოთქვა ინტერესი ამ საბოლოო პროექტები.
ჩვენ ვფიქრობდით მინდა იყოს fun რათა მდე მოხალისე, თუმცა, დღეს
გაჩვენოთ გარდა ამ, რომელიც საშუალებას you-- yeah,
ვნახე ამ მხრივ პირველი.
კარგით up.
ძალიან კარგად გაკეთდეს.
კარგ საქმეს.
მე ვაპირებ, რომ პროექტის ეს ეკრანზე რაღაც მომენტში.
რა არის შენი სახელი ყველასთვის?
>> EFA: მე EFA.
>> დავით Malan: Etha?
>> EFA: EFA.
>> დავით Malan: EFA?
>> EFA: ჰო.
>> დავით Malan: ლამაზი, რომ ნახოთ თქვენ.
ყველა უფლება.
ნება მომეცით კიდევ ამ მზად.
კარგით მეტი შუა კოლტონი აქ.
რა კოლტონი აქვს ხელში დღეს არის დისტანციური მართვის.
ასე რომ, ვიდრე უბრალოდ დგანან იქ სამგანზომილებიანი მსოფლიოში ეძებს გარშემო
როგორც კოლტონი გავაკეთეთ, ახლა EFA შეუძლია რეალურად მოიარე იზრდებოდა,
ქვემოთ, მარცხნივ და მარჯვნივ, როგორც Nintendo ან Xbox კონტროლერი.
EFA: მე ვაპირებ დაეცემა off ეტაპზე.
დავით Malan: მნებავს დავდგეთ უხეშად მეტი აქ.
მაგრამ ეს არის რისკი.
OK.
ასე რომ, წავიდეთ წინ და ამით იმ.
ნება მომეცით წავიდეთ წინ და გადახვიდეთ ეკრანზე აქ.
მიადევნე თვალი dim განათება.
და კოლტონი, ნება მომეცით მოდის დგომა.
>> გსურთ ახსნას აქ ერთად mic, რასაც ჩვენ ვაკეთებთ?
აქ თქვენ წასვლა.
>> COLTON: რა თქმა უნდა.
ასე რომ, ახლა ჩვენ ჩატვირთვის მდე Oculus,
ვფიქრობ, operating-- არ ფუნქციონირებს სისტემა, მაგრამ მთავარი პროგრამა, სადაც
თქვენ შეგიძლიათ თქვათ ყველა თამაშები და პროგრამები, რომლებიც თქვენი ბიბლიოთეკა.
ასე რომ, ახლა, უნდა ვთქვა, ლიბერალიზაცია touchpad უნდა დაიწყოს.
Touchpad აპირებს იყოს მარჯვენა მხარეს headset.
ასე რომ წავიდეთ წინ და tap--
EFA: ოჰ, კაცი.
დავით Malan: ჰო, იქ წასვლა.
ხარისხის EFA ხედავს ბევრად უფრო ხარისხიანი.
ეს არის მხოლოდ Wi-Fi აქ.
COLTON: მერე რა რომ თქვენ აპირებს მინდა ამის გაკეთება
არის გამოიყურება მიმართ დაბრუნება მარჯვენა მხარეს ეკრანზე.
Yep, რომ თამაში ძალიან ზედა მარჯვენა.
და მაშინ, როდესაც თქვენ შერჩევის ის, Tap touchpad ერთხელ.
მე ვფიქრობ, რომ მისი Dreadhalls.
და მერე აქ არის a-- აქ, ნება მე გამართავს თქვენი სათვალე თქვენთვის.
>> ასე რომ, მე მხოლოდ მას კონტროლერი.
ასე რომ, ახლა მას შეუძლია აკონტროლოს თამაში.
მას შეუძლია გადაადგილება და პერსონალის იგრძნობა.
ასე რომ წავიდეთ წინ და ეძებოთ დაბრუნება.
თქვენ უნდა ნახოთ ახალი თამაში.
ასე რომ წავიდეთ წინ და თქვენ შეგიძლიათ ამის გაკეთება.
ახლა, თქვენ უნდა შეეძლოს კონტროლი თავს კონტროლერი,
ისევე, როგორც კი თამაში ტვირთავს აქ.
ეს შეიძლება იყოს ცოტა საშინელი.
>> EFA: ახლა მეტყვით.
OK.
>> COLTON ყველა უფლება.
ასე რომ, ადასტურებს, რომ თქვენ შეგიძლიათ გადაადგილება.
OK.
თქვენ შეგიძლიათ გადაადგილება.
სრულყოფილი.
ასე რომ, თუ გადავხედავთ ქვემოთ, თქვენ გაქვთ რუკაზე.
რუკა აჩვენებს, თუ სად არიან.
შეგიძლიათ მიმოიხედე გარშემო ოთახში.
შეგიძლიათ მთლიანად ჩართოთ გარშემო.
ჰო, ზუსტად.
Turn გარშემო.
>> ასე გამოიყურება თქვენი მარცხენა.
მე ვფიქრობ, რომ რაღაც შეგიძლიათ შეარჩიო ბარელზე ოთახში.
>> EFA: როგორ მივიღო განვსაზღვრავთ გზა?
COLTON: ეძებოთ.
უბრალოდ ეძებოთ.
ყველა უფლება.
ესეც ასე.
ახლა წავიდეთ წინ და უბრალოდ ჩართოთ გარშემო.
ასე გამოიყურება შორს მარცხენა.
შეინახეთ მოძრავი მარცხენა.
შეინახეთ ეძებს დატოვა.
შეინახეთ აპირებს.
ჰო.
>> EFA: Oh, რომ გზა.
>> COLTON: ჰო.
ფეხით მიმართ კონტროლერი.
ესეც ასე.
ახლა უნდა ვთქვა, აირჩიოთ it up.
ესეც ასე.
აირჩიოთ it up.
ყველა უფლება.
ახლა, მოდით გავიდნენ ამ ოთახში.
წავიდეთ წინ და ფეხით რომ კარი.
ასე რომ, თქვენ აპირებს hold-- ის ამბობს ღილაკს, რათა აიძულოს ის გახსნა.
ასე რომ წავიდეთ წინ და გამართავს ღილაკს.
Yep, აიძულა იგი გახსნა.
ყველა უფლება.
კარგ საქმეს.
ახლა ჩვენ ფეხით გარეთ ოთახი.
ასე რომ, მე ვაპირებ დატოვეთ დანარჩენი მდე თქვენ და ვნახოთ, რას გასარკვევად.
EFA: მე არ ვაპირებ, რომ ბნელ ოთახში.
მოიცადე.
ახლა მე უნდა დაცემას მუქი დარბაზი?
OK, მე ვაპირებ უკან [INAUDIBLE].
COLTON ყველა უფლება.
კიდევ რამდენიმე საკითხი გააშუქა.
როგორც ჩანს, ზოგიერთ მონეტები.
სწორედ lock არჩევანი.
ასე რომ, თუ თქვენ ჩაკეტილი კარი, შეგიძლიათ გამოიყენოთ, რომ.
თქვენ ეშინია?
>> EFA: ჯერ არ არის.
COLTON: OK.
>> Pretend-- yeah.
უბრალოდ ვიტყვი, რომ თქვენ რეალურად იდგა.
და თუ აქციოს around-- თქვენ მოხვდით შეეგუება.
მაგრამ ეს აზრი.
დავით Malan: ხოლო EFA აგრძელებს თამაში, მას შემდეგ, რაც ჩვენ შეგვიძლია გავაკეთოთ ამ დღეს,
ჩვენ შეგვიძლია ყველა tip-toe აქ.
მაგრამ ჩვენ გვაქვს ორი სხვა წყვილი, თუ გსურთ ამუშავება და ითამაშოს.
წინააღმდეგ შემთხვევაში, ჩვენ ვხედავთ, თქვენ მომავალ ოთხშაბათს.
დიდი მადლობა, რომ ჩვენი მოხალისე დღეს.
[ტაში]
>> [მუსიკა - "Seinfeld თემა"]
დინამიკები 1: ისე, მე ვარ აყენებს ახალი PL მთაზე.
მე უბრალოდ შეცვალა OLPF--
>> დინამიკები 2: რა ზუსტად აკეთებ?
>> დინამიკები 1: ისე, ყოველი these-- აქ, მე გაჩვენებთ ამ ერთი აქ.
თქვენ ხედავთ, რომ აქ.
>> დინამიკები 3: მე ვფიქრობ, რომ მე ვარ კარგი ამ.
გსურთ კიდევ რამდენიმე?
>> დინამიკები 4: არა, მე ვარ კარგი. [INAUDIBLE].
>> დინამიკები 3: არა, [INAUDIBLE].
აქვს გარკვეული.
დინამიკები 1: სხვა და სხვა ფერის.
დინამიკები 2: OK.
დინამიკები 1: ასე რომ, საბოლოო ის, რაც არ არის ის არეგულირებს ფერი of--