Томас Реймерс: Прывітанне, усім. Мяне клічуць Томас Реймерс. 

Майк Риццо: І я Майк Риццо. 

Томас Реймерс: Мы два з CS50s TS. І сёння мы вядзем семінар па JavaScript і CSS для вэб-прыкладанняў. Калі вы хочаце прытрымлівацца, спасылка прама там. І вы хочаце, каб пакласці яго на кампутары коратка? 

Там у спасылцы. Гэта невялікі сайт, які ўтрымлівае спасылкі на усе рэсурсы, якія мы збіраемся быць паказваючы вам сёння, а таксама мае шмат карысная інфармацыя напісана нас чытаць далей у глыбіню, калі вы вернецеся, і вы спрабуеце ўспомніць, што дакладна мы казалі, што вы былі кажаце, і гэтак далей. 

Майк Риццо: Добра. Такім чынам, пачнем. 

Томас Реймерс: Такім чынам, вы хочаце, каб пачаць? ОК. 

Майк Риццо: Так. Такім чынам, мы спачатку хацелі пачаць з шырокім Агляд пра Інтэрнэт і Тыпы файлаў пры праектаванні вэб-сайтаў. У той час як гэтая прэзентацыя мы хочам трапіць у у JavaScript шмат шмат ў далейшым, мы хацелі пачаць з проста, выгляд, як з вышыні птушынага палёту чаго сайт і як думаць аб праектаванні Вэб-сайт для пачатку. 

Дык вы, хлопцы, у гэтай кропцы - з ім будучы ў пятніцу ўвечары - павінны мець прадставілі свой CS50 фінансы Праблема вызначае. Будзем спадзявацца, што гэта быў добры густ аб тым, што вэб-праграмавання можа быць. Але тут мы хочам, выгляд, даць Вы іншы смак, а таксама. 

Томас Реймерс: Так што проста рэзюмаваць, што адбываецца, калі вы набіраеце ў вашым URL да ваш вэб-браўзэр, што URL атрымлівае паглядзеў у кампутар. І ваш кампутар, падлучаных да іншага кампутара, у якім знаходзіцца гэты сайт. Такім чынам, калі вы ідзяце на google.com, вы падлучаны да аднаго з кампаніі Google кампутары, мае файлы для google.com. 

Затым ён просіць канкрэтнага файла. Так што, калі вы ідзяце ў - Я не ведаю, - example.com / index.html ці / test.html, Вы збіраецеся папрасіць што канкрэтны файл. І сервер вэб збіраецца каб вярнуць яго да вас. 

Затым, калі вы ідзяце праз гэты файл - як толькі вы кампутар атрымлівае, што файл - гэта збіраецца пачаць стварыць вэб-старонку. Так што цяпер у яго ёсць HTML файл, які накшталт як Структура вэб-старонкі. HTML файл таксама можа спасылацца на CSS-файлы, якія вызначаюць стыль вэб-старонкі. 

Файлы JavaScript, які вызначае ўзаемадзеянне з вэб-старонкі. Файлы малюнкаў, якія з'яўляюцца ўсяго малюнка. І, магчыма, спасылаюцца на іншыя файлы HTML, якія то вы можаце наведаць. 

Майк Риццо: ОК, выдатна. Дык вы, хлопцы, усё, мабыць, карпатліва наладзіць лакальны хост на вашай віртуальнай машыне. І гэта проста, выгляд, з'яўляецца мясцовым дамена, што ваш кампутар прымае толькі для вас на свой страх і IP-адрасы. 

Такім чынам, усярэдзіне гэта, то вы можаце дадаць да яго свае ўласныя вэб-старонкі. Я маю на ўвазе, у CS50 фінансаў, вы павінны мець дададзеныя некаторыя HTML старонкі, якія, роду, загорнуты ў абгортку PHP. Але ў канчатковым рахунку, на якія старонкі вашага PHP былі вываду было HTML. 

Але успамінаючы самага пачатку з PSET, мы павінны былі ўсталяваць дазволаў за ўсё, праўда? Так што гэта проста ў асноўным дае нам ведаць, хто можа чытаць, пісаць, і, магчыма, выканаць кожны з файлаў. Так што мы збіраемся зрабіць хуткі - HM? 

Томас Реймерс: Такім чынам, мы збіраемся зрабіць хуткі дэма. Так што проста, каб нагадаць вам, калі вы падключыць да кампутара кампаніі Google - хто - і папрасіць файл, кампутар спачатку неабходна пераканацца, што вы аўтарызаваны на самай справе паглядзець файл або чыталі, што файл, таму што вы не можаце проста спытаць для любога файла на гэтым кампутары, ці не так? Гэта было б рызыкоўна,. 

Так файлаў на сістэмах, якія мы выкарыстоўваем, як гэта CS50 прыбор, ёсць тры агульныя людзі, якія могуць мець дазволу на нешта. Першы з'яўляецца фактычным Уладальнік сказаў файла. Другая група, якая файл належыць. Мы не збіраемся засяродзіцца занадта шмат на што. І апошняе, што ёсць, свайго роду, як свет ці, як усе СААЗ якія не адносяцца да гэтага файла і ня маюць ніякіх правоў уласнасці на яго. 

Так што, калі ў нас ёсць ўладальнік, група, а затым свет. І затым, для кожнай з гэтых груп, вы можа мець адно з трох дазволаў, ОК ці некалькімі з іх. Вы можаце прачытаць дазволу. Вы можаце мець правы доступу. І вы можаце мець права на выкананне. 

Так што ў плане рэальных тыпаў файлаў, чытання дазвол, як на самой справе чытанне змесціва файла. Права доступу піша да згаданага файл. Дазвол на выкананне працуе файл, як вы робіце, калі вы запускаеце адзін з Вашы CS50 праектаў. 

Таму, калі мы думаем пра файлы напрыклад, калі нам трэба, каб прачытаць HTML файл, які павінен быць свет чытаецца, ці не так? Як мяркуецца, таксама ўладальнік хоча , Каб мець магчымасць рэдагаваць файл. Такім чынам, уладальнік будзе мець патрэбу чытаць і пісаць дазволу. Яны сапраўды не трэба выконваць. 

Група, мы збіраемся лячыць жа, як і ў свеце на дадзены момант. Таму яны маюць патрэбу дазволу на чытанне. Але яны не павінны пісаць або права на выкананне. І зараз, калі мы ўспомнім былы PSETs, што мы разумеем, гэта такога роду выглядаюць як двайковы, ці не так? 1 азначае так. 0 для няма. І мы сапраўды можам перавесці гэта ў двойкавую. 

Так 110 у двайковым будзе 6. 100 будзе 4. Тое ж самае з светам. Такім чынам, лік вы атрымалі б для Дазволу для гэтага будзе 644. 

Майк Риццо: І калі вы ўспомніце калі вы правы змененымі нешта, я лічу, яны далі ў задачы ўсталяваць прыклад таго, дзе вы маглі б зрабіць нешта накшталт CHMOD 644 а затым імя файла. 644, то, зараз вы можаце бачыць непасрэдна дзе, што зыходзіць ад. Так, мы спадзяемся, што робіць, што трохі больш ясным. 

А потым для нагляднасці вы хлопца - о да, вось гэта зноў. Так 600, то будзе проста прыклад мы далі тут, дзе ўладальнік мае чытаць і правы дазволу у той час як група і сьвет не маюць ніякіх дазволаў атрымаць доступ да файла. 

Томас Реймерс: А потым мы павінны хутка Спіс агульных дазволаў. Так каталогі, вы хочаце на самай справе CHMOD 711. Хуткі бок - для каталога, каб мець выкананы дазвол азначае быць у стане , Каб адкрыць каталог. Выявы, CSS, JavaScript, HTML патрэбы 644, таму што, у прынцыпе, свет патрэбы дазволу на чытанне. 

І PHP, якія вы, хлопцы, бачылі хоць мы не будзем казаць пра гэта строга, як правіла, правы змененымі з дазвол 600, таму што гэта бегчы з дазволаў ўладальніка. Па крайняй меры, на прыборы. 

Майк Риццо: Так што калі вы не спецыяльна паказаць, які тып файла вы хочаце на самай справе ўстаноўка да гэтай прэзентацыі - у нас была праблема з гэтым, таму што усё, што не было права змененымі правільна - Вы збіраецеся атрымаць, накшталт, А забаронена памылка, што сайт на самай справе не мае дазволу для доступу да любой файл Вы хочаце, каб доступ. І, вядома, што можа быць выпраўлена - як і ў задачы набор - шляхам змены дазволаў адпаведным чынам. 

Томас Реймерс: І апошняе каментар для хутка мясцовага развіцця - мы падняў гэта, але мы проста хацелі каб прывесці яго зноў - калі вы папытаеце серверы - так лакальны хост, напрыклад, кім або што заўгодна. - і вы не пазначаны канкрэтны файл, файл, які ваш кампутар будзе папрасіць называецца index.html. Ці, калі гэта не існуе, index.php. 

Крута. Так што гэта проста паўтор усяго, спадзяюся, што мы разгледзелі ў раздзел, і лекцыя, і да гэтага часу ў CS50. І зараз мы збіраемся пачаць казаць аб спецыяльна бібліятэкі. JavaScript і CSS бібліятэкі для вэб-прыкладанняў. 

Так адзін хуткі прычына, чаму ў нас ёсць бібліятэкі з'яўляецца праграмаванне - ёсць шмат праблем у праграмаванне, якія трымаюць выскокваюць зноў, і зноў, і зноў. Вы можаце заўважыць, што шмат вэб-сайтаў патрэбна магчымасць мець выпадальнае меню, напрыклад, або павінны мець магчымасць мець вельмі стандартная кнопка стыль, які не можа быць прасцей за ўсё. Зараз, калі вы пачнеце атрымліваць у HTML, вы разумеюць, што кнопкі могуць на самай справе выглядаюць сапраўды выродлівыя, калі вам нічога не робяць. 

Так шмат людзей напісалі называецца бібліятэкі. І ў гэтым кантэксце, што яны таксама называецца рамкі. Мы збіраемся выкарыстаць два сінонімы. І тое, што яны ёсць, што яны ў асноўным папярэдне зробленыя кавалкі кода - альбо CSS ці JavaScript - што адняць шмат аб'яднацца ў вас ёсць у кадаванні. 

Такім чынам, яны загадзя вызначыць кучу класаў або папярэдне вызначыць кучу функцый для Выпадак у JavaScript, якія вы можаце патэлефанаваць пазней. І тады вы можаце, свайго роду, атрымаць доступ да гэтага коду, ня неабходнасці што-небудзь рабіць. Прыклад бібліятэкі была CS50.H. Гэта была бібліятэка мы далі вам назад у тыдзень адзін, што дазволіла вам зрабіць такія рэчы, як то GetInt і GetString без неабходнасці пісаць любы код самастойна. 

Майк Риццо: Добра. Дык вось, гэтак жа, як мы павінны былі ўключаць у сябе ў нашай з файлаў адрозніваецца бібліятэкі, мы таксама павінны ўключаць у наш HTML файлы розных бібліятэк. Напрыклад, калі мы хацелі ўключыць спецыфічны бібліятэка JavaScript тут, магчыма, той, які мы напісалі самі, як гэта лакальна адбыўся званыя script.js, мы проста выкарыстоўваць гэтыя абазначэння. 

Таму ў нас ёсць роўных тыпу сцэнара JavaScript крыніцай роўна Javascript.js. І калі вы думаеце на ваш CS50 Праблема фінансаў ўсталяваць, калі вы глядзелі ў header.php ў тэчцы шаблонаў, Вы б бачылі, некаторыя з іх уключаны. Так што гэта першы - сцэнарыі - з'яўляецца ў тым ліку бібліятэкі JavaScript. У тым ліку бібліятэку CSS з'яўляецца трохі адрозніваецца. 

Тут замест сцэнара TAG вам трэба тэг спасылкі. А потым, тып тэксту CSS трохі адрозніваецца. Вы не заўсёды павінны ўключаць у сябе отн стыляў. Але я думаю, што гэта, наогул кажучы, добрая практыка. 

І, нарэшце, HREF, які вы напэўна, бачылі ў вашых ATAGs для сувязі у розных звёнах за ўсё вызначае звяно, дзе знайсці гэта. Напрыклад, калі мы хацелі, каб звязаць адрозніваецца бібліятэка - давайце проста скажам, - што жыў у styles.css. І мы хацелі, каб звязаць, што ў гэты адбыўся ў Інтэрнэце, мы б скапіяваць гэта. А потым ўстаўце яго ў тое, што мы маем права тут замест гэтага. 

Томас Реймерс: Добра, мы спадзяемся, вы хлопцы ўжо знаёмыя з тым, як звязаць CSS. Вы павінны былі зрабіць гэта на ваш апошні карычневы камплект. JavaScript, некаторыя з вас, магчыма, ёсць вопыт працы з. Некаторыя з вас не можа. 

Так што на дадзены ведаю, што файл JavaScript вельмі падобна на файл CSS у пачуццё, што вы можаце спасылацца на яго або што вы можаце ўключыць яго ўнутрана. І гэта дазваляе сцэнарыяў рэчаў. І мы збіраемся вас праз Трохі JavaScript ў далейшым. 

Такім чынам, выкарыстоўваючы бібліятэку - як толькі вы ўключылі яго, гэта як проста, як літаральна выкліку функцыі або дадання імёны класаў да яго. Апошняе, што мы хочам размаўляць а с пункту гледжання бібліятэкі - і гэта, хутчэй, тэхнічнай запісцы - з'яўляецца ліцэнзаванне з адкрытым зыходным кодам. Такім чынам, калі вы знайсці гэтыя фактычныя бібліятэкі, Вы можаце думаць аб пытанні падабаецца гэта ОК, што я проста з дапамогай кода чужой, асабліва таму што гэта тое, што мы вельмі шмат сказаў табе не рабіць у гэтым курсе. 

Такім чынам, у выпадку адкрытых крыніц ліцэнзавання, шмат распрацоўшчыкаў - як толькі яны напісаў бібліятэку, якія яны думаюць, што можа быць карысным і для іншых людзей - апублікуе яго ў Інтэрнэце і даць яму ліцэнзію. І ліцэнзія асноўным кажа, што я добраахвотна змяшчае дазвол на аднаго людзей, каб выкарыстоўваць гэтую праграму з наступнага роду агаворкі. 

Мы ўключылі спасылку на добры сайт на дапаможа вам зразумець ліцэнзій у выпадку, калі вы сутыкнецеся з імі. Агульныя пагаднення з'яўляюцца рэчы, як Вы можаце выкарыстоўваць маю бібліятэку так Пакуль вы даеце мне крэдыт. Вы заўсёды можаце выкарыстоўваць маю бібліятэку пры ўмове, што, калі яна выходзіць Вы не вінаваціце мяне. Вы заўсёды можаце выкарыстоўваць маю бібліятэку так доўга як вы не выкарыстоўваеце яго, каб зарабіць грошы для сябе. Гэта віды агульнай агаворкі. 

Для гэтага CS50 канчатковага праекта, яны не павінны быць супер значэнне, паколькі праекты, якія вы, хлопцы выкарыстоўваюць, верагодна, хутчэй, свайго роду, вядомыя. Але калі вы на самой справе выйсці ў свет і пачаць выкарыстоўваць бібліятэкі, якія можа ці не можа быць таксама рэалізаваны ў выглядзе некаторыя з найбольш папулярных з іх мы будзе перажывае. Гэта добра, каб быць у стане зразумець гэтыя ліцэнзіі і ў зразумець, што яны азначаюць. І вяртаючыся. 

Майк Риццо: ОК. Так што цяпер перайсці на прыкладах фактычнага CSS. У гэты момант да гэтага часу, вы, магчыма, ня сутыкнуліся з гэтай. Але вы, напэўна, сутыкаліся з гэтым у ваша штодзённае жыццё, дзе нешта , Які выглядае ў адзін бок на адным браўзэры можа не выглядаць гэтак жа, спосаб ў іншым браўзэры. 

Гэта называецца браўзэру браўзэра сумяшчальнасць. І ўсё часцей гэта становіцца ўсё больш і больш праблемы, тым больш, -Браўзэры ўсё больш і больш свабоды на выкананне таго, як яны хочуць. Такім чынам, каб пераадолець гэта, там на самай справе выдатная бібліятэка называецца Normalize.CSS. 

Томас Реймерс: Мы ўключылі спасылку. У гэты момант, гэта карысна, калі ў вас ёсць свой ноўтбук ў там гледзячы на ​​сайце. І мы даем вам гэта права зараз проста таму, што канчатковы CS50 Праект на самай справе адбываецца, каб прашу вас яе рэалізацыі аналагічна і праз браўзэры. 

Так толькі, каб трымаць у задняй частцы вашага галава, гэта выдатная бібліятэка таму што гэта будзе, свайго роду, стандартаваць рэчы. У Firefox, нешта можа паказаць як адзін піксель злева. А потым Chrome можа вырашыць, што на самой справе што вы мелі на ўвазе быў 10 пікселяў налева. І вы хочаце, каб стандартызаваць гэты. Нармалізацыя будзе на самой справе зрабіць сапраўды добры Праца пераканаўшыся, што ваш сайт выглядае гэтак жа, ва ўсіх браўзэрах. 

Майк Риццо: Дык што, калі мы хацелі проста націсніце на спасылку сапраўды хутка і шоу Вы, як гэта выглядае, вам можаце спампаваць яго з дапамогай гігант кнопку Спампаваць. Ці я заклікаю вас, каб даведацца больш аб гэтым націснуўшы на гэтую спасылку ў ніжняй правы кут. 

Томас Реймерс: І калі вы на самой справе націсніце Read More тут жа - пстрыкніце крыніца на GitHub - вы сапраўды будзеце бачыць з адкрытым зыходным кодам Ліцэнзіі на LICENSE.md прама там. І вы ўбачыце, вось вельмі папулярныя ліцэнзіі MIT. Зноў жа, калі вы чытаеце па тэксце, Вы зможаце знайсці яго на сайце мы звяртацца да і ўмець зразумець яго без таго, каб чытаць праз юрыдычнай тэрміналогіі. 

Майк Риццо: ОК, выдатна. Дык вось Нармалізаваць. Мы хацелі даць вам што вельмі хутка. О, у вас ёсць пытанне? 

АЎДЫТОРЫЯ: Такім чынам, калі вы загружаеце яго, вы проста выконвайце гэты код, што яны маюць пад кнопкай Download? 

Томас Реймерс: Так, так пры загрузцы - 

Майк Риццо: О, гэта вялікі момант. Так што пытанне ў тым, як зрабіць мы на самай справе яе спампаваць? Так што, калі мы націсніце на спасылку, мы бачым, што гэта на самай справе ўсплывае на зыходны код. Такім чынам, каб зрабіць гэта, тое, што мы маглі б зрабіць, гэта проста націсніце кнопку Захаваць як. Захаваць як і што варта выхоўваць файл. І тады мы зможам выбраць, каб захаваць гэта як normalize.CSS. І тады вам давядзецца звязаць яго ў - 

Томас Реймерс: Гэтак жа, як вы спасылаюцца ў любы іншы файл. І як толькі вы звязаць яго ў тое, што гэта выдатна аб Нармалізацыя гэта будзе на самой справе клапаціцца пра ўсіх цяжка працаваць сам па сабе. Гэта азначае, што ў вас няма дадаць любыя класы. 

Вы не павінны нічога рабіць дзіўныя. Гэта нармалізуе без цябе рабіць што-небудзь далей. Так, вы павінны ўключыць яго. Google Chrome не адказвае. 

Проста хутка ў бок - Я заўважыў, мы скокнулі ў гэта. Астатняя частка гэтай прэзентацыі будзе кароткі агляд. Агляд бібліятэк. 

У прынцыпе, тое, што яны ёсць. Тое, што яны робяць. Як яны карысныя. Як вы маглі б рэалізаваць іх. Калі вы хочаце пачаць глядзець на іх, наступных разам, і прачытаўшы ім, я настойліва рэкамендую б гэта. 

Акрамя таго, вы заўсёды можаце таксама пачаць загрузку іх і ў тым ліку іх у выглядзе проста каб паглядзець, што яны выглядаюць, як і што яны робяць, калі ў вас ёсць ваш ноўтбук перад вамі. Калі няма, то вы заўсёды можаце трымаць слухаць нас гавораць. Мы збіраемся працягваць казаць. І ў нас ёсць час у канцы, мы спадзяемся, мы на самай справе трапіць у паказваючы вам, што некаторыя з гэтых бібліятэк выглядаць. 

Майк Риццо: Круто. Добра, зараз давайце пагаворым аб шрыфта Высокі. 

Томас Реймерс: так шрыфта дзіўнае з'яўляецца вельмі акуратным сайт, асабліва для тых, з нас, хто менш мастацка таленавіты. Не звяртаючы ўвагі на імя шрыфта Дзіўны, гэта дае Вы куча значкоў, якія вельмі карысна. Так шмат разоў вы будзеце ажыццяўляць значок, які вы можаце як добры х так што вы можаце зачыніць нешта. 

Ці вы можаце нейкую кнопку Змяніць з алоўкавага малюнка, як ва ўсіх астатніх ёсць. І вось, калі вы даведаецеся, што маляванне гэтыя значкі могуць быць вельмі стомным і цяжкім. Шрыфт Надзвычайны - калі вы на самой справе перайсці на сайт - дае велізарную колькасць абразкоў пад значкі на самым версе. Так, проста верх. Гэта дасць вам шмат абразкоў бясплатна. 

Дык вось вы бачыце ў нас ёсць такія рэчы, як Зорачка, бары, маланка, каляндар, памылка, кніга і гэтак далей. Гэта можа быць вельмі карысна. Тое, як вы ўключыць гэта вы ўключаеце літаральна файл CSS. І пасля таго як вы ўключылі файл CSS, тое, што вы можаце зрабіць, гэта стварыць тэг называецца I. Ён satands для значок з класам Англіі стоячы шрыфта Высокі. І потым, усё, што вам больш падыдзе клас. 

Так што, калі я хацеў абраз гэтым плюс квадрат прама тут, я даў бы гэта клас Англіі. А потым FA злучок плюс злучок квадрат. 

Майк Риццо: Круто, ОК. 

Томас Реймерс: І потым, у апошні CSS Бібліятэка мы хочам, каб прайсці праз мы спрабуючы захаваць яго мінімальная на CSS бібліятэкі, таму што мы разумеем, Назва гэтай прэзентацыі з'яўляецца JavaScript бібліятэкі. Але мы думалі, што мы можам, а пазнаёміць вас з іншымі бібліятэкамі у той час як мы казалі аб бібліятэках. 

Гэта Google Вэб шрыфты. І тое, што Google Вэб Шрыфты дазваляе вам зрабіць, гэта дадаць шрыфты на ваш сайт, які з'яўляецца сапраўды просты спосаб зрабіць гэта даволі і адрозніць свой набор ад усіх астатніх, калі ў яго ёсць прыгожы шрыфт або калі ў яго ёсць добры Калекцыя шрыфтоў. Google Web Fonts добры ў адрозненне ад іншых бібліятэкі ў тым сэнсе, што гэта сапраўды кіруецца ўстаноўкі. 

Так што калі вы, перайдзіце па спасылцы, гэта google.com / шрыфты, я лічу. Калі вы будзеце прытрымлівацца, што, вас можаце выбраць свой шрыфт. Вы можаце выбраць злева ад таўшчыня, нахіл, і гэтак далей. А потым, як толькі вы выбралі адзін, вы можаце націснуць хуткі выкарыстанне. Прама там. Правая ніжняя частка скрынкі. 

А потым, пракруціць ўніз. Перш за ўсё, яны даюць вам CSS, што вам трэба на самай справе спасылаюцца на яго. Гэта прама там. Вы можаце проста скапіяваць і ўставіць, што цалі І добрая рэч аб гэтым адзін з'яўляецца Вы на самой справе не трэба нават спампаваць файл. 

Што ён збіраецца зрабіць, гэта ён збіраецца перайсці па спасылцы версіі кампаніі Google ад яго. Такім чынам, вернемся да што гэта значыць. Гэта азначае, што калі карыстальнік загружае файл - загружае ваша старонка HTML - ваш HTML старонка будзе спасылацца на гэты файл. 

Такім чынам, ваш кампутар ўбачыць, О, гэта размяшчаецца на google.com, а чым на theirsite.com. Адпусьці мяне спытаеце Google для гэтага файла. І потым, гэта будзе ўключаць у сябе гэта амаль як калі б гэта было часткай вашага ўласнага сайта. 

Томас Реймерс: Круто. І як толькі вы ўключаеце гэта, то ў ўключыць яго ў свой CSS, гэта дае вам фактычная лінія. Такім чынам, вы ўсталюеце сямейства шрыфтоў нерухомасць супадае з імем вашага шрыфта. 

Майк Риццо: ОК. Такім чынам, мы толькі што скончылі з CSS. І некаторыя з вас могуць падумаць: ну, у нас было трохі CSS на CS50 фінансаў. Але бібліятэка CSS быў загрузны. Мы фактычна ўключаюць пачатковай загрузкі трохі пазней пад JavaScript, таму што з бібліятэка пачатковай загрузкі CSS таксама пастаўляецца з вялікай колькасцю JavaScript гэтай Пачатковай загрузкі або Twitter - хто зрабіў Bootstrap - выкарыстоўвае для кіравання ўсімі іх CSS. 

Томас Реймерс: Хто-небудзь ёсць любая пытанні да гэтага часу аб CSS у цэлым? Мы добра? Ўзрушаюча. 

Майк Риццо: Цудоўна. 

Томас Реймерс: Так пры перамяшчэнні на JavaScript. 

Майк Риццо: Такім чынам, мы хацелі пагаварыць аб JQuery з самага пачатку. Хто-небудзь чуў пра JQuery да або выкарыстаў яго? Так, пару? Так што калі вы проста працаваць з роднымі JavaScript, вы апынецеся набраўшы шмат доўгіх селектараў шмат. Так што JQuery робіць гэта забяспечвае добры абалонка для JavaScript мова, які дазваляе лёгка выбраць і маніпуляваць рознымі элементамі у аб'ектнай мадэлі дакумента вэб-старонкі або DOM, які я думаю, вы, хлопцы, чулі пра ў лекцыі ў гэтай кропцы. 

Томас Реймерс: Калі вы яшчэ не чулі пра гэта ці калі вы яшчэ не глядзелі лекцыя тым не менш, аб'ектнай мадэлі дакумента з'яўляецца у асноўным, як прадстаўленыя рэчы. Так HTML накшталт выглядае як дрэва, калі вы на самой справе зрабіць гэта. У вас ёсць HTML элемент на вяршыні. У вас ёсць галава і цела. 

А потым, у тым, што вы ёсць усе астатняе. Вось называюць DOM - Аб'ектнай мадэлі дакумента. Так мадэль, якая ўяўляе аб'екты ў дакумент уяўляе сабой просты спосаб думаць пра гэта. І адзін з Самае выдатнае ў JQuery гэта сапраўды робіць абыходзе што і маніпуляцыі элементы ўнутры што неверагодна проста. 

Так проста, па сутнасці, што большасць JavaScript бібліятэкі ці калі не Большасць, вялікі большасць з іх вы ўбачыце на самай справе патрабуюць JQuery так што яны могуць працаваць самі проста таму што, калі ў вас не было JQuery, вам будзе марнаваць шмат часу, спрабуючы высветліць, як абраць пэўны элементы і як рабіць іншыя рэчы. А другі цікавая рэч аб JQuery тое, што гэта узаемную браўзэр, сумяшчальны. 

Так што памятаеце, калі мы сказалі, што не ўсе браўзэры рэалізацыі рэчы такім жа чынам? Гэта дакладна нават у JavaScript. І адна з вялікіх рэчаў аб JQuery з'яўляецца тое, што ён выявіць браўзэр і выявіць адпаведны метад. 

Так што калі вам трэба выбраць элемент, Internet Explorer можа сказаць, што вы павінен рабіць гэты шлях. Firefox можа сказаць правільнае шлях такім чынам. JQuery не клапоціцца. Калі вы кажаце JQuery, каб выбраць элемент будзе высветліць, як гэта павінен рабіць гэта ў браўзэры карыстач у дадзены момант, а затым зрабіць гэта такім чынам. 

Майк Риццо: Так што давайце не будзем казаць пра выкарыстанне JQuery няшмат. Гэтак жа, як PHP, JQuery мае канкрэтны любоў да знака даляра. Такім чынам, вы ўбачыце, што любы JQuery - ну, не ўсё. Часам можна замяніць долар падпісаць са словам JQuery. Але ў цэлым, толькі таму, што карацей, калі вы бачыце JQuery быць выкарыстоўваецца гэта будзе са знакам даляра. 

Дык вось, мы проста паказваючы пачатак Селектар для элемента ў DOM. Тут, у нас ёсць знак даляра з наступным адкрытымі дужках, а затым каціроўкі. І на працягу двукоссяў ідуць нашы селектары для розных элементаў. Гэтак жа, як у CSS, у чым мы мелі патрэбу селектары ўмець ўкладваць розныя элементы на старонцы. Гэтыя розныя селектары перавесці сапраўды ў JQuery і JavaScript, па большай частцы. 

Так вось у нас ёсць кропка Foo. Так што калі вы памятаеце з лекцыі, кропка проста азначае клас. Такім чынам, мы выбраўшы элемент з класа Foo. Так што калі я іду наперад і адкрыць наш Кансоль JavaScript тут вельмі хутка проста прадэманстраваць гэта, калі я проста набярыце знак даляра, мы бачым, што гэта нейкая Функцыя, якая ідзе ўверх. І гэта проста вызначаецца JQuery. 

Томас Реймерс: Для тых з вас, незнаёмыя, кансоль з'яўляецца інструментам у Chrome, які дазваляе, у асноўным, запусціце наяўнасць на бягучая старонка. Гэта вы знойдзеце неверагодна карысна, калі вы на самой справе адладкі і вы павінны быць, як, што ў цяперашні час значэнне некаторай глабальнай зменнай ці што нешта яшчэ? Гэта накшталт як GDB, за выключэннем што вы можаце на самой справе маніпуляваць элементы на старонцы з гэта ў значна больш лёгкай форме. А таксама гэта не так, у прынцыпе, праверыць з вамі, перш чым ён нічога не робіць. 

Так у той час як, GDB можа быць як, ты ўпэўненыя, што хочаце запусціць наступны крок? Кансоль гэта ў рэале. Так як вэб-старонка з'яўляецца аказанне і рабіць усё, што ён робіць, Савет таксама працуе разам з ёй. І вы можаце змясціць прыпісаць код у што кансоль, якая будзе быць запушчана на старонцы. 

Майк Риццо: Так, каб увайсці ў кансоль, Думаю, я павінен коратка кажучы ўжо пра тое, каб зрабіць гэта. У апошнія праблемы, якія вы можаце мець б Хрому элемент агледзіце функцыі або прадстаўленне крыніцы старонка - і тыя, даступныя толькі па праву націснуўшы на старонцы або канкрэтнага элемент і рабіць альбо праверыць элемент або прадстаўленне крыніцы старонкі. Мы таксама можам атрымаць доступ да JavaScript Кансоль непасрэдна выбары агледзіце элемент. Тады вы проста націсніце кансоль у правай баку. 

Акрамя таго, можна таксама прайшлі ў верхнім правым куце, які адрэзалі на гэтым экране, дзе яна мае тры гарызантальныя паласы. І вы спускаецеся да інструментаў і Затым JavaScript кансоль тут, дзе можна ўбачыць - па меншай меры, на Windows - ярлык кіравання пераключэннем J. Такім чынам калі б мы хацелі, каб выбраць элемент у межах гэтай старонцы, сапраўды гэтак жа як я паказаў перш, мы робім знак даляра адкрытыя дужак а затым цытуе. 

Цікавая рэч, наогул, адзінарныя двукоссі і двайныя двукоссі зменны. Так шмат людзей проста выкарыстоўваць адзін каціроўкі, таму што яны хутчэй набіраць чым падвойныя двукоссі, таму што вы не трэба ўтрымліваць. Shift Так што я проста зрабіць гэта прама цяпер. 

Таму я хачу, каб выбраць нешта з класам. Кантэйнер, толькі таму, што я ведаю, што гэта тое, што на нашай вэб-старонкі прама цяпер. І я ўдарыў Enter. І мы бачым, што яна абрала яго. Так ён паказвае, што гэта вярнуўся гэты аб'ект. Так што гэта асноўны выбар. Калі б мы хацелі на самой справе працаваць з ім, вам давядзецца патэлефанаваць нешта на гэтым выбары, які мы атрымаем у далейшым. 

Томас Реймерс: Так што проста глядзець на гэта больш падрабязна, гэта нічым не адрозніваецца чым выклікаў функцый, якія мы зрабілі ў C. Імя функцыі тут з'яўляецца крыху дзіўна. Гэта знак даляра. Гэта проста імя функцыі. Там няма нічога асаблівага ў гэтым няма. 

У нас ёсць адкрытыя дужкі. Тады, у нас ёсць адзін аргумент, які у гэтым выпадку аказваецца, радок, які з'яўляецца селектарам для яго. І потым, у нас ёсць наш закрытая дужка. Вось і ўсё. 

Гэта не так моцна адрозніваюцца. Хоць, гэта сапраўды выглядае вельмі дзіўна. І гэта можа быць, свайго роду, каменем паказаць для многіх людзей. 

Майк Риццо: Такім чынам, падобным чынам, калі б мы хацелі , Каб выбраць элемент, які мае ідэнтыфікатар, зараз мы хочам, каб выбраць па ID замест класа. Было б нешта падобнае, дзе мы проста зрабіць рэзкі знак для ID. Такім чынам, мы выбару тут усё элементы, якія маюць ID бар. 

Томас Реймерс: І гэта распаўсюджваецца. Гэта CSS распаўсюджваецца. Гэтак жа, як у CSS, вы можаце выбраць усе Спасылкі, якія маюць клас Foo. Вось, гэта тое ж самае. 

Вы маглі б зрабіць a.foo, які будзе выбіраць усе спасылкі з класам харчовы. Вы маглі б зрабіць рэзкі бар, які будзе выберыце спасылку з ідэнтыфікатарам бар і т. далей, і гэтак далей. Любы селектар CSS з'яўляецца дапушчальным Селектар JQuery. 

Майк Риццо: Так. Такім чынам, цяпер давайце пяройдзем да трохі маніпуляцыі, што мы можам зрабіць з наша JQuery. Так JQuery мае пэўны тып пазначэнняў, дзе мы проста выкарыстоўваць кропка ў канцы. І вы можаце думаць пра гэта, як і ў З, як мы былі розныя структур. І ісці ў тых структур, вы б выкарыстоўваць кропку, каб патрапіць у іх. 

Гэта, свайго роду, нешта падобнае. Толькі цяпер у нас ёсць функцыі ў гэтым селектар, які мы можам назваць на ім. Дык вось, самы першы прыклад Вы можаце бачыць гэта селектар CSS. А ў прынцыпе, што гэта робіць гэта ставіцца першы элемент CSS на гэта рэч, якую вы абралі - гэта элемент, які вы абралі - са значэннем гэтага. 

Томас Реймерс: Так проста пераклад што было б, калі JQuery, у асноўным, проста ўзяў Foo. І тады ў CSS сказаў, Колер чырвоны і блізка. Гэта тая самая ідэя. Што гэта робіцца ў яе выбары ўсе элементы Foo. А потым ён ужываецца. Накшталт, колер уласнасці роўная чырвоны. 

Майк Риццо: Аналагічна можна таксама змяніць фактычнае змест, што з'яўляецца паказваючы на ​​HTML старонкі, якія сапраўды выдатна, таму што гэта азначае, што ваш Зараз вэб-старонкі могуць быць цалкам дынамічны і не павінны быць статычнымі Вам раздрукаваць з дапамогай PHP ў самым пачатку старонка загружаецца. Дык вось, калі б мы хацелі змяніць Фактычны HTML старонкі, мы б цяпер выклікаць функцыю HTML, які затым проста ўстаўкі, што мы паказаць у што элемент, які мы абралі. Дык вось мы выбраўшы элемент з клас Foo, а затым кажуць, што гэта HTML гэта зараз прывітанне свет. 

Томас Реймерс: І калі вы думаеце пра якія карысныя прыкладанні гэта, гэта CSS адзін, першае, што Вы можаце пачаць думаць пра тое, з пункту гледжання нават выпадаючыя меню. Вы можаце пачаць рабіць рэчы, як, калі карыстальнік наводзіць курсор на верхняй частцы з выпадальнага, вы хочаце зрабіць ніжняя частка бачная. Ці не так? 

Такім чынам, у CSS, у нас ёсць ўласцівасці зрабіць што-то бачнае. Такія рэчы, як дысплей тоўстай кішкі ні зробіць яго нябачным. Паказаць блок будзе зрабіць яго бачным. Ці нават калі вы хочаце пайсці больш простым, вам ёсць такія рэчы, як бачнасці роўных відаць, і бачнасць складае схаваная. 

А вы маглі б прыступіць да ажыццяўлення рэчы як выпадаючыя меню права пасля атрымання праз ідэю аб тым, як Вы можаце высветліць, калі гэта адкрывае, якія мы атрымаем праз вельмі кароткі час. Але мы можам пачаць бачыць прымянення гэтага. У тым жа сэнсе, калі б вы паспрабавалі і ажыццяўляць, скажам, чат рухавік, і вы хочаце, каб зрабіць трохі прамовы бурбалка прыдумаць, калі ў Вас ёсць атрымаў новае паведамленне, як толькі вы атрымаеце новае паведамленне, вы можаце зрабіць трохі прамовы бурбалка прыдумаць шляхам змены HTML старонкі, ці не так? Дадаўшы, што дадатковы прамовы бурбалка з дадатковым тэкстам на там. Да? 

АЎДЫТОРЫЯ: Такім чынам, вы б ўбудаваць гэта ў HTML код у накшталт як [Неразборліва]? 

Майк Риццо: Дакладна. Так, мы вернемся да гэтага ў трохі. Так, гэта падобна трохі, каб PHP. Не зусім падобныя. 

Добры адрозненне, каб зрабіць тое, што гэтая на самай справе рэдагавання, калі мы рэдагаваць старонка, таму што гэта не будзе рэдагавання сам файл, што ў цяперашні час , Якія захоўваюцца на серверы, таму што свет не павінны мець дазвол рэдагаваць файлы. Гэта проста рэдагавання, што знаходзіцца на старонцы і тое, што адлюстроўваецца ў браўзэр. Так што калі вы былі, каб перазагрузіць старонку пасля, кажуць, выдаленне нешта, як мы бачыць, што мы можам зрабіць з заклікам выдаліць, што ўсё было тое ізноў. 

Томас Реймерс: Так адзін спосаб думаць аб гэта калі я кампутар і Майк, накшталт, сервер. Што здарыцца, я збіраюся спытаеце Майка, эй, я магу мець копію гэтая вэб-старонка? І ён дасць мне яго копію. 

Не, гэта не арыгінал рэч. Гэта проста копія. І то гэта было б, як, о, ёсць JavaScript тут. Відавочна, што я павінен змяніць старонкі, каб быць, як гэта. І я рэдагавання вашу копію. 

Але гэта не ажыццяўлення фактычная копія. І калі б я спытаў яго зноў абновіце старонку, - эй, я магу мець іншы чыстую копію - ён збіраецца даць мне іншы чыставік. І потым, я збіраюся зрабіць тое ж самае як, о, гэта JS тут, што кажа рэдагаваць гэты. І я буду працягваць гэта рабіць. 

Майк Риццо: Так сапраўды класная рэч што вы можаце зрабіць з JQuery з'яўляецца на самай справе дадаць розныя тыпы анімацый на сваю старонку. Я не ведаю, калі вы яшчэ не бачылі, дзе Вы спрабуеце залівання форму Інтэрнэце, і вы не запоўніце Правільна рэчы. Так мала, што слізгае ўніз у верхняй і кажа, што вы яшчэ не зрабілі гэта правільна. Калі ласка, паспрабуйце яшчэ раз. І потым, гэта можа нават проста слізгаць ўверх. 

Аказваецца JQuery мае убудаваныя функцыі якія робяць усё, што анімацыя вельмі, вельмі лёгка. Так што ёсць першы вяне з функцыя, вы можаце патэлефанаваць на нешта. І гэта спосаб змяніць CSS з гэты элемент у ажыўленай дарозе. Так яно прымае незалежна элемент вы называеце гэта знікаць на. А потым, павольна змяняе яго непразрыстасць пакуль ён не стане цалкам празрыстай. 

Томас Реймерс: Іншы папулярны будзе слізгаць уніз, што зробіць нешта з'явіцца, ссунуўшы яе ўніз. Такім чынам, у выпадку меню выпадальнага, зноў, калі мы даведаліся, як выявіць калі гэта было завіс над, вы маглі б проста сказаць гэтаму дно частка скаціцца цяпер. А потым, здавалася б, ссунуўшы ўніз. 

Майк Риццо: І потым, калі вы проста павінны некаторы тып анімацыі на ўвазе, што JQuery не абавязкова забяспечвае. Напрыклад, выкажам здагадку, што JQuery сапраўды забяспечвае вас з горкай ўніз і слайд ўверх. Ну, скажам, вы хацелі, каб слізгаць нешта на левым флангу або ў ад права накшталт як CS50 галоўная старонка робіць кожны раз, калі вы ідзяце на новую панэль. Затым вы павінны, верагодна, прыйдзецца рэалізаваць яго самастойна, выкарыстоўваючы аніміраваць функцыю ў JQuery. 

Такім чынам, падобным чынам, вы проста жыву. А потым, у ім ён прымае слоўнік з розных значэннях што ты павінен прайсці. Дык вось, калі мы хочам, каб ажывіць элемент Foo такім чынам, што яго шырыня альбо пашыраецца або сціскаецца да 80 пікселяў, у залежнасці ад таго, што гэта ў цяперашні час. Мы б проста перадаць, што, як аргумент у ім. 

Анімацыя таксама ёсць некаторыя іншыя аргументы што вы маглі б перадаць яго, напрыклад, хуткасць анімацыі што вы хочаце, каб даць яго. А для гэтага, я б проста сказаць, хутка Google JQuery анімацыі. А потым, у выніку чаго да гэтай старонкі, вы можаце см. ён атрымаў кучу розных ўласцівасці, якія вы можаце перадаць яго. 

І я заклікаю вас - кожны раз, калі вы прыходзіце праз тое, што вы робіце ня ведаюць ці проста хочаце даведацца больш аб прыватнасці метад, які можна назваць на нешта - Проста Google гэта. JQuery з'яўляецца надзвычай добра дакументаваны. І часцяком ёсць шмат прыклады, якія яны падаюць для вас. Калі мы пракруціць ўніз - шлях уніз - што мы можам выкарыстоўваць, а таксама. 

Зноў жа, калі распрацоўшчык фактычна ідзе праз праблемы заключэння бібліятэка, яны звычайна хочуць хтосьці яго выкарыстоўваць. Так разам збіраецца быць дакументацыя. І, што дакументацыя, як правіла, быць даведацца на старонцы праекта, які чаму мы далі вам, што арыгінальны сайт у пачатак, якое злучае вас з Старонкі праекта, каб вы маглі бачыць, што дакументацыю. 

Як правіла, старонка праекта ў выпадку з [неразборліва], ён сказаў вам у імёны класаў. У выпадку JavaScript, гэта дае Вы назва функцый. Дарэчы, калі мы пракруткі уверх да вяршыні, хуткі цікава адзначыць на функцый кожны раз, калі вы бачыце функцыю рэалізаваны як гэта з цяжка дужкі ў сярэдзіне, гэта азначае, што гэта ўласцівасць з'яўляецца неабавязковым. Проста галавы. Я бачыў шмат пытанняў пра гэта. 

І вось мы бачым, што жывы прымае ўласцівасці ў якасці неабходнага аргументу. А ўсё астатняе не з'яўляецца абавязковым. Заўвага боку - Вы можаце думаць пра гэта, свайго роду з, як чалавек старонак. Даведкавыя старонкі дакументацыі для C і для многіх іншых рэчаў, а таксама. 

Майк Риццо: Такім чынам, мы даведаліся, як змяніць розныя CSS на старонцы, ажывіць яго, і зняць дадаць HTML. Але адзін з сапраўды самы магутны рэчы пра JavaScript і асабліва JQuery - што гэта дазваляе зрабіць, гэта адказаць на розныя элементы, якія адбываюцца. Напрыклад, тут мы маем апрацоўшчык падзеі. І гэта проста азначае, кожны раз, калі гэта Падзея адбываецца, мы з ёй у пэўным чынам. 

Дык вось, агульны падзея JQuery апрацоўшчык з'яўляецца кропка на. А потым, першае, што вы далі гэта тое, што падзея гэта павінна слухаць для. Дык вось, гэта пстрычка, што мы чакаем. 

Томас Реймерс: З іншага боку, у вас ёсць пры навядзенні, які з'яўляецца вельмі папулярным. Такім чынам, вернемся да маёй выпадальнага ідэі меню. Вы павінны былі б верхнюю адзін на навядзенні курсора мышы. І тады вы маглі б змяніць гэтую сітуацыю. 

Майк Риццо: Дакладна. А потым, калі гэта адбудзецца, гэта проста выконвае гэтую функцыю, што мы даем яму ў якасці аргументу, і што ён папярэджвае прывітанне або прывітанне. 

Томас Реймерс: Так у выпадку JavaScript, гэта месца, дзе мы павінны выдаліць сябе ад С. Мы можам на самай справе прыняць функцыі ў якасці аргументаў. І ёсць шмат сапраўды складаныя спосабы зрабіць гэта. Мы збіраемся садзейнічаць у адзін бок, што вы можаце вызначыць функцыянаваць прама там. 

Так што, калі вы просіце функцыі як параметр, вы ў асноўным толькі збіраецца вызначыць функцыю на месцы. І тое, як вы вызначаеце функцыю у JavaScript з'яўляецца вы літаральна сказаць функцыю. Затым, як правіла, назва функцыі. Але мы ніколі не будзем спасылацца на гэтая функцыя зноў. Такім чынам, мы пакінуць яго безыменным. 

Тады дужкі, то фігурныя дужкі, а затым код ўнутры гэтага. Такім чынам, мы разумеем, гэта можа быць трохі заблытаным. Такім чынам, мы даем вам агульны выгляд што апрацоўшчык падзей выглядае ніжэй, што на падзеі. А потым, ваш код ўнутры гэтага. 

Майк Риццо: Ці ёсць пытанні па гэтай нагоды? Гэта можа быць трохі заблытаным, у першы раз вы яго бачыце. 

Томас Реймерс: Вы на самой справе хочаце адкрыць файл і паказаць ім некаторыя JQuery прама цяпер? 

Майк Риццо: Так, давайце зробім гэта. ОК. 

Томас Реймерс: Так што цяпер мы ў прыборы. І тое, што мы зрабілі, мы прынялі свабода стварэння як у index.html файл, які адлюстроўвае спасылкі на файл JavaScript. І ці можам мы адкрыць - так. Ну, гэта робіць дзве рэчы. 

Першы гэта спасылкі на файл JavaScript. І мы ўбачым, што тут. Мы бачым, што ў галаве HTML дакумент, у прыватнасці. Такім чынам, вы ўбачыце, што там мы, у асноўным, кажуць SRC, якая выступае за крыніцай. І гэта URL. 

Таму тут можна сказаць, што мы ўключаны JQuery. І мы таксама ўключылі скрыпты. Іншы спосаб ўключыць JavaScript з'яўляецца што можна ўключыць убудаваны скрыпт Тэг, як у нас на дне, дзе ён кажа тыпу сцэнар тэкст JavaScript. 

Так мы гаворым, слухаць, мы аб ўключаць сцэнар. І тып гэтага сцэнарыя з'яўляецца JavaScript, які з'яўляецца адным з відаў тэксту. Вельмі проста. 

Майк Риццо: Так што гэта, свайго роду, трапляе ў ваша пытанне аб тым, як мы ўключаем JavaScript ў нашых файлах, таму што, калі мы што PHP, мы зрабіць нешта накшталт гэтага. І потым, ёсць свае PHP функцыі - скажам запасы рабіць нешта з гэтым - ідзе туды. Тым не менш, зараз у нас ёсць тэгі сцэнара што мы даем яго, што на самой справе часткай самога HTML, таму што гэта не прыкідваецца быць HTML файл падабаецца знаходзіцца ў PHP таму што калі вы на самой справе ісці ў і паглядзець на зыходны код старонкі, вы ўбачыце гэтыя тэгі сцэнара там з JavaScript, звязаны з ім у гэтым. 

Такім чынам, калі мы хочам напісаць некаторы наяўнасць - давайце проста скажам, мы хацелі змяніць цела таму што цяпер у мяне няма любыя іншыя тэгі, што я магу сапраўды рэдагаваць акрамя цела. Давайце проста скажам, што я хацеў змяніць CSS гэтага. Таму мы будзем ісці наперад і змены колер яго на чырвоны. 

Так што я захаваць файл. Давайце вернемся да нашай вэб-старонцы, абнаўлення, і ён робіць гэта аўтаматычна таму што гэта не здавалася, што гэта чакалі наогул, таму што мы не слухалі для падзеі або што-небудзь падобнае. 

Томас Реймерс: Дык што, калі мы вернемся да таго, што падаць у прыватнасці - HTML, Выява - Што вы збіраецеся каб убачыць гэта ў нас ёсць - памятаць, што гэта будзе загружаны, роду, у храналагічным парадку. Таму ў нас ёсць першы кіраўнік. ён загружае гэтыя два файла. Тады мы ідзем да цела. І мы бачым, прывітанне свет. Так мы аказваем прывітанне свет. 

І тое апошняе, што ў нас ёсць будзе ў нас ёсць тэг сцэнара. Так ён працуе тэг сцэнара, таму што гэта не кажу гэта, каб чакаць. І гэта самае асноўнае спосаб запусціць JavaScript. 

З улікам сказанага, вы можаце пакласці сцэнар пазначыць у загалоўку проста паказаць гэтую кропку? І запусціць гэта. Мы збіраемся адзначыць, што гэта не зьмяніць колер. І гэта адна з праблем JavaScript з'яўляецца тое, што рэчы загружаны ў храналагічным парадку. 

Так у той час, што код бег, мы абралі - вярнуцца - цела тэга. Тэг цела яшчэ не існуе, таму што JavaScript з'яўляецца ў адпаведнасці з HTML. Такім чынам, браўзэр, як абярыце цела. Там няма такога паняцця, яшчэ. Такім чынам, мы можам ігнараваць гэта. І мы працягваем. 

А потым мы вызначаем цела тэга. Але гэта ніколі не абнаўляецца. Таму, калі вы рэалізуеце сцэнар тэгі, пераканайцеся, што вы змесціце пасля тэга цела. Наступны слайд. 

Майк Риццо: ОК. Такім чынам, мы змянілі што-то. Але гэта не было падобна, што адказалі на нам наогул, таму што гэта толькі часткова зрабіў гэта, як толькі ён загружаецца старонку. Так што цяпер, замест таго, каб рабіць гэта, то чаму ня мы дадаем апрацоўшчык падзеі. 

Так што давайце рабіць нешта да цела зноў. І скажам, мы робім гэта на - націсніце. Мы дадамо функцыю. 

Змена Давайце: Tomas Реймерс яго колер на чырвоны зноў. Чаму не? 

Майк Риццо: Так, давайце змены яго «колер на чырвоны зноў. Добра. Так што давайце перазагрузіце старонку. ОК, мы бачым - як і чакалася, ён не пачырванее яшчэ. Але тады мы можам ісці наперад і пстрыкніце па ім. 

Томас Реймерс: І гэта становіцца чырвоным. 

Майк Риццо: І гэта робіць чырванеюць, як чакалася. 

Томас Реймерс: І мы бачым, як мы можам пачаць будаваць вельмі асноўным ўзаемадзеянне. Іншыя рэчы, якія мы маглі б хацець зрабіць, гэта, калі мы не хочам, каб зрабіць цела Колер чырвоны, давайце зробім HTML фон чырвоны колер. Менавіта так гэта тое ж самае CSS. 

І калі мы змяніць яго, мы можам убачыць гэта вельмі драматычна эфект змены ўся старонка. Такім чынам, яшчэ раз, калі вы рэалізуеце рэчы, Вы можаце мець адзін кампанент які прызначаны для шчоўкнулі. Скажам кнопку Exit і Увесь іншы кампанент, які прызначаны, каб адказаць. Такім чынам, вы б выдаліць акно калі гэта адбудзецца. 

Майк Риццо: ОК. Проста ў якасці прыкладу - вы не атрымаеце, каб убачыць гэта раней - Я проста пакажу вам, што гэта выглядае падабаецца, калі мы нешта схаваць. Так што я буду ісці наперад і не слізгаць уверх. 

Томас Реймерс: Хочаце, каб абгарнуць, што ў Тып пункта, перш чым мы гэта зрабіць? 

Майк Риццо: ОК. Так, чаму б нам не зрабіць гэта проста так мы можам выбраць яго крыху больш. 

Томас Реймерс: І давайце даць яму клас. 

Майк Риццо: Так. Такім чынам, давайце паглядзім. Замест выбару фактычнае цела Зараз, я проста выберыце ўсё з Клас прывітанне, якую мы тут проста ёсць адна рэч. Такім чынам, мы не павінны турбавацца пра гэта. 

Так што я буду абнаўляць яго. Я буду ісці наперад і пстрыкніце па ім. І гэта, свайго роду, зрабіў дзіўны Slide да рэч, якая не глядзеў, што прывабным. Як правіла, яны выглядаюць даволі прыемна. Я думаю, гэта - для некаторых Прычына - няма. Я проста зрабіць знікаць так, вы можаце паглядзець на гэта таксама. Нашмат прыемней. 

І потым, калі я адкрываю наяўнасць суцешыць зноў, і мы хочам убачыць, што ён выглядае, калі мы знікаць яго цалі Зараз, я проста патэлефануеце знікаць на гэтым. І яна знікае маштаб 

Сапраўды гэтак жа мы маглі на самай справе таксама праходзяць Аргумент знікаць або знікаць, які з'яўляецца, свайго роду, хуткасць яго. Так што давайце ісці наперад і сказаць, што мы хочам гэта ісці павольна знікаць цалі Так што я думаю гэта ўсё яшчэ здавалася даволі хутка. Але гэта было больш павольна, чым раней. 

Томас Реймерс: І калі вы хочаце, каб знайсці больш аб гэтых рэчах, зноў жа, проста пайсці ў дакументацыі JQuery, якія мы далі вам, і чытаць праз іх. Яны дакументуюць свае функцыі неверагодна добра. 

Майк Риццо: ОК. Так што я думаю давайце вернемся да гэтага. І мы можам казаць аб нашай апошняй старонцы. Ну, мы можам скончыць з Bootstrap. І тады мы будзем адкрыць яго на некаторыя пытанні. І калі вы, хлопцы, ёсць якія-небудзь ідэі, што Вы хацелі б, каб паспрабаваць кінуць і паглядзець, калі мы можам рэалізаваць іх з JavaScript хутка. 

Так на самай справе хутка аб пачатковай загрузкі, які аўтаматычна ўключаны ў ваша апошняя праблема ўсталяваць у тэчцы CSS а на самой справе звязаныя з у вашым header.php. Такім чынам, вы маглі б дадаць класы, вызначаны ў Bootstrap да яго. І гэта было б аўтаматычна стылі тыя рэчы, адпаведна. 

Томас Реймерс: Так пачатковай загрузкі з'яўляецца вельмі чароўная рэч, распрацаваны людзей на Twitter. І тое, што яна павінна была зрабіць, было - перад вэб-сайты былі сапраўды цяжка зрабіць добра выглядаць, асабліва калі ў нас былі шмат агульных кампанентаў. Так шмат кнопак на вэб выглядалі аднолькава. 

Шмат тэкставых палёў могуць быць зроблены выглядаць лепш, чым стандартны тэкст поле вы, напэўна, ведаеце з сапраўды старыя вэб-сайты або сапраўды дрэнна зрабіў вэб-сайты, якія проста выглядаюць як літаральнае тэкставыя палі без якіх-небудзь выглядзе тэксту цень або любы выгляд добры контурам. Так што Бутстреп зрабіў, ён сказаў, ну, У нас ёсць шмат агульных стыляў. Чаму б нам не зрабіць адзін агульны набор CSS і агульны набор JavaScript як добра, што можа ўкладваць усё як ёсць, а якія можа даць людзям такія рэчы, як падзенне ўніз меню, якія могуць даць людзям рэчы, як мадальнасцяў. 

Мадальныя тое, што ўсплывае на старонцы кожны раз, калі гэта, строга кажучы, нешта, што перашкаджае далейшаму ўзаемадзеянне да вас ўзаемадзейнічаць з ім. Нешта падобнае, вы ўпэўненыя, , Што хочаце выдаліць гэтую рэч? Вы не можаце сапраўды зрабіць што-небудзь яшчэ пакуль вы не сказаць так ці не. 

Спатрэбілася ўсяго гэтага, і гэта запакаваная яго разам і сказаў, тут мы ідзем. Цяпер людзі могуць выкарыстоўваць гэта. І вы можаце знайсці яго на у getbootstrap.com. Было аўтаматычна ўключаны ў ваша апошняя праблема ўсталяваць. І вы больш, чым можаце выкарыстоўваць яго на сваім канчатковым праекце. І калі вы хочаце прытрымлівацца, што спасылцы, каб атрымаць Bootstrap. 

Вы ўбачыце тут з'яўляецца BootStrap CSS сайт. Вы ўбачыце Bootstrap. І калі вы пракруціць ўніз, вы ўбачыце як загрузіць яго, як ўсталяваць яго, і гэтак далей. 

Майк Риццо: І вы таксама можаце, што цікава, наладзіць яго на быць любы выгляд тэмы што вы хочаце. Я ведаю, што тое, што я зрабіў для майго Канчатковы праект, калі я ўзяў клас быў наладзіць яго. Іншы варыянт пачатковай загрузкі, што было іншую каляровую схему і розныя формы некаторыя розныя рэчы. Таму я заклікаю вас, каб гуляць з гэтым. Гэта пацешна рабіць. 

Томас Реймерс: Гледзячы ў верхняй зноў жа, гэта вельмі падобна на Font Выдатны сайт. Шмат дакументацыі пачнецца каб здацца падобнымі, калі вы бачыў дастаткова. Так вось у нас ёсць CSS кампанентам гэтага. І вы ўбачыце, як гэта можаце стыль рэчы. Так што калі вы пстрыкніце на сталах, напрыклад, вы можаце імгненна зрабіць табліца даволі простым даданнем клас табліцы да яго. 

Тыя ж рэчы для кнопак. Калі вы проста дадаць клас BTN і BTN па змаўчанні ці BTN першасны, вы можаце атрымаць любую з гэтых кнопак з гэтымі папярэдне зробленых стыляў. І потым, калі вы шукаеце нешта больш складанае, чым проста рэстайлінгу, што ж ужо ёсць, больш на ўкладка JavaScript па верхняй мы ёсць куча кампанентаў. 

Так вось у нас пераходы, мадальнасці, выпадальнае меню, укладак і усплывальныя падказкі. Падказка тое, што ўсплывае пад вашым мышы пры навядзенні на нешта. Popovers, абвесткі, кнопкі, зборна-разборныя акардэоны тое, што яны звычайна называюць. Каруселі, якія фліп праз, напрыклад, малюнкаў. 

Так што тыя кампаненты бутстраповских. Я хацеў бы заклікаць вас высока пайсці паглядзець на іх. Там у кампанент JavaScript і кампанент CSS. Не саромейцеся выкарыстоўваць іх як хочаце. Мы не збіраемся ісці занадта шмат у іх таму што мы адчуваем у дакументацыі сапраўды добра зроблена. І так. Ці ёсць у вас пытанні па гэтай нагоды? 

Майк Риццо: Так як на самой справе хутка бок, дызайн гэтай вэб-старонцы, што мы хутка сабралі для гэтая прэзентацыя на самой справе робіцца з дапамогай загрузкі. Як вы можаце бачыць, калі мы націсніце на іх розныя ўкладкі, мы ніколі не фактычна пакідаючы гэтую бягучую старонку index.html. Так што ў нас ёсць гэта розныя дзівы на працягу гэтага index.html. А потым, калі мы націсніце адрозніваецца Ўкладка, гэта проста змена якія сваё паказ. 

Так што, адпаведна, пазіцыянуе іх, змяняе HTML старонкі, так што ўкладка ток пазначаны як актыўны, так аказваецца па-іншаму і знешні выгляд сапраўды добры. 

Томас Реймерс: Так што ўсё было зроблена без нас пісаць практычна любыя CSS. Мы таксама бачым, загаловак у верхняй, якой колеру намі. Але фактычнае паставіўшы яго на верхняя частка старонкі і зрабіць гэта скрутак быў пачатковай загрузкі. А потым нават для іншай бібліятэкі - гэта не адзін мы казалі аб але Вы можаце Google, калі вы хочаце. Гэта называецца prettify.js. І гэта будзе Падсвятленне сінтаксісу кода для вас, выкарыстоўваючы як CSS і JavaScript. 

Апошняе, што мы хочам казаць пра перш, чым мы выпусціць вас з ў Свет паглядзець у бібліятэках, каб высветліць, як іх выкарыстоўваць і, спадзяюся, чытаць дакументацыю і знайсці тое, што вы Неабходнасць у тым, як знайсці бібліятэкі. Такім чынам, першы з'яўляецца мы проста будзе штурхаць Google. Адразу Google. 

Гэта літаральна тое, што мы робім, калі мы трэба нешта рабіць, мы Google. Ёсць бібліятэка JavaScript, што дазваляе мне кіраваць часам у карысны спосаб? Так што, калі я ведаю, што які-небудзь карыстальнік стварэння рахунку тут, і гэта бягучы час, як я магу вылічыць Розніца з што без таго, каб разлічыць яго самастойна? Так што гэта на самай справе звычайная справа, JavaScript бібліятэка часу. І вось мы, Moment.js-- адзін з самых папулярных. 

Калі нам патрэбна бібліятэка для маніпулявання нешта накшталт колеру, каб мець магчымасць генераваць кучу выпадковых кветак - магчыма, каб генераваць стыль ці нешта - мы маглі Google нешта накшталт JavaScript колер бібліятэка. І я ўпэўнены, што мы б ўсплывальнае акно з Тысяча і адна з іх. Вы заўсёды можаце прачытаць іх. 

Так большасць рэчаў - калі вы іх знойдзеце - збіраюцца быць размешчаны на адным з сайты, якія прымаюць код. Яны некалькі папулярныя з іх. Самы папулярны, па безумоўна, з'яўляецца github.com. І калі вы ідзяце ў GitHub гэта на самай справе дзе было арганізавана Нармалізаваць. Так што калі вы хочаце, каб вярнуцца да таго. Пакажыце ім, што. 

Майк Риццо: А што на самой справе, дзе гэта размяшчаецца таксама, калі вы заўважылі. 

Томас Реймерс: Так. Так што, калі вы ідзяце да Нармалізаваць і перайсці да GitHub. Былі гэта? 

Майк Риццо: гэтая маленькая котка рэч з'яўляецца сімвалам GitHub. 

Томас Реймерс: Ох. Так GitHub выкарыстоўвае метад, званы Git для захоўвання кода. Ці з'яўляецца вы не ведаеце, што гэта такое або гэта палохае вас, гэта нармальна. Вы не павінны ведаць, што Git з'яўляецца таму GitHub мае кнопку Загрузіць у правым ніжнім куце. 

Іншая карысная рэч, каб ведаць аб GitHub з'яўляецца большасць прадуктаў будзе чытаць мне. І калі яны не маюць вэб-сайт, чытаць мне будзе казаць пра тое, як вы ўсталяваць яго, як вы яго выкарыстоўваеце, тое, што ён робіць, і гэтак далей, і гэтак далей, і гэтак далей. Тое, што мы ў асноўным былі вас праз. 

Майк Риццо: Выхад Інтэрнэту. 

Томас Реймерс: Гэта нармальна. Апошнія дзве рэчы, якія мы хацелі казаць пра - мы казалі аб Git - з'яўляецца пошук і ліквідацыю няспраўнасцяў. А гэта не так актуальна для канчатковы прадукт, як гэта калі вы пакідаеце 50. І калі вы сутыкнецеся з прадуктамі рэалізацыі бібліятэкі або рэалізацыі Ваш уласны праект, вы будзеце ёсць пытанні ці вы будзем глядзець на вашы пытанні. 

Зноў жа, Google яго. Гэта літаральна тое, што мы робім. Гэта будзе гучаць недарэчна. Але літаральна, мы Google яго. І зноў жа, адным з першых рэчаў, вы будзеце, як правіла, працуюць у гэта stackoverflow.com, які з'яўляецца выдатным пытанне і адказ відовішча. 

Гэта выдатна і таму, што вы можаце размяшчаць на пытанні і шукаць адказы, але і таму, што ён ужо мае шмат папярэдне запоўненыя змесціва. Так звычайна, калі вы Google праграмавання пытанне на працягу першых пару хітоў вы, магчыма, ужо запусцілі ў яго падчас вашых праблемных мностваў. 

А потым, у апошні сапраўды кароткае рэч з'яўляецца JSFIDDLE, што, - сёння мы ў рабілі шмат працы з JavaScript HTML CSS. JSFIDDLE з'яўляецца вэб-дадатак, якое ў асноўным дазваляе прыняць ваш HTML, вашы JavaScript ўнізе злева, і ваш CSS ў правым верхнім куце. І то гэта можа стварыць хуткі рэндэр з яго і паглядзець, як ён ўзаемадзейнічае. Гэта вельмі карысна, калі людзі спрабуюць зрабіць доказ канцэпцыі, як гэта, як вы б зрабіць выпадальнае меню. Можа быць, хуткі раскрыць або любы іншы. 

Майк Риццо: Так што давайце ісці наперад і націсніце на гэтую. Невялікае заўвага - у той час як, перш, чым мы былі робяць на пстрычкай мышы. Аказваецца JCorey Карэя таксама мае ўбудаваны у апрацоўшчык падзей клік, што гэта выкарыстоўвае толькі таму, што гэта лічбы вы захоча зрабіць шмат рэчаў калі вы хочаце, каб націснуць нешта. 

Акрамя таго, ён таксама мае навядзенні. Але каб атрымаць поўны спектр тых, паглядзіце на JQuery дакументацыя і зрабіць гэта. Я зрабіў што-то дурное тут. 

Томас Реймерс: Так што я вельмі хутка Праграма прама тут, у якім гаворыцца, кнопка на пстрычкай мышы. Тады ў нас ёсць цыкл. Для я менш 404. Гэта проста будзе ўсплываў Гэтыя паведамленні. 

Майк Риццо: І тое, што было Код 404 стаяў у HTML? Ці памятае хто-небудзь? Не знойдзена, правільна. Хром таксама дадаў гэты акуратны рэч, дзе можна - 

Томас Реймерс: Таму што людзі, як Майк пачаў рабіць гэта шмат, і раздражняльныя карыстальнікаў, што дазваляе Вам бачыць інфармацыю. 

Майк Риццо: Так. 

Томас Реймерс: Ці ёсць у нас якія-небудзь пытанні пра гэта, пра JavaScript бібліятэкі, пошуку бібліятэк, або выглядае тое, што вэб-распрацоўкі як у рэальным свеце? Мы бяжым супраць часу. Так што я не ўпэўнены, што мы збіраемся паспець рэалізаваць калі гэта не вельмі хутка. Няўжо мы добра? 

Майк Риццо: Усё, што вы, хлопцы, хацелі б каб убачыць вельмі хутка ў, як, два хвілін або менш? 

Томас Реймерс: Усе мы можам ўдакладніць? Як напісаць у - 

АЎДЫТОРЫЯ: [неразборліва]? 

Майк Риццо: Так, так that's - 

Томас Реймерс: Вы можаце проста націснуць Кантрольна-U на сайце. 

Майк Риццо: О, я не ведаў, што. 

Томас Реймерс: Я думаю, так. Кантрольна-U. Так. 

Майк Риццо: О, так гэта тое, Код для сайта. Але калі вы сапраўды хочаце, каб загрузіць наш файлы і ўсё, ён размешчаны на github.com 

Томас Реймерс: скараціць маё імя - Томас Реймерс - слэш CS50 злучок семінар. 

Майк Риццо: А ці можна там ёсць усё. 

Томас Реймерс: Гэта тое, што GitHub выглядае, дарэчы. Такім чынам, яшчэ раз, калі вы бачыце з адкрытым зыходным кодам Праект, як правіла, яны будуць для чытання мяне там, што вы можаце прачытаць. І калі вярнуцца, вы заўважыце, што ў вас ёсць спампаваць ZIP, які будзе дазваляюць загружаць крыніца Код ўключыць прадукт у вашай ўласнай рэчы. 

Майк Риццо: Так, і калі мы проста націсніце на index.html сапраўды хутка - 

Томас Реймерс: Вы ўбачыце вось Зыходны код для нашага сайта. 

Майк Риццо: Акрамя таго, я забыўся націснуць правай раней з вялікім сталом ён уключаны, але ёсць таксама стол з chmods, што мы ўключаны як раз для вашай яснасці. Але калі мы вылучыце ўсе, аж да дно, мы фактычна не робяць вельмі шмат з JavaScript матэрыял наогул з гэтым. Гэта выключна ад усяго астатняе, што мы мелі. 

Так што дзякуй вам, хлопцы, што прыйшлі і слухаць. Мы спадзяемся, што гэта быў сапраўды папераджальны. Калі ў Вас паўсталі наяўнасць адпаведнай пытанні ці проста хочаце, каб гаварыць аб што яшчэ падабаецца тое, што іншыя цікавыя рэчы вы можаце зрабіць з JavaScript, мы будзем рады пагаварыць з табой. 

Томас Реймерс: Калі ў вас ёсць пытанне аб сваім праекце або, калі гэта можа быць стаўленне, мы, верагодна, застацца трохі пасля гэтага. Але акрамя гэтага, ёсць добры ўік-энд. 

Майк Риццо: Так, падабаецца. Ўбачымся. 

Томас Реймерс: Убачымся.