TOMAS REIMERS: Hi, ყველას. ჩემი სახელის Tomas Reimers. MIKE RIZZO: მე Mike რიცოს. TOMAS REIMERS: ჩვენ ვართ ორი CS50s TS. და დღეს ჩვენ წამყვანი სემინარი JavaScript და CSS ვებ apps. თუ გსურთ დაიცვას გასწვრივ, ლინკი არის სწორი იქ. და გსურთ განათავსოთ up კომპიუტერი მოკლედ? აქ არის ბმული. ეს პატარა საიტი, რომელიც აქვს კავშირები ყველა რესურსი, ჩვენ ვაპირებთ, რომ იყოს მიუთითებს დღეს და ასევე აქვს უამრავი სასარგებლო ინფორმაცია წერილობითი ჩვენს მიერ დაწვრილებით სიღრმისეული როდესაც თქვენ დაბრუნდეს, და თქვენ ცდილობთ მახსოვს რა ზუსტად არ ვამბობთ, რა იყო თქვენ ვსაუბრობთ, et cetera. MIKE RIZZO ყველა უფლება. ასე რომ დავიწყოთ. TOMAS REIMERS: ასე გსურთ დაიწყოს? OK. MIKE RIZZO: ჰო. ასე რომ, ჩვენ პირველი სასურველი იწყება ფართო მიმოხილვა შესახებ ინტერნეტში და ფაილის ტიპები, როდესაც დიზაინის საიტებზე. მიუხედავად იმისა, რომ ამ წარმოდგენის ჩვენ გვინდა შეღწევას შევიდა JavaScript ბევრი ბევრი მოგვიანებით, გვინდოდა დაიწყება off ერთად უბრალოდ, სახის, როგორც ჩიტის თვალის ხედი რა საიტზე და როგორ ვიფიქროთ იმაზე, დიზაინი ნახვა დასაწყისია. ასე, რომ თქვენ ბიჭები, ამ ეტაპზე - ეს მიმდინარეობს პარასკევს ღამით - უნდა ჰქონდეს წარმოდგენილი თქვენი CS50 ფინანსთა პრობლემა ადგენს. იმედია, რომ იყო კარგი გემოვნება რა ვებ პროგრამირების შეიძლება იყოს. მაგრამ აქ ჩვენ გვინდა, სახის, მისცეს კიდევ ერთი გემოვნების, ასევე. TOMAS REIMERS: ასე რომ მხოლოდ recap რა ხდება, როდესაც თქვენ ჩაწერეთ URL to თქვენს ბრაუზერში, რომ URL იღებს აიხედა კომპიუტერი. და თქვენი კომპიუტერის უკავშირდება სხვა კომპიუტერზე, რომელიც მასპინძლობს, რომელიც ნახვა. OK, ასე რომ, როდესაც მიდიხარ google.com, თქვენ დაკავშირებული ერთი Google-ის კომპიუტერი, რომელსაც აქვს ფაილი google.com. რის შემდეგაც იგი მოგთხოვთ კონკრეტული ფაილი. ასე რომ, თუ წასვლა - მე არ ვიცი - example.com / index.html ან / test.html, თქვენ აპირებს მოითხოვოს რომ კონკრეტული ფაილი. და სერვერზე აპირებს დაბრუნება თქვენ. მაშინ, ერთხელ თქვენ გავლა რომ ფაილი - ერთხელ თქვენ კომპიუტერში იღებს, რომ ფაილი - ის დაწყებას აპირებს ავაშენოთ ვებ გვერდზე. ახლა მას აქვს HTML ფაილი, რომელიც არის ერთგვარი მოსწონს სტრუქტურა ვებ გვერდზე. HTML ფაილი შეიძლება ასევე მითითებას CSS ფაილი, რომელიც განსაზღვრავს სტილი ვებ გვერდზე. JavaScript ფაილი, რომელიც განსაზღვრავს ურთიერთქმედება ვებ გვერდზე. ფაილები, რომლებიც მხოლოდ images. და შესაძლოა ბმული სხვა HTML ფაილი, რომელიც შეგიძლიათ შემდეგ ეწვევა. MIKE RIZZO: OK, დიდი. ასე, რომ თქვენ ბიჭები ყველა, ალბათ, painstakingly შექმნას ადგილობრივი მასპინძელი თქვენი ვირტუალური მანქანა. და რომ მხოლოდ, სახის, ადგილობრივი domain, რომ თქვენი კომპიუტერი მასპინძლობს მხოლოდ თქვენ თქვენი IP მისამართი. ასე რომ, რომ, მაშინ თქვენ შეგიძლიათ დაამატოთ ეს თქვენი საკუთარი ვებ გვერდები. ვგულისხმობ, CS50 ფინანსთა, თქვენ უნდა ჰქონდეს დამატება ზოგიერთი HTML გვერდებს, რომლებიც, სახის, გახვეული PHP გადატანა. მაგრამ საბოლოო ჯამში, რა თქვენი PHP გვერდები იყო outputting იყო HTML. მაგრამ ფიქრობდა თავში თავიდანვე საქართველოს pset, ჩვენ გვქონდა მითითებული ნებართვების ყველაფერი, არა? ასე რომ, ეს უბრალოდ ძირითადად საშუალებას გვაძლევს ვიცი , რომელიც შეიძლება წაიკითხოთ, დაწეროთ, და, შესაძლოა, შეასრულოს თითოეული ფაილი. ამიტომ, ჩვენ ვაპირებთ, რომ გავაკეთოთ სწრაფი - hm? TOMAS REIMERS: ამიტომ, ჩვენ ვაპირებთ გავაკეთოთ სწრაფი დემო. ასე რომ მხოლოდ შეგახსენოთ, როდესაც თქვენ დაკავშირება Google-ის კომპიუტერი - ვინც - და მოითხოვოთ ფაილი, კომპიუტერის პირველი უნდა დავრწმუნდეთ, თქვენ უფლებამოსილი რეალურად ნახოთ, რომ ფაილი ან წაიკითხა, რომ ფაილი რადგან ვერ ჰკითხეთ ნებისმიერი ფაილი, რომელიც კომპიუტერს, არა? ეს იქნება უსაფრთხოების საშიშროება. ასე რომ ფაილი სისტემები ვიყენებთ, როგორც ამ CS50 ელექტრო მოწყობილობების, სამი ზოგადად ადამიანები, რომლებიც შეიძლება ჰქონდეს უფლებები რაღაც. პირველი არის ის ფაქტობრივი მფლობელი თქმით ფაილი. მეორე ჯგუფი, რომელიც ფაილი ეკუთვნის. ჩვენ არ ვაპირებთ ფოკუსირება ძალიან ბევრი რომ. და ბოლო ისაა, სახის, როგორიცაა მსოფლიოს, ისევე როგორც ყველას, ვინც არის არ არის დამახასიათებელი, რომ ფაილი და არ გაქვთ რაიმე საკუთრების უფლების მას. ასე რომ, თუ ჩვენ მფლობელი, კომპანია, და შემდეგ მთელს მსოფლიოში. და შემდეგ, თითოეული ამ ჯგუფების, თქვენ შეიძლება ჰქონდეს ერთი სამი უფლებები, OK, ან მრავალჯერადი მათ. თქვენ შეგიძლიათ წაკითხული უფლებები. თქვენ შეგიძლიათ უფლება აქვს უფლებები. და თქვენ შეგიძლიათ შეასრულოს უფლებები. ასე თვალსაზრისით ფაქტობრივი ფაილის ტიპები, წაკითხული ნებართვა არის, როგორიც რეალურად კითხულობს შინაარსი ფაილი. მარჯვენა ნებართვა წერილობით აღნიშნულ ფაილი. შეასრულოს ნებართვის გაშვებული ფაილი, როგორც თქვენ, როდესაც თქვენ აწარმოებს ერთი თქვენი CS50 პროექტები. ასე რომ, როდესაც ჩვენ ფიქრი ფაილი ისევე როგორც მაშინ, როცა ჩვენ უნდა წაიკითხონ HTML ფაილი, რომელიც უნდა იყოს მსოფლიოში იკითხება, არა? სავარაუდოდ, ასევე მფლობელს სურს შეძლებენ შეცვალონ რომ ფაილი. ასე რომ, მფლობელი სჭირდება წაკითხვის და ჩაწერის უფლებები. ისინი ნამდვილად არ უნდა შეასრულოს. Group, ჩვენ ვაპირებთ მკურნალობა ისევე, როგორც მსოფლიოს ახლა. ასე რომ, ისინი უნდა წაკითხული უფლებები. მაგრამ მათ არ სჭირდებათ ჩაწერის ან შეასრულოს უფლებები. და ახლა, თუ ჩვენ ვფიქრობთ უკან ყოფილი Psets, რაც ჩვენ გვესმის, არის ასეთი საქართველოს ჰგავს ორობითი, არა? 1 დგას დიახ. 0 no. და ჩვენ შეგვიძლია რეალურად თარგმნოს ამ ორობითი. ასე რომ 110 ორობითი იქნება 6. 100 იქნება 4. იგივე მსოფლიოში. ასე, რომ ნომერი, თქვენ მიიღებს, რომ ნებართვების ეს იქნება 644. MIKE RIZZO: თუ ფიქრობთ თავში როდესაც თქვენ chmoded რაღაც, მე მჯერა მათ პრობლემა მითითებული მაგალითი, სადაც შეგიძლიათ გააკეთოთ რაღაც chmod 644 და შემდეგ ფაილის სახელი. 644 მაშინ, თქვენ შეგიძლიათ ნახოთ პირდაპირ სადაც რომ მოდის. ასე რომ, იმედია, რომ აკეთებს, რომ ცოტა უფრო ნათელი. და შემდეგ თქვენ ბიჭი სიწმინდე - oh yeah, აქ ეს არის, კიდევ ერთხელ. ასე რომ 600 მაშინ იქნებოდა მხოლოდ მაგალითი ჩვენ დათმო აქ, სადაც მფლობელს წავიკითხე და მარჯვენა უფლებები, ხოლო ჯგუფის და მსოფლიო არ აქვს უფლებები წვდომის ფაილი. TOMAS REIMERS: და მაშინ ჩვენ სწრაფი სიაში საერთო უფლებები. ასე რომ, კატალოგები, გნებავთ რეალურად chmod 711. სწრაფი განზე - ერთი დირექტორია აქვს შემსრულებელი ნებართვა ნიშნავს შეძლებს გახსნა დირექტორია. Images, CSS, JavaScript, HTML საჭიროებების 644, რადგან, ძირითადად, მსოფლიოში საჭიროებების წაკითხვის უფლებები. და PHP, რომელიც თქვენ ბიჭები მინახავს მიუხედავად იმისა, რომ ჩვენ არ ვსაუბრობთ მკაცრად, როგორც წესი, chmoded ერთად ნებართვის 600 იმიტომ, რომ ის აწარმოებს უფლებების მფლობელი. მინიმუმ ელექტრო მოწყობილობების. MIKE RIZZO: ასე რომ, თუ თქვენ არ კონკრეტულად დააკონკრეტა, თუ რა ტიპის ფაილი გსურთ რეალურად შექმნის ეს პრეზენტაცია - ჩვენ გვქონდა პრობლემა, რადგან ყველაფერი არ chmoded სწორად - თქვენ აპირებთ მისაღებად, სახის, აკრძალული შეცდომა, რომ ნახვა ფაქტობრივად არ გაქვთ წვდომის რასაც ფაილი გსურთ, რომ შედიხართ. და რა თქმა უნდა, შეიძლება დაფიქსირდა - როგორც პრობლემა კომპლექტი - ით იცვლება უფლებები სათანადოდ. TOMAS REIMERS: და ბოლო კომენტარი სწრაფად ადგილობრივი განვითარება - ჩვენ მოიტანა ეს ყველაფერი, მაგრამ ჩვენ უბრალოდ მინდოდა რათა ის ისევ - თუ თქვენ ითხოვენ სერვერზე - ისე ადგილობრივი მასპინძელი, მაგალითად,. com ან რასაც - და თქვენ არ დააკონკრეტა კონკრეტული ფაილი, ფაილი, რომელიც თქვენს კომპიუტერში აპირებს ითხოვენ ეწოდება index.html. ან, თუ ეს არ არსებობს, index.php. ზემოთ. ასე რომ მხოლოდ recap ყველაფერი, იმედია, რომ ჩვენ დაფარული განყოფილების და ლექცია, და ამ დრომდე CS50. და ახლა ჩვენ ვაპირებთ დავიწყოთ საუბარი შესახებ კონკრეტულად ბიბლიოთეკები. JavaScript და CSS ბიბლიოთეკები ვებ apps. ასე რომ, ერთი სწრაფი მიზეზი, რის გამოც ჩვენ ბიბლიოთეკების პროგრამირების - არსებობს უამრავი პრობლემები პროგრამირება, რომელიც შენარჩუნება popping up ისევ და ისევ, და ისევ, და ისევ. თქვენ შეამჩნევთ, რომ ბევრი საიტები გვჭირდება უნარი აქვს drop down მენიუები, მაგალითად, ან გვჭირდება უნარი აქვს ძალიან სტანდარტული ღილაკს სტილი, რომელიც არ შეიძლება იყოს მარტივი რამ. ახლა, რომ თქვენ დაიწყოს შეღწევას HTML, თქვენ გააცნობიეროს, რომ ღილაკები შეიძლება რეალურად გამოიყურებოდეს ნამდვილად მახინჯი თუ არ არაფერი. ასე რომ, ბევრი ადამიანი არ წერია მოუწოდა ბიბლიოთეკები. და ამ კონტექსტში, ისინი ასევე მოუწოდა ფარგლებში. ჩვენ ვაპირებთ გამოვიყენოთ ორი interchangeably. და რასაც ისინი, ისინი, ძირითადად, premade ცალი კოდი - ან CSS ან JavaScript - რომ წართმევას ბევრი გუნდის გაქვთ კოდირების. ასე რომ, ისინი წინასწარ განსაზღვროს bunch of კლასების ან წინასწარ განსაზღვროს bunch of ფუნქციები JavaScript-ის საქმე, რომელიც შეგიძლიათ დარეკოთ შემდეგ. და მაშინ, სახის, მიიღოს ხელმისაწვდომობის ეს კოდი გარეშე რომელსაც არაფერი. მაგალითი ბიბლიოთეკა cs50.h. ეს იყო ბიბლიოთეკა მივეცით თქვენ უკან კვირაში ერთი, რომელიც საშუალებას გაძლევთ ამის გაკეთება რამ, როგორიცაა, რომ GetInt და GetString გარეშე წერა ნებისმიერი კოდი თავს. MIKE RIZZO ყველა უფლება. ასე რომ აქ, ისევე, როგორც ჩვენ უნდა მოეცვა ჩვენს c ფაილი სხვადასხვა ბიბლიოთეკების, ჩვენ ასევე უნდა შეიცავდეს ჩვენი HTML ფაილები სხვადასხვა ბიბლიოთეკებში. მაგალითად, თუ გვინდოდა არის კონკრეტული JavaScript ბიბლიოთეკა აქ, ალბათ, ერთი, რომ ჩვენ წერილობითი საკუთარ თავს, როგორც ეს ადგილობრივად უმასპინძლა ე.წ. script.js, ჩვენ უბრალოდ გამოიყენოს ეს notation. ამიტომ, ჩვენ უნდა script type შეადგენს JavaScript წყაროს შეადგენს JavaScript.js. და თუ ფიქრობთ დაბრუნება თქვენი CS50 ფინანსთა პრობლემა მითითებული, თუ ვუყურებ header.php in თარგები საქაღალდეში, თქვენ უნდა მინახავს ზოგიერთი შედის. ასე რომ, ეს პირველი - სკრიპტები - არის მათ შორის JavaScript ბიბლიოთეკა. მათ შორის CSS ბიბლიოთეკა ცოტა განსხვავებული. აქ, ნაცვლად სცენარი საკვანძო გჭირდებათ ლინკი აქვს. და შემდეგ, ტექსტი CSS ტიპის არის პატარა სხვადასხვა. თქვენ ყოველთვის არ უნდა შეიცავდეს rel style sheet. მაგრამ მე ვფიქრობ, რომ, ზოგადად, კარგი პრაქტიკა. და მაშინ საბოლოოდ, HREF, რომელიც თქვენ ალბათ დაინახა თქვენს ATAGs განთავსების აკავშირებს სხვადასხვა კავშირები მხოლოდ კონკრეტული ბმული სად შეიძლება ვიპოვოთ, რომ. მაგალითად, თუ გვინდოდა უკავშირებენ სხვადასხვა ბიბლიოთეკა - მოდით უბრალოდ, ვამბობთ - რომ ცხოვრობდა styles.css. და გვინდოდა უკავშირებენ, რომ ეს არის ის, უმასპინძლა ინტერნეტში, ჩვენ რომ კოპირება. და შემდეგ ჩასვით იგი რასაც ჩვენ აქ ნაცვლად. TOMAS REIMERS: OK, იმედია ბიჭები არიან უკვე ნაცნობი როგორ დაუკავშირონ CSS. თქვენ უნდა გაეკეთებინათ, რომ უკანასკნელი brown კომპლექტი. JavaScript, ზოგიერთი თქვენგანი ალბათ აქვს გარკვეული გამოცდილება. ზოგიერთ თქვენგანს არ შეუძლია. ასე რომ ახლა, ვიცით, რომ JavaScript ფაილის ძალიან ჰგავს CSS ფაილი გრძნობა, რომ თქვენ შეიძლება დაუკავშირონ მას ან რომ თქვენ შეიძლება შეიცავდეს ეს იძულებით. და ეს საშუალებას გაძლევთ script რამ. და ჩვენ ვაპირებთ ფეხით თქვენ მეშვეობით ცოტა JavaScript მოგვიანებით. ასე გამოყენებით ბიბლიოთეკა - ერთხელ თქვენ შედის, ეს, როგორც მარტივია, სიტყვასიტყვით მოუწოდებდა ფუნქციები და დასძინა, კლასი სახელები მას. ბოლო რამ გვინდა, რომ გაიგო დაახლოებით თვალსაზრისით ბიბლიოთეკა - და ეს უფრო ტექნიკური შენიშვნა - არის ღია ლიცენზირებას. ასე რომ, როდესაც თქვენ ამ ფაქტობრივი ბიბლიოთეკები, თქვენ შეიძლება ფიქრი შეკითხვები მინდა არის ის, OK, რომ მე უბრალოდ გამოყენებით სხვისი კოდი, განსაკუთრებით იმიტომ, რომ რაღაც ჩვენ ძალიან ბევრი გითხარით, რომ არ გააკეთებს, ამ თქმა უნდა. ასე რომ, იმ შემთხვევაში, თუ ღია ლიცენზირების, ბევრი დეველოპერები - ერთხელ ისინი წერილობითი ბიბლიოთეკა, რომელიც, მათი აზრით, შეიძლება იყოს გამოსადეგი სხვა ადამიანების - აქვეყნებს ინტერნეტში და მისცეს მას ლიცენზია. და ლიცენზიის ძირითადად ამბობს მე ვარ საკუთარი სურვილით გაცემის ნებართვა სხვა ადამიანი უნდა გამოიყენოს ეს ნაჭერი პროგრამული უზრუნველყოფა შემდეგი სახის დებულებებში. ჩვენ შედის ბმული კარგი საიტი დაგეხმაროთ იმის გაგებაში, ლიცენზიების თუ თქვენ აწარმოებს მათ. საერთო დებულებები რამ, როგორიცაა თქვენ მივესალმებით გამოიყენოს ჩემს ბიბლიოთეკაში ისე სანამ თქვენ მომეცი საკრედიტო. მობრძანდით, ჩემი ბიბლიოთეკა ამდენი ხანი, როდესაც ის არღვევს თქვენ არ ადანაშაულებენ ჩემთვის. მობრძანდით, ჩემი ბიბლიოთეკის ისე დიდი ხნის თქვენ არ გამოიყენოს იგი, რათა ფული თავს. ეს არის სახის საერთო დებულებებში. ამ CS50 საბოლოო პროექტი, მათ არ უნდა იყოს სუპერ შესაბამისი იმიტომ, პროექტების, რომ თქვენ ბიჭები იყენებენ ალბათ, უფრო სწორად, სახის, ცნობილია. მაგრამ როდესაც თქვენ რეალურად წავიდეთ out შევიდა მსოფლიოში და დაიწყოს გამოყენებით ბიბლიოთეკა, რომელიც შეიძლება იყოს ან არ იყოს, ასევე ხორციელდება ზოგიერთი უფრო პოპულარული პირობა ჩვენ იქნება გადის. კარგია, უნდა შეეძლოს იმის გაგება, ამ ლიცენზიების და მესმის, რას ნიშნავს. და ბრუნდება. MIKE RIZZO: OK. ასე რომ, ახლა მოძრავი გადატანა მაგალითები ფაქტობრივი CSS. ამ ეტაპზე ჯერჯერობით, ალბათ არ შეექმნა ამ. მაგრამ თქვენ შეიძლება არ შეექმნა ის თქვენს ყოველდღიურ ცხოვრებაში, სადაც რაღაც რომ გამოიყურება ერთი გზა ერთი ბრაუზერი შეიძლება არ გამოიყურებოდეს იგივე გზა სხვა ბრაუზერში. ეს ჰქვია browser browser თავსებადობა. და უფრო ის სულ უფრო და უფრო პრობლემური, განსაკუთრებით ბრაუზერები უფრო და უფრო მეტი თავისუფლება განახორციელოს რამ, როგორც მათ სურთ. ასე რომ გადავლახოთ, რომ იქ რეალურად არის დიდი ბიბლიოთეკა მოუწოდა Normalize.CSS. TOMAS REIMERS: ჩვენ შედის ბმული. ამ ეტაპზე, ეს სასარგებლოა, თუ თქვენ გაქვთ თქვენი ლეპტოპი არსებობს ეძებს საიტზე. და ჩვენ ვაძლევთ ამ თქვენ უფლება ახლა მხოლოდ იმიტომ CS50 საბოლოო პროექტი რეალურად აპირებს გთხოვთ, განახორციელოს იგი ასეთივე გზით ბრაუზერები. ასე რომ მხოლოდ შენარჩუნება უკან თქვენი არეში, ეს არის მშვენიერი ბიბლიოთეკა რადგან ეს, ერთგვარი, standardize რამ. In Firefox, რაღაც შეიძლება ნახოთ როგორც ერთი pixel მარცხენა. და შემდეგ Chrome შეიძლება გადაწყვიტოს, რომ, ფაქტობრივად, რასაც თქვენ იმას ნიშნავდა, იყო 10 pixels მარცხნივ. და გსურთ standardize ამ. ნორმალიზება რეალურად გავაკეთოთ კარგი სამუშაოს მიღების დარწმუნებული ვარ, რომ თქვენი საიტი გამოიყურება იგივე ბრაუზერებს შორის. MIKE RIZZO: ასე რომ, თუ გვინდოდა უბრალოდ დააჭირეთ ბმულს მართლაც სწრაფად და შოუ თქვენ რა, რომ ჰგავს, თქვენ შეგიძლიათ გადმოწეროთ გამოყენებით გიგანტური ჩამოტვირთვა ღილაკს. ან მე გარწმუნებთ, რომ უფრო მეტი შესახებ დაწკაპვით ამ ბმულს ქვედა მარჯვენა კუთხეში. TOMAS REIMERS: და თუ თქვენ ნამდვილად დააჭირეთ Read More უფლება არსებობს - დააწკაპუნეთ წყაროს GitHub - თქვენ რეალურად ვხედავ ღია ლიცენზია LICENSE.md უფლება არსებობს. და დაინახავთ აქ არის ძალიან პოპულარული MIT ლიცენზია. ისევ და ისევ, თუ წაიკითხავთ მეშვეობით ტექსტი, თქვენ გექნებათ საპოვნელად საიტზე ჩვენ დამოწმებული ადრე და შეძლებს მესმის გარეშე წაკითხვის მეშვეობით იურიდიული jargon. MIKE RIZZO: OK, დიდი. ასე რომ დარეგულირდება. ჩვენ გვინდოდა, რომ გადმოგცეთ რომ ნამდვილად სწრაფად. Oh, გაქვთ შეკითხვა? აუდიტორია: ასე რომ, როდესაც თქვენ გადმოწეროთ, თქვენ უბრალოდ მიჰყევით რომ კოდი, რომ მათ აქვთ ფარგლებში Download ღილაკი? TOMAS REIMERS: დიახ, ასე როდესაც თქვენ ჩამოტვირთვა - MIKE RIZZO: Oh, რომ დიდი წერტილი. ასე რომ კითხვა იყო, თუ როგორ გავაკეთოთ ჩვენ რეალურად გადმოწეროთ? ასე რომ, თუ ჩვენ დააჭირეთ ბმულს, ჩვენ ვხედავთ რომ რეალურად pops up წყაროს კოდი. ასე რომ, ამის გაკეთება, რა შეგვეძლო არ არის უბრალოდ დააჭირეთ Save As. შენახვა როგორც და რომ უნდა გამოიტანს ფაილი. და მაშინ ჩვენ შეგიძლიათ შეინახოთ მას, როგორც normalize.CSS. და მერე ნეტავ უნდა დაუკავშირონ ეს - TOMAS REIMERS: იგივე გზა თქვენ ლინკი ნებისმიერი სხვა ფაილი. და კიდევ თქვენ დაუკავშირონ ის, რა დიდი შესახებ ნორმალიზება არის ის რეალურად იზრუნოს ყველა მძიმე მუშაობა თავისთავად. რაც იმას ნიშნავს, რომ თქვენ არ გაქვთ დაამატოთ ნებისმიერი კლასები. თქვენ არ გაქვთ არაფერი უცნაური. ეს იქნება ნორმალიზება გარეშე აკეთებს არაფერს შემდგომი. დიახ, თქვენ უნდა შეიცავდეს იგი. Google Chrome არ პასუხობს. უბრალოდ სწრაფი განზე - შევნიშნე, ჩვენ გადახტა ეს. დანარჩენი ამ პრეზენტაცია იქნება სწრაფი მიმოხილვა. გამოკითხვის ბიბლიოთეკები. ძირითადად, რასაც ისინი. რას აკეთებს. როგორ ისინი, როგორც სასარგებლოს. როგორ შეიძლება განახორციელებენ მათ. თუ გსურთ დაიწყება ეძებს მათ, შემდეგ ერთად და კითხულობს მეშვეობით მათ, მინდა მაღალ წაახალისოს რომ. გარდა ამისა, თქვენ მივესალმებით, ასევე, დაიწყება ჩამოტვირთვის მათ და მათ შორის, მათ დანახვაზე უბრალოდ ვხედავ, რაც მათ ჰგავს თუ რას აკეთებს, თუ თქვენ გაქვთ თქვენი ლეპტოპი წინაშე. თუ არა, თქვენ მივესალმებით, რომ შევინარჩუნოთ გვისმენს გაიგო. ჩვენ ვაპირებთ, რომ შევინარჩუნოთ საუბარი. და ჩვენ გვაქვს დრო დასასრულს, იმედია ჩვენ რეალურად შეღწევას გიჩვენებთ რა ზოგიერთი ბიბლიოთეკების ჰგავს. MIKE RIZZO: Cool. ყველა უფლება, ასე რომ, ახლა ვისაუბროთ შესახებ ფონტის გასაოცარია. TOMAS REIMERS: ასე ფონტის Awesome არის მართლაც სისუფთავე site, განსაკუთრებით მათთვის, ჩვენგანი, ვინც ნაკლებად მხატვრულად ნიჭიერი. იგნორირება სახელი ფონტის გასაოცარია, რომ ეს აძლევს თქვენ bunch of ხატები, რომლებიც ძალიან სასარგებლო. ასე რომ, ბევრი ჯერ თქვენ განახორციელოს icon შეგიძლიათ მოსწონს ლამაზი x ისე რომ თქვენ შეგიძლიათ დახუროთ რაღაც. ან შეგიძლიათ რაიმე სახის შესწორება ღილაკს ფანქარი ხატვის მოსწონს ყველას აქვს. და ეს მაშინ, როცა იცით, რომ ხატვის იმ ხატები შეიძლება ძალიან tedious და რთული. ფონტის Awesome - თუ თქვენ ნამდვილად წასვლა საიტი - გაძლევთ უამრავი ხატები ქვეშ ხატები ზედა. ჰო, უბრალოდ ზედა. ეს მოგცემთ ბევრი ხატები უფასოდ. ასე რომ, აქ თქვენ ხედავთ, ჩვენ რამ, როგორიცაა, ვარსკვლავი, ბარები, lightning bolt, კალენდარი, bug, წიგნი, et cetera. ეს შეიძლება იყოს ძალიან სასარგებლო. ისე, როგორც შენ მოიცავს ეს მოიცავს სიტყვასიტყვით CSS ფაილი. და შემდეგ თქვენ შედის CSS ფაილი, რა შეგიძლიათ გააკეთოთ თქვენ შექმნით tag მოუწოდა I. ეს satands for ხატი კლასის FA იდგა ფონტის გასაოცარია. და შემდეგ, რაც კლასის თქვენ გსურთ. ასე რომ, თუ მინდოდა ხატი ამ პლუს მოედანზე სწორედ აქ, მე მისცემდა ეს კლასი FA. და შემდეგ FA დეფისი plus დეფისი მოედანზე. MIKE RIZZO: Cool, OK. TOMAS REIMERS: და მაშინ, ბოლო CSS ბიბლიოთეკა ჩვენ გვინდა მეშვეობით ვართ ცდილობს შეინარჩუნოს ის მინიმალური on CSS ბიბლიოთეკების, რადგან ჩვენ ვაცნობიერებთ სათაური ამ პრეზენტაცია არის JavaScript ბიბლიოთეკა. მაგრამ გვეგონა, რომ ჩვენ შეიძლება ასევე წარმოგიდგინოთ სხვა ბიბლიოთეკების მაშინ, როცა ჩვენ ვსაუბრობთ ბიბლიოთეკები. ეს Google Web ფონტები. და რა Google Web ფონტები საშუალებას გაძლევთ უნდა გააკეთოთ დაამატოთ შრიფტები თქვენი ვებ საიტი, რომელიც ნამდვილად მარტივი გზა, რათა ეს ლამაზი და ზღვარის თქვენი კომპლექტი ეხლა ყველას ის არის, თუ მას აქვს ლამაზი შრიფტი თუ მას აქვს ლამაზი კოლექცია შრიფტები. Google Web ფონტები არის ლამაზი განსხვავებით სხვა ბიბლიოთეკების იმ გაგებით, რომ ის ნამდვილად მართვადი ინსტალაცია. ასე რომ, თუ ამ ბმულზე, ეს google.com / შრიფტები, მე მჯერა. თუ თქვენ დაიცვას, თქვენ შეგიძლიათ აირჩიოთ თქვენი შრიფტით. თქვენ შეგიძლიათ აირჩიოთ მარცხენა დან სისქე, ირიბი, et cetera. და მაშინ, ერთხელ თქვენ მიერ არჩეული ერთი, თქვენ შეგიძლიათ დააჭიროთ სწრაფი გამოყენება. უფლება არსებობს. ქვედა მარჯვენა ყუთში. და შემდეგ, გადაფურცლეთ ქვემოთ. პირველ რიგში, მათ მოგცემთ CSS, რომ თქვენ უნდა რეალურად უკავშირებენ მას. ეს უფლება არსებობს. შეგიძლიათ უბრალოდ დააკოპირეთ და ჩასვით რომ სისტემაში და ლამაზი რამ შესახებ ეს არის თქვენ არ რეალურად კი უნდა ატვირთოთ ფაილი. რა არის ის აპირებს არის ის აპირებს ბმული Google-ის მობილური იგი. ასე რომ თავში რას ნიშნავს ეს. ეს ნიშნავს, რომ როდესაც მომხმარებელი ჩამოტვირთვების თქვენი ფაილი - იწერს თქვენს HTML გვერდი - თქვენი HTML გვერდი აპირებს მითითებას ამ ფაილის. ასე რომ, თქვენს კომპიუტერში ხდება ვხედავთ, ოჰ, ეს უმასპინძლა google.com საკმაოდ ვიდრე theirsite.com. ნება მომეცით წავიდეთ ვთხოვთ Google რომ ფაილი. და შემდეგ, ის აპირებს არის თითქმის, თითქოს ნაწილი თქვენი საკუთარი საიტი. TOMAS REIMERS: Cool. და კიდევ არის ის, რომ შემდეგ მოიცავს იგი თქვენს CSS, ეს გაძლევთ ფაქტობრივი ონლაინ. ასე, რომ თქვენ მითითებული ქონების შრიფტის ოჯახი ტოლი სახელი თქვენი შრიფტით. MIKE RIZZO: OK. ასე რომ, ჩვენ მხოლოდ დასრულდა CSS. და ზოგიერთ თქვენგანს შეიძლება ფიქრი, ასევე, ჩვენ გვქონდა CSS on CS50 ფინანსთა. მაგრამ CSS ბიბლიოთეკა ჩატვირთვის. ჩვენ რეალურად არის ჩატვირთვის პატარა მოგვიანებით ქვეშ JavaScript რადგან ჩატვირთვის CSS ბიბლიოთეკა ასევე გააჩნია ბევრი JavaScript, რომ ჩატვირთვის ან Twitter - რომელმაც ჩატვირთვის - იყენებს მართოთ ყველა მათი CSS. TOMAS REIMERS: ვინმეს აქვს რაიმე შეკითხვები ჯერჯერობით ცენტრის შესახებ ზოგადად? ჩვენ კარგი? გასაოცარია. MIKE RIZZO: გასაოცარია. TOMAS REIMERS: So მოძრავი რომ JavaScript. MIKE RIZZO: ასე გვინდოდა გაიგო შესახებ jQuery უნდა დაიწყოს. უკვე არავის სმენია jQuery ადრე ან გამოიყენება იგი? ჰო, რამდენიმე? ასე რომ, თუ თქვენ უბრალოდ მუშაობა შექმნილი JavaScript, თქვენ აღმოჩნდეთ აკრეფით ბევრი გრძელი სელექციონერები ბევრი. ასე რომ, რა jQuery არ არის ის უზრუნველყოფს ლამაზი გადატანა JavaScript ენა, რომელიც საშუალებას გაძლევთ მარტივად აირჩიეთ და მანიპულირება სხვადასხვა ელემენტები დოკუმენტის შიგნით ობიექტი მოდელი ვებ გვერდი ან DOM, რომელიც ვფიქრობ თქვენ ბიჭები არ გამიგია in ლექცია ამ ეტაპზე. TOMAS REIMERS: თუ თქვენ არ გამიგია , ან თუ თქვენ არ უყურებს ლექცია არ არის, Document Object Model არის ძირითადად, თუ როგორ არის წარმოდგენილი. ასე რომ HTML სახის ჰგავს ხე როდესაც თქვენ ნამდვილად დახატე out. თქვენ გაქვთ HTML ელემენტს თავზე. თქვენ გაქვთ ხელმძღვანელი და სხეულის. და შემდეგ, რომ თქვენ აქვს ყველაფერი. რომ მოიხსენიებენ როგორც DOM - დოკუმენტის ობიექტური მოდელი. ასე რომ მოდელი, რომელიც წარმოადგენს ობიექტების დოკუმენტში არის ადვილი გზა, რომ ვიფიქროთ ამის შესახებ. და ერთ ერთი დიდი რამ შესახებ jQuery ეს მართლაც რაც traversing რომ და მანიპულირების ელემენტების ფარგლებში რომ წარმოუდგენლად მარტივი. იმდენად მარტივია, ფაქტობრივად, რომ უმრავლესობა JavaScript ბიბლიოთეკები თუ არა უმრავლესობა, დიდი უმრავლესობა, ვინც თქვენ ნახავთ რეალურად საჭიროებს jQuery ასე რომ შეიძლება აწარმოებს საკუთარ თავს, უბრალოდ, რადგან თუ არ აქვს jQuery, თქვენ რომ დაგვრჩა ბევრი დრო ცდილობს გაერკვნენ, თუ როგორ აირჩიოთ გარკვეული ელემენტები და როგორ უნდა გავაკეთოთ სხვა რამ. და სხვა დიდი რამ შესახებ jQuery არის, რომ ეს ჯვარი ბრაუზერის თავსებადი. ასე მახსოვს, როდესაც ჩვენ ვთქვით, რომ არა ყველა ბრაუზერები განხორციელება ყველაფერი იგივე გზა? ეს არის ნამდვილი კი JavaScript. და ერთ ერთი დიდი რამ შესახებ jQuery არის ის, რომ აღმოაჩინოს ბრაუზერი და აღმოაჩინოს შესაბამისი მეთოდი. ასე რომ, თუ თქვენ უნდა აირჩიოთ ელემენტს, Internet Explorer შეიძლება ითქვას, რომ თქვენ უნდა გავაკეთოთ ამ გზით. Firefox შეიძლება ითქვას, რომ სწორი გზა არის ამ გზით. jQuery არ აღელვებს. როდესაც თქვენ ვუთხრა jQuery აირჩიოთ ელემენტის ის გაერკვნენ, თუ როგორ ეს უნდა გავაკეთოთ ის ფარგლებში ბრაუზერის პროფაილი ამჟამად, და მერე რომ გზა. MIKE RIZZO: მოდით არ საუბრობენ გამოყენება jQuery ცოტა. ისევე როგორც PHP, jQuery აქვს კონკრეტული სიმპათიისა დოლარის ნიშანი. ასე რომ, თქვენ ნახავთ, რომ ნებისმიერი jQuery - კარგად, არა ყველა. შეგიძლიათ ზოგჯერ შეცვლის დოლარი მოაწეროს სიტყვა jQuery. მაგრამ ზოგადად, მხოლოდ იმიტომ, რომ მოკლე, როდესაც ხედავთ jQuery მიმდინარეობს გამოიყენება ეს იქნება დოლარის ნიშანი. ასე რომ, აქ ჩვენ უბრალოდ გვიჩვენებს დასაწყისში არჩევის განთავსების ელემენტს DOM. აქ, ჩვენ გვაქვს დოლარის ნიშანი მოჰყვა ღია ფრჩხილებში და შემდეგ quotes. და შიგნით შეთავაზებები წავიდეთ ჩვენი სელექციონერები სხვადასხვა ელემენტებს. ისევე, CSS, გვჭირდებოდა სელექციონერები to შეძლებს სტილი სხვადასხვა ელემენტები შიგნით გვერდზე. იმ სხვადასხვა სელექციონერები თარგმნა ზუსტად შევიდა jQuery და JavaScript, ყველაზე ნაწილი. ასე რომ აქ გვაქვს dot foo. ასე რომ, თუ გავიხსენოთ ლექცია, the dot მხოლოდ იმას ნიშნავს კლასი. ასე რომ ჩვენ შერჩევის ელემენტს კლასი foo. ასე რომ, თუ მე წავიდეთ წინ და ქმნის ჩვენი JavaScript კონსოლი აქ მართლაც სწრაფად უბრალოდ დემონსტრირება, თუ უბრალოდ აკრიფოთ დოლარის ნიშანი, ჩვენ ვხედავთ, რომ ზოგიერთი ფუნქცია, რომელიც მოდის up. და ეს მხოლოდ განსაზღვრული jQuery. TOMAS REIMERS: მათთვის, უცნობ, კონსოლი არის ინსტრუმენტი ფარგლებში Chrome, რომელიც საშუალებას გაძლევთ, ძირითადად, აწარმოებს JavaScript შესახებ მიმდინარე გვერდზე. ეს ნახავთ ძალიან სასარგებლო, როდესაც თქვენ რეალურად გამართვის და თქვენ უნდა იყოს, რა არის მიმდინარე ღირებულება ზოგიერთი გლობალური ცვლადი ან რა არის რაღაც? ეს არის სახის მოსწონს GDB გარდა რომ თქვენ შეგიძლიათ რეალურად მანიპულირება ელემენტების გვერდი ეს ბევრად უფრო ადვილია მოდის. და ასევე ის არ, ძირითადად, გადაამოწმოთ ერთად სანამ ეს იმას არაფერი. ასე რომ, მაშინ, როდესაც, GDB შეიძლება იყოს, როგორიცაა, თქვენ ნამდვილად გსურთ აწარმოებს შემდეგი ნაბიჯი? კონსოლი არის რეალური. ასე რომ, როგორც ვებ გვერდზე გაწევის და აკეთებს რასაც ის აკეთებს, საბჭოს ასევე გაშვებული ერთად იგი. და თქვენ შეგიძლიათ განათავსოთ impute კოდი შევიდა რომ კონსოლი, რომელიც აწარმოებს გვერდზე. MIKE RIZZO: So შესვლის კონსოლი, ვფიქრობ, უნდა მოკლედ ვთქვათ, თუ როგორ უნდა გავაკეთოთ, რომ. ბოლო პრობლემა, რომ თქვენ შეიძლება ჰქონდეს მეორადი Chrome-ს შეამოწმოს ელემენტს ფუნქციების ან დეტალური წყარო - და ის ხელმისაწვდომია მხოლოდ უფლება დაწკაპვით ან კონკრეტული ელემენტს და აკეთებს ან შეამოწმოს ელემენტის ან დეტალური წყარო. ჩვენ ასევე შეგვიძლია შედიხართ JavaScript console პირდაპირ არჩევის შეამოწმოს ელემენტს. ასე რომ მაშინ უბრალოდ მოხვდა console შორს მარჯვენა მხარეს. გარდა ამისა, თქვენ შეიძლება ასევე წავიდა ზედა მარჯვენა კუთხეში, რომელიც შეწყვიტა ამ ეკრანზე, სადაც მას აქვს სამი ჰორიზონტალური ბარები. და თქვენ ქვევით ინსტრუმენტები და მაშინ JavaScript კონსოლი აქ სადაც შეგიძლიათ ნახოთ - მინიმუმ Windows - მალსახმობი არის კონტროლის Shift J. ასე შემდეგ თუ გვინდოდა აირჩიოთ ელემენტს ამ გვერდზე, ისევე, როგორც მე აჩვენა ადრე, ჩვენ დოლარის ნიშანი ღია parens და შემდეგ მოჰყავს. საინტერესო ის არის, ზოგადად, ერთჯერადი შეთავაზებები და ორმაგი შეთავაზებები საცვლელი. ასე რომ, ბევრი ადამიანი უბრალოდ გამოიყენოთ ერთი quotes იმიტომ, რომ ისინი უფრო სწრაფად აკრიფოთ გარდა ორმაგი შეთავაზებები იმიტომ, რომ თქვენ არ უნდა გეჭიროთ Shift. ასე რომ მე უბრალოდ, რომ ახლა. ასე რომ, მე უნდა აირჩიოთ რაიმე კლასის. კონტეინერი, მხოლოდ იმიტომ, რომ მე ვიცი, რომ ის, რაც ჩვენს ვებ გვერდი ახლა. მე და დააჭიროთ. და ვხედავთ, რომ ავტორმა იგი. ასე რომ, ეს გვიჩვენებს, რომ დაბრუნდა, რომ ობიექტი. ასე რომ, ძირითადი შერჩევა. თუ გვინდოდა, რომ რეალურად მართვას, თქვენ უნდა მოვუწოდებთ რაღაც რომ შერჩევა, რომელიც მივიღებთ შემდეგ. TOMAS REIMERS: ასე რომ უბრალოდ უნდა შევხედოთ, რომ უფრო სიღრმისეული, ეს არის სხვადასხვა მეტი ფუნქცია ზარები ჩვენ მივიღეთ in C. სახელი ფუნქცია აქ არის ცოტა უცნაურია. ის დოლარის ნიშანი. უბრალოდ სახელით ფუნქცია. არაფერია განსაკუთრებული ამის შესახებ. ჩვენ ღია ფრჩხილებში. მაშინ, ჩვენ გვაქვს ჩვენი ერთი არგუმენტი, რომელიც ამ შემთხვევაში ხდება იყოს სიმებიანი, რომელიც selector მას. და მაშინ, ჩვენ გვაქვს ჩვენი დახურული ფრჩხილებში. ეს არის ის. ეს არ არის, რომ განსხვავებულია. მიუხედავად იმისა, რომ იგი არ გამოიყურება ძალიან უცნაურია. და რომ შეიძლება იყოს, სახის, sticking წერტილი უამრავი ადამიანი. MIKE RIZZO: ასე რომ, ანალოგიურად, თუ გვინდოდა აირჩიოთ ელემენტს, რომელსაც გააჩნია ID, ახლა ჩვენ გვინდა აირჩიეთ by ID ნაცვლად კლასის. ეს იქნებოდა მსგავსი რამ, სადაც ჩვენ უბრალოდ მკვეთრი ნიშანი პირადობის მოწმობა. ასე რომ ჩვენ შერჩევის აქ ელემენტები, რომლებსაც აქვთ ID ბარი. TOMAS REIMERS: ეს ვრცელდება. რომ CSS ვრცელდება. ისევე, CSS, შეგიძლიათ აირჩიოთ ყველა კავშირები, რომლებიც კლასის foo. აქ, ეს იგივე. თქვენ შეიძლება a.foo, რომელიც შეარჩევს ყველა კავშირები კლასის foo. თქვენ შეიძლება მკვეთრი ბარი, რომელიც იქნება აირჩიეთ კავშირი ID ბარი და ა.შ. და სხვ. ნებისმიერი CSS selector არის სწორი jQuery selector. MIKE RIZZO: ჰო. OK, ასე რომ, ახლა მოდით შეღწევას ცოტა მანიპულირება, რომ ჩვენ შეგვიძლია გავაკეთოთ ჩვენი jQuery. ასე jQuery აქვს კონკრეტული ტიპის ნოტაცია, სადაც ჩვენ მხოლოდ გამოიყენოს dot დასასრულს. და შეგიძლიათ წარმოიდგინოთ, ეს როგორც C როგორ გვქონდა სხვადასხვა structs. და წავიდეთ იმ structs, თქვენ ამას გამოყენება dot შეღწევას მათ. ეს არის, სახის, მსგავსი რამ. მხოლოდ ახლა ჩვენ ფუნქციების ფარგლებში ამორჩევა რომ ჩვენ შეგვიძლია მოვუწოდებთ მას. ასე რომ, აქ, პირველი მაგალითი თქვენ ხედავთ არის CSS selector. და ძირითადად, რა, რომ არ არის ის ვრცელდება პირველ ელემენტს CSS ამ ის, რომ თქვენ შერჩევა - ამ ელემენტს, რომ თქვენ არჩეული - ღირებულების, რომ. TOMAS REIMERS: ასე ადვილი თარგმანი რომ იქნება, თუ jQuery, ძირითადად, უბრალოდ აიღო foo. და შემდეგ CSS განაცხადა, ფერი წითელი და მჭიდრო. ეს იგივე იდეა. რასაც ის გაკეთდეს არის ის არჩეული ყველა foo ელემენტებს. და მაშინ ის გამოიყენება. სახის, ქონების ფერი უდრის წითელი. MIKE RIZZO: ანალოგიურად, ჩვენ შეგვიძლია ასევე შეცვალოს ფაქტობრივი შინაარსი რა არის აჩვენებს HTML გვერდზე, რომელიც მართლაც მაგარი, რადგან ეს ნიშნავს, რომ თქვენი ვებ გვერდები შეიძლება იყოს მთლიანად დინამიური და არ უნდა იყოს სტატიკური რომ თქვენ ამობეჭდოთ გამოყენებით PHP ძალიან დასაწყისში გვერდზე მიმდინარეობს დატვირთული. ასე რომ აქ, თუ გვინდოდა შეცვალოს ფაქტობრივი HTML გვერდზე, ჩვენ გვინდა ახლა მოვუწოდებთ HTML ფუნქცია, რომელიც მაშინ მხოლოდ ჩანართები რასაც ჩვენ დააკონკრეტა შევიდა რომ ელემენტს, რომ ჩვენ შერჩეული. ასე რომ აქ ჩვენ შერჩევით ელემენტს class foo და შემდეგ განაცხადა, რომ ეს HTML ეს არის მიესალმები მსოფლიოში. TOMAS REIMERS: და როცა ფიქრობთ რა არის სასარგებლო განაცხადი ამ, ამ CSS ერთი, პირველი, რაც თქვენ შეგიძლიათ დაიწყოთ ფიქრი თვალსაზრისით კი drop down მენიუები. თქვენ შეიძლება დაიწყოს გავაკეთოთ რამ, როგორიცაა, როდესაც მომხმარებლის hovers მეტი ზედა ნაწილი საქართველოს drop down, გინდათ ქვედა ნაწილი ჩანს. უფლება? ასე რომ, CSS, ჩვენ თვისებები რათა რაღაც ჩანს. რამ, როგორიცაა ჩვენების colon none რაც ნიშნავს, რომ უხილავი. გამოტანის ბლოკი გახდის ჩანს. ან თუნდაც, თუ გსურთ წავიდეთ მარტივი, თქვენ აქვს რამ, როგორიცაა ხილვადობა შეადგენს ჩანს, და ხილვადობის შეადგენს იმალება. და თქვენ შეიძლება დაიწყოს განახორციელოს რამ როგორიცაა drop down მენიუები უფლება მას შემდეგ, რაც თქვენ მეშვეობით იდეა, თუ როგორ შეგიძლიათ გაერკვნენ, როდესაც ეს ხსნის, რაც ჩვენ კიდევ ერთი ძალიან მოკლედ. მაგრამ ჩვენ შეგვიძლია დავიწყოთ ვხედავთ განცხადებები ამ. მსგავსი გრძნობა, თუ თქვენ ცდილობენ და განხორციელების, ასე ვთქვათ, სტატისტიკა ძრავა და გინდათ პატარა სიტყვის ბუშტი ამუშავება, როდესაც თქვენ მიიღო ახალი გაგზავნა, ერთხელ თქვენ ახალი შეტყობინება, შეგიძლიათ ცოტა სიტყვის ბუშტი ამუშავება შეცვლის HTML გვერდზე, არა? დასძინა, რომ ზედმეტი სიტყვის ბუშტი ერთად დამატებით ტექსტი არ არსებობს. ჰო? აუდიტორია: ასე რომ თქვენ ხმა ამ ფარგლებში HTML კოდი სახის მოსწონს [INAUDIBLE]? MIKE RIZZO: Right. ჰო, ჩვენ კიდევ, რომ ცოტა. Yeah, ეს მსგავსია ცოტა PHP. არ არის ზუსტად მსგავსია. კარგი განსხვავება, რომ არის ის, რაც ამ რეალურად რედაქტირების როდესაც ჩვენ რედაქტირება გვერდზე, რადგან ეს არ იქნება რედაქტირება ფაქტობრივი ფაილი, რომელიც მიმდინარეობს ინახება სერვერზე, რადგან მსოფლიოში არ უნდა ნებართვა შეასწოროთ თქვენი ფაილი. ეს მხოლოდ რედაქტირების რა გვერდზე და რაც ნაჩვენები ფარგლებში ბრაუზერში. ასე რომ, თუ თქვენ განაახლეთ გვერდი შემდეგ, ამბობენ, წაშლის რაღაც როგორც ჩვენ იხილეთ შეგვიძლია ამოიღონ ზარი, რომ რამ მაშინ ჩნდებიან. TOMAS REIMERS: ასე რომ ერთი გზა ვიფიქროთ ეს არის, თუ მე თქვენს კომპიუტერში და მაიკ არის, სახის, სერვერზე. რა მოხდება მე ვაპირებ ვთხოვთ Mike, hey, შემიძლია ჰქონდეს ასლი ამ ვებ გვერდი? და მაშინ მომეცი ასლი. არა, ეს არ არის ორიგინალური რამ. უბრალოდ ასლი. და მაშინ იქნება, როგორიც, oh, არსებობს JavaScript აქ. ცხადია, მე უნდა შეცვალონ გვერდი უნდა იყოს მოსწონს ეს. და მე რედაქტირების თქვენი ასლი. მაგრამ ეს არ განხორციელება ფაქტობრივი ასლი. და თუ მე ვკითხე ერთხელ ამოცნობა გვერდზე, - hey, შეიძლება რომ მქონდეს კიდევ ერთი სუფთა ასლი - ის აპირებს მომეცი სხვა სუფთა ასლი. და შემდეგ, მე ვაპირებ გავაკეთოთ იგივე როგორიცაა, oh, ეს გაერთიანებული შტაბის აქ რომ ამბობს შეცვალონ ეს. და მე ვაპირებ შენარჩუნება აკეთებს, რომ. MIKE RIZZO: ასე რომ მართლაც მაგარი რამ რომ შეგიძლიათ გააკეთოთ jQuery არის რეალურად დაამატოთ სხვადასხვა სახის საქართველოს animations თქვენს გვერდზე. მე არ ვიცი, თუ ოდესმე მინახავს, ​​სადაც თქვენ ცდილობთ შეავსოთ ფორმა ონლაინ და თქვენ არ შეავსოთ რამ სწორად. ასე რომ ცოტა რამ სლაიდები ქვემოთ ზედა და ამბობს, არ კეთდება ეს სწორად. გთხოვთ კიდევ ცადოთ. და მაშინ, შესაძლოა, თუნდაც უბრალოდ ლღობას up. თურმე jQuery ააშენა ფუნქციები რომ ყველა რომ ანიმაცია ნამდვილად, ნამდვილად არ არის ადვილი. ასე არ არის პირველი fade out ფუნქცია, რომელიც შეგიძლიათ დარეკოთ რაღაც. და ეს გზა შეცვალოს CSS of რომ ელემენტს ანიმაციური გზა. ისე სჭირდება, რასაც ელემენტს თქვენ ეძახით ქრებოდა გარეთ. და შემდეგ, ნელა იცვლება მისი opacity სანამ იგი მიდის სრულიად გამჭვირვალე. TOMAS REIMERS: სხვა პოპულარული არის ლღობას ქვემოთ, რომელიც რაღაც გამოჩნდება მოცურების მას. ასე რომ, იმ შემთხვევაში, თუ drop მენიუში, ერთხელ, როდესაც გავიგეთ, თუ როგორ უნდა აღმოაჩინოს როდესაც ეს უკვე hovered მეტი, თქვენ შეიძლება უბრალოდ ვუთხრა ამ ბოლოში ნაწილი ლღობას ქვემოთ არის. და შემდეგ, როგორც ჩანს მოცურების ქვემოთ. MIKE RIZZO: და მაშინ, თუ თქვენ უბრალოდ უნდა ზოგიერთი ტიპის ანიმაცია გათვალისწინებით, რომ jQuery სულაც არ უზრუნველყოფს. მაგალითად, ვთქვათ, jQuery ამჯამად გთავაზობთ slide ქვემოთ და slide up. ისე, მოდით ვთქვათ, თქვენ სურდა ლღობას რაღაც მარცხენა ან from უფლება სახის მოსწონს CS50 მთავარ გვერდზე აკეთებს, როდესაც მიდიხარ ახალი პანელი. თქვენ მაშინ ალბათ უნდა განახორციელოს იგი საკუთარ თავს გამოყენებით animate ფუნქციის ფარგლებში jQuery. ასე რომ, მსგავსი, უბრალოდ animate. და შემდეგ, მას სჭირდება ლექსიკონი სხვადასხვა ღირებულებების რომ თქვენ უნდა გაიაროს. ასე რომ აქ, თუ გვინდოდა animate ელემენტის foo ისეთი, რომ მისი სიგანე ან აფართოებს და კონტრაქტების 80 პიქსელი, დამოკიდებულია რა ის ამჟამად არის. ჩვენ უბრალოდ გაივლის, რომ როგორც არგუმენტი მასში. Animate ასევე გვაქვს სხვა არგუმენტები რომ თქვენ ვერ გაივლის მას, მაგალითად, სიჩქარე ანიმაცია რომ გსურთ მისცეს მას. და გავაკეთოთ, რომ, მე, უბრალოდ, ვამბობთ სწრაფად Google jQuery animate. და შემდეგ, აღზრდა ამ გვერდზე, თქვენ შეგიძლიათ ნახე ის მიიღო bunch სხვადასხვა თვისებები, რომ თქვენ ვერ გაივლის მას. და მე მოგიწოდებთ თქვენ - როცა მოვა მასშტაბით რაღაც, რომ თქვენ არ ვიცი, ან უბრალოდ გსურთ გაიგოთ უფრო მეტი განსაკუთრებული მეთოდი, რომელიც შეგიძლიათ დარეკოთ რაღაც - მხოლოდ Google იგი. jQuery არის ძალიან კარგად არის დოკუმენტირებული. და ხშირად ჯერ არსებობს ბევრი მაგალითები, რომ მათ თქვენთვის. თუ ჩვენ გადახვევა down - გზა down - რომ ჩვენ შეგვიძლია გამოვიყენოთ, ისევე. ერთხელ, როდესაც დეველოპერი რეალურად მიდის მეშვეობით უბედურება წერა ბიბლიოთეკა, ისინი, როგორც წესი მინდა ვინმე გამოიყენოს იგი. ასე რომ, ერთად აპირებს იყოს დოკუმენტაცია. და რომ დოკუმენტაცია შეიძლება ჩვეულებრივ ი პროექტის გვერდი, რომელიც რატომ მივეცით, რომ ორიგინალური საიტზე დასაწყისში, რომელიც აკავშირებს თქვენ პროექტის გვერდები ასე რომ თქვენ შეგიძლიათ ვხედავთ, რომ დოკუმენტაცია. როგორც წესი, პროექტის გვერდი შემთხვევაში of [INAUDIBLE], ეს გითხარით სახელები კლასები. იმ შემთხვევაში, JavaScript, ეს აძლევს თქვენ სახელით ფუნქციები. სხვათა შორის, თუ ჩვენ გადახვევა მდე დაბრუნება, სწრაფი მინიშნება on ფუნქციები როდესაც ხედავთ ფუნქცია ხორციელდება ისევე, როგორც ამ მძიმე ფრჩხილებში ცენტრიდან, ანუ რომ ეს ნივთი სურვილისამებრ. უბრალოდ ხელმძღვანელები up. მე მინახავს ბევრი კითხვა ამის შესახებ. ასე რომ აქ ჩვენ ვხედავთ, რომ animate იღებს თვისებები როგორც აუცილებელი არგუმენტი. და ყველაფერი ნებაყოფლობითია. მინიშნება - შეგიძლიათ წარმოიდგინოთ, რომ ამ სახის საქართველოს, ისევე როგორც კაცი გვერდებზე. Man გვერდები დოკუმენტაცია C და ბევრი სხვა რამ, ისევე. MIKE RIZZO: ასე რომ, ჩვენ ვისწავლეთ შეცვლის სხვადასხვა CSS გვერდზე, animate, და ამოიღონ დაამატოთ HTML. მაგრამ ერთი ნამდვილად ყველაზე ძლიერი რამ JavaScript და განსაკუთრებით jQuery - რა გაძლევთ ამის გაკეთება არის უპასუხოს სხვადასხვა ელემენტები, რომ მოხდეს. მაგალითად, აქ ჩვენ გვაქვს ღონისძიება დამმუშავებლის. და რომ მხოლოდ იმას ნიშნავს, როცა ამ მოვლენა ხდება, ჩვენ გაუმკლავდეს მას გარკვეული გზა. ასე რომ აქ, generic jQuery ღონისძიება დამმუშავებლის არის dot შესახებ. და მაშინ, პირველი, რაც თქვენ არის რა ღონისძიება უნდა მოსმენის ამისთვის. ასე რომ აქ, ის დაჭერით რომ ჩვენ ველოდებით. TOMAS REIMERS: გარდა ამისა, თქვენ უნდა on hover, რომელიც არის ძალიან პოპულარული ერთი. ასე რომ, უკან ჩემი drop მენიუში იდეა. თქვენ უნდა დაბრუნება ერთი hover. და მაშინ ვერ შეცვლის. MIKE RIZZO: Right. და მაშინ, როცა ეს მოხდება, უბრალოდ ახორციელებს ამ ფუნქციის, რომ მისცეს მას როგორც არგუმენტი და რომ ეს შეტყობინებები მიესალმები ან hi. TOMAS REIMERS: ასე რომ, იმ შემთხვევაში, JavaScript, ეს არის ადგილი, ჩვენ უნდა ამოიღონ თავი C. ჩვენ შეგვიძლია რეალურად მიიღოს ფუნქციების არგუმენტები. და არსებობს უამრავი მართლაც რთული გზა ამის გაკეთება. ჩვენ ვაპირებთ, რათა ხელი შეუწყოს ერთი გზა, რომელიც შეგიძლიათ განსაზღვროს ფუნქციონირებს უფლება არსებობს. ასე რომ, როდესაც თქვენ ითხოვს ფუნქცია პარამეტრი, თქვენ ძირითადად მხოლოდ აპირებს განსაზღვრავს ფუნქცია ადგილზე. და გზა თქვენ განსაზღვრავს ფუნქცია in JavaScript თქვენ სიტყვასიტყვით ამბობენ ფუნქცია. მაშინ, როგორც წესი, სახელი ფუნქცია. მაგრამ ჩვენ არასდროს მითითებას ამ ფუნქციის ერთხელ. ასე რომ, რაც მას დავტოვებთ nameless. მაშინ ფრჩხილებში, მაშინ curly აფრთხილებს, ხოლო შემდეგ კოდი ფარგლებში, რომ. ასე რომ, ჩვენ გვესმის ამ can იყოს ცოტა დამაბნეველი. ასე რომ, ჩვენ მოგაწვდით ზოგად ფორმა რა ღონისძიება დამმუშავებლის ჰგავს ქვემოთ, რომელიც მოვლენები. და შემდეგ, თქვენი კოდი შიგნით რომ. MIKE RIZZO: არსებობს რაიმე შეკითხვები ამ? ეს შეიძლება იყოს პატარა დამაბნეველი პირველად ხედავთ მას. TOMAS REIMERS თქვენ ნამდვილად გინდათ გახსენით ფაილი და აჩვენებს მათ jQuery წუთას? MIKE RIZZO: ჰო, მოდით, რომ. OK. TOMAS REIMERS: ასე რომ, ახლა ჩვენ ელექტრო. და რაც ჩვენ გავაკეთეთ არის ჩვენ მიღებული თავისუფლების შექმნაში ორივე index.html ფაილი, რომელიც უერთდება JavaScript ფაილი. და შეგვიძლია ქმნის - yeah. ისე, ეს იმას ორი რამ. პირველი არის ის, ბმულები JavaScript ფაილი. და ჩვენ დავინახავთ, რომ აქ. ჩვენ ვხედავთ, რომ უფროსი HTML დოკუმენტი, განსაკუთრებით. ასე რომ, თქვენ ნახავთ, რომ ჩვენ, პრაქტიკულად, ვთქვათ SRC, რომელიც დგას წყარო. და ეს URL. ასე რომ, აქ თქვენ შეგიძლიათ თქვათ ჩვენ შედის jQuery. და ჩვენ ასევე შედის სკრიპტები. სხვა გზა არ არის, JavaScript რომ თქვენ შეიძლება შეიცავდეს inline script tag როგორც ჩვენ გვაქვს ბოლოში, სადაც იგი ამბობს, რომ სცენარი ტიპის text JavaScript. ასე რომ, ჩვენ ვამბობთ, მოვუსმინოთ, ჩვენ დაახლოებით მოიცავს სცენარი. და ტიპის, რომ სკრიპტი JavaScript, რომელიც ტიპის ტექსტი. ძალიან მარტივია. MIKE RIZZO: ასე რომ, ეს, სახის, იღებს თქვენს კითხვაზე, თუ როგორ არის JavaScript ჩვენს ფაილი რადგან, როდესაც ჩვენ რომ PHP, ჩვენ რაღაც მოსწონს ეს. და შემდეგ, ჩვენი PHP ფუნქციები - ვთქვათ აქციების გაკეთება რაღაც, რომ - მიდის იქ. თუმცა, ახლა ჩვენ სკრიპტი tags რომ ვაძლევთ, რაც რეალურად ნაწილი HTML თავად, რადგან ეს არ არის faking მყოფი HTML ფაილი, როგორც ეს არის PHP რადგან თუ რეალურად წავიდეს და შევხედოთ წყაროს გვერდზე, თქვენ ნახავთ ამ სკრიპტის tags იქ ერთად JavaScript უკავშირდება მათ რომ. ასე რომ, თუ გვინდოდა დაწერა რამდენიმე JavaScript - მოდით უბრალოდ, ვამბობთ ჩვენ გვინდოდა, რომ შეიცვალოს სხეულის რადგან ახლა მე არ მაქვს ნებისმიერი სხვა tags რომ მე ნამდვილად რედაქტირება გარდა ორგანო. მოდით უბრალოდ, ვამბობთ მინდოდა შეცვლა CSS რომ. ამიტომ ჩვენ წავიდეთ წინ და ცვლილება ფერი მას წითელი. ასე რომ, მე ფაილის შენახვა. მოდით დავუბრუნდეთ ჩვენს ვებ გვერდზე, განახლება, და ის ავტომატურად რადგან ეს არ ჩანს, როგორც ეს დაელოდა ვინაიდან ჩვენ არ უსმენს ღონისძიება ან რამე მსგავსი. TOMAS REIMERS: ასე რომ, თუ ჩვენ დავუბრუნდებით, რომ ფაილის კერძოდ - HTML ფაილი - თუ რას აპირებს რომ არის ჩვენ - გვახსოვდეს, რომ ეს არის დატვირთული, სახის, ქრონოლოგიურად. ასე რომ, ჩვენ პირველი ხელმძღვანელი. ეს ტვირთავს ეს ორი ფაილი. მაშინ ჩვენ წავიდეთ ორგანო. და ჩვენ ვხედავთ მიესალმები მსოფლიოში. ასე რომ, ჩვენ გაუწიოს მიესალმები მსოფლიოში. და მაშინ ბოლო რამ ჩვენ არის ჩვენ სცენარი აქვს. ასე რომ გადის სკრიპტი tag იმიტომ, რომ ეს არ ვეუბნებით, რომ უნდა ველოდოთ არაფერი. და ეს ყველაზე ძირითადი გზა აწარმოებს JavaScript. რომ განაცხადა, შეგიძლიათ დააყენა script tag წელს header მხოლოდ რათა ნახოთ ამ ეტაპზე? და აწარმოებს, რომ. ჩვენ ვაპირებთ, რომ შეამჩნია, რომ არ შეცვალოს ფერი. და ეს არის ერთ ერთი პრობლემა JavaScript არის, რომ ყველაფერი დატვირთული ქრონოლოგიური თანმიმდევრობით. ასე რომ, იმ დროს, რომ კოდი გადიოდა, შევარჩიეთ - დავუბრუნდეთ - ორგანოს აქვს. სხეულის tag ჯერ არ არსებობს, რადგან JavaScript შეესაბამება HTML. ასე რომ, ბრაუზერის ჰგავს აირჩიეთ ორგანო. არ არსებობს ასეთი რამ არავის გაუკეთებია. ასე რომ ჩვენ შეგვიძლია იგნორირება, რომ. და ჩვენ შენარჩუნებას აპირებს. და მაშინ ჩვენ განსაზღვროს ორგანოს აქვს. მაგრამ ეს არასოდეს იღებს განახლება. ასე რომ, როდესაც თქვენ განხორციელების script tags, დარწმუნდით განათავსებს მას შემდეგ, რაც ორგანოს აქვს. შემდეგი slide. MIKE RIZZO: OK. ასე რომ, ჩვენ შეიცვალა რაღაც. მაგრამ ეს არ ჰგავს ეს გამოეხმაურა ჩვენს ყველა, რადგან ეს მხოლოდ სახის ეს გააკეთა, როგორც კი დატვირთული გვერდზე. ახლა, ნაცვლად აკეთებს, რატომ არ დავუმატებთ ღონისძიება დამმუშავებლის. მოდით გავაკეთოთ რამე სხეულის ერთხელ. და ვთქვათ, ჩვენ ამის შესახებ - დააწკაპუნეთ. ჩვენ დაამატოთ ფუნქცია. TOMAS REIMERS: მოდით ცვლილება ის ფერი წითელი ერთხელ. რატომ არა? MIKE RIZZO: ჰო, მოდით ცვლილება მისი ფერი, წითელი ერთხელ. ყველა უფლება. მოდით განაახლეთ გვერდი. OK, ჩვენ ვხედავთ - როგორც მოსალოდნელი იყო, ეს არ იქცევა წითელი არავის გაუკეთებია. მაგრამ მაშინ ჩვენ შეგვიძლია წავიდეთ წინ და დაწკაპეთ იგი. TOMAS REIMERS: და იგი იქაური წითელი. MIKE RIZZO: ეს სულაც იქაური წითელი როგორც მოსალოდნელია. TOMAS REIMERS: და ჩვენ ვხედავთ, თუ როგორ ჩვენ შეგვიძლია დავიწყოთ აშენება ძალიან ძირითადი ურთიერთქმედება. სხვა რამ, ჩვენ დაგვჭირდება რომ გააკეთოთ, არის, თუ ჩვენ არ გვინდა, რომ სხეულის ფერი წითელი, მოდით მიიღოს HTML ფონის ფერი წითელი. უბრალოდ, ასე რომ ეს იგივე CSS. და როცა ჩვენ მას ვცვლით, ვხედავთ ამ ძალიან დრამატული ეფექტი იცვლება მთელი გვერდი. ასე რომ კიდევ ერთხელ, თუ თქვენ ახორციელებს რამ, თქვენ შეგიძლიათ ერთი კომპონენტი რომელიც ნიშნავს, რომ დაწკაპავთ. ვთქვათ Exit ღილაკს და მთელი სხვა კომპონენტი, რომელიც გულისხმობს რეაგირება. ასე რომ თქვენ ამოიღონ window როცა ეს მოხდება. MIKE RIZZO: OK. ისევე, როგორც მაგალითად - თქვენ ვერ ვხედავ ამ ადრე - მე მხოლოდ ნახოთ თუ რა იგი გამოიყურება მომწონს, როდესაც ჩვენ დასამალი რაღაც. ასე რომ მე წავიდეთ წინ და არ ლღობას up. TOMAS REIMERS გსურთ გადაიტანოთ რომ პუნქტის ტიპის, სანამ ჩვენ ამის გაკეთება? MIKE RIZZO: OK. ჰო, რატომ არ გავაკეთოთ, რომ მხოლოდ ასე ჩვენ შეგიძლიათ აირჩიოთ ის ცოტა მეტი. TOMAS REIMERS: და მოდით მისთვის კლასის. MIKE RIZZO: ჰო. OK, ასე რომ ვნახოთ. იმის ნაცვლად, რომ შერჩევის ფაქტობრივი სხეულის ახლა, მე უბრალოდ აირჩიეთ ყველაფერი კლასი hello, რომელიც აქ მხოლოდ ერთი რამ. ასე რომ, ჩვენ არ უნდა ფიქრი, რომ. ასე რომ მე ამოცნობა იგი. მე წავიდეთ წინ და დაწკაპეთ იგი. და ეს, ერთგვარი, გააკეთა უცნაური slide up რამ, რაც არ გამოიყურება, რომ მიმზიდველი. საერთოდ, ისინი არ გამოიყურება საკმაოდ ლამაზი. ვფიქრობ, ეს - გარკვეული მიზეზი - არა. მე უბრალოდ fade out ასე თქვენ შეგიძლიათ შეხედოთ, რომ ძალიან. ბევრად გავალამაზოთ. და მაშინ, თუ მე ქმნის JavaScript ნუგეშია ისევ და ჩვენ გვინდა, რომ რა ეს ჰგავს, როდესაც ჩვენ ქრებოდა ის სისტემაში ახლა, მე მხოლოდ მოვუწოდებთ ქრებოდა წელს იგი. და ეს fades უკან შემოსული ანალოგიურად, ჩვენ შეგვიძლია რეალურად ასევე გაივლის არგუმენტი ქრებოდა ან ქრებოდა, რომელიც, სახის, სიჩქარე იგი. მოდით წავიდეთ წინ და ვთქვათ, ჩვენ გვინდა მას წასვლა ნელა ქრებოდა შემოსული ასე რომ, ვფიქრობ, ეს ჯერ კიდევ ჩანდა საკმაოდ სწრაფი. მაგრამ ეს იყო ნელი, ვიდრე ადრე. TOMAS REIMERS: თუ თქვენ გსურთ იპოვოთ მეტი ეს ყველაფერი, კიდევ ერთხელ, უბრალოდ წასვლა jQuery დოკუმენტაცია, რომელიც ჩვენ მოცემული, და წაიკითხეთ ამ გზით. ისინი დოკუმენტურად მათი ფუნქციები წარმოუდგენლად კარგად. MIKE RIZZO: OK. ამიტომ ვფიქრობ, მოდით დავუბრუნდეთ ამ. და ჩვენ შეგვიძლია ვისაუბროთ ჩვენი ბოლო გვერდი. ისე, ჩვენ შეგვიძლია დასრულდება ჩატვირთვის. და მაშინ ჩვენ გახსნა ეს გარკვეული კითხვები. და თუ ბიჭები რაიმე იდეები, გსურთ ცდილობენ გადაყარეთ up და ვნახავთ თუ ჩვენ შეგვიძლია განახორციელებენ მათ JavaScript სწრაფად. ასე რომ, მართლაც სწრაფად ჩატვირთვის შესახებ, რომელიც ავტომატურად შედის უკანასკნელი პრობლემა მითითებული CSS საქაღალდე და რეალურად უკავშირდება თქვენს header.php. ასე რომ თქვენ შეიძლება არ დასძინა, კლასების, რომ განისაზღვრება ფარგლებში ჩატვირთვის მას. და ეს იქნებოდა ავტომატურად ე.წ. იმ რამ, შესაბამისად. TOMAS REIMERS: So ჩატვირთვის არის ძალიან ჯადოსნური რამ განვითარებული ხალხის მიერ at Twitter. და რას ნიშნავდა არ იყო - ადრე საიტებზე მართლაც იმისთვის, რომ გამოიყურება ლამაზი, განსაკუთრებით მაშინ, როდესაც ჩვენ გვქონდა ბევრი საერთო კომპონენტები. ასე რომ, ბევრი ღილაკების ვებ ჩანდა იგივე. ბევრი ტექსტი სფეროებში შეიძლება მოხდეს უკეთ, ვიდრე სტანდარტული ტექსტი ველი თქვენ ალბათ იცით ნამდვილად ძველი საიტებზე ან მართლაც ცუდად გააკეთა საიტებზე, რომელიც მხოლოდ ჰგავს ლიტერატურული ტექსტური ყუთები ყოველგვარი სახით ტექსტი shadow ან რაიმე სახის ლამაზი მონახაზი. ასე რომ, რა ჩატვირთვის გააკეთა, მისი თქმით, ისევე, ჩვენ გვაქვს ბევრი საერთო სტილის. რატომ არ გვაქვს ერთი საერთო CSS და საერთო JavaScript როგორც ასევე, რაც შეიძლება სტილი, როგორც არის და რაც შეგიძლიათ მისცეს ხალხს რამ, როგორიცაა drop ქვემოთ მენიუები, რომელსაც შეუძლია მისცეს ხალხს რამ, როგორიცაა modals. მოდალური არის ის, რაც pops მეტი გვერდი როდესაც ის მკაცრად რომ ვთქვათ ის, რაც აფერხებს შემდგომი ურთიერთქმედების, სანამ ურთიერთქმედება იგი. რაღაც ეს, დარწმუნებული ხართ გსურთ წაშალოთ ეს საგანი? თქვენ არ შეგიძლიათ ნამდვილად არაფერი სანამ თქვენ ამბობთ არა. დასჭირდა ყველა და ეს შეფუთული ის ერთად და აღნიშნა, რომ აქ ჩვენ მივდივართ. ადამიანი შეგვიძლია ახლა გამოვიყენოთ ეს. და ნახავთ, რომ მეტი at getbootstrap.com. იგი ავტომატურად შედის თქვენი ბოლო პრობლემა კომპლექტი. და თქვენ მეტი მივესალმებით გამოიყენოს ეს თქვენი საბოლოო პროექტი. და თუ გვინდა, რომ დაიცვას, რომ ბმული მიიღოს ჩატვირთვის. თქვენ ნახავთ, აქ არის ჩატვირთვის CSS საიტზე. დაინახავთ ჩატვირთვის. და თუ გადახვევა ქვემოთ, თქვენ ნახავთ როგორ უნდა გადმოწეროთ, თუ როგორ უნდა დააინსტალიროთ, et cetera. MIKE RIZZO: თქვენ ასევე შეგიძლიათ, საინტერესოა, სახის მას იყოს რაც სახის თემები რომ გსურთ. მე ვიცი, რომ რაღაც გავაკეთე ჩემი საბოლოო პროექტი, როდესაც მე მივიღე კლასი იყო Customize იგი. სხვადასხვა მობილური ჩატვირთვის რომ ჰქონდა სხვადასხვა ფერი სქემა და სხვადასხვა ფორმებს ზოგიერთი სხვადასხვა რამ. ასე რომ, მე მოგიწოდებთ თქვენ უნდა ითამაშოს, რომ. ეს არის სახის fun უნდა გააკეთოს. TOMAS REIMERS: ვეძებთ მასშტაბით ყველაზე ერთხელ, ეს ძალიან ჰგავს Font გასაოცარია საიტზე. ბევრი დოკუმენტაცია დაიწყება როგორც ჩანს, მსგავსი, როდესაც თქვენ ჩანს საკმარისი იქნება. ასე რომ, აქ ჩვენ გვაქვს CSS კომპონენტი ამ. და თქვენ ნახავთ, თუ როგორ შეგიძლიათ სტილი რამ. ასე რომ, თუ თქვენ დააჭირეთ მაგიდები, მაგალითად, თქვენ შეგიძლიათ მომენტალურად მიიღოს მაგიდა საკმაოდ უბრალოდ დასძინა კლასი მაგიდა მას. იგივე რამ ღილაკებით. თუ თქვენ უბრალოდ დაამატოთ კლასის BTN და BTN რა ან BTN პირველადი, თქვენ შეგიძლიათ კიდევ ერთი ასეთი ღილაკები ამ წინასწარ დამზადებული სტილის. ხოლო შემდეგ, თუ თქვენ ვეძებთ უფრო რთული, ვიდრე უბრალოდ restyling რა w უკვე გაქვთ, დასრულდა JavaScript tab მასშტაბით ყველაზე ჩვენ გაქვთ bunch of კომპონენტები. ასე რომ აქ გვაქვს გადასვლები, modals, dropdowns, ჩანართების და მინიშნებები. Tooltip არის ის, რაც pops up, თქვენი მაუსის როდესაც თქვენ hover რაღაც. Popovers, ცვლილებები, ღილები, დასაკეც აკორდეონებისა არის რა ისინი, როგორც წესი ეწოდება. კარუსელები, რომელიც flip მეშვეობით, როგორიცაა images. ასე რომ, ეს არის კომპონენტების საქართველოს ჩატვირთვის. მე მოგიწოდებთ, რომ მაღალი წავიდეთ შევხედოთ მათ. არსებობს JavaScript კომპონენტი და CSS კომპონენტი. მოგერიდებათ მათი გამოყენება, როგორც თქვენ. ჩვენ არ ვაპირებთ წასვლა ძალიან ბევრი მათ რადგან ვგრძნობთ დოკუმენტაცია მართლაც კარგად გაკეთდეს. და yeah. გაქვთ რაიმე შეკითხვები, რომ? MIKE RIZZO: ასე რომ, როგორც მართლაც სწრაფი მხარეს, დიზაინი ამ ვებ გვერდზე, რომელიც ჩვენ სწრაფად დააყენა ერთად ამ პრეზენტაცია რეალურად გაკეთდეს გამოყენებით ჩატვირთვის. როგორც ხედავთ, როდესაც ჩვენ დააწკაპუნეთ ამ სხვადასხვა ჩანართი, ჩვენ არასოდეს რეალურად რის გამოც მიმდინარე index.html გვერდზე. ასე რომ, რაც გვაქვს, არის სხვადასხვა divs ამ index.html. და მაშინ, როდესაც ჩვენ დააწკაპუნეთ სხვადასხვა tab, უბრალოდ იცვლება რომელიც ერთი მაჩვენებელი. ასე რომ, შესაბამისად პოზიციები, მათ შორის, ცვლის HTML გვერდზე ისე, რომ მიმდინარე tab აღინიშნება, როგორც აქტიური ისე, როგორც ჩანს განსხვავებულად და გამოიყურება მართლაც ლამაზი. TOMAS REIMERS: ასე რომ, ყველაფერი კეთდება ჩვენს გარეშე წერა თითქმის ნებისმიერი CSS. ჩვენ ასევე ვხედავთ header მასშტაბით ყველაზე, რომელიც ფერები ჩვენს მიერ. მაგრამ ფაქტობრივი აყენებს მას გვერდის თავზე და მიღების ეს გადახვევა იყო ჩატვირთვის. და შემდეგ კი კიდევ ერთი ბიბლიოთეკა - ეს არ არის ერთი ჩვენ ვისაუბრეთ, მაგრამ ერთი თქვენ შეგიძლიათ Google, თუ გნებავთ. ეს ჰქვია prettify.js. და ეს სინტაქსი ხაზი გავუსვა თქვენი კოდი თქვენ გამოყენებით, როგორც CSS და JavaScript. ბოლო რაც ჩვენ გვინდა, რომ ვისაუბროთ სანამ ჩვენ გაათავისუფლოს თქვენ out შევიდა მსოფლიო შევხედოთ ბიბლიოთეკების გაერკვნენ როგორ უნდა გამოიყენოთ ისინი და, იმედია, წაკითხვის დოკუმენტაცია და იპოვოს ის, რაც თქვენ საჭიროება როგორ მოვძებნოთ ბიბლიოთეკები. ასე რომ, პირველი არის ჩვენ უბრალოდ აპირებს დააყენებს Google. ტურიზმი Google. ეს არის ის სიტყვასიტყვით რას ვაკეთებთ, როცა უნდა გავაკეთოთ რაღაც ჩვენ Google. არსებობს JavaScript ბიბლიოთეკა, საშუალებას იძლევა ჩემთვის მანიპულირება დრო სასარგებლო გზა? ასე რომ, თუ მე ვიცი, რომ ზოგიერთი პროფაილი შექმნაში ანგარიშის აქ, და ეს არის მიმდინარე დრო, როგორ შემიძლია გამოთვლა განსხვავება, რომ გარეშე გამოვთვალოთ იგი თავს? ასე რომ, ეს არის რეალურად საერთო რამ, JavaScript დროს ბიბლიოთეკა. და აქ ჩვენ Moment.js-- ყველაზე პოპულარული ერთი. იმ შემთხვევაში, თუ ჩვენ გვჭირდება ბიბლიოთეკა მანიპულირება რაღაც ფერი შეძლებს გენერირება bunch of შემთხვევითი ფერები - შესაძლოა, გენერირება სტილი ან რაღაც - ჩვენ შეგვიძლია Google რაღაც JavaScript ფერი ბიბლიოთეკაში. და დარწმუნებული ვარ, ჩვენ რომ პოპ up ერთად ათასი და ერთი მათგანი. მობრძანდით წაკითხვის მათ. ასე რომ საუკეთესო რამ - როდესაც თქვენ მათ - ვაპირებთ გაიმართება ერთი საიტები რომელიც მასპინძელი კოდი. ისინი რამდენიმე პოპულარული პირობა. ყველაზე პოპულარული, მიერ ჯერჯერობით, არის github.com. და თუ წასვლა GitHub სინამდვილეში სადაც ნორმალიზება გაიმართა. ასე რომ, თუ გვინდა დავუბრუნდეთ, რომ ერთი. ვაჩვენოთ, რომ. MIKE RIZZO: და რომ სინამდვილეში, სადაც ეს მასპინძლობს ძალიან, თუ თქვენ შენიშნა. TOMAS REIMERS: ჰო. ასე რომ, თუ მიდიხარ მეტი ნორმალიზება და წასვლა GitHub. იყო ეს? MIKE RIZZO: ეს პატარა კატა რამ არის GitHub სიმბოლო. TOMAS REIMERS: Oh. ასე GitHub იყენებს მეთოდი ეწოდება Git შესანახად კოდი. თქვენ არ ვიცი რა, რომ არის ან ეს frightens თქვენ, რომ ჯარიმა. თქვენ არ ვიცი, რა Git არის რადგან GitHub აქვს Download ღილაკს ბოლოში უფლება. სხვა სასარგებლო რამ ვიცი შესახებ GitHub არის საუკეთესო პროდუქცია ექნება წაიკითხა ჩემთვის. და თუ არ აქვს ნახვა, წაკითხვის me ისაუბრებს, თუ როგორ დააინსტალიროთ, თუ როგორ გამოიყენოთ ის, თუ რას აკეთებს, et cetera, et cetera, et cetera. ის, რაც ჩვენ, ძირითადად, იყო ფეხით თქვენ მეშვეობით. MIKE RIZZO: ინტერნეტის ტოვებს. TOMAS REIMERS: ეს ჯარიმა. ბოლო ორი რამ გვინდოდა ლაპარაკი - ჩვენ ვისაუბრეთ Git - არის troubleshooting. და ეს ერთი არ არის, როგორც შესაბამისი საბოლოო პროდუქტი, როგორც ეს არის როდესაც თქვენ დატოვონ 50. და როდესაც თქვენ გადაეყარონ პროდუქცია ახორციელებს ბიბლიოთეკების ან ახორციელებს საკუთარი პროექტი, თქვენ აპირებს რომ გაქვთ შეკითხვები ან თქვენ აპირებს გამოიყურებოდეს შეკითხვებზე. ერთხელ, Google მას. ეს არის ის სიტყვასიტყვით რას ვაკეთებთ. ეს აპირებს გასწავლოთ სულელური. მაგრამ ფაქტიურად, ჩვენ Google იგი. და ისევ, ერთი პირველი რამ, თქვენ, როგორც წესი, გადაეყარონ არის stackoverflow.com, რომელიც არის შესანიშნავი კითხვა და პასუხი არ ჩანდა. ეს მშვენიერი ორივე, რადგან თქვენ შეგიძლიათ პოსტი კითხვები და ვეძებოთ პასუხი არამედ იმიტომ, მას უკვე აქვს ბევრი წინასწარ დასახლებულ content არსებობს. ასე რომ, როგორც წესი, როდესაც თქვენ Google პროგრამირების კითხვა ფარგლებში პირველი რამდენიმე ჰიტები თქვენ უკვე აწარმოებს იგი დროს თქვენი პრობლემა კომპლექტი. და შემდეგ, ბოლო მართლაც მოკლე რამ არის JSFIDDLE, რაც - დღეს ჩვენ აკეთებს ბევრი მუშაობა JavaScript HTML CSS. JSFIDDLE არის web app, რომლებიც ძირითადად გაძლევთ საშუალებას მიიღოს თქვენი HTML, თქვენი JavaScript ქვედა მარცხენა და თქვენი CSS ზედა მარჯვენა. და მაშინ მას შეუძლია შექმნას სწრაფი გაწევა ეს და ვნახავთ, როგორ ურთიერთქმედებს. ეს არის ძალიან სასარგებლო, როდესაც ადამიანი ცდილობს გავაკეთოთ მტკიცებულება კონცეფციის მოსწონს ეს არის, თუ როგორ გავაკეთოთ ჩამოსაშლელი მენიუ. იქნებ სწრაფი uncover ან რასაც. MIKE RIZZO: მოდით წავიდეთ წინ და დააჭირეთ. სწრაფი შენიშვნა - ხოლო, სანამ ჩვენ ვიყავით აკეთებს დაჭერით. თურმე JCorey Korea ასევე აქვს ჩაშენებული in click ღონისძიება დამმუშავებლის, რომ იყენებს მხოლოდ იმიტომ, რომ გათვლით თქვენ აპირებს გვინდა ბევრი რამ, როდესაც გსურთ დააწკაპუნეთ რაღაც. მსგავსად ამისა, მას ასევე აქვს hover. მაგრამ მიიღოს სრული ფარგლებს მათთვის, შევხედოთ jQuery დოკუმენტაცია და ამის გაკეთება. მე რაღაც სულელური აქ. TOMAS REIMERS: ასე რომ მე ნამდვილად სწრაფი პროგრამის უფლება აქ, რომელიც ამბობს, ღილაკს დაჭერით. მაშინ ჩვენ გვაქვს ამისთვის loop. განთავსების i ნაკლებია, ვიდრე 404. უბრალოდ აპირებს პოპ up ამ საგანგაშო სიგნალი შეტყობინებები. MIKE RIZZO: და რა იყო კოდი 404 იდგა in HTML? ვინმეს გახსოვთ? არ არის ნაპოვნი, მარჯვნივ. Chrome ასევე დასძინა, ეს neat რამ, სადაც შეგიძლიათ - TOMAS REIMERS: იმის გამო, რომ ადამიანს მოსწონს Mike დაიწყო ამით ბევრი და შემაშფოთებელი მომხმარებლებს, რომელიც საშუალებას იძლევა ნახავთ ინფორმაცია. MIKE RIZZO: ჰო. TOMAS REIMERS: გვაქვს რაიმე შეკითხვები ამ, დაახლოებით JavaScript ბიბლიოთეკების, მოძიებაში ბიბლიოთეკების, ან რა ვებ განვითარების გამოიყურება ისევე როგორც რეალურ ცხოვრებაში? ჩვენ გაშვებული up წინააღმდეგ დრო. ასე რომ, მე არ ვარ დარწმუნებული, რომ ჩვენ ვაპირებთ გვაქვს დრო, რათა განახორციელოს თუ ეს მართლაც სწრაფი. ჩვენ კარგი? MIKE RIZZO: Anything თქვენ ბიჭები სურს ვხედავ მართლაც სწრაფი, როგორიცაა, ორი წუთის ან ნაკლები? TOMAS REIMERS: Anything ჩვენ შეგვიძლია გარკვევა? როგორ დავწეროთ in - აუდიტორია: [INAUDIBLE]? MIKE RIZZO: დიახ, ასე that's - TOMAS REIMERS: თქვენ შეგიძლიათ უბრალოდ მოხვდა Control-U ვებგვერდზე. MIKE RIZZO: Oh, მე არ ვიცი, რომ. TOMAS REIMERS: ვფიქრობ, yeah. Control-U. ჰო. MIKE RIZZO: Oh, ასე რომ კოდი ვებგვერდზე. მაგრამ თუ თქვენ ნამდვილად გინდათ ჩამოტვირთოთ ჩვენი ფაილი და ყველაფერი, ის გაიმართა on github.com TOMAS REIMERS: სლეში ჩემი სახელი - Tomas Reimers - slash CS50 დეფისი სემინარი. MIKE RIZZO: თქვენ შეგიძლიათ ყველაფერი არსებობს. TOMAS REIMERS: ეს არის ის, რაც GitHub ჰგავს, სხვათა შორის. ასე რომ კიდევ ერთხელ, როდესაც ხედავთ ღია პროექტი, როგორც წესი, ისინი ყველაფერს წაკითხული მე, რომ შეგიძლიათ წაიკითხოთ. და თუ დაბრუნდეს, თქვენ შეამჩნევთ, რომ თქვენ გაქვთ download zip, რომელიც საშუალებას მოგცემთ ჩამოტვირთოთ წყარო კოდი უნდა შეიცავდეს პროდუქტის თქვენი რამ. MIKE RIZZO: ჰო, და თუ ჩვენ უბრალოდ დააჭირეთ წლის index.html მართლაც სწრაფად - TOMAS REIMERS თქვენ დაინახავთ აქ კოდის ჩვენი ნახვა. MIKE RIZZO: ასევე, დამავიწყდა დააყენებს უფლება ადრე ერთად დიდი მაგიდა ეს შედის, მაგრამ არსებობს ასევე მაგიდა საქართველოს chmods, რომ ჩვენ ჩართული მხოლოდ თქვენი სიწმინდე. მაგრამ თუ ჩვენ გადახვევა ყველა გზა ქვემოთ ბოლოში, ჩვენ არ რეალურად ძალიან ბევრი ერთად JavaScript პერსონალის ყველა ამ. ეს მხოლოდ ყველაფერი კიდევ გვქონდა. ასე რომ, დიდი მადლობა ბიჭებს მომავალი და უსმენდა. ჩვენ ვიმედოვნებთ რომ ეს იყო ნამდვილად გამოსადეგი. თუ თქვენ გაქვთ რაიმე JavaScript დაკავშირებული შეკითხვები, ან უბრალოდ მინდა ვისაუბრო რა მოსწონს სხვა რა მაგარი რამ შეგიძლიათ გააკეთოთ JavaScript, ჩვენ მინდა მიყვარს გაიგო თქვენ. TOMAS REIMERS: თუ თქვენ გაქვთ შეკითხვა თქვენი პროექტის ან თუ ეს შეიძლება იყოს შესაბამისი, ჩვენ ალბათ გამყარებაში გარშემო ცოტა შემდეგ. მაგრამ, გარდა ამისა, აქვს კარგი კვირის. MIKE RIZZO: Yeah, სარგებლობენ. იხილეთ თქვენ ბიჭები. TOMAS REIMERS: იხილეთ ya.