ROGER ZURAWICKI: Здравейте на всички. Мога ли да получа вашето внимание? Благодаря, момчета. Днес искам да говоря за Meteor. Това е рамка за JavaScript. Ще се преживява как можете да направи наистина готино уеб приложения. 

Преди да отида в JavaScript, аз просто Искам да кажа на вас, момчета, че това ще бъде - ще имат по-късен парче този семестър. Тя трябва да бъде около JavaScript. Мисля, че [недоловим] е първият ще покриване на уеб HTML PHP неща, преди да сме премести в JavaScript. И в CS50, JavaScript се счита като код на клиента. Така тя получава само тичам в уеб браузъра. 

Но благодарение на последните достижения в технология, ние сме сега успя да тече JavaScript като сървър, както добре. Така че това е създал наистина страхотно рамка, защото сега можете да напишете легитимно същия код за на клиента и сървъра. И когато се определят функциите на вашия сървър, вашият клиент може да повикат същите функции. И това го прави много по-лесно. Докато преди, ако сте с помощта на PHP на сървъра, JavaScript на лицевата край, трябва да се напише функция PHP и след това JavaScript версия на една и съща функция, за да направите същия вид работа. 

Така че, преди да започнем, искам да ви покажа една демонстрация на това, което Meteor може да направи за вас. Аз ще ви покажа демото, което е това, вие ще бъдете в състояние да създаде от Комисията края на този семинар. Ние просто отидете тук. Това е Leaderboard ап. Това е всъщност основава от примера Meteor, че ти дава. 

Meteor е много хубаво, защото, когато да го инсталирате като пакет, можете да основно поиграете с тези четири демонстрации. И класацията е първият от тези демонстрации. След семинара, аз ви насърчи просто да проучи други демота защото мисля, че те са наистина готино, и те ви покажа силата на Meteor. 

И така, какво е това, това е хоства на водачите. Това е просто откровено списък с имена. И вие можете да изберете хора. Те пожълтяват. И тогава можете да дадете тях пет точки. И вие ще забележите, че списъкът е сортираните, защото, както аз се отдавам повече и повече точки, сега съм на върха. Така че това е мястото, където ние започваме. 

И това, което ще бъде в състояние да отнеме от този семинар е малко по- функции съм добавят към на класацията. Ние ще разгледаме как да, както и добави пет точки на играч, ние можем изтриете играчи, можем да добавим нови играчи, и можем да изберем как искаме да ги сортирате. И всички те са много лесни API повиквания че Meteor предоставя за вас. Можете също така притежава функция тук да случайност резултатите. 

Така че това, което е наистина страхотно за тази е вие ​​може действително всички отидете на сайта. Ще го поставя в по-голям текст тук. One-радикално-олово erboard.meteor.com. И когато вие отидете на сайта, можете трябва да бъде в състояние да редактирате обекта, и всички ваши приноси ще бъдат видими за всички останали. Така че можете да - са момчета всички може да се свърже към сайта? Така че си поиграете с него. Отиди и започнете изтриването на някои имена. Вижте какво се случва. 

Така че виждате всеки може да играе. Това е само сигурността по подразбиране режим за Meteor. Вие виждате, че всеки може да промяна на данни един на друг. Не се притеснявайте. Meteor наистина има сигурност. Това е много лесно изпълнени функция, където можете да настроите потребители и данни за вход. Но точно сега, всеки, който посещава сайт може да се даде, тъй като много изтъква, както те искат. Така че аз винаги по този начин, тъй като това е един забавен начин да започнете. И тогава ние просто ще поговорим за детайлите, как Meteor прави това възможно. 

Така че аз отивам да покрие това, което е Meteor, и тогава ние просто ще трябва да покрие две предпоставки, че CS50 не е достатъчно застъпена. Но до края на срока, трябва да да се чувстват удобно с HTML, така и JavaScript наистина да получите вашите ръце мръсна работа с Meteor. И мисля, че това е просто един чудесен начин за още по-малко удобни учениците да правят окончателните проекти, защото те наистина може да останете в един език, и те да стигнем до видите промените на тяхната работят веднага. 

Така че този слайд показва само някои от основни технологии, които Meteor JS дава на вас. Meteor не е нова технология по себе си. Това е наистина един конгломерат от всички тези различни неща имаме в интернет. Както HTML, CSS, JavaScript, ние има някои технологии като Node.js, което е това, което ви позволява да стартирате JavaScript на задния край на вашия сървър, както и някои JavaScript библиотеки, като JQuery, за подчертаване. 

Всички те ще бъдат запознати с ти до края на семестъра. И ние също така да се използва база данни, наречена MongoDB, което е наистина популярната база данни сега за тези нови начинания. Можете да мислите за него като като MySQL, но той работи много добре с JavaScript. Има и някои други технологии тук и още много други не са изброени че всички интерфейс наистина добре с Meteor. 

Трябва да се сложи този слайд, защото Понякога имам объркване за това. Meteor е само JavaScript. Не е PHP. Това не е Ruby по релси. Така че, ако пишете код, ако искате да напиши проект Meteor, наистина Не можете да използвате Ruby код. Вие наистина не използвате PHP. 

Докато ние ще видим, че разликите в код и синтаксис може да не е, че различен, аз искам да подчертая пред вас, че Meteor, всичко, което е код само в JavaScript. И всичко, което ви покажа потребителят ще бъде в HTML CSS. Но вие не сте в действителност с помощта на някоя от на други езици, че друга семинари биха могли да покриват. Какво Meteor също е е уеб сървър. Така че дори и да не разполагат с никакви JavaScript, и просто искате да послужи CSS и HTML файлове, Meteor може да направи това за вас. 

И тук е връзката отново, за да на демо, че имам момчета Започнах да играя с. Но нека преминем към HTML. Колко хора тук имат никаква представа какво е HTML? OK страхотно. И това е напълно наред. Вие наистина не трябва да знам много за Дали защото ние ще отидем на използване на много просто. 

Това е, което простите HTML страница изглежда. Това може да бъде подобна на вашата Здравей, свят за HTML, докато ние започнахме в C с Здравей, свят. Аз не искам да се наблегне на подробности за какво HTML, какво главата, какво тялото, каква длъжност се прави там. Аз просто искам да подчертая, структурата, как имате тагове. И това е, ъглови скоби. И това е, когато имате Вашите дескриптори. 

Така че може да се наложи HTML документ. И тогава вие ще затворите HTML документ с наклонена черта едно и също нещо. И вие имате различни видове етикети. И забележете, че всички те са съпоставени. Ще трябва като етикет тяло а след това и в близост тагове тяло. А вътре в тялото маркер, че ще бъде съдържанието на вашата уеб страница. Така че тази уеб страница просто ще покаже в бял фон и черен текст Здравей, свят. Има ли, че има смисъл? OK. 

Сега отивам за бързо покриване на JavaScript. По думите на предишна TF, "JavaScript е най-добрият програмиране език в момента в съществуване. Други хора ще се опитат да ви кажа друго. Те са погрешни. "JavaScript е доста хубаво, и аз ще ви покажа защо. 

Така че това е класически пример започваме с в C. Имаме Здравей, свят. И ако забележите, че дори и да се свие това, което трябва да имат най-малко две реда код тук. Имам няколко реда код. Това може да стане много просто. Един ред в JavaScript с console.log, и след това си низ, Здравей, свят. 

Сега, въпреки че ние се движим към нов език JavaScript, почти всички от уменията, които сте научили от кодиране в C са пряко преносим. Така струни, идеята на низове в двойни кавички, това е един и същ. Точката и запетаята, че е същото. 

А чист черта за JavaScript всъщност е, че не се нуждаят от точка и запетая. Тя може да се досетите, че трябва да сложи точка и запетая там. Но това каза, че винаги трябва да се опита да сложиш точка и запетая там. Той се счита за добър стил. И също така, че няма основна функция. Можете просто да започне в началото на файла и прочетете нещата ред по ред. 

Тогава това е какво е необходимо да се направи че Hello, World програма. И след това забележите, че трябва да направи здрасти и след това пуснете здравей. С JavaScript, тя се счита интерпретиран език. Какво трябва да знаете е, че че няма решения. 

Не е компилация. Просто стартирате възел. И не забравяйте възел е програмата, която ще стартирате свой JavaScript на конзола, на черна кутия, а не на сайта. Така че просто го дам файла, и това е ще отпечата Здравей, свят. 

Аз всъщност ще направя малко демо на че за вас точно тук. Така че нека да преминем към моя Node.js терминал. OK. Нека да се преместим тук. Така че аз ще започна възел. И аз ще ви покажа само секунда как да се получи, че инсталирани, ако не го направиш. Позволете ми да направя, че малко по-големи. OK. Надявам се вие ​​да видите. 

Така че мога да пиша код, както направих аз преди в console.log. Здравей, Роджър. И забележи, че не е нужно да се направи точка и запетая, но след това се получи това странно неопределено нещо. Ами всъщност, да не говорим за неопределеното нещо. Нещата, които искам да забележите, е, че вие не се нуждаят от основна функция тук да започне да тече код. И няма край наклонена черта. Има някои малки функции, които JavaScript може да направи за вас. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: О, да. Съжалявам за това. И тази стрела просто означава възел е готов за друга команда. Така че можете да го направите проста математика, като едно плюс едно. И точно както в C, тези математика символи са по същия начин. Мога да го направя console.log на число. И тогава се отпечатва два. JavaScript е хубаво в този смисъл, защото въпреки че две е едно цяло число, като в C, ако е с ФОРМАТ две, вие ще получите съобщение за грешка. 

Но JavaScript знае, о, ти си печатате нещо. Отивам да се нуждае от низ. Така че нека да конвертирате, че две в низ за вас. И вие можете да направите някои странни неща и след като хай плюс две. Това е просто още един пример за това как две могат да бъдат превърнати в там. 

Така че с това от пътя, нека да просто покриване на малко повече JavaScript. Така че в C, имаме видове. Всеки път, когато ние създадохме нова променлива, ние Трябва да кажа, че е това е Чар * или низ в случай CS50. Или ако имахме десетичен номер, ние трябваше да се каже плувка. Ако нямаме нужда от Булева, ние трябваше да се каже, б. И тогава, след като имахме нещо, което е Б, тя трябваше да остане на булев. Ние не може да магически го смените с едно цяло число, ако не пише в скоби, ПНА от б. 

В JavaScript, няма видове. Просто мисля за него като VAR. И VAR е как да се създаде нов тип. Така че тя може да има VAR и е низ, VAR п е число с плаваща запетая, и VAR б е вярно. И едно нещо, което не може да се направи в C е Сега мога да кажа, след тази линия, б е равна на цяло число. И това работи добре. Има предвид, че в C, той ще каже като Вашата число не е булев. Не мога да направя това за вас. Или [недоловим] ще хвърли грешка. 

И аз може бързо да се върне в възел и покаже някои от тази функционалност. Така че мога да имам VAR а. Наречете го "Apple". Така че сега, когато се отпечата, Получа моя низ, "Apple". Но аз мога Също така сега кажа равнява на три. И забележи, че няма грешка. И сега се равнява на три. Всякакви въпроси досега? Да. 

ПУБЛИКАТА: Изчакайте, така console.log е основно ФОРМАТ, нали? 

ROGER ZURAWICKI: Console.log е вашият ФОРМАТ. 

ПУБЛИКАТА: Точно така. Така че как така, ако просто напишете в осем или [недоловим], какво означава, че [Недоловим]? 

ROGER ZURAWICKI: Точно така. Така е - нещата в зелено получава отпечатан в конзолата. И това, което ще видите е следващия когато ние се движат в интернет страница, ние не ще се прави - JavaScript ще бъде с HTML шаблон, който ще покрива в Meteor част на семинара. И това е мястото, където може да се каже, дай ми стойността на една, и тя ще постави в вашия сайт. Защото всеки уеб браузър всъщност има малко конзола. И ако сте разглеждали много внимателно, ще получите някаква информация, като вашата ФОРМАТ появява се там с всяка уеб страница, която зареди. 

ПУБЛИКАТА: Как взехте към екрана на черупка? 

ROGER ZURAWICKI: Така че има команда нарича възел, и той идва с Meteor. Така че аз просто ще се откажат от там. Node е програмата, която тече JavaScript. Ако отидете в meteor.com, вие можете да инсталирате Meteor, и Meteor идва с възел. Защото Meteor е просто колекция на всички тези софтуерни пакети. Когато стигнем до нашия пример, аз ще го направя ходи всеки чрез инсталиране Метеор, и след това можете да играете с възел себе си. Добре, чудесно. 

Така че друга голяма възможност за работа с JavaScript се вериги са еднакви. Доста точно същото. За вериги, докато примки, направете докато цикли, ако друго. Всичко е същото и с тези скоби. Това е същия синтаксис. В случай на за контур, малкото подробности, които трябва да се обърне внимание да се вместо Int I е равно на 0, ние трябва да кажем, VAR I е равна на 0. Но това е така, защото на променливите видове, за които говорихме преди. 

Забележете, че става ФОРМАТ дневник, а console.log. И ние не трябва да направите, процентът р н наклонена черта и след това преминават в I. Можете просто да кажа, че. И това ще отпечата номерата от нула до четири. Ако вие искате да опитате това, защото те изведе добра точка. Ако искате да изпълните този код на вашия собствен браузър, бих препоръчал, че всеки отваря Google Chrome. Google Chrome или всеки уеб браузър наистина, но аз като Google Chrome защото това е много стандартизирани. 

Можете да отидете, аз вярвам, ако щракнете с десния кликнете върху всеки сайт, само в празно пространство, вие ще видите опция наречен Огледайте Element. Това е обикновено последната една. И когато щракнете върху него, вие трябва да получите нещо на дъното се появи тук. Позволете ми да увеличите тук. И ние имаме няколко раздели тук. В едно те е грижа за е конзола. 

И това е една конзола JavaScript че сега можете да работите. Чудесно. Така че мога да пишете в същите неща Бях преди да пишете в възел. Едно плюс едно е две. Var а е равно на "Apple". И тогава щях да отпечатате, и е "Apple". Така през всеки уеб браузър, Firefox, Chrome, Safari, каквото и да се използва, тъй като стига да имате достъп до JavaScript конзола, на един и същ вид код бягах в възела, които може да работи в собствения си конзола. 

ПУБЛИКАТА: [недоловим]? 

ROGER ZURAWICKI: Как да стигнем до конзолата? Вие трябва да кликнете с десния бутон върху празно пространство на страницата, и след това да отидете до Огледайте Element. Така че всъщност, бих искал вие момчета просто се уверете, че можете да Огледайте Element в Chrome. И виждате, когато напишете в някои код в конзолата че той работи правилно. Чувствайте се свободни да задавате всякакви въпроси, ако нещо, което не е ясно тук. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Всякакъв вид, нали. Има само един вид за всички променливи в JavaScript. И когато трябва да се декларира променлива, вие казвате VAR. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Да. Така е, но в JavaScript, това е много умни за разпределяне на паметта. Не е изчистване. Не е безплатно. Така че не е нужно да се притеснявате за това. Това е друга хубава черта, че JavaScript ви предоставя. 

Така че бих искал да продължиш напред. Ще бъде ли ОК? OK. Чудесно. 

ПУБЛИКАТА: Аз съм просто имат проблеми намирането на [? Огледайте Element. ?] 

ROGER ZURAWICKI: Така Safari външен вид малко по-различно, но смятате ли, Трябва Chrome или Firefox? Тези, които са по-лесно такива, за да се работи. И за вашите проекти, аз препоръчвам залепване с един браузър, защото вие ще получите много бъгове почти защото всеки браузър лакомства JavaScript HTML малко по-различно. Така че аз мисля, че животът ви ще бъде много по- по-лесно, ако се придържате към Chrome, защото тя е на разположение на всички машини. И това е доста популярен браузър. OK? 

Така че следващата тема, че ние трябва да покрие в JavaScript - Съжалявам за форматирането тук. Аз трябваше да се простират на слайдовете, за да съответстват на проектора широкоекранен. Но сега бих искал да говоря за как го правиш функции. В C, ние трябва да декларират всяка функция. Подобно на вътр добавите, и това отнема едно цяло число в х, и Int Y, а след това ние ги добавите и го връща. 

В JavaScript, функции са всъщност друг тип променлива. Така че ние просто кажем, VAR добавите, и той е равен на функция. A функция, която заема х и у. И какво общо има тази функция направя? Тя връща х плюс база през точно същото синтаксис, както в C. И забележите, че в JavaScript, няма да бъде казано какво, Функцията връща, защото, тъй като променливи не са видове или иначе, тя това не е наистина продуктивни, предполагам, да се посочва цялото си видове в своите функции. И тогава, когато ти се обадя функция, тя е точно същия синтаксис като C. Можете просто минават през вашите два аргумента. Бих искал да опитам това в моя възел. Мога ли да променя слайда? 

ПУБЛИКАТА: [недоловим]. Ще можем ли да получите копие от слайдове? 

ROGER ZURAWICKI: Да. Така че нека да се върнем към възел. OK. Така че аз ще кажа VAR добавка се равнява на функция. Като една Х, като на годишна. И тогава се знае, че на отчета която не е завършена. Така че в възел или във вашата конзола, вие ще забележите, точка точка точка. Така че можете да продължите да въвеждате вашия код. И сега аз ще кажа връщане х плюс Y. И след това затворете скобата. И в момента, да затворя скобата, тя вижда, че изявлението е завършен. 

И сега мога да кажа, добавете една и две. И аз ще взема три. Имайте предвид, че ако просто се добави, то ми каза, че това е функция. И едно нещо, само за да се обърне внимание на е, ако ви го дам грешен номер на аргументи, той ще направи. Тя ще работи, но вие може да получите някои наистина странни резултати. Нещо като стойност за боклук, можете да мислите за него. Така че, моля отидете напред и опитайте това във Вашите браузъри. 

ОК, така че в интерес на време, аз ще Сега да преминем към следващите характеристики в JavaScript. Така че ние сме говорили за функции. Ние говорихме за контури, ако отчети също. Синтаксисът е същият като С и променливи. И сега искам да говоря за масиви. Съжалявам, че слайдовете имам малко отрязани. Но всъщност, в първата част, всичко, което трябва да работи. 

Така че ние имаме друг тип за променливи, наречени масиви. И ние използваме квадратни скоби да ги означават. Така в първия пример, VAR ARR, празен масив. Това е празен списъка, така масив не съдържа елементи. И вие също може да има масив с три струни. В C, всеки елемент в масив трябва да бъде един и същ вид. 

Но тъй като в JavaScript има само един вид, масиви може действително има различни видове ценности. Както тук, имаме масив с плувка, на булев, и вътр. Начинът, по който се получи дължина на масив, вие всъщност не трябва да използвате размер на или нещо подобно. Можете просто да кажа масив и след точка, за дължина. И тази точка дължина, можеш да се сетиш това нещо като структура, как всеки масив има поле, допълнително променлива вътре в него, наречена дължина, които следи за колко време ви е масив. 

Така че аз съм просто бързо ще отидат в възли и ви покажа едно и също нещо. Така че мога да имам един масив. Тя може да бъде празно списъка. И това ще ме отпечатате резервно празен списък. Чудесно. Сега мога да кажа, че на масива има един, и 2.3, и вярно. Така че всички различни видове. И забележите, че работи добре. Масивът се върна опори всички стойности, аз го е дал. 

Ако исках да се получи на първия елемент на масив, синтаксисът е всъщност същите като в C. Можете Може да се каже масив нула. И вие получавате едно. Мога да кажа същото и за масив две, а аз получавам вярно. Ако правя нещо извън масива, JavaScript е безопасно език защото не ще получите грешка на сегмента. Ще получите неопределено. 

И това неопределено, можете да вид от мисли за него като нищожна. Но тя може да бъде много досадно, когато код, защото ще трябва да се провери дали почти всичко, което правите, вие работа с е недефинирана. И ние ще видим някои примери за това, когато ние работим в Meteor. 

Въпреки масив четири е неопределено, Мога да го зададете стойност. Така че аз ще кажа, че се равнява на една. И след това, ако отида в масив, I има допълнително стойност там. И забележете, че масив три, които също е недефинирана, остава неопределено. Така че аз сега имам един масив с дупка в средата. Но ако аз отпечатан масив четири, Бих се получи един. Ако го бях направил масив три, получавам неопределено. 

Така че хубава черта, че JavaScript ви позволява да направите, е, че списъците може промените размера. Масивите, масиви са списъци, те променят размера. И вие можете да определите всяко място вътре в тях. И всички пропуски ще бъдат попълнени с тези недефинирани стойности. 

Така че ние сме говорили за масиви. Сега, последното нещо, което искам да покрива в JavaScript, и това е много важно за разбирането на кода, който Отивам да ви покажа, ще бъде обекти. И обекти са термин в - По принцип, те присъстват в много езици за програмиране. И всеки език за програмиране, обича да мисли за тях малко по-различно. 

Но мисля, че за Meteor, добър аналогия е C STRUCT. В C, ако искаме да намерите STRUCT студент, ние ще трябва да уточни всички нещата вътре в него. Така че трябва да има име. Тя трябва да има една година. Тя трябва да има пол. Но ние също така трябва да го даде видове от всички тези неща. 

И сега, че ние имаме тази форма за на структура, наречена студент, ние можем да имаме нова структура, а след това можем ръчно казват това, което всяка една от областите са. И това е мястото, където ние използваме точка име, дот година, точкова пол. И тогава ние просто, в последния ред на код тук, аз съм просто отпечатване на име на студента на структурата. 

В света на JavaScript, е налице Няма такова нещо като структура на студент. Вие не генерират предварително зададена структура. Вие всъщност само в тези скоби, ви кажа какво е всичко. И това е този странен нотация с дебелото черво и след запетаята, но ще свикнете с него съвсем скоро. 

И това всъщност е много лесно, гъвкав начин само манипулиране на обекти. Можете да забележите, че ако искам да се получи име от S, аз просто правя s.name. Има ли някакви въпроси относно това? Това обикновено е много объркващо тема, когато ще се въведе на хората да JavaScript. Ще направя някои примери за това в възел. Да? 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Значи правиш имат например, множествена променливи от този тип. 

ПУБЛИКАТА: [недоловим]. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: OK. Така че предполагам, че начина, по който ще отиде за е вие ще постави обекти в масив, и сега ще имате масив от обекти. Това отговаря ли на въпроса ти? 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Да. S е един обект. Така че можем да отидем в възел и просто поиграете малко. 

ПУБЛИКАТА: [недоловим]? 

ROGER ZURAWICKI: О, OK. Така че, ако ме питаш кои класове са, класове се третират по различен начин, и те имат наистина странно схема наречен прототипи, които не го направите трябва да знаете за. Не е фиксиран начин да го направя. Така че, ако искате да генерирате множество, вие просто вид имат функция или нещо такова. Можете да генерира своя собствена функция. И ти ще се върне един обект. Това би било най-лесният начин да го направя. Това прави ли смисъл? OK. Чудесно. Така че след като имаме разбиране на JavaScript обекти, те са - о, да. 

ПУБЛИКАТА: [недоловим] Например, каква е разликата между "Roger" с двойни кавички сравнение [Недоловим] с единични кавички. 

ROGER ZURAWICKI: OK. Така че това е в C, имаме сингъл кавички, представляващи символи, и двойно кавички, представляващи струни. JavaScript всъщност хвърля това далеч защото можете да имате с низове единични или двойни кавички, а има Няма такова нещо като един Чар. Но ако просто копират същите C код, JavaScript ще лечение на него само глоба. Което е защо го третира като - Ето защо мога буквално порт кода в този смисъл. 

И аз искам да ви покажа един пример на по-сложен обект. Така че можете да забележите, че един обект може да има струни като стойности. То може да има друг списък от стойности. Тя може да има списък на Предмети като стойности. Има наистина няма ограничение за това. Така че тук, това е просто една добра демонстрация за това как можете да получите много различни видове случват всички в един обект. Това прави ли смисъл? 

Сега, вие също може да има масиви от обекти. И тук е нещо подобно на това, което попита, ако може да има обекти на от същия тип. Но проблемът е, че няма фиксиран формат за обекти в JavaScript. Така че трябва да ги посочите себе си. И вие трябва да се уверите, че те са еднакво. Така че тук, когато се създаде обект, имам за да се уверите, че всеки един има име, и всеки един има къща. 

И тогава имам един набор от тези, и че може да бъде моята къща. И след това тук можете вид Вижте Документацията за контур става. The за контур е просто един наистина общ начин да преминават през масив в JavaScript. Забележете, че този модел е много подобен до C еквивалент, където можете Трябва Int аз равна на нула. аз е по-малко от дължината. И тогава аз плюс плюс. 

Това е почти един и същ код, с изключение на някои детайли. Същото прави и всеки да разбере какъв обект е? Просто мисля за него като за C структура. И начина за достъп до полетата е само с точка. И толкова дълго, колкото можете да си спомня как да използвате точка, всичко ще е наред. 

ОК, така че сега може всеки прочетете този линк? Това е линка към проекта. Има ли някой има проблеми виждам връзката? ОК, нека да го смените след това. Това не е всичко - Да, това е може би най- Най-лесният начин да го направя. Чудесно. 

Така че, ако отидете на този сайт, трябва да има има някои инструкции, че ще отида за това как можем да инсталираме Meteor и да получите нашия проект проба бягане. Искам да се уверете, че всеки има връзката надолу, преди да се движи. Мога ли да продължим? Добре, чудесно. 

Така че аз съм тук в сайта. Ще забележите, че във файла Readme, ние имаме някои инструкции за това как да се създаде та. Трябва да бъде или в CS50 уред или само на Mac. Windows няма да работи. Но в общи линии всичко, което не е Windows трябва да работят с тях инструкции добре. Но аз мога да го направя малко голяма, както. 

Така че вие ​​ще изпълните първото чифт от команди. Тези момчета просто ще инсталират Meteor. Мога да отида на моя терминал. И ако аз тичам същото нещо сега, Аз вече го имате инсталиран. Така че това е малко по-кратък. Може да отнеме малко по-дълго за вас, момчета. Но искам първо да се уверите, че имаме Meteor бягане. След Meteor е инсталиран, трябва да да бъде в състояние да получи възел в конзолата. 

ПУБЛИКАТА: Искат за въвеждане на парола. 

ROGER ZURAWICKI: Това ще бъде вашата потребителска парола, ако сте на Mac. Той просто се нуждае от разрешение за промените някои системни файлове. Така че въпросът е, ако той ви пита за парола, това е просто ви питам за вашето потребителско име и парола, когато влезете във вашия Mac. И това е така, че можете да променя системните файлове. 

И когато сте готови, можете да преминете към следващата стъпка, която ще копира примерен код, аз имам от сайта. И вие ще получите нова директория на вашия домашна директория, наречена табло, и ние можем да започнем да работим от там. Така че аз съм просто копиране и вмъкване на тези команди в моя терминал. И за мен, аз вече го клонира. Така че точно сега мога да се движа в табло. И аз трябва да има няколко файлове там. Някакви въпроси? 

ПУБЛИКАТА: [недоловим] не работи. 

ROGER ZURAWICKI: О, може да трябва Git инсталирана също. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Моля? 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: О, OK. OK. Това е така, защото може да се наложи да бъде влезли в GitHub, за да получите този линк. Ако вие може да видите, че най-лесният начин да го направя тогава аз ще кажа е, свали ципа. И това просто ще изтегли всички файлове. И след това, след като го сложите в изтеглите или вашата домашна директория - Препоръчвам я сложите във вашата домашна директория, така че всички ние можем да тичам същите команди. Докато имаме файловете, ние ще да бъде в състояние да започнете да работите с тях. Нека да знаят, ако хората, които имат проблем с изтеглянето на файлове. 

ПУБЛИКАТА: Чрез домашна директория, искаш да кажеш - 

ROGER ZURAWICKI: Така домашна директория би бъде Джон Харвард, ако сте в CS50 на уреда. За да стигнете до вашата домашна директория, Просто напишете в C. 

ПУБЛИКАТА: [недоловим] CS50 уред [недоловим]. 

ROGER ZURAWICKI: Да. Вие искате да стартирате командите в терминала. 

ПУБЛИКАТА: [недоловим]. Аз имам една грешка, която казва не такъв файл или директория. 

ROGER ZURAWICKI: Можем да вземем един бърз счупи и просто се уверете, че всеки има инсталиран Meteor, и аз ще просто да се опита да помогне на хората. Моля, опитайте се да си помагат един на друг, ако бягаш в проблеми. За съжаление, да. Вие сте и двамата в уреда? 

Публика: Да. Имам Риса 

ROGER ZURAWICKI: OK. Ако се върнете към сайта, отида превъртете нагоре към върха. И там е това HTTPS. 

ПУБЛИКАТА: Копирайте това? 

ROGER ZURAWICKI: Да. И след това, което искате да въведете в Git клонинг. Така че, ако натиснете Control A - 

Публика: Тук? И направи [недоловим]? 

ROGER ZURAWICKI: G-I-T. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Git и след това клонинг. Така че това е много подобен на командата, която има по-горе, но URL промени. Така че, преди да е станало това, сега е това. Нека актуализиране на - Да. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Това е изтеглен. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: О, така че не клонираме правилно. Аз ще оправя това. Има една грешка с опитва за изтегляне на файлове. Позволете ми да се актуализира командата за вас, момчета за да мога да се уверете, че той ще работи. Съжалявам за това. Тя трябва да бъде един и същ за Mac-ове или CS50 уреда. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Аз съм актуализирал команда за номер две, ако обновите страницата. И с това, URL, вие трябва да бъдете можете да изтеглите файловете. 

ПУБЛИКАТА: Така че, ако все още сме изтегляне [недоловим]. 

ROGER ZURAWICKI: Ако сте все още изтегляне Meteor? 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Да, ако искате да се разработи на вашия Mac. Но имате нужда от разработчика Xcode инструменти инсталирани. Аз бях тестван тези команди на CS50 уред, така че аз мога да гарантирам че ще работи. Да. позволете ми да отида и да ви помогне. 

ПУБЛИКАТА: [недоловим]. Давам си паролата. Това е Mac. И тогава аз правя [недоловим]. 

ROGER ZURAWICKI: OK. Бих опитайте се да стартирате всички команди единствено в терминал CS50 уред. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Бих да работи нормално първо на терминала, от CS50 уред, и след това терминала Mac. 

ПУБЛИКАТА: Така че, ако го направя на CS50 уреда така, [недоловим]. 

ROGER ZURAWICKI: Бих искал да се премести , но ако хората все още имат неприятности за създаване Meteor, Кевин е по- от щастливи да ви помогне да момчета, Kevin в сивата риза. Това, което ние трябва да имаме, е, че ще тече последната команда, номер три, в нашия терминал. Когато правим това, ние ще тече Meteor. 

И ти трябва - О, аз вече имам Meteor бягане. Така че няма да позволи - нека ме просто затворете другия ми Meteor. Когато стартирам Meteor, вие Сега трябва да видим, че - можете да видите текущата директория че това е сервиране. И сега тя ще каже на сървъра се изпълнява на http://localhost. Това е URL адреса, който искате да поставите в във вашия уеб браузър. 

И по този URL, вие трябва да бъдете в състояние да достъп до един хубав малък табло. Така че забележите, че това е по Localhost, което означава, че ако го направите, всеки промени, вие няма да видите промените на другия. Има предвид, че на сайта ви показах в началото, бихме могли да получите промени на всеки, защото всеки е достъп до същия уебсайт. 

Така че нека просто да отидете на [? дума?] 3000. Така че трябва да бъде в състояние само да потвърдя че функционалността работи. Можете да изберете различни хора, и можете да ги дават различни точки. Така че даваш на някого точки. Можете също така да се види, че те се издигат в ранг. 

Сега, в интерес на време, има три функции, които съм прилагане. И ние отиваме да приложат изтриване потребители като първа нашата функция. Но преди да преминем, са Има ли някакви въпроси? Имал си ръка нагоре. Да? 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Можете ли да проверите Meteor, че е инсталиран? 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Local домакин 3000? И вие сте в CS50 уреда? Мога да го направя - не е нужно да бъде на Mac. Това ще работи в уреда. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: в нормално уеб браузър, да. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Дали Meteor бягане? Така че, ОК, има разграничение тук. Ако сте го работи във уред, което трябва да направите Localhost в рамките на уреда. Ако сте го изпълняват на вашия Mac, както аз съм, тогава мога да направя моя Mac Google Chrome. Но ако сте с помощта на CS50 уреда, което трябва да направите всичко в уреда. Така че трябва да използвате Google Chrome в уреда. 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Това е все още не работи? 

ПУБЛИКАТА: [недоловим]. 

ROGER ZURAWICKI: Така че просто да се повтаря, как да получите достъп до уеб сайта сега. Имате URL тук Localhost 3000. Ако сте в CS50 уреда, трябва да отворите CS50 уред за Google Chrome. И в това Google Chrome в рамките на уред, можете да напишете, че URL, и вие трябва да видите табло. Така че аз просто ще го отлагам да отстрани тук малко. И сега, аз отивам да си отворя текстов редактор тук. Така че нека просто се уверете, че кодът е в ред. OK. Чудесно. 

Бих искал да се преведе през кода малко. И първия файл Бих искал да започна С Е leaderboard.html. Вие ще бъдете в състояние да получите този код след семинара, така че аз просто искам да покажа ви на компютъра ми какво става. Така че аз се надявам, всеки може да види това. Така че в самото начало на файла, ние Разполагаме със главата и заглавието, което е подобно на това, което видяхме във всеки HTML документ. И тогава ние ще трябва тялото маркер тук. 

Това, което сте избрали е основният тялото, основно това, което е ще се показва. Но има някои нови несъществени елементи, HTML неща, и която е в двойни ъглови скоби. И това са шаблонни тагове. Така че ще видите тук тази скоба скоба ново табло. И това е нещо - мисля за него като се обадите функция за HTML. 

Това е специална версия на HTML. Това е версията, която използва Meteor, които Ето защо можете да покажете различен неща, като например в класирането имена и бутони. Но табло ви казва да отидете на шаблон с класирането име. Така шаблон не се извежда от себе си, но това е функция, така че ще се обади. И вие ще замени във всичко това код точно тук в ранглистата. 

Най-интересната част на табло тук е само тази таблица. Ако просто го четете, четете този код на глас, тя трябва да бъде интуитивен защото табло, всички ние имаме тук е една маса. Това ID клас нещата, които не правим трябва да се притесняваш. Просто знам, че има глава на маса. Това е този на Рекламен. 

И го намери име и резултат. Всички тези тагове, като thtable, Рекламен, вие просто ще научите, като отидеш заедно. Това не е важно да запомните тези, защото можете просто да влезете справки онлайн. Или до края на семестъра, те просто ще бъде много запознат с вас. 

След заглавието на таблицата, на част, която искам да привлека вашето внимание на това з маркер. Защото това е в двойни скоби, това е шаблон. Това значи, че за всеки от играчите, каквото и играчи се, ние трябва да го покажете. И отиваме на шаблона играч. 

Ако превъртете надолу малко повече - Надявам се, че всеки може да види това. Имаме шаблона играч. И този шаблон, основно определя клетка от таблица, където ще ви постави в името тук и резултата. Увеличение сега, можем да видим, че това парче код - и това беше нашият играч там - определя една от тези клетки. Всяко нещо, което щракнете става жълто. 

Един прост начин да го променя сега. Уверете се, че Meteor все още работи. Meteor трябва да бъде сървър процес, така че можете просто да я оставите работи, когато сте развили. Да кажем, че аз исках да се промени всички имена или резултата. И аз бих казал, че отивам да добавите точки тук. Така че промяната направих тук е, вместо просто резултат, I добавите резултат космически точки. 

Отивам да намалите, и аз съм ще спаси моето досие. И след като запишете файла ми, имам нужда да се уверите, Meteor работи. Съжалявам за това. Искам да ви покажа редакции се извършва в реално време. Така че аз просто ще се промени някакъв текст. Кликнете върху един играч. Слагам я във всички капачки. Би трябвало да бъде, че ако се работи правилно, когато го спаси, да го ще се актуализира. 

О, мисля, че точно сега проблемът е Аз не съм в правилната директория. OK. Съжалявам за това. Така че тук, това, което забележите, е моята промяна премина през. Сега кажа, че искам да се върне на промяната. Искам да се върна към това, което имах. Аз съм просто ще го напишете нормално. Кликнете върху един играч. 

В момента, аз го спаси, на сайт освежава за мен. И виждам, ми климата върху сайта незабавно. Това е наистина полезна функция в отстраняване на грешки, защото сега Не е нужно да - когато пишем C код, не само ние направихме Трябва да запишете файла, но ние трябваше да направи го и след това го стартирате отново. Meteor е много хубаво, защото за разлика от C, момента, в който ви спестим HTML или JavaScript файл, промяната се появява веднага. 

Един въпрос е, че при тези шаблони, как мога да получа стойностите като играчи или изберете име? Ако увеличите тук в моя код, Виждам това за всеки играч. Така шаблона знае, че Имам играчи по някакъв начин. И тя знае, че има избрано име. Откъде дойде това? Това идва от JavaScript. 

И ако отидете на leaderboard.js, това файл, сега, когато отида тук, ние имаме дефинирани няколко команди. Това е специален Meteor синтаксис. Забележете, че не е нужно Vars или нещо подобно. Но това са само structs при structs при structs или тези обекти. И всичко, което съм дефиниране е шаблона наречена на победителите. 

Leaderboard трябва да получат нещо, наречено играчи. И това, което е на играчите? Това е каквото и този израз връща. И това, което е избрано име? Това е малко повече код. Подробностите от кода ние ще покриване на малко по-късно. Но точно сега искам да се разбере че в този кодекс, ние сме като играчи, и ние сме го придават стойност. В този случай, това е функция че се изпълни. Така че можем да вземем стойността обратно когато стартирате функцията. Това е дневник. Това прави ли смисъл? 

Мога да се променя начина, по който това е сортиран. Ето, там е един вид обект. И какво е това, казва се, че ще се справи с резултат низходящ първи и тогава Име Възходящо. Ако промените това на едно, то се случва да сортирате резултат възходящ. Така нула трябва да бъде на върха. И когато я увеличите в моя сайт, ние Сега виждаме, че на сайта се актуализира. И резултатът е изкачване. 

Следващата функция, аз просто искам за покриване е кликване нарастване. Няма интерес от време, няма да го направя да бъде в състояние да покрие повече от Метеор код, но има изобилие от ресурси на разположение, и Аз ще бъда тук след семинара. Но аз просто искам да се покрие позициите в събитията. Този синтаксис ще научите Малко по-късно в лекцията. Това е JavaScript. 

Просто казваме, когато стигнем едно кликване, и това е на нарастване, това хеш просто означава, ID. На етикета на нарастване ID, след това ние искаме да се актуализира - ключовите думи, които искате , за да гледате е обновяване и изберете и играч. Така че кой играч избран, ние го актуализира. И това, което ние правим, е да увеличите нейният резултат от пет. И това ще опише функционалността имаме тук. 

След края на този семинар, ние ще можете да видите някои повече код. Но да се върна към моята цел, която искам да да промени мястото, исках тук да добавите бутона за премахване така Мога да изтриете играча. Така че, за да направи това, имам нужда да направите две неща. Имам нужда да се актуализира HTML, актуализира видите, това, което се показва на потребителя, и след това има някои JavaScript, че когато бутон е натиснат, Meteor ще да се направи нещо. Това ще премахне този играч. 

Така че има много парчета код които имат основно вече е направил за мен. Ако аз гледам тук, вече има начин за получаване на избрания играч. Ето тези неща, ако можете да го видите. Така че, ако аз просто - Отивам да имаме още едно събитие. Така че аз отивам да копирате това, което имам. Тъй като това е списък, Просто имам нужда от запетая. 

Така че сега аз отивам да натиснете бутона Кутия. И тогава вместо играчи актуализация, Отивам да правя играчи изтриете. И всички играчи изтрият нужди е избран играч. Така че тази функция е всичко, което трябва. Аз трябва да добавите някои HTML тук все пак. Така че, ако превъртите надолу, тук, това е мнението на HTML. Имахме нещо тук, което е маркер. Не е нужно да се притеснявате за това. 

Какви въпроси да ви е това ID нарастване. И това е, което ни позволи да се каже, когато ние кликнали увеличение, ние трябва да даде пет точки. И ще видите, че това е един бутон. Това е, което означава BTN. И текста на бутона е даде пет точки. Така че това, което аз ще направя, е, че съм ще копира тази линия. Отивам да промените ID да изтриете. И аз отивам да се промени текст тук, за да изтриете. 

Така че се уверете, че всичко е спасен. Искам да се върна в моята JavaScript за да се уверите, че имам изтриете наредени тук. Добре. Така че аз отивам да спаси и двата файла. След като запазите и двата файла, ние може да се върне към дъното. И сега виждаме, ние имаме бутон за изтриване. И още една стъпка. Забелязвате ли може да получите грешка, защото когато щракнете изтриете, нищо не се случва. 

Един от начините да трасира това е да отидете обратно към Огледайте Element. Правя това нарочно така че можете да вижте как можете да трасира нещо. В Огледайте Element, имаме всички от нашия текст тук. Искам да се върна на конзолата. И какво се случва, когато отида тук се да получа някаква грешка. Тя казва, че няма метод изтриете. 

И така, какво казва, е, когато отида обратно към кода, се обадих играч изтриете тук. Изтриване всъщност не е правилната команда. Така че, за да разберете каква е правилната команда е, там е API Meteor. Документацията, аз искам да ви посоча момчета, за да е точно в meteor.com. Така че аз го имам тук. Това е точно така, вие знаете къде да научите повече. 

Има линк към документацията. И в общи линии, не мога просто намирам за изтриване. И това, което виждате, изтрийте всъщност се премахне. Това е командата, която Трябва да се обадя. Така че сега ние знаем, че, аз отивам да променим това изтриете, за да премахнете. Така че сега, когато се върна в моята класация сайт, аз отивам да кликнете изтриете, и сега ме няма. Има не повече Roger. И мога да продължа да изтриете всеки едно име, докато не остана нищо. 

Така че това беше малко преглед за това как да използвате Meteor. Ще се учим много повече JavaScript и HTML необходимо да се направи да изглежда по-красива, които ще разгледаме в тази седмица [? парче?] определен за HTML и JavaScript в следващия [? парче?] настроен. 

Така че не се притеснявам, ако не всички от тези неща идва лесно за вас. Тя ще от време на окончателният проект. Благодаря за показване нагоре. Връзката ще се актуализира най-скоро след семинар, така че можете да видите някои повече примери, които съм изпълнявани от това как за да получите по-напреднали класирането че имам на този сайт тук, в една радикална-leaderboard.meteor. Благодаря. 

[APPLAUSE]