JASON Hirschhorn: Добре дошли, всички, за седмица девет. Ние имаме една вълнуваща седмица напред от нас защото ние имаме нашата крайна проблем набор. Ние също имаме чисто нов език, JavaScript, че вече сте в средата на помощта не само за тази проблем сет, но много от вас ще вероятно я използва за окончателно проекти, особено уеб-базирани окончателните проекти. Така че това е, което ние ще отидем днес, след като говори накратко за ресурси, което правим всяка седмица. Ще се потопите в JavaScript, и след това ще прекараме цялата секция с ръце на дейност кодиране Dolphin Trainer 2K13, което е като Madden 2013 г., но за делфини и в JavaScript. [Смях] JASON Hirschhorn: Така че, както винаги, списък на ресурсите, за да се провери. Тези ресурси са особено важни защото следващата седмица Сряда е един тест, вашият втори и крайна викторина в този курс. Точно като викторина нула, това е 75 минути и започва малко след 13:00. Тя обхваща всичко от ден нула на този курс, но тя със сигурност подчертава, всичко, което е се случи, тъй като викторина едно. Но, разбира се, ние обхванати за вериги в началото на годината. За вериги са вероятно все още ще да бъде част от този тест, така че не е като теб може да игнорира всичко, което се случи преди пет седмици или викторина нула защото този курс изгражда по себе си е много. Но със сигурност акцентът ще бъде поставен върху неща, които сме научили от шест седмици. Това включва PHP, JavaScript, SQL, за да Разбира се, и също така по-напредналите структури от данни, за които говорихме в C. Цял набор от други теми, но ние Ще обсъдим, че през следващата седмица тъй като ние преглед за теста. И също така, както винаги, ако имате някакви въпроси за викторината като сте подготовка, чувствайте се свободни да да ги изпращате по моя начин. Точно сега, има ли някой има някаква бързи въпроси за теста? OK. Не трябва да се притеснявате за него или изрод повече за сега, но имайте това на гърба на ума си, защото това е случва една седмица и един ден от сега. И накрая, аз знам, че бягаме към края на семестъра - има само две точки, след това - но аз все още съм развълнуван и нетърпелив за обратната връзка ако имате такива. Искам да направя тези на най-добрите две секции всякога. Те най-вероятно ще бъде, защото всеки раздел е невероятно и най-добрата досега. Не знам как е възможно, но те всички са били фантастично, мисля. Обратната връзка съм намерила е заглъхна за нищо и никой, тъй като през последните няколко седмици, така че моля, дайте ми малко обратна връзка, ако го има. Това отнема три минути. Можете да ми кажете добри неща, които можете искаш да продължаваш да правиш или неща, които могат да работят по. Аз се опитвам да бъда най-добрият учител възможно, или аз се опитвам да направя най-доброто Мога, но не мога да направя, че ако не го направя знам как вие правите. И е трудно да се каже защо си падане заспал в клас, така че ме пусна знам защо, след като това е така. Аз ви показах тази картинка миналата седмица. Това е Teenage Mutant Ninja Turtles на мотоциклети имах, когато бях по-млад, и ние продължаваме да прокара момчета без помощни колела, тъй като ние се потапя ти на друг език. Но бъдете сигурни, JavaScript, като PHP, е много подобен на нещата, които сте правили в миналото. Голяма част от логиката прехвърля свърши, ако не синтаксиса, точно едно към едно. Но отново, всички тези езици, които сме преминали през през последните няколко седмици, въпреки че те изглеждат непреодолими, са невероятно мощен и ще позволи можете да направите много в своя окончателен проект а вероятно и други сайтове, които ви код в бъдеще. Така че без повече приказки, отиваме да започне да се гмурне в JavaScript. Ние ще говорим за това кратко и след това наистина да влязат в ръцете на кодиране част на този раздел. Така че JavaScript е от страна на клиента скриптове език, което означава, че е различен от PHP и това е различно отколкото да не е съставено и C. JavaScript не е изпълнен от сървъра. Вместо това, можете да го заредите. Можете да заредите страница JavaScript когато заредите уеб страница, а след това той изпълнява на вашата машина. Което означава, че можете да видите всички JavaScript код, който е бил изпратено до вашия компютър. Понякога това е съкратен или кодирани с малко, криптирана малко, така че да можете Не мога да кажа категорично какво става. Например, ако сте проверили CS50 или Решението на персонала за тази седмица проблем настроен, и ще отида да service.js, Ще забележите, че всъщност не може да каже какво да правя от това, което ти е дал. Ние го криптирана малко, за да се направи че малко по-трудно. Въпреки това, можете да видите точно JavaScript файл, който ние изпълняваме и нашата програма се изпълнява. Така че това е, което означава, че за да бъде от страна на клиента скриптов език. Подобно на C и PHP обаче JavaScript има за електрически вериги, ако / друго условия, докато линии. Подобно на PHP, има foreach цикъл, както добре. И отново, много подобен на синтаксиса, което сме виждали в езици, които вече сме работил. Накрая, един от най-яките части JavaScript, и нещо, което ще бъде прави много днес, а вероятно и ти ще да се правят много с вашия P набор ако не са го изпитвали вече, е, че да проверите всички грешки, които имате в кода си чрез JavaScript Console. Ние го погледна малко по-миналата седмица. Разгледахме различен тип конзола да инспектира дадена страница, но в Chrome, отново, можете да видите на оформлението, на HTML, документира, че вашата страница е ви показва на екрана. Можете също да видите всички на JavaScript образуват тази страница, и можете също така, като Казах, вижте всички грешки в JavaScript конзолата. И ние ще изпитате, че още в малко, когато ние започнем кодиране. Едно нещо е да се отбележи, за JavaScript променливи. Подобно на PHP променливи, те са хлабаво-написали, така че не е нужно да се да им даде конкретен тип. По отношение на обхвата, който е дефиниран от "VAR" ключова дума. Така че, ако не се сложи дума пред на нещо, просто напишете името на променливата, след прехвърляне оператор, в този случай знака за равенство. Аз забравям и запетая точно там, но предположи, че има точка и запетая точно там. Тогава вие създавате глобална променлива. Ако поставите "VAR" дума, а след това вие сте му дава някакъв вид локална обхват, независимо дали това е да функция или една линия. Така че това е едно нещо, за да имайте предвид, за променливи. JavaScript е езикът. Jquery е библиотеката построена на върха на на езика JavaScript, а вие имате го виждали преди в лекция. Аз силно препоръчвам, ако ти започваш да се се използва JavaScript в своя окончателен проект, че можете да получите да знаете, JQuery. Той прави всичко, което искате да се направи още много, много по-лесно. Той също идва с прекрасно документация и примери, които да помогнат да се сте започнали. Днес ние ще бъдем използване на JQuery, както добре. Това, което имам на този слайд, са много основите на JQuery. В горната част на вашия HTML файл или каквото - вашият index.php файл, вашият index.html файл - трябва да се включване на тези две линии. Това са доста общи линии. Първият ред включва Jquery JavaScript файла, и втора линия включва, където и да съм писал собствен код JavaScript. И разбира се, защото в JavaScript код, който вероятно сте използвали Jquery някои библиотечни функции, че трябва да отива след Jquery включване скрипт. Ние ще разгледаме този отново в един миг. И най-накрая, в досието JavaScript, Аз наричам това един index.js. Тя може да бъде scripts.js. Каквото и да е, каквото и JavaScript файл ви, вие започвате като цяло с тази линия на код, знака за долар, отворени Paren, документ, в близост скоба, период, готови, отворени Paren, функция, отворени Paren, близки скоба, а след това къдрава скоба. Хвърли си код вътре там, и след това тя завършва с къдрава скоба, в близост скоба, точка и запетая. Така че това като даденост. Ако ти започваш да се използва JQuery, увийте всички ваши Jquery код вътре тази линия на код. И ние ще видим, че отново в секунда. Отново ще работим с JQuery, и моля да зададете въпроси като отидем днес, но някой има някаква въпроси за Jquery или JavaScript точно сега? OK. Така че без повече приказки, аз представям да ви Dolphin Trainer 2K13. Аз съм супер развълнувана за тази последна версия на продукта. О, не! Бях толкова развълнуван. Щях да я покажа на вас, момчета, но изглежда, че не сме тя изпълнява още. Нека направим това малко по-голям. Така че, ако се зареди кода за Dolphin Trainer - тя Данг. Съжалявам, момчета. Аз работех на този преди клас. Мислех, че ще трябва да го завърши, но предполагам, че аз все още имам някои работа наляво, за да се направи. Но за щастие, вие всички имат някаква JavaScript и JQuery практика, така че да вървим напред и да завърши това заедно. Мисля, че аз изпратих вас копия на тази, защото бях супер развълнувана за това, така че трябва да има същия код, който имам. Нека да обърнем внимание - По дяволите, момчета, съжалявам. Нека главата в терминала, все пак. Точно както с миналото си проблем комплекти, ако имате моята - нека направим това малко по-голям, прекалено, за вас, момчета - ти ми взе пощенски файл. Вие вероятно го разкопча. Нека да отидем тук. И след това се надяваме, можете да го премести в същата директория, където сте записали проблема си зададете осем код. И ние освен в тази директория за да мога да достъп до него - или всички ние да получите достъп до код в браузъра Chrome на нашия компютър. И отново, за да стигнем до този код, вие просто да въведете адреса, намерени при дъното, дясната страна на Вашият уред, тук долу. Ще намерите вашия IP адрес. Вие пишете, че в браузъра Chrome на вашия компютър, и в този случай, тъй като ние сме девет папката раздел, ние също трябва да добавите наклонена черта раздел девет. Позволете ми - Опа. Отивам да се сведе до минимум тази, така че аз не правя Трябва да продължим чрез щракване това. Така че, това е как да настроя този код. Аз вече го направих вече. Аз няма да мине през тези стъпки, защото това е, което започваща на проблема определя разходки вас чрез това как да се направи. Така че продължавайте напред и ще получите за да зададете този нагоре в секунда, но първо нека да опознаването на този код като група. Нека да видим това, което направих. Опитах се да се по-голямата част го направили преди клас, но мисля, че Беше малко след себе си. Така че нека да се отвори index.html. OK. И index.html е много проста страница, защото не го направих Искам да стане твърде луд. Аз наистина исках да се уверете, че работи, но аз предполагам, че не се получи толкова далеч. Ето главата, която идва дясно вътре в тези HTML тагове и забелязваме няколко неща, правото на разстояние бухалката. Ние имаме право на CSS файл тук и подходящата местоположението на файла CSS. Имаме библиотеката JQuery точно тук, и вие ще забележите нещо различно за това. Източникът е нещо, много, много дълго. ajax.googleapis.com/-- вид прилича на URL, но той не със сигурност изглежда като JS / jquery.js. И това е така, защото реших, че не искам да трябва да изтеглите Jquery файла и го плъзнете и спести то в моята библиотека, и да бъде отговорен за това. Напротив, аз съм просто ще поеме JavaScript файлове, които Google домакини. Така че Google всъщност е домакин на редица библиотеки и JQuery, тъй като тя е един от най-популярните, тя е домакин че такъв. И тъй като тя го е хостинг, аз не правя нужно да се притеснявате за това, и те го актуализира, макар че, когато те го актуализирате Вероятно ще се наложи да промените тези номера точно тук. Но това е само за да направи целия си файл система за по-малко чиста. Аз наистина не харесвам хостинг всички тези файлове. Това е много по-хубав, ако Google трябва да ги домакин за мен. Така че това, отново, е получаване на цялата JavaScript файл, но това просто е хоства от Google, а не на моята файловата система на компютъра ми. Ние също така виждаме, че сложих в две по- файлове dolphins.js и trainer.js. Ние ще разгледаме тези в секунда. И накрая, това заглавие точно тук. Кой може да ми каже какво е това код вътре тези заглавие тагове, където че отива на моята страница? ПУБЛИКАТА: Както това нещо, че от лентата с инструменти или каквото? JASON Hirschhorn: Да, в раздела малко в горната част на прозореца на Chrome. Това е, когато този текст отива. Вътре в тялото, колкото можете вижте, не много неща тук. Имам само три Divs. Аз им давам някои идентификатори, и Сложих малко текст инча Но аз предполагам, че е защо ние не виждам нищо тук. Всъщност, ние виждаме, Dolphin Trainer 2K13. Ние виждаме TODO. Аз не знам къде е, че идва от защото аз не виждам, че тук. Така че може би това е в един от мои файлове с JavaScript. Ние ще проверим това в секунда. Може ли някой друг да ми каже какво това ID означава точно тук? ПУБЛИКАТА: Това е начин на свикване на отделен раздел в [недоловим] файл? JASON Hirschhorn: Да. Това е просто един начин за позоваване този конкретен DIV. IDs в идеалния случай са уникални. OK? Tough тълпа. Така че, като цяло са уникални идентификатори. Можете да ги даде на един специфичен елемент в кода си. Какво, ако исках да се цитира номер на елементи, независимо дали това е за CSS стайлинг или JQuery? Какво атрибут мога да ги дам? ПУБЛИКАТА: Class. JASON Hirschhorn: A клас, точно така. Точно така. ОК, така че index.html, отново, не много се случва тук. Така че нека да се отвори друг файл. Нека да видим това, което имам. Това е всичко, което имам тук. Да отидем в папката JS. Аз няма да се притеснявате за СГО за сега. Нека отворим dolphins.js. Oops. Или по-скоро - OK. Така че, dolphins.js, той всъщност изглежда доста подобен на някои от кода, който бяха дадени в проблем зададете осем. Можете да преминете през него. Може ли някой да ми каже, все пак, какво е DOLPHINS? Това всички капачки DOLPHINS? Какво е това? Какъв тип данни е, че? ПУБЛИКАТА: Array. JASON Hirschhorn: Това е масив. И ние знаем, че е масив, защото аз вижте тези квадратни скоби тук. И някой друг, какво е това множество? ПУБЛИКАТА: Objects? JASON Hirschhorn: Това е масив от обекти. И вие можете да видите, че. И откъде знаеш, че е множество обекти? ПУБЛИКАТА: Защото имате този на дебелото черво обувка между фигурни скоби? JASON Hirschhorn: Точно така. Така че аз имам тези фигурни скоби точно тук, и след това можете да видите запетаята отделяне на различни Предмети в този масив. И тогава във всеки обект, имам нещо, на дебелото черво и нещо друго. И това, което е като цяло тази първа част, нещото, от лявата страна на дебелото черво? Какво, че се обади? Общоприето? Как можем да се отнасят до това? ПУБЛИКАТА: Index? JASON Hirschhorn: Index, или вероятно по-общо, от ключово значение. И след това от дясната страна страна, стойността. Така индекс, ключ. Но ако ние не говорим за тези, ние обикновено означава нещо на от лявата страна. В обикновен масив, отново, имахме индекси 0. 1. 2. 3. 4. И в делфини, ще имаме делфин 0, делфини един, два делфина, делфини 3, делфини 4. Ние също имаме, вътре в този обект, ние обикновено няма референтни неща. Или ако ние просто трябва този обект дясно тук, ние няма да кажа обект 0, 1 обект, обектно 2. Отиваме да се каже, име на обект, или тип обект, дължина обект, и така нататък. И това е начина, по който ще получите стойността от дясната страна. Така че, ако ние казахме, име на обект, например, ние ще се получи това низ, "Грейс". Така че, както вие сте ми каза, делфини е просто набор от обекти. И вие виждате всички обекти има ли си име, вид, род. Е, че произнася правилно? Някой? Genus? Чудесно. A дължина, тегло. Е, че произнася правилно? Мисля, че да. И една снимка, само на URL до известна файл онлайн. И точно тук, ние затваряме масива, има чак в самото лявата ръка страна на екрана си. Така че това е всичко, на dolphins.js е. О, Боже мой. Това обяснява всичко. Мислех, че ще работи всичко, но поглед. Там са всички тези Todos. OK, да се надяваме можем правя тези заедно. Но нека първо, преди да правим че, просто преминете през този код много бързо. Така че, както споменах, ние виждаме в самото началото на тази линия, която имах в на пързалки, (документ). готова (функция (). И по същество това, което това ще се да се изчака, докато всичко в страници, е бил натоварен, така че изчакайте, докато всичко е масив, всичко е добре да се отида, и след това да започне изпълнение на този код. Така че, ако ви е необходимо да работят с някои PHP, ако ви е необходимо, за да получите някои изображения, каквото и да е, всички код е комплект и е готов да отиде във вашата страница индекс или каквото Страницата е била заредена, а сега и ти започваш да се започне изпълняващата вашия код. Така че първото нещо, което правим, е ние се създаде този масив. И аз не разполагат с VAR дума там, така че това, което е най- обхват на този масив? ПУБЛИКАТА: Това е глобален. JASON Hirschhorn: Това е глобален, така ocean_array могат да бъдат достъпни от навсякъде в този файл. И тогава ние виждаме това в продължение на контур. Той не казва, foreach, но това е по същество един foreach цикъл. И това е само версия на JavaScript, така че за всеки VAR делфините в делфини, какъв тип данни? Въпреки че, отново, JavaScript не имаме тези типове данни сами по себе си, това, което тип данни е делфин? ПУБЛИКАТА: Един обект. JASON Hirschhorn: Това е един обект. Махаме всеки обект в масива делфини. Така че, тук, изглежда, че е забравил да сложи всички тези делфини от нашия гигантски DOLPHINS мислят в ocean_array, така че ние може би трябва да се направи че първият. И тогава, нещо, наречено този басейн променлива. Аз съм я оставяте да нула. И тогава аз наричам тази функция draw_ocean. Тренирам делфин, когато си снимка е щракване - Аз не съм сторил това - и зададете безплатно делфин, когато бутонът се натисне. Така че това са нещата, които трябва да свършите. Предполагам, че трябва да ви даде някои фона на това, което се опитваме да направим. Така че, ако се върнем тук, това, което аз наистина исках това да изглежда като беше масив нагоре тук, а не го казвам "TODO" I Исках маса, по същество, с снимки на всички делфини. И тогава, когато кликнете върху една картина, Исках да го остави в долната половина на екрана и да даде ти цялата информация за него, и че би било делфина в басейна, делфина сте обучение. Така че аз мислех, че ще бъде наистина страхотно. Вие имате всички тези делфини в океана до тук, а след това кликнете върху една, и че ще отидете на басейн, и След това можете да го обучава. Така че това е, което аз се опитвам да направя. И тогава щеше да има един бутон тук в басейна, и можете да кликнете, като, "Set Free", и бихте могли да зададете делфин безплатно, и то ще се върне в океана. Така че това е, което аз се опитвах да се създаде, но отново, аз ще се нуждаем от вашата помощ за да го създадете. Така че, надявам се, някои от тези ключови думи или някои от тези условия ще започне осмисляне сега в контекста на тази програма. Нека да продължим да търсим чрез този файл. Ние наричаме тази функция draw_ocean. Това е един и само функцията ние наричаме от document.ready раздел. Така че ние наричаме това draw_ocean функция, и тя изглежда като тя създава низ, променлива, тук. Нещо Put в низа, добавя повече неща в низа, добавя повече неща на низа, и тогава този ред код. Аз казвам, че отпечатва HTML низ. И някой да ми обясни какво тази линия на код прави? Ами, на първо място, това, което прави че знак за долар означава? Това не е променлива PHP, но това, което ли това знак за долар означава? ПУБЛИКАТА: Свързване към HTML ID на - това е като го свързва към HTML кода? JASON Hirschhorn: Какво ще кажете за че знака за долар? Какво означава, че знака за долар посочи? ПУБЛИКАТА: Свързване на HTML по някакъв начин? JASON Hirschhorn: Къде сме виждали този знак за долар преди това в JavaScript? Видяхме го в лекция. Ние говорихме за това. Какво означава знака за долар означава? ПУБЛИКАТА: Нещо с JQuery? JASON Hirschhorn: Точно така. Това има ли нещо общо с JQuery. Този знак за долар означава, че аз съм с помощта функция за JQuery библиотека тук. Точно така. Така че ние пишем знака за долар, а след това имаме тази отворена скоба и затвори скоба, и вътре има, какво се случва вътре има, когато сте с помощта на функция JQuery библиотека, или сте използване на библиотеката JQuery? Отново сте видяли това в лекция. Може ли някой да ми даде - и вие също видя нещо тук. Какво става вътре от там? Jeff, дай ми предположение. Какво означава това прилича, # океана? Къде сме виждали това преди? ПУБЛИКАТА: Дали това е библиотека или нещо друго? Нямам представа. JASON Hirschhorn: Е, нека ми да отворя индекса точка - Не, погрешно място. Така ние виждаме, ние имаме нещо нарича океана тук. Когато видяхме # океана hashtag на океана, синтаксис и преди? Да? ПУБЛИКАТА: CSS? JASON Hirschhorn: В CSS. Така че ние искахме да оформите нещо, Спомням си, че ще сложи hashtag СГО селектор, или hashtag океан, например, и всички на форматирането че искахме да дадем на нещо с ID океан ще се постави вътре. Така че тук вътре не е CSS селектор отива в тук. Jquery определя своята собствена тип на селектори. Но това е една и съща идея, и действително много от тях се припокриват с CSS. Така че вътре в тези отворени скоби, вие сложи селектор, и независимо от селектор се отнася до тях, това е, което ти започваш да се използва. Така че в този случай, аз съм избиране ID океана. Ако имах един клас - нека кажем, че имам един клас от неща наречена "изображения", и аз давам, че до много елементи, как мога справки клас от неща, наречена "снимки?" ПУБЛИКАТА: Мисля, че беше точка. JASON Hirschhorn: С една точка. Така че, ако вместо това сложих дот изображения тук, че ще ми даде класа на неща наречени "изображения." Разбира се, това е супер мощен, и можете да осъществите достъп до много неща. В действителност, бих могъл справки основно всеки таг в HTML. Така че, ако аз исках да го направя, TD, че е маркер, който сме виждали преди, когато създаване на таблица. Вие вероятно сте запознат с че от P определя седем. В този случай, това е всъщност ще , за да изберете всички от тях. Това ще ми даде масив на всички етикети на ТД. Но това може да се получи малко поразителен, така насам-натам точно сега ние сме Ще се придържаме към само съотнасяне IDs. Така че какво прави това, отново, е , който получава, в този случай - Съжалявам. Отидете тук, за да index.html. Това е един океан, а идентификацията на океана препраща към Разделения, така че тази част от този ред код получава, че DIV. И тогава тази точка означава Обаждам функция, както и името на тази функция е HTML. И това е за кратко, ако вие видяха преди, знака за долар, документ, Дот получите елемент от ID, точкова вътрешната HTML. Това е просто версия на JQuery. Така HTML функцията просто получава вътрешната HTML. От този елемент. Така че отново, ако се върнем тук, ние ще виж, че няма вътрешна HTML. И така, ако аз съм го направил, щях да се опитва да получите HTML. Когато пиша това, аз съм създаване на HTML. Така че аз съм минаваща тази функция, за да низ, низа, които съм създал тук, и да казва, че поставя във вътрешността на океана DIV. Да? ПУБЛИКАТА: когато получите HTML, вие сте само за да се копие, ако го, нали? Ти не си я извадите. JASON Hirschhorn: Точно така. Ако го бях направил това и искаха да запазите това в VAR - Опа. Това ще получите цялата информация, която бях там и да го запишете в друга променлива, да направи копие от него. ПУБЛИКАТА: OK. Взех го. JASON Hirschhorn: Така че, ние създадохме някои HTML, освен че в низа. Пестим още малко. Тук можете да видите, че TODO низ. Така че това е може би къде сме получаване, че TODO от времето, когато отиваме в нашата страница. И всъщност, ако дясната I кликнете върху TODO, инспектира Element, ние говорихме за това миналата седмица. Ето как бихме могли да видите HTML структура на нашата страница. Ще забележите, че тук долу - нека направим това малко по-голям, твърде - ние разполагаме със Разделения ID океана точно тук. Всички виждаме, че ред код? И това е, което ние видове в index.html. Вътре в нея, ние сега виждам тази маса ред код. И това, което е, че на маса ред код, това е кода ние просто вкарва в този елемент. И ние гледаме вътре в него, ние никога напечатан colgroup и tbody. Това е добавен за нас, защото ние направихме някои модни неща. Но вие ще забележите, че има ТР, има ТД с TODO. Така изглежда, отново, за код, който ние написахме тук. Това е точно това, което този Онлайн прави. То е като нашия HTML низ и поставяйки я в този DIV точно тук. Първоначално той няма нищо. Тази страница получава натоварени. Dollar знак, document.ready. Това започва да изпълнява. Ние наричаме функцията draw_ocean, и вътре в draw_ocean функцията вземем този HTML и го сложи вътре, че DIV. Ние току-що премина през много точно там. Дали някой има някакви въпроси за това? Или как това работи, или JQuery? Защото, ако се разбере, че, след това Jquery трябва да се надяваме, че дойде сравнително лесно. Да? ПУБЛИКАТА: Какво сте имали отвътре на скоби под разпечатката HTML низ, който е на името на на HTML променлива, която ви са заявили по-рано? JASON Hirschhorn: Това право тук? Публика: Да JASON Hirschhorn: Да. ПУБЛИКАТА: Така че, ако ви е назовал, че нещо друго, че нещо друго е това, което би поставило в тук. JASON Hirschhorn: Точно така. И това е една добра точка. Това е малко объркващо, защото Имам HTML, HTML. Това вътре тук е името на моя променлива, а това тук е името на функцията Jquery. ПУБЛИКАТА: Но, за да може Jquery функционира да работи, трябва да му се даде някои HTML вход? JASON Hirschhorn: Точно така. Или ще трябва да му се даде низ. Той ще постави че низ вътре на DIV или каквото и да било. Това е само един низ. Той не знае, това е HTML, но очевидно го форматирате нарочно да бъде валиден HTML. Това отговаря ли на въпроса? Публика: Да. JASON Hirschhorn: OK. Да? ПУБЛИКАТА: Какво става, ако океана посочена на бутон или нещо такова? Какво би. HTML направя? Бихте, които променят текст на бутона? JASON Hirschhorn: Така че въпросът е Ами ако тя се отнася до един бутон? Това ще промени вътрешната HTML за нещо. Така че, ако има отворен етикет и близък тагове, той ще сложи нещо по средата на отваряне и затваряне маркер. Ако няма се отварят и затварят маркер, той няма да направи нищо. ПУБЛИКАТА: Това е буквално копие и поставяне на такива неща? JASON Hirschhorn: Да. Той копира и поставя нещо от каквото и променлива аз го мине, на низ Предавам го, вътре в тези отварят и затварят тагове. Нека да разгледаме тук. О, Боже мой. draw_pool не направих направи нещо точно там. Това е лентяй. Тренирайте, уау. ОК, така че не е много друго освен това. Така че нека да започнем, и нека да се определи това. Аз отивам да се наложи на всички помогне да постигнем това. Там всъщност не са, че много линии на код, мисля, да пиша. Мисля, че е направил това преди няколко години за 2K12 версия, и там не би трябвало да бъде много линии код, за да пиша. Не трябваше да заличава този код. Трябваше да го спаси. О, луд. Както и да е, нека да започнем. Така че аз съм в този масив, или аз съм в това линия, и аз имам ocean_array. И аз искам да слагам всичко това, всичко от този файл, в моя ocean_array. И така, как мога да взема всичко от там, и да го постави в ocean_array? Това е един ред код. Кой може да ми даде тази линия на код или кажи ми, имам някаква представа какво тази линия на код трябва да направя? Защо не започнем тук, а после ще продължи да се движи из стаята отговаряне на въпроси. Кърт? Какво е първото? ПУБЛИКАТА: Ocean_array, скоба, делфин. Равно DOLPHINS, скоби делфин? DOLPHINS с капитал всичко. JASON Hirschhorn: OK. Да минеш през синтаксиса. Точно тук, това е като foreach цикъл, така че това е всъщност прави много неща за нас. И делфините е обект. Така че ние не трябва да напиша нещо като делфини, делфин, защото делфин се е възрази, че искам. Това не е индекса. Това прави ли смисъл? Публика: Да. JASON Hirschhorn: Е, как да направите предлага промяна на кода си? Ако знаем, ние сме като се има предвид индекса? О, съжалявам. Ти си добър. Но как - позволете ми да задам един друг въпрос. Ако искаме да - нека всъщност пиша това. Няма нищо. Отиваме да напиша това. Това е страхотно. Извинете. Аз просто много объркващо там. Да оставим, че има за сега, и ние ще се върнем към обучение на делфините, задаване на делфин. Нека просто първо се определи това изготвянето на океана функция, и ние ще се върнем към че Kurt. Но досега, така добре. Нека да погледнем вътре draw_ocean. Линията, която изглежда да бъде погрешно е това "Store снимки на делфини в океана в HTML низ. "И правото сега, аз просто като TODO, но аз наистина искате да сложите на делфините снимки в океана. И какво от това, Ной, мислиш ли, че е първото нещо, което трябва да направя? Ако искам да мине през цялата масив, какво е първото нещо, което аз трябва да направя? ПУБЛИКАТА: Ние трябва да създаде за контур. JASON Hirschhorn: А за контур. И това, което трябва, че за линия изглежда? ПУБЛИКАТА: За - ние трябва да мине през всеки делфин в океана масива. Така че за VAR делфините в - може да ви пиша океана масив? JASON Hirschhorn: Така ли? ПУБЛИКАТА: Вероятно, че е прав. JASON Hirschhorn: Нека да се придържаме с че за сега, и тогава ще се върна към него. И ти започваш да бъде отговорен за тази линия. Така че аз имам от за линия. Майкъл, ти си сега. Какво трябва да направя сега? ПУБЛИКАТА: Вие ще трябва да поеме съхранявате снимки от делфини. JASON Hirschhorn: Е, къде е, че се съхранява? ПУБЛИКАТА: В масива делфин? JASON Hirschhorn: Аз съм объркан сега прекалено за това, което се случва. Нека да разбера как можем да направим, за отстраняване на грешки това, и тогава аз ще дойда обратно към вас, нали? Какво е еквивалент на ФОРМАТ в JavaScript? Ани? ПУБЛИКАТА: Това е документ, който пиша? JASON Hirschhorn: Или как може Виждам нещо в утеши надолу към дъното? ПУБЛИКАТА: Console.log. JASON Hirschhorn: Console.log, точно. Така че нека да направим console.log, и нека просто сложи "делфин" в, OK? В идеалния случай, ако това работи, ние ще има - нека да видим, обратно в този файл dolphins.js, имаше шест делфини, така че аз трябва да получи шест или нещо надявам се отпечатва на конзолата, нали? Това е мястото, където ние сме толкова далеч, защото ние Направих линия на Кърт до тук, а след това ние Направих Ноев за линия, и ние имаме това линия, така че се надяваме, че трябва да видите шест неща, отпечатани на конзолата. Така че нека да отидете тук, нека да отворим нашия утеши и освежи нашата страница. ОК, така че изглежда като видяхме шест индекси. Нула, едно, две, три, четири и пет, да. ПУБЛИКАТА: Как да стигнем до тази страница във вашата - JASON Hirschhorn: как мога да получа за това нещо тук? ПУБЛИКАТА: Не, на страницата Chrome вътре [Недоловим] уред. Може ли да видим това, или не? JASON Hirschhorn: Това Chrome страница точно тук? Публика: Да. JASON Hirschhorn: Така че точно като в P набор осем, аз съм отворил прозорец Chrome на компютъра си, на моя Macintosh десктоп. И ако забележите тук този URL нагоре по в горния ляв ъгъл, който съвпада с този IP адрес тук долу. Така че, за да направите това, обаче, в началото на проблема определя спец. ви разходки чрез точно как да стане това. Но аз просто следва, че и вместо на с кода совалка, аз просто направих нашия собствен код. В готино нещо е, че ние също може да инспектира ocean_array. Така че тя изглежда като ocean_array е набор от шест обекти, и да отворим всяка една. Boom! One. Така Kurt, тя изглежда като вашия код работи перфектно. Всичко започна в ocean_array. Защото аз сбърка рано. Но да, страхотна работа. The ocean_array е правилна, и тя изглежда както сега виждаме, че делфините е число от 0 до 5, така че изглеждаше като индексите в масив. Така че, имайки предвид, че знанията, Michael, какво да правим сега? Мисли на глас. Какво е нещо, което искате да направите? ПУБЛИКАТА: Искаме да получите най- JPEG за всеки делфин. JASON Hirschhorn: OK. Така че как можем да справки - как можем да получим на JPEG? Откъде да започнем? Къде се съхранява всичко? ПУБЛИКАТА: В ocean_array? JASON Hirschhorn: OK. ПУБЛИКАТА: Така ocean_array, делфините - JASON Hirschhorn: Как правим получите нещо вътре - така че това ни дава този обект. И ние сме виждали това и преди с струк. Така че, какъв вид на нотация имаме нужда да се използва? ПУБЛИКАТА: Би било точката. JASON Hirschhorn: A точка. И тогава какво поле? ПУБЛИКАТА: Picture? Или това не е поле - JASON Hirschhorn: Какво е наречен в dolphins.js? И виждате, можете да погледнете. Ние можем да се върнем тук. Ние можем да видим ocean_array, можем да го изследваме. Как се нарича? ПУБЛИКАТА: Type. Изчакайте. Picture? Казах картина. JASON Hirschhorn: Picture. Точно така. Вие не звучеше, сякаш знаеш какво за която говориш, все пак. Тя звучеше по-скоро като предположение. Така че картината, така че ще даде ни на URL адреса на снимката. Jeff, имате въпрос? Публика: Да, мога да не получите това, което имате на вашия Chrome браузъра на компютъра ми. Току-що получи "неуловените препратка грешка, конзола не е дефинирана. " JASON Hirschhorn: Имаш създаде всичко? ПУБЛИКАТА: Ами, аз мисля, че Направих всичко, което ви Направих на големия екран. JASON Hirschhorn: И вие chmodded всички файлове? И ти мине през цялата настройка? ПУБЛИКАТА: Ще опитаме отново. JASON Hirschhorn: OK. Прескочих над че много в започваше, но трябва да мине през цялата настройка точно като в в началото на проблем набор спец.. CHMOD всичко и уверете, че тя е инча ПУБЛИКАТА: Аз ще отида и ще удвои го проверите. Мислех, че го е направил, но Аз ще се удвои проверка. JASON Hirschhorn: Значи, това изглежда като това ще ни даде на низ и снимка. Чудесно. Имаме URL адреса на снимката. Как ние сега го сложи в - какво се случва, ако пишем Само този, Майкъл? ПУБЛИКАТА: Той просто получава картината. Той всъщност не го покажете. JASON Hirschhorn: Нека да видим какво ще стане. Ще спаси. Ние ще го изпълним тук. Тя изглежда като ние не се получи нищо. Ако аз проучи тази таблица, тя изглежда като вътре - Да, изглежда, че не се получи нищо. Публика: Трябва ли да - JASON Hirschhorn: Това е низ, този код точно тук. Къде мога да искате да сложите тази поредица? ПУБЛИКАТА: Искате да го постави в океана? JASON Hirschhorn: OK. И тук Слагам низ наречен HTML в океана. ПУБЛИКАТА: Така ще бъде тя долар знак, океана, HTML [недоловим]. JASON Hirschhorn: Това би Казано направо там. Но какво, ако искам да го добавите към - Аз съм вече създава низ, нали? За да се постави в океана, какво е името на този низ? ПУБЛИКАТА: HTML. JASON Hirschhorn: HTML. Така че, това, което мога да пиша следващия? ПУБЛИКАТА: равни, равни. Или просто се равнява? JASON Hirschhorn: Какво ще се случи, ако аз пиша равни? ПУБЛИКАТА: Няма ли да го настроите равно - или не ще, че - ПУБЛИКАТА: Присвояване? JASON Hirschhorn: Това ще го присвои, но какво ще се случи с всичко която е била съхранявана в него преди? ПУБЛИКАТА: Ще се отървете от него. JASON Hirschhorn: Ще се отървете от него. И така, как мога да го добавите към края? Бих просто копирайте - ПУБЛИКАТА: Plus равни. JASON Hirschhorn: Plus равни, перфектно. Това е точно така. Така че сега нека проверим какво прави това. Boom! О, Боже мой. Това е просто много текст. OK. Така че изглежда, че има много на текст, но това е страхотно. Вие, момчета, са направили - Знам, че това е трудно, това е нещо ново. Досега три от вас са направили фантастичен. ОК, ти си следващият. Какво трябва да правя по-нататък? Ние очевидно не го искат да играе само низ. Да? ПУБЛИКАТА: Аз просто имам един въпрос. Знаеш ли, когато правиш ocean_array, делфин, в скоби, не е делфин като асоциативен масив в себе си? JASON Hirschhorn: I сбърка. Dolphin е индекса. ПУБЛИКАТА: но не е VAR делфините в океана - Искам да кажа, когато първоначално сте го заредите като добре, VAR делфините в делфини, не е че делфин асоциативен масив? JASON Hirschhorn: Този делфин? Публика: Да. JASON Hirschhorn: Не. Този делфин е индексът. ПУБЛИКАТА: OK. Така че има променлива делфин? Искам да кажа, като ключов делфините в на асоциативен масив? JASON Hirschhorn: Точно тук? Подобно, dolphin.name? Публика: Да, има ли като точка на делфините - като не е делфин означаваше да бъде всеки обект? Публика: Да, това е това, което си мислех, твърде. ПУБЛИКАТА: Мислех делфин беше като на асоциативен масив в делфини. Защото има шест асоциативен масиви в DOLPHINS, нали? JASON Hirschhorn: Точно така. Начинът, по който ние сме това писмено сега, не е така. ПУБЛИКАТА: Защо е това? JASON Hirschhorn: Можем да направим това, и там всъщност е функция JQuery обади. всеки, който дава ти всяко нещо. Но този синтаксис не е - I сбърка по-рано - този синтаксис не е, че е индекс. Това е просто ни дава индексите. Но бихте могли да направите знака за долар. Всеки, което е функция JQuery. Това ще ви даде всеки асоциативен масив. Така че проверете това. Но това е, което всички този кодекс прави. ПУБЛИКАТА: Така че това първо за контур, аз Предполагам, че ще повторите шест пъти защото имате шест индекси. И след това на втория за цикъл, не е, че итерации на същия брой пъти? JASON Hirschhorn: Да. ПУБЛИКАТА: Така че наистина няма - ние би могъл да напише на първа линия за отново, и тя щеше да работи. Подобно, VAR делфините в DOLPHINS? JASON Hirschhorn: Да, но ние сме Сега с помощта на ocean_array. Ние се преместих всичко в ocean_array, защото казват, че някога искате да се промени това, което е в dolphins.js, или ако ние искаме да манипулира ocean_array по-късно, ние не искаме да се манипулира делфини, променливата. Искаме да манипулират копие от него, защото, ако искаме да се вземат нещо навън, по този начин ние сме просто щеше да бъде в безопасност. Има ли, че има смисъл. Публика: Да. JASON Hirschhorn: OK. Така че, Карлос, как мога да се възползвам от тази поредица и да го направи вместо изображение, и да получите реалното изображение? Ти видя този код преди. Как да направя включите изображение на една страница? ПУБЛИКАТА: Дали това е нещо, което направихме за че HTML плюс равнява ТЕ повикване тире ширина, тя го изтрили? JASON Hirschhorn: Това неща точно тук? Публика: Да. Нещо такова. JASON Hirschhorn: не се тревожи за това. Това просто започва HTML низ. Ако искате да включите изображение в моята HTML уеб страница, какво маркер да използвам? ПУБЛИКАТА: Аз не си спомням. JASON Hirschhorn: OK. Avie, му помогна? ПУБЛИКАТА: Ще бъде ли котва, HREF, и след това можете да го свържете? JASON Hirschhorn: So А, както е в Anchor. ПУБЛИКАТА: Не е нужно да свържете го, нали? JASON Hirschhorn: Какво става, ако аз просто Искам да се създаде един образ? ПУБЛИКАТА: Тя ще бъде IMG, и след това SRC равнява каквото низа е? JASON Hirschhorn: ОК, така че Точно така, IMG. Карлос, ти започваш да се го вземе от тук. IMG означава "образ", и SRC щандове за "източник". и трябва да му се даде един URL или някои - дори не е URL. Някои места, където това изображението се запаметява. Така че аз знам, че това ще ми е да на изображението, така че сега как мога да постави всичко това заедно, помисли си? Имам някои синтаксис трябва да се определи. Какво точно ми трябва да напишете, Карлос? ПУБЛИКАТА: Не мога да разбера какво Вие се опитвате да направите. Така че вие ​​се опитвате да се постави цялата изображенията в таблица? JASON Hirschhorn: Искаме да се покаже всички изображения в страницата. И ние видяхме как тази линия на код полето тук добавени струни на нашия HTML низ и ги отпечатва по този начин. Ние вместо това искате да покажете изображения. И ние осъзнахме, Maru, ни каза, че тази линия на код - така че нека да разгледаме тук. Ако ние отидохме и проучени, ние ще редактирате това като HTML. Maru, каза, ако ние не направим този вид синтаксис, получаваме изображение. Значи ли това, да има смисъл? Това е типът на низ, който ние Наистина искам да се сложи вътре в океана гмуркане, а не само на самия текст. ПУБЛИКАТА: [недоловим] JASON Hirschhorn: Моля? ПУБЛИКАТА: Не можеш ли просто да копирате че един че Kianna даде, и го сложи в това - JASON Hirschhorn: Копирайте този, и сложи това тук? Публика: Да. JASON Hirschhorn: Това е близо, но има един проблем с това, и какво е това? HTML е низ, и ние трябва да добавите струни към него. ПУБЛИКАТА: Значи тогава го сложите - нах. JASON Hirschhorn: И ние имаме три - това тук не е низ. Как да го направите низ? Как винаги се нещо низ? ПУБЛИКАТА: Не знам. JASON Hirschhorn: Ако имам текст, как да го направи низ? Харесва тук, на този ред точно тук? ПУБЛИКАТА: Сложете го в таблицата? JASON Hirschhorn: Какво ще кажете за това? ПУБЛИКАТА: Цитат. JASON Hirschhorn: Double кавички, нали? Двойни кавички прави нещо низ. Така, че прави, че низ, и това е низ. Как да сложи две струни заедно в JavaScript? ПУБЛИКАТА: Dot. JASON Hirschhorn: Не е точка. Това е PHP. ПУБЛИКАТА: Plus. JASON Hirschhorn: Plus, точно така. Така плюс, а след това, което правите Предлагаме да правя тук? ПУБЛИКАТА: Друг цитат. JASON Hirschhorn: Друг цитат, OK. Как да сложи край на низ? ПУБЛИКАТА: Друг цитат. JASON Hirschhorn: Друг цитат. И как мога да поставя този низ заедно с този низ? A плюс. Това е точно така. Вие току-що е направил това за нас. Това е перфектно. Така че сега нека да направи това. И изглежда, че имаме цяло куп снимки. О, Боже мой. Това са страшно. Отиваме да проучи ги в секунда. Да, Ной? ПУБЛИКАТА: Знам, че не прави наистина значение, но трябва да ви затворите елементи с етикет образ? JASON Hirschhorn: Бихме могли, ако ние искахме, затворете нашия имидж тагове просто ей така. Да се ​​направи това. На, не, ние не можем да направим това. ПУБЛИКАТА: О, аз го счупи. JASON Hirschhorn: Мисля, че това валидиране е, все пак. Аз не мисля, че трябва затварящата черта. Добре, това е чудесно. Карлос, благодаря ви. Досега четири от вас са свършили страхотна работа. Разбира се, както можете да видите, ние сме създаване на някакъв вид на таблица откос. И искам тези неща да бъде под формата на таблица. И така, как мога да ги сложа неща в една таблица? Аз очевидно се нуждаят от по-HTML. Асам, какъв вид на HTML съм липсва? ПУБЛИКАТА: Какво правиш искам да направя, съжалявам? JASON Hirschhorn: Искам да сложа всички тези изображения в една таблица, така че всяко изображение трябва да бъде в една колона на таблицата. Как мога да кажа, това е една колона? Вие сте виждали този код преди. Това е в P определя седем. ПУБЛИКАТА: Спомням си един е TR? JASON Hirschhorn: TR е за ред. ПУБЛИКАТА: Аз не го знам разстояние сърцето ми, но мога да проверя. JASON Hirschhorn: Има ли някой не помниш ли? ПУБЛИКАТА: TD? JASON Hirschhorn: TD, точно така. TD го слага като колона. Така че ако сложа на ТД там, Асам, от какво се нуждая сложа? Какво друго трябва да добавите? Публика: Трябва да го затворите? JASON Hirschhorn: Точно така. Откъде идва това отидете? ПУБЛИКАТА: Точно там? JASON Hirschhorn: Точно тук? ПУБЛИКАТА: Мисля, че да. JASON Hirschhorn: Какво е това затваряне точно тук? Какво е това? Това синьо нещо? ПУБЛИКАТА: Това е за имиджа. Тя трябва да отиде след това, мисля. JASON Hirschhorn: Добре, точно така. Така че нека да видим какво е направил това. О, това е неловко. Нека отворим океан, маса, маса на тялото, TR. Така че ние имаме един тон, но аз не виждат изображенията. Това е странно. Тя изглежда като тя го е построил, но не ми покаже снимките. Някакви идеи защо това може да бъде случаят? Някакви идеи? ПУБЛИКАТА: Ако превъртите надолу, вие ще ги видите. JASON Hirschhorn: Бум! Така че те са там, но това е странно, че те са по целия път там. ПУБЛИКАТА: Те са също всички в един ред. JASON Hirschhorn: И всички те са в подред, и всички те са различни размери. Така Асам, дай ми още един ред с код ако мога да направя всяко изображение на същия размер, и тя изглежда като съм вече бе посочено в размер I искат да бъдат. Как мога да направя всяко изображение със същия размер? Дайте диво предположение. Какво ще кажете за тази линия на код? ПУБЛИКАТА: Можете ли да направите Като постоянен? JASON Hirschhorn: Или къде е друг поставите би могло да постави този ред на код, ако аз просто го копирате? ПУБЛИКАТА: All пътя надолу на същата тази линия? JASON Hirschhorn: Добре, нека да поставим то тук, точно така. А сега нека да видим какво ще стане. О, Боже мой! Сега изглежда, че ние започваме да получите нещо, и тя изглежда като те сортиране на всички поберат в таблицата, че ние сме изградени във всяка TD. Също така, Асам, нека да кажа, че съм искал тяхното височини да бъдат малко повече - нещо височини ме хвърлиш, така какво трябва да определя на височината им? Вземете който и да е номер. Публика: 200? JASON Hirschhorn: 200. Отивам да взема 100. Това е страхотно. За наистина харесвам 200. Ето ни! ОК, сега това започва да изглежда малко по-добре и малко по-организирани. Всякакви други мисли за това, което ние трябва да се направите, за да съхранявате снимки на делфини? Да? ПУБЛИКАТА: Има кавичките, или единния кавички, около стойностите за източник, височина, ширина, са тези, които по избор? JASON Hirschhorn: Къде са единични кавички? ПУБЛИКАТА: Както и в някои от примерите, ще имате като височина се равнява на цитат "150." Дали че не е необходимо. JASON Hirschhorn: Така че нека да погледнете тук. Ако кликнете върху океана, идете в таблица, вие ще забележите, тук тя всъщност добавя тези цитати за мен. ПУБЛИКАТА: OK. JASON Hirschhorn: И така, аз осъзнавам какво правим изглежда болезнено бавно. Имаме само писмено три реда код досега, или четири реда код, но това е в действителност, че процеса I мине през всеки път, когато искам да направи този сайт. Ред по ред, като се използва конзолата надолу тук, проучване и фигуриращ неща от стъпка по стъпка какво искам да правя. Така че, да се надяваме, това имитира за момчета в добро, педагогически начин това, което всъщност ще се прави, когато можете да създадете свой уеб сайт. Нека продължим. Ние сме създали тези неща. Отивам в действителност - Avie, аз имам един голям въпрос за вас. Аз не знам, ние ще продължим напред. Да отидем в "влак делфин, когато си картина се натисне. "Как да направите Предлагаме да пиша тази линия на код? ПУБЛИКАТА: Налице е функция наречен "влак". JASON Hirschhorn: Има една функция наречен "влак", точно така. ПУБЛИКАТА: Той очаква индекс. JASON Hirschhorn: Train очаква индекс, така, OK. Avie, това е точно мотивите че аз обичам да се види. Тренирайте очаква индекс. ПУБЛИКАТА: Значи ще да имат за контур. JASON Hirschhorn: Ами, аз искам да направя когато една снимка е щракване, така Avie, Как да следя, когато снимка е щракване? Има няколко начина да направите това. Това е силата на JavaScript и Jquery, но и най-трудната част. ПУБЛИКАТА: Ако скобите, не. Или ако скобите събитие, или нещо сравнително прост? JASON Hirschhorn: Така видяхме няколко начини да направите това в лекцията. Едно нещо е да, тук долу, можете да направи нещо подобно може да се създаде функция като на клик, или правим нещо подобно на кликване. Всеки си спомня виждайки нещо подобно? Можете да го направите в рамките на HTML тагове. Виждам, че някои озадачени лица. Някои хора са като, какво говори той? Това е добре, защото мисля, че това е по-сложен начин да го направя. Отиваме да се направи много по-лесно начин, с помощта на JQuery. Така че, Avie? ПУБЛИКАТА: Hm? JASON Hirschhorn: Ако искам да направя Jquery нещо, аз очевидно започне, както преди, с този знак за долар, отворен Paren, близки скоба, и двойно цитира тук. Сега знам, че трябва селектор тук. Какво селектор предлагаш ще се прилага за всяко едно или всяко изображение една картина? ПУБЛИКАТА: Image? JASON Hirschhorn: Това е точно така. Това ще се прилага за всяко едно изображение. Взима всички от тях. Това не е лична, тя не е клас, това е тип на етикет, и това ще получи всеки един от тях. И сега аз ще ви кажа това за сега, и можете да търсите повече документация за това по-късно, но това нещо, наречено "за" сделки с събития. Така че това, което ти се да направя сега, и което е супер мощен, е каже какъв тип събитие, което търсите и какво искате да правите, когато ви получавате това събитие. Така че аз ще ви дам малко малко повече код, Avie, а след това Вие трябва да отида, нали? ПУБЛИКАТА: OK. ПУБЛИКАТА: On - отиваме да се каже, "Клик" в този случай, който ти ще обикновено използват. Така на клик, а след това ние ще да го давате на анонимен функция. И този синтаксис ти започваш да се види много, и се надяваме, че ще се пише много. Това, което прави е, отново, на едно щракване на нещо, наречено изображение, независимо, нищо нарича изображение, ние ще да стартирате тази анонимна функция. Аз не съм му даде име. Аз не съм го прехвърлят никакви аргументи. Аз съм просто, като, създавайки тук е функционира, и ето какво кода ти започваш да се направи. Това е, с този синтаксис средства. И също така, както ще забележите, че изглежда много подобен на този тук, че ние написа преди. OK, Avie. Значи вие искате да се обадите влак по индекс. Това ли искате да направите? Публика: Да. JASON Hirschhorn: Това е? OK. Да видим какво ще стане. ПУБЛИКАТА: Чакай, все пак. Индексът не е променлива, точно сега. JASON Hirschhorn: Така индексът не е променлива, точно сега. Аз не знам къде си го от. ПУБЛИКАТА: [недоловим]. Така че първо трябва да разбера които делфин бил кликнали? JASON Hirschhorn: Отлично. Трябва да разбера кои делфин се е кликнали. Това е див изстрел в тъмното. Някой да има някаква идея как мога да разбера какво делфин се е кликнал? Ако не, аз просто ще я дам на вас, защото това е доста луд. OK. Така че нека да разпечатате чрез console.log. Това нещо. Така че, знака за долар, отворени скоба, толкова близо скоба. Така че, когато кликнете върху този образ, аз отивам да отпечатате тази на конзолата, и нека да видим какво ще стане. Нека да се върнем тук. Да отидем да утеши. Няма грешки, слава богу. OK. Щракнах. Позволете ми да направя това отново. Щракнах този първи образ, и това бил отпечатан на конзолата, този ред на нещата. Отивам да се използва за Думата "това" много. Това нещо тук, това е много специални, и го прави точно това, което Avie иска тя да направи. Става каквото е кликнали върху или нещо такова. Защото отново, този селектор се случва да се справят с много неща, ние не правим задължително да се знае кои сме нещо говориш, така че ние искаме да разбера кои неща си говорим около чрез този синтаксис. В този случай, точно тук, hashtag океан, ние винаги знаем какво нещо сме Ще се говори за, така че ние никога не е наистина необходимо това вътре в hashtag океана. Той винаги е океана, че DIV. Това е ID, само едно нещо е възможно. Но в този случай, това се отнася за много на изображения, в действителност, шест изображения и така ние искаме да знаем какво конкретно изображението е кликнали върху. И изглежда, че това е най- тип информация, която получаваме. Ние получаваме тя изглежда като някакъв голям низ, и получаваме всичко това информация с това. Ние получаваме т и т и тона на нещата. Jquery е супер мощен. Това ни дава тон на информация за този конкретен HTML елемент. Avie, какво искаме да знаем за този HTML елемент? ПУБЛИКАТА: Нещо като ID. JASON Hirschhorn: An ID. Е, ние имаме източник, ширина и височина. ПУБЛИКАТА: Ние можем да използваме източник. JASON Hirschhorn: Ние да използвате източника. Това ще ни даде по-низ, на URL низ. Какво ще правим с че след като имаме това? Как да се върнем към нашия индекс в ocean_array? ПУБЛИКАТА: Ние може да се сравни да друга. JASON Hirschhorn: Така че бихме могли контур през всеки. Сега бихме могли контур отново и след това сравни това. Представете си какво би било по-прост начин, ако можете да си представите един? ПУБЛИКАТА: Не е като да се накъдрят. JASON Hirschhorn: Не е като да се накъдрят. ПУБЛИКАТА: Just фигуриращ делфин, [недоловим]. JASON Hirschhorn: Измислянето какво делфин. OK. Така че нека да запишете тази информация в този образ етикет. И отново, точно сега, част от тези неща е просто вълшебно, защото бих могъл да ви показвам това за първи път, но се надяваме, това са неща, ти започваш да се прави. Така че това е нещо, магически можеш да направиш. Можете да запишете някои допълнителни метаданни в елемент. Тя няма да се покаже, че няма засегне нищо. Можете просто да го запишете там. И аз предлагам да спасим форум с всяко изображение. Така че начина, по който направи това е да създадете атрибут нарича пробив на данни, и след това каквото си име Искам да го дам. Тире Data е специална нещо, което е дава на вас, и то се казва това е нещо, което потребителят ще създаде. Така че ние създаваме това нещо, наречено индекс, този ключ се нарича индекс. И вътре в него, ние ще да се сложи не само един всеки път, но това, което правим ще се постави вътре в него, Avie? Какво става тук? ПУБЛИКАТА: Dolphin. JASON Hirschhorn: Dolphin. Това не е тази дума. Dolphin. И отново, ние вече отпечатани делфин по-рано, че 0, 1, 2, 3, 4, 5, и ние сме спестяване, че с образа. Така че сега, ако го направя - и отново, ние освен, че метаданни. Как да получите достъп до метаданните? Това е с функция, наречена просто "данни." И трябва да го давате един и само един аргумент, който е името на това нещо. Така че аз отивам да отпечатате това, и тогава аз ще взема въпроси. Но по същество, аз казвам, че ми даде тази обект, който е кликнал върху, виж на всички свои качества данни, и един, наречен "индексира" ми даде тази стойност. И нека да видим какво се случва, когато ние да обновите тази страница. Точно това, което очаквахме. Отново, това беше доста вълшебно. Ние току-що направих много точно там. Кой има някакви въпроси за това? Да? ПУБЛИКАТА: Аз просто имам един въпрос за вашата живо код. Можете да използвате като един цитат, двойно цитат, като точно там. JASON Hirschhorn: Точно тук. Публика: Да. Има ли причина, поради която да направи апостроф, двойни кавички? JASON Hirschhorn: Има си причина, и това се връща към това, което Marcus попита по-рано. В този ред, аз бях, че е малко по-добре в моя кодиране. Аз искам това, и това е, което аз честно Трябваше да направя всичко на време, за ширина и височина по-специално. Нека да разгледаме тук. Ще видите точно тук, може ли това? Знам, че това е вид на малки, но данните индекс на таблото е в двойни кавички. Тези неща винаги се нуждаят от да бъде в двойни кавички. Стойността винаги трябва да бъде в двойни кавички. Но тук, ако го направя двойно цитат, че ще сложи край на този низ точно тук, и сега не би било пишете в низ. Така че аз се наоколо, че само с помощта на апостроф, защото един-единствен цитат не свършва низ JavaScript, но в HTML не се интересува, ако сте тя дава единични кавички или двойни кавички. Тя просто ще го тълкува като двойни кавички. Това прави ли смисъл? Да? ПУБЛИКАТА: Как да получите, че IP адрес в долната част на вашия клиент? Mine заяви, че няма IP адрес. Има ли нещо, което трябва да са направили в [недоловим]. JASON Hirschhorn: Във вашия уред, тя няма нищо? Публика: Да. JASON Hirschhorn: Има нещо можете да направите, за да го оправя, но аз не съм ще прекарват времето си ходене през това точно сега. Но можем да го направим след раздел. ПУБЛИКАТА: Ако се върнете към конзолата, защо е брой изброени 012 321? JASON Hirschhorn: Console? О, защото аз просто се щракване около диво. ПУБЛИКАТА: О, OK. Няма нищо. JASON Hirschhorn: И отново, не мога да кликнете за нещо, а bajillion пъти. ПУБЛИКАТА: Аз имам един въпрос за си линия отново, си за примки. Защото знаеш, че в P определя осем, те използвате различен вид от този цикъл. Така че те като VAR и е равна на 0, аз по-малко отколкото, ocean_array.length, аз + +. Това ли са еквивалентни? JASON Hirschhorn: Това е стандарт за цикъл. Или, да, това е за вериги. В действителност, ние сме виждали, че е еквивалентен. ПУБЛИКАТА: Значи това е еквивалентно на това, което сте направили тук? Е един счита по-добре от другия? JASON Hirschhorn: Не. Така че, отново, ние сме преминали над някои неща. Ние вече се изнесе нашата зона на комфорт и започна да прави някои наистина готино неща, които не са непременно изчезнали над в клас и преди, но ще надявам се да е много мощен за вас, когато кодиране. Avie, нека се върнем тук. Имам индексът на делфина. Сега какво трябва да направя? ПУБЛИКАТА: Вие трябва да го обучават. Така че вместо да console.log, вие да зададете променлива, равна на тази? JASON Hirschhorn: OK. Е, и? ПУБЛИКАТА: Аз не съм сигурен, ако можете да направите това. JASON Hirschhorn: Така VAR х е равно на това, каквото и да се връща, той ще го върне. Няма значение. Той може да се върне всеки променлива. Няма никакви видове тук. ПУБЛИКАТА: Или просто можете да направете повикване функция. JASON Hirschhorn: Да, защо не мога да направя това? Просто направете повикване функция. Публика: Да. Казано по друг набор от скоби. JASON Hirschhorn: Perfect. Това е точно така. Така че ще извикате функцията на влака. Разбира се, нищо не е във влака функция, така че предлагам, Akshar, това, което аз трябва да се направи в функцията на влака. Дайте ми някакъв псевдо код. ПУБЛИКАТА: Мисля, че трябва да го извадите делфин от първоначалната таблица. JASON Hirschhorn: И това става Ной-рано защо ние копирате то в един нов масив. Точно така, не защото правим, за да редактирате нашия делфини масив, защото това, ако друг програма го използва или какво, ако искаме за достъп до него някъде другаде? Ние не искате да направите копие, както и че е на едно отиваме да редактирате. ПУБЛИКАТА: Тогава вие позиционирате то на новия адрес. JASON Hirschhorn: И какво правим ние трябва да направим след това? ПУБЛИКАТА: И тогава вие разпечатате информация за делфина. JASON Hirschhorn: Това е точно така. Ние я извадете от ocean_array, ние го постави в басейна, а след това ние привличаме океана в басейна. Как мога да премахна делфина от ocean_array? ПУБЛИКАТА: Отиваш на индекса. О, OK. Използвайте функцията за снаждане. JASON Hirschhorn: ОК, така, че е прав. Мога да използвам функция снаждане, които отнема нещо от масив и кондензира. Това е нещо ново, ние не сте виждали преди. Но аз наистина искам да се поддържа пространство там, защото аз искам да разпечатате празно място в океана. ПУБЛИКАТА: Значи тогава можете да зададете изображението на този форум, на ocean_array индекс точка картина. JASON Hirschhorn: OK, ocean_array, индекс. ПУБЛИКАТА: Dot картина. JASON Hirschhorn: Dot картина. ПУБЛИКАТА: И вие го настроите да Null? JASON Hirschhorn: равно нула. OK. Така че нищо не е там, така че след това как мога да слагам в басейна? Константин, как да направя го постави в басейна? Ние имаме тази променлива се обадихме, нарича басейн, до тук. Публика: Да ние просто правим равни ocean_array форум? ПУБЛИКАТА: не трябва да ви превключите в ред? JASON Hirschhorn: Един сек. Да? Публика: Да, това беше всъщност е добра точка. JASON Hirschhorn: Какво става тук? ПУБЛИКАТА: Дали е индекс? JASON Hirschhorn: Index, точно така. И това, което казахте, Константин, е нещо, което ние трябва да направим? ПУБЛИКАТА: Ние може би трябва да превключите на поръчката. JASON Hirschhorn: и защо трябва сменяме реда, може би? ПУБЛИКАТА: Защото по това посочи, че е вече нищожна. JASON Hirschhorn: Така че това не е всичко, нула, но сме загубили URL адреса на изображението. Били сме го загубили завинаги? ПУБЛИКАТА: Технически не? JASON Hirschhorn: Има ние го загубили завинаги? Публиката: Не. JASON Hirschhorn: Е, къде е тя? ПУБЛИКАТА: В оригиналната си делфин - JASON Hirschhorn: Това е в делфини, но в ocean_array ние сме го загубили завинаги. Така Константин, може да ви предложи по-добър начин да напиша тази линия? Всъщност, съжалявам, тя е записана в басейн. Ние го имаме в басейн, защото басейн е обект, нали? Ocean_array индекс, един ocean_array е масив от обекти. Така басейн е обект, и имаме на URL там, и надолу тук той е настроен на нула. Така че, всъщност, ние не трябва е загубил завинаги. Това е просто записва в басейн. Но това със сигурност не е в ocean_array, и както ти каза, Карлос, че е в масива делфини. Така че това изглежда сладка. И после как да теглим океана и басейна? Марио? ПУБЛИКАТА: Можете просто да се обадя draw_pool и draw_ocean? Така че, като, draw_pool, а след това - Е, да, тя не взема нищо. JASON Hirschhorn: Great. Какво draw_pool смяташ да правиш? ПУБЛИКАТА: Равенство басейна? JASON Hirschhorn: Да, добре, Какво ще правим? ПУБЛИКАТА: Съжалявам. Вие може да направи същото нещо, като имаме - JASON Hirschhorn: Дръж се, ние ще стигнем до там. Нищо. Тя не прави нищо в момента. Да видим дали това работи, все пак. Кой ни даде този код? Akshar и Константин ни даде този код? Добре, нека да видим какво ще стане. Ах! Това беше толкова вълнуващо. Тя си отиде. О, момче. Това е нещо грозно. Е, можем да се върнем и да определи, че по-късно. Чудя се къде е тя? Ние го спаси в тази променлива басейн. Как мога да разбера дали това е в тази променлива басейн? Е, отново, силата на JavaScript, и по-специално на инструменти, които Chrome ви дава, е, че може сега инспектира тази променлива басейн. Това е глобална, не помниш ли? Ние не постави VAR ключова дума. Така че, ако въведете Въведете точно тук, Константин, какво мислиш, че аз съм ще получите, когато ударих Enter? ПУБЛИКАТА: Не знам. JASON Hirschhorn: Познай. ПУБЛИКАТА: Нищо? JASON Hirschhorn: Нищо нередно. Това беше добро предположение, все пак. Имам обекта. Запомни ме даде тази линия на код. Pool, сте записали в тази променлива обект. И наистина, ние виждаме обекта сте записали в нея. Това е страхотно. Ние можем да инспектира от тук. Това е почти като в реално време GDB, че ние можем да погледнем чрез нашия код и разбера неща. Това е супер готина и супер мощен. ОК, нека да довърша това. Нека да се направи басейн в пет минути. Maru, дай ми една линия на код, за да привлече басейна. ПУБЛИКАТА: Може да имате друг променлива HTML, но / за. JASON Hirschhorn: Да направим че е много проста за сега. Нека просто да отпечатате името на делфина сме обучение. ПУБЛИКАТА: И след това можете да направите долар подпише, отворени скоби, и след това отворете цитат. Предполагам паунд басейн, ако това беше нещо. Не си спомням. JASON Hirschhorn: Нека да погледнем назад. Мисля, че това е нещо. Публика: Добре, да. И след това затворете цитат, в близост скоби HTML., Отворени скоби, и тогава аз предполагам, басейн, като отворена скоба 0 или нещо подобно. Close име точка. Аз не знам дали това работи. Публика: Добре, нека да видим какво ще стане. "Не може да се прочете името на собствеността на неопределено. "Така че отново, ето какво ние ще проверим. Отиваме да проучи това. Ти направи басейн, открит bracket0, име.. Отново, аз правя това през цялото време, и аз съм объркан какво става, какво прави това предупреждение да кажа. Нека да разгледаме най-басейн. Нека да разгледаме басейн скоба 0, неопределен. Така че това е, когато ни изтича в нашия проблем, нали? Pool скоба 0 не стане, Очевидно е, че съществува. Какво мислиш, че не съществува? ПУБЛИКАТА: Има басейн само обект по себе си? JASON Hirschhorn: Ами, това, което не се казва точно тук? Когато удари Въведете на басейн, това, което не се казва, че е? ПУБЛИКАТА: Object. JASON Hirschhorn: Това е обект, така? ПУБЛИКАТА: О, да. Така че просто pool.name вместо - JASON Hirschhorn: Pool.name дава точно това, което исках. И аз осъзнавам, че минавам през това бавно и belaboring този момент, но това е точно как да направя тези неща. Ще се сблъскате с тези бъгове по време на последния си проект, така че аз се надявам, това е овластяване да бъде в състояние да използват всички тези инструменти. Те са от решаващо значение и ще можете да получите супер шикозен далеч. Така че аз не искам просто да отпечатате името. Да го направи малко Малко по-хубаво от това. ПУБЛИКАТА: Какво друго искаме да направим? JASON Hirschhorn: Добре, добре. Ние ще направим точно това. Уф. Момчета, нямате живот. OK, бум, имам го. Изглежда добре. Ще видите, Akshar, тук долу, ние сме нула, не е намерен. Така изглежда, че все още се опитва да намери някакъв образ, и че не е направил точно това, което исках да направя. Ние няма да отида в това сега, но вероятно има по-чист начин на Правейки това. ПУБЛИКАТА: Може ли да оставя така празно място за имиджа? Като вместо да я оставяте да нищожна, може ли да го настроите да се харесва на празна низ или нещо такова? JASON Hirschhorn: Харесвам това? Публика: Да. JASON Hirschhorn: [недоловим]. Не е намерен. Така че има по-добър начин да го направите. Аз предлагам да правите това. Точно определяне на нула там. След това, разбира се, това, което е ще се случи? Той ще си отиде напълно. Така че, ако искаме да запазим място и да направим това, ние най-вероятно искате да направите нещо тук, както добре. Отивам, за да започна. Akshar, дай ми тази линия на код наистина бързо. ПУБЛИКАТА: Ако ocean_array, делфин, равни, равни, е равен - се равнява на нула? Да. JASON Hirschhorn: Тогава какво? ПУБЛИКАТА: След това направете HTML. Можете просто да копирате долния код, наистина. JASON Hirschhorn: Копирайте какво? ПУБЛИКАТА: Можете да копирате - JASON Hirschhorn: This? Публика: Да. JASON Hirschhorn: Всичко това? Ние не разполагаме с един образ. ПУБЛИКАТА: Аз ви кажа може просто да оставите - Да, може просто да го затворите. Но аз мисля, че трябва да зададете ширината. JASON Hirschhorn: Ами, просто създадете празен колона. OK. И след това в този случай, ние най-вероятно ще искате да направите това, както добре. Oops. Oh. Още не работи, но ние не сме получаване на тази грешка. Нека да видим какво се е случило тук. Така че няма нищо там, така че това, което казахте, че трябва да добавите? Публика: Трябва да зададете ширината на реда. JASON Hirschhorn: За какво? ПУБЛИКАТА: Мисля, че е 150. Публика: Да, беше 150. JASON Hirschhorn: Ще сложим този тук да запазя код последователна. Но това не е един. Добре, добре. Пуснато. OK? Така че тя все още си отива. ПУБЛИКАТА: О, обадете ширина? JASON Hirschhorn: Тя изглежда като ширината е 150. Нека да видим. Сега ние ще направим на финала, хладно, мощно нещо, че аз съм Ще ви покажа. Ние няма да завърши този код, но онлайн, преди да се откажат от всичко това код ще бъде вярна. Ще ви изпратим имейл, коригираната версия с някои от моя собствен стил, след като раздел, както и че ще бъдат публикувани онлайн. Насърчавам ви да запазите проучване на този и използва това като отправна, но аз Искам да ви покажа крайния инструмент за тази клас, както и че е тук по отдясно. И ние погледна това миналата седмица, но сега да се надяваме, че е малко по-запознати за вас и удобни. Вие може динамично да играе със СГО на страницата. Ние всъщност вече ни видял динамично играят с HTML. Запомни направихме правото щракнете върху Edit Както HTML? Точно тук? Така че ние сме динамично играе с HTML. В конзолата, динамично можете да играете с JavaScript на страницата. Например, това е валидно JavaScript линия. Boom, аз имам точно това, което исках. Така че ние може динамично да играят с HTML, динамично играят с JavaScript. Сега отиваме към динамично играят с CSS. И всичко това е така, защото това е като миг живеят GDB обратна връзка, както и за да можете може да знае нещо, нали преди като да отиде кода си, и ще можете да Не знаеш ли какво нещо е ще изглежда така. Така че това е супер дупер готино. И нека най-накрая погледна динамично играе с CSS. Ето тук в дясно страна, element.style. Да отидем в това. Тук е нашият елемент. Да го дам някои допълнителни CSS. Или съжалявам, бихме могли да я дам някои допълнителни CSS, но най-вероятно, в този случай, искате да промените този атрибут. Така че нека да сляза тук, за да тази линия. О, аз не мога да го направя тук. Извинете. Редактирайте AS - така че това е начина, по който може да редактирате CSS. Ние няма да редактирате CSS при този второ, но ние искаме да редактирате на HTML кода и го даде допълнителен атрибут. Какво предлага промяна на това? Мислех Avie имаше предложение. ПУБЛИКАТА: широчина Col? JASON Hirschhorn: Това приличаше той не е направил нищо. Нека се опитаме СГО. ПУБЛИКАТА: [недоловим] клас? JASON Hirschhorn: Той казва, тя не работи. Той дава, че нещо жълто. ПУБЛИКАТА: Но [недоловим]. ПУБЛИКАТА: Няма ли настройка на ширината на изображението до 150, когато правиш това? Както не бихте просто използвайте ширина? JASON Hirschhorn: Да. ПУБЛИКАТА: Но ние нямаме изображение вече. JASON Hirschhorn: Не. Ние нямаме нищо там. Така че ние няма да се реши на конкретния проблем. Отиваме да се върнем към Akshar е решение, защото искам да зададете делфин безплатно за момента, или това е последното нещо, което искам да завърша. Така че ние отиваме да напусне този тук като същевременно признава, че не е съвсем вярна, и ние ще да се върна към него. Извинете. Казах, че може динамично промяна на CSS. Нека да разгледаме това и правя че наистина бързо. Така че, ако аз инспектира този елемент тук, и да кажа, че искам да направя това синьо, можете да дойдете тук, цвят на кожата, тъй като Знам, че променя цвета на нещо, и видяхме как го променя това синьо. Така че ми е динамично промяна на CSS. Не го промени за добро, но след това Аз мога да се върна в моя CSS файл и промяна на цвета на обект. OK. Това беше много. Ние не си свърша невероятна програма. Нека само да ви покажа, че наистина бързо, и след това ще се отправите. О, къде е? Не! Дръж се. ОК, така, както сте опаковане, на невероятно преглед, или пред преглеждате, на следващия път. Това е Dolphin Trainer 2013 г., и тя не работи. Чудесно. [Смях] JASON Hirschhorn: Oh! Boom! Какво означава това? Публика: Ти не CHMOD. JASON Hirschhorn: Аз не го коригирате. ПУБЛИКАТА: Първи ред. JASON Hirschhorn: О, виж това. OK. Така че, аз имам шест делфини. Какво се случва? Нека да видим. Ако тренирате един, сега обучение Лили. О, аз искам да ви освободи, Лили. Ето, обратно в океана. Така че това беше тази седмица. Ако имате някакви въпроси, ние ще бъдем навън. И отново, аз ще ви изпратя останалата част на този кодекс. Благодаря ви, момчета.