ALLISON BUCHHOLTZ-AU: Добре всеки.
Добре дошли отново в точка.
За нас е предпоследната точка.
Това е толкова тъжно.
Аз не знам какво ще правя без да те видя момчета всеки понеделник.
Предполагам, че ние трябва да just-- просто може би бихме могли да
срещнем тук и да вечеря или нещо подобно.
Не знам.
Ще донесе храна, вместо.
Ние просто ще си поговорим.
Но да, следващата седмица ще ни е последната точка.
>> На тази бележка, че имате викторина следващата седмица.
Знам, че съм забравил да направя всичко, като, две седмица предварително известие миналата седмица,
но се надявам вие знаеше, че това щеше да дойде.
Надяваме се това е един от последните, midterms за вас, момчета за семестъра.
Но това ще покрие всички материал, който сме преминали над.
Така че това не е като може просто да забравите около четири вериги или променливи.
Защото ние научихме тези в началото,
тези, които са очевидно честна игра за вашия тест.
>> Това ще бъде в същия формат, същата дължина, така че вече са свикнали с нея.
Там ще бъде кодиране с проблеми на ръцете,
може би някои вярно невярна, може би някои кратък отговор.
Така че трябва да бъде запознат с формата,
особено ако вземете Тестовете на практика.
Но както казах тук, това е кумулативни, но ние определено сме
ще бъде с акцент върху неща от шестата седмица напред.
Така че, ние сме най-вероятно не става да ви попитам за колко байта
са във всеки тип или тези различни неща,
но ние вероятно ще бъде Интересува се от неща като свързани списъци,
или различни структури от данни, или различни алгоритми
че си говорихме.
Така че се уверете, че сте наистина нагоре по тези, и ако
нужда от каквито и да било средства, тук е много ресурси.
Аз просто ви даде вид на бърз списък там.
>> Следващата седмица ще бъде викторина преглед през това време.
Така че, ако имате някакви въпроси или конкретни теми,
специфични неща в анкетата, че искате да разясни, моля
ги изпрати на мен преди време за да мога да вид се подготвят някои материали за това.
И в допълнение към това преглед раздел ще
да се поддържа курсът-широк преглед както направихме миналия път.
И това ще бъде направено от същите хора.
Аз не знам дали това го прави по-добре или по-лошо,
но то се случва да бъда себе си, Хана, Davan и Гейб отново.
Така че, ако искате да се види всички ни закачки помежду си
и ви преведе през викторина преглед, трябва непременно да
се стигне до това следващия понеделник също.
Така че ще трябва просто заседнала понеделник опаковани на преглед викторина, която е добра
защото тогава ще трябва вторник да обработва чрез всичко.
>> Но определено направи проверите на тези ресурси.
Study.csv.net е далеч, I мисля, един от най-полезните,
най-вече защото тя има много примерен код,
той има цялата власт звената за с всички бележки на него,
които са наистина това, което направи най- на моя отдел материали от.
Ако има нещо в предишния секции, които може и да съм изпратени
че не може да има намерила, просто ми кажи.
Като примерен код от миналата седмица, ако някой не се получи, че,
просто ми пишете или да дойде да ми говориш, и аз ще се уверите, че получавате това.
>> Така че с това, днес ние ще да се говори за JavaScript.
Така че тук ние Tommy, кой съм просто да си поговорим снощи.
Обичам Томи.
JavaScript е любимата му език, както казва той тук.
Те ще се опитам да ви кажа, че това е не най-добрите, и те ще бъдат наред.
Така че Томи е господар на JavaScript.
Аз не съм съвсем по негово ниво, но аз бях като,
"Томи, как мога да науча тези деца джава? "
Така че аз имам някои съвети, така че се надяваме, че се получи.
>> Така че няколко неща, за да знаете е, че JavaScript е клиент скриптове от страна на
език, така че PHP е нещо че смята повече от страна на сървъра,
тя се качите на сървъра, съставен и се изпълнява там.
Това се изпълнява на собствения си машина.
OK?
Така че зареждате някои JavaScript страница, и да го изпълнява на вашата машина.
Синтаксис е много подобен на C и PHP.
Отиваме да мине през Някои примери на JavaScript,
и ти започваш да се види, че Така ние говорим за променливи, дръжки,
и условията са много сходни.
OK?
Фактът, че те са толкова сходни, е Вероятно ще се спъне някои от вас
нагоре, а в някои случаи, просто защото ще се включи малко C
където не трябва да има.
Може би се опитвате и напишете нещо когато той не трябва да бъде въведен.
>> И за това, едно нещо, за да знам е, че JavaScript
е динамично въвели език, както и PHP.
Така че, ако вие си спомнят от точка миналата седмица,
когато бяхме вид правиш нашата PHP интензивен курс,
видяхме как низ човек може да бъде се превърна в едно цяло число един, и така нататък.
Видът на вашите променливи се определя по време на изпълнение,
така че те могат да се променят с течение хода на програмата,
и по същия начин, че ние никога не Наистина декларира видове за PHP променливи,
ние ще се прави същото нещо тук, където не сме
контролиране на видове ни променливи, така да се каже, както правим в C.
>> И тогава едно нещо че е много готино е
че можете да грешка проверява чрез конзолата,
с тази велика функция console.log, които
ви позволява да отпечатате различно променливи или предмети, които ние ще
говорим.
Също като миналата седмица, когато бях като: "използвайте тази функция," с сметище
от вашия pset това е функция искате да използвате, console.log.
Бях толкова изненадан колко студенти в работно време
не знам за функцията на сметището.
И аз бях като, "момчета, това ще направи живота ви много по-лесно. "
>> Добре, така че е вид Просто кратко нещо, както винаги,
имаме примери.
Знам, че вие, момчета обичат тези.
Така че ето един пример за много проста JavaScript файл тук.
Така че това е просто ще създадем този поп-нагоре, който казва,
"Hello World", когато влезете в страницата, но нека
опитам да минеш през това малко.
Така че очевидно това е просто както обикновена index.html.
Така че, просто нормална нашия шаблон тук, и ние имаме HTML, ние имаме нашата глава,
и точно като с CSS, как ние включени някои извън файл, нали?
В момента има някакъв вид скрипт текст, който е JavaScript.
А източникът е hello.js, който е тук.
Това е цялата преписка на hello.js.
И тогава ние имаме някои заглавие и някой орган HTML
че не ми пука за.
>> Какво се случва, е, когато се зареди страницата, той автоматично изпълнява този скрипт.
OK?
Така че JavaScript ще изпълнява автоматично.
Така че това, което той ще направи, че ще ходи незабавно да отида и да го изпълни.
И това ще ви кажа, "предупреждение.
Здравей свят. "
Кои сигнал е функцията, която всъщност генерира това поле.
OK?
Така че това е вид на всички обхванат.
Няма нищо допълнително имахме да направя, освен просто предупреждение,
и след това каквото искахме в рамките на нашата кутия Alert.
OK?
Така че това е просто супер проста пример за това какво може да направи JavaScript.
>> Един от наистина страхотно неща, както ще видим,
е, че JavaScript ти позволява да манипулират своите уеб страници,
без да се налага ги презареди всеки път.
Така че, ако want-- например, ако Вие кръжи над нещо,
ако вие някога да имат виждал подобно ленти с менюта,
или когато поставите мишката върху тема, ще се появи падащото меню,
че е така, защото на JavaScript.
OK?
Така че не сте се презарежда цялата страница, за да се получи това меню, за да се покаже,
вие сте просто търсят някаква специфична действия, които потребителят е предприел,
които се наричат ​​събития, които ние ще се заемем в, и като видиш, че ти кажа,
"OK, редактирате нещо на този страница и да я направи да изглежда различно,
но само редактирате тези конкретни неща.
Не се презарежда цялата работа. "
Така че тя всъщност е много по-хубав, и не е нужно да се презареди страниците си,
и това е наистина страхотно.
>> Така декларации на променливи, за да можете да вид видим,
Сложих на върха тук, хлабаво написали.
Така че това е много подобен на PHP.
Ние не трябва да се каже JavaScript какъв тип сме
Очакваме всеки един от тези променливи, за да бъде.
Те могат да бъдат такива, каквито видове искаме.
Така че можете да забележите в този случай, ние заявяваме ги много просто, просто с "Var"
и след това, каквото си искаме нашето име на променлива да бъде.
Едно нещо е да се отбележи, е, че когато се сложи Var пред името на променливата,
то на местно ниво тя Скоупс.
OK?
Това е напълно разумно за вас напълно да изтриете само Вар
и просто трябва ите равнява CS50, и че ще бъде само една глобална променлива.
OK?
Така че можете да го инициализира и в двете посоки, Просто зависи от това как го искате.
Така че, ако инициализиране то в рамките на една функция,
и искате тази променлива да останете с обхват в рамките на тази функция,
започваш да искаш да направиш нещо като Var името на променливата,
в сравнение ако го искате в световен мащаб с обхват, можете
може просто да направи името на променливата и след това
каквото искате го определя като равна на.
OK?
>> Това е готино нещо тук, защото, ако забележите нашата променлива
б започва като истина.
И това, което тази does-- може някой да ми каже какво прави това?
Така че ние имаме някакъв сигнал.
Какво бихте написали на б да бъде в началото?
Публика: Булева.
ALLISON BUCHHOLTZ-AU: Булева.
Право.
И тогава ние превъзложите б до този низ, нали?
Така че след това тук, какъв тип б бъде?
Тя ще бъде низ, нали?
Така че това, което е важно да се предизвестие е, че в C, ние
почти никога не може да се направи нещо подобно.
Ние ще трябва да има променлива, хвърли го като нещо друго,
може би се направят някои функция с две Аз, отидете от такса за цяло число.
Но ако забележите тук, б много лесно се променя написали.
>> Публика: Изчакайте, така че може просто да бъде като "направи б цяло число?"
>> ALLISON BUCHHOLTZ-AU: Да.
Можете просто да превъзложите б до цяло число.
>> Публика: Наистина ли?
>> ALLISON BUCHHOLTZ-AU: Да.
И след това ще бъде едно цяло число.
Така че вашите променливи могат да се променят с течение хода на програмата също.
Те не са строго написали.
Тя е много хлабаво написали.
OK?
По принцип си променливи могат да правят каквото те искат, тъй като ние вид видя с PHP.
Те могат да се направят някои луди неща, така че това е важно да бъде доста внимателен.
Името на вашия променливи добре.
Ако не, направете всичко изведнъж започваш да бъде като,
"Чакайте, аз мислех, че това е низ, а сега е едно цяло число,
и аз не съм много сигурен какво става тук. "
Така че това е само един прост пример за показва как една променлива може лесно
променят вида си през хода на програмата.
>> OK.
Така трябва да изглежда Супер, супер запознати.
Така че това са нашите линии в JavaScript.
Те са точно същите, с изключение на вместо четири междинно съединение I е равно на нула,
бихме могли просто да се каже Var I е равен на нула.
И тогава бихме могли да имаме същия сортиране на състояние, същото нещо като актуализация,
Аз плюс плюс работи добре.
Така четири крака са едни и същи, догдето са едни и същи,
и правим докато още са абсолютно същите.
Същото нещо общо формат.
Забелязваме, четири, скоби, скоби, това е все едно.
Също така ще има и запетаи когато стигнем до примерен код.
Ще видите, че е доста почти същата като в.
>> За декларации функция, отново, много сходни.
В момента има някои функции, които просто казва, че това е функция, и след това
Името на нашия функция, и входовете.
И отново, ако забележите, ние нямам видове тук и да било.
Нали така?
Нямаме нищо споменаваме, че те Трябва да бъдат целочислени или двойни, или поплавъци.
Те биха могли да бъдат каквото си искат.
Важното е да забележи, че ние трябва да се напише функция предварително
да споделите с JavaScript знаем, че това е действително функция.
>> Така че това е просто някакъв прост сбор функция, която връща х или у,
и след това, което е също готино е, че всъщност можете да
зададете функция на променлива.
Така че в този случай, сума сега и е функция, която всъщност прави сума.
Така че, ако забележите тук, ние имаме функцията, името на функцията, входове.
Нали така?
Тук ние просто трябва функция и входове.
Така че това се нарича анонимен функция.
И това е нещо, което трябва да бъде ново за повечето от вас, момчета, ако не всички от вас.
Така че основно това, което, че средства е, че ние не правим
Трябва да име на нашата функция в този случай.
Ние можем само да кажа, "OK, аз отивам да имат тази функция, която изпълнява, тук
са нейните входове, и ето какво ще прави. "
И най-вече, когато сте възлагане функция на някои променлива
че ти започваш да се манипулира, Не е задължително
Трябва да го наречете, защото започваш да се позовава
до него от тази променлива Името не, от каквото
функцията е действително нарича.
OK?
>> Така че, ако ние виждаме тук, ние има някаква променлива сума сега
че е равна на сума от три и пет.
И ние ще се получи това.
И това само би има някакъв сигнал, три плюс пет е равен на броя.
Това плюс просто ще се слеят каквото и нашият отговор беше нащрек низа.
Също така хладно, плюс може да се съединяват низове.
>> За JavaScript, като с PHP, HTML, CSS и както казахме,
много от него ние сме вид, като колелата на обучение извън тук
и вие имате много ноу как наистина да разбере тези неща.
Те са малко по-различно, но те не са толкова чуждестранна
и че не можеш да Гугъл неща или ги търсите онлайн с W3 училища.
И ние наистина очакваме Ви момчета да, вид, експеримент
и да научите по своему.
Така че, знам, че това може да изглежда малко по-малко задълбочено, отколкото някои от гр неща
което правим, но това всъщност си има причина.
Но се надяваме, че това не е твърде различно, и това не е поразителен.
>> Така масиви в JavaScript, отново много, много подобна.
Нали така?
Ние имаме някои променлива масив това е равно на празни скоби,
И това е само празен масив.
Това често се нарича буквалния масив нотация.
Това е само едно нещо, ние го наричаме.
Ако видим масив двама тук, ние имаме някои буквалния масив, който има три елемента,
нали?
И тогава ние имаме някои Var третия елемент, който е
някои променливи, че е просто Ще остана до този низ, JS.
>> Елементите, добри да забележите, са разделени със запетаи,
точно както бихме очаквали.
И вие можете да получите достъп до тях, както направихме в C, с този индекс нотация, нали?
Така че се различава от PHP Сега, ние се връщаме
да просто вид позовавайки да нещата с индекса.
Точно като C, тя също е индекс нула.
Имам чувството, че това ще бъде наистина жестока ако те внезапно JavaScript една
индекс, и трябваше да напълно преосмислим начина, по който мислим за масиви.
>> Едно готино нещо е, че вместо се налага да do-- ако някога
Исках дължината на масив, Може би вие превъртате през него
докато не се намери някаква цел, или просто щеше да знае какво е то.
Защото JavaScript е много насипно състояние в по- начини от просто вид, както виждаме тук,
ние можем просто да направим този масив по-голяма, защото ние решаваме да.
Ако забележим масив три има три неща, за да започнат,
но след това изведнъж, ние сме като "О, шегувам се.
Ние всъщност ще да го направи 101 неща. "
Така че, ако някога искате да знаете действителната дължина на масива,
можете да го направите по този начин.
И ние ще видим много на тази бройна система в примери,
но с JavaScript това е типично каквото
обект, който говориш дот без значение какъв вид на функция
искате да се приложи към него.
OK?
>> Така че в този случай, ни обект е масив две,
и ние казваме, че искаме дължина от масив две.
Така че това само плати като дължина на това.
И това ще се върне вашата дължина.
Също нещо да се отбележи, е, че ако забележите нашите редици,
за разлика от C, те не разполагат с да бъде от един и същи тип.
Това е много повече като PHP.
JavaScript е основно просто като тази интересна обявявам на C и PHP.
Така че ние ще се заемем в това.
За сега, нека просто да приемем, че си масиви са основно
като C масиви, в които те са нула индексира.
ОК, така, че е всичко.
Можете също така просто да разширите масив за каквото и индекс, който искате.
Отчитайки, че това вероятно ще SEG нарушение от вас или да ви даде някаква грешка,
JavaScript е като, "Не, всичко е наред.
Имам това.
Ние просто ще отиде направо където искате да. "
>> ОК, така че обектите са много важни.
Вие, момчета, ще използват много от тях в P комплект, ако си спомням правилно.
Така че това, което те са подобни в С са structs.
Така че можете да мислите about-- когато отиваме на пример полето
след това мисля, че ще направи много повече sense--
но ние основно се използва обекти за организира разбира информацията за нея.
Когато говорихме за structs в C, ние често
говорим за един студент, който имаше някакво име, ID, къща, нали знаеш, концентрация.
И това е вид на едно и също нещо че ние използваме обекти за тук.
Това е просто, да се организира подобна информация.
>> Можете също да се мисли за тях като по- подобно на асоциативен масив в PHP.
Така че това ще бъде вид на нещо, където имаме някои ключ с някаква стойност,
много подобен на PHP.
Така че можете да се инициализира някои празен обект, както виждаме тук,
само с фигурни скоби.
Така масиви са квадратни скоби.
Празни обекти са големи скоби.
Добър разграничение да има.
И това са само две различни начини за задаване свойства.
Така че това е един вид много повече от един начин, че
е подобен на PHP, в нашия асоциативни масиви, спрямо нашите основни,
и нашата стойност, като има предвид, това is-- ви ще
виж това много повече в JavaScript.
Това обикновено е по Конвенцията.
И по същия начин, по който сме го масив две точки дължина, това се казва,
"Добре, дай ми тая атрибут на този обект. "
Нали така?
Така че по същия начин, това е като, "дай ми дължината атрибут на масив две, "
това се казва, "да ми даде някаква собственост на нашата празна обект. "
Или в този случай, ние сме определяйки някои стойност тук.
Но вие също може да го по този начин достъп.
>> И тогава тук това е просто показва две различни сигнали.
Така че това ще покаже на сигналите ще бъде точно същото,
това е само за два различни начина за достъп до елемента, които искаме.
Това прави ли смисъл за всички?
Имам чувството, че това Вероятно има повече смисъл,
Просто защото сме излиза на PHP.
Но, както го правим повече примери, това е буквално точно същото.
Много е просто промяна в синтаксиса.
>> ОК, така примери.
Обичам примери.
Така че тук е някаква CS50 променлива, която е обект,
и ние съхраняваме всичко това информация за него.
Така че ние имаме разбира се, инструктор, TFS, psets, и залепени.
Така че ние забелязваме, те са почти всички от различни видове.
Нали така?
Така обекти могат да съхраняват атрибути на различните видове.
Можем да мислим за this-- това е много подобна на нашата асоциативен масив в PHP.
Така ключ, стойност, ключ, стойност, ключ, стойност, така нататък и така нататък.
Какво е интересно, по същия начин че можем да имаме масиви в масиви,
ние също може да има обекти в рамките обекти, или редици в обекти.
Вие никога не сте наистина ограничава до само един един от нещата.
Ние може да получи много Inceptionesque, просто продължавай в заешката дупка там.
>> Така че, ако ние забелязваме, ние има някои разбира, че
е низ, инструктор, който е низ, и масив, пад, и Булева.
Така че всички тези различни неща.
>> Добре, така, ние имаме още един.
Така че в този случай, ние имаме масив от обекти.
Така че просто искал обект може да имате тази възможност в нея.
Можем също така да имат набор от предмети.
Това може да бъде полезно да се мисля за подобно на вид
от начина, по който имаше хеш маса, имахме масив
на всички тези различни видове structs че
са указатели към друг възли и какво ли още не.
Но в този случай, ние имаме масив от обекти.
Така че това е като масив на асоциативни масиви.
Така че ние имаме някои първи елемент би да бъде обект с името Джеймс
и къщата Winthrop.
>> Вие, момчета, да си спомним нещо много подобно на това
с последния си pset, където, ако извади нещо от вашата база данни,
първият вид нещо във вашия масив е
цялата информация за първият потребител, който го срещна,
и след това трябваше да се индекс в които за да получите своя състав или им кеш
или какво ли още не.
Така че това е почти същият нещо, просто малко промяна
в синтаксиса, малко промяна в думите, които използваме, за да ги опише.
>> Така че, ако искаме, може ли някой да каже ми какво този сигнал ще правим тук?
Или какво е това малко код ще направи за нас?
Публика: Това ще ти даде всички имена.
ALLISON BUCHHOLTZ-AU: Право, така че Просто ще предупредим с всички имена
защото тя ще мине през Вила аз, така че ще започне от нула.
Така че бих казал, OK, което търсим На този първи обект, който
е първия слот в нашия масив.
И той казва, "дай ми атрибут, името на този обект. "
Така че ние отидете тук, щяхме сканиране, щяхме да намерим име,
и ние ще отпечата James, Моли и Карл.
Всякакви въпроси досега?
JavaScript за съжаление започваш да бъде
прави много вдига поглед върху вашия собствена, фигуриращ на синтаксиса,
бори с него.
Но, разбира се, аз съм винаги тук, работно време са винаги тук.
Може и да съм във вторник тази седмица.
Така че, ако сте там, можете да Елате ми тази седмица.
Ще бъде страхотно.
>> ОК, така че DOM е Document-Object Model.
Така че това е просто начин че сме искали да мисля
за това как нашата HTML и всичко в нея се организира.
Това е много нещо, вероятно ще излезе на вашия тест.
Знам си година, тя беше като тук е HTML файл, попълнете DOM за него.
И просто попълнете малки неща.
Те трябва да бъдат лесни точки надяваме.
Надяваме се, че ще see--
>> Публика: [недоловим]
>> ALLISON BUCHHOLTZ-AU: Така виждате това дърво тук?
>> Публика: Да.
>> ALLISON BUCHHOLTZ-AU: Така те ще поиска ползване
за попълване на това, което става в рамките на тялото.
Може би по тялото, ние имаме някои divs или имаме някои параграфи,
и ние ще ви помолим да попълните дървото много по този начин.
Така че ние ще се разхождах из него.
Така че Document Object- Модел е просто начин
да структурира и мисля, за нашия HTML графично.
И също така, когато стигнем в повече JavaScript,
тя ще бъде на така, че ние всъщност
манипулират различни елементи на страницата.
Имаме нужда от начин за достъп до всяка от нещата в нашия HTML,
И така, това ни дава много бетон стандартизиран начин
в различни уеб страници, за да направите това.
>> Така че, ако ние просто преминете през това тук, разбира се
ни документ е като цялата ни файл.
Това очевидно има смисъл че това е най-високото нещо,
и след това ние разполагаме със застроена HTML, която съответства на този маркер тук.
Също така, ако сте в тире си маркери правилно, след създаването на тази DOM дърво
става супер лесно.
Така че ние имаме някои главата тук.
Имаме някой орган, че виждаме възпиране на HTML,
ето защо имаме главата и тялото.
В рамките на главата, ние имаме някои заглавие тагове, заглавие тагове край,
така че ние знаем, че идва след главата.
И в рамките на нашата заглавие тагове, имаме Здравей, свят.
OK?
Така че това е цялата тази левия клон ръка.
И тогава за десния клон ръка Тук виждаме, че имаме HTML,
OK, което сме направили тази горна част, ние не търсим само в тялото,
Така че ние имаме някаква телесна.
И в рамките на този, единственото нещо, което имаме, е Hello, World.
OK?
Ако имахме такива неща някои скоба р и след това
Здравей, свят, и после още скоба р на сбогом, свят,
щяхме да имаме две мехурчета идващи от тук.
Тъй като и двете са по тялото, но те са отделни параграфи този случай.
Определено има практика на които в предишни викторини,
както и много онлайн върху него.
ОК, така, това просто ви позволява видим всичко добре
и манипулират неща много систематично.
OK?
Ние знаем как точно да се траверса през това дърво,
така че ние знаем какво искаме за достъп.
>> ОК, така че това е защо ние искаме за да получите този вид модел,
така че можем да използваме неща като това, и ние разбираме какво означават те,
и те са стандартизирани във всички неща, които правим.
Така документ дот заглавието е просто Заглавието на our-- всички от тях
са доста самостоятелно обяснителен, Харесва ми да мисля.
Така че първите три примери са просто казвам,
"Добре, само да ми даде заглавието на тази уеб страница. "
Така тя ще ви даде това, което отговаря на заглавието.
>> Документ точка на тялото ще ви дам каквото е в рамките на тези тагове тялото.
Така че можете да манипулирате, че.
И документ дот тялото дот въведете HTML е много готино една,
и може би не е като супер интуитивно, но вътрешната HTML
съответства на това, точно тук.
Така че, ако някога искате да манипулира текст на страница,
обикновено започваш да се прави нещо с тялото дот вътрешната HTML.
OK?
Така вътрешната HTML има тенденция да се отнася до това, което е всъщност между тези тагове.
OK?
И тогава полезни функции.
Така че, ако искате да получите всеки от тях, всеки елемент,
Ние имаме някои Id, клас име, или име маркер.
Това е много подобен на неща, които направихме с CSS, нали?
Когато имаме някои селектори, че съответства на нито един етикет, клас
че сме ги, или лична даде.
Това е много по същия начин.
Ако имате нещо, което има някои клас на куче,
и вие казвате получите елементи от табелката с името, и ще ви постави кучето в there-- или съжалявам,
името на класа.
Можете да сложите точка в там.
Това ще върне всички тези, елементи на вас, които имат този клас.
Така че можете да манипулирате само тези.
По същия начин, може би просто Искам да манипулират някои с глава, така че
някои h1 удар с глава, както направихме.
Може да се направи получите елементи по етикет име, защото h1 е име на маркер.
И по същия начин, ако искате да получите някои уникални неща, които можете да направите GET таг.
Вземи елемент от Id.
А те всъщност са много тези.
Това са само като три от много много.
Така че, ако отидете онлайн, като Отивам да се насърчи
можете да направите, и се направят някои изследвания по своему,
Определено препоръчвам търси в всички тези.
Те биха могли да са супер полезно, особено когато
искате просто вид манипулират много специфични неща, без да има
да мине през и се опитайте да се анализира всичко.
>> ОК, така че последното нещо, е джава събития.
Така че, когато аз говорех по-рано за отиване към един сайт,
и когато мишката върху нещо, или мишката витае нещо,
нещо друго се случва.
Това е, което ние бихме искали да мисля за като събитие.
Така че това, което имаме, че мощта било полезно е OnClick.
Така че моя е на Hover, която, сигурен съм, сигурен, е само на висене.
И един тон от тях че можете да потърсите.
Има цял списък онлайн на различни неща
че можете да слушате за.
>> Но JavaScript събития са основно просто реагира на неща
че вашето потребителско прави.
Нали така?
Така че вашето потребителско прави нещо, това е събитие,
и JavaScript ще отговори обаче, че ще ти се харесва.
Тя ще реагира по съответния начин.
Така че в този случай, ние имаме някои прозорец точка при зареждане.
И така, какво казва е, "изчакайте до натоварването на прозореца. "
OK?
Така че, когато всичко е натоварено, при зареждане, След това можете да включите тази функция.
Така че, когато всичко е заредена, ти започваш
да има някакъв бутон за търсене която получава един елемент от Id,
и го отпечатва, че елемент е като бутона Search.
И тогава ние имаме тази променлива, ние казваме, "OK, OnClick."
Така че, когато чуете щракване върху бутона Search,
изпълнява тази функция, която е сигнал, който сте кликнали върху бутона Search.
>> Така че това, което се случва is-- това е хубаво малко графично представяне тук.
Така че нашите се зареди, това е нашия при зареждане,
ние откриваме нашето търсене бутон, който е това.
Търсим нашия бутона Search.
И тогава, когато бутона Search е щракнали, тя отговаря точно тук.
OnClick.
След това ние най-накрая предупреждава потребителите ни, която е последната линия тук.
OK?
Така че всеки един от тези четири стъпки просто отговаря на четири кутии
Там долу на дъното.
Това прави ли смисъл за всички?
>> И тогава едно нещо, че аз съм просто ще да говорим много, много накратко, че съм
Приканваме ви момчета, за да моля погледнете в по-голямо е
Jquery, която е само една библиотека който е построен на върха на JavaScript.
Това е супер полезно, тъй като с повечето библиотеки.
Има много функции.
Така че, ако има нещо, което някога което искате да направите в JavaScript,
Първата си инстинкт не трябва да е да се мисли,
на, "това, което функция трябва I код? "Трябва да бъде,
"Нека видя някой е вече направи това за мен. "
Тъй като девет от десет пъти, някой ще го направили вече,
и те вероятно са го направили по-добре.
Хората прекарват много време прави това, и JavaScript е много широко използван,
така че хората са постоянно опитвайки се да направим по-добре.
И Jquery има много функции че най-вероятно ще бъде полезна за вас
в окончателния си проект, ако сте прави нищо с уеб дизайн.
Както обичам да казвам, "работа по-умни, по-трудно. "
Ако вие направите това, той ще бъде страхотно.
Когато сме в Hackathon аз не правя искам да бъдеш всичко стресирана.
Искам да съм като: "Аз имам това. Jquery върнаха ми.
Нямам нужда да пиша тези функции. "
>> Така че просто две неща не забравяйте, аз ще съм
за да ви момчета изглеждат по- в Jquery по своему.
All аз ще кажа, че е прави някои доста страшни неща
и могат да направят живота ви цяло много по-лесно.
Но това, което искате да има е каквото файл
че ти започваш да се да го използвате в, започваш да искаш тези две линии.
Вие ще искате скрипт на JS JQuery дот JS.
И всъщност си източник ще бъде известна URL.
Ако Гугъл JQuery, Google всъщност е домакин на всички файлове за вас.
Така че определено искам да вход, който вместо URL.
Аз съм сложил тази тук за улеснение.
Всичко това означава, е мястото, където да се намери своя JQuery библиотеката.
Това е огромен, така че не искам да го бъде домакин на собствения си компютър
Ако можете да го избегнете, поради което са склонни да съм сложил в URL на Google, че
е домакин на всички тези файлове за вас.
OK?
Можете да го в Google, обещавам тя няма да има.
>> И тогава онова, което JavaScript файл, който сте
използване, така че това е просто някаква външна JavaScript файл, че използвате.
По същия начин, по който да води към нашия CSS файлове, това е един и същ вид на нещо.
Това просто линкове към файла когато ви JavaScript е.
И аз имам някои примери с прост JavaScript.
Така че ние ще се минава през него.
И тогава в индекса си JavaScript, която е вашият JavaScript за файлове,
това е вид на обвивката че имате за JQuery.
Ти си почти 99.9 процента от времето ще
за да получите този във вашия index.js файл.
Защото това, което тази казва се, "Не изпълни нищо
докато вашият документ е всъщност готов, "което е точно това, което искате.
Защото, ако вашият документ не е готова, и JQuery започва да прави неща,
това е просто една каша.
Така че винаги искам да имам тази обвивка.
И тогава, за неща, които отиват там, I оставя собствения четейки вашите момчета ".
>> ОК, така че има ли някакви въпроси полето Сега около JavaScript като цяло?
Или модела DOM?
Ако не, ние имаме някои готини примери, които можем да преминават,
че вие ​​може да ми помогне код.
Но аз също ще бъда супер хубаво, и ако
не искам да казвам нищо за това, че е добре.
Също така мога да ви дам само примери.
Но нищо на PowerPoint преди да продължим?
Cool.
>> Имам чувството, че вие ​​трябва да енергия.
Така че аз мисля, че ние ще започнем с моята страна например първото.
Имаме три примера, Имате ли свой избор.
Така че ние имаме часовник, къде отиваме да приложи действителното часовник, който е
ще се актуализира с течение на времето.
Ние имаме тази велика Twitter функция.
This-- знаеш ли какво, дръж се.
Ние ще направим това си отиде.
Бам.
OK.
>> Ние имаме тази велика Twitter функция Оттук that-- Знам, нали?
Това ще бъде страхотно.
Възможно ли момчета развълнуван?
Това ще се преброят на символите, които са ти останали,
Така че, ако пиша точно сега, Очевидно тя все още се казва 140,
но знаем, че не е така.
И след това с последното ни един тук, кликнете тук, за да се забавлявате.
Какво ще се случи е, когато ние кликнете, за фон-те
Ще се променят цветовете.
Така че вие ​​имате вашите възможности на кой искате да направите първата.
Обещавам, че ще отнеме много лесно за вас.
Имам чувството, че всеки е вид просто много нисък ключ днес.
Така че аз ще ви преведе през как ние ще изпълнява всички тези причини.
Ако искате да се намеся в, това е страхотно, но аз
Чувствам се като всички са малко уморени.
Така че аз просто ще ви преведе чрез тези примери.
Имаме ли нещо, което ние бихме искали да направим първо?
Някой?
Без предпочитания?
OK.
Знаеш ли какво?
Ние сме на парти.
Имам чувството, че вие, момчета, се нуждаят от little-- Така че, ние ще направим парти една първа.
OK.
>> Така че това, което имаме here-- това е не трябваше да бъде там.
Сега това е добре.
OK.
Така че това, което имаме тук, е само един прост HTML страница
че вие, момчета, трябва всички да са супер познатата ни от последните си два psets.
ние имаме свой тип док тук.
Всички ли виждате?
OK.
Cool.
Ние разполагаме със HTML очевидно.
Ние имаме някои с глава, че е свързана с стилов лист, че
Просто направих моя шрифта хубаво и мащабен и смел.
Така че не се притеснявайте за това.
>> Ние имаме някои тяло с на фона Id, OK?
Защото ние ще се промяна на заден план.
Така че, когато ние променяме фона на нашето тяло,
Помня от преди две седмици когато ние се занимаваме с уеб страници.
Така че е добре да има това.
И ние имаме някои Id равнява страна.
Това з Реф паунд просто означава, че то се случва да отида до една и съща страница.
И натиснете тук за парти, ето защо, когато щракнете върху него,
тя трябва да се променят цветовете, за щастие.
>> И тогава ние имаме някои скрипт тук е просто свързан с тази партия дот JS
файл, че е празна, защото ние все още не са направили нищо.
И това е толкова тъжно.
Но много скоро, тя ще се промени цветове, и тя ще бъде страхотно.
>> Така че аз съм просто ще ходиш момчета чрез начина, по който може да се подходи към този.
Така че първото нещо, което ние може да искате да направите,
ако ние се променяме фона на тялото, първото нещо, което може да искате
да направите, е всъщност вземете това, което тялото е, нали?
Така че искаме да имаме сума, ни фон, и ако забележите,
Аз просто автоматично просто започнете да пишете.
Няма нищо по-специално, че ние трябва да направите, за нашите файлове с JavaScript.
Мога да започне деклариране променливи, и обявяване произволни функции.
И това е много по-свободна форма.
Това е като с C, дадохме ви всички тези твърди правила, а вие пораснаха,
така че ние сме като "излизат.
Бъди свободен.
Прави каквото искаш. "
И това е, което JavaScript е.
Така че ние имаме някакъв фон тук.
С нашата DOM модела, ние сме сигурни, че може да направи документа дот получите елемент,
и ако забележите тук, тялото ни има Id.
Нали така?
Така че можем да се получи документ от Id, и тук е просто един.
Каква е нашата Id че искаме тук?
Публика: Background.
ALLISON BUCHHOLTZ-AU: Background.
Perfect.
А и запетая в края.
Това все още не е отминал.
Вие все още се нуждаят от вашата точка и запетая.
OK.
Така че това е първата ни един.
И когато ние кликнете нещо, ние искам нещо да се случи, нали?
Така че ние може да искате някаква променлива че те чака едно кликване.
Това, което ще направя, е, че ще се направи нашата връзка по-близки до един бутон.
Така че ние ще имаме някои бутон, който равнява документира дот получите елемент от Id.
И ако аз говоря за кликнете линк или кликнете тук за парти
връзка, това, което може Id ми да съм тук?
Party.
Правилно.
OK не е твърде лошо досега.
Всеки получите това, което правим?
>> ОК, така че сега ние имаме бутон, и ние искаме
нещата да се променят, когато кликнете върху него.
Така че, ако ние си спомняме от нашия PowerPoint, много просто нещо което можем да направим
е само бутон точка OnClick, нали?
И това ще се равнява на някои функции.
Това е анонимна функция.
И това само as-- всъщност съм Ще направя това малко по-голям.
>> Така че това, което аз просто направих тук е, което казвам, OK,
когато кликнете нашия бутон, който е тази връзка, че ние просто е посочено,
ние ще се изпълни тази анонимна функция.
Ние нямаме нужда от суровини.
Не ни пука какво казва потребителя.
Когато кликнете върху него, ние сме ще правим каквото си искаме,
която е промените цвета на фона.
OK?
Така че това е защо ние нямаме никакви входове, ние просто трябва тази анонимна функция.
И сега ние всъщност ще да напиша тази функция.
>> Така че има един куп начини ви може да генерира произволен цвят.
Начинът, по който аз го направих беше да генерира три случайни числа
и да ги конвертирате в един RGB тройна.
Така че това просто ви показва някои готини неща, които ако сте като: "О,
Имам нужда да генерира произволни брой. ", ако го Гугъл,
това е, което ще намерите.
>> Така че ние имаме три различни неща, Var, не румени отново зелена.
Нали така?
Така че тези, които са на три неща, които правят един цвят.
Синьо, червено, и зелено.
Cool.
И това, което можем да направим, е, че ние знаем, че тя трябва да бъде между 255,
и ако погледна някои генератор на случайни числа,
бихте могли да получите нещо като математика Дот случайна, които ако погледнете този нагоре
се връща към някои номер между нула и единица.
OK?
И това, което номера направим всичко RGB тройки мина между?
Нула и какво от това?
Какво могат да отидат до?
255.
Така че, ако математика Дот случайна отива между нула и единица,
как може да искаме да промениш това?
Публика: Time?
ALLISON BUCHHOLTZ-AU: Да, точно.
Така че времето е 255.
>> Публика: [недоловим] Това е като [недоловим].
ALLISON BUCHHOLTZ-AU: Math Дот случайна.
Публика: Cool.
ALLISON BUCHHOLTZ-AU: Да.
JavaScript просто се грижи за вас.
OK.
Така че можем да направим това за всички от тях.
Нали така?
Math Дот случайни пъти 255.
Разбрано.
Cool.
Така че това нещо е, това може да не връща цяло число.
Нали така?
Може би трябва да получите някои номер между нула и единица,
и тя го кара да бъде малко по- на разстояние, и нашите RGBs не могат да бъдат поплавъци.
Те трябва да са цели числа.
Така че, ако сте опитвали това, то вероятно щях има някои хаотично поведение.
Тя ще бъде малко по-фънки.
Така че това, което правим е, което искаме да направим уверите, че те са заоблени,
и можеш да закръглят или иначе.
I закръглена с пода.
Така че аз винаги се е убедил че то се закръглява надолу.
Но излизането на колко е лесно е просто да се качите на случайни числа,
как да мислим, могъщество етаж този номер?
Това е много подобна.
Имаш ли представа?
Така че, ако случаен беше просто математика дот случайни, така мислиш, че ще направя етаж?
Math точка етаж.
И вие можете да направите таван математика точка.
Кръгла е вид неясна защото не
знам дали да закръгли в посока нагоре или закръгляват надолу.
Така че обикновено ние винаги правим математика дот под, таван математика точка.
Но honestly--
>> Публика: Дали етаж кръг надолу?
>> ALLISON BUCHHOLTZ-AU: Етаж закръгля надолу.
И това е само един избор от моя страна.
>> Така че сега ние имаме нашите три числа които са били случайно генерирани,
и това, което ние ще направим сега, е, че сме Просто няма да се промени на заден план.
OK?
Така че ние вече имаме фон вид съхранява
в този елемент, наречен фон.
Така че това, което ще забележите, е, ако можете играе наоколо с това,
ние искаме да променим стила.
И това е нещо като нещо, което бихте Google и да разбера,
Харесва ми как да промените цвета.
>> Но начина за достъп до този цвят е фон Дот стил дот фон.
Така че това казва дадена този обект, фон,
който се отнася до тази елемент Id там,
ние ще разгледаме най- стил в стил,
ние ще разгледаме на заден план.
OK?
И ако отидете и да проверите чрез, тя може да направи малко по-дълбок смисъл,
но по принцип тя е просто казвам, "Дайте ми това много специфична характеристика
от това, което съм определено по-рано. "
Така че това, което ние сме го променя да е някои RGB, защото има смисъл.
Ние използваме RGB утроява, нали?
И ние have-- Искам да се уверя, че получите правилния брой цитати тук.
Така че това, което правим, е имаме RGB, и отиваме
to-- това е като конкатенация, което е червено.
И тогава ние искаме някои запетая.
И след това, което искаме, плюс зелена, След това някои запетая, а някои синьо.
>> Така че тези плюсове просто означава като конкатенация.
Така че това е просто създаването на този низ, който се случва в рамките на RGB.
OK?
>> Публика: [недоловим] плюс тогава зелената плюс след червеното.
>> ALLISON BUCHHOLTZ-AU: Да, защото съм объркан, че до.
Чудесен човек, че.
О, дръж се.
Не.
Защото трябва да се уверите че аз имам всичко това право.
Така че аз ще обясня в Uno Momento.
Зелен, син, перфектно.
Сега съм направил.
Аз вярвам.
>> OK.
И така, какво е това, е, че на фона ще се определя до известна низ.
Нали така?
Кое е това, което имаме тук.
Това ще бъде част RGB 255 запетая 255 запетая нула, или каквото и да номер
има там.
Така че правим тук, Ние имаме някои низ.
И това, което искаме да направим, е, че сме вид динамично създаване
че когато ние действително стартирате тази програма.
Така че това е някакъв низ.
Плюс това конкатенира с стойността, която има червено,
които го конкатенира с запетая, които го конкатенира
с какво зелено е, и така нататък, и така нататък.
OK?
До самия край, което е най- затваряне скоби на тази RGB тук.
OK?
>> И така, какво ще се генерира някаква команда наистина
че е RGB на три числа В този контекст вече е настроен да.
OK?
Така че нека да видим дали това работи.
Надявам се, това е така, защото, ако го не, аз отивам да бъде реално тъжно.
О, не.
OK, дръж се.
Определено фон дот точка фон стил.
Аз съм категорично липсва нещо просто малка.
Не се ли момчета мразят това?
Когато това е само една малка малка грешка?
Всемогъщият фон.
RGB.
>> Публика: [недоловим]
ALLISON BUCHHOLTZ-AU: No.
Опитах това преди клас.
Имам всичко, което направих преди клас, в случай аз бях като,
"Чакай, какво съм направил погрешно?"
Тъй като аз бях като, "Аз вероятно ще бъркотия тази нагоре в някакъв момент. "
Plus зелено.
Всичко изглежда като че ли е съединявани правилно.
OK.
>> Публика: [недоловим]
>> ALLISON BUCHHOLTZ-AU: О, ето го.
Това е, което имах нужда.
Виж това.
Tiffany за спасяване.
Perfect.
OK.
Сега нека да видим дали ще работи.
О, Боже мой.
OK.
Дръж се.
>> Публика: Space след втората плюс.
>> ALLISON BUCHHOLTZ-AU: Коя?
О, чакайте, дръж се.
Space износване?
>> Публика: Втори плюс в зелената конкатенацията.
ALLISON BUCHHOLTZ-AU: Oh.
Публика: Няма по пространство след плюса, да.
ALLISON BUCHHOLTZ-AU: Вие не се нуждаят от това, but--
Публика: О, не го направите?
ALLISON BUCHHOLTZ-AU: Това изглежда доста.
Публика: OK.
OK.
>> ALLISON BUCHHOLTZ AU: Да видим дали това работи.
OK.
Аз очевидно не може в самия тази демонстрация, която ми напомня
на лекция на другата седмица, но знам, че това ще работи.
Знам, че това ще работи.
Толкова близо.
Освен ако аз случайно изтрити ми скрипт на тази една.
Не, това е страна дот JS.
OK държа.
Отивам да копирате този, и аз съм също просто ще изтрие всичко,
защото имах тази работа по-рано.
>> Обещавам, че работи.
Ако не, аз ще ви покажа какво Томи е.
И там.
>> Публика: Вие сте съотнасяне страна дот CSS, и това е една от страните дот JS.
>> ALLISON BUCHHOLTZ-AU: Е, добре точно тук е дот JS лица.
OK, това, което съм направил по-различно?
OK, ще видим дали това работи сега.
Бам.
Така че, аз не знам какво съм направил по различен начин, но това е, което трябва да се случи.
Малко хладно.
Щракнах върху този, като, завинаги.
Но можем да се опитаме и да видим какво съм направил по различен начин, че този човек трябваше.
Аз не знам за вас, момчета, но това изглежда в общи линии това, което току-що написах.
Вероятно е изчезнало запетая някъде е моя работа.
Всъщност, след като, аз мисля, че е липсвало точка и запетая, точно тук в действителност.
Но не мога да го видя, защото тя е на разстояние от екрана.
>> Но ако забележите, че това е доста много точно това, което току-що написах.
Мисля, че може би най-трудната част за това е просто вид на това нещо полето
тук, разбиране какво прави там.
Тези видове неща, които научаваш наистина само от Googling и честно
Просто се опитвам.
Ако смятате, че има някои атрибут, там вероятно е.
Така че опитайте.
Вижте какво се случва.
Както казах, има много експериментиране с JavaScript,
и PHP, както и всичко, което неща, и CSS особено.
Това е единствената истина начин да го разбере.
>> ОК, така че след това фиаско с парти дот JS, имаме две други опции.
Имаме часовник или Twitter.
И двамата са интересни.
Може би не чак толкова забавно като страна, която имаше готино малко Мигащи
нещо в края.
Мислите ли някакво предпочитание?
Публика: Clock?
ALLISON BUCHHOLTZ-AU: Clock?
OK.
Cool.
>> Така че отново, ние разполагаме със празен файл JavaScript.
И както виждаме тук, ние има някои много прост HTML.
Ние разполагаме със стил лист, че просто форматира какво трябва да изглежда така.
Ние разполагаме с Разделение документ за самоличност на часовник, който
Просто казва, "това трябва да бъде един часовник."
И ние имаме нашата връзка в нашия JavaScript файл
Това всъщност ще генериране на нашия часовник за нас.
Защото готино нещо, е че може да зададете JavaScript за автоматично опресняване
себе си.
OK?
Така че, вместо да чакат за потребителя да удари Refresh на страница
така че можете да получите актуализиран време, JavaScript
може да го актуализира обаче го харесва.
>> Така че, като с последния ни един, ние искахме за достъп до нашето минало, нали?
Така че това, което мислите, че може да е Първото нещо, което искаме да направим тук?
Ако ние сме вид излизането този вид на парадигмата тук?
Ние вероятно ще искате да достъп до нашия часовник, нали?
Така че, ние имаме някои Var часовник, който equals--
Какво мислим, че ще бъде?
Документ дот получите елемент по-- Аз също Обичам Id Sublime-- и Id ни е часовник.
Точка и запетая.
Трябва да се уверите, за да получите тези запетаи това време,
защото аз се чувствам като че е проблемът за последен път.
ОК, така, както аз просто казвам с опитвайки да имате JavaScript презареждане
има това голямо функция, I Знам, че дойде по-удобно, миналата година,
Аз не съм сигурен, че е по-удобен за тази pset, но тя се нарича набор интервал.
И това е всъщност най-много готино, ако вие направите нещо
с течение на времето или получаване актуализирана информация.
На един сайт за окончателно проект, това е може би
функция, която желаете да получите супер запознати.
Така че това, което зададете интервал прави, е, че ние ще го дам на функция,
и колко често трябва да наричаме тази функция.
OK?
>> Така че в този случай, ние просто ще създадете отново някаква анонимна функция,
OK, че ще се получи, нашата дата, и нашето време,
и след това да актуализирате неща и ще го покаже.
Така че ние ще се тревожи за това.
Ние ще бъдем като генерира часовник тук.
Но това, което ни трябва, е как често да го освежите.
Така че в този случай, това е просто милисекунди.
Така че ние просто ще направя 100 милисекунди.
Разбира се, напълно произволно.
Ако исках да актуализирате много по-бавно, бихте могли.
Ние може да се бърка с набор интервал,
колко голям нашия интервал е, след като сме се работещ часовник, който се надявам, че ще
стигнем до.
Така че това е просто казвам, "OK, повикване тази функция на всеки 100 милисекунди. "
OK?
Това е всичко, нали.
>> Така че това, което ние искаме нашата функция за направите е да искаме да имаме някаква дата
и известно време, което е ние ще имаме.
Така че можем да започнем с нашия дата равнява нещо,
и нашето време се равнява на нещо че ние не знаем все още.
Или всъщност, ние просто трябва дата, защото дата ще включва всичко.
Отново, ако просто Google нищо за това, което искате да направите, ако пишете, "OK,
Аз искам да отида на времето чрез JavaScript, "тя
ще ви даде тази велика функция, наречена GET дата.
Буквално повечето неща че искате да направите,
JavaScript ще има той е направил за вас вече.
Така че това е буквално като нов получите дата, която е creating--
или нова дата, rather-- който се генерира
някакъв предмет, който представлява дата.
>> И това, което ние ще направим тук е тази is-- Отивам да напиша това,
и след това да обясни какво прави той.
Така че аз ще се погрижа да получа това право.
>> ОК, така че това, което тази функция прави, е, че ние сме просто
създаване на HTML, че всъщност Ще отида в нашата Разделение Id на часовник.
И така, какво ще се прави е просто генерира някакъв низ, OK?
След това тази ще бъде трансплантиран в нашия HTML.
Основно това, което той ще направи, е каквото we-- какво ще ти покажа
е, че каквото и да се каже, HTML е, ние ще замени настоящия текст тук
с каквото и да е HTML.
Така че това ще позволи ние да променим нашия часовник дот
HTML от това да само текстът на тази трябва да бъде часовник, действително показва
броя и нещата, които се грижат за, и действително да бъде ч.
>> Така че това, което ние ще направим, е да сме ще започне да генерира този HTML.
Така по същия начин, по който се използва да направя плюс равнява на цели числа,
Сега можете да направите това за струни, освен, че ще ходи да ги свързвам.
Нали така?
Както видяхме с партийни дот JS, това само конкатенира всички тези неща заедно.
Така че можете да се слеят различни парченца HTML от променливи или парченца струни
че ти напиша себе си, а това просто
наистина ви дава възможност за динамично генериране на HTML, който е много готино.
Така че, ако имате нещо много лесен специфична,
това може да ви позволи да направите това.
>> Така че ние имаме HTML, да аз ще опитайте и се уверете, че мога да получа това право.
Така че ние ще направим някои h1 с глава.
Така че това, което е важно да се разбере тук е, че това е всъщност само HTML.
Нали така?
Пишем действителното HTML код тук, това е
Не просто низ в нормално така, че ние ще си помисля.
Така че ние имаме някои HTML.
Това се счита низ тук все пак.
И ние правим дата dot-- ние искате да получите нашите часа.
Отново, ако ви се налага да се търси до нищо за дата,
тя ще ви кажа, това са всички атрибутите тази дата има.
А ето какво можете да използвате за него.
Така че може би има неща като получите часа, и да получите минути,
и да получите секунди, и да получите милисекунди, и кой знае какво друго те имат.
Но ако се вгледате в документация, всичко това няма да има.
>> Така че ние имаме получите часа, и тогава ние ще искаме
да се слеят, че with-- съм ще се премести тази тук.
Така че, ако ние сме генериране точно сега, ние сме всъщност генерира време, нали?
Имаме часа, а след това, което е между часове и минути?
Имате точка и запетая, нали?
Така че ние искаме да направим някои запетая тук.
И след това, което искаме да ни та, така че по същия начин,
че имаме дата дот получите часа, как може да имаме и минути?
Това е буквално Дата дот получите та, които някак ми харесва.
Това е като "О, как ще си получа минути? "
Току-що получих моите минути.
>> OK.
И тогава имаме друг дебелото черво тук.
И след това, ако искаме да си вземем секунди, как може да имаме и втора?
Дата Дот получите секунди.
Мисля, че това е много готино.
И това, което е важно да се осъзнават, е, че ние също
Трябва да затворите ни HTML тагове тук, защото тя все още трябва да бъде валиден HTML, така h1.
Cool.
>> Така че след това, което можем да направим часовник дот вътрешната HTML е равна на HTML.
OK?
Така че не забравяйте, как казах Вътрешната HTML основно
взема каквото се намира между две тагове, за които говорихме
и вложки или манипулира каквото е там?
Така че какво прави това, ако се върнем към нашия часовник,
часовник е, че се отнася до всичко в рамките на това Div.
Това е вътрешната HTML на тази Id часовник Разделение.
И така, то се случва да го смените с на HTML, че ние просто генерира,
които, който, да се надяваме, надявам се, да се надяваме,
ще покаже времето в момента.
Ще видим.
Разбира се.
Толкова много технически въпроси.
Just-- Алисън съм разстояние днес играта ми момчета.
OK, че работи.
часовник Дот вътрешната HTML.
Беше HTML Наистина ли?
Също така това е, което се случва.
Когато не можете да видите нещо, просто погледнете изходния си код.
OK.
Искаш ли да знаеш хладно работа около че ние ще направим точно тук?
>> Публика: Можете ли да направите главни букви?
Главните букви?
Защото трябва да получите часа, и след това получи минути.
>> ALLISON BUCHHOLTZ-AU: Тя е получите часа и get-- о.
Можете are-- златна звезда.
Всичко това е тест, момчета.
Обещавам, че работи преди клас.
>> OK, но нещо готино да се знае е, че можете да also-- ако понякога
Вашите външни файлове са става малко луд,
можете просто да ги пуснат направо тук, който се стреми да оправи нещата.
Освен това е като наистина грозно.
Разбира форматирате всичко.
Уверете се, че всичко е доста.
OK.
>> Исках да направя всички готини демонстрации, и те просто не работите навън.
OK.
Script Var часовник.
Както и да е, това, което е важно, е че това е общ начин
че вие ​​ще форматирате JavaScript.
Както можете да видите, че може да бъде много дребен понякога,
дори когато е било буквално работи преди две секунди.
Или преди не двасекунда, но много, много скоро.
>> Така че, за да ви покажа какво трябва да изглежда така, и да ви покажа, че аз не съм луд,
и че всичко е точно същото, това е, което трябва да изглежда така.
Вие просто ще направя тази горна част тук, и ако видите изходния код на страницата
ако забележите, той направи някои откачени неща, аз го опростят.
Също така, кредити за Tommy McWilliam, които действително
ми помогна да създадем тези примери, поради което аз знам, че те работят.
Защото Томи е господар на JavaScript.
Но ако забележите, имаме някакво множество.
Ние разполагаме със часовник функция тук.
Това е още по JavaScript, че ние просто пише, или част от него.
Ние току-що написах това точно тук.
И той има допълнително функция, която просто го подложки
с удар от нула преди писмо или преди няколко, ако това е
само един от тях.
Така че, ако забележите, че това е доста много точно това, което току-що написах.
Имате някаква променлива часовник, който има нашата елемент, може да получи елемент от ID,
който е часовник.
Ние разполагаме със зададен интервал функция, която е
анонимна функция който изпълнява всичко това.
Ние сме малко изходен низ от HTML, че ние след това динамично
генерира от наличието на някои h1 удар с глава, слепване
с емисия на час, плюс нашата дебелото черво, както и получаване на
протокола, плюс още дебелото черво, както и нашите секунди,
и накрая приключва HTML за него.
И тогава ние актуализираме часовник Дот вътрешната HTML да HTML,
и ние се актуализира на всеки 100 милисекунди.
OK?
>> Вижте Обещавам да не съм луд.
Не знам.
Аз не знам защо не ме харесва.
Имам чувството, че изглежда по същия начин, но явно тя ме мрази.
>> Така че нека да видим дали кръгла три върви по-добре.
Ние сме на път да видим.
Аз не съм сигурен как това ще отида.
Всеки ли поне получаване на минуси, като само основната тема
на JavaScript, все пак?
Надявам се, че това е най-малко полезни, по- от която показва, че това е малко претрупан.
Но проблемът ви набор ще бъде много забавно.
Това ще бъде страхотно.
Тя няма да бъде толкова досадно тъй като това, аз не мисля.
Вие всъщност ще стигнем до виж наистина готини неща.
>> Така че не на последно място, ние ще се опитаме този, Twitter.
Наистина съм уплашен сега, момчета.
Аз не знам как това ще отида.
Но само за да ви дам малко повече вкус, и това е действително
манипулиране на низове и входове, това, което ние ще направим
е, ако ние забелязваме тук с HTML-- този е с малко по-MORE-
имаме някакъв текст зона, която съответства на този текст площ тук.
OK?
И че има Id на текст.
Ние го рестилизирана малко с някои ширина и височина
че сме предварително, и ние сме Н1,
който току-що е нашата заглавна едно, че представлява нашите останалите знаци.
Ние го даде някои Id на оставащи знаци,
и след това ние имаме някои скрипт тук, които наистина съм
надявайки трети път на очарованието тук, момчета.
>> Така че това, което искаме да направим, в същата обща вена
че ние сме направили с часовник дот JS и партийни точка JS като сме забелязали,
е време започнахме от действително измъкна нещата, които ни е грижа за, нали?
Така че в този случай, има две неща, които ни е грижа за, OK?
Едно нещо, което ние всъщност сме вид търси в и съставянето на данни от,
и едно нещо, което ние всъщност се променя.
Така че има нашата HTML.
Ако това е нашата уеб страница тук, какво е данните, които гледаме?
Това ще бъде независимо текста в нашите кутии, нали?
Така че каквото и да напишете тук.
Това е, което искам да знам, или това е, което искам да гледам.
И това, което ще бъде променящата се на нашата уеб страница?
Останалите героите.
Така че по същия начин, ние искаме да започнете от инициализиране променливи
че всъщност задържат тези елементи.
OK?
Така че, ако имаме някои Var това е нашият текст зона,
и ние имаме някои Var, че е края на годината.
Нали така?
Така те ще задръжте тези две неща.
Така че един и същи вид на нещо, документ dot-- OK, аз съм
Ще се уверите, че това е ще работи това време.
Много съм непреклонен.
ОК, така че, ако искаме нашата текстова зона, съгласно
в нашия HTML, това, което е идентификатор ни?
Какво Id ни?
Това е просто щеше да бъде текстова, защото това създава нашия текст зона, OK,
и Id ни е текст, така че това е как можем да вземем това, което е там.
OK, точка и запетая.
Отивам да бъде супер точна за това,
защото искам това да работя това време.
OK, да направи същото нещо, получите елемент от Id.
Аз съм наистина се чудех какво има причинена от другите две да се забъркваш.
OK, а след това в този мач, какво искаме да влезете?
Какво Id ни тук?
Имаме още един Id в нашата HTML, какво е това?
Публика: Оставащи символа.
ALLISON BUCHHOLTZ-AU: Оставащи символи.
>> OK.
Cool.
Така че аз съм просто ще пиша това много по-бързо.
Аз съм просто ще напиша това в секунда.
Така текст зона.
Интересното е, B function-- там много функции, които не само
съответства на вашия мишка, но вашата клавиатура.
OK?
Така че може да се каже, когато всеки ключ е натиснат, можете да правите неща като това.
Така че този, който използваме се нарича по ключова нагоре, които
казва, "ако сте натисне произволен клавиш клавиатурата, когато потребителят е вдигнал
пръста си да изключи този бутон, и ключът се превърна ненатиснато,
След това ние ще направим нещо. "
OK?
Така че това има смисъл, нали?
Защото всеки герой напишем, отиваме
да трябва да се вдигне пръстите ни на разстояние от него, така че, когато ключът се покачва,
ние можем да знаем, за да намалите стъпково Останалите нашите герои.
>> Така че ние имаме едни от ключово нагоре, и по същия начин,
ние ще кажем, "OK, когато правим това, ние
Ще се създаде някаква функция, която ще вземе д ", в този случай,
и това, което искаме да направим, е да изчислява оставащото броя.
ОК, така че нека просто започнете чрез създаване на променлива.
Така че ние имаме някаква променлива R, които ще представляват
колко знака ние оставихме.
OK?
Ние знаем, че започваме с 140, и ако искаме да знаем,
да речем, дължината на тази низ, който е бил вход,
Мислите ли, имат някаква идея как можем да направим това?
Само на базата на разстояние от очевидното неща, като ако искаме часа,
ние използвахме получите часа.
Ние знаем, че нашата цел е Текст област, но може да ви момчета
мисля за това, което може да дойде след него?
Някакви идеи?
>> Така вид тази е на по-малко интуитивно, но това е стойност дължина точка.
Така че просто ми даде някаква атрибут стойност, която
всъщност е дължината на тази струна.
Така че това ще каже: "Добре, аз търся в целия този низ в рамките на текст зона,
и аз ще кажа, вие колко време е. "
Защото ако си припомним струни са наистина само масиви,
така че ние може просто да вземе дължината на тях.
Така че ние имаме това.
Cool.
>> След това, което искаме да направим, е да сме Никога не искам да позволи на потребителя
за въвеждане на повече от 140 знака, нали?
Защото, ако ние кажем като "О, вие само да има толкова много оставащото "
и след това да ги направя, че Както и да е, ние сме били лъжа.
И това е още нещо, което JavaScript
може да бъде наистина добър за, е утвърждаването на потребителя
и като се уверите, че вашият потребителя се вписва в рамките на всякакви правила
че сте предоставили на тях.
Така че, ако искате да правите неща като вземане сигурен някой вход на електронния си адрес,
или като се уверите, че когато те въведете две пароли, те съвпадат.
JavaScript може да направи това.
Може би направил нещо подобно, "когато формулярът е подаден, "или подобно,
"Когато Пуснете бутона Form е кликнали, проверете всички тези неща. "
И ние можем да направим, че JavaScript.
Така че това е точно това, което ние ще направим тук.
>> Така че това, което може да бъде начин да се провери дали няма ги над 140 символа?
Какво ще се случи, за да нашата стойност на R, ако се опитат?
Това ще бъде отрицателен, нали?
Или това ще бъде по-малко от или равно на нула.
Така че ние можем да използвате, ако това е просто като всичко останало.
OK?
И ние имаме някакъв текст област дот стойност, и това, което правим тук
е ние просто cutting-- какво е това?
Извинете.
Това едно, ние просто искаме да се върне фалшиви.
Аз се обърках.
All разчорлен от нещата не работи.
OK, ние просто искаме да връщане фалшиви, и тогава ние
искате да покажете на Останалите герои, нали?
Така че с часовника, което направихме нещо с вътрешна HTML, нали?
Къде можем да го настроите да е равна на част променлива, така че това, което може да правим тук?
Какво се променя вътрешната HTML на?
>> Публика: Остават?
>> ALLISON BUCHHOLTZ-AU: Променяме оставащото.
Добре, и какво правим искам да го определя като равна на?
Това ще бъде R, защото това трябва да ни оставащи знаци.
OK?
Така че аз съм много нервна, за да видите дали това работи в момента, но ще видим.
Оставете това.
Това е много по-бързо.
[Недоловим] OK.
Отново, аз съм просто ще ви покажа.
По някаква причина, мината не решат да работят,
но това, което ще ви покажа е, че това is-- ох аз трябваше да се сложи, че вътре.
OK, забелязваме същия вид нещо тук, все полето за текст.
>> Също така, ако забележите човек, ако има някога нещо, което искате да направите,
и не знаете как да го направите го, просто кликнете View Page Source,
и те ще ви кажа.
Понякога ще бъдат криптирани.
За ваше pset, ние криптира всичко, така че просто изглежда като безсмислици.
Но ако има някога наистина готин сайт, който ви харесва,
ако просто кликнете View Page Source, това ще ви кажа как да го направя.
Така че отново, работи по-интелигентно, по-трудно.
И както виждате тук, всички от тези неща са същите.
този тук просто отнема известно подниз че съм забравил точно какво прави това.
Но това очевидно отнема известно подниз на стойност от нула до десет,
и връща фалшиви какво трябва да спре потребителя от въвеждане повече,
и след това очевидно актуализира вътрешната HTML там.
>> Cool.
Така големите излитания отсечки от днес, експеримент, погледнете изходния код
защото това ще ви помогне много, и всеки, понякога JavaScript
може да е трудно да се работи с и не Винаги работим така, както го очакваме да,
но просто продължавам да опитвам защото аз обещавам, че ще.
Обещавам всички тези примери са работили преди клас.
Не мога да разбера какво се е случило.
Аз буквално има всичко на едно и също.
>> Още едно нещо, че аз просто искам да ви покажа момчета, които могат да бъдат супер полезна
е in-- какво е работил преди?
Имаме страна по работа, не можем?
Мисля, че да.
Да.
Ние направихме.
Awesome.
ОК, така че едно нещо, което вие трябва да знаете
е дневникът на конзолата, че аз говорихме.
Така утеши точка дневник на здравей.
Така че това е вид на JavaScript еквивалент ФОРМАТ.
Така че, ако някога искате да инспектира вашите променливи
или виж какво се случва там, какво можете да направите, е, ако ние инспектира елемент,
е това, което искате да отидете да, и да отидете до конзола,
ще видите, че тя отпечатан здравей.
>> Така че можем да го има печатате каквото искахме.
Ако искахме да отпечатате фон дот фон дот стил,
ние трябва да сме в състояние да видите RGB тройна, че идва.
Или не.
Забравям как точно отпечатване на променлива подобно,
но трябва да бъде в състояние да отпечатате такива неща.
Това ще бъде много полезно за вашия pset когато
която се опитвате да манипулирате координира или какво ли още не.
Така че те също да промените това парче в клас.
Това е различно от последните години, така че Просто е хубаво да си TFS, или на TFS
в работно време по-скоро, защото ние сме вид обучение, заедно с вас, момчета.
Но дневникът на конзолата е супер, супер полезно за JavaScript миналата година.
Така че го обичам.
Научете се как да го използва.
Това е по-лесно за използване от GDB, така че трябва да бъде най-малко една точка плюс.
Но благодаря ви момчета, носещи със себе си.
Съжалявам, че ми примери за някаква причина
Просто не исках да сътрудничи с мен, но аз
Надявам се, че помага вид да сте по- по-малко в зоната на JavaScript.
И да ми изпратите вашите въпроси за следващата седмица, така че може да бъде супер ремонтиран,
и аз ще донесе бонбони и дори допълнително бонбони, защото това е нелепо.
Но вие, момчета са страхотни, и имат една страхотна седмица.