Роджер ZURAWICKI: Привіт всім. Чи можу я привернути вашу увагу? Спасибі, хлопці. Сьогодні я хочу поговорити про Meteor. Це основа JavaScript. Ми будемо йти шляхом, як ви можете зробити дійсно здорово веб-додатків. 

Перш ніж потрапити в JavaScript, я просто хочу розповісти вам, хлопці, що це воля бути - ви будете мати більш пізньої зібрати в цьому семестрі. Це має бути близько JavaScript. Я думаю, що [нерозбірливо] спочатку збирається покрити веб HTML PHP матеріал перш, ніж ми перейти до JavaScript. І в CS50, JavaScript вважається як клієнтського коду. Так що тільки отримує працювати в веб-браузер. 

Але завдяки останнім досягненням в технології, ми тепер вдалося втекти JavaScript як сервер, а також. Так це створило дійсно здорово рамки, тому що тепер ви можете написати законно і той же код для клієнт і сервер. І при визначенні функцій у вашому сервер, клієнт може назвати тих, ж функції. І це робить його набагато легше. Якщо раніше, якщо ви використовуєте PHP на сервер, JavaScript на передній кінець, ви повинні написати функцію PHP а потім версія JavaScript з та ж функція, щоб зробити Аналогічна робота. 

Тому, перш ніж ми почнемо, я хочу щоб показати вам демо, що Метеор може зробити для вас. Я покажу вам демо, що і Ви зможете створити на Кінець цього семінару. Ми просто йдемо прямо тут. Ця програма лідерів. Це насправді засновані з прикладу що Метеор, дає тобі. 

Метеор дуже приємно, тому що, коли ви встановити його у вигляді пакету, ви можете в основному грати з ці чотири демки. І лідерів є Перший з цих демонстрацій. Після семінару, я закликаю вас всіх просто досліджувати інші демо тому що я думаю, що вони дійсно здорово, і вони показують вам владу Meteor. 

Так що це, це розміщений на лідерів. Це просто відверто список імен. І ви можете вибрати людей. Вони жовтіють. І тоді ви зможете дати їм п'ять очок. І ви помітите, що список відсортований тому що, як я віддаюся більше і більше балів, я тепер на самому верху. Так що це, де ми починаємо. 

І те, що ви будете в змозі відняти від даного семінару є дещо більш особливості я, додані в Лідерів. Ми будемо покривати, як, а також додати п'ять очок для гравця, ми можемо видалити гравців, ми можемо додати нових гравців, і ми можемо вибирати, як ми хочемо, сортувати їх. І все це дуже легко дзвінки API що Метеор надає для вас. У вас також є можливість тут у випадковому бали. 

Так що це дійсно здорово про це є ви, хлопці, може насправді всі зайти на сайт. Я покладу його в більшій тексту тут. Один радикали призводять erboard.meteor.com. І коли ви, хлопці, заходите на сайт, вам повинні мати можливість редагувати свій сайт, а всі ваші правки будуть видні для всіх інших. Так що ви можете - ви, хлопці, все можливість підключення до сайту? Так пограти з ним. Іди і почати видалення деякі імена. Подивіться, що відбувається. 

Отже, ви бачите кожен може грати. Це тільки безпеки за замовчуванням режим для Meteor. Ви бачите, що кожен може змінити дані один одного. Не хвилюйтеся. Метеор має безпеки. Це дуже легко реалізувати функція, де ви можете налаштувати користувачів та логіни. Але зараз, кожен, хто відвідує сайт може дати собі більше, вказує, як вони хочуть. Так що я завжди так, тому що це являє собою цікавий спосіб, щоб почати роботу. І тоді ми будемо просто говорити про деталі, як Метеор робить це можливим. 

Так що я збираюся розповісти, що Метеор, а потім ми просто повинні охоплювати дві передумови, що CS50 не покриті достатньо. Але до кінця терміну, ви повинні бути зручними і з HTML і JavaScript, щоб дійсно отримати ваші руки брудні роботи з Meteor. І я думаю, це просто відмінний спосіб для навіть менш комфортно студентам зробити Остаточні проекти, тому що вони можуть насправді залишатися на одній мові, і вони отримують побачити зміни їх працювати відразу ж. 

Так що це слайд-шоу лише деякі з основні технології, які Метеор JS дає вам. Метеор НЕ нова технологія сам по собі. Це дійсно конгломерат всі ці різні речі у нас є в Інтернеті. А також HTML, CSS, JavaScript, ми є деякі технології, такі як Node.js, що і дозволяє запускати JavaScript на задньому кінці на вашому сервер, а також деякі JavaScript бібліотеки, такі як JQuery, підкреслення. 

Все це буде знаком Ви до кінця семестру. І ми також отримуєте можливість використовувати базу даних з ім'ям MongoDB, який є дійсно популярна база даних в даний час для ці нові стартапи. Ви можете думати про це як як MySQL, але вона працює дуже добре з JavaScript. І є деякі інші технології тут і багато іншого я не вказані що всі інтерфейс дійсно приємно з Meteor. 

Я повинен покласти цей слайд, бо іноді я отримую плутанини з цього приводу. Метеор тільки JavaScript. Це не PHP. Це не Рубін на рейки. Так що якщо ви пишете код, якщо ви хочете написати проект Метеор, ви дійсно не можете використовувати Ruby, код. Ви дійсно не використовувати PHP. 

У той час як ми побачимо, що відмінності в Код і синтаксис не може бути, що різні, я хочу підкреслити, вам, що Метеор, все, що ви код тільки в JavaScript. І все, що ви показуєте користувач буде HTML CSS. Але ви насправді не за допомогою будь-якого з інші мови, що й інші семінари можуть охоплювати. Що Метеор також є веб-сервером. Так що навіть якщо у вас немає будь JavaScript, і ви просто хочете, щоб служити CSS і HTML файли, Метеор може зробити це за вас. 

І ось посилання ще раз, щоб демо, що я отримав, ви, хлопці почав грати с. Але давайте перейдемо до HTML. Скільки людей тут є ніяка ідея, що HTML не? ОК здорово. І це повністю нормально. Ви дійсно не потрібно багато знати про Це тому, що ми підемо на Використання дуже просто. 

Це те, що просте HTML сторінка виглядає. Це може бути як ваш Hello, World для HTML, в той час як ми почали в С Здрастуй, світ. Я не хочу, щоб ви підкреслити на Подробиці того, що HTML, який голові, що тіло, що назва там робить. Я просто хочу підкреслити структуру, як у вас є теги. І це кутові дужки. І ось, коли у вас є Ваші дескрипторів. 

Так що ви можете мати HTML документ. І тоді ви будете закривати HTML документ із зворотного косою ж саме. І у вас є різні види міток. І зауважте, що всі вони узгоджені. Ви будете мати як тіло тега а потім закриває тег тіла. І всередині тега тіла, це буде вміст вашої веб-сторінці. Так що це веб-сторінка просто відобразити в білому фоні і чорний текст Здрастуй, світ. Чи означає це, має сенс? ОК. 

Тепер я збираюся швидко покрити JavaScript. За словами попередньої TF, "JavaScript є кращим програмування мову, існуючої в сьогодення. Інші люди будуть намагатися говорити вам протилежне. Вони помиляються ". JavaScript досить добре, і я покажу вам, чому. 

Так що це класичний приклад ми починаємо с в С. У нас є привіт, світ. І ви помітите, що навіть якщо ви скорочуватися це, ви повинні мати принаймні два рядків коду. У мене є кілька рядків коду. Це може бути зроблено дуже просто. Одна лінія в JavaScript з console.log, а потім ваша рядок, Здрастуй, світ. 

Тепер, навіть при тому, що ми рухаємося до нового мова JavaScript, майже всі навички, які ви дізналися, кодування в С безпосередньо портативний. Так рядки, ідея рядків у подвійні лапки, це те ж саме. Крапка з комою, це те ж саме. 

Акуратний особливістю JavaScript насправді в тому, що вам не потрібна крапка з комою. Він може здогадатися, що ви повинні поставити крапку з комою там. А ось що сказав, ви завжди повинні спробувати покласти ваші коми там. Вважається хорошим стилем. А також, немає основною функцією. Ви просто почати у верхній частині файлу і читати речі рядок за рядком. 

Тоді це те, що потрібно, щоб зробити що привіт, світ програма. І зверніть увагу на те, що ви повинні зробити привіт, а потім запустити привіт. За допомогою JavaScript, вона вважається інтерпретована мова. Що потрібно знати, що немає рішень. 

Там немає компіляції. Ви просто запустіть вузол. І пам'ятайте вузол це програма, яка буде працювати ваш наявність на консолі, на чорному полі, а не на сайті. Таким чином, ви просто дати йому файл, і це в друк привіт, світ. 

Я насправді трохи демо що для вас, хлопці прямо тут. Так що давайте перейдемо до моїх Node.js термінал. ОК. Давайте перейдемо тут. Так що я збираюся почати вузол. І я покажу вам, хлопці всього сек, як отримати, що встановлений, якщо ви не робите. Дозвольте мені зробити, що трохи більше. ОК. Я сподіваюся, що ви, хлопці, можете бачити. 

Так що я можу написати код, як я зробив перш в console.log. Привіт, Роджер. І зауважте, я не повинен зробити крапка з комою, але потім я отримую це дивно невизначена річ. Ну насправді, не кажучи вже про визначено річ. Речі, які я хочу звернути вашу увагу, що вам не потрібно основну функцію тут для запуску коду. І немає ніякого кінця зворотний слеш. Там-то маленькі особливості, які JavaScript може зробити для вас. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: О так. Я шкодую про це. І, що стрілка просто означає вузол готовий до іншої команди. Таким чином, ви можете мати його зробити простий математика, як 1 плюс 1. І так само, як і в C, ці математики символи такі ж. Я можу зробити console.log числа. А потім він друкує дві. JavaScript хороший в цьому сенсі, тому що хоча два є внутр, як в C, якщо ви Printf з два, ви отримаєте повідомлення про помилку. 

Але в JavaScript знає, о, ти друк щось. Я збираюся потрібна рядок. Отже, дозвольте мені конвертувати, що два в рядок для вас. І ви також можете зробити деякі дивні речі як привіт, а потім плюс два. Це просто ще один приклад того, як два можуть бути перетворені в там також. 

Так що з цим з шляху, давайте тільки покрити трохи більше JavaScript. Таким чином, в С, у нас є види. Всякий раз, коли ми створили нову змінну, ми повинен сказати, що це, це символ * або Рядок у разі CS50. Або якби ми мали десяткове число, ми повинні були сказати поплавок. Якщо ми потребували логічне значення, ми повинні були сказати б. А потім, як тільки у нас було щось, що був б, він повинен був залишитися BOOL. Ми не могли магічно змінити його на внутр якщо ми не писав у дужки, внутр Комерсант. 

У JavaScript немає типу. Ви просто думати про це як вар. І вар, як ви створити новий тип. Так він може мати змінна з є рядком, вар н будучи поплавок, і змінна б не так. І ще одна річ, що ви не можете зробити в С Тепер я можу сказати, після цієї лінії, б дорівнює ціле. І це працює просто відмінно. У той час як в С, то сказав би, що, як Ваш ціле не BOOL. Я не можу зробити це за вас. Або [нерозбірливо], видавали помилку. 

І я можу швидко повернутися у вузол і показати деякі з цих функцій. Так що я можу їсти УАГ а. Назвіть це "Яблуко". Так що тепер, коли я друкую, Я отримаю свій рядок, 'Яблуко ". Але я можу Також тепер кажуть дорівнює 3. І зверніть увагу, немає ніякої помилки. І тепер дорівнює 3. Будь-які питання досі? Так. 

АУДИТОРІЯ: Зачекайте, так console.log в основному Е, вірно? 

Роджер ZURAWICKI: console.log Ваш Е. 

АУДИТОРІЯ: Вірно. Так як же, якщо ви просто введіть у вісім або [нерозбірливо], що сприяє тому, [Нерозбірливості]? 

Роджер ZURAWICKI: Вірно. Таким чином, це - матеріал зеленим друкується в консолі. І те, що ми побачимо далі, коли ми рухаємося в Інтернеті сторінки, ми не будемо робити - JavaScript будете мати HTML Шаблон, який я розповім в Метеор частина семінару. І ось, коли ви можете сказати, дай мені значення, і це поставить ін ваш сайт. Тому що кожен веб-браузер насправді є трохи консоль. І якщо ви дуже уважно, ви б отримати деяку інформацію, як ваш Е це з'являючись там з кожен веб-сторінки завантаження. 

АУДИТОРІЯ: Як ви потрапили на екран оболонки? 

Роджер ZURAWICKI: Так що є команда називається вузол, і він приходить з Meteor. Так що я буду просто кинути звідти. Вузол це програма, яка працює JavaScript. Якщо ви йдете в meteor.com, ви можна встановити Метеор, і Метеор поставляється з вузлом. Тому Метеор це просто набір всіх цих програмних пакетів. Коли ми отримуємо до нашого прикладу, я буду пішки всіх через установку Meteor, а потім ви можете грати з вузлом себе. ОК, відмінно. 

Так одна цікава особливість про роботу з JavaScript в петлі однакові. У значній мірі те ж саме. Для петель, а петлі, робити в той час як петлі, якщо в іншому місці. Це все те ж саме з фігурними дужками. Це той же синтаксис. У випадку цикл, маленький докладно, що ви повинні звернути увагу щоб замість ІНТ я дорівнює 0, ми повинні сказати, вар я дорівнює 0. Але це тому, що з змінних типи, що ми говорили раніше. 

Зверніть увагу, що Е стає Журнал, console.log. І ми не повинні зробити відсоток р зворотний слеш н а потім передати в I. Ви можете просто сказати, що я. І було б друкувати номера від нуля до чотирьох. Якщо ви, хлопці хочете спробувати це, тому що Ви виховали хорошу точку. Якщо ви хочете запустити цей код собі на власний браузер, я рекомендував би, все відкривається Google Chrome. Google Chrome або будь-який веб-браузер дійсно, але мені подобається Google Chrome , Тому що це дуже стандартизовані. 

Ви можете піти в, я вважаю, якщо натиснути правою натисніть на будь-який веб-сайт, на всякий прогалини, ви побачите опцію називається Огляньте елемент. Це, як правило останнім. І коли ви клацніть по ній, ви повинні отримати річ на дно з'явиться тут. Дозвольте мені збільшити тут. І у нас є кілька вкладок тут. Той, що вам потрібно це консоль. 

І це консоль JavaScript що тепер ви можете працювати з. Великий. Так що я можу ввести той же самий матеріал Я друкував перш у вузлі. Один плюс один дорівнює двом. Var одно "Яблуко". А потім я б надрукувати, і є «Яблуко». Так що в будь-якому веб-браузері, Firefox, Chrome, Сафарі, що ви використовуєте, як Поки у вас є доступ до JavaScript Консоль, такий же Код я біг у вузлі, який може працювати у своєму власному консолі. 

АУДИТОРІЯ: [нерозбірливо]? 

Роджер ZURAWICKI: Як дістатися до консолі? Ви повинні правою кнопкою миші на порожньому просторі на сторінці, а потім ви йдете в Огляньте елемент. Так насправді, я б хотів вас, хлопці просто переконайтеся, що ви можете Огляньте елемент в Chrome. І бачити, коли ви набираєте в деяких Код в консолі що він працює правильно. Не соромтеся задавати будь-які питання, якщо щось не ясно. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Будь-який тип, прямо. Там тільки один тип для всіх змінні в JavaScript. І коли ви повинні оголосити змінна, ви говорите вар. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Так. Так, але в JavaScript, це дуже розумним про виділення пам'яті. Там немає Танос. Там немає вільної. Так що вам не потрібно турбуватися про те, що. Це ще одна приємна особливість, яка JavaScript надає вам. 

Тому я хотів би, щоб рухатися далі. Це було б в порядку? ОК. Великий. 

АУДИТОРІЯ: Я просто виникли проблеми знайти [? Огляньте елемент. ?] 

Роджер ZURAWICKI: Так Safari виглядає трохи відрізняється, але ви є Chrome або Firefox? Ті, тим легше ті, щоб працювати. І для ваших проектів, я рекомендую дотримуватися одного браузера, тому що Ви отримаєте багато помилок майже тому що кожен браузер обробляє JavaScript HTML трохи по-іншому. Тому я думаю, ваше життя буде набагато легше, якщо ви будете дотримуватися Chrome, тому що вона доступна на всіх машинах. І це досить популярний браузер. ОК? 

Так що наступного тема, яку ми повинні охопити в JavaScript - Я шкодую про форматування тут. Мені довелося розтягнути слайди, щоб відповідати широкоформатний проектор. Але я б зараз хотів говорити про як ви робите функції. У C, ми повинні оголосити кожна функція. Як міжнар додати, і він приймає Int в х, і внутр у, а потім додаємо їх і повернути його. 

У JavaScript функції насправді другий тип змінної. Таким чином, ми просто скажемо, вар додати, і вона дорівнює функції. Функція, яка приймає х і у. І що це функція робити? Вона повертає х плюс у в точно такий же Синтаксис як в C. І ви помітили, що в JavaScript, ви не буде сказано, що Функція повертає, тому що з змінні не мають типів в будь-якому випадку, це це не зовсім продуктивно, я думаю, бути вказавши всі свої типи в ваших функцій. А потім, коли ви викликаєте функцію, це точно такий же синтаксис, як С. You просто передати у ваших двох аргументів. Я хотів би спробувати це в моєму сайті. Чи можу я змінити слайд? 

АУДИТОРІЯ: [нерозбірливо]. Чи зможемо ми отримати копію слайдів? 

Роджер ZURAWICKI: Так. Так давайте повернемося до вузла. ОК. Так що я буду говорити, вар додати дорівнює функцію. Беручи х, беручи у. А потім він знає, що заява'S не завершена. Таким чином, у вузлі або в консолі, Ви помітите, точка точка точка. Таким чином, ви можете тримати набравши код. А тепер я скажу повернення х плюс у. І потім закрийте дужки. І в той момент я закриваю дужки, це бачить, що заява закінчена. 

І тепер я можу сказати, додати один і два. І я отримаю три від'їзді. Зауважимо, що якщо я просто додати, що каже мені, що це функція. І ще одна річ просто звернути увагу на , Якщо ви даєте йому невірне кількість аргументи, це зробить. Він буде працювати, але ви могли б отримати деякі дійсно дивні результати. Ніби як значення сміття, Ви можете думати про це. Тому, будь ласка, йти вперед і спробувати це в ваш браузер. 

Отже, в цілях економії часу, я буду тепер перейдемо до наступних особливостей в JavaScript. Таким чином, ми вже говорили про функцій. Ми говорили про цикли, якщо заяви теж. Синтаксис такий же, як С і змінних. А тепер я хочу поговорити про масивах. Мені дуже шкода, що гірки Став трохи відрізані. Але насправді, в першу розділі, все, що потрібно буде працювати. 

Тому у нас є ще один тип для змінні називаються масиви. І ми використовуємо квадратні дужки для позначення їх. Таким чином, у першому прикладі вар обр, порожній масив. Це порожній список, тому масив що не містить елементи. І ви також можете мати масив з трьома рядками. У C, кожен елемент в масиві повинен бути того ж типу. 

Але оскільки в JavaScript є тільки один тип, масиви можуть насправді є різні типи значень. Як тут, у нас є масив з поплавок, логічний, і внутр. Те, як ви отримуєте довжину масиву, Ви насправді не повинні використовувати розмір або що-небудь. Ви просто говорите масив і то точка довжину. І ця довжина точка, ви можете думати про це ніби як структуру, як кожен Масив має поле, додаткова змінна всередині нього називається довжина, яка відстежує, як довго ваш масив. 

Так що я просто швидко збираюся вдаватися в вузол і показати вам, хлопці те ж саме. Так що я можу їсти масив. Це може бути порожній список. І він буде друкувати мені резервне порожній список. Великий. Тепер я можу сказати, що масив має 1, і 2.3, і правда. Так що всі різні типи. І ви помітите, що він працює просто відмінно. Масив я повернуся опори всі значення, які я дав його. 

Якби я хотів, щоб отримати перший елемент масив, синтаксис насправді такий же, як у С. You Можна сказати, масив нульовий. І ви отримаєте один. Я можу сказати те ж саме для масиву два, і я отримую справжнє. Якщо я роблю щось поза масиву, JavaScript є безпечним мову тому що я не отримаєте помилку сегм. Я отримаю визначено. 

І це не визначено, ви можете роду з думаєте про це нульовий. Але це може бути дійсно дратує, коли ви Код, тому що ви будете мати, щоб перевірити, що майже все, що ви робите, ви працювати з не визначено. І ми побачимо, деякі приклади це, коли ми працюємо в Meteor. 

Хоча масив чотири не визначено, Я можу присвоїти йому значення. Так що я скажу, що це дорівнює одному. І потім, якщо я йду в масиві, я мають додаткову цінність там. І зверніть увагу, що масив три, які також був визначений, залишається невизначеним. Так що я тепер є масив з отвір в середині. Але якщо я надрукував масив чотири, Я хотів би отримати один. Якби я зробив масив три, я отримую не визначено. 

Таким чином, хороша особливість, що JavaScript дозволяє робити те, що списки можуть змінити розмір. Масиви, масиви бути списки, вони змінюють розмір. І ви можете вказати будь-яке місце всередині них. І всі прогалини будуть заповнені з цими невизначеними значеннями. 

Таким чином, ми вже говорили про масивів. Тепер, останнє, що я хочу розповісти, в JavaScript, і це дуже важливо до розуміння коду, Я збираюся показати вам, буде об'єкти. І об'єкти член в - В основному, вони присутні в багато мов програмування. І кожна мова програмування любить думати про них трохи по-іншому. 

Але я думаю, для Метеор, хороший Аналогія З структурою. У Сі, якщо ми хочемо, щоб знайти структуру студент, ми повинні були б вказати всі речі всередині нього. Тому він повинен мати ім'я. Він повинен мати в рік. Він повинен мати підлогу. Але ми також повинні дати йому типи всіх тих речей. 

І тепер, коли у нас є ця прес-форма для структура називається студентом, у нас може бути Нова структура, а потім ми можемо вручну сказати, що кожне з полів є. І ось, коли ми використовувати точкову ім'я, точка році, точка підлогу. А потім ми просто, в останньому рядку Код тут, я просто роздрукувавши Назва структури студента. 

У світі JavaScript, є немає такого поняття, як структура студента. Ви не генерують передвстановленою структури. Ви насправді просто, в цих дужках, ви говорите, що все. І саме це дивно позначення з товстої кишки, а потім кома, але ви будете звикнути до нього досить скоро. 

І це насправді дуже проста, гнучкий спосіб просто управління об'єктами. Ви помітите, що якщо я хочу тепер отримати назва від с, я просто роблю s.name. Чи є питання з цього приводу? Як правило, це був дуже заплутаним тема, коли ми вводимо людей JavaScript. Я зроблю деякі приклади цього у вузлі. Так? 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Так ви є приклад, різні змінні цього типу. 

АУДИТОРІЯ: [нерозбірливо]. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: ОК. Так що я думаю, як ви б йти про є ви б покласти об'єкти в масиві, і тепер вам доведеться Масив об'єктів. Я відповів на ваше запитання? 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Так. S є одним об'єктом. Таким чином, ми можемо піти в вузлі і просто грати навколо небагато. 

АУДИТОРІЯ: [нерозбірливо]? 

Роджер ZURAWICKI: О, добре. Так що, якщо ви питаєте, що таке класи, класи розглядаються дуже по-різному, і у них є дійсно дивне схему називається прототипів, які ви не потрібно знати о. Там немає фіксованої спосіб зробити це. Так що якщо ви хочете створити декілька, вас б тільки частково мають функцію або щось. Ви генерувати свою власну функцію. І ви повернетеся об'єкт. Це було б найпростішим спосіб зробити це. Чи має це сенс? ОК. Великий. Тому, як тільки у нас є розуміння того, JavaScript об'єкти, вони - о, так. 

АУДИТОРІЯ: [нерозбірливо] Наприклад, в чому різниця між "Роджер" в подвійні лапки в порівнянні з [Нерозбірливості] в одинарні лапки. 

Роджер ZURAWICKI: ОК. Так що це в C, у нас є один котирування, що представляють символи і двічі котирування, що представляють рядка. JavaScript фактично кидає це далеко тому що ви можете мати рядки з одинарні або подвійні лапки, і є не існує такого поняття, як єдиний символ. Але якщо ви просто скопіювали те ж саме З код, JavaScript буде ставитися до нього дуже добре. Саме тому я розглядав його як - ось чому я можу буквально порт код в цьому сенсі. 

І я хочу показати вам приклад більш складного об'єкта. Таким чином, ви можете помітити, що один об'єкт може мати рядки в якості значень. Він може мати інший список значень. Це може бути список об'єкти в якості значень. Там насправді ніяких обмежень на це. Так от, це просто хороша демонстрація про те, як ви можете отримати багато різні види, що відбуваються все в одному об'єкті. Чи має це сенс? 

Тепер, ви також можете мати масиви об'єктів. А ось вид схожий на те, що ви запитав, якщо ви можете мати об'єкти того ж типу. Але проблема в тому, що немає фіксованого Формат для об'єктів в JavaScript. Таким чином, ви повинні вказати їх самостійно. І ви повинні переконатися, що вони однорідні. Так от, коли я створюю об'єкт, у мене є щоб переконатися, що кожен з них має ім'я, і ​​кожен з них має будинок. 

А потім у мене є масив з тих, і що може бути мій дім. А потім тут ви можете роду см. для контуру відбувається. Для контуру бути просто дійсно загальним спосіб для обходу над масив в JavaScript. Зверніть увагу, що ця модель дуже схожа з С еквіваленті, де вам є внутр я дорівнює нулю. я менше, ніж довжина. І тоді я плюс плюс. 

Це майже той же код, за винятком деяких деталей. Чи так все розуміють що об'єкт знаходиться? Подумайте про це як C структури. І те, як ви доступ до полів просто з точки. І до тих пір, як ви пам'ятаєте, як використовувати точку, все буде в порядку. 

Отже, тепер можна все читати це посилання? Це посилання на проект. Хто виникли проблеми чи бачачи посилання? Добре, давайте змінимо його тоді. Це не - Так, це, мабуть, Найпростіший спосіб зробити це. Великий. 

Так що, якщо ви йдете на цей сайт, там повинні деякі інструкції, які я буду перейти від того, як ми можемо встановити Метеор і отримати наш хід приклад проекту. Я хочу переконатися, що у всіх є посилання вниз, перш ніж я рухатися. Чи можу я рухатися далі? ОК, відмінно. 

І ось я тут на сайті. Ви помітите у файлі ридми, у нас є деякі інструкції про те, щоб ї налаштувати. Ви повинні бути або в CS50 Прилад або просто на Mac. Вікна не буде працювати. Але в основному все, що не Вікна повинні працювати з цими інструкції просто відмінно. Але я можу зробити це трохи більше, а також. 

Таким чином, ви будете працювати першим пара команд. Ці хлопці просто встановити Метеор. Я можу піти в моєму терміналі. А якщо я біжу те ж саме зараз, У мене вже є він встановлений. Так що це трохи коротше. Це може зайняти трохи більше часу для вас, хлопці. Але я хочу спочатку переконайтеся, що у нас є Метеор працює. Після встановив Метеор, ви повинні мати можливість отримати вузол в консолі. 

АУДИТОРІЯ: Вони просять пароль. 

Роджер ZURAWICKI: Це було б ваше пароль користувача, якщо ви знаходитесь на Mac. Це просто необхідно дозвіл змінити деякі системні файли. Таким чином, питання було, якщо він просить у вас пароль, це просто прошу вас ім'я користувача пароль при Ви зайдете на свій Mac. І це так, що ви можете змінити системні файли. 

І коли ви будете готові, ви можете рухатися далі до наступного кроку, який буде копіювати Приклад коду у мене на сайті. І ви отримаєте новий каталог у вашому домашній каталог називається Лідери та ми можемо почати працювати звідти. Так що я просто копіюючи і вставляючи їх команд в моєму терміналі. І для мене, я вже клонували його. Тому я можу тільки зараз рухатися в лідерів. І я повинен мати кілька файли в там. Є питання? 

АУДИТОРІЯ: [нерозбірливо] не працює. 

Роджер ZURAWICKI: О, ви, можливо, потрібно Git встановлений також. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Вибачте? 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: О, добре. ОК. Це тому, що ви, можливо, повинні бути увійшли в GitHub, щоб отримати за цим посиланням. Якщо ви, хлопці можуть побачити, що, найпростіший спосіб зробити це, я б тоді сказати, скачати блискавку. І це буде просто завантажити всі файли. А потім, як тільки ви помістіть його в скачати або ваш домашній каталог - Я рекомендую покласти його в свій домашній каталог, щоб ми могли все запустити ті ж команди. Поки у нас є файли, ми будемо зможе почати працювати з ними. Дайте мені знати, якщо люди, що мають Проблеми із завантаженням файлів. 

АУДИТОРІЯ: По домашньому каталозі, Ви маєте на увазі - 

Роджер ZURAWICKI: Так домашній каталог буде бути Джон Гарвард, якщо ви перебуваєте в CS50 прилад. Щоб дістатися до вашої домашньої директорії, просто введіть С. 

АУДИТОРІЯ: [нерозбірливо] CS50 прилад [нерозбірливо]. 

Роджер ZURAWICKI: Так. Ви хочете, щоб виконати команди у вашому терміналі. 

АУДИТОРІЯ: [нерозбірливо]. Я отримав повідомлення про помилку, яке говорить немає такого файлу або каталогу. 

Роджер ZURAWICKI: Ми можемо взяти швидкий зламати і просто переконайтеся, що у кожного є встановлений Метеор, і я буду просто піти спробувати допомогти людям. Будь ласка, спробуйте допомогти один одному, якщо ви працюєте з проблемами. На жаль, так. Ви обоє в приладі? 

АУДИТОРІЯ: Так. У мене є RISA 

Роджер ZURAWICKI: ОК. Якщо повернутися на сайт, йти прокрутки вгору до вершини. І є в цьому HTTPS. 

АУДИТОРІЯ: Скопіюйте це? 

Роджер ZURAWICKI: Так. А потім ви хочете введіть у Git клон. Так що, якщо ви натиснете Control A - 

АУДИТОРІЯ: Тут? І зробити [нерозбірливо]? 

Роджер ZURAWICKI: G-Я-Т. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Git, а потім клонувати. Так що це дуже схоже на команду, яку ви був вище, але URL змінилося. Тому, перш ніж це було це, зараз саме це. Дозвольте мені оновити - да. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Це завантажується. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: О, так це НЕ клонувати правильно. Я буду це виправити. Там в помилку з намаганням для завантаження файлів. Дозвольте мені оновити команду для вас, хлопці так що я можу переконатися, що він буде працювати. Я шкодую про це. Він повинен бути однаковим для Маках або CS50 прилад. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Я оновив Команда для номер два, якщо Ви обновіть сторінку. І з цим, URL, ви повинні бути можливість завантажувати файли. 

АУДИТОРІЯ: Так що, якщо ми досі завантаження [нерозбірливо]. 

Роджер ZURAWICKI: Якщо ви ще завантаження Метеор? 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Так, якщо ви хочете розробити на вашому Mac. Але для цього потрібно розробнику Xcode інструменти встановлені. Я перевірив ці команди на CS50 Прилад, так що я можу гарантувати, що він буде працювати. Так. відпусти мене і допомогти вам. 

АУДИТОРІЯ: [нерозбірливо]. Я даю пароль. Це Mac. А потім я [нерозбірливо]. 

Роджер ZURAWICKI: ОК. Я хотів би спробувати працювати всі команди виключно в CS50 приладу терміналу. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Я б це запрацювало Перший на терміналі, на CS50 прилад, а потім термінал Mac. 

АУДИТОРІЯ: Так що, якщо ви робите це на CS50 прилад так, [нерозбірливо]. 

Роджер ZURAWICKI: Я хотів би, щоб перемістити на, але якщо люди як і раніше не Біда створення Meteor, Кевін більше ніж раді допомогти вам, хлопці з, Кевін у сірій сорочці. Те, що ми повинні мати це ми збираємося запустити останню команду, номер три, в наш термінал. Коли ми це зробимо, ми будемо запускати Метеор. 

І ви повинні - ой, у мене вже є Метеор працює. Так що це не дозволю - нехай мені просто закрити мій другий Метеор. Коли я запускаю Метеор, ти тепер повинні бачити, що - ви повинні побачити поточний каталог що це подачею на стіл. І тепер він збирається сказати серверу працює на http://localhost. Це URL ви хочете поставити в у веб-браузері. 

І в той URL, ви повинні бути в змозі доступ миленький лідерів. Так зауважити, що це на локальній, Це означає, що якщо ви виконаєте будь зміни, ви не збираєтеся, щоб см. зміни один одного. У той час як на сайті я показав вам на початку, ми могли б отримати зміни у всіх, тому що всі був доступ до тієї ж веб-сайт. 

Отже, дозвольте мені просто піти [? слово?] 3000. Таким чином, ви повинні бути в змозі просто підтвердити що функціональність працює. Ви можете вибрати різні люди, і ви можете дати їм різні точки. Так що я дати хтось балів. Ви також можете бачити, що вони піднімаються в званні. 

Тепер, з метою економії часу, є три особливості, які я реалізовані. І ми збираємося реалізувати видалення користувачі, як наш перший фільм. Але перш ніж ми перейдемо, є Чи є питання? У тебе був руку. Так? 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Ви можете перевірити встановлюється, що Метеор? 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: локальний хост 3000? І ви знаходитесь в CS50 приладу? Що я можу зробити - Ви не повинні бути на Mac. Це буде працювати в приладі. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: В нормальне веб-браузер, так. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Є Метеор працює? Так добре, що є відмінність тут. Якщо ви запускаєте його в Прилад, що вам потрібно зробити локальний всередині приладу. Якщо ви працюєте його в Mac, як я, то я можу зробити мій Mac Google Chrome. Але якщо ви використовуєте CS50 прилад, Ви повинні зробити все, в приладі. Таким чином, ви повинні використовувати Google Chrome в приладі. 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Це ще не працює? 

АУДИТОРІЯ: [нерозбірливо]. 

Роджер ZURAWICKI: Так що просто повторити, Як отримати доступ до веб-сайт в даний час. У вас є URL тут локальний 3000. Якщо ви знаходитесь в CS50 приладу, ви повинні відкрити CS50 Appliance в Google Chrome. І в цьому Google Chrome в Прилад, ви можете ввести в цьому URL, і ви повинні побачити лідерів. Так що я збираюся просто поставити його в сторону тут небагато. А тепер я збираюся відкрити мій текстовий редактор тут. Отже, дозвольте мені просто переконайтеся, що код в порядку. ОК. Великий. 

Я хотів би зараз йти через код небагато. І перший файл я хотів би почати з є leaderboard.html. Ви будете мати можливість отримати цей код після семінар, так що я просто хочу показати Ви на моєму комп'ютері, що відбувається. Тому я сподіваюся, кожен може переконатися в цьому. Так на самому початку файлу, ми є нашу голову і титул, який подібно до того, що ми бачили в кожному HTML документа. І тоді ми будемо мати тіло тега тут. 

Те, що я вибрали є основним тіло, в основному те, що збирається отримати відображається. Але є деякі нові не-HTML речі, і це в подвійні кутові дужки. І це шаблон теги. Таким чином, ви побачите тут цей кронштейн Кронштейн новий Лідери. І це свого роду - думати про це як виклик функції для HTML. 

Це спеціальна версія HTML. Це версія, яка використовує Метеор, який Саме тому ви можете показати різні речі, наприклад, в списку лідерів імена і кнопки. Але Лідери говорить вам, щоб перейти до Шаблон з ім'ям лідерів. Так шаблон не одержати відображається на Сам, але це функція, так що буде викликаний. І ви будете замінити у всьому цьому Код прямо тут в лідерів. 

Цікава частина лідерів от тільки ця таблиця. Якщо ви тільки що прочитали, читайте цей код вголос, він повинен бути інтуїтивним тому Лідери, все, що ми Тобто тут є таблицю. Цей ідентифікатор класу речі ви не потрібно турбуватися о. Просто знайте, що є заголовок таблиці. Ось це THEAD. 

І він знаходить ім'я і рахунок. Всі ці теги, як thtable, THEAD, ви просто дізнатися, як ви йдете вперед. Це не важливо, що ви запам'ятаєте це тому, що ви можете просто отримати доступ до будь-якого посилатися в Інтернеті. Або до кінця семестру, вони якраз і буде дуже добре знайомі з вами. 

Після заголовка таблиці, частина, яку я хочу звернути вашу увагу до це ч тег. Тому що це в подвійних квадратних дужках, це шаблон. Таким чином, це означає, що для кожного з гравців, всі гравці є, ми повинні показати його. І ми йдемо в шаблон гравця. 

Якщо ми перейдіть вниз трохи більше - Я сподіваюся, що кожен може бачити, що. У нас є шаблон програвача. І цей шаблон в основному визначає комірки таблиці, де ви поклали в ім'я тут і рахунок. Зменшення масштабу зараз, ми бачимо, що це шматок коду - і це було нашим гравець там - визначає одну з цих клітин. Кожна річ, що я натискаю стає жовтим. 

Простий спосіб я міг змінити це зараз. Переконайтеся Метеор раніше працює. Метеор має бути процес сервера, так що ви просто залишити його працює, коли ви розробили. Скажімо, я хотів змінити всі імена або рахунок. І я б сказав, що я збираюся додати точки тут. Таким чином, зміна, яке я зробив тут був, а не тільки рахунок, я додати оцінка космічні окуляри. 

Я збираюся зменшити масштаб, і я збирається врятувати мій файл. А після я зберегти файл, мені потрібно щоб переконатися Метеор працює. На жаль про це. Я хочу показати вам правки були зроблені в режимі реального часу. Так що я просто змінити текст. Натисніть гравця. Я ставлю його в заголовними буквами. І це має бути, що якщо це працює належним чином, коли я зберегти його, він оновить. 

О, я думаю, зараз проблема в тому, Я не в правильному каталозі. ОК. Я шкодую про це. Так от, те, що ви помітите, мені зміна пройшла. Тепер, я хочу повернутися зміна. Я хочу повернутися до того, що у мене було. Я просто хочу, щоб ввести його в звичайному режимі. Натисніть гравця. 

У той момент, я зберегти його, Сайт оновлюється для мене. І я бачу, моє зміна на сайт миттєво. Це дійсно корисна функція при налагодженні, тому що тепер Я не доведеться - коли ми пишемо С-код, не тільки зробили ми повинні зберегти файл, але ми повинні були зробити це, а потім запустити його знову. Метеор дуже приємно, тому що на відміну від C, момент, коли ви збережете HTML або JavaScript-файл, зміна відразу з'являється. 

Одне питання, в цих шаблонів, як я можу отримати значення, як гравців або виберіть ім'я? Якби я збільшити тут в мій код, Я бачу це по кожному гравців. Таким чином, шаблон знає, що У мене є гравці якось. І він знає, що є Обране ім'я. Звідки це взялося? Це відбувається від JavaScript. 

І якщо ви йдете в leaderboard.js, це файл, тепер, коли я йду сюди, у нас є Кілька команд визначені. Це спеціальний синтаксис Метеор. Зверніть увагу, що вам не потрібно змінні або що-небудь. Але це тільки структур на структур на структур або цих об'єктів. І все я визначаю це шаблон називається Лідери. 

Лідерів повинні отримати що називається гравців. І те, що гравці? Це все, що цей вираз повертає. І те, що обране ім'я? Це деякий код. Детальна інформація про код ми охоплювати трохи пізніше. Але зараз я хочу, щоб ви зрозуміли що в цьому коді, ми приймаємо гравці, і ми даємо йому значення. У цьому випадку, це функція що запускається на виконання. Таким чином, ми можемо отримати значення назад коли ми запускаємо функцію. Це журнал. Чи має це сенс? 

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

Наступна функція Я просто хочу для покриття є натисніть прирощення. З інтересах економії часу я не буду зможе охопити більшу частину Метеор Код, але є багато ресурсів доступні, і я буду тут після семінару. Але я просто хочу, щоб покрити лідерів події. Цей синтаксис ви дізнаєтеся Трохи пізніше в лекції. Це JavaScript. 

Ми просто кажу, що, коли ми отримуємо клацання, і це на прирощення, це хеш просто означає, ID. На приріст ID тега, то ми хочемо оновити - ключові слова, які я хочу, щоб ви дивитися це оновлення і вибрати і гравець. Так залежно від того ГРАВЦЯ обраний, ми оновлюємо її. І те, що ми робимо, ми збільшуємо його оцінка на п'ять. І що буде містити опис функціональних можливостей ми маємо тут. 

Після закінчення цього семінару, ми будемо зможете побачити деякі більше коду. Але повертаючись до своєї мети, що я хочу змінити сайт, я хотів сюди додати кнопку видалення так Я можу видалити гравця. Таким чином, щоб зробити це, мені потрібно зробити дві речі. Мені потрібно оновити HTML, оновити дивитися, що отримує показаний користувачеві, і тобто наявність, що, коли натисканні кнопки Метеор збирається щось робити. Це збирається видалити цього гравця. 

Таким чином, є багато ділянок коду, які мають в основному вже було зроблено для мене. Якщо я дивлюся тут, у мене вже є шлях отримання обраного гравця. Ось цей матеріал, якщо ви можете побачити його. Так що, якщо я просто - Я буду мати ще одна подія. Так що я збираюся копіювати те, що у мене є. Тому що це список, Мені просто потрібно кому. 

Так що тепер я збираюся натисніть видалити. І тоді замість оновлення гравців, Я збираюся зробити гравці видалити. І всі гравці видалити потреби є обраного гравця. Так ця функція все, що потрібно. Мені потрібно додати деякі HTML тут все ж. Так що якщо я перейдіть вниз тут, це думка HTML. У нас був річ тут, який був тег. Вам не потрібно турбуватися про те, що. 

Які питання до вас це ID прирощення. І це те, що дозволило нам сказати, коли ми натиснули прирощення, ми повинні дати п'ять очок. І ви побачите, що це кнопка. Ось що значить-кн. І текст на кнопці це дати п'ять очок. Так що я збираюся зробити, це я збирається копіювати цей рядок. Я збираюся змінити ідентифікатор для видалення. І я збираюся змінити текст тут, щоб видалити. 

Тому переконайтеся, що все в врятовані. Я хочу повернутися до мого JavaScript щоб переконатися, що у мене є видалити вишикувалися тут. Добре. Так що я йду, щоб врятувати обидва файли. Після збереження обидва файли, ми може повернутися на дно. І тепер ми бачимо у нас є Кнопка видалення. І ще один крок. Ви помічаєте, ви могли б отримати Помилка тому що, коли я натискаю видаляти, нічого не відбувається. 

Спосіб налагодження це піти назад в Огляньте елемент. Я роблю це навмисне, щоб ви могли подивитися, як ви б налагодити щось. У Огляньте елемент, у нас є всі наші тексті тут. Я хочу повернутися до консолі. І що відбувається, коли я йду сюди це я отримати якусь помилку. Це говорить, що немає ніякого способу видалити. 

Так що ж це говорить, коли я йду назад в код, я подзвонив гравця видалити тут. Видалити насправді не право команда. Таким чином, щоб з'ясувати, що право команда Тобто, є API Метеор. Документація я хочу вказати вам хлопці на це раз на meteor.com. Так що я його тут. Це тільки так ви, хлопці, знаєте, де, щоб дізнатися більше. 

Там на засланні в документації. А в принципі, я можу просто знаходимо для видалення. І те, що ви бачите, видалити насправді видалити. Тобто команда, Мені потрібно подзвонити. Так що тепер ми знаємо, що, я збираюся змінити це видалити видалити. Так що тепер, коли я повертаюся до мого лідерів сайт, я збираюся натисніть видалити, і тепер я піду. Там немає більше Роджер. І я можу продовжувати жити видалення кожен одне ім'я, поки я не нічого не залишилося. 

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

Так що не хвилюватися, якщо не всі цей матеріал дається легко для вас. Він буде до часу Остаточний проект. Спасибі за показ. Посилання Я буду оновлювати незабаром після того, Семінар, так що ви можете побачити деякі більш Приклади, які я реалізовані про те, як щоб отримати більш просунуті лідерів що у мене є на цьому сайті тут один-радикально-leaderboard.meteor. Спасибо. 

[Оплески]