Джэйсан Хиршхорн: Сардэчна запрашаем, усё, каб тыдзень дзевяці. У нас ёсць захапляльная тыдзень наперадзе нас таму што ў нас канчатковы набор праблем. У нас таксама ёсць новы мову, JavaScript, што вы ўжо знаходзіцеся ў самы разгар выкарыстоўваючы не толькі для гэтага Праблема набор, але многія з вас будзе верагодна, выкарыстоўваць яго для канчатковага праекты, асабліва Web-Based канчатковыя праекты. Дык вось што мы разгледзім сёння пасля коратка казаць аб рэсурсах, якія мы робім кожны тыдзень. Мы будзем скакаць у JavaScript, а затым мы выдаткуем усе секцыі з практычны дзейнасці кадавання Дэльфін трэнерам 2K13, які, як Madden 2013, але для дэльфінаў і ў JavaScript. [Смех] Джэйсан Хиршхорн: Так як заўсёды, спіс рэсурсаў для вас, каб праверыць. Гэтыя рэсурсы асабліва важныя таму на наступным тыдні на Асяроддзе з'яўляецца віктарына адзін, ваша другая і апошні тэст у гэтым курсе. Гэтак жа, як віктарыны нулявы, гэта 75 хвілін і пачынае трохі пасля 1 вечара. Яна ахоплівае ўсе пачынаючы з нулявога дня гэтага курса, але гэта, вядома, падкрэслівае ўсё, што мае адбылося з віктарыны адзін. Але, вядома, мы разгледзелі для завес ў пачатку года. Для завесы, верагодна, усё яшчэ збіраюся быць часткай гэтай віктарыне, так што гэта не як вы можаце ігнараваць усё, што адбылося да тыдня пяць ці віктарыне нулявы таму што гэта, вядома будуе на сабе шмат. Але, вядома, акцэнт будзе зроблены на рэчы, якія мы вывучылі, так як шостым тыдні. Гэта ўключае ў сябе PHP, JavaScript, SQL да Безумоўна, а таксама больш прасунутыя структуры дадзеных мы гаварылі на мове C. Цэлы шэраг іншых тэм, але мы абмяркуюць, што на наступным тыдні , Калі мы разглядаем для віктарыны. А таксама, як заўсёды, калі ў вас ёсць якія-небудзь пытанні аб віктарыне, як вы падрыхтоўцы, не саромейцеся паслаць ім мой шлях. Прама цяпер, хто-небудзь ёсць якія-небудзь хуткія пытанні аб віктарыне? ОК. Не трэба турбавацца пра гэта ці вырадак аб прама зараз, але майце гэта ў таму ў сваім розуме, таму што гэта адбываецца ў тыдзень і адзін дзень праз. Нарэшце, я ведаю, мы бяжым да канец семестра - Ёсць толькі два часткі, якія засталіся пасля гэта - але я ўсё яшчэ ўзбуджаны і імкнуцца да вашай зваротнай сувязі калі ў вас ёсць. Я хачу, каб тыя, Лепшыя дзве секцыі калі-небудзь. Яны, верагодна, будзе, таму што кожны раздзел з'яўляецца дзіўным і лепшых калі-небудзь. Я не ведаю, як гэта магчыма, але яны ўсе былі фантастычнымі, я думаю. Зваротная сувязь я атрымаў ужо заціх ні да чаго і ні так як для Апошнія пару тыдняў, так што, калі ласка, дайце мне некаторую зваротную сувязь, калі ў вас ёсць. Гэта займае тры хвіліны. Вы можаце сказаць мне добрыя рэчы, якія вы хочаце, каб я рабіў ці рэчы я магу працаваць. Я спрабую быць лепшым настаўнікам магчыма, ці я спрабую зрабіць усё, Я магу, але я не магу зрабіць гэта, калі я не ведаю, як вы, хлопцы, робіце. І цяжка сказаць, чаму ты падаеш спіць у класе, так што давайце мне ведаць пасля, чаму гэта было так. Я паказаў вам гэта фота на мінулым тыдні. Гэта з'яўляецца Чарапашкі-ніндзя ровар у мяне быў, калі я быў маладзей, і мы працягваем штурхаць вас, хлопцы без падрыхтоўкі колаў, як мы апускаемся Вы на іншай мове. Але будзьце ўпэўненыя, JavaScript, як PHP, вельмі падобны на рэчы, якія Вы зроблена ў мінулым. Шмат логікі перадае больш, калі ня сінтаксіс, роўна да аднаго. Але зноў жа, усе гэтыя мовы, мы перайшлі ў апошнія пару тыдняў, хоць яны, здаецца пераважнай, неверагодна магутны і дазволіць Вы многае зрабіць у вашым канчатковым праекце і, верагодна, іншыя вэб-сайты, якія вы Код у будучыні. Так што без далейшых цырымоній, мы збіраемся пачаць ныраць у JavaScript. Мы збіраемся казаць пра гэта коратка і тады сапраўды трапіць у рукі-на кадавання частка гэтага падзелу. Так JavaScript з'яўляецца сцэнарыяў на баку кліента мова, які азначае, што гэта адрозніваецца ад PHP і ўсё па-іншаму чым С. JavaScript ня складзеныя і гэта не выконваецца на сэрвэры. Хутчэй, вы загрузіце яго. Вы загружаеце старонку JavaScript пры загрузцы вэб-старонка, а затым ён выконвае на вашай машыне. Гэта значыць, вы можаце убачыць усе JavaScript код, які быў паслаў да кампутара. Часам гэта пакараціць або закадаваныя трохі, зашыфраваныя трохі, так што вы не магу сказаць відавочна, што адбываецца. Напрыклад, калі вы праверыць CS50 або супрацоўнікі рашэнне для гэтага тыдня Праблема ўсталяваць, і вы ідзяце ў service.js, вы заўважыце, вы не можаце на самой справе сказаць што рабіць з таго, што мы далі вам. Мы зашыфраваныя яго трохі, каб зрабіць што крыху больш складана. Тым не менш, вы можаце ўбачыць дакладнае JavaScript-файл, які мы выконваем і наша праграма працуе на. Дык вось што значыць быць на баку кліента скрыптовы мову. Падобна C і PHP, хоць, JavaScript мае для завес, калі / іншае ўмовы, у той час як завесы. Падобна PHP, ён мае цыкл па кожнаму элементу, а таксама. І зноў жа, вельмі падобны на сінтаксісу, якія мы бачылі ў Мовы, якія мы ўжо працаваў з. Нарэшце, адзін з самых стромкіх частках JavaScript, і тое, што мы будзем рабіць шмат сёння, і, верагодна, вы будзеце рабіць шмат з вашым P набору, калі вам ня выпрабавалі гэта ўжо, гэта вы можаце праверыць усе памылкі ў вас ёсць у кодзе праз кансоль JavaScript. Мы глядзелі на яго трохі на мінулым тыдні. Мы глядзелі на іншы тып кансолі для праверкі старонкі, але ў Хром, зноў жа, вы можаце ўбачыць макет, HTML, дакументальна пацвердзіць, што ваша старонка паказваючы вам на экране. Вы таксама можаце ўбачыць усё JavaScript сфармаваць гэтую старонку, і вы таксама можаце, як Я сказаў, убачыць усе памылкі ў кансоль JavaScript. І мы будзем адчуваць, што больш у трохі, калі мы пачынаем кадавання. Адзінае, што варта адзначыць, аб JavaScript зменныя. Як PHP зменных, яны слаба тыпізаваных, так што вам не трэба даць ім пэўны тып. З пункту гледжання аб'ёму, які вызначаны па ключавым слове "пераменная". Так што, калі вы не ставіце ключавое слова перад чагосьці, вы проста напісаць імя зменнай, то прызначэнне аператар, у гэтым выпадку знак роўнасці. Я забыўся кропку з коскі тут жа, але мяркую, што ёсць кропка з коскі прама там. Тады вы ствараеце глабальная пераменная. Калі паставіць "зменнай" ключавое слова, то вы даеце яму некаторы тып мясцовага Сфера, будзь то ў функцыя або пятля. Так што адна справа Адзначым для зменных. JavaScript з'яўляецца мовай. JQuery гэта бібліятэка пабудавана на вяршыні мова JavaScript, і ў вас ёсць бачыў яго раней у лекцыі. Я настойліва рэкамендую, калі вы збіраецеся выкарыстоўваць наяўнасць у вашым фінале праект, які вы даведаецеся JQuery. Гэта робіць усё, што вы хочаце зрабіць значна, значна лягчэй. Ён таксама пастаўляецца з выдатным дакументацыя і прыклады, якія дапамогуць атрымаць вы пачалі. Сёння мы збіраемся быць з дапамогай JQuery, а таксама. Гэта тое, што я ёсць на гэтым слайдзе, з'яўляюцца самыя асновы JQuery. У верхняй частцы HTML-файла ці ўсё - ваш файл index.php, ваш файл index.html - трэба уключыць гэтыя два радкі. Гэта даволі агульныя лініі. Першы радок ўключае JQuery JavaScript-файл, а ў другой радку ўключае ў сябе, дзе б вы напісалі ваш уласны код JavaScript. І, вядома, таму што ў вашым JavaScript код, які Вы ўжо выкарысталі некаторыя бібліятэчныя функцыі JQuery, што павінен пайсці пасля таго, як JQuery скрыпт ўключэнне. Мы будзем вывучаць гэты зноў у адно імгненне. І, нарэшце, у файле JavaScript, Я называю гэта адзін index.js. Гэта можа быць scripts.js. У любым выпадку, усё, што JavaScript файл вы, вы пачынаеце як правіла, з гэтага радка кода, знак даляра, адкрытыя дужка, дакумент, побач дужка, Перыяд, гатовы, адкрытыя дужка, функцыя, адкрытыя дужка, побач дужка, а затым фігурная дужка. Кіньце ваш код ўнутры ёсць, а затым скончыць яго з фігурнай дужкі, недалёка Хлопец, кропка з коскі. Так што бярыце гэта як дадзенасць. Калі вы збіраецеся выкарыстоўваць JQuery, абгарніце увесь код JQuery ўнутры гэты радок кода. І мы ўбачым, што зноў праз секунду. Зноў мы будзем працаваць з JQuery, і, калі ласка, задавайце пытанні, як мы ідзем сёння, але хто-небудзь ёсць якія-небудзь пытанні аб JQuery або JavaScript прама цяпер? ОК. Так што без далейшых цырымоній, я ўяўляю Вам Дэльфін трэнерам 2K13. Я супер рады, пра гэта апошняе версія прадукта. О, не! Я быў так ўсхваляваны. Я збіраўся паказаць яго вам, хлопцы, але, падобна, у нас ёсць не рэалізаваны яшчэ. Давайце зробім гэта крыху больш. Так што, калі я загружаю код для Dolphin Трэнер - чорт пабяры яго. Мне вельмі шкада, хлопцы. Я працаваў на гэтым перад класам. Я думаў, што я павінен быў бы гэта скончылася, але я думаю, у мяне яшчэ ёсць некаторыя праца яшчэ трэба зрабіць. Але, на шчасце, усе вы, хлопцы, ёсць некаторыя JavaScript і JQuery практыка, так давайце ісці наперад і завяршыць гэта разам. Я думаю, што я паслаў вы, хлопцы, копіі гэтага, таму што я быў супер захоплены пра гэта, таму вы павінны мець той жа код, што ў мяне ёсць. Давайце галаву ў - Данг гэта, хлопцы, мне вельмі шкада. Давайце галаву ў тэрмінал, аднак. Гэтак жа, як з вашай мінулым праблеме наборы, калі ў вас ёсць мой - давайце зробім гэта крыху больш, таксама для вас, хлопцы - вы ўзялі мой паштовы файл. Вы па-відаць, расшпіліў яго. Пойдзем адсюль. А потым, спадзяюся, вы пераехалі яго ў той жа каталог, дзе вы захавалі ваша праблема ўсталяваць восем код. І мы эканомім у гэтым каталогу, каб я мог доступ да яго - ці мы ўсе можам атрымаць доступ да код у браўзэры Chrome на нашым кампутары. І зноў, каб дабрацца да гэтага кода, вы проста ўвядзіце адрас знайсці на ніжняя, правая частка Ваш прыбор, тут. Вы знойдзеце IP-адрас. Вы набіраеце, што ў браўзэры Chrome на вашым кампутары, і ў гэтым выпадку, так як мы секцыя дзевяць тэчак, мы таксама павінны дадаць скараціць раздзел дзевяць. Дазвольце мне - упс. Я збіраюся звесці да мінімуму гэта так, я не павінны трымаць пстрычка праз гэта. Дык вось, як я стварыў гэты код. Я ўжо зрабіў, што ўжо. Я не збіраюся ісці праз тыя крокі, таму што гэта тое, што пачынаючы праблемы ўсталюеце прагулкі вам, як рабіць. Так што наперад, і вы атрымаеце, каб усталяваць гэта у секунду, але спачатку давайце вывучыць гэты код у якасці групы. Давайце паглядзім, што я і зрабіў. Я спрабаваў атрымаць большасць з іх зроблена перад класам, але я думаю, што я быў трохі ззаду. Так давайце адкрыем index.html. ОК. І 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. Мы будзем глядзець на тых, хто ў секунду. І, нарэшце, гэта назва прама тут. Хто можа сказаць мне, што гэты код ўнутры гэтыя тэгі назву, дзе , Якая ідзе на маёй старонцы? АЎДЫТОРЫЯ: Як, што рэч, якая панэль прылад ці што? Джэйсан Хиршхорн: Так, ўкладка трохі на верхняй частцы акна Chrome. Вось дзе, што тэкст ідзе. Усярэдзіне корпуса, як вы можаце бачыць, ня шмат матэрыялу тут. У мяне ёсць толькі тры дзівы. Я даю ім некаторыя ідэнтыфікатары і Я пакласці трохі тэксту цалі Але я думаю, менавіта таму мы не бачу нічога тут. На самай справе, мы бачым, Дэльфін трэнерам 2K13. Мы бачым TODO. Я не ведаю, дзе гэта прыбывае ад таму што я не бачу, што тут. Так можа быць, у адным з мае файлы JavaScript. Мы праверым, што ў секунду. Можа хто-то яшчэ скажыце, што гэты ідэнтыфікатар азначае прама тут? АЎДЫТОРЫЯ: Гэта спосаб выкліку Асобны падзел у [неразборліва] файл? Джэйсан Хиршхорн: Так. Гэта проста спосаб для спасылкі менавіта гэты дзіваў. Ідэнтыфікатары ідэальна унікальным. ОК? Жорсткая натоўп. Так, ідэнтыфікатары звычайна ўнікальная. Вы даеце ім адзін канкрэтны элемент у кодзе. Што рабіць, калі я хацеў, каб спасылацца на нумар элементаў, будзь то для CSS кладка або JQuery? Што атрыбут я магу даць ім? АЎДЫТОРЫЯ: Класс. Джэйсан Хиршхорн: клас, дакладна. Дакладна. Такім чынам, index.html, зноў жа, не так шмат адбываецца тут. Так што давайце адкрыць іншы файл. Давайце паглядзім, што ў мяне ёсць. Вось усё, што я тут. Пойдзем у тэчку JS. Я не збіраюся турбавацца аб CSS на дадзены момант. Давайце адкрыць dolphins.js. Ой. А дакладней - ОК. Так, dolphins.js, гэта на самай справе выглядае вельмі падобна на частку кода вы былі дадзены ў задачы ўсталяваць восем. Вы можаце пракручваць праз яго. Хто-небудзь можа сказаць мне, тым не менш, што дэльфіны? Гэта ўсё шапкі Dolphins? Што гэта? Які выгляд дадзеных з'яўляецца тое, што? АЎДЫТОРЫЯ: Array. Джэйсан Хиршхорн: Гэта масіў. І мы ведаем, гэта масіў, таму што я ўбачыць гэтыя квадратныя дужкі тут. І хто-то яшчэ, што гэта масіў? АЎДЫТОРЫЯ: аб'екты? Джэйсан Хиршхорн: Гэта масіў аб'ектаў. І вы можаце бачыць, што. І як вы ведаеце, што гэта масіў аб'ектаў? АЎДЫТОРЫЯ: Таму што ў вас ёсць гэтая двукроп'е загрузкі ў фігурныя дужкі? Джэйсан Хиршхорн: Дакладна. Таму ў мяне ёсць гэтыя фігурныя дужкі прама тут, а затым вы можаце ўбачыць коску падзелу розных аб'екты ў гэтым масіве. А потым ўнутры кожнага аб'екта, у мяне ёсць нешта тоўстай кішкі і нешта яшчэ. І тое, што, як правіла, гэта першая частка, справа ў левай частцы тоўстай кішкі? Што гэта завецца? У агульным становішчы? Як мы кажам, што? АЎДЫТОРЫЯ: Індэкс? Джэйсан Хиршхорн: Індэкс, або, магчыма, ў больш агульным плане, ключ. А потым на правай руцэ бок, значэнне. Так індэкс, ключ. Але калі мы гаворым пра тых,, мы звычайна азначае рэч на левай баку. У простым масіве, зноў жа, у нас быў індэксы 0. 1. 2. 3. 4. І ў дэльфінаў, у нас будзе дэльфіна 0, дэльфіны 1, дэльфіны 2, дэльфіны 3, дэльфіны 4. У нас таксама ёсць, ўнутры гэтага аб'екта, мы не будзе наогул спасылацца на рэчы. Ці, калі мы проста павінны гэта аб'ект права тут, мы не збіраемся казаць аб'екта 0, Аб'ект 1, аб'ект 2. Мы збіраемся сказаць імя аб'екта, або тып аб'екта, даўжыня аб'екта, і гэтак далей. І вось як мы атрымаем значэнне на правай баку. Так што, калі мы сказалі імя аб'екта, напрыклад, мы хацелі б атрымаць гэтую радок, "Благадаць". Так як вы, хлопцы распавялі мне, дэльфінаў гэта проста масіў аб'ектаў. І вы бачыце, ўсе аб'екты ёсць імя, тып, род. Хіба што вымаўляецца правільна? Любы? Род? Вялікі. Даўжыня, вагу. Хіба што вымаўляецца правільна? Думаю, што так. І карціна, проста URL у любы файл ў Інтэрнэце. І прама тут, мы закрываем масіў, Права там у вельмі левай рукі бок майго экрана. Так што ўсё dolphins.js ёсць. О, божа мой. Гэта ўсё тлумачыць. Я думаў, што я скончыў ўсё, але погляд. Ёсць усе гэтыя TODOS. ОК, мы спадзяемся, мы можам зрабіць іх разам. Але давайце спачатку, перш чым рабіць што, проста хадзіць праз гэты код вельмі хутка. Так як я ўжо казаў, мы бачым, па крайняй пачынаючы гэтую лінію, што я меў на горкі, (дакумент). гатовы (функцыя (). І па сутнасці, што гэта збіраецца зрабіць, гэта чакаць, пакуль усё ў вашай старонкі была загружана, таму дачакайцеся гэта ўсё масіў, усё добра, каб ісці, а затым прыступіць да выканання гэты код. Так што калі вам трэба запусціць некаторыя PHP, калі Вы павінны былі атрымаць некаторыя малюнкі, тое, што гэта, увесь код быў набор і гатовыя да працы ў вашай індэкснай старонкі або што старонка была загружана, а цяпер вы збіраецеся пачаць выканання кода. Таму першае, што мы робім, мы стварылі гэты масіў. І ў мяне няма Вар ключавое слова там, так у чым жа Аб'ём гэтага масіва? АЎДЫТОРЫЯ: Гэта глабальная. Джэйсан Хиршхорн: Гэта глабальная, так ocean_array могуць быць даступныя з у любым месцы ў гэтым файле. А потым мы бачым гэта на працягу цыклу. Гэта не кажа кожнаму элементу, але гэта па сутнасці з'яўляецца цыкл па кожнаму элементу. І гэта толькі версія JavaScript ў, так для кожнага уаг дэльфіна дэльфінаў, які тып дадзеных? Хоць, зноў жа, JavaScript ня ёсць гэтыя тыпы дадзеных самі па сабе, тое, што тып дадзеных дэльфін? АЎДЫТОРЫЯ: аб'ект. Джэйсан Хиршхорн: Гэта аб'ект. Мы атрымліваем кожны аб'ект ў масіве дэльфінаў. Так тут, падобна, я забыўся пакласці ўсе гэтыя дэльфінаў з нашага гіганцкія дэльфінамі думаю ў ocean_array, таму мы павінны, верагодна, зрабіць што ў першую чаргу. І потым, тое, што называецца гэтая пераменная басейн. Я ўсталёўваю яго да нуля. І тады я выклікаць гэтую функцыю draw_ocean. Я трэніруюся дэльфіна, калі яго фота пстрычцы - Я не зрабіў гэтага - і ўсталяваць Дэльфін бясплатна, калі націску кнопкі. Дык гэта тыя рэчы, якія мне трэба зрабіць. Думаю, я павінен даць вам некаторыя фон на тое, што я спрабаваў зрабіць. Так што калі мы ідзем сюды, што я сапраўды хацеў гэта выглядаць як быў масіў да тут, а не яго, кажучы, "Todo" Я хацелі стол, па сутнасці, з фатаграфіі ўсіх дэльфінаў. А потым, калі вы націскаеце на адной карціне, Я хацеў, каб пакласці яго ў ніжняя палова экрана і даць Вы ўся інфармацыя на ім, і што б дэльфін ў басейне, дэльфін вы трэніраваліся. Так што я падумаў, што гэта будзе сапраўды выдатна. У вас ёсць усе гэтыя дэльфінаў у акіяне тут, то вы пстрыкніце па адным, і гэта было б пайсці ў басейн, і то вы маглі б навучаць яго. Дык вось што я спрабаваў зрабіць. А потым бы кнопка тут у басейне, і вы можаце націснуць, як, "Set Free", і вы можаце ўсталяваць Дэльфін бясплатна, і было б вярнуцца ў акіян. Дык вось што я спрабаваў стварыць, але зноў жа, я збіраюся патрэбна ваша дапамога для яго стварэння. Так што, спадзяюся, некаторыя з гэтых ключавых слоў ці некаторыя з гэтых тэрмінаў пачнецца што робіць сэнс цяпер у кантэксце гэтай праграмы. Давайце працягваць глядзець праз гэты файл. Мы называем гэта функцыя draw_ocean. Гэта адна і толькі функцыя, якую мы называем ад document.ready раздзеле. Так мы называем гэта draw_ocean функцыю, і падобна, гэта стварае радок, зменная, тут. Нешта пакласці ў радку, дадае больш матэрыял да радка, дадае яшчэ Калектыў радкі, а Затым гэты радок кода. Я кажу, што выводзіць HTML радок. І хтосьці растлумачыць мне, што гэты радок кода робіць? Ну, перш за ўсё, тое, што робіць што знак даляра на ўвазе? Гэта не з'яўляецца зменнай PHP, але тое, што ці значыць гэта знак даляра на ўвазе? АЎДЫТОРЫЯ: Сувязь з HTML ідэнтыфікатар - гэта як гэта спасылкі на HTML кода? Джэйсан Хиршхорн: А як наконт што знак даляра? Што гэта знак даляра паказваюць? АЎДЫТОРЫЯ: Сувязь з HTML-то? Джэйсан Хиршхорн: Дзе мы бачылі гэта знак даляра раней у JavaScript? Мы бачылі гэта ў лекцыі. Мы гаварылі пра гэта. Што азначае знак даляра на ўвазе? АЎДЫТОРЫЯ: Нешта з JQuery? Джэйсан Хиршхорн: Цалкам дакладна. Гэта як-то звязана з JQuery. Гэта знак даляра азначае, што я з дапамогай бібліятэчная функцыя JQuery тут. Цалкам дакладна. Так мы пішам знак даляра, а затым у нас ёсць гэты адкрыты дужка і зачынены Хлопец, а ўнутры, тое, што адбываецца ўнутры ёсць, калі вы карыстаецеся Бібліятэчная функцыя JQuery, ці вы з выкарыстаннем бібліятэкі JQuery? Зноў жа, вы бачылі гэта ў лекцыі. Можа хто-небудзь даць мне - і вы гл. таксама нешта тут. Тое, што адбываецца ўнутры там? Джэф, дайце мне адгадаць. Што гэта выглядаць, # акіяне? Дзе мы бачылі, што раней? АЎДЫТОРЫЯ: Гэта бібліятэка або што? Я паняцця не маю,. Джэйсан Хиршхорн: Ну, давайце мне адкрыць індэксны кропку - Не, не ў тым месцы. Такім чынам, мы бачым у нас ёсць што-то называецца акіян тут. Дзе мы бачылі # акіян хэштэг акіян, сінтаксіс раней? Да? АЎДЫТОРЫЯ: CSS? Джэйсан Хиршхорн: У CSS. Такім чынам, мы хацелі, каб стыль нешта, памятаю, мы б паставіў хэштэг CSS селектар, або хэштэг акіян, напрыклад, і ўсё фарматаванне што мы хацелі даць на рэч з ID акіяна мы ставім ўнутры ёсць. Так ўнутры тут гэта не CSS Селектар ідзе сюды. JQuery вызначае самастойна тып селектараў. Але гэта тая ж ідэя, і на самай справе многія з іх перасякаюцца з CSS. Так ўнутры гэтых адкрытых дужках, вы пакласці селектар, і незалежна ад Селектар ставіцца, гэта тое, што вы збіраецеся выкарыстаць. Так што ў гэтым выпадку, я выбару ID акіян. Калі б я быў клас - скажам у мяне ёсць клас рэчаў называецца "малюнкі", і я даю, што ў шмат элементаў, як я магу спаслацца клас рэчаў называецца "малюнкі?" Залы: Я думаю, што гэта быў кропка. Джэйсан Хиршхорн: З пункту. Так што, калі замест таго, каб я паклаў кропкавымі малюнкамі тут, што дасць мне клас рэчы называюцца «адлюстравання". Вядома, гэта супер магутны, і вы можаце спасылацца на мноства рэчаў. На самай справе, я мог спасылацца ў асноўным любы тэг у HTML. Так што, калі я хацеў зрабіць, што, тд, гэта тэг, які мы бачылі раней, калі стварэнні табліцы. Вы, напэўна, знаёмыя з што з P ўсталяваць сем. У гэтым выпадку, ён на самай справе адбываецца выбраць усе з іх. Гэта дасць мне масіў з усіх тэгаў TD. Але што можа атрымаць крыху пераважнай, так сюды зараз мы будзем прытрымлівацца толькі спасылкі ідэнтыфікатараў. Дык што ж гэта робіць, зноў жа, , Які атрымлівае, у дадзеным выпадку - шкада. Зайдзіце сюды, каб index.html. Гэта акіян, а акіян ID спасылаецца на DIV, таму гэтую частку гэтага радок кода атрымлівае, што DIV. А потым гэты пункт азначае, што я тэлефаную функцыя, і імя, што функцыя HTML. І гэта скарачэнне ад, калі вы, хлопцы ўбачылі перш, знак даляра, дакумент, кропка атрымаць элемент па ідэнтыфікатары, кропка ўнутраны HTML. Гэта ўсяго толькі версія JQuery ст. Такім чынам, функцыя HTML проста атрымлівае ўнутраную HTML. З гэтага элемента. Такім чынам, яшчэ раз, калі мы азірнемся таму, тут, мы будзем см. няма ўнутраны HTML. І таму, калі я зрабіў гэта, я б спрабуе атрымаць HTML. Калі я друкую гэта, я усталяваўшы HTML. Так я перадаю гэтую функцыю для радкі, Радок, я стварыў тут, і выслоўе, што ўнутры акіяна спраў. Да? АЎДЫТОРЫЯ: Калі вы атрымліваеце HTML, вы толькі знаёміцеся копія, калі гэта, ці не так? Вы не выдаляючы яго. Джэйсан Хиршхорн: Дакладна. Калі б я зрабіў гэта, і хацеў захаваць гэта ў Var - упс. Гэта было б атрымаць усю інфармацыю, што быў там і захаваць яго ў іншы зменная, зрабіць яго копію. АЎДЫТОРЫЯ: ОК. Зразумеў. Джэйсан Хиршхорн: Такім чынам, мы стварылі некаторыя HTML, акрамя таго, што ў радку. Мы эканомім яшчэ трохі. Тут вы бачыце, што TODO радок. Так што, напэўна, дзе мы знаходзімся атрымаць, што TODO ад таго, калі мы ідзем у нашай старонцы. А на самай справе, калі я пстрыкніце правай кнопкай мышы на TODO, праверыць элемент, мы гаварылі пра гэта на мінулым тыдні. Вось як мы маглі бачыць HTML Структура нашай старонцы. Вы заўважыце, што тут - давайце зробім гэта крыху больш, таксама - у нас ёсць DIV ID акіян прама тут. Ўсё бачыць, што радкі кода? І вось што мы мадыфікацыі у index.html. Усярэдзіне яго, мы бачым цяпер гэта Табліца радок кода. І тое, што гэтая табліца радок кода, вось код, які мы проста ўстаўляецца ў гэты элемент. І гэта мы не зазірнуць у яго, мы ніколі тыпізаваных COLGROUP і TBODY. Гэта была дададзеная для нас, таму што мы зрабілі некаторы модныя рэчы. Але вы заўважыце, што ёсць тр, ёсць тд з TODO. Так што, падобна, зноў жа, код, які мы напісалі тут. Гэта менавіта тое, што гэта лінія рабіў. Гэта браў наш HTML радок і змясціўшы яго ў гэты DIV прама тут. Гэта першапачаткова не мае нічога. Гэтая старонка загружаецца. Знак даляра, document.ready. Гэта пачынае выкананне. Мы выклікаем функцыю draw_ocean, і ўнутры draw_ocean функцыі мы бярэм гэта HTML і пакласці яго ў гэтым гл. Мы толькі што прайшоў праз шмат тут. Хто-небудзь ёсць якія-небудзь пытанні пра гэта? Або, як гэта працуе, або JQuery? Таму што, калі вы разумееце, што, то JQuery, будзем спадзявацца, прыйдзе адносна лёгка. Да? АЎДЫТОРЫЯ: Тое, што вы былі ўнутры дужках пад раздрукоўкі HTML радок, то ёсць імя пераменная HTML, што вы заявілі раней? Джэйсан Хиршхорн: Гэта прама тут? АЎДЫТОРЫЯ: Так Джэйсан Хиршхорн: Так. АЎДЫТОРЫЯ: Так што калі вы назвалі, што нешта яшчэ, што нешта яшчэ было тое, што вы б паставіў тут. Джэйсан Хиршхорн: Цалкам дакладна. І гэта добры момант. Гэта крыху заблытаным, паколькі У мяне ёсць HTML, HTML. Гэта ўнутры тут гэтае імя майго зменная, і гэта прама тут з'яўляецца Імя функцыі JQuery. Залы: Але для таго, каб у JQuery функцыянаваць на працу, вы павінны даць яму некаторыя HTML ўваход? Джэйсан Хиршхорн: Цалкам дакладна. АБО вы павінны даць яму радок. Гэта паставіць гэты радок ўнутры з DIV або любы іншы. Гэта проста радок. Ён не ведае, што гэта HTML, але відавочна, адфарматаваць яго з мэтай быць сапраўдныя HTML. Я адказаў на пытанне? АЎДЫТОРЫЯ: Так. Джэйсан Хиршхорн: ОК. Да? АЎДЫТОРЫЯ: Што рабіць, калі акіян называюць да кнопкі або што-то? Што б. HTML рабіць? Ці будзе гэта змяніць Тэкст кнопкі? Джэйсан Хиршхорн: Такім чынам, пытанне што рабіць, калі ён спаслаўся на кнопку? Гэта зменіць ўнутраны HTML чагосьці. Так што, калі яна мае адкрыты тэг і блізка тэг, ён будзе пакласці нешта паміж адкрыццё і закрыццё тэгаў. Калі няма адкрываюцца і зачыняюцца тэг, ён не будзе нічога рабіць. АЎДЫТОРЫЯ: Гэта літаральна копія і ўстаўляць такія рэчы? Джэйсан Хиршхорн: Так. Ён капіюе і ўстаўляе нешта з што пераменная я праходжу яго, Радок я праходжу яго, ўнутры тых, адкрываць і закрываць тэгі. Давайце паглядзім тут. О, божа мой. draw_pool не зрабіў рабіць усё, прама там. Вось аблом. Цягнік, нічога сабе. Такім чынам, не больш за тое, акрамя гэтага. Так што давайце пачнем, і давайце выправім гэта. Я збіраюся задаволіць патрэбы кожнага дапамагчы дамагчыся гэтага. Ёсць на самай справе не што многія лініі кода, я думаю, пісаць. Я думаю, што я зрабіў гэта пару гадоў таму для версіі 2K12, і там не павінна быць так шмат ліній кода, каб напісаць. Я не павінен быў выдалены гэты код. Я павінен быў толькі што выратаваў яго. О, з розуму. Ва ўсякім выпадку, давайце пачнем. Так што я ў гэтым масіве, ці я ў гэтым лінія, і ў мяне ёсць ocean_array. І я хачу паставіць усё гэта, ўсе з гэтага файла, у маю ocean_array. Такім чынам, як я магу ўзяць усё, што ад там, і змясціць яго ў ocean_array? Гэта адна радок кода. Хто можа даць мне гэты радок кода або скажы мне, ёсць некаторы ўяўленне, што гэта радкі кода павінен рабіць? Чаму мы не пачнем тут, а затым мы будзем працягваць рухацца па пакоі адказваючы на ​​пытанні. Курт? Што ў першую чаргу? АЎДЫТОРЫЯ: Ocean_array, кранштэйны, дэльфін. Роўна дэльфіны, кранштэйны дэльфіна? Дэльфіны з вялікай літары ўсё. Джэйсан Хиршхорн: ОК. Давайце разгледзім сінтаксісу. Прама тут, гэта як цыкл па кожнаму элементу, так што гэта на самай справе робіць шмат рэчы для нас. І дэльфін з'яўляецца аб'ектам. Такім чынам, мы не павінны напісаць нешта як дэльфіны, дэльфін, таму дэльфін сам з'яўляецца запярэчыць, што я хачу. Гэта не паказчык. Ці мае гэта сэнс? АЎДЫТОРЫЯ: Так. Джэйсан Хиршхорн: Такім чынам, як вы прапанаваць змены кода? Калі мы ведаем, што мы далі індэкс? Ой, прабачце. Ты добры. Але як - дазвольце мне задаць іншае пытанне. Калі мы хочам - давайце на самай справе пішу гэта. Не бярыце ў галаву. Мы збіраемся, каб напісаць гэта. Гэта выдатна. Выбачайце. Я проста вельмі заблытанай там. Пакінем, што на дадзены момант, і мы вернемся да падрыхтоўкі дэльфіна, ўстаноўка дэльфіна. Давайце проста спачатку выправіць гэтую малюнак акіян Функцыя, і мы вернемся да што, Курт. Але да гэтага часу, так добра. Давайце паглядзім ўнутры draw_ocean. Лінія, якая выглядае гэта няправільна "Захоўваць фатаграфіі дэльфінаў у акіян у HTML радок. "І прама зараз, я гэтак жа, як TODO, але я сапраўды хачу паставіць дэльфінаў фатаграфій у акіяне. Так што, Ной, на вашу думку, Першае, што я павінен рабіць? Калі я хачу, каб прайсці праз увесь Масіў, што з'яўляецца першым што я павінен рабіць? АЎДЫТОРЫЯ: Мы павінны стварыць цыкл. Джэйсан Хиршхорн: для завесы. І тое, што павінна, што цыкл выглядае? АЎДЫТОРЫЯ: Для - мы павінны прайсці праз кожны дэльфін ў масіве акіяна. Такім чынам, для уаг дэльфіна ў - Вы можаце напісаць масіў акіян? Джэйсан Хиршхорн: Як што? АЎДЫТОРЫЯ: Напэўна, гэта правільна. Джэйсан Хиршхорн: Давайце прытрымлівацца што на дадзены момант, а затым мы будзем вярнуцца да яго. І вы збіраецеся несці адказнасць на гэтай лініі. Так што ў мяне на цыкл. Майкл, ты да гэтага часу. Што мне цяпер рабіць? АЎДЫТОРЫЯ: Вы павінны былі б узяць захоўвання фатаграфій у дэльфінаў. Джэйсан Хиршхорн: Дык дзе з'яўляецца тое, што захоўваецца? АЎДЫТОРЫЯ: У масіве дэльфіна? Джэйсан Хиршхорн: Я заблытаўся зараз таксама пра тое, што адбываецца. Давайце зразумець, як мы можам зрабіць адладкі гэта, а потым я прыйду назад да вас, добра? Што эквівалент Е ў JavaScript? Эні? АЎДЫТОРЫЯ: Гэта дакумент, які пісаць? Джэйсан Хиршхорн: Ці як можа Я бачу нешта ў суцешыць ўніз, на дно? АЎДЫТОРЫЯ: console.log. Джэйсан Хиршхорн: console.log, дакладна. Так давайце зробім console.log, і давайце проста паставіць "Дэльфін" у, добра? У ідэале, калі гэта працуе, мы збіраемся ёсць - давайце паглядзім, яшчэ ў гэтым файле dolphins.js, было шэсць дэльфінаў, таму я павінен атрымаць шэсць ці нешта спадзяюся выводзіцца на кансоль, ці не так? Вось дзе мы так далёка, таму што мы зрабіў лінію Курта тут, і тады мы зрабіў Ной цыкл, і ў нас ёсць гэта лінія, так што спадзяюся, мы павінны ўбачыць шэсць рэчы на ​​кансолі з'яўляюцца. Так што давайце ісці сюды, давайце адкрыем нашы суцешыць і асвяжыць нашу старонку. Такім чынам, падобна, што мы бачылі шэсць індэксаў. Нуль, адзін, два, тры, чатыры пяць, так. АЎДЫТОРЫЯ: Як вы атрымліваеце ў што старонка ў вашым - Джэйсан Хиршхорн: як я магу атрымаць на гэтую рэч тут? АЎДЫТОРЫЯ: Не, старонка Chrome ўнутры [Неразборліва] прыбор. Ці можам мы ўбачыць гэта ці не? Джэйсан Хиршхорн: Гэты Chrome старонкі прама тут? АЎДЫТОРЫЯ: Так. Джэйсан Хиршхорн: Гэтак жа, як у P набору восем, я адкрыў акно Chrome на маім працоўным стале, на мой Macintosh працоўнага стала. І калі вы заўважылі, тут гэты адрас на верхні левы, што адпавядае гэтаму IP звярнуцца сюды. Такім чынам, каб зрабіць гэта, тым не менш, пачатак праблемы ўсталяваць спец правядзе вас праз сапраўды, як гэта зрабіць. Але я проста вынікала, што, і замест з з кодам трансфер, я толькі што зрабіў наш уласны код. Выдатная рэч, мы можам таксама праверыць ocean_array. Так што, падобна ocean_array з'яўляецца масіў з шасці аб'ектаў, а давайце адкрыем кожны з іх. Бум! Адзін. Так Курт, гэта выглядае як ваш Код працаваў выдатна. Усе пачалася ў ocean_array. Таму што я абмовіўся раней. Але так, дзіўную працу. Ocean_array правільна, і гэта выглядае як цяпер мы бачым, што дэльфін лік ад 0 да 5, так гэта выглядала як індэксы ў масіве. Таму, улічваючы, што веды, Майкл, што мы павінны рабіць цяпер? Падумайце услых. Што тое, што мы хочам зрабіць? АЎДЫТОРЫЯ: Мы хочам атрымаць JPEG для кожнага дэльфіна. Джэйсан Хиршхорн: ОК. Так як мы можам спасылацца - як мы можам атрымаць JPEG? З чаго пачнем? Дзе ўсе захоўваецца? АЎДЫТОРЫЯ: У ocean_array? Джэйсан Хиршхорн: ОК. АЎДЫТОРЫЯ: Так ocean_array, дэльфін - Джэйсан Хиршхорн: Як мы атрымаць нешта ўсярэдзіне - так што гэта дае нам гэты аб'ект. І мы бачылі гэта раней з струк. Што ж гэта за натацыі мы павінны выкарыстоўваць? АЎДЫТОРЫЯ: Было б кропка. Джэйсан Хиршхорн: кропка. А што потым поле? АЎДЫТОРЫЯ: Аватар? Ці гэта не поле - Джэйсан Хиршхорн: Што гэта называецца ў dolphins.js? І бачыце, вы можаце паглядзець. Мы можам проста вярнуцца сюды. Мы бачым, ocean_array, мы можам даследаваць яго. Як гэта называецца? АЎДЫТОРЫЯ: Тып. Пачакайце. Аватар? Я сказаў карціну. Джэйсан Хиршхорн: Аватар. Дакладна. Вы не гучаць як вы ведаеце, што вы казалі пра, усё ж. Гэта гучала больш як здагадку. Так што карціна, так, што б даць нам Адрас малюнку. Джэф, у вас ёсць пытанне? АЎДЫТОРЫЯ: Так, я не магу атрымаць тое, што у вас на Chrome браўзэр на маім кампутары. Я проста атрымліваю "неперехваченное спасылку памылцы, кансоль не вызначаны ". Джэйсан Хиршхорн: Вам наладзіць усё? АЎДЫТОРЫЯ: Ну, я думаю, што я зрабілі ўсё, што вы зрабіў на вялікім экране. Джэйсан Хиршхорн: І вы chmodded усе файлы? А ці ведаеце вы прайсці Уся ўстаноўка? АЎДЫТОРЫЯ: Я паспрабую яшчэ раз. Джэйсан Хиршхорн: ОК. Я прапусціў, што шмат на пачынаецца, але вы павінны прайсці праз Уся ўстаноўка гэтак жа, як у пачатак праблемы мноства спец. Chmod усё і пераканайцеся, што гэта цалі АЎДЫТОРЫЯ: Я пайду і праверце яго. Я думаў, што я гэта зрабіў, але Я двойчы чэк. Джэйсан Хиршхорн: Так, гэта выглядае як гэта дасць нам радок і карціна. Вялікі. У нас ёсць URL малюнка. Як мы цяпер пакласці яго ў - што адбудзецца, калі мы пішам толькі гэта, Майкл? АЎДЫТОРЫЯ: Ён проста бярэ карціну. Гэта на самай справе не яго адлюстравання. Джэйсан Хиршхорн: Давайце паглядзім, што адбудзецца. Мы захаваем гэта. Мы будзем працаваць яго тут. Падобна на тое, што мы нічога не атрымаць. Калі я даследую гэтую табліцу, гэта выглядае як унутры - ды, падобна, што я нічога не атрымаць. АЎДЫТОРЫЯ: Ці павінны мы - Джэйсан Хиршхорн: Гэта радок, гэты код прама тут. Дзе я хачу паставіць гэты радок? АЎДЫТОРЫЯ: Вы хочаце, каб пакласці яго ў акіяне? Джэйсан Хиршхорн: ОК. І тут я стаўлю радок называецца HTML у акіяне. АЎДЫТОРЫЯ: Так ці будзе даляр знак, акіян, HTML [неразборліва]. Джэйсан Хиршхорн: Гэта было б Скажам прама там. Але што, калі я хачу, каб дадаць яго ў - Я ўжо стварае радок, ці не так? Калі Вы жадаеце пакласці ў акіяне, што назва гэтай радкі? АЎДЫТОРЫЯ: HTML. Джэйсан Хиршхорн: HTML. Дык што ж я пішу далей? АЎДЫТОРЫЯ: Роўна, роўна. Або проста на роўных? Джэйсан Хиршхорн: Што будзе адбудзецца, калі я пішу роўных? АЎДЫТОРЫЯ: Хіба гэта ўсталяваць яго роўна - ці не будзе, што - АЎДЫТОРЫЯ: Звязаць? Джэйсан Хиршхорн: Гэта будзе прызначыць яго, але тое, што адбудзецца з усім , Які быў захаваны ў гэтым раней? АЎДЫТОРЫЯ: Гэта будзе пазбавіцца ад яго. Джэйсан Хиршхорн: Гэта будзе пазбавіцца ад яго. Так як я магу дадаць, што да канца? Я б проста скапіраваць - АЎДЫТОРЫЯ: Плюс да роўных. Джэйсан Хиршхорн: Плюс роўна, дасканалым. Вось менавіта. Так што цяпер давайце паглядзім, што гэта робіць. Бум! О, божа мой. Гэта значыць проста шмат тэксту. ОК. Так што, падобна, мы атрымалі шмат тэксту, але гэта выдатна. Вы, хлопцы, зрабілі - Я ведаю, гэта цяжка, вось гэта новае. Да гэтага часу тры з вас, хлопцы, зрабілі фантастычны. ОК, ты наступны. Што мы павінны рабіць далей? Мы, вядома, не хачу яго гуляць толькі радок. Да? АЎДЫТОРЫЯ: Я проста ёсць пытанне. Вы ведаеце, калі вы робіце ocean_array, дэльфін, у дужках, ня дэльфін, як асацыятыўна Масіў у сабе? Джэйсан Хиршхорн: Я абмовіўся. Дэльфін гэта індэкс. Залы: Але ці не вар Дэльфін ў акіяне - Я маю на ўвазе, калі вы першапачаткова загрузіць яго як добра, вар дэльфін у дэльфінаў, ня што дэльфін асацыятыўны масіў? Джэйсан Хиршхорн: Гэты дэльфін? АЎДЫТОРЫЯ: Так. Джэйсан Хиршхорн: Не. Гэта дэльфін індэкс. АЎДЫТОРЫЯ: ОК. Так ці ёсць пераменная дэльфін? Я маю на ўвазе, як ключ дэльфіна ў асацыятыўны масіў? Джэйсан Хиршхорн: Прама тут? Маўляў, dolphin.name? АЎДЫТОРЫЯ: Так, ёсць як дэльфін кропкай - як ня дэльфін азначала быць кожны аб'ект? АЎДЫТОРЫЯ: Так, гэта што я думаў таксама. АЎДЫТОРЫЯ: Я думаў, дэльфін быў як асацыятыўны шэраг у дэльфінаў. Таму што ёсць шэсць асацыятыўная масівы ў дэльфінаў, праўда? Джэйсан Хиршхорн: Дакладна. Тое, як мы ўжо гэта напісана Цяпер, гэта не так. Зала: А чаму гэта? Джэйсан Хиршхорн: Мы маглі б зрабіць гэта, і там на самой справе функцыя JQuery называецца. адзін, які дае Вы кожная рэч. Але гэты сінтаксіс ня - Я абмовіўся раней - гэты сінтаксіс не тое, што гэта індэкс. Гэта проста дае нам індэксаў. Але вы маглі б зрабіць знак даляра. Сябар, якая з'яўляецца функцыяй JQuery. Гэта дасць вам кожны асацыятыўны масіў. Так праверыць гэта. Але гэта тое, што ўсё гэта робіць код. АЎДЫТОРЫЯ: Так што гэта першы цыкл, я думаю, што было перабору шэсць разоў таму што ў вас шэсць індэксаў. А потым другі цыкл, не тое, што перабор такое ж колькасць раз? Джэйсан Хиршхорн: Так. АЎДЫТОРЫЯ: Дык там сапраўды няма - мы мог бы напісаць першы цыкл зноў, і гэта спрацавала б. Маўляў, вар дэльфін у дэльфінаў? Джэйсан Хиршхорн: Так, але мы Зараз з дапамогай ocean_array. Мы пераехалі усё ў ocean_array таму сказаць, што мы калі-небудзь хацелі змяніць тое, што ў dolphins.js, або калі мы хочам, каб маніпуляваць ocean_array ў далейшым, мы не хочам, каб маніпуляваць дэльфіны, пераменная. Мы хочам, каб маніпуляваць яго копію, таму што, калі мы хочам, каб узяць што-то па-за, такім чынам мы проста будзе ў бяспецы. Ці мае гэта сэнс. АЎДЫТОРЫЯ: Так. Джэйсан Хиршхорн: ОК. Так, Карлас, як я магу ўзяць гэты радок і зрабіць яго малюнак, а не, і атрымаць фактычнае малюнак? , Перш чым вы бачыце гэты код. Як мне ўключыць малюнак на старонцы? АЎДЫТОРЫЯ: Гэта, што мы зрабілі аб што HTML плюс роўна тыя выкліку працяжнік шырыня, яна выдаліла яго? Джэйсан Хиршхорн: Гэта матэрыял прама тут? АЎДЫТОРЫЯ: Так. Накшталт таго. Джэйсан Хиршхорн: ня турбавацца пра гэта. Гэта проста запускае HTML радок. Калі я хачу, каб уключыць малюнак у маім HTML вэб-старонкі, што тэг я магу выкарыстоўваць? Залы: Я не памятаю. Джэйсан Хиршхорн: ОК. Эві, дапамагчы яму? АЎДЫТОРЫЯ: было б якар, HREF, а затым вы звязаць яго? Джэйсан Хиршхорн: Так як у Anchor. АЎДЫТОРЫЯ: Вам не трэба, каб звязаць яго, тым не менш, ці не так? Джэйсан Хиршхорн: Што рабіць, калі я проста хочаце стварыць вобраз? АЎДЫТОРЫЯ: Было б IMG, а затым Знаходжанне роўна што радок? Джэйсан Хиршхорн: Такім чынам, гэта дакладна, кантакце. Карлас, вы збіраецеся Вазьмі яго адсюль. Траплення азначае "вобраз", і зоркавыя стэнды для "крыніцы". і вы павінны даць яму URL ці некаторыя - нават не URL. Некаторыя месцы, дзе, што малюнак захоўваецца. Так што я ведаю, што гэта будзе атрымаць мяне малюнак, так што зараз, як бы гэта сказаць усё разам, думалі? У мяне ёсць некаторы сінтаксіс Мне трэба выправіць. Што менавіта мне трэба ўвесці, Карлас? АЎДЫТОРЫЯ: Я не разумею, што вы спрабуеце зрабіць. Такім чынам, вы спрабуеце паставіць усе выявы ў табліцу? Джэйсан Хиршхорн: Мы хочам, каб адлюстраваць ўсе выявы на старонцы. І мы бачылі, як гэты радок кода справа тут дададзеныя радкі ў наш HTML радкі і раздрукаваць іх, як гэта. Мы замест гэтага хочаце адлюстроўваць выявы. І мы зразумелі,, Мару, сказаў нам, што гэты радок кода - так што давайце паглядзім прама тут. Калі б мы пайшлі і даследавалі, мы будзем рэдагаваць гэта як HTML. Мару, сказаў, што калі мы робім гэты від сінтаксісу, мы атрымліваем малюнак. Ці значыць гэта, сэнс? Гэта тып радкі, што мы сапраўды жадаеце пакласці ўнутр акіяна апусканне, не проста сам тэкст. АЎДЫТОРЫЯ: [неразборліва] Джэйсан Хиршхорн: Выбачайце? АЎДЫТОРЫЯ: Вы не можаце проста скапіяваць што адзін, што Kianna даў, і паклаў яго ў тым, што - Джэйсан Хиршхорн: Скапіюйце гэты, і паставіць гэта прама тут? АЎДЫТОРЫЯ: Так. Джэйсан Хиршхорн: Гэта блізка, але ёсць адна праблема з гэтым, і што гэта такое? HTML з'яўляецца радком, і мы павінны дадаць радкі да яго. АЎДЫТОРЫЯ: Такім чынам вы выказаліся - нах. Джэйсан Хиршхорн: І ў нас ёсць тры - гэта прама тут не з'яўляецца радком. Як мы можам зрабіць гэта радок? Як вы заўсёды робяць нешта радок? Залы: Я не ведаю. Джэйсан Хиршхорн: Калі ў мяне ёсць тэкст, як я магу зрабіць гэта радок? Падабаецца тут, на гэтай лініі прама тут? АЎДЫТОРЫЯ: Пакладзеце яго ў табліцы? Джэйсан Хиршхорн: Што пра гэта? АЎДЫТОРЫЯ: Цытата. Джэйсан Хиршхорн: Падвойны каціроўкі, праўда? Падвойныя двукоссі робіць нешта радком. Так што робіць, што радок, і гэта радок. Як змясціць два радкі разам у JavaScript? АЎДЫТОРЫЯ: Dot. Джэйсан Хиршхорн: Ці не кропка. Гэта PHP. АЎДЫТОРЫЯ: Плюс. Джэйсан Хиршхорн: Плюс, зусім дакладна. Так плюс, а затым тое, што вы Прапаную я раблю тут? АЎДЫТОРЫЯ: Яшчэ цытата. Джэйсан Хиршхорн: Іншая цытата, ОК. Як завяршыць радок? АЎДЫТОРЫЯ: Яшчэ цытата. Джэйсан Хиршхорн: Яшчэ цытата. І як я магу паставіць гэты радок разам з гэтай радкі? Плюс. Вось менавіта. Вы толькі што зрабілі гэта для нас. Гэта ідэальны варыянт. А цяпер давайце аказваць гэта. І паглядзіце, што ў нас ёсць цэлае куча малюнкаў. О, Божа мой. Тыя страшныя. Мы збіраемся даследаваць ім у секунду. Так, Ной? Залы: Я ведаю, што гэта на самай справе не пытанне, але вы павінны закрыць свой элементы з тэгам малюнка? Джэйсан Хиршхорн: Мы маглі б, калі мы хацелі, зачыніць наш імідж тэг проста так. Давайце аказаць, што. На, няма, мы не можам гэтага зрабіць. АЎДЫТОРЫЯ: О, я зламаў яго. Джэйсан Хиршхорн: Я думаю, што гэта з'яўляецца праверка, аднак. Я не думаю, што вам трэба закрывае касой рысы. ОК, гэта выдатна. Карлас, дзякуй. Да гэтага часу чатыры з вас, хлопцы зрабілі ўзрушаючую працу. Вядома, як вы можаце бачыць, мы стварэнне некаторы тып табліцы фаскі. І я хачу, каб гэтыя рэчы каб быць у выглядзе табліцы. Так як я магу пакласці іх рэчы ў табліцы? Я выразна патрэбна больш HTML. Асам, якія HTML мне не хапае? АЎДЫТОРЫЯ: Што вы хачу зрабіць, прабачце? Джэйсан Хиршхорн: я хачу паставіць усе гэтыя вобразы ў табліцы, таму кожнае малюнак павінны знаходзіцца ў адной калонцы табліцы. Як мне сказаць, што гэта адзін слупок? Вы бачылі гэты код раней. Гэта ў P ўсталяваць сем. АЎДЫТОРЫЯ: Я памятаю адзін быў тр? Джэйсан Хиршхорн: тр для шэрагу. АЎДЫТОРЫЯ: Я не ведаю, яго маё сэрца, але я мог праверыць. Джэйсан Хиршхорн: Ці хтосьці памятаеце? АЎДЫТОРЫЯ: г.д? Джэйсан Хиршхорн: тд, зусім дакладна. тд ставіць яго ў выглядзе слупка. Так што, калі я паставіў тд там, Асам, што мне трэба пакласці? Што яшчэ мне трэба дадаць? АЎДЫТОРЫЯ: Вы павінны закрыць яго? Джэйсан Хиршхорн: Цалкам дакладна. Дзе, што ісці? АЎДЫТОРЫЯ: Проста там? Джэйсан Хиршхорн: Прама тут? АЎДЫТОРЫЯ: Думаю, што так. Джэйсан Хиршхорн: Што гэта закрыццё прама тут? Што гэта? Гэта сіні рэч? АЎДЫТОРЫЯ: Гэта для малюнка. Гэта павінна пайсці пасля, я думаю. Джэйсан Хиршхорн: Добра, зусім дакладна. Такім чынам, давайце паглядзім, што гэта зрабіў. О, гэта нязручна. Давайце адкрыем да акіяна, стол, цела табліцы, тр. Такім чынам, мы маем тону, але я ня ўбачыць выявы. Гэта дзіўна. Падобна на тое, што пабудаваў яго, але ня паказаць мне малюнка. Любыя ідэі, чаму гэта можа быць так? Любыя думкі? АЎДЫТОРЫЯ: Калі вы пракруціць ўніз, вы ўбачыце іх. Джэйсан Хиршхорн: Boom! Так яны там, але гэта дзіўна, што яны ўвесь час ўніз там. АЎДЫТОРЫЯ: Яны таксама ўсіх запар. Джэйсан Хиршхорн: І ўсе яны ў веславаць, і ўсе яны розных памераў. Так Асам, дай мне яшчэ адзін радок кода калі я магу зрабіць кожны вобраз аднаго памеру, і, падобна, у мяне ёсць ужо паказвалася памер Я хочаце, каб яны. Як я магу зрабіць кожны малюнак такога ж памеру? Дайце дзікіх здагадацца. А як наконт гэтага радка кода? АЎДЫТОРЫЯ: Ці можаце вы зрабіць Як пастаянная? Джэйсан Хиршхорн: Або дзе яшчэ адзін размясціць я мог бы паставіць гэты радок кода, калі я проста скапіяваць яго? АЎДЫТОРЫЯ: Усю дарогу ўніз на гэтай жа лініі? Джэйсан Хиршхорн: Добра, давайце паставім гэта тут, зусім дакладна. А цяпер давайце паглядзім, што адбудзецца. Ах, божа мой! Цяпер, падобна, мы пачынаем атрымаць і тое, і, падобна, яны усё накшталт змясціцца ў табліцы, мы пабудавалі ў кожным тд. Акрамя таго, Асам, скажам, я, як і іх вышыні, каб быць крыху больш - Вышыня рэч кідае мяне, так што я павінен ўсталяваць у самым разгары? Вазьміце любы лік. АЎДЫТОРЫЯ: 200? Джэйсан Хиршхорн: 200. Я збіраюся забраць 100. Гэта выдатна. Для вельмі падабаецца 200. Там мы ідзем! Добра, цяпер гэта пачынае выглядаць трохі лепш і трохі больш арганізаваным. Любыя іншыя думкі на тое, што нам трэба зрабіць, каб захоўваць фатаграфіі дэльфінаў? Да? АЎДЫТОРЫЯ: Ці з'яўляюцца каціроўкі або сінгл каціроўкі, вакол значэнняў для Крыніца, вышыня, шырыня, гэта тыя, дадаткова? Джэйсан Хиршхорн: Дзе з'яўляюцца адзінарныя двукоссі? AUDIENCE: Як і ў некаторых прыкладах, Вы павінны былі б як рост роўная цытата "150". З'яўляецца што не з'яўляецца неабходным. Джэйсан Хиршхорн: Такім чынам, давайце глядзець тут. Калі мы націснем на акіян, ідуць у табліцы, вы заўважыце тут яго фактычна дадаў гэтыя цытаты для мяне. АЎДЫТОРЫЯ: ОК. Джэйсан Хиршхорн: І таму я разумею, што мы робім здаецца вельмі павольна. Мы толькі напісаў тры радкі кода да гэтага часу, ці чатыры радкі кода, але гэта на самай справе працэс, які Я прайсці кожны раз я хачу каб зрабіць гэты вэб-сайт. Парадкова, з дапамогай кансолі ўніз тут, даследуючы рэчы і высветліць з крок за крокам, што я хачу зрабіць. Так што, спадзяюся, гэта імітуе для вас, хлопцы ў добрым, педагагічнай чынам, што вы на самай справе будзе рабіць, калі Вы ствараеце свой сайт. Давайце рухацца далей. Мы стварылі гэтыя рэчы. Я збіраюся на самай справе - Эві, у мяне ёсць вялікае пытанне да вас. Я не ведаю, мы будзем рухацца далей. Пойдзем у "чыгуначнай дэльфіна, калі яго фота націснутая. "Як вы Прапаную я пішу гэтую лінію кода? АЎДЫТОРЫЯ: Існуе функцыя называецца "цягнік". Джэйсан Хиршхорн: Там функцыя называецца "цягнік", цалкам правільна. АЎДЫТОРЫЯ: Ён чакае індэкс. Джэйсан Хиршхорн: Цягнік чакае індэкс, таму, добра. Эві, гэта менавіта тое, развагі што я люблю бачыць. Цягнік чакае індэкс. АЎДЫТОРЫЯ: Дык што вы збіраецеся мець на працягу цыклу. Джэйсан Хиршхорн: Ну, я хачу зрабіць калі фатаграфія пстрычцы так Эві, як я магу кантраляваць, калі фота пстрычцы? Там у некалькі спосабаў зрабіць гэта. Гэта сіла JavaScript і JQuery, але і цвёрдая частка. АЎДЫТОРЫЯ: Калі дужка, няма. Ці, калі дужка падзея, ці нешта адносна просты? Джэйсан Хиршхорн: Так мы бачылі пару спосабаў зрабіць гэта ў лекцыі. Адно было для, тут, вы можаце зрабіць што-то, што вы маглі б стварыць функцыі, як па пстрычцы, ці ж нешта накшталт на пстрычкай мышы. Усё памятаю нешта ў гэтым родзе? Вы робіце гэта ўнутры HTML тэга. Я бачу некаторыя пустыя асобы. Некаторыя людзі, як, што ён кажа? Гэта нармальна, таму што я думаю, што гэта складаней спосаб зрабіць гэта. Мы збіраемся зрабіць значна прасцей спосаб з выкарыстаннем JQuery. Так, Эві? АЎДЫТОРЫЯ: Хм? Джэйсан Хиршхорн: Калі я хачу зрабіць нешта JQuery, я, відавочна, пачаць, як і раней, з гэтым знакам даляра, адкрыты Хлопец, побач дужка і двойчы цытуе тут. Цяпер мы ведаем, мне патрэбен селектар тут. Што селектара вы прапануеце будзе прымяняцца да кожнага малюнку або кожны Адзін здымак? АЎДЫТОРЫЯ: Малюнак? Джэйсан Хиршхорн: Гэта Цалкам дакладна. Гэта будзе прымяняцца да кожнай асобнай малюнка. Атрымлівае ўсё з іх. Гэта не ID, гэта не клас, гэта тып тэга, і гэта будзе атрымаць усё да адзінага. А цяпер я збіраюся сказаць вам гэта на дадзены момант, і вы можаце паглядзець больш дакументацыя па ім пазней, але гэта што называецца "на" здзелак з падзеямі. Так што вы атрымліваеце зрабіць цяпер, і які з'яўляецца супер магутны, гэта сказаць, які тып Мерапрыемства вы шукаеце і якія што вы хочаце зрабіць, калі вы атрымання гэтай падзеі. Так што я збіраюся даць вам крыху трохі больш кода, Эві, то ты павінен ісці, добра? АЎДЫТОРЫЯ: ОК. АЎДЫТОРЫЯ: На - мы збіраемся сказаць "Пстрычка" у гэтым выпадку, што вы будзеце звычайна выкарыстоўваюць. Так на пстрычкі, а затым мы збіраемся перадаць яму ананімную функцыю. І гэты сінтаксіс вы будзеце бачыць шмат, і, спадзяюся, вы будзеце пісаць шмат. Гэта трэба, зноў жа, на клік чагосьці называецца малюнак, што заўгодна, нічога называецца малюнак, мы збіраемся запусціць гэтую ананімную функцыю. Я не даю яму імя. Я не перадаючы яму ніякіх аргументаў. Я проста, як, ствараючы вось функцыянаваць, і вось, што код вы збіраецеся зрабіць. Вось з гэтым сінтаксісам сродкаў. А таксама, як вы заўважыце, гэта выглядае вельмі падобны на гэты тут, што мы пісаў раней. ОК, Эві. Такім чынам, вы хочаце патэлефанаваць цягнік на індэкс. Гэта тое, што вы хочаце зрабіць? АЎДЫТОРЫЯ: Так. Джэйсан Хиршхорн: То бок? ОК. Давайце паглядзім, што адбудзецца. АЎДЫТОРЫЯ: Пачакайце, усё ж. Індэкс не з'яўляецца зменнай прама цяпер. Джэйсан Хиршхорн: Так індэкс ня пераменная прама цяпер. Я не ведаю, дзе вы атрымалі яго ад. АЎДЫТОРЫЯ: [неразборліва]. Так што вам трэба спачатку высветліць, якія дэльфін атрымаў націснуў? Джэйсан Хиршхорн: Выдатна. Вам трэба высветліць, якія дэльфін атрымаў пстрычка. Гэта дзікі стрэл у цемры. Хто-небудзь ёсць якія-небудзь ідэі, як я магу зразумець , Што дэльфін атрымаў націснуў? Калі няма, я проста дам яго вам, таму што гэта даволі вар'ятам. ОК. Так што давайце раздрукаваць праз console.log. Гэтая рэч. Так, знак даляра, адкрытыя дужка, гэта блізка дужка. Таму, калі я націскаю на гэтай фатаграфіі, я збіраюся друкаваць гэта на кансоль, і давайце паглядзім, што адбудзецца. Давайце вернемся сюды. Пойдзем суцешыць. Ніякія памылкі, не слава богу. ОК. Я націснуў. Дазвольце мне зрабіць гэта зноў. Я націснуў гэтую першы малюнак, і гэта адбіліся на кансоль, гэтая лінія рэчаў. Я збіраюся выкарыстоўваць Слова "гэта" шмат. Гэтая рэч прама тут, гэта, вельмі адмысловае, і гэта робіць менавіта тое, што Эві хоча, каб гэта зрабіць. Гэта становіцца ўсё, што было націснуў на або любы іншы. Таму што зноў жа, гэты селектар адбываецца мець справу з многімі рэчамі, мы не абавязкова ведаць, якія рэчы мы кажа, таму мы хочам, каб высветліць , Якія рэчы мы гаворым аб праз гэты сінтаксіс. У гэтым выпадку прама тут, хэштэг акіян, мы заўсёды ведаем, што рэч мы будзем казаць пра, так мы ніколі не мелі патрэбу ў гэтым ўнутры хэштэгу акіяна. Гэта заўсёды акіян, што дзіваў. Гэта ID, толькі адзіна магчымым. Але ў дадзеным выпадку, гэта ставіцца да вялікіх малюнкаў, на самай справе, шэсць малюнкаў, і таму мы хочам ведаць, якія менавіта Выява было шчоўкнулі. І, падобна, гэта Інфармацыя, якую мы атрымліваем. Мы атрымліваем гэта выглядае як некаторыя буйныя радок, і мы атрымліваем усё гэта Інфармацыя з гэтым. Мы атрымліваем тоны і тоны і тоны матэрыялу. JQuery з'яўляецца супер магутны. Гэта дае нам масу інфармацыі пра гэта канкрэтным элеменце HTML. Эві, што мы хочам ведаць, пра гэта HTML элемента? АЎДЫТОРЫЯ: Нешта накшталт ID. Джэйсан Хиршхорн: ID. Ну, у нас ёсць крыніца, шырыня і вышыня. АЎДЫТОРЫЯ: Мы можам выкарыстоўваць крыніца. Джэйсан Хиршхорн: Мы можна выкарыстоўваць крыніца. Гэта дасць нам радок, URL радок. Што мы будзем рабіць з што, як толькі ў нас ёсць, што? Як мы вернемся да нашай індэкс ў ocean_array? АЎДЫТОРЫЯ: Мы можам параўнаць гэта на іншы. Джэйсан Хиршхорн: Такім чынам, мы маглі цыкл па кожнай з іх. Цяпер мы маглі цыкл зноў а затым параўнаць гэта. Уявіце, што было б больш просты спосаб, калі б вы маглі толькі ўявіць адзін? АЎДЫТОРЫЯ: Не маючы ў цыкле. Джэйсан Хиршхорн: Не маючы ў цыкле. АЎДЫТОРЫЯ: Проста высветліць, дэльфін, [неразборліва]. Джэйсан Хиршхорн: Высвятленне , Што дэльфін. ОК. Дык давайце захаваем гэтую інфармацыю ў гэтай фатаграфіі тэга. І зноў жа, прама зараз, частка гэтага матэрыялу проста чароўнае, таму што я мог бы паказваць вам гэта ў першы раз, але, спадзяюся, гэта рэчы, вы збіраецеся рабіць. Дык гэта тое, магічнае вы можаце зрабіць. Вы можаце зэканоміць дадатковыя метададзеныя у элеменце. Гэта не будзе адлюстроўвацца, гэта не будзе паўплываць што заўгодна. Вы можаце проста захаваць яго там. І я прапаную захаваць індэкс з кожным малюнкам. Так, як вы зрабіць гэта вы ствараеце атрыбут называецца працяжнік дадзеных і то якім імем вы хачу даць яго. Працяжнік дадзеных з'яўляецца спецыяльная рэч, якая з'яўляецца дадзена вам, і гэта кажа, што гэта нешта карыстальнік збіраецца стварыць. Такім чынам, мы ствараем тое, што называецца індэкс, гэты ключ называецца індэкс. І ўнутры яго, мы збіраемся паставіць не толькі адзін кожны раз, але тое, што робяць мы ставім ўнутры яго, Эві? Тое, што адбываецца прама тут? АЎДЫТОРЫЯ: Дэльфін. Джэйсан Хиршхорн: Дэльфін. То бок, не тое слова. Дэльфін. І зноў жа, мы ўжо надрукаваны дэльфіна раней, што 0, 1, 2, 3, 4, 5, і мы эканомім, што з малюнкам. Так што цяпер, калі я гэта зраблю - і зноў, мы эканомім гэтыя метададзеныя. Як атрымаць доступ да, што метададзеныя? Гэта з функцыяй проста пад назвай "дадзеныя". І вы павінны перадаць яго адным і толькі адзін аргумент, які гэтае імя рэчы. Так што я збіраюся раздрукаваць гэты, і тады я буду адказваць на пытанні. Але па сутнасці, я кажу, дайце мне гэта Аб'ект, які быў абраны, паглядзіце на ўсе яго атрыбуты дадзеных, і адна называецца "індэксуецца," даць мне гэта значэнне. І давайце паглядзім, што адбываецца, калі мы абнаўляць гэтую старонку. Менавіта тое, што мы чакалі. Зноў жа, гэта было даволі чароўна. Мы проста зрабілі шмат тут. У каго ёсць якія-небудзь пытанні па гэтай нагоды? Да? АЎДЫТОРЫЯ: Я проста ёсць пытанне аб вашай жывы кода. Вы можаце выкарыстоўваць як адзін цытатай, двайны цытата, як тут жа. Джэйсан Хиршхорн: Прама тут. АЎДЫТОРЫЯ: Так. Ёсць прычына, чаму вы робіце адзінарныя двукоссі, двайныя двукоссі? Джэйсан Хиршхорн: Там прычына, і гэта ўзыходзіць да таго, што Маркус спытаў раней. У гэтай лініі, я быў трохі лепш у маім кадавання. Я хачу гэтага, і гэта тое, што я шчыра павінны былі зрабіць усё час, па шырыні і вышыні у прыватнасці. Давайце паглядзім тут. Вы ўбачыце тут, Вы можаце бачыць, што? Я ведаю, што гэта збольшага невялікі, але дадзеныя Індэкс працяжнік ў падвойныя двукоссі. Гэтыя рэчы заўсёды трэба быць у падвойныя двукоссі. Значэнне заўсёды павінна быць у падвойныя двукоссі. Але тут, калі б я зрабіў падвойныя двукоссі, што б скончыць гэты радок прама тут, і цяпер я не быў бы набраўшы ў радку. Так што я абыйсці, што толькі з дапамогай адзінарныя двукоссі, таму што адзін цытатай не сканчаецца радок JavaScript, але у HTML гэта не хвалюе, калі вы надаўшы яму адзінкавыя двукоссі або двайныя двукоссі. Гэта будзе проста інтэрпрэтаваць яго як падвойныя двукоссі. Ці мае гэта сэнс? Да? АЎДЫТОРЫЯ: Як вы атрымліваеце, што IP-адрас у ніжняй частцы вашага кліента? Шахта кажа няма IP-адрас. Ці ёсць нешта, што я павінен зрабілі ў [неразборліва]. Джэйсан Хиршхорн: У Вашай машыны, гэта не мае нічога? АЎДЫТОРЫЯ: Так. Джэйсан Хиршхорн: Існуе нешта вы можаце зрабіць, каб выправіць гэта, але я не збіраецеся правесці час прагулкі праз гэта прама цяпер. Але мы можам зрабіць гэта пасля падзелу. АЎДЫТОРЫЯ: Калі вярнуцца да кансоль, чаму быў лік пералічаных 012321? Джэйсан Хиршхорн: для прыставак? О, таму што я проста быў націснуўшы вакол дзіка. АЎДЫТОРЫЯ: О, добра. Не бярыце ў галаву. Джэйсан Хиршхорн: І зноў, я магу націснуць на нешта bajillion раз. Залы: У мяне пытанне аб ваш цыкл зноў, ваша для завес. Таму што вы ведаеце, ў P ўсталяваць восем, яны выкарыстоўваць іншую форму гэтага цыклу. Таму яны, як вар я роўная 0, я менш чым, ocean_array.length, я + +. Ёсць тыя эквівалент? Джэйсан Хиршхорн: То бок стандартны цыкл. Або так, гэта для завес. На самай справе, мы бачылі, што эквівалентна. АЎДЫТОРЫЯ: Дык вось эквівалентна да таго, што вы зрабілі тут? Адзін Ці лічыцца лепш , Чым іншыя? Джэйсан Хиршхорн: Не. Так, зноў жа, мы пайшлі над некаторымі рэчамі. Цяпер мы выйшлі нашай зоны камфорту і пачаў рабіць некаторыя сапраўды выдатна рэчы, якія мы не абавязкова прайшлі больш у класе і раней, але будзе спадзяемся, будзе вельмі магутным для вас пры кадаванні. Эві, давайце вернемся сюды. У мяне ёсць індэкс дэльфіна. Цяпер тое, што мне трэба зрабіць? АЎДЫТОРЫЯ: Вы павінны трэніраваць яго. Так замест таго, каб console.log, вам можаце ўсталяваць зменную, роўную што? Джэйсан Хиршхорн: ОК. Ну і што? АЎДЫТОРЫЯ: Я не ўпэўнены, калі вы можаце зрабіць гэта. Джэйсан Хиршхорн: Так пераменная х роўная гэта, што б гэта вяртае, ён верне яго. Не мае значэння. Ён можа вярнуць любы зменнай. Там няма тыпы тут. АЎДЫТОРЫЯ: Ці вы можаце проста зрабіць выклік функцыі. Джэйсан Хиршхорн: Так, чаму я не зрабіць гэта? Проста зрабіце выклік функцыі. АЎДЫТОРЫЯ: Так. Іншымі набор круглых дужках. Джэйсан Хиршхорн: Выдатна. Вось менавіта. Так што будзе выклікаць функцыю цягнік. Вядома, нішто не ў цягніку Функцыя, таму прапаную, Akshar, што я павінны рабіць у функцыі цягніка. Дай мне трохі псевдокод. Залы: Я думаю, вы павінны выдаліць дэльфін з крынічнай табліцы. Джэйсан Хиршхорн: І гэта становіцца Ною раней, чаму мы капіяваны гэта ў новы масіў. Правільна, таму што мы не робім, каб змяніць наш дэльфіны масіў, таму што, калі іншы Праграма выкарыстоўвае гэта ці што, калі мы хочам для доступу да яго дзесьці ў іншым месцы? Мы хочам, каб зрабіць копію, і гэта той, які мы збіраемся рэдагаваць. АЎДЫТОРЫЯ: Тады вы пазіцыянуеце гэта ў вашым новым месцы. Джэйсан Хиршхорн: А што рабіць мы павінны зрабіць пасля гэтага? АЎДЫТОРЫЯ: І тады вы раздрукаваць інфармацыя аб дэльфіне. Джэйсан Хиршхорн: Гэта Цалкам дакладна. Мы выдаліць яго з ocean_array, мы пакласці яго ў басейне, а затым мы звяртаем акіян у басейне. Як выдаліць дэльфін ад ocean_array? АЎДЫТОРЫЯ: Вы ідзяце ў індэкс. О, добра. Выкарыстоўвайце функцыю зрошчвання. Джэйсан Хиршхорн: Добра, такім чынам, што гэта правільна. Я мог бы выкарыстаць функцыю зрошчвання якія нешта бярэ з масіва і кандэнсуецца. Гэта нешта новае, мы раней не бачылі. Але я на самой справе хочаце захаваць прастору там, таму што я хачу, каб раздрукаваць прабел у акіяне. АЎДЫТОРЫЯ: Так то вы можаце ўсталяваць малюнак гэтага індэкса, ocean_array Індэкс кропка карціна. Джэйсан Хиршхорн: ОК, ocean_array, індэкс. АЎДЫТОРЫЯ: Dot карціна. Джэйсан Хиршхорн: Dot карціна. АЎДЫТОРЫЯ: І вы ўсталюеце яго на нуль? Джэйсан Хиршхорн: Роўна нуля. ОК. Так нічога не там, так, то як я магу пакласці ў басейне? Канстанцін, як мне пакласці яго ў басейне? У нас ёсць гэтую зменную мы назвалі, называецца басейн, тут. АЎДЫТОРЫЯ: У нас проста зрабіць роўных ocean_array індэкс? АЎДЫТОРЫЯ: хіба вы не павінны змяніць парадак? Джэйсан Хиршхорн: Адзін сек. Да? АЎДЫТОРЫЯ: Так, гэта было на самай справе добры момант. Джэйсан Хиршхорн: Тое, што адбываецца тут? АЎДЫТОРЫЯ: Гэта індэкс? Джэйсан Хиршхорн: Індэкс, дакладна. І што вы сказалі, Канстанцін, тое, што мы павінны рабіць? АЎДЫТОРЫЯ: Мы павінны, можа быць, змяніць парадак. Джэйсан Хиршхорн: А навошта мы змяніць парадак, можа быць? АЎДЫТОРЫЯ: Таму што ў тым, што паказваюць, што гэта ўжо пустым. Джэйсан Хиршхорн: Дык гэта яшчэ не ўсё нуль, але мы страцілі URL малюнка. Хіба мы страцілі яго назаўсёды? АЎДЫТОРЫЯ: Тэхнічна няма? Джэйсан Хиршхорн: Ёсць мы страцілі яго назаўсёды? АЎДЫТОРЫЯ: Не. Джэйсан Хиршхорн: Ну, дзе гэта? АЎДЫТОРЫЯ: У зыходнай дэльфіна - Джэйсан Хиршхорн: Гэта ў дэльфінаў, але ў ocean_array мы страцілі яго назаўжды. Так Канстанцін, вы можаце прапанаваць лепшы спосаб, каб напісаць гэтую лінію? На самай справе, шкада, ён захоўваецца ў басейне. У нас ёсць гэта ў басейне, таму што басейн з'яўляецца аб'ектам, ці не так? Ocean_array індэкс, ocean_array ўяўляе сабой масіў аб'ектаў. Так басейн з'яўляецца аб'ектам, і ў нас ёсць URL там, і ўніз тут ён усталяваны ў нуль. Так на самай справе, у нас ёсць не страцілі яго назаўжды. Гэта проста захоўваюцца ў басейне. Але гэта, вядома, не ў ocean_array, і як вы сказалі, Карлас, ён знаходзіцца ў масіў дэльфіны. Так гэта выглядае міла. А потым, як мы правядзем акіян і басейн? Марыё? АЎДЫТОРЫЯ: Вы можаце проста патэлефанаваць draw_pool і draw_ocean? Так як, draw_pool, а затым - ну, так, гэта нічога не бярэ. Джэйсан Хиршхорн: Выдатна. Што draw_pool збіраецеся рабіць? АЎДЫТОРЫЯ: Намалюйце басейн? Джэйсан Хиршхорн: Так, ну, што гэта будзем рабіць? АЎДЫТОРЫЯ: Выбачайце. Вы можаце зрабіць тое ж самае рэч, як ёсць - Джэйсан Хиршхорн: Трымайся, мы збіраемся туды дабрацца. Нічога. Ён нічога не робіць прама цяпер. Давайце паглядзім, калі гэта працуе, хоць. Хто даў нам гэты код? Akshar і Канстанцін даў нам гэты код? Добра, давайце паглядзім, што адбудзецца. Ах! Гэта было так захапляльна. Ён знік. О, божа. Гэта збольшага пачварным. Ну, мы можам вярнуцца і выправіць гэта пазней. Цікава, дзе гэта? Мы захавалі яго ў гэтай зменнай басейна. Як я магу высветліць, калі гэта ў гэтай зменнай басейна? Ну, зноў жа, сіла JavaScript, і, у прыватнасці інструменты, якія Хром дае вам, як вы можаце зараз праверыць гэтую зменную басейн. Гэта глабальная, памятаеш? Мы не ставілі Вар ключавое слова. Так што, калі я друкую Калі ласка, увядзіце прама тут, Канстанцін, што вы думаеце, што я збіраецеся атрымаць, калі я ударыў Калі ласка, увядзіце? Залы: Я не ведаю. Джэйсан Хиршхорн: Адгадайце. АЎДЫТОРЫЯ: Нічога? Джэйсан Хиршхорн: Нічога, не так. Гэта было добрае здагадку, аднак. Я атрымаў аб'ект. Памятаеце, што вы далі мне што радок кода. Басейн, вы захавалі ў тым, што пераменная аб'ектам. І сапраўды, мы бачым аб'ект Вы выратавалі ў ім. Гэта ўзрушаюча. Мы можам праверыць тут. Гэта амаль як у рэальным часе GDB, што мы можам паглядзець у нашым кодзе і высветліць матэрыял. Гэта значыць вельмі круты і супер магутны. Добра, давайце скончым гэта. Давайце намалюем на басейн на працягу пяці хвілін. Мару, дай мне лінію Код звярнуць басейн. АЎДЫТОРЫЯ: Вы маглі бы іншы Пераменная HTML, але / для. Джэйсан Хиршхорн: Давайце зробім гэта вельмі проста на дадзены момант. Давайце проста надрукаваць імя дэльфін мы навучання. АЎДЫТОРЫЯ: А потым вы можаце зрабіць даляр падпісаць, адкрытыя дужкі, а затым адкрыйце цытата. Я думаю, фунт басейн, калі што была рэч. Я не памятаю. Джэйсан Хиршхорн: Давайце вернемся. Я думаю, што гэта рэч. АЎДЫТОРЫЯ: Добра, так. А затым зачыніце цытата, побач дужкі . HTML, адкрытыя дужкі, і то я думаю, басейн, як якая адкрывае дужкі 0 або нешта накшталт гэтага. Зачыніць Назва кропка. Я не ведаю, калі гэта працуе. АЎДЫТОРЫЯ: Добра, давайце паглядзім, што адбудзецца. "Немагчыма прачытаць імя ўласцівасці вызначана. "Такім чынам, яшчэ раз, вось што мы збіраемся, каб праверыць. Мы збіраемся вывучыць гэта. Вы зрабілі басейн, адкрыты bracket0,. Назва. Зноў жа, я раблю гэта ўвесь час, і я блытаюць, што адбываецца, тое, што робіць гэтае папярэджаньне азначае. Давайце паглядзім на басейн. Давайце паглядзім на басейн кранштэйна 0, не вызначана. Дык вось дзе мы бяжым у нашу задачу, ці не так? Басейн кранштэйны 0 не робіць, відавочна, існуе. Што вы думаеце існуе? Залы: басейн толькі Аб'ект сам па сабе? Джэйсан Хиршхорн: Ну, што гэта кажа прама тут? Калі мы патрапілі Калі ласка, увядзіце на басейн, што гэта кажуць, што гэта? АЎДЫТОРЫЯ: Аб'ект. Джэйсан Хиршхорн: Гэта аб'ект, так? АЎДЫТОРЫЯ: О, так. Так што проста pool.name замест - Джэйсан Хиршхорн: Pool.name дае менавіта тое, што вы хацелі. І я разумею, што я іду праз гэта павольна і размове гэты пункт, але гэта дакладна, як я зрабіць гэты матэрыял. Вы збіраецеся працаваць у гэтых памылак падчас фінальнага праекта, таму я спадзяюся, гэта пашырэнне правоў і магчымасцяў, каб вы маглі выкарыстоўваць усе гэтыя інструменты. Яны маюць вырашальнае значэнне і будзе атрымаць вас супер пупер далёка. Так што я не хачу, каб проста раздрукаваць імя. Давайце зробім яго крыху трохі больш добрымі, чым гэта. АЎДЫТОРЫЯ: Што яшчэ мы хочам зрабіць? Джэйсан Хиршхорн: Добра, добра. Мы будзем рабіць толькі гэта. Цьфу. Хлопцы, у вас няма жыцця. ОК, бум, атрымаў яго. Выглядае добра. Вы ўбачыце, Akshar, тут, мы нуль, не знойдзена. Так, падобна, гэта ўсё яшчэ спрабуе знайсці малюнак, і што не рабіць менавіта тое, што мы хацелі зрабіць. Мы не збіраемся ісці ў тым, што цяпер, але там, напэўна, экалагічна чыстых спосабаў рабіць гэта. АЎДЫТОРЫЯ: Ці не маглі б вы пакінуць як прабел для малюнка? Як замест ўстаноўкі яго на нуль, не маглі б вы ўсталяваць яго любіць пусты радок ці нешта? Джэйсан Хиршхорн: Як гэта? АЎДЫТОРЫЯ: Так. Джэйсан Хиршхорн: [неразборліва]. Не знойдзена. Так што лепшы спосаб зрабіць гэта. Я прапаную б рабіць гэта. Проста ўстаноўка нулявы там. Тады вядома, тое, што адбудзецца? Гэта збіраецца сысці цалкам. Так што, калі мы хацелі захаваць прастору і зрабіць што, мы, верагодна, хочаце зрабіць што-то тут таксама. Я збіраюся, каб вы пачалі. Akshar, дай мне гэтую лінію з кода вельмі хутка. АЎДЫТОРЫЯ: Калі ocean_array, дэльфін, роўна, роўна, роўна - роўна нуль? Так. Джэйсан Хиршхорн: Тады што? АЎДЫТОРЫЯ: Затым зрабіць HTML. Вы проста скапіяваць ніжнюю код, на самай справе. Джэйсан Хиршхорн: Скапіюйце што? АЎДЫТОРЫЯ: Вы можаце капіяваць - Джэйсан Хиршхорн: Гэта? АЎДЫТОРЫЯ: Так. Джэйсан Хиршхорн: Усё гэта? У нас няма выявы. Залы: Я маю на ўвазе вас можаце проста пакінуць - так, вы можаце проста зачыніць яго. Але я думаю, што трэба ўсталяваць шырыню. Джэйсан Хиршхорн: Ну, проста стварыць пусты слупок. ОК. І тады ў гэтым выпадку мы, верагодна, хачу зрабіць гэта, а таксама. Ой. О. Не атрымалася, але мы не атрымліваць гэтую памылку. Давайце паглядзім, што адбылося тут. Так што нічога няма, так што ты сказаў, мы павінны дадаць? АЎДЫТОРЫЯ: Мы павінны ўсталяваць шырыня радка. Джэйсан Хиршхорн: Для чаго? Залы: Я думаю, што гэта 150. АЎДЫТОРЫЯ: Так, гэта было 150. Джэйсан Хиршхорн: Мы змесцім гэта тут захаваць свой код паслядоўным. Але гэта не адзін. Добра, добра. Дададзена. ОК? Дык гэта ўсё яшчэ ідзе прэч. АЎДЫТОРЫЯ: О, называюць шырыню? Джэйсан Хиршхорн: Гэта выглядае як шырыня складае 150. Давайце паглядзім. Цяпер мы збіраемся зрабіць у фінал, крута, моцная рэч, што я збіраюся паказаць вам. Мы не збіраемся скончыць гэты код, але онлайн перш, чым мы кінуць, усё гэта Код будзе правільным. Я вам па электроннай пошце выпраўленую версію з некаторымі з майго ўласнага стылю пасля раздзел, і што будзеце размешчаны ў Інтэрнэце. Я заклікаю вас працягваць даследаваць гэты і выкарыстоўваць гэта ў якасці эталона, але я хачу паказаць вам канчатковы інструмент для гэтага клас, і гэта тут на правая. І мы глядзелі на гэта на мінулым тыдні, але зараз спадзяюся, што гэта крыху больш знаёмыя Вам і камфортна. Вы можаце дынамічна гуляць з CSS старонкі. Мы на самой справе ўжо бачылі нас дынамічна гуляць з HTML. Памятаеце, што мы паступілі правільна націсніце кнопку Змяніць як HTML? Прама тут? Такім чынам, мы дынамічна гуляў з HTML. У кансолі можна дынамічна гуляць з JavaScript старонкі. Напрыклад, гэта дзейнічае JavaScript лініі. Бум, я атрымаў менавіта тое, што я хацеў. Так што мы можам дынамічна гуляць з HTML, дынамічна гуляць з JavaScript. Цяпер мы збіраемся, каб дынамічна гуляць з CSS. І ўсё гэта таму, што гэта ўсё роўна, імгненна, жыць GDB зваротную сувязь, і таму вы можа ведаць права нешта адбываецца перш, чым мець ісці код, і вы можаце не думаю, што нешта будзе выглядаць. Так што гэта супер пупер крута. І давайце, нарэшце, паглядзім на дынамічна гуляць з CSS. Вось тут справа бок, element.style. Пойдзем да гэтага. Вось наш элемент. Давайце дамо яму некаторы дадатковае CSS. Ці шкада, мы маглі б даць яму некаторыя дадатковыя CSS, але, верагодна, у дадзеным выпадку, хочаце змяніць гэты атрыбут. Так што давайце ісці сюды да гэтай лініі. О, я не магу зрабіць гэта тут. Выбачайце. Рэдагаваць AS - так што гэта, як вы маглі рэдагаваць CSS. Мы не збіраемся рэдагаваць CSS у гэтым Другі, але мы хочам, каб змяніць HTML і даць яму дадаткова атрыбут. Што вы прапануеце змяніць яе на? Я думаў, Эві была прапанова. АЎДЫТОРЫЯ: Col шырыня? Джэйсан Хиршхорн: Гэта было падобна гэта нічога не рабіць таксама. Давайце паспрабуем CSS. АЎДЫТОРЫЯ: [неразборліва] Клас? Джэйсан Хиршхорн: Ён кажа ён не працуе. Гэта дае, што жоўты рэч. Залы: Але [неразборліва]. АЎДЫТОРЫЯ: Вы не ўстаноўкі шырыні ладу да 150, калі вы гэта робіце? Як бы вам не проста выкарыстоўваць шырыню? Джэйсан Хиршхорн: Так. Залы: Але ў нас няма малюнак больш. Джэйсан Хиршхорн: Не. У нас няма нічога там. Так што мы не збіраемся вырашыць Спецыфічнай праблемай. Мы збіраемся вярнуцца да Akshar'S рашэнне, таму што я хачу, каб усталяваць Дэльфін бясплатна ў цяперашні час, ці гэта апошняе, што я хачу, каб скончыць. Так што мы збіраемся, каб пакінуць гэта тут прызнаючы, што гэта не зусім правільна, і мы збіраемся каб вярнуцца да яго. Выбачайце. Я сказаў, што мы можам дынамічна змяніць CSS. Давайце паглядзім на што і рабіць што вельмі хутка. Так што, калі я агледзець гэты элемент тут, і сказаць, што я хачу зрабіць яго сіні, Вы можаце прыйсці сюды, колер, таму што Я ведаю, што змяняе колер і тое, і мы бачылі, як ён змяніў гэта сіні. Дык вось мне дынамічна змены CSS. Не змяняе яго назаўсёды, але потым Я магу вярнуцца ў маю CSS файл і змяніць колер аб'екта. ОК. Гэта было шмат. Мы не скончыць сваю дзіўную праграму. Дазвольце мне паказаць вам, што гэта сапраўды хутка, і тады мы будзем фармаваць качан. О, дзе гэта? Няма! Трымайся. Такім чынам, як вы ўпакоўкі, Дзіўна папярэдняга прагляду, або пярэдні паглядзець, з наступнага разу. Гэта Дэльфін трэнерам 2013, і ён не працуе. Вялікі. [Смех] Джэйсан Хиршхорн: О! Бум! Што гэта значыць? АЎДЫТОРЫЯ: Вы не CHMOD. Джэйсан Хиршхорн: Я не CHMOD яго. АЎДЫТОРЫЯ: Шэраг адзін. Джэйсан Хиршхорн: О, паглядзіце на гэта. ОК. Так, у мяне ёсць шэсць дэльфінаў. Што адбываецца? Давайце паглядзім. Калі я трэніруюся адзін, цяпер навучанне Лілі. О, я хачу, каб вызваліць цябе, Лілі. Там вы ідзяце, назад у акіян. Так, каб было на гэтым тыдні. Калі ў вас узніклі пытанні, мы будзем на вуліцы. І зноў жа, я адпраўлю цябе астатняя частка гэтага кода. Дзякуй вам, хлопцы.