[Powered by Google Translate] [სემინარი თემაზე: jQuery]
[Vipul Shekhawat, ჰარვარდის უნივერსიტეტი]
[ეს არის CS50.] [CS50.TV]
თუ თქვენ შემდეგ გასწვრივ სახლში, შეგიძლიათ რეალურად წვდომის ჩემი სლაიდები ხაზზე
მიერ აპირებს ამ ბმულს.
ეს TjjRWj, on bit.ly.
ასევე შეგიძლიათ უბრალოდ წასვლა URL პირდაპირ,
რაც cloud.cs50.net / ~ vshekhawat, რომელიც ჩემი სახელით,
და jQuery.
მე მაღალ გარწმუნებთ, რომ დაიცვას გასწვრივ თუ თქვენ თვალს სახლში,
და თუ თქვენ აქ, ასევე, რადგან ეს არის საკმაოდ ინტერაქტიული პრეზენტაცია.
>> ასე რომ, დღეს მე ვაპირებ ვისაუბრებთ jQuery, და პირველი კითხვა არის,
რა არის jQuery?
წელს, მე ვიცი, შენ არ დაფარული JavaScript
როგორც ბევრი დეტალი როგორც ჩვენ გასულ წლებში.
JavaScript არის, პირველ რიგში, უბრალოდ კლიენტის მხარის ენა
რომ გამოიყენოთ აწარმოებს სკრიპტები და კოდი თითოეულ მომხმარებლის მანქანა.
ასე რომ, თქვენ გაქვთ სერვერზე, რომელიც უზრუნველყოფს ვებ გვერდების ხალხს,
მაგრამ თქვენ ალბათ გსურთ პერსონალის მათი მანქანა,
ვთხოვთ მათ მანქანა გაგზავნას ითხოვს თქვენს სერვერზე ყოველ 30 წამში ან მსგავსი რამ.
ამის გაკეთება შეგიძლიათ, რომ გამოყენებით JavaScript.
JQuery მხოლოდ უზრუნველყოფს უფრო ფუნქციონალური თავზე JavaScript
რომ არ დამატებითი პერსონალი თქვენთვის.
თუ გადავხედავთ შინაარსი თავზე,
რომ ასახავს ზოგიერთ პერსონალი, რომ თქვენ ვერ გააკეთებს.
ასე რომ, მთლიანობაში კი, შეიქმნა 2006 წლის იანვარში.
პირველად ჩაფიქრებული 2005 წლის აგვისტოში.
ეს იყო დაახლოებით რამდენიმე წლის განმავლობაში, და ეს მართლაც ნაწილი ახალი ვებ 2.0 მოძრაობა
რომ გააკეთა ინტერნეტ ისე გამოუყენებელი.
ეს არის ყველაზე ფართოდ გამოიყენება JavaScript ბიბლიოთეკა.
მეტი 19.6 მილიონი საიტებზე გამოყენება და გამოყენების კვლავ იზრდება
შესაბამისად builtwith.com, რომელიც, სავარაუდოდ, ბოლო წლის განმავლობაში,
ახლახანს დღითიდღე იზრდება საკმაოდ ხაზოვანი.
მათ შორის ყველაზე 10 მილიონი ადგილები, იქ მაინც -
დაახლოებით 40%, ვინც გაკეთებული გამოყენება.
Facebook იყენებს, უამრავი სხვა საიტებზე გაკეთებული გამოიყენოს იგი.
შეგიძლიათ გამოიყურება იმ სტატისტიკის საკუთარ, თუ გსურთ.
თქვენ ვერ გეტყვით, რომ ეს GE დაბრუნება, რადგან მას ფუნდამენტური და 13 სამეურვეო საბჭოს წევრების,
ერთად გუნდი 20 ადამიანი, რომლებიც მუშაობენ იგი რეგულარულად.
ამიტომ ძალიან ფართოდ გამოიყენება, მას აქვს. ორგ URL, ეს ლამაზი,
მას spin ღ სხვა პერსონალი, ამიტომ დიდი გარიგება.
>> რატომ უნდა გამოვიყენოთ? JQuery არის ძალიან მსუბუქი.
ეს იმას ნიშნავს, რომ ეს არ არის დიდი ფაილი. თქვენ შეგიძლიათ
minified ფაილი, რომელიც არის გარეშე ყველა თეთრი სივრცე და კომენტარები, და ეს მხოლოდ 32 kB.
ასე რომ, ეს ადვილი მხოლოდ toss თქვენს ვებ გვერდზე
და მხოლოდ იმიტომ, რომ დაიწყოს მისი გამოყენება.
ეს არის ასევე ძალიან ეფექტურად დაწერილი, ასე რომ არ დასჭირდეს ბევრი -
ეს არ შენელდება თქვენი ნახვა, როცა გამოიყენოს იგი.
იგი საშუალებას გაძლევთ განახორციელოს რამ, რომლებიც ადრე unfeasible.
არსებობს ასპექტები ფუნქციონირება,
მსგავსად შექმნა ანიმაცია, რომ ჩვეულებრივ იქნება ძალიან, ძალიან რთულია.
მაგრამ jQuery ისინი რეალურად ძალიან მარტივია.
და არსებობს რამ, რაც შემაშფოთებელი უნდა გააკეთოს,
შესაძლებელია JavaScript, გაგზავნის მსგავსი POST მოთხოვნით,
მაგრამ გამოაგზავნოს თხოვნა სერვერზე, თქვენ უნდა დაწეროს
ხუთი ან ექვსი ან შვიდი ხაზი კოდი.
ახლა თქვენ შეგიძლიათ ამის გაკეთება ერთი ხაზი კოდი, ერთ ფუნქციას ზარი.
რომ ნამდვილად ამარტივებს ბევრი პერსონალი, რომ თქვენ აკეთებთ.
და ყველა მაგარი ბავშვია გამოყენება. იმ, ვგულისხმობ მე.
ჩემი საბოლოო პროექტი გასულ წელს, რაც news.whrb.org,
რაც შეეხება რადიოს, მე შეიქმნა ამ დღიურში
რაც მასპინძლობს ყველა აჩვენებს, რომ ჩვენ გავაკეთეთ და MP3 ფაილი მათთვის.
თქვენ შეგიძლიათ დაათვალიეროთ წარსული გვიჩვენებს,
და ეს ყველაფერი კეთდება გამოყენებით jQuery. თქვენ შეგიძლიათ თქვათ
იმიტომ, რომ ყველა ამ ანიმაცია, არსებითად.
ასე რომ, თუ თქვენ გაქვთ - თუ თქვენ შექმნა ახალი ჩანაწერი,
ხედავთ ამ პატარა slideDowns, რომ ყველაფერი გაკეთდეს გამოყენებით jQuery.
ეს fade - ისე, რომ მსგავსი საქმიანობები ყველაფერი გაკეთდეს გამოყენებით jQuery,
და თქვენ არ უხდებათ გამუდმებით განაახლეთ გვერდი ნავიგაცია საიტზე.
კიდევ ერთი მაგარი რამ რაც გააკეთა გამოყენებით jQuery ეს პრეზენტაცია.
მე გამოყენებით ამ ღია რამ მოუწოდა scrolldeck,
რაც ვინმე წერს თავზე jQuery.
თუ თქვენ რეალურად შევხედოთ წყარო, თქვენ ხედავთ, რომ
ისინი გამოყენებისას დოლარი ნიშანს; დოლარი ნიშნები
გამოიყენება jQuery ნიშნავდეს, რომ ფუნქცია jQuery ფუნქცია.
ასე რომ, ისინი განსაზღვრის wrapper თავზე jQuery
რომელიც საშუალებას გაძლევთ, რათა პრეზენტაცია ასე,
და თქვენ ხედავთ, რომ აქ ისინი, მათ შორის ორიგინალური jQuery ფაილი,
რაც თქვენ უნდა შეიცავდეს თუ გსურთ გამოიყენოთ jQuery
საკუთარი საიტებზე.
>> ეხება იმ, როგორ დააყენოთ იგი?
შეგიძლიათ უბრალოდ წასვლა jQuery.com და იწერთ,
დაამატოთ ეს ვებ დირექტორიაში და მოიცავს იგი.
ასე რომ, მხოლოდ თავზე, თავის არეში tag თქვენი HTML ფაილი
თქვენი მთავარი HTML ფაილი, უბრალოდ უნდა რომ ხაზი კოდი
სწორი მობილური რისთვისაც მობილური jQuery თქვენ იყენებთ.
თქვენ შეგიძლიათ მიერ აპირებს jQuery.com,
დაწკაპეთ "ჩამოტვირთვა jQuery," და თქვენ გაქვთ იგი. აი ეს.
და ფაქტობრივად, ჩვენ შეგვიძლია შევხედოთ რას ჰგავს.
თუ თქვენ დააჭირეთ download აქ, jQuery არის ეს.
უბრალოდ ერთი დიდი JavaScript ფაილი, რომელიც ყველაფერს აკეთებს ჯადოსნური პერსონალი თქვენთვის.
ეს არის minified ვერსია, რომელიც არ იკითხება ყველა.
თქვენ ასევე შევხედოთ განვითარება ვერსია, რომელიც იკითხება
მაგრამ მაინც ძალიან, ძალიან ხანგრძლივი.
ეს ბევრი პერსონალი იქ.
თქვენ ასევე უკავშირებენ Google-ის უმასპინძლა მობილური იგი.
ასე რომ ყველაფერს საშუალებას გაძლევთ მხოლოდ დაეყრდნოს Google უზრუნველყოს იგი.
იგი ყოველ მობილური იგი, შესაძლებელია ნებისმიერ დროს.
ასე რომ, თქვენ ალბათ დაეყრდნოს Google უმასპინძლებს იგი თქვენთვის.
ან შეგიძლიათ ბმული jQuery საკუთარი უახლესი ვერსია.
მათ აქვთ URL რომ ყოველთვის განახლებული უახლესი ვერსია.
ეს jQuery-ის ბოლო, და არსებობს ერთი პრობლემა, რომ
რაც არის, რომ თუ განახლება jQuery და ზოგიერთი წინა ფუნქციონალური
მათ ხდება retrograded ან უარყოფილია,
არ შეიძლება - ეს შეიძლება დაიწყოს ვერ უჭერს მხარს აღარ.
ასე რომ, თუ წერთ ნახვა გამოყენებით მობილური 1.8.2,
იმ დროისთვის მობილური 2,7 გამოდის
ზოგიერთი ფუნქციების თქვენ წერდა არ მუშაობს აღარ.
ასე რომ, უმჯობესია, მხოლოდ ჩამოტვირთოთ 32 kB ფაილი,
დააყენა იგი თქვენს ვებ გვერდზე, და ეს ვიმუშავებთ სამუდამოდ.
>> მე ვაპირებ წავიდეთ წინ და დავიწყოთ საუბარი ფაქტობრივი ფუნქციონირება jQuery.
პირველი ის არის, სელექციონერები. ეს არის ის, რაც jQuery თავდაპირველად ჩაფიქრებული უზრუნველყოს.
და დააკლიკეთ დოკუმენტაცია შევხედოთ
დეტალური დოკუმენტაცია სელექციონერები მე ვაპირებ გააშუქებს.
იდეის უკან სელექციონერები არის, რომ თქვენ შეგიძლიათ HTML ელემენტების გვერდზე.
ელემენტების გვერდზე აქვს პირადობის მოწმობა და კლასების და სხვა იდენტიფიკაციის ასპექტები მათ.
არის ასევე - they're სხვადასხვა ბრძანებებს.
ზოგიერთი დროს ისინი წყობილი შიგნით ერთმანეთს.
JQuery გაძლევთ ააშენოს მარტივი შეკითხვებს რომ ვიღებ ელემენტების გვერდზე.
ამის შემდეგ შეგიძლიათ მანიპულირება ამ ელემენტების გამოყენებით jQuery ფუნქციები,
რაც მანიპულირება მონაკვეთზე მივიღებთ, რათა მოგვიანებით.
შეცვლა შეგიძლიათ HTML, შეცვალოს CSS,
ასევე შეგიძლიათ animate და დამატება ფუნქციებს, გაააქტიუროთ გარკვეულ მოვლენებს.
ასე, მაგალითად, თუ რამე ის დაწკაპავთ, გსურთ რაიმე უნდა მოხდეს,
შეგიძლიათ გააკეთოთ, რომ გამოყენებით jQuery ასევე.
გარდა ამისა არსებობს დიდი რაოდენობით გზები შესარჩევად ელემენტებს.
მათი უმრავლესობა მე არ გამოიყენება, მაგრამ არის ძირითადი პირობა,
რომელიც არის საკმაოდ მნიშვნელოვანი.
ელემენტის არჩევის, მაგალითად, თუ თქვენ მხოლოდ შერჩევის არაფერი
რომ არის div - I რეალურად კოდი ღიაა ამ slide პრეზენტაცია.
ასე, მაგალითად, აქ არის პირველი slide.
აქ div. თუ ჩვენ რეალურად შეარჩიოთ ყველა divs გვერდზე,
ეს უბრალოდ გვაძლევს მასივი ყველა divs, რომ არსებობს ამ ფაილი.
ID არჩევის გაძლევთ შერჩევა არაფერი მოცემული პირადობის მოწმობა.
ასე რომ, თუ ეს, მაგალითად, ეს რამ აქვს ID "რა"
და თუ ჩვენ ამას ერთად # თუ რა ნაცვლად ზოგიერთი ID,
იგი დააბრუნებს მასივი, რომელსაც აქვს ერთ ელემენტს და რომ ის არის, რომ ელემენტია გვერდზე.
ჩვენ ასევე გაერთიანდება სელექციონერები ამ გზით მიერ, რომელსაც
მხოლოდ შერჩევა რამ პირადობის მოწმობები, რომლებიც divs.
ასე რომ, yeah. მხოლოდ შერჩევა divs რომ აქვს, რომ პირადობის მოწმობა.
კლასი უბრალოდ გამოიყენოთ dot, ეს იგივე როგორც CSS.
შთამომავალი ასევე მუშაობს, ამიტომ, თუ თქვენ გაქვთ გარკვეული კლასი
და ეს წყობილი ელემენტები მასში - ასე, მაგალითად,
არსებობს გარკვეული დონის და მას წამყვანმა tag უკავშირებენ კიდევ ერთ გვერდზე,
შეგიძლიათ გამოიყენოთ ეს სინტაქსი ვიღებ ბმული.
ასევე შეგიძლიათ აირჩიოთ მრავალი რამ ერთბაშად, ისევე გამოყოფა მათ მძიმეები,
ნებისმიერი არჩევის გსურთ და შეარჩევენ ყველა მათგანი ერთდროულად, ერთ მასივი.
შემდეგ კი ასევე არ არჩევის, ასე რომ თქვენ შეგიძლიათ ყველა divs
რომლებსაც არ გააჩნიათ რაიმე კონკრეტული კლასის.
და ეს მხოლოდ სასარგებლოა გზა დანერგვა თუ როგორ შერჩევა მუშაობს.
მე ნახოთ კონკრეტული მაგალითები მეორე.
>> დამატებითი ფუნქცია სელექციონერები არიან - ეს მხოლოდ რამდენიმე მაგალითი.
არსებობს რამდენიმე ათეული ეს, მაგრამ თუ გვინდა, რომ შეარჩიოთ ყველა სურათის tags
შემადგენლობა რამდენიმე ელემენტს, მაშინ მხოლოდ ამის გაკეთება: იმიჯი.
თუ გსურთ შესარჩევად კი ელემენტები, მაგალითად, თუ არსებობს 20 მათგანი,
უნდა აირჩიოთ 0, 2, 4, 6 და ასე შემდეგ,
აკეთებთ: კი, ან შეგიძლიათ გააკეთოს: უცნაური.
ეს არის ფსევდო სელექციონერები, რაც იმას ნიშნავს, რომ ისინი რეალურად გამოთვლაც
ყველა სხვა ელემენტს არა აპირებს და შერჩევის ყველა მათგანი.
თქვენ ასევე - თითოეული ელემენტის ასევე შეუძლია კონკრეტული ატრიბუტები.
ასე, მაგალითად, კლასის = ცენტრში ასევე ატრიბუტი.
ამ წამყვანმა tag, href, ჰიპერტექსტის მითითება, არის ატრიბუტები ასევე.
ასე რომ, შეგიძლიათ აირჩიოთ ის, რაც დაბლა კონკრეტული ან მხოლოდ - ეს ნამდვილად კულტურას.
თქვენ შეგიძლიათ არაფერი რაიმე ატრიბუტი, რომ გსურთ.
შემდეგ კი, ასევე, ატრიბუტებს შეიცავს.
თუ თქვენ, მაგალითად, სურდა შეარჩიოთ ყველა შეტანის ელემენტები
რომ აქვს სიტყვა "უღელტეხილზე", როგორც სახელწოდება, მათ შორის,
თუ გვერდს შეტანის ტექსტური ბლოკის
რომ ე.წ. "პაროლი", რომ მინდა იყოს ერთი გზა შეგიძლიათ აირჩიოთ, რომ.
და ბევრი სხვა. შეგიძლიათ წავიდეთ წინ და შეხედეთ დოკუმენტაცია
და ვნახოთ კონკრეტული მაგალითი, თუ როგორ მუშაობს.
>> შემდეგი რამ არის DOM მანიპულირება.
მას შემდეგ რაც შერჩევა ელემენტები, ჩვენ გვინდა, რომ რეალურად გააკეთოს პერსონალის მათთან.
აქამდე ჩვენ არ შევხედე, რომ ყველა, მაგრამ თუ გადავხედავთ დოკუმენტაცია,
იქ მართლაც ძალიან ბევრი, რომ ჩვენ შეგვიძლია გავაკეთოთ.
ამ ეტაპზე, ჩვენ ვაპირებთ შესარჩევად ელემენტები ამ პრეზენტაცია
და მანიპულირება მათი გამოყენებით jQuery.
იმიტომ, რომ ეს ხორციელდება გამოყენებით jQuery, ჩვენ გვაქვს წვდომა jQuery ბიბლიოთეკა,
და ჩვენ შეგვიძლია გამოვიყენოთ ამ ფუნქციების ფარგლებში კოდი.
ერთი სასარგებლო რამ, რაც შეიძლება არ იცოდეთ შესახებ არის console.
და Google Chrome არის ის, რაც მე გამოყენებით. შეგიძლიათ დააჭირეთ alt ბრძანება J
ან alt კონტროლის J გახსნა კონსოლი.
In Firefox ვფიქრობ, რომ ეს ბრძანება ცვლის K ან კონტროლის ცვლა კ
In Safari თქვენ უნდა შეცვალოს ზოგიერთი პარამეტრები.
აქ არის ბმული თუ გსურთ ამის გაკეთება, მაგრამ მე რეკომენდაციას მიღების Chrome ან Firefox.
მოდით ქმნის console, ეს ყველაფერი აქ.
ეს გაძლევთ საშუალებას ძირითადად, მხოლოდ არაფერი გსურთ.
ასე რომ, შეგიძლიათ უბრალოდ აკრიფოთ შექმნა ცვლადში x,
x = 5, ვნახოთ რა x + 2 არის.
თქვენ კი ამის გაკეთება რაღაც CS + ვნახოთ, x + 45, რომელიც იქნება CS50.
შეგიძლიათ უბრალოდ გავაკეთოთ ზოგიერთი ტიპიური JavaScript პერსონალი.
მაგრამ ასევე შეგიძლიათ ამის გაკეთება jQuery აქ.
>> მოდით შევხედოთ ამ პირველი ასპექტი აქ.
ჩვენ ვაპირებთ, რომ შევქმნათ ცვლადში HTML, რომელიც სიმებიანი.
მას აქვს პუნქტის tag ის, რომ ე.წ. ახალი ტექსტი.
ასე რომ, ჩვენ გვაქვს ეს HTML, ეს ახალი ტექსტი, პუნქტში tags.
ახლა ჩვენ ნამდვილად გინდათ დაამატოთ ეს გვერდი.
მე მითითებული ეს ისე, რომ HTML ეს პუნქტის, ამ სათაურით აქ არის დამატება ID.
თუ ჩვენ შერჩევა დამატება ID და შემდეგ დამატება კი
HTML ცვლადი უბრალოდ შექმნილი,
მას დავუმატებთ, რომ HTML ბოლოს, მას შემდეგ, რაც ამ პუნქტის აქვს.
ასე რომ, თუ ჩვენ გავაკეთებთ, რომ - შევარჩიეთ ამ პუნქტის,
და ჩვენ მოუწოდა დამატება ფუნქციის HTML ცვლადი უბრალოდ დასძინა,
მას დავუმატებთ, რომ ახალი ტექსტის უფლება არსებობს გვერდზე.
ჩვენ ასევე prepend ეს იმას ნიშნავს რომ წავა ადრე, დასაწყისში, რომ ელემენტს.
ასე რომ, არსებობს გარკვეული ახალი ტექსტის დასაწყისში და შემდეგ.
შემიძლია წავიდეთ წინ და ამოცნობა, თავი დაეღწია ამ პერსონალის მე მხოლოდ გაკეთდეს.
მაგრამ ეს მაგალითია, თუ როგორ შეგიძლიათ გამოიყენოთ prepend და დამატება მეთოდები
მანიპულირება პერსონალის გვერდზე, დავამატებ HTML.
>> ასევე შეგიძლიათ შეცვალოს კლასებში.
უკან ამ სტილის ფაილი, მე შექმნილი ეს გამარჯვება კლასი
რომ აქვს ტექსტის ფერი წითელი, ზოგიერთი ფონის ფერის და ტექსტის ჩრდილი.
როგორც ჩანს hideous, მაგრამ შემიძლია რეალურად -
ამ პუნქტის შეესაბამება კლასი პირადობის მოწმობა.
ასე, რომ შეიძლება დაემატოს კლასი გამარჯვება.
შემიძლია შეასრულოს ეს კონსოლი,
და რომ დავუმატებთ, რომ კლასი, და ახლა იგი გამოიყურება hideous, როგორც მოსალოდნელი იყო.
სოციალურ მეცნიერებათა ცენტრის ავტომატურად იღებს მიმართა კლასების, რომ თქვენ -
თუ იქ ცენტრი კლასის, ეს ავტომატურად იღებს მიმართა
თუ შეცვლის კლასი ელემენტს.
ამის შემდეგ ჩვენ შეგვიძლია მხოლოდ ამოიღონ ის გამოყენებით remove კლასის.
ასე რომ, თუ გაქვთ განსაზღვრული კლასების მსგავსად წითელი ან ხაზი გაუსვა,
და შემდეგ გსურთ ვრცელდება იმ ელემენტებით,
თქვენ არ გაქვთ ყველაფერი CSS სწავლება ყოველ ჯერზე.
შეგიძლიათ უბრალოდ დაამატოთ კლასს, ელემენტის, ხოლო შემდეგ იგი ავტომატურად გახდება -
ეს ავტომატურად გამოიყურებოდეს შესაბამისი, რომ კლასი.
ჩვენ ასევე ამოიღონ რამ, ამიტომ მე ვაპირებ შეარჩიოთ ყველა divs
გვერდზე და ამოიღონ მათ.
რა არის, რომ აპირებს გამოიყურებოდეს?
იგი აპირებს გამოიყურებოდეს არაფერი, ასე რომ რეალურად არაფერი დარჩა.
ჩემი პრეზენტაცია გაქრა.
შემიძლია ამოცნობა და მოუტანს მას უკან, საბედნიეროდ,
იმიტომ, რომ ეს უბრალოდ გაშვებული ერთხელ,
მაგრამ ეს მაგალითი მოხსნის, თუ გვინდა, რომ მთლიანად გაანადგურებს ელემენტს off გვერდზე.
>> თქვენ ასევე გადაწერა, და მე ვაპირებ შეარჩიოთ ყველა პუნქტის tags გვერდზე
და წავიდეთ შიგნით მათ და შეცვლის რაც არ უნდა ტექსტის აქვთ მათ
მხოლოდ სიტყვა "ტესტირება".
თუ ამის, თქვენ შეცვალოს ყველა პუნქტი გვერდზე ეს ტესტირება.
Yep. ისინი ყველა შეიცვალოს ტესტირება.
ასე რომ, მაგალითად მიღების ტექსტი და overwriting მას.
ასევე შეგიძლიათ მიიღოთ ინფორმაცია, და ეს ნამდვილად ზემოთ for შეტანის ყუთები.
თუ თქვენ გაქვთ შეტანის ყუთი, რომ ხალხი ბეჭდვის პერსონალის შევიდა,
ხალხი ბეჭდვის პერსონალის შევიდა,
აქ ჩვენ შერჩევა შეყვანა, ნებისმიერი ფორმით შეყვანა tag რომელზეც ტიპის ტექსტი.
ამ შემთხვევაში, მხოლოდ ერთი შეტანის ყუთი მთელი პრეზენტაცია,
ასე რომ ჩვენ უბრალოდ აირჩიეთ პირველი და შემდეგ ჩვენ მოვუწოდებთ val ფუნქციის იგი.
რომ დააბრუნებს ღირებულება, ხოლო შეყვანის ყუთი,
ღირებულება მხოლოდ რაც არ უნდა მოხდეს, რომ იყოს მის შიგნით.
ასე რომ, თუ ამას ვაკეთებთ, ეს მხოლოდ ბრუნდება სიმებიანი პერსონალი.
და თუ ჩვენ მას შემდეგ კვლავ წერილობით მეტი პერსონალი, ის იქცევა მეტი პერსონალი.
ეს ერთი დიდი გზა ხელმისაწვდომობის ელემენტების შეტანის ყუთი, ხოლო შემდეგ ჩეკი,
ეს მოქმედი ელფოსტა, არის ეს სწორი თარიღი, მაგალითად.
შეგიძლიათ უბრალოდ ვიღებ პერსონალის მყისიერად, როგორც ადამიანები აკრეფით ის,
და შემდეგ შეამოწმებს თუ არა ეს მოქმედებს, გაგზავნის უკან სერვერზე, არაფერი გინდათ იგი.
და ასე შეღწევის რა შიგნით იმ ყუთები.
>> თქვენ ასევე ცვლილებები სოციალურ მეცნიერებათა ცენტრის პირდაპირ, ასე რომ ნაცვლად დასძინა
კლასი, რომელიც რამდენიმე წინასწარ განსაზღვრული თვისებები,
თქვენ შეგიძლიათ დაამატოთ რაც არ CSS გსურთ არაფერი.
მოდით select ორგანო, რომელიც მთელი პრეზენტაციის
და ფერის არის ქონება, რომელიც განსაზღვრავს, თუ რა ფერები ტექსტი არის.
თუ შევცვლით მას წითელი, ყველა ტექსტს გვერდზე გახდება წითელი.
ჩვენ შეგვიძლია ამის გაკეთება რაღაც ფონის ფერი ლურჯი,
იქ წავიდეთ ეს ლამაზი.
ამის გაკეთება შეგიძლიათ არაფერი გსურთ ამ.
გამოყენება CSS ქონება, შეგიძლიათ ნამდვილად ცვლილებები რამდენად არაფერი გამოიყურება ნებისმიერ დროს.
შემდეგი რამ არის ეფექტი.
ეფექტი ძირითადად იგივეა შეცვლის CSS,
მაგრამ ისინი რეალურად უზრუნველყოფს რამდენიმე დამატებითი ანიმაცია მას.
ასე რომ, ნაცვლად მხოლოდ აჩვენებს ან იმალებიან რაღაც ან იცვლება ფერი,
თქვენ შეგიძლიათ რეალურად ხდის მთავრდებოდა.
აი დოკუმენტაცია, თუ გვინდა, რომ შევხედოთ დაწვრილებითი დოკუმენტაცია იგი.
მაგრამ მე ვაპირებ დაფაროს მთავარი პირობა.
არსებობს შოუ და დამალვა თვისებები.
ჩვენება / დამალვა ID რეალურად შეესაბამება ეს მთელი ყუთი,
ასე რომ, თუ მე მალავს, ის მხოლოდ გაქრება.
და მე შემიძლია კიდევ ერთხელ თუ მინდა, რათა ის დაბრუნდება.
და ეს უკან. იგი პრაქტიკულად არ ქრება,
მე პრაქტიკულად არ ამოიღონ იგი გვერდზე, მე მხოლოდ მითითებული CSS ქონებას ხილვადობა ფარული
ასე რომ თქვენ ვერ ვხედავ მას აღარ.
არის ასევე ლღობას up და ლღობას ქვემოთ;, რომელიც საშუალებას გაძლევთ, რომ ამ ძალაში.
ეს სლაიდები მდე ქრება, და მას შემდეგ ქრება
შეგიძლიათ ლღობას მას, რათა ის დაბრუნდება. და ახლა უკან.
არის ასევე ამ fade ეფექტი, რომელიც - fade ID შეესაბამება ეს ყუთი.
თუ მე ქრებოდა ის, მაშინ ეს თქვენ ნელა ქრება.
მე ასევე შემიძლია ქრებოდა მას, და ეს დავბრუნდებით.
ასევე შეგიძლიათ ამის გაკეთება fade to, რომელიც სპეციფიკური fade ფუნქცია.
თქვენ შეგიძლიათ ეს ქრებოდა კონკრეტულ opacity, რომ გსურთ.
ასე რომ, თუ ქრებოდა იგი ნელა .5, ეს გავხდებით ნახევარი ჩანს.
მე შემიძლია მას წასვლა .1, და უკან 1 რათა ის სრულად ხილული ერთხელ.
ეს მხოლოდ კიდევ ერთი ანიმაცია რომ თქვენ შეუძლია გააკეთოს.
>> ასევე არსებობს გადართვა ეფექტი.
ამიტომ, მე ვაპირებ შესარჩევად გადართვა ID, რაც შეესაბამება ეს ყუთი,
და რომ div შეგიძლიათ დარეკოთ გადართვა, თუ ეს თვალსაჩინო გახდება უხილავი,
თუ ეს უხილავი გახდება ხილული ერთხელ.
ასე რომ, მე მხოლოდ უწოდა გადართვა ფუნქცია ორჯერ პირველი იყო
იგივე როგორც დამალვა, მეორე ზარი იგივე როგორც შოუ.
და ასევე შეგიძლიათ ამის გაკეთება ერთად fade გადართვა,
რომელიც იგივეს შვება, გარდა ფაქტობრივად fades.
და იგივე რამ slide თემა.
არსებობს მიჯაჭვული მოვლენები ისევე, რაც იმას ნიშნავს,
თუ თქვენ ელემენტს და მხოლოდ მოვუწოდებთ რამოდენიმე ანიმაცია მეთოდები მასზე,
თუ უნდოდა ეს ქრებოდა out, მაშინ ლღობას ქვემოთ,
და მაშინ დასამალი და შემდეგ ქრებოდა შემდეგ, იგი ყველაფერს გააკეთებს მათ ზედიზედ.
ასე გაქრა, დაბრუნდა - რატომღაც მალავენ, ასე არ მოხდა.
შევეცადოთ ის. ჰო, ასე გაცვეთილ out და მერე slid მოშორებით.
გარდა ამისა არსებობს უამრავი სხვა. თქვენ შეგიძლიათ გამოიყენოთ animate ფუნქცია
შექმნა საკუთარი ანიმაცია, რომელიც საკმაოდ რთული,
მაგრამ ეს საშუალებას გაძლევთ უსასრულო extensibility.
შეგიძლიათ გააკეთოთ ნებისმიერი სახის ანიმაცია გსურთ.
თქვენ ასევე შეგიძლიათ მდგომ მდგომ რამდენიმე ანიმაციის დროს.
ასე რომ, თუ გსურთ რაიმე ფრენა მთელს გვერდზე,
slide ზემოდან უფლება ქვედა მარცხენა, შეგიძლიათ ამის გაკეთება,
და მხოლოდ არის რამოდენიმე ქმედებები აპირებს ერთ შემდეგ სხვა.
>> შემდეგი რამ ჩვენ ვაპირებთ ვისაუბროთ არის მოვლენები.
მოვლენები იძლევა საშუალებას - ჯერობით, ჩვენ ახლახანს ბეჭდვის რამ შევიდა console
და ეს არის ერთი გზა, რათა ეს მოხდეს,
არამედ, ფაქტობრივი გვერდზე, თქვენ არ აპირებს შეძლებს
მიიღოს შესახებ ტიპის რამ შევიდა კონსოლი.
გსურთ რამ მოხდება ავტომატურად.
ამისათვის თქვენ უნდა გამოვიყენოთ მოვლენები, რომ გაააქტიუროთ ზოგიერთ გარკვეული მოვლენა ხდება.
შემოწმება შეგიძლიათ დოკუმენტაციის სრული დეტალები.
ასე რომ, ვნახოთ. ჩვენ გვინდა დამალვა ან ნაჩვენები ყუთი,
მაგრამ ახლა ამ ღილაკს არ აკეთებს, რადგან მე არ განახორციელოს ამაზე.
მე ვაპირებ წასვლა ფაქტობრივი HTML გვერდი.
აი slide. არსებობს div for slide.
მას აქვს კლასი slide.
აქ არის ტექსტი. ახლა არის ეს ყუთი და ყუთში ღილაკს.
რა ჩვენ რეალურად ეს გაქრება?
პირველ რიგში, მოდით, წერენ ფუნქცია, რომელიც იღებს ყუთი ID გაქრება.
ეს არის სინტაქსი funtion, მოდით უბრალოდ ეძახით hideTheBox.
იგი არ მიიღოს ნებისმიერი არგუმენტაცია, რადგან არსებობს არანაირი არგუმენტი უნდა იქნას მიღებული.
ჩვენ შეგიძლიათ ყუთში პირადობის მოწმობა.
ამიტომ გამოყენებით jQuery შერჩევა, ჩვენ შეგვიძლია შერჩევა ყუთი ID,
შემდეგ კი მხოლოდ ის გაქრება.
მოდით ეს ქრებოდა out.
თუ ჩვენ გაიქცა ამ ფუნქციის ფაქტობრივი console,
ჩვენ შეგვიძლია განვსაზღვროთ ამ ფუნქციის, ჩვენ შეიძლება დავარქვათ hideTheBox და მუშაობს.
მაგრამ ჩვენ გვსურს მოხდეს, როდესაც ღილაკს ფაქტობრივად დაპრესილი.
ამისათვის, ჩვენ უნდა გამოვიყენოთ მოვლენაა.
ვუკავშირდები ღონისძიება კონკრეტულ ღილაკს ან მოქმედებაზე ხდება,
ჩვენ უნდა შეარჩიოს ელემენტი, რომელიც ღონისძიება გამოიწვევს -
ან რომ გამოიწვევს შემთხვევაში, ვწუხვარ.
>> ასე რომ, პირველ რიგში, მოდით შერჩევა ყუთი ღილაკს ID
რადგან ეს ღილაკს და ახლა, რომ ღილაკს
ჩვენ გვინდა, რომ შეიქმნას ანიმაცია, როდესაც ის დაწკაპავთ.
ასე რომ ამ დაჭერით ფუნქცია.
ეს გაძლევთ საშუალებას სავალდებულოა სხვა დანიშნულების მას.
ეს ფუნქცია იღებს კიდევ ერთი ფუნქცია, როგორც არგუმენტი
ჩვენ შეგვიძლია გაივლის hideTheBox ფუნქცია,
და როცა ამ ღილაკი დაწკაპავთ, რომ ფუნქცია ავტომატურად შეასრულოს.
ასე რომ, ეს იმუშავებს, თუ ჩვენ გადარჩენა ამ, მე ამოცნობა,
და ერთ - ერთი, მეორე, მე ბოდიში.
ნება მომეცით დაფიქსირება ამ მართლაც სწრაფად.
Okay. იქ ჩვენ წავიდეთ. ასე რომ, ახლა ყუთი გადაშენების როდესაც ჩვენ ღილაკს.
ასევე შეგვიძლია შევცვალოთ ეს უბრალოდ fadeToggle,
მისი შეცვლა მხოლოდ იმიტომ, რომ დასამალი ან ნახოთ ყუთი,
და ეს ასევე იმუშავებენ ძალიან, თუ ჩვენ ცარიელია.
ჩვენ შეგვიძლია მალავს, ჩვენ შეგვიძლია ასევე აჩვენებს, და რომ გააგრძელებს მუშაობას.
კიდევ ერთი რამ შეგვიძლია გავაკეთოთ არის ის, რომ ჩვენ არ რეალურად უნდა განისაზღვროს ამ hideTheBox ფუნქცია
სანამ ჩვენ მოვუწოდებთ დაჭერით ფუნქცია.
ასე რომ, ნაცვლად განსაზღვრის ფუნქცია და მოუწოდებს hideTheBox,
ჩვენ მხოლოდ აპირებს ეძახით, თუ ეს ის არის დაწკაპავთ.
ასე რომ, ჩვენ შეგვიძლია განვსაზღვროთ, რომ ეს ანონიმურად აქ,
რაც ფუნქცია, რომელიც JavaScript აქვს.
თქვენ შეგიძლიათ განსაზღვრავს ფუნქცია; ჩვეულებრივ, ჩვენ ვიტყოდი ფუნქცია hideTheBox
არგუმენტები, არამედ, ჩვენ შეგვიძლია, უბრალოდ ამბობენ ფუნქციონირებას არანაირი არგუმენტი,
დაიწყოს curly მუდმივი წინააღმდეგობა გაუწიოს, განისაზღვროს, ფუნქცია,
ახლოს რომ curly მუდმივი წინააღმდეგობა გაუწიოს, და შემდეგ უბრალოდ განვსაზღვროთ ფუნქცია აქ,
ფარგლებში პირველი ფრჩხილებში და ბოლო ფრჩხილებში
რომელიც შეესაბამება არგუმენტები დაჭერით ფუნქცია.
ასე რომ, ჩვენ გავლის ამ ფუნქციას, შეგვიძლია გადააკოპირეთ ეს ხაზი კოდი სწორედ აქ,
და რომ გავაკეთებ ზუსტად იგივე.
ახლა ჩვენ არ გვაქვს ამ შემთხვევითი fadeTheBox ფუნქცია
რომ სხდომაზე გარშემო გაურკვეველი მიზეზით.
ფუნქცია განისაზღვრა ანონიმურად, მას არ გააჩნია სახელი.
ეს მხოლოდ შესრულდეს, როცა ჩვენ დააკლიკეთ ყუთი ღილაკს.
ასე რომ განაახლოს კიდევ ერთხელ, კიდევ ერთხელ, და თქვენ ხედავთ, რომ ეს ჯერ კიდევ მუშაობს.
და ეს, თუ როგორ შექმნა ღონისძიებები.
>> არსებობს ბევრი სხვადასხვა ღონისძიებები, რომ ჩვენ შეგვიძლია გამოვიყენოთ.
მე ვაპირებ გადართვის უკან გამოყენებით console უბრალოდ, თუ როგორ ეს მუშაობა.
პირადობის მოწმობა თითოეული ამ შეესაბამება თითოეულ ყუთში.
ასე რომ, ეს ყუთი დაჭერით ID, ამ ერთი გასაღები ID, და ამ ერთი თაგვის პირადობის მოწმობა.
კიდევ ერთი რამ არის, რომ არც ერთ ამ აქციის ფუნქციის ვიდრე ბეჭდვის ის ყოველ ჯერზე,
მე რეალურად გაგრძელდება და განისაზღვრება ეს ქმედება ფუნქცია ქვემოთ აქ.
ამას იგივე როგორც hideTheBox ფუნქცია.
იგი იღებს ეს ყუთი და არც fades ის ან fades ის სისტემაში
სწორედ ამ მიზეზით, ჩვენ შეუძლია გამოიყენოს იგი აქ.
ასე რომ, თუ ჩვენ ღილაკის ამ დაჭერით ID, ჩვენ გვსურს ყუთი გაქრება ან ჩნდებიან.
ეს იგივეა ღილაკს რომ ჩვენ გვქონდა ამ ბოლო slide.
ახლა მას შემდეგ, მოვუწოდებთ, რომ ჩვენ შეგვიძლია ღილაკის ამ და ყუთი გაქრება,
შემდეგ დააჭირეთ კიდევ ერთხელ და ფანჯარა ჩნდებიან.
ეს არის საკმაოდ მარტივია. ორმაგი დაჭერით იგივეს შვება,
გარდა ამას ორმაგი დაჭერით.
ასე რომ, თუ თქვენ დააჭირეთ ერთხელ და დაწკაპეთ იგი კვლავ არაფერი მოხდება,
მაგრამ თუ ორმაგად დაწკაპეთ სწრაფად, რომ თქვენ გაქრება.
თუ თქვენ ორმაგად დაწკაპეთ კიდევ ერთხელ, ეს დავბრუნდებით.
ასე რომ, საკმაოდ მარტივია.
კომპიუტერის ერთგვარი უცნაური, მე არ ვფიქრობ, რომ რეალურად მუშაობს ეს მაგალითი
რადგან გასაღები ქვემოთ, გასაღები up და ძირითად პრესისა და სხვა გასაღები ქმედებები
გაააქტიუროთ რაც არ უნდა ელემენტს თქვენ ავალდებულებს მას.
მაგალითად, თუნდაც შეკრული გასაღები ქვემოთ სხეულის ან რაღაც მთლიანად,
მაშინ ჯერ კიდევ გაააქტიუროთ არ აქვს მნიშვნელობა, - ეს არ კონკრეტული.
მე არ უნდა დაჭერით ეს და დააჭირეთ ღილაკს, რათა არაფერი ქრება.
ეს დაიწყებდა მოქმედებას მიუხედავად იმისა, რა ელემენტს მე გაკეთებული სისტემაში
ასე რომ, ეს არ რეალურად მუშაობას ამ მაგალითია
იმიტომ, რომ ის არ აღიარებს ჩემთვის, როგორც შესვლის წვლილის შეტანა კომპიუტერის div.
>> მაგრამ თუ გადავხედავთ თაგვის ქმედებები,
პირველი hover, და მას შეუძლია გააკეთოს რამდენიმე ამ გამოყენებით CSS.
თუ იყენებთ CSS, შეგიძლიათ შექმნათ ასე, რომ თუ თქვენ hover მეტი რამე,
მაშინ მისი სტილი ცვლილებები.
მაგრამ მისი გამოყენება jQuery შეცვლა შეიძლება სტილის სხვა რამ ასევე.
ასე, მაგალითად, ჩვენ ვაპირებთ, რომ მოვუწოდო, თუ ჩვენ hover მეტი ამ div.
ეს იმას ნიშნავს, თუ ჩვენ hover მეტი, მაშინ ყუთი გაქრება.
თუ ჩვენ გადაადგილება დაშორებით ეს, ფანჯარა ჩნდებიან.
თუ ჩვენ ამას ვუწოდებთ და hover მას, ყუთი არ ქრება,
და, როგორც კი გადაადგილება მოშორებით, იგი ბრუნდება.
თუ ჩვენ ამას ვუწოდებთ hover ფუნქციის თაგვის ID,
რაც შეესაბამება ეს ყუთი, მაშინ თუ ჩვენ hover მეტი ყუთი,
შემდეგ ყუთი რეალურად გაქრეს - ის ყოფნის ხმაურიანი სწორედ ახლა, მაგრამ -
თუ ჩვენ გადაადგილება დაშორებით, ეს იქნება ჩნდებიან. ახლა ის უკან რაიმე მიზეზით.
თაგვის შესვლისა და თაგვის ნაბიჯი ფუნქციებია გარკვეულწილად მსგავსი, მაგრამ ოდნავ განსხვავებული.
Mouse შემოსვლა მხოლოდ ააქტიურებს როდესაც თაგვის შედის ყუთში, როგორც მოსალოდნელი იყო.
ასე რომ, თუ თქვენ გადატანა შევიდა, რომ თქვენ გაქრება.
მაგრამ ეს არ ჩნდებიან, როდესაც თქვენ გადაადგილება მოშორებით, თქვენ უნდა გადავიდეს უკან გადატანა იგი მას უკან დაბრუნდნენ.
არის ასევე თაგვის ნაბიჯი ფუნქცია, რომელიც ააქტივებს
როდესაც ეს თაგვის კიდევ იმყოფებიან ყუთში.
ასე რომ, ეს უბრალოდ ვტრიალებთ, უქრებათ და გარეთ.
და ეს რეალურად ხე - როგორც ჩანს, ეს უბრალოდ უქრებათ და გარეთ,
მაგრამ სინამდვილეში ხე გაცილებით მეტი ქმედებები ვიდრე ეს,
ასე რომ, როდესაც თქვენ გადაადგილება მოშორებით ეს უბრალოდ შენარჩუნებას აპირებს, რადგან ეს ხართ, როგორიც ათასი მათგანი.
შესაძლოა, არა ათასი. შესაძლოა ხუთ.
ეს ჟურნალი მეტია.
საქმე იმაშია, ყველა მაუსის ქმედებები, არის ბევრი მათგანი.
თქვენ up მეორეს პირობა, მაგრამ ისინი ყველა ოდნავ განსხვავებული,
და შეგიძლიათ აირჩიოთ რომელი ერთი გჭირდებათ
ამისთვის რომელი კონკრეტულ მიზანს თქვენ ცდილობთ.
>> შემდეგი რამ მე ვაპირებ ვისაუბრო არის AJAX.
AJAX, მე ვიცი, ჩვენ არ ითვალისწინებდა JavaScript in იმდენი სიღრმე წელს,
ასე რომ მე მხოლოდ აპირებს საუბრობენ AJAX კულტურას ერთი წუთით.
AJAX დგას ასინქრონული JavaScript და XML.
ეს, ძირითადად, მაგალითად, როდესაც თქვენ Facebook და ეს უბიძგებს თქვენ დადგენა,
ეს იმიტომ, AJAX არის გაშვებული თქვენს ბრაუზერში.
ყოველ რამდენიმე წამში ბრაუზერში, ფაქტობრივად,
აპირებს Facebook-ის სერვერები, სთხოვს, გაქვთ ახალი არაფერი ჩემთვის,
და მერე ბრუნდება თქვენ.
ეს საშუალებას იძლევა მოითხოვს სერვერზე
გარეშე ფაქტობრივად, რომელსაც ჩატვირთვა გვერდზე.
ასე რომ, ჩვეულებრივ, თუ თქვენ მხოლოდ გამოყენებით PHP და მონაცემთა ბაზა,
თქვენ უნდა ამოცნობა გვერდზე სანამ შეგიძლიათ მიიღოთ ახალი ინფორმაცია სერვერზე.
მაგრამ გამოყენებით AJAX, შეგიძლიათ გაიყვანოს, რომ ახალი ინფორმაცია მუდმივად,
ან გაიყვანოს მას მხოლოდ ზედა ღილაკს ან რამე მსგავსი.
ასე რომ, ეს გვაძლევს საშუალებას გაგზავნას ითხოვს გვერდის განახლების გარეშე,
და ჩვენ შეიძლება გამოიყენოთ GET, ან POST მოითხოვს.
>> GET ითხოვს არიან, მაგალითად, თუ თქვენ უნდა Google.com
და ამის გაკეთება q = ტესტი. ეს რაც მათთვის შეკითხვის ტესტი.
სწორედ ოჯახის თხოვნით რადგანაც ეს ავლით იმ პარამეტრების შევიდა URL თავად.
POST მოთხოვნა, თითქოს თქვენ გაგზავნის მათი მეშვეობით პოსტი.
ეს იგივეა, თქვენ დააყენა ეს წერილი და მოვახდენთ ეს off მათ,
მაგრამ მათ არა რეალურად ვხედავ შინაარსი. ისინი არ ჩანს URL.
თქვენ არ შეგიძლიათ პირდაპირ შეიტანოთ ეს, თქვენ უნდა გააგზავნოთ თითქმის ფარულად.
ეს არის ამ პოსტის.
მაგრამ მისი გამოყენება jQuery, შეგიძლიათ GET და პოსტ ითხოვს
ბევრად უფრო მარტივად, ვიდრე თქვენ ჩვეულებრივ შეიძლება გამოყენებით მხოლოდ უბრალო JavaScript.
შეგიძლიათ შეკითხვის APIs გამოყენებით GET ითხოვს, და ასევე შეგიძლიათ შემოწმება შესვლისას ინფორმაციას.
მეორე გვერდზე, მე შექმნილი ეს, რომელიც სთხოვს, "რა არის ლანჩზე?"
გამოყენებით ჰარვარდის საკვები API, მოდით გაიყვანოს რომ up.
ეს არის მხოლოდ მაგალითია, თუ როგორ შეგიძლიათ გამოიყენოთ jQuery უნდა გააკეთოს ოჯახის თხოვნით, API
და ინფორმაცია მიიღოს უკან მას.
ასე რომ, ჩვენ გვინდა, რომ მენიუს დღეს
და ჩვენ გვინდა, რომ რა ლანჩზე.
აი მისამართი, რათა შეიქმნას ოჯახის მოთხოვნით jQuery.
თქვენ იყენებთ $. მიიღეთ ფუნქცია.
პირველი არგუმენტი URL, ისე ზუსტად რა თქვენ querying.
მაშინ შემდეგი არგუმენტი ფუნქცია გაუშვებს, როდესაც ოჯახის თხოვნით დასრულებულია.
ასე რომ თქვენ off რამდენიმე მოთხოვნას სერვერზე, დაველოდოთ მას უკან დაბრუნდნენ.
როდესაც ეს იმას დაბრუნებულ ვაპირებთ გარკვეული ქმედების მონაცემები, რომ ის უკან სერვერზე.
მოდით წავიდეთ წინ და კოდექსს, ასევე.
მე არ კოდექსს ან, განზრახ.
აი Todo. პირველ რიგში, მოდით გამოვიყენოთ ღონისძიება შესასრულებლად სავალდებულო
ასე რომ, როცა ამ ღილაკს დაჭერის, ჩვენ off ოჯახის თხოვნით.
ხოლო როდესაც რომ მიიღოს თხოვნით ბრუნდება ზოგიერთი მონაცემებით,
ჩვენ ვაპირებთ დაწერა მას ამ კვება ინფორმაციის ID div.
პირველ რიგში, მოდით შერჩევა საკვები ღილაკს პირადობის მოწმობა.
როდესაც ეს დაწკაპავთ, ჩვენ გვინდა, რომ ეს რაღაც.
მოდით, უბრალოდ, რომ მას ანონიმური fuction, როგორც ადრე.
შემიძლია გადაიტანოთ იმ curly აფრთხილებს,
და როდესაც ამ ღილაკს დაჭერის, ჩვენ გვინდა გაგზავნას ოჯახის თხოვნით
რათა შეამოწმოს რა ლანჩზე.
გავაკეთოთ, რომ ჩვენ შეგვიძლია მხოლოდ ჩაწერეთ $. მიიღოს.
ეს არის jQuery ფუნქციის გამოყენებით დოლარის ნიშანი.
იგი იღებს რამდენიმე არგუმენტს. პირველი URL,
მეორე უკუგამოძახება ფუნქცია, ფუნქცია, ე.წ.
როდესაც ეს მოთხოვნა რეალურად ბრუნდება.
მოდით, უბრალოდ აშენება URL პირველი.
ჩვენ შეგვიძლია იგი API, რომ დავით დაწერა up.
გამგზავრება, ჩვენ ვხედავთ, რომ ეს food.cs50.net/api/1.3/menus,
და მაშინ უბრალოდ გადის სახელების პარამეტრების, რომ გსურთ.
ასე პარამეტრების 1 ღირებულება 1.
ეს ჰგავს სტანდარტული თარიღი, დაწყების თარიღი, უპირობოდ დღეს
თუ არ შევა არაფერი, და დასრულების თარიღი, ასევე დეფოლტის
დღეს თუ არ შევა არაფერი.
ეს არის ის, რაც ჩვენ გვინდა. ჩვენ გვინდა, რომ უბრალოდ ინფორმაციას დღეს.
>> ჩვენ გვინდა ფორმატში უნდა იყოს JSON.
ეს მხოლოდ უკანონო, თქვენ შეგიძლიათ გამოიყენოთ ნებისმიერი ფორმით, რომ გსურთ.
თქვენ შეგიძლიათ გამოიყენოთ CSV, მაგრამ JSON არის JavaScript ობიექტის notation.
ეს ძალიან ადვილია JavaScript უნდა გვესმოდეს თუ რას ნიშნავს,
და ჩვენ შეგვიძლია ბეჭდვა ეს უფრო მარტივად რომ გზა.
მოდით მოითხოვოს იგი JSON და მოდით მოთხოვნით სადილი.
ასე რომ, კვება = ლანჩი. უბრალოდ დაწერა, რომ მისამართი, ჩვენ დაბრუნდეს აქ.
აქ არის მენიუები. პირველი პარამეტრი არის გამომავალი = JSON
იმიტომ, რომ ის, რაც ჩვენ გვინდა, და თქვენ გამოყოფა პარამეტრების და.
მეორე პარამეტრი არის - არ მახსოვს.
კვება. გვინდა კვება = ლანჩი.
შეგიძლიათ შეამოწმოთ ეს მისამართი აკრეფით იგი თქვენს ბრაუზერში და აპირებს იგი.
ეს მოგცემთ რამდენიმე გამომავალი. უბრალოდ რამოდენიმე პერსონალი, რომ ის ლანჩზე.
ეს ამ მახინჯი ფორმატში. ჩვენ გვინდა, რომ ბეჭდვა ეს onto ჩვენი უკეთეს ფორმატში.
ამიტომ URL სწორია, ახლა ჩვენ უბრალოდ უნდა დაწეროს ფუნქცია
მოვუწოდებთ, როდესაც თხოვნის წარმატებული.
ეს ფუნქცია პრაქტიკულად არგუმენტი. ეს იქნება მონაცემები.
მონაცემები რა მოდის უკან ოჯახის თხოვნით შემდეგ ოჯახის თხოვნით კეთდება.
ჩვენ შეგვიძლია ამის curly აფრთხილებს, აქ ვწერთ ანონიმური ფუნქცია
რომ გაუშვებს, იყენებს, რომ მონაცემები, როდესაც ჩვენ ვიღებთ ინფორმაციას უკან.
ასე რომ მონაცემები, როდესაც ჩვენ აკრეფილი ეს მისამართი,
ეს არის ის მონაცემები აპირებს გამოიყურებოდეს. ეს იქნება ამ უზარმაზარი სიმებიანი.
მაგრამ კარგი ისაა, JavaScript-ს შეუძლია გარჩევის ის გამოყენებით JSON.parse ფუნქცია.
მოდით შევქმნათ ახალი ცვლადში გარჩევის მონაცემები.
და გარჩევის მონაცემები მასივი ობიექტები.
ყოველ ობიექტს შეიცავს ინფორმაციას, როგორიცაა - კარგად, მოდით შევხედოთ.
მას აქვს თარიღი, კვება, კატეგორიის, რეცეპტი, ეს ყველაფერი სხვა პერსონალი.
მოდით უბრალოდ ამობეჭდოთ სახელი თითოეული.
მოდით iterate მთელ მასივი პერსონალი, რომ ჩვენ დავუბრუნდეთ მას,
და მხოლოდ ამობეჭდოთ თითოეული - ამობეჭდოთ სახელით თითოეული.
ეს არის for ციკლი.
>> JavaScript აქვს ეს სასარგებლოა syntax სადაც შეგიძლიათ შექმნათ ცვლადი და მარყუჟის მეტი მასივი,
და var i მხოლოდ iterator, ასე რომ ნაცვლად, რომელმაც უნდა გააკეთოს var i = 0,
i ნაკლები იყო სიგრძით, i + +, შეგიძლიათ მხოლოდ ამის var მე გაანალიზება მონაცემები.
ამ მაგალითად, გაანალიზება მონაცემები (ი) ხელს შეესაბამება მიმდინარე ელემენტს
საქართველოს მასივი, ფაქტობრივი ობიექტი.
და ჩვენ გვინდა სახელი გარეთ.
მოდით მხოლოდ ამის სახელი.
და ბოლოს, რაც, ჩვენ ვაპირებთ, რომ გარკვეული jQuery ერთხელ.
სინამდვილეში დაამატოთ ეს div ეს კვება ინფორმაციის div, რომ ამჟამად ცარიელია.
მოდით შერჩევა რომ.
ჩვენ ამის გამოყენება jQuery და აირჩიეთ კვება ინფორმაციის div პირადობის მოწმობა, ან კვება ინფორმაციის ID, ბოდიში.
ჩვენ გვინდა დამატება ამ.
თუ ჩვენ ეს გამოცდა, მაგალითად, რომ ეს მხოლოდ გადაწერა თითოეული დრო.
ასე რომ, ჩვენ უბრალოდ დამატება ამ.
მიმდინარე ელემენტის მასივი, მივიღებთ სახელი გარეთ,
და ჩვენ დამატება იგი ბოლომდე კვება ინფორმაციის ID div.
და შემდეგ უბრალოდ, რათა ის გამოიყურება სუფთა,
ჩვენ ასევე დამატება ხაზის შესვენების ამიტომ არ არის ყველა ერთ ხაზს.
ასე რომ, თუ ყველაფერი კარგად, რომ უნდა იყოს კარგი -
პირველ რიგში, როცა ამ ღილაკი დაწკაპავთ,
ეს იქნება off ოჯახის თხოვნით, ამ URL.
როდესაც მონაცემები ბრუნდება მისგან, რომ თქვენ გარჩევის მას,
გადაქცევას JSON, მარყუჟის მთელ მასივი წარმოადგენს, რომ მონაცემები,
და მერე დამატება სახელი და ხაზი შესვენება
ყველა ხაზი ამ კვება ინფორმაციის ID რომელიც ადრე ცარიელი.
ასე ბრუნდება ამ გვერდზე, ჩვენ ამოცნობა,
დაჭერით, გაირკვეს, - ეს არ მუშაობს. ეს არის ის, სამწუხაროა.
ეს არის სადაც გამართვის მოდის შემოსული
შეცდომა, ხაზის 1.
სწორედ საინტერესო.
ყველა უფლება, ისევე, ვიდრე დროის აკეთებს ეს მე მხოლოდ აპირებს
დახევის up გაკეთდეს ფაილი, რომელიც მე მაქვს, რაც დასრულდება ვერსია.
მე არ ვარ დარწმუნებული, თუ რა განსხვავება არის, მაგრამ შეგვიძლია უბრალოდ გახსნა up ნაცვლად.
და ჩვენ წასვლა AJAX, და ეს უნდა იმუშაოს სწორად.
სწორედ ეს იყო ლანჩზე დღეს
არ კერძოდ წესრიგი, ციტატებით გარშემო, ამიტომ არ არის prettiest.
მაგრამ, ცხადია, თუ თქვენ ამით საბოლოო პროექტი,
თქვენ გახდის მას გამოიყურებოდეს უკეთესად.
მაგრამ ეს მხოლოდ მარტივი მაგალითია, თუ როგორ აკეთებთ ოჯახის თხოვნით.
და თუ დავაკვირდებით ფაქტობრივი კოდი, მე გამოცნობა, მე პირადად დარწმუნებული ვარ
ეს ჯერ კიდევ საკმაოდ ბევრი იგივე.
ოჰ, დამავიწყდა გარდაქმნას მას სიმებიანი, რომ ეს.
არა, ეს ჯერ კიდევ არ მუშაობს. მიუხედავად ამისა, აქ არის ფაქტობრივი დასრულდა კოდი
იმისათვის, რაც უნდა გამოიყურებოდეს,
გარდა ამისა, ეს იგივეა, რაც მე უბრალოდ განხორციელდა.
როდესაც თქვენ დააჭირეთ ღილაკს, იგი იყენებს GET JSON ავტომატურად გარჩევის მონაცემები.
იგი იღებს მონაცემების უკან და მარყუჟების მეშვეობით მთელი რიგი
და ბეჭდავს out - ის რაც არის ლანჩზე დღეს, სახელწოდება,
და appends ხაზის შესვენების შემდეგ ყოველი ხაზი.
ეს არის ის, თუ როგორ გამოიყენოთ ოჯახის ფუნქცია.
>> თქვენ ასევე შეგიძლიათ ჩანაწერი, რომელიც მე არ მაქვს დრო
დაწერა up მაგალითი, მაგრამ ჩვენ შეგვიძლია შევხედოთ დოკუმენტაცია.
თუ გადავხედავთ jquery.post,
თქვენ ხედავთ, რომ თითქმის იგივე.
თქვენ URL, არამედ გავლის პარამეტრების გამოყენებით -
უბრალოდ აყენებს მათ სიმებიანი for URL თავად,
თქვენ უნდა გაიაროს ამ მონაცემთა ცვლადი
რომ ძირითადად მასივი, ლექსიკონი, რომ რუკების პარამეტრების ღირებულებებს.
თქვენ გაივლის, რომ, და რომ აგზავნის გამოყენებით პოსტი.
და კიდევ აქვს, რომ, მაშინ აქვს წარმატების ფუნქცია
რომ გაუშვებს როდესაც მონაცემები ბრუნდება.
წინააღმდეგ შემთხვევაში, ეს ზუსტად იგივე. ამიტომ გამოყენებით ჩანაწერი,
დაგვჭირდება გამოიყენოთ ჩანაწერი, მაგალითად, თუ თქვენ გაქვთ შეყვანის ფორმა
თქვენ ადამიანებს შეტანის პაროლები შევიდა, და იმ პაროლები off
თქვენს უკან ბოლოს სცენარი, რათა შეამოწმოს მონაცემთა ბაზაში თუ არა, რომ შესახებ მოქმედებს თუ არა.
ამის გაკეთება შეგიძლიათ, რომ ყველა იყენებს jQuery ნაცვლად, რომელმაც უნდა ამოცნობა გვერდზე ყველა.
ასე მე განხორციელდა დღიურში, რომ მე აჩვენა თქვენ ადრე.
თუ ჩვენ ბოლომდე ვერსია და სისტემიდან გამოსვლა, სისტემიდან გამოსვლა,
სისტემიდან გამოსვლა არ მუშაობს.
ასევე, ნება მომეცით უბრალოდ გახსენით ეს ახალი ფანჯარა.
აქ პაროლი და მივდიოდი აკრიფოთ რაღაც შემთხვევითი.
ეს არ მუშაობს, მაგრამ თქვენ ხედავთ, რომ ჩვენ არ
რეალურად უნდა ამოცნობა გვერდზე ყველა.
კოდი,, თუ გინდათ შეხედეთ მას,
ეს ყველაფერი შესაძლებელია აქ.
ასე რომ, კოდი დავწერე შარშან შუალედში.
როგორც ხედავთ, ჩვენ ვერ გაგზავნით POST მოთხოვნით.
მე მაქვს ფაილი სახელად login.php წელს დაბრუნდა ბოლოს,
რომელიც ამოწმებს თუ დაგავიწყდათ მოქმედებს.
პარამეტრების ჩვენ გადის უფრო პაროლი, mapped to
შეტანის, რომ ამ შეტანის ყუთი გაკეთებული.
ხოლო როდესაც მონაცემები ბრუნდება, ჩვენ შეამოწმოს.
თუ ეს მონაცემები ყალბი, მაშინ ჩვენ ვამბობთ, არასწორი პაროლი, ლღობას მას,
და მხოლოდ ის გაქრება ამის შემდეგ.
წინააღმდეგ შემთხვევაში, ჩვენ ჩატვირთვა გვერდი.
და ეს იყო ყველაფერი კეთდება გამოყენებით JSON.
ამ მრავალი ხაზი კოდი, შეგიძლიათ მხოლოდ გაივლის მონაცემების უკან ბოლოს,
თუ არა ეს სწორი, თუ არა თქვენ ხართ სწორად,
და ფაქტობრივად რეაგირება უნდა მოახდინოს, გადამისამართებას ადამიანი, სწორი გვერდზე
ან არ აძლევდა შესვლა და ეუბნება მათ, რომ მათ არასწორი პაროლი.
ასე რომ, თუ როგორ შეგიძლიათ jQuery POST
გაგზავნის POST თხოვნით, თქვენს უკან ბოლოს,
შემოწმების თუ არა ვინმეს შესული სწორად.
>> ყველა უფლება, ისე, რომ ყველაფერი მაგალითები მქონდა და ყველა პერსონალი მინდოდა დასაფარავად.
ეს ის ძირითადი რამ, რაც jQuery გაძლევთ ამის გაკეთება:
შერჩევა ელემენტები, შეცვალოს მათი გამოყენებით DOM მანიპულაცია,
შეგიძლიათ ეფექტი გააქტიურდეს რამ გარკვეული მოვლენების,
და ასევე არ AJAX მოითხოვს ძალიან ჩაირთოს და მარტივად.
ასე რომ, მადლობა იმისათვის, რომ ან თვალს,
და თუ თქვენ გაქვთ რაიმე შეკითხვები, უბრალოდ ნება მომეცით ვიცი. ჰო?
[სტუდენტური] დასაწყისზე როდესაც თქვენ აჩვენა, რომ ჰქონდა JSON შემდეგ POST მოთხოვნის შესრულების შეთავაზება,
და მე უბრალოდ მაინტერესებს, რა გააკეთა.
>> ჰო, ვხედავ. კითხვა იყო, რომ მაგალითად მე აჩვენა,
იყო სიტყვა JSON ამ შეთავაზებებს გარშემო -
მე მხოლოდ გაიყვანოს იგი კვლავ - დაახლოებით POST ფუნქცია.
მე მხოლოდ უბიძგებენ მდე აჩვენებს.
ასე რომ, აქ არის ჩანაწერი მოთხოვნა და არსებობს ამ JSON ამ შეთავაზებებს.
რომ მხოლოდ განსაზღვრავს რასაც ჩვენ ველოდებით გასასვლელი იყოს.
ასე რომ, თუ ჩვენ გაივლის JSON ის სავარაუდო მონაცემები ტიპის,
ეს არ არის მოთხოვნა, მაგრამ თუ ჩვენ გაივლის მას,
მაშინ მონაცემები ავტომატურად გაანალიზება როგორც JSON.
ასე რომ, ჩვენ არ უნდა მოვუწოდებთ JSON გარჩევის ფუნქცია მასზე,
ეს თქვენ უბრალოდ არ ავტომატურად.
და თუ თქვენ შეხედეთ დოკუმენტაცია ჩანაწერი,
არსებობს ამ მონაცემთა ტიპის ცვლადი, ტიპის მონაცემთა მოსალოდნელია სერვერზე.
ეს უპირობოდ ინტელექტუალური ვხვდები, რომ შეიძლება იყოს არასწორი,
ასე რომ თქვენ შეგიძლიათ დატოვეთ ცარიელი, მაგრამ ეს მხოლოდ ტიპის მონაცემები
ამ კოდების რომ თქვენ იყენებთ, თუ არა ეს JSON ან XML ან რაღაც.
>> ნებისმიერი სხვა კითხვები?
ყველა უფლება. თუ თქვენ გაქვთ რაიმე სხვა სახის კითხვებით, შეგიძლიათ მომაწოდეთ
ზე vshekhawat@college.harvard.edu,
და სლაიდები და კოდი უნდა იყოს ხელმისაწვდომი საკმაოდ მალე.
წარმატებებს გისურვებთ თქვენი საბოლოო პროექტებს, რომ თქვენ გამოიყენოთ jQuery.
[CS50.TV]