Tip:
Highlight text to annotate it
X
>> TOMAS Reimers: Здравейте, всички.
Моето име е Томас Reimers.
>> MIKE RIZZO: И аз съм Майк Ризо.
>> TOMAS Reimers: Ние сме две от CS50s TS.
И днес ние сме водещ на семинара на JavaScript и CSS за уеб приложения.
Ако искате да следват заедно, на връзка е точно там.
И искаш да го сложи на кратко компютър?
>> Ето я връзката.
Това е малък сайт, който има връзки с всички ресурси, ние ще бъдем
да ви посочи днес и също така има много полезна информация, написана от нас да
прочетете повече в дълбочина, когато се върнеш, и вие се опитвате да си спомните какво
точно е да кажем, това, което сте били говорите, и така нататък.
>> MIKE RIZZO: Добре.
Така че нека да започнем.
>> TOMAS Reimers: Значи вие искате да започнете?
OK.
>> MIKE RIZZO: Да.
Така че първо иска да започне с широк преглед за интернет и
типове файлове, когато проектиране на интернет страници.
Въпреки, че това представяне ние искаме да получите в в JavaScript много много
по-късно, ние искахме да започнем с просто, вид, като изглед от птичи поглед
от това, което един сайт е и как да мисля за проектиране на
сайт за началото.
>> Значи вие, момчета, в този момент - с него Петък вечер е - трябва да има
подали вашата CS50 финанси проблем поставя.
Надяваме се, че беше добър вкус на това, което уеб програмиране може да бъде.
Но тук ние искаме да, вид, даде ти друг вкус, както добре.
>> TOMAS Reimers: Така че просто да обобщим това, което се случва, когато въведете в URL за
вашия уеб браузър, че URL получава погледна в компютъра.
И на вашия компютър, свързан на друг компютър,
който е домакин на този сайт.
ОК, така че, когато отидете на google.com, ти си свързан към един от на Google
компютри, които има файлове за google.com.
>> След това пита за определен файл.
Така че, ако отидете -
Аз не знам -
example.com / index.html или / test.html, ти започваш да се питаш за
че определен файл.
А уеб сървър става да го върне към вас.
>> След това, след като мине през този файл -
веднъж сте компютър получава, че файл - това ще започне
за изграждане на уеб страница.
Така че сега тя е на HTML файл, която е нещо като
структура на уеб страницата.
HTML файл може да справки CSS файлове, които определят
стил на уеб страницата.
>> JavaScript файлове, който определя взаимодействие с уеб страницата.
Файловете с изображения, които са само на изображения.
И вероятно се свърже с други HTML файлове, които след това можете да посетите.
>> MIKE RIZZO: Добре, чудесно.
Така че вие имате всичко, може би, старателно настроили вашия локален хост
на вашата виртуална машина.
И това само, вид, е местната домейн, че вашият компютър е домакин само
за вас на свой собствен IP адрес.
>> Така че в рамките на това, тогава можете да добавите към него свои собствени уеб страници.
Искам да кажа, в CS50 финансите, трябва да имате добавят някои HTML страници, които са,
нещо, увито в PHP обвивка.
Но в крайна сметка, това, което вашите PHP страници се извежда е HTML.
>> Но мисля обратно към самото начало на PSET, ние трябваше да настроите
разрешенията за всичко, нали?
Така че това само по същество ни позволява да знаем , който може да чете, пише, и евентуално
изпълнява всеки от файловете.
Така че ние ще направим един бърз - хм?
>> TOMAS Reimers: Така че ние ще да се направи една бърза демонстрация.
Така че просто да ти напомня, когато свържете към компютър, на Google -
който -
и питам за даден файл, компютърът първо Необходимо е да се уверете, че сте упълномощен
действително да видите, че файл или прочетох, че подаде, защото не може просто да попитате
за всеки файл на този компютър, нали?
Това би било заплаха за сигурността.
>> Така файлове на системите, които използваме, като CS50 този уред, има три
общи хора, които могат да имат разрешения за нещо.
Първият е действителното собственик на споменатия файл.
Втората е групата, която файлът принадлежи.
Ние няма да се съсредоточи твърде много на това.
И последното нещо, което е, един вид, подобно на свят или като всеки друг, който е
не са специфични за този файл и не нямат никакви права на собственост върху него.
>> Така че, ако имаме собственик, група, и тогава свят.
И след това, за всяка от тези групи, те може да има една от следните три разрешения,
OK, или число, кратно на тях.
Можете да имате права за четене.
Можете да имате правилните разрешения.
И вие може да изпълни разрешения.
>> Така че от гледна точка на реалните типове файлове, прочетете разрешение е като да отидеш да прочетеш
на съдържанието на файла.
А правилният разрешение е писането да заяви файл.
An изпълни разрешение е изправена пред подаде като теб, когато стартирате един от
Вашите CS50 проекти.
>> Така че, когато си мислиш за файлове като, когато ние трябва да се чете на HTML
файл, който трябва да бъде свят четим, нали?
Предполага се, че и собственик иска да бъде в състояние да редактирате този файл.
Така собственикът ще трябва четат и пишат разрешения.
Те наистина не се нуждаят изпълни.
>> Group, отиваме да се лекува същото като на света за сега.
Така че те се нуждаят от права за четене.
Но те не се нуждаят запис или изпълни разрешения.
И сега, ако си мислим, обратно към бившия PSETs, което ние осъзнаваме, е този вид
прилича на двоичен, нали?
1 означава да.
0 за не.
И всъщност можем да преведем това за двукомпонентни.
>> Така 110 в двоичен ще бъде 6.
100 ще бъде 4.
Същото е и с свят.
Така че номера, който ще получите за на разрешения за това ще бъдат 644.
>> MIKE RIZZO: И ако мислите, че обратно на когато chmoded нещо, аз вярвам,
те дадоха в проблема настроите пример за това къде бихте могли да направите
нещо като коригирате 644 и след името на файла.
The 644 след това, сега можете да видите директно когато това идва от.
Така че, да се надяваме, че прави това малко по-ясно.
>> И тогава за вас човек яснота -
О, да, ето това е отново.
Така че 600 след това просто ще бъде пример дадохме тук, където собственикът има
чете и правилните разрешения, докато група и свят не разполагат с никакви разрешения
за достъп до файла.
>> TOMAS Reimers: И тогава имаме бърз списък на общи разрешения.
Така директории, които искате действително да CHMOD 711.
Quick настрана - за една директория да има изпълним разрешение означава да бъде в състояние
да отворите указателя.
Изображения, CSS, JavaScript, HTML нужди 644, защото, общо взето, светът
нужди права за четене.
>> И PHP, което вие сте видели Въпреки, че ние няма да се говори за това
строго обикновено chmoded с разрешение 600, защото това е тичам с
разрешенията на собственика.
Най-малко върху уреда.
>> MIKE RIZZO: Така че ако не го направя, специално уточни какъв тип файл
искате в действителност определянето тази презентация -
имахме проблем с това, защото не всичко е chmoded правилно -
ти започваш да се получи, вид, а Забранено грешка, че на сайта
не действително да има разрешение за достъп до каквото файл
искате да осъществите достъп.
И разбира се, че може да бъде фиксирана - като в определен проблем - чрез промяна
разрешения по подходящ начин.
>> TOMAS Reimers: И последният коментара за бързо местно развитие е - ние
отбележи, но ние просто исках да го върна пак -
ако питаш за сървър - така локалния хост, например, царевица, или нещо такова. -
и не укажете определен файл, файла, че компютърът ви ще
да попитам за се нарича index.html.
Или ако това не съществува, index.php.
>> Cool.
Така че това е просто една рекапитулация на всичко, да се надяваме, че ние сме обхванати в
раздел, и лекция, и досега в CS50.
И сега ние ще започнем да говорим за специално библиотеки.
JavaScript и CSS библиотеки за уеб приложения.
>> Така че един бърз причина защо трябва библиотеки е програмиране -
има много проблеми в програмиране, които пазят пръкват
отново и отново, и отново.
Може да забележите, че много сайтове нужда от способността да имат падащ
менюта, например, или се нуждаят от способността да имат много стандартен бутон
стил, който не може да бъде най-лесното нещо.
Сега, когато започнете да влязат в HTML, можете осъзнават, че бутоните може действително
изглежда наистина грозно, ако не прави нищо.
>> Така че много хора са писали нарича библиотеки.
И в този контекст, те са също наречен рамки.
Отиваме да се използва две взаимозаменяеми.
И какви са те е, че те са в основата предварително направени парчета код -
или CSS или JavaScript -
които отнемат много от Отбор имате в кодиране.
>> Така че те предварително да се определи един куп класове или предварително определяне на куп функции за
Случай JavaScript, който можете да се обадите по-късно.
И тогава можете да, нещо, да получите достъп до този код, без да
да се налага да правите нищо.
Един пример на библиотеката е CS50.H. Това беше библиотека дадохме да ви върне
в една седмица, които да ви е позволено да правя такива неща GetInt и GetString
без да се налага да пиша всеки код себе си.
>> MIKE RIZZO: Добре.
Така че тук, точно както ние трябваше да включва в нашите в файлове на различни
библиотеки, ние също така трябва да включва в нашата HTML файлове различни библиотеки.
Например, ако искаме да се включат специфична JavaScript библиотека тук,
може би, едно, че сме написали себе си, тъй като е домакин на местно ниво
наречени script.js, ние просто използвате тази нотация.
>> Така че ние имаме тип скрипт равни JavaScript източник равни
JavaScript.js.
И ако мислите, че обратно към вашия CS50 финансов проблем настроен, ако погледна в
header.php в папката с шаблони, би трябвало да сте виждали
някои от тях са включени.
Така че това първо един - скриптове -
е включително библиотека на JavaScript.
Включително CSS библиотека е малко по-различно.
>> Тук, вместо на скрипта Етикет трябва етикет на връзката.
И след това въведете текста, CSS е малко по-различна.
Не винаги е необходимо да включвате отн стил лист.
Но мисля, че това е, най-общо, добри практики.
>> И накрая, на Href, която ви вероятно видях във вашите ATAGs за свързване
в различни връзки само се уточнява, връзката от къде да намеря това.
Например, ако искаме да се свърже с различен библиотека - нека просто кажем -
, които са живели в styles.css.
И ние искахме да се свърже, че в това е домакин в интернет, ние ще копира това.
И след това го поставете в каквото имаме тук вместо.
>> TOMAS Reimers: Добре, да се надяваме ли момчета вече са запознати
как да се свържат с CSS.
Вие трябваше да направя, че на последният ти кафяв набор.
JavaScript, някои от вас може би има известен опит с.
Някои от вас не може.
>> Така че за сега, знам, че файл с JavaScript е много като файл CSS в
смисъл, че можете да се свържете с него или че можете да я включите вътрешно.
И това ви позволява да скрипт неща.
И ние ще ви преведе през Малко по-късно на JavaScript.
>> Така с помощта на библиотеката -
след като веднъж сте го включи, той е толкова просто като буквално се обадите на
функции или добавяне на имената на класовете към него.
Последното нещо, което искаме да говорим за по отношение на библиотека -
и това е по-скоро техническа бележка -
е лицензиране с отворен код.
Така че, когато се намерят тези реални библиотеки, може да се мисли за
Въпроси като всичко е наред, че аз съм просто използване на кода на някой друг, особено
защото това е нещо, което много ти да не се направи в този курс.
>> Така че в случай на отворен код за лицензиране, много разработчици -
след като съм писал библиотека, които си мислят, може да бъде
полезно за други хора -
ще го публикува в интернет и му се даде лиценз.
И лиценз основно се казва, аз съм тук даване на разрешение за друг
хората да използват тази част от софтуера със следния вид
уговорки.
>> Включили сме връзка към един добър сайт, за да ви помогне да разберете лицензите в
случай трябва тичам в тях.
Общи клаузи са неща, като Вие сте добре дошли да използват моята библиотека, така
стига да ми даде кредит.
Вие сте добре дошли да използват моята библиотека доколкото когато тя се разпада
не ме обвинявай.
Вие сте добре дошли да използват библиотеката ми толкова дълго време като не го използвате, за да правят пари
за себе си.
Това са видове от общ уговорки.
>> За тази CS50 окончателен проект, те не трябва да бъде супер уместен, защото
проектите, които вие използвате, са вероятно по-скоро, нещо, известен.
Но когато всъщност излезе в свят и започнете да използвате библиотеки, които
може или не може да се прилага както като някои от най-популярните от тях ние сме
ще се преживява.
Това е добре да бъде в състояние да се разбере на тези лицензии и да
разберем какво означават те.
И да се върна.
>> MIKE RIZZO: OK.
Така че сега се движи върху примери на действителното CSS.
В този момент досега, може да се не са срещнали това.
Но може би сте го срещнали в всекидневния си живот, където нещо
, който изглежда по един начин на един браузър Може да не изглежда по същия начин
начин в друг браузър.
>> Това се нарича браузър браузър съвместимост.
И все по-често това е все повече и по-голям проблем, особено като
браузъри вземат все повече и повече свободи да се изпълнят нещата, както те искат.
Така че да се преодолее това, там всъщност е голяма библиотека, наречена Normalize.CSS.
>> TOMAS Reimers: Включихме връзката.
В този момент, това е полезно, ако имате лаптопа си там
търси в сайта.
И ние даваме това да щракнете с десния сега, просто защото на финала CS50
проект всъщност ще ви помоля да го приложат
По същия начин и чрез браузъри.
>> Така че просто трябва да имате на гърба на вашия главата, това е една прекрасна библиотека
защото тя ще, нещо, стандартизира неща.
Във Firefox, нещо може да покаже като един пиксел на ляво.
И тогава Chrome може да реши, че всъщност какво имате предвид е 10 пиксела
наляво.
И вие искате да се стандартизира това.
Нормализиране всъщност ще направим един наистина добър работа на вземане сте сигурни, че вашия сайт
изглежда по същия начин в цяла браузъри.
>> MIKE RIZZO: Така че, ако искаме просто да кликнете върху линка наистина бързо и шоу
Вие какво прилича, вие може да го изтеглите от
гигантски бутона Свали.
Или аз Ви препоръчваме да прочетете повече за нея като кликнете върху този линк в долната
десен ъгъл.
>> TOMAS Reimers: И ако действително кликнете Read More точно там -
щракнете върху източника на GitHub -
вие всъщност ще видите отворен код лицензира LICENSE.md точно там.
И ще видите тук, е много популярен лиценз MIT.
Отново, ако сте прочели целия текст, вие ще бъдете в състояние да го намерите на сайта
ние съотнесени преди и да бъде в състояние да го разберем без да се налага да прочетете
чрез правния жаргон.
>> MIKE RIZZO: Добре, чудесно.
Така че това е Нормализиране.
Искахме да ви даде че наистина бързо.
О, имате ли един въпрос?
>> ПУБЛИКАТА: Така че, когато го изтеглите, вие просто следвайте този код, че те имат
под бутона за изтегляне?
>> TOMAS Reimers: Да, така когато изтеглите -
>> MIKE RIZZO: О, това е страхотна точка.
Така че въпросът е как да ние всъщност го изтеглите?
Така че, ако ние кликнете върху линка, ще видим, че тя действително се появи
изходния код.
Така че, за да направите това, което бихме могли да направите, е просто кликнете Save As.
Save As и че трябва отглеждане на даден файл.
И тогава можем да изберем да запишете него като normalize.CSS.
И тогава ще трябва да го свържете в -
>> TOMAS Reimers: Същият ли начина, по който свържат по някакъв друг файл.
И след като веднъж сте го свържете в, което е страхотно Нормализиране за това е всъщност ще
да се грижи за всички упорита работи само по себе си.
Това означава, че не е нужно да добавите всякакви класове.
>> Не е нужно да правите нищо странно.
Тя ще се нормализират, без да ви правиш нищо допълнително.
Да, трябва да го включите.
Google Chrome не отговаря.
>> Само един бърз настрана -
Забелязах, скочихме в това.
Останалата част от тази презентация е ще бъде един бърз преглед.
Едно изследване на библиотеки.
>> По принцип, това, което са те.
Това, което те правят.
Как те са полезни.
Как може да ги прилага.
Ако искате да започнете да търсите в тях, след заедно, и четене чрез
тях, бих силно насърчаваме това.
>> Като алтернатива, вие сте добре дошли също да започнете да ги изтеглите и включително
ги в очите, само за да видя какво те изглеждат, или това, което правят, ако имате
лаптопа си пред вас.
Ако не, вие сте добре дошли, за да се запази слушане, за да ни говори.
Ние ще продължим да говорим.
И ние имаме време, в края, надявам се ние всъщност ще получите в ви показвам
това, което някои от тези библиотеки изглеждам.
>> MIKE RIZZO: Cool.
Добре, така че сега нека поговорим Font за Awesome.
>> TOMAS Reimers: така Font Awesome е наистина хубаво място, особено за тези,
от нас, които са по-малко артистично талантлив.
Без да обръща внимание на име на шрифт Awesome, тя дава ви куп икони, които са
много полезен.
Така че много пъти ще приложи Икона Вие може да искате като хубава х така
че можете да затворите нещо.
>> Или може да искате някаква бутона Edit с молив рисунка като
всеки друг има.
И това е, когато научат, че изготвяне тези икони може да бъде
много досадно и трудно.
Font Awesome - ако действително отидете на сайта -
дава много икони под иконите в горната част.
Да, само на върха.
Тя ще ви даде много на безплатни икони.
>> Така че тук виждате имаме неща, като един звездичка, барове, мълния, а
календар, бъг, една книга, и така нататък.
Това може да бъде много полезно.
Начинът, по който да включва това е да включите буквално файла CSS.
И след като сте включени файла CSS, какво можете да направите, е да създадете
таг, наречен I. Тя satands за иконата с класа FA
престои Font Awesome.
И след това, каквото и клас искате.
>> Така че, ако аз исках икона на този плюс квадрат точно тук, аз ще дам
то на класа ФА.
И тогава FA тире плюс минус квадрат.
>> MIKE RIZZO: Cool, OK.
>> TOMAS Reimers: и след това, последното СГО библиотека искаме да се измъкне сам сме
Опитвам се да я държи на минимална CSS библиотеки, защото осъзнават
заглавието на тази презентация е JavaScript библиотеки.
Но ние решихме, че можем да се ви запознае с други библиотеки
докато ние говорим за библиотеки.
>> Това е Google Web Fonts.
И това, което Google Web Fonts ви позволява да направите е да добавите шрифтове към вашия сайт,
което е наистина лесен начин да го направите красива и да се разграничат си набор
от всички останали е, ако го има хубав шрифт или ако тя е хубава
колекция от шрифтове.
Google Web Fonts е хубаво за разлика от другите библиотеки в смисъл, че това е
наистина ръководи монтажа.
>> Така че, ако следвате връзката, това е google.com / шрифтове, аз вярвам.
Ако следвате това, вие може да изберете вашия шрифт.
Можете да изберете в ляво от дебелина, наклон, и така нататък.
И след това, след като веднъж сте избрали една, можете да кликнете бързо използване.
Точно там.
Долу вдясно на наказателното поле.
>> И след това, превъртете надолу.
На първо място, те ви дават СГО, че , което трябва да се свърже с него всъщност.
Това е точно там.
Можете просто да копирате и поставите, че инча
И хубаво нещо за този човек е всъщност не е необходимо дори да
изтеглите файла.
>> Какво, че ще ходи да се направи, е, че ще за връзка към версия на него Google.
Така че обратно на това, което трябва да значи това.
Това означава, че когато потребител изтегля файла -
изтегля вашата HTML страница - вашият HTML страница ще упоменете файл.
>> Така че след това, вашият компютър няма да види, О, това е хостван на google.com, а
отколкото на theirsite.com.
Пуснете ме попитате Google за този файл.
И след това, че ще ходи да се включат тя почти толкова, ако беше
част от вашия собствен сайт.
>> TOMAS Reimers: Cool.
И след като сте включили това, тогава да го включите във вашия CSS, той ви дава
действителната линия.
Така че сте задали семейството на шрифта имот равно на името на вашия шрифт.
>> MIKE RIZZO: OK.
Така че ние току-що завърши с CSS.
И някои от вас може да се мисли, добре, имахме някои CSS на CS50 Finance.
Но CSS библиотека беше фърмуера.
Ние всъщност включва Bootstrap малко по-късно при JavaScript, защото с
библиотеката Bootstrap CSS също идва с много JavaScript, че
Bootstrap или Twitter - който е направил Bootstrap -
използва, за да управлявате всичките си CSS.
>> TOMAS Reimers: Някой има ли въпроси досега около CSS като цяло?
Ние сме добри?
Awesome.
>> MIKE RIZZO: Awesome.
>> TOMAS Reimers: Така че се движат към JavaScript.
>> MIKE RIZZO: Така че ние искахме да поговорим Jquery за да започнем с това.
Някой чувал Jquery преди или да го използва?
Да, двойка?
Така че, ако просто се работи с родния JavaScript, вие ще откриете себе си
пишете много дълги селектори много.
Така че това, което прави, е да Jquery тя осигурява хубава обвивка за JavaScript
език, който ви позволява лесно да изберете и да манипулира различни елементи
в рамките на обектния модел на документ на уеб страница или на DOM, което мисля, че
вие сте чували в лекция в този момент.
>> TOMAS Reimers: Ако не сте чували за него или ако не сте гледали лекция
Все още, Document Object Model е основно как са представени нещата.
Така HTML вид прилича на дърво , когато всъщност го извади.
Имате HTML елемент на върха.
Имате главата и тялото.
>> И след това, в рамките на които можете имат всичко останало.
Това е по-DOM -
Document Object Model.
Така че един модел, който представлява обекти в документът е един лесен начин да се мисли
за това.
И един от най-голямо нещо за Jquery е това наистина прави обхождането
че и манипулират елементи в че изключително лесно.
>> Така лесно, в действителност, че по-голямата част на JavaScript библиотеки или ако не
мнозинство, гранд-голямата част от тях ще видите всъщност изискват Jquery така
че те може да се работи само защото, ако не сте имали Jquery, вие
ще губите много време, опитвайки се да разбера как да изберете определен
елементи и как да правят други неща.
А другото голямо нещо за Jquery е, че е крос браузър съвместими.
>> Така че не забравяйте, назад, когато казахме, че не всички браузъри приложат
нещата по същия начин?
Това е вярно дори и в JavaScript.
И един от най-великите неща за Jquery е, че той ще открие
браузър и разкриване на подходящ метод.
>> Така че, ако имате нужда, за да изберете елемент, Internet Explorer може да се каже, че сте
трябваше да направя по този начин.
Firefox може да се каже правилните начин е по този начин.
Jquery не се интересува.
Когато ви кажа Jquery за да изберете елемент ще разбера как е
Трябваше да го направи в рамките на браузъра потребител в момента е в, и след това направете
това по този начин.
>> MIKE RIZZO: Така че нека да не говорим за използването на JQuery малко.
Точно като PHP, JQuery има особена привързаност към знака за долар.
Така че вие ще откриете, че всяка Jquery -
и не всички,.
Понякога може да замени долара подпише с думата Jquery.
Но като цяло, просто защото това е по-кратък, когато се видим Jquery е
използва тя ще бъде с знака за долар.
>> Така че тук ние просто показва едно начало селектор за елемент от DOM.
Ето, ние имаме знака за долар, последвана от отворени скоби и след кавичките.
И в рамките на котировките отидете нашите селектори за различните елементи.
Точно като в CSS, ние трябваше да селектори да бъде в състояние да оформите различни елементи
в страницата.
Тези различни селектори превод точно в Jquery и JavaScript,
за по-голямата част.
>> Така че тук имаме една точка Foo.
Така че, ако си спомняте от лекция, точката просто означава класа.
Така че ни е да изберем елемент с класа Foo.
Така че, ако аз отида напред и да се отворят ни JavaScript конзола тук наистина бързо
просто го докаже, ако аз просто въведете знак за долар, ние виждаме, че това е някаква
функция, която идва.
И това е просто определя от JQuery.
>> TOMAS Reimers: За тези от вас, непозната, конзолата е инструмент,
в рамките на Chrome, която ви позволява да, По принцип, тече JavaScript относно
текущата страница.
Това ще намерите изключително полезно, когато вие всъщност отстраняване на грешки и
Трябва да бъде като това, което е на ток стойност на някаква глобална променлива или какво
е нещо друго?
Тя е нещо като GDB с изключение че всъщност можете да
манипулират елементи на страницата с то в много по-лесен начин.
А също и това не стане, в общи линии, проверете с теб, преди да прави нищо.
>> Така че, GDB може да бъде като, вие сте Наистина ли искате да изпълните следващата стъпка?
Конзолата е в реалния.
Така че, тъй като уеб страница се прави и правиш каквото и да прави, на
съвет също така работи заедно с него.
И можете да сложите вмени код в тази конзола, която ще
да се движат по страницата.
>> MIKE RIZZO: Така че да се влиза в конзолата, Предполагам, че трябва накратко
говорим как да направим това.
През последните проблеми, които могат да имат употребяван Chrome е инспектира елемент
функции или източник оглед страница -
и тези, които са достъпни само по право кликнете върху страницата или конкретна
елемент и прави или инспектира елемент или източник оглед страница.
Можем също така да влезете в JavaScript конзола директно от
избора инспектира елемент.
Така че след това можете просто да натиснете конзола върху най-дясната страна.
>> Като алтернатива може да се отиде по- до горния десен ъгъл,
които се отрязват от този екран, където тя има три хоризонтални ленти.
И отидете до инструменти и тогава JavaScript конзола
тук, където може да видите -
най-малко на Windows -
прекия път е Control Shift J. Така че след това ако искахме да изберете елемент
в рамките на тази страница, точно както показа преди, правим знака за долар отворени Перънс
и след това се цитира.
>> Едно интересно нещо е, общо взето, единични кавички и двойни кавички са
обменен.
Така че много хора просто използвайте единична кавички, защото те са по-бързо, за да въведете
от двойни кавички, защото не знаеш Трябва да задръжте натиснат клавиша Shift.
Така че аз просто ще го направя точно сега.
>> Така че аз искам да изберете нещо с клас.
Container, просто защото знам, че е нещо, което е на наша
уеб страница, точно сега.
И аз хит Enter.
И ние можем да видим, че тя го избрали.
Така че това показва, че връща този обект.
Така че това е основен избор.
Ако искаме наистина да го манипулира, вие ще трябва да се обадя нещо
на това, че селекцията, която ние ще влязат в по-късно.
>> TOMAS Reimers: Така че просто да погледнете този повече в дълбочина, това е по-различно
от извиквания на функции, които направихме в C. Името на функцията тук е
малко странно.
Това е знак за долар.
Това е просто име на функция.
Няма нищо специално за него.
>> Имаме отворени скоби.
След това, ние имаме един аргумент, който в този случай се случва да бъде низ,
които селектор за него.
И след това, ние разполагаме със затворен скобите.
Това е всичко.
>> Това не е, че много по-различно.
Въпреки, че не изглежда много странно.
И това може да бъде, един вид, спояващ точка за много хора.
>> MIKE RIZZO: Така че по подобен начин, ако искаме , за да изберете елемент, който има ID,
сега искаме да изберете от ID вместо клас.
Това би било нещо подобно, когато ние Просто направете рязък знак за самоличност.
Така че ни е да избираме тук всички елементи, които имат ID бар.
>> TOMAS Reimers: И това се разпростира.
Това CSS разширява.
Точно като в CSS, можете да изберете всички връзки, които имат Foo клас.
Ето, това е едно и също нещо.
>> Може да се направи a.foo, които биха изберете всички връзки с Foo клас.
Може да се направи остър бар, който би изберете връзката с лентата на ID и т.н.
на и така нататък.
Всеки избор на CSS е валиден Jquery селектор.
>> MIKE RIZZO: Да.
ОК, така че сега нека да получите в малко на манипулация, която можем да направим с
нашата Jquery.
Така Jquery има определен тип нотация, където ние просто използвайте
точка в края.
И вие можете да мислите за това като в C как имахме различни structs.
И за да отидат в тези structs, бихте използвате точка за да влязат в тях.
>> Това е, един вид, подобно нещо.
Само че сега имаме функции в рамките на тази селектор, който можем да наречем върху него.
Така че тук, на първия пример можете да видите, е селектор CSS.
И в общи линии, това, което прави, че тя е прилага първи елемент CSS на тази
нещо, което сте избрали -
този елемент, който сте избрали -
със стойността, която.
>> TOMAS Reimers: Значи един лесен превод на че би било, ако Jquery, общо взето,
Просто взех Foo.
И след това в CSS каза, оцвети в червено и близки.
Това е една и съща идея.
Какво се прави е, че е избран Foo всички елементи.
И тогава тя се прилага.
Нещо, цвета на имот е равна на червено.
>> MIKE RIZZO: По същия начин, ние също може да променя действителното съдържание на това, което е
показвайки на HTML на страницата, която е наистина страхотно, защото това означава, че вашият
уеб страници, сега могат да бъдат напълно динамични и не е нужно да бъде статичен
да отпечатате, като се използва PHP в самото начало на
страницата се зарежда.
Така че тук, ако искаме да се промени действителното HTML на страницата, Бихме сега
наричаме HTML функция, която след това просто вложки каквото и да уточняват в
този елемент, че сме избрали.
Така че тук ни е да изберем елемент с клас Foo и след това казвам, че е HTML
това е вече здравей свят.
>> TOMAS Reimers: И когато си мислиш за какво са полезни приложения на
това, тази CSS едно, първото нещо, което можете да започнете да си помисля е
от гледна точка на дори падащи менюта.
Можете да започнете да правите такива неща, когато потребителят витае над горната част
на спад надолу, вие искате да направите долната част видими.
Нали така?
>> Така че в CSS, ние имаме имоти да направи нещо видимо.
Неща като дисплей на дебелото черво никой ще го направи невидим.
Display блок ще го направи видими.
Или дори, ако искате да отидете по-просто, вие има неща като равни видимост
видима, и видимостта е равна скрит.
>> И вие може да започне да се изпълнят нещата, като падащи менюта полето
след като получи чрез идеята за това как може да ви разбера, когато това се отваря,
които ние ще се справим много кратко.
Но ние можем да започнем да виждаме приложения на това.
В подобен смисъл, ако ви се налага да опитате и прилагат, да речем, на чат
двигателя и искате да направите малко балонче излезе, когато нямаш
имам ново съобщение, след като се ново съобщение, можете да направите малко
балонче излезе чрез промяна на HTML кода на страницата, нали?
С добавянето на тази екстра балонче с допълнителен текст в там.
Да?
>> ПУБЛИКАТА: Значи вие ще вградите това в рамките на HTML код в нещо като
[Недоловим]?
>> MIKE RIZZO: Точно така.
Да, ние ще стигнем до това в малко.
Да, това е подобно на малко за PHP.
Не точно подобен.
>> Един добър разграничение да се направи, е това, което този всъщност редактиране когато редактирате
на страницата, защото тя няма да бъде редактиране на действителния файл, който се е
съхранява на сървъра, защото света Не трябва да има разрешение
да редактирате вашите файлове.
Това е просто да редактирате това, което е на страницата и това, което се появява в рамките на
браузъра.
Така че, ако ви се налага да презаредите страницата след това, казват, изтриване нещо, тъй като ние
виж можем да направим с премахване повикването, това нещо ще може да се появи отново.
>> TOMAS Reimers: Така че един от начините да се мисли за това е, ако аз съм вашия компютър и
Майк е, един вид, на сървъра.
Какво ще се случи е, че ще питам Mike, хей, може ли да има копие от
тази уеб страница?
И той ще ми даде копие от него.
>> Не, това не е най-оригиналното нещо.
Това е просто копие.
И след това ще бъде като, о, има JavaScript тук.
Ясно е, че трябва да редактирате страница, за да бъде по този начин.
И аз съм за редактиране на вашето копие.
>> Но това не е извършване на действителната копие.
И ако трябва да го попитам отново опресняване на страницата, -
Хей, мога ли да имам друг чисто копие -
той ще ми даде друга чисто копие.
И тогава, аз отивам да правя едно и също нещо като, о, това JS тук, която казва,
да редактирате тази.
И аз ще продължа да правя това.
>> MIKE RIZZO: Значи нещо наистина готин , които можете да правите с Jquery е
всъщност добавяне на различни типове на анимации към вашата страница.
Аз не знам дали някога сте виждали, където Вие се опитвате да запълване на формуляр
онлайн и не е нужно да попълните нещата правилно.
Така че малко нещо се плъзга надолу в горната и ви казва
не са направили това правилно.
Моля, опитайте отново.
И тогава, може би дори само се плъзга нагоре.
>> Оказа се, Jquery е построена през функции които правят всичко това
анимация наистина, наистина лесно.
Така че там е първото преливането от функция, която
можете да се обадите на нещо.
И това е начин за промяна на CSS на този елемент в анимиран начин.
Така че е необходимо каквото и елемент ти се обадя да го изчезнат нататък.
И след това, бавно се променя това е непрозрачност докато тя отива напълно прозрачна.
>> TOMAS Reimers: Другата популярна една се плъзга надолу, което ще направи
нещо се появи, като го плъзнете надолу.
Така че в случай на падащи менюта, отново, когато сме се научили как да се открие
когато това е било увисна над, можете просто да кажа това дъно
част се плъзга надолу сега.
И след това, тя ще се появи чрез плъзгане надолу.
>> MIKE RIZZO: И след това, ако просто трябва някакъв вид на анимация в предвид, че
Jquery не предоставят задължително.
Например, нека кажем, Jquery няма да ви осигури с пързалка
надолу и плъзнете нагоре.
Е, да речем, че исках да се плъзга нещо отляво или в от
правото вид като CS50 Главната страница прави винаги, когато
можете да отидете на нов панел.
След това вероятно ще се наложи да го въведе себе си с помощта на
анимирате функция в рамките на JQuery.
>> Така че по подобен начин, просто анимирате.
И тогава, в него тя отнема речник на различните стойности
че ти трябва да премине.
Така че тук, ако искахме да анимирате Фу елемент така, че неговата ширина или
разширява или договори до 80 пиксела, в зависимост от това, което в момента е то.
Ние просто ще мине, че като аргумента в него.
>> Анимиране също имаме някои други аргументи че бихте могли да го предадат, например,
скоростта на анимацията , който искате да я дам.
И за да направя това, аз просто ще кажа, бързо Google Jquery анимирате.
И след това, отглеждането на тази страница, можете да виж тя има един куп различни
свойства, които можете да го мине.
>> И аз ви насърчавам - всеки път, когато дойде на нещо, което не знаеш
знаят или просто искате да научите повече за специално метод, който можете да се обадите
за нещо -
просто го Google. Jquery е изключително добре документирана.
И често пъти има много примери, които те предлагат за вас.
Ако превъртете надолу -
път надолу -
че можем да използваме, както и.
>> Отново, когато разработчик всъщност отива през неприятности на писане на
библиотека, те обикновено искат някой, който да го използвам.
Така заедно ще да е документация.
И тази документация обикновено могат да бъдат намерена на страницата на проекта, който е
защо ви дадохме, че оригиналния сайт в началото, която ви свързва с
страници в проекта, така че да може да се види, че документация.
>> Обикновено, на страницата на проекта в случай от [недоловим], той ви каза на
Имената на класовете.
В случай на JavaScript, дава си името на функциите.
Между другото, ако се придвижите нагоре към върха, един бърз бележка страна на функции е
всеки път, когато те видя функция изпълнява като този с увреден
скоби в средата, това означава, че това имущество не е задължително.
Само на хедс-ъп.
Виждал съм много въпроси за това.
>> Така че тук можем да видим, че одушевен отнема имоти
като необходим аргумент.
И всичко останало, не е задължително.
Side бележка -
можете да мислите за това, сортиране на, като човека страници.
Man страниците са документация за C и за много други неща, както добре.
>> MIKE RIZZO: Така че ние сме се научили как да се промените различен CSS на страницата,
го анимирате, както и премахване добавите HTML.
Но един от наистина най-мощните неща за JavaScript
и особено Jquery -
това, което ви позволява да направите, е да се отговори на различни елементи, които се случват.
Например, тук имаме манипулатор на събитие.
И това просто означава, когато това събитие се случи, ние се справя в
определен начин.
>> Така че тук, родовият Jquery събитието манипулатор е точката на.
И след това, първото нещо, при условие, че е това събитие, то трябва да
да се слуша за.
Така че тук, това е едно щракване, че чакаме.
>> TOMAS Reimers: Алтернативно, имате на Hover, който е много популярен един.
Така че обратно към моя падащото меню идея.
Вие ще трябва най-горния един върху Hover.
И тогава може да промени това.
>> MIKE RIZZO: Точно така.
И тогава, когато това се случи, то просто изпълнява тази функция, която ние я дам
като аргумент и че тя предупреждава здравей или здрасти.
>> TOMAS Reimers: Така че в случай на JavaScript, това е място, което трябва да
се отстрани от C. Ние можем действително предприеме функции като аргументи.
И там са много наистина сложни начини да направите това.
Отиваме да се насърчи един начин, което е можете да определите
функционира точно там.
>> Така че, когато питаш за функция като параметър, вие сте основно само
ще определи функцията на място.
И начина, по който се дефинира функция в JavaScript вас е
буквално казват функция.
След това, обикновено, на името на функцията.
Но ние никога няма да позоваване тази функция отново.
Така че ние го оставя безименен.
>> Тогава скобите, след това къдрава скоби, а след това и в рамките на този код.
Така ние разбираме тази кутия да е малко объркващо.
Така че ние ви даваме общата форма на какъв манипулатор на събитие изглежда като
по-долу, което е на събития.
И тогава, вашия код вътре това.
>> MIKE RIZZO: Има ли някакви въпроси за това?
Това може да е малко объркващо първия път, когато го видя.
>> TOMAS Reimers: Вие действително искате да отваряне на файл и да им покажем някои
Jquery точно сега?
>> MIKE RIZZO: Да, нека да направим това.
OK.
>> TOMAS Reimers: Така че сега ние сме в уреда.
И това, което сме направили, е, че ние сме взели свобода на създаване едновременно index.html
файл, който свързва към файл с JavaScript.
И можем ли да се отвори -
Да.
Е, това прави две неща.
>> Първата е, го свързва с файла JavaScript.
И ние ще видим, че тук.
Ние виждаме, че в главата на HTML документ, в частност.
Така че ще се видим там, че ние, общо взето, да кажем, SRC,
което означава източник.
И това е URL.
>> Така че тук може да се каже, че съм включени Jquery.
И ние също сме включили скриптове.
Другият начин да включите JavaScript е че можете да включите един инлайн скрипт
тагове, тъй като ние имаме в дъното, където тя казва тип скрипт е текст JavaScript.
>> Така че ние Казваш, слушай, ние сме за да се включи скрипт.
И вида на този скрипт е JavaScript, който е вид на текст.
Много просто.
>> MIKE RIZZO: Така че това, вид, стига до Вашия въпрос за начина, по който да включва
JavaScript в нашите файлове, защото, когато ние е PHP, ние правим нещо подобно.
И след това, имаме нашите PHP функции - нека да кажем, запасите са в
нещо с това -
отива там.
Въпреки това, сега ние имаме таговете скрипт че ние го дам, които всъщност са
част от самия HTML, защото не е преструва бъдеш HTML файл като го
е в PHP, защото ако действително отидете в и погледнете в кода на страницата,
ще видите тези скриптови тагове там с JavaScript, свързана с
по това, че.
>> Така че след това, ако искаме да напишете някои JavaScript -
нека просто кажем, че искахме да променим тялото защото в момента аз нямам
всякакви други етикети, които аз наистина може да редактирате освен тялото.
Нека просто кажем, че аз исках да промяна на СГО за това.
Така че ние ще вървим напред и промяна цвета от него червено.
>> Така че аз запишете файла.
Нека да се върнем към нашата уеб страница, обновяване, и го прави автоматично
тъй като тя не изглежда като това чаках на всички, защото ние не слушахме
за дадено събитие или нещо подобно.
>> TOMAS Reimers: Така че, ако се върнем към това подаде по-специално - на HTML
Файл - какво ще , за да видите е, че ние имаме -
не забравяйте, че това е заредена, вид, в хронологичен ред.
Така че ние трябва първо главата. тя зарежда тези два файла.
След това отиваме на тялото.
И ние виждаме, здравей свят.
Така че ние направи здравей свят.
>> И тогава последното нещо, което имаме е имаме етикет скрипт.
Така че тя работи на маркера на скрипта, защото това е Не го казвам, за да чака нищо.
И това е най-основните начин да тече JavaScript.
>> С това каза, може да ви постави на скрипта тагнете в заглавната просто
да се покаже тази точка?
И тичам, че.
Ще забележите, че той не се променя цвета.
И това е един от проблемите на JavaScript е, че нещата са заредени
в хронологичен ред.
>> Така че в момента, в който този код тичаше, ние избрахме -
се върна -
етикет тяло.
Маркерът тялото все още не съществува, защото JavaScript е в съответствие с HTML.
Така че браузърът е като изберете тяло.
Има все още няма такова нещо.
Така че можем да пренебрегнем факта, че.
И ние продължаваме.
>> И тогава ние определяме таг тяло.
Но никога, че получава актуализирана.
Така че, когато сте прилагане на скрипт тагове, уверете се, че да поставят
след като тялото маркер.
Следващ слайд.
>> MIKE RIZZO: OK.
Така че ние се променили нещо.
Но тя не изглежда като тя реагира на ни на всички, защото тя просто вид
го е направил, веднага след като зареди страницата.
Така че сега, вместо да правиш това, защо не можем да добавите манипулатор на събитие.
>> Така че нека да направим нещо на тялото отново.
И нека да кажем, ние го правим нататък -
изпратете.
Ние ще добавим функция.
>> Промяна Нека: TOMAS Reimers това е цвят на червено отново.
Защо не?
>> Промяна Да, да: MIKE RIZZO своята "цвят на червено отново.
Добре.
Така че нека да се презарежда страницата.
ОК, ние виждаме -
както се очаква, той все още не се превърне в червено.
Но тогава можем да вървим напред и кликнете върху нея.
>> TOMAS Reimers: И тя не се превърне в червено.
>> MIKE RIZZO: И го прави се превърне в червено, както се очаква.
>> TOMAS Reimers: И ние можем да видим как можем да започнем да се изгради много основни
взаимодействие.
Други неща, които може да искате да направите, е, ако не искаме да се направи тялото
оцвети в червено, нека направим HTML фонов цвят червен.
Просто така, че е същият CSS.
>> И когато го променим, можем да видим това много драматичен ефект от промяна на
цяла страница.
Така че отново, ако сте изпълнение неща, можете да имате един компонент
чиято цел е да се кликне върху.
Да кажем, че един бутон Exit и целия друг компонент,
който има за цел да отговори.
Така че трябва да премахнете прозорец когато това се случи.
>> MIKE RIZZO: OK.
Само като пример -
ти не можеш да видиш това по-рано -
Аз просто ще ви покажа това, което изглежда Харесва ми, когато ние се скрие нещо.
Така че аз ще отида напред и да се плъзга нагоре.
>> TOMAS Reimers: Искате ли да опаковам, че в тип точка преди да направим това?
>> MIKE RIZZO: OK.
Да, защо не правим това само така можем да го изберете малко повече.
>> TOMAS Reimers: И нека му се даде клас.
>> MIKE RIZZO: Да.
ОК, така че нека да видим.
Вместо да изберете самото тяло сега, аз просто ще изберете всичко с
клас здравей, които ние тук Просто трябва едно нещо.
Така че ние не трябва да се се тревожи за това.
>> Така че аз ще го освежи.
Аз ще отида напред и кликнете върху нея.
И това, нещо, направих странно слайд до нещо, което не изглеждаше, че
привлекателна.
Като цяло, те изглеждат доста добре.
Предполагам, това - за някои причина - не.
Аз просто ще направи избледняват, така можете да погледнете това.
Много по-хубав.
>> И след това, ако се отвори JavaScript утеши отново и ние искаме да видим какво
тя изглежда като, когато ние го избледняват инча
Сега, аз просто се обадете избледнява върху него.
И тя избледнява обратно инча
>> По същия начин, ние всъщност може да мине аргумент да избледнява или изчезнат,
който е вид, скоростта на него.
Така че нека да вървим напред и да кажем, че искаме да отиде бавно избледнява инча
Така че аз предполагам, че все още изглежда доста бързо.
Но това е по-бавно, отколкото преди.
>> TOMAS Reimers: И ако искате да намерите повече за тези неща, отново,
просто отидете на документацията Jquery, които сме ви дали, и прочетете
през тях.
Те документират техните функции невероятно добре.
>> MIKE RIZZO: OK.
Така че предполагам, нека се върнем към това.
И ние можем да говорим за нашата последна страница.
Е, можем да завършим с Bootstrap.
И тогава ние ще го отворите за някои въпроси.
И ако вие имате някакви идеи, които искате да се опита да повърне и да видим
ако можем да ги прилагат с JavaScript бързо.
>> Така че наистина бързо за Bootstrap, които автоматично се включва в
последният ти проблем, посочен в папката CSS и действително свързано в
header.php.
Така бихте могли да сте добавили класове, които са дефинирани в Bootstrap към него.
И това щеше да автоматично стил съответно тези неща.
>> TOMAS Reimers: Така Bootstrap е много вълшебно нещо, разработена от хората
в Twitter.
И това, което е трябвало да направи, бе -
преди сайтове са наистина трудно да се направи изглежда добре, особено когато имахме
много общи компоненти.
Така че много от бутоните на Мрежата изглеждаше същото.
>> Много от текстови полета може да се направи, за да изглеждат по-добре от стандартния текст
поле вероятно знаете от наистина стари уеб сайтове или наистина лошо направени
уебсайтове, които просто изглеждат като буквален текстови полета без никаква форма на текст
сянка или всякакъв вид на хубав контур.
Така че това, което направих, беше Bootstrap го каза, добре, Имаме много общи стилове.
Защо не се направи един общ набор от CSS и общ набор от JavaScript, както
кладенец, който може да го оформите като е и което може да даде на хората неща, като капка
менюта, които може да даде на хората неща като modals.
>> Прехвърляне е това, което се появи през страницата всеки път, когато това е строго погледнато
нещо, което инхибира допълнително взаимодействие, докато не
взаимодейства с него.
Нещо като това е, вие сте сигурни, искате да изтриете това?
Вие наистина не може да направи нищо друго, докато не се каже да или не.
>> Отне всичко това и то го опаковани заедно и каза, ето ни и нас.
Хората вече могат да използват това.
И вие можете да го намерите над в getbootstrap.com.
Тя е включена автоматично в рамките на последният ти проблем настроен.
И вие сте повече от добре дошли да го използвате на своя окончателен проект.
А ако искате да се следват, че линк за да получите Bootstrap.
>> Вие ще видите тук, е Bootstrap CSS сайт.
Ще видите Bootstrap.
И ако превъртите надолу, ще видите как да го изтеглите, как да
да го инсталирате, и така нататък.
>> MIKE RIZZO: И вие може също така, Интересно е достатъчно, за да го персонализирате
е без значение какъв вид на теми , който искате.
Знам, че това е нещо, което направих за моя окончателния проект, когато взех класа
бе я персонализирате.
Една различна версия на Bootstrap че имаше различна цветова схема и
различни форми на някои различни неща.
Така че аз Ви препоръчваме да играете с това.
Това е нещо забавно да направя.
>> TOMAS Reimers: Търси в горната Отново, това е много подобен на шрифта
Страхотен сайт.
A много документация ще започне да изглежда подобно, когато сте
видял достатъчно от него.
Така че тук имаме СГО компонент на този.
И ще видите как тя може да оформите нещата.
Така че, ако кликнете върху таблици, например, веднага можете да направите
маса доста просто чрез добавяне на масата на клас към него.
>> Същите неща, за бутони.
Ако просто добавете клас BTN и BTN подразбиране или BTN първичен, можете
получите някой от тези бутони с тези предварително направени стилове.
И след това, ако търсите за нещо по-сложно, отколкото просто
Restyling какво w вече имате, над по В раздела JavaScript в горната WE
има един куп компоненти.
>> Така че тук имаме преходи, modals, падащите менюта, табове и пояснения.
A подсказка е това, което се появява под вашето мишката, когато мишката върху нещо.
Popovers, сигналите, копчета, сгъваема акордеони е това, което
те обикновено се наричат.
Въртележки, които флип чрез подобни изображения.
>> Така че тези, които са компоненти на Bootstrap.
Бих Ви препоръчваме да се силно отида да ги погледнем.
Има компонент JavaScript и CSS компонент.
Чувствайте се свободни да ги използвате както щете.
Ние няма да отидат прекалено много в тях защото ние се чувстваме документацията
е много добре направено.
И да.
Имаш ли някакви въпроси относно това?
>> MIKE RIZZO: Така като са наистина бързо страна, дизайнът на тази уеб страница, която
ние бързо се съберат за Това представяне е
всъщност извършва с помощта Bootstrap.
Както можете да видите, когато щракнете върху тези различни раздели, ние никога не сме всъщност
оставяйки този ток страница index.html.
Така че това, което имаме, е различни Divs в този index.html.
И тогава, когато ние щракнете върху друг в раздела, това е просто промяна на
които един, показващ.
>> Така че съответно ги позиционира, променя HTML кода на страницата, така че
текущия раздел е маркиран като активен, така изглежда по различен начин и външен вид
много хубаво.
>> TOMAS Reimers: Всичко това бе направено без да ни пишете почти всеки CSS.
Виждаме също с глава в горната, който цветовете са от нас.
Но действителната го пускат на горната част на страницата и вземане на
това превъртане е Bootstrap.
И тогава дори за друга библиотека - този не е една, но ние говорихме за един
можете да Гугъл, ако искате.
Това се нарича prettify.js.
И това ще синтаксис подчертае вашия код за вас, използвайки както CSS и JavaScript.
>> Последното нещо, което искаме да говорим за преди да те пусне навън в
свят, за да изглежда в библиотеките, за да разбера как да ги използват и да се надяваме,
прочетете документацията и да намерят това, което нужда, е как да намерите библиотеки.
Така че първото е, че ние сме просто ще наложи на Google.
Отиди Google.
>> Това е буквално това, което правим, когато сме Трябва да направим нещо е, че ние Google.
Има библиотека с JavaScript, че ми позволява да манипулира времето в
полезен начин?
Така че, ако знам, че някой друг потребител създаване сметка тук, и това е най-
текущото време, как мога да се изчисли с разлика, че без да се налага да
го изчисли сам?
Така че това всъщност е често срещано нещо, JavaScript библиотека време.
И тук ние Moment.js-- най-популярната едно.
>> Ако имаме нужда от библиотеката, за да се манипулира нещо като цвят, за да бъде в състояние да
генерира куп произволни цветове -
евентуално да генерира стил или нещо такова -
бихме могли Гугъл нещо подобно JavaScript библиотека цвят.
И аз съм сигурен, че ние ще се появи с хиляда и една от тях.
Вие сте добре дошли да се чете през тях.
>> Така че повечето неща - когато ги намерите - ще бъде домакин на един от
сайтове, които приемащата код.
Те са няколко популярни такива.
Най-популярните, от доколкото е github.com.
И ако отидете в GitHub това е всъщност където домакин беше Нормализиране.
Така че, ако искате да се върнем към това.
Покажи им, че.
>> MIKE RIZZO: И това е действително, когато това се хоства също, ако сте забелязали.
>> TOMAS Reimers: Да.
Така че, ако отидеш да се нормализира и отидете на GitHub.
Бяхте е това?
>> MIKE RIZZO: нещо, което малко котка е символ GitHub.
>> TOMAS Reimers: Oh.
Така GitHub използва метод, наречен Git до магазина код.
Е, че не знам какво е, или че това ви плаши, това е добре.
Не е нужно да се знае какво е Git защото GitHub има бутон Download
в долния десен ъгъл.
>> Другото полезно нещо да знаете за GitHub е повечето продукти
ще има да ми чете.
И ако те не разполагат с един сайт, на прочетете ми ще говорим за това как можете
да го инсталирате, как да го използвате, това, което го прави, и така нататък, и така нататък, и така нататък.
Това, което основно е Вие се разхождах из.
>> MIKE RIZZO: Отказването на Интернет.
>> TOMAS Reimers: Това е добре.
Последните две неща, които искахме да се говори за -
ние говорихме за Git -
е отстраняване на проблеми.
А това не е толкова от значение за на крайния продукт, както е
когато напускате 50.
И когато се сблъскате с продукти прилагане библиотеки или прилагане
свой собствен проект, вие ще имате въпроси или сте
Ще се търсят въпроси.
>> Отново, Google него.
Това е буквално това, което правим.
Това ще прозвучи глупаво.
Но буквално, ние го Google.
И отново, едно от първите неща, обикновено ще тичам в е
stackoverflow.com, което е прекрасно въпроси и отговори поглед.
>> Това е чудесно, защото както можете публикувате въпроси и да търси
отговори, но също така и защото вече има много
предварително населена съдържание там.
Така че обикновено, когато в Гугъл за програмиране въпрос в рамките на първата
Няколко удари може би вече съм тичал в него по време на проблемните комплекти.
>> И след това, последното нещо, което наистина кратко е JSFIDDLE, което е - днес ние имаме
били прави много работа с JavaScript HTML CSS.
JSFIDDLE е уеб приложение, което по същество ви позволява да вземете HTML, ВАШЕ
JavaScript долу в ляво, и Вашата CSS горе в дясно.
И след това тя може да създаде бързо направи от нея и да видим как тя си взаимодейства.
Това е много полезно, когато хората се опитват да се направи доказателство за концепцията като
това е как бихте направи падащото меню.
Може би един бърз откриеш или нещо такова.
>> MIKE RIZZO: Така че нека да отидем напред и кликнете върху тази.
Един бърз бележка -
има предвид, че преди бяхме правене на кликване.
Оказа се, JCorey Корея също така има вграден Кликнете манипулатор на събитие, че то
използва само защото той присъства сте ще искате да направите много неща,
когато искате да щракнете върху нещо.
>> По същия начин, той също има висене.
Но за да получите пълния обхват на тези, погледнете Jquery
документация и да го направя.
Направих нещо глупаво тук.
>> TOMAS Reimers: Така че аз имам наистина бързо програма точно тук, в която се казва
бутон на мишката.
Тогава имаме за контур.
Защото е по-малко от 404.
Тя просто ще изскочи тези алармени съобщения.
>> MIKE RIZZO: И каква е била код 404 се изправи в HTML?
Дали си спомня някой?
Не е установено, нали.
Chrome също така добави, този чист нещо, където можете да -
>> TOMAS Reimers: Защото хората като Майк започна да прави това много и
досадни потребители, което позволява можете да видите информация.
>> MIKE RIZZO: Да.
>> TOMAS Reimers: Имаме ли някакви въпроси за това, за JavaScript
библиотеки, намиране на библиотеки, или външност какво уеб програмиране
както в реалния свят?
Нямаме против път.
Така че аз не съм сигурен, че ние ще за да имат време да се приложат
освен ако това е наистина бърз.
Добри ли сме?
>> MIKE RIZZO: Всичко, което момчетата биха искали за да видите наистина бързо в нещо като две
минути или по-малко?
>> TOMAS Reimers: нещо ние можем да се изясни?
Как да пиша в -
>> ПУБЛИКАТА: [недоловим]?
>> MIKE RIZZO: Да, така че това е. -
>> TOMAS Reimers: Можете просто да удари Control-U на сайта.
>> MIKE RIZZO: О, не знаех това.
>> TOMAS Reimers: Мисля, че да.
Control-U. Да.
>> MIKE RIZZO: О, така че е най- код за сайта.
Но ако наистина искате да изтеглите нашия файлове и всичко, тя се хоства
на github.com
>> TOMAS Reimers: наклонена черта името ми -
Tomas Reimers - наклонена черта CS50 тире семинар.
>> MIKE RIZZO: И вие можете да намерите всичко, което има.
>> TOMAS Reimers: Това е, което GitHub Изглежда, между другото.
Така че отново, когато се видим с отворен код проект, обикновено, те ще бъдат за четене
ми там, че можете да прочетете.
И ако се върнете, вие ще забележите, че имате свали ципа, която ще
ви позволи да изтеглите източник код включва
продукт във вашата собствена нещо.
>> MIKE RIZZO: Да, и ако ние трябва само да кликнете върху index.html наистина бързо -
>> TOMAS Reimers: Вие ще видите тук е изходния код за нашия уебсайт.
>> MIKE RIZZO: Също така, аз забравих да бутнете НАДЯСНО преди с голямата маса го
включени, но има и една маса на chmods, че ние, включени
само за вашата яснота.
Но ако ние преминете целия път надолу до дъно, ние всъщност не направи много
много с JavaScript неща на всички с това.
Това е изключително от всичко друго, което имахме.
>> Така че ви благодаря, че дойдохте момчета и слушане.
Надяваме се, че това е наистина от полза.
Ако имате JavaScript свързаното въпроси или просто искате да се говори за
какво друго харесва това, което други готини неща можете да направите с JavaScript, ще се радваме
да говоря с теб.
>> TOMAS Reimers: Ако имате въпрос за вашия проект или, ако това може да бъде
уместно, ние най-вероятно ще се придържаме около малко след това.
Но освен това, има Приятен уикенд.
>> MIKE RIZZO: Да, да се насладите.
Ще се видим.
>> TOMAS Reimers: Ще се видим.