>> [Музика, яка грає]
DAVID J Маланій: Гаразд, ласкаво просимо назад.
Це CS50.
Це кінець тижня сім.
І це кінець цього поглинача Полювання з проблемою встановлення чотирьох
що ви, можливо, пам'ятаєте.
Оговтавшись все ці файли JPEG персоналу,
Ви були оскаржені, якщо ви хочете, сфотографувати себе з як багато
з тих людей, як ви можете.
Ми отримали цілу купу матеріалів За останні кілька тижнів,
Дійсно, чимало право до полудня Сьогодні, деякі з яких є ті тут,
зловив тут in-- виглядає like-- Анненберг Зал на робочий час, один тут
в Лоуелл Хаус з Ніком.
Ось Рамон бути спійманим на телефоні.
Про це на CS50 обід.
Це був Джейсон Skyping з більш творчим однокласник,
хто подзвонив йому цей шлях.
Ми не знаємо, що це було.
>> [Сміх]
>> DAVID J Маланій: Але що стоїть за гігабайт.
Ось Чанг, який буквально втік зі сцени
щоб уникнути його фотографують друг день, але в кінці кінців зловили.
Ось Нік.
А ось Елісон вниз полями.
І Zamyla навіть був знайдений на конкурсі бальних.
Так що ми будемо проходити через ці фотографії, з'ясувати
який представив найбільш найраніше, і нагорода
один казковий приз, як пообіцяв в специфікації.
І ми будемо також стежити за о простір, що був залучений.
>> Пару announcements-- так обід це, знову ж таки, в цю п'ятницю в 1:15 вечора.
Якщо ви хочете приєднатися до нас, RSVP в той URL тут.
Джейсон з'являється знову тут від одного з розділів пару років
назад, який стався падати на Хеллоуїн.
І справді, він одягнений, як гарбуз, що конкретний рік.
Якщо ви подивитеся цей розділ його з 2011 розділу
вісім, якщо вам цікаво, в CS50.tv, я думаю,
це був рік, в якому його повітряний насос працював.
>> Якщо ви потім дивитися схожий розділ в 2012 році,
Ви побачите цю Джейсона набагато спущеному, не так костюм більше не функціонувала,
який є тільки сказати в цю п'ятницю, якби ти
хотів вирізати гарбуз з Daven і Гейб та інші, RSVP главам
в cs50.harvard.edu адресою.
Це обіцяє бути дуже весело.
Daven, ми сказали, вирізав гарбуз все своє життя.
Габріель з Бразилії жодного разу різьблені гарбуза на Хеллоуїн.
Так там з ними, як він дізнається.
>> Семінари, meanwhile-- так що ви дізнаєтеся найближчим часом
про те, що наші очікування по Остаточний проект, який по суті
зводитиметься до розробці та реалізації
Найбільш будь-який проект представляє інтерес для Ви, хоча і за умови схвалення
і керівництво від вашого навчального хлопець.
Ближче до кінця семестр, ми вводимо ряд
семінарів, які факультативні заняття на чолі з навчальними побратимів та Гарварді
Співробітники, друзі ході всієї Кампус, на різні теми, які
є дотичною до Основною навчальною програми курсу по
але тим не менше це застосовно, весело, і відрізняється для потенційних кінцевих проектів.
>> Наприклад, по-перше, якщо ви хочете зареєструвати, головою до цього URL там.
І це лінійка для одні семінари в цьому році.
Але розумію, у нас є десятки семінари від минулих років, всі з яких
пов'язані в меню Seminars варіант сайту Курсу.
Так що якщо ви думаєте про вихід за межі своєї зони комфорту
або піднімаючи деякі нові навички, наприклад, програмування iPhone
додатки з Свіфт, нову мову від Apple, або Objective-C
або Програми або програмування [? кий?] лампочки, або будь-яку з тем
тут і більш, через перевірки з на сторінку реєстрації.
>> Таким чином, ми почали і ув'язнений Понеділок з дивлячись на HTTP.
Так швидко refresher-- HTTP, Передачі гіпертексту Протокол.
Але що це насправді означає?
Що це означає?
Хіба що рука?
Я знаю, що ти просто чесати потилицю.
Але ви хочете запропонувати що HTTP є?
>> Аудиторія: Як комп'ютери спілкуватися з [нерозбірливо].
DAVID J Маланій: я пропустив останню частину.
Як комп'ютери взаємодіють with--
>> АУДИТОРІЯ: Інтернет-сервери.
DAVID J Маланій: Good-- з інтернетом сервери і спеціально, веб-сервери.
Тому відкликання, є купа послуги в Інтернеті, деякі з яких
Ви використовуєте ймовірно щоденно з чаті і повідомлення, чат і веб, і адреса електронної пошти,
тощо.
І HTTP просто протокол, веб-браузери
говорити при спілкуванні з веб-сервери, і навпаки.
І аналоговий в людський світ може бути,
Я простягаю руку, щоб потиснути деякі інша людина, і він чи вона
визнає, розширюючи його або її руки, а також.
Так що це просто протокол, набір угод.
>> І те, що насправді є ці конвенції?
Ну, це просто зводиться до відправка повідомлення туди і назад,
як ми зображені тут.
І є кілька способів, у які ви можете відправляти ці повідомлення.
І, мабуть, самий загальна відомий як отримати.
І ми побачимо, контраст для цього найближчим часом.
>> Але прохання отримати від браузера на сервері просто виглядає так.
Це купа тексту, який він ставить всередині віртуальної обвідної.
На зовнішній стороні цього конверта йдемо пару штук деталей.
Що потрібно, щоб піти на Конверт, так сказати,
для того, щоб отримати запит як це від мене, щоб веб-сервер?
Так.
>> АУДИТОРІЯ: Ваш IP адреса.
>> DAVID J Маланій: Мій IP-адресу В поле, так сказати,
і, звичайно, IP-адреса одержувача.
Але у випадку веб-пакета, Нам потрібно трохи більше деталей
Це не досить просто відправити конверт з сервером,
бо сервер може бути прослуховування для різних типів
інтернет-трафіку.
Так що ще потрібно крім IP одержувача?
Да?
>> АУДИТОРІЯ: Хіба TCP?
DAVID J Маланій: Добре.
TCP--
>> АУДИТОРІЯ: Адреса.
>> DAVID J Маланій: Адреса, або порт, як це називається.
Близько, але ряд TCP порт.
І є купа з них.
Але, звичайно, найбільш знайомі повинні в кінцевому підсумку
бути 80, який використовується за умовчанням один використовується для веб-трафіку.
І ще знайомі один скоро буде 443,
який використовується для безпечної веб- трафіку, URL-адреси, які починаються з HTTPS.
>> Так що це те, що відбувається всередині цього конверта.
І отримати / просто означає, дати мені веб-сторінка за умовчанням.
Дайте мені корінь важко їздити на цьому веб-сервері.
І будемо сподіватися, веб- Сервер відповість, ОК
і число 200, яка є просто Угода, що, так, все
дійсно в порядку.
Ось сторінка.
Тип веб-сторінці буде Текст бути, але більш конкретно, HTML,
які ми збираємося пірнати назад у.
І точка точка точка просто кошти, тут є HTML.
І ось, коли ми підібрати історію сьогодні,
насправді писати HTML, Мова розмітки гіпертексту, який
це мова, якою Веб-сторінки написані.
Це не мова програмування.
Там немає функції або петлі або умови.
Це мова розмітки, а знову бачимо сьогодні,
що дозволяє визначити як структурувати і стилізувати
естетично веб-сторінки.
>> Так що це був один і тільки сторінки ми дійсно
подивився на, якщо коротко, в понеділок.
І зверніть увагу, деякі яскраво виражені характеристики.
Там дуже багато відкритих кутом Кронштейн і близько кутовий кронштейн.
Між тим, кутовий дужки слова.
І ми збираємося почати називаючи ці слова теги.
Так відкрито кронштейн голова і закритим кронштейн голова
є відкриті і закриті теги, або початкові і кінцеві теги
відповідно, з HTML елемента, як ми його називаємо, називається головою.
І те ж саме жаргон відноситься для тіла в HTML і пр.
>> І що приємно, HTML-- і справді, ми будемо
провести жахливо мало часу на це, тому що ви будете в основному тільки з'ясувати
які функції вона має, коли вам насправді мають конкретну проблему
в solve-- ви виявите, що Браузер досить безглуздо.
Це просто буде do-- не в відміну від computer-- те, що ви скажете їй зробити.
І тому, коли у вас є відкритий Кронштейн HTML на самому верху
там, що істотно просто означає, агов, браузер,
ось іде веб-сторінка написана на HTML.
>> Коли він бачить відкритий кронштейн голова, це просто означає ,,
агов, браузер, ось іде головою, або самий верхній частина моєї веб-сторінці.
Коли він бачить закриту дужку голова, це просто означає, агов,
ось саме для голови.
Очікування чогось ще.
І щось ще мабуть, буде тіло.
І коли у вас немає тега, як у вас є тільки привіт, кома, мир,
от тільки буде сирий текст, в кінцевому рахунку, буде відображатися на екрані.
>> Тепер, ви помітите, занадто відступ тут.
Ви, напевно, можна зробити висновок, як ми стилізації його.
Щоразу, коли я відкриваю тег, так сказати, я відступ.
І кожен раз, коли я закриваю Тег, я не по-відступ,
близькі по духу фігурні дужки.
А за що, я почасти використання моє судження.
Зверніть увагу, що я не потрудився удару Введіть всередині цього тега заголовка.
Чому?
Ну, я просто вирішив, що це виглядало трохи чистіше мене, людина,
просто не потрудилися робити це.
Отже, ще раз, є деякі Рішення називає просто
як є на С або будь-яку мову.
>> Але зверніть увагу, також, що це поглиблення піддається розумової моделі,
не більше чим ускладнюють його.
Але дерево, чи не так?
Якщо ви думаєте про Мережу сторінка, мабуть, написані
як це, як красиво відступом, що шлях,
Ви можете подумати, з дужки що HTML закрита дужка тега демаркації
корінь вузла, генеалогічне дерево вузол стиль в стилі дерев
ми дивилися минулого п'ятниці.
>> І справді, у нас є на прямо тут що ми називаємо DOM, D-О-М, документ
об'єктна модель, химерний спосіб сказати дерево, яке представляє, що HTML.
І зверніть увагу, що HTML має, ми будемо говорити, як родоводу, двоє дітей.
Зліва знаходиться голова.
Справа знаходиться тіло.
>> І так само, як безглуздий думки вправи, голова, звичайно, є, як багато дітей
відповідно з цією структурою?
Так тільки один, title-- і ось чому ми маємо
стрілка йде від голови до назви.
Так що це, начебто цієї людини в родовід була тільки одна потомство.
А потім сам заголовок може можна сказати, є дитина теж.
>> Нагадаємо, що HTML був Привіт, кома, світ під ним.
І я просто намалював в овальної замість прямокутника просто
передати семантично, що навіть при тому, це вузол в дереві, так сказати,
це свого роду принципово відрізняється.
Це не тег.
Або більш правильно, це не елемент.
Це просто текстовий вузол, якщо хочете.
Але це зовсім довільні людини конвенції.
Це тільки зараз мій спосіб уявляючи, що я буду як сукупність
назвати документ.
>> І як в сторону, речі на супер лівому верхньому куті,
відкрита дужка знак оклику док тип HTML, це виглядає як тег,
але це нерозумно прикордонні випадки, коли що якраз там, копіювати і вставляти
вказати браузерів це HTML версії 5.
Світ постійно змінюється, що в Перший рядок коду в сторінки повинні бути.
Це просто означає, версія 5.
Так що не зовсім дивитися, як інші.
>> Гаразд, так з цим сказав, тепер ви будете цінувати
це досить це нерозумно тату хтось отримав.
>> [Сміх]
>> DAVID J Маланій: Гаразд, А тепер давайте насправді занурення
в щось робити з цим.
Як ви пам'ятаєте, що в останній раз Я відкрив CS50 Appliance
і я зробив щось, як просто, як відкриття Gedit.
І я зберіг файл навіть на мій desktop-- ніде special--
як hello.html.
>> Отже, дозвольте мені зробити це again-- hello.html Enter.
І тепер у цьому файлі, я збираюся йти вперед і повторити те, що ми просто
saw-- док типу HTML Тоді я збираюся зробити відкритим кронштейн HTML закриту дужку.
А потім я збираюся превентивно відкривати і закривати тег.
Чому?
Просто так я не забуваю пізніше.
Це просто хороша практика, як відкриття і закриття фігурні дужки все відразу.
>> І тоді те, що було далі?
Ви можете думати про татуювання.
>> АУДИТОРІЯ: Глава.
>> DAVID J Маланій: Глава.
А потім тут, я мав титул, я думаю.
І назва була довільно, Привіт, світ близький назву.
А потім сюди, тіло, з course-- то ми закриваємо тег тіла.
А потім просто кілька надлишково, У мене було те ж саме тут.
>> Так я стверджую, що це веб-сторінка.
Це те, що Тепер можна було жити в Інтернеті,
хоча, звичайно, це в буквальному сенсі живе на моєму робочому столі прямо зараз.
Але насправді, якби я мінімізувати Gedit, Я буду бачити на моєму робочому столі його значок.
Навіть при тому, що цей пристрій, Ви можете зробити це на Mac OS
без TextEdit або Вікна з Notepad навіть.
>> І якщо я йду вперед і двічі клацніть що навіть і Виберіть, добре, давайте
Не вибирайте, що через Chrome не відкриваючи.
Давайте йти вперед і відкривати Chrome.
А потім зробити Command-O для відкритої І орієнтуватися на мій робочий стіл
і відкрити цей файл.
Тобто, як браузер інтерпретує HTML, зверху вниз, зліва направо.
Ей, браузеру ось HTML.
Ось голова.
Ось назва.
Ось організм.
І справді, це, як він надає цю веб-сторінку.
>> Але зверніть увагу на URL.
Ніхто з вас не може тягнути цю специфіку сторінка на ноутбуках зараз,
навіть всередині вашого Прилад за допомогою цієї URL,
тому файлу: // вказує, що це насправді на моїй файлової системі, мій жорсткий диск,
не твоє.
Так що це не все, що корисно.
>> Давайте тепер перейдемо до використовуючи фактичний веб-сервер.
І виходить, в CS50 Appliance це більше, ніж просто середовищі, де
Ви можете написати код на Сі і компіляції і запустити його, як ви робили.
Він також був налаштований на Співробітники представляти типовий веб
Сервер це в Інтернеті, той, який ви могли б заплатити за
або той, який знаходиться в так званому хмарі.
>> І він працює Стандартна безкоштовно з відкритим вихідним кодом
Програмне забезпечення, наприклад, то, називається Apache, який є, мабуть,
раніше є найпопулярнішим веб- Серверне програмне забезпечення в світі
що тисячі сайтів використовувати сьогодні.
І це також ще є програмне забезпечення, як MySQL,
який є сервером баз даних що ми в кінці кінців дістатися до,
який є тільки сказати Я можу почати лікування
мій прилад як повноцінний сервер що я не плачу за іншому місці.
Це просто живе на своєму власному ноутбуці для Розробка та зручність цілях.
>> Так що давайте йти вперед і скористатися цим.
Я збираюся йти вперед і відкрити вікно терміналу.
І я збираюся йти вперед і move-- фактично, першим я
збирається орієнтуватися на моєму робочому столі.
Якщо я роблю Ls, є hello.html.
І я збираюся піти вперед і почати використовувати
новий каталог ми в не використовується до сьогоднішнього дня.
>> hello.html-- я збираюся рухатися в ../vhosts для віртуального hosts--
докладніше про це в future-- а потім в каталозі під назвою локальний,
який є прізвиськом, даним майже будь-який комп'ютер, будь то Mac, PC,
або Linux комп'ютер, а потім спеціально в каталог, який ми,
Співробітники вже створили для вас, коли Ви скачали прилад під назвою
суспільного.
І як припускає його назва, нічого Я поклав в цю папку, в теорії,
збирається тепер бути громадського, по крайней мере, для людей
у кого є пряма Підключення до комп'ютера.
>> Так що тепер дозвольте мені йти вперед і зробити компакт-диск з тією ж директорії
так що я можу бачити те, що відбувається і Ls типу.
І справді, що це Єдине, що там.
Я стверджую, тепер, бо я поставив це подати hello.html в директорії
зване громадське всередині директорії називається локальний всередині директорії
звані віртуальних доменів, які Завдяки співробітникам CS50
був попередньо налаштований, щоб бути корінь вашого веб-сервера,
Тепер я можу сподіватися, це зробити.
>> Я збираюся відкрити нову вкладку.
І я збираюся піти не подавати: //.
Я збираюся використовувати фактичні HTTP / локальний, які
знову, це прізвисько для мого власного сервера.
А потім я збираюся піти в те, що ім'я файлу, просто щоб було ясно?
Де ця історія, ймовірно, буде?
hello.html.
>> Отже, іншими словами, я хочу, щоб зараз це це мій власний комп'ютер, мій власний прилад,
неначе це реальна сервер.
Його прізвисько локальний.
Але думати про локальний хосте як як Facebook.com google.com, що завгодно.
Це просто моя місцева назва.
А потім у фінал, я хочу це в корінь жорсткого диска, так сказати,
або корінь веб-сервера, Ergo слеш, а потім
Файл hello.html.
>> Дозвольте мені зменшити масштаб і натисніть Ввод.
І справді, в даний час моя веб-сторінка.
Так що це трохи відрізняється.
І це так само, як в захват.
Це стара версія.
Дозвольте мені зменшити шрифт назад.
Це стара.
Це новий.
Але що принципово відбувається Тепер те, що HTTP використовується.
>> Давайте зробимо це трохи більше ясно або, якщо хочете, трохи складніше.
Дозвольте мені піти в правому нижньому куті розі мого приладу.
І зауважте, що все це Час, там був номер.
Це унікальний адресу Вашої CS50 Appliance.
Це приватний адресу, як випливає з 172,16,
який просто означає тільки ви фізично можуть отримати доступ до цієї веб-сервер.
Все файрволом і добре захищений від решти
світу через це рішення.
>> А тепер зверніть увагу, хоча, якщо я йду в цю адресу, не в моєму приладі,
але в Mac OS-- я збираюся повернутися сюди.
Це мій Mac тепер.
А тепер я збираюся відкрити ця версія Chrome тут.
І я збираюся піти в HTTP: //172.16.25 / І я забуваю rest-- 133.
>> Так що я збираюся відвідати з мого Mac що IP-адреса /hello.html Enter.
І тепер я бачу, з моєї Mac що мій CS50 Appliance, хто
IP-адреса, що число, дійсно веде себе
як веб-сервер в Інтернеті.
Це не є хороший легко пам'ятаю ім'я, як Facebook.com,
але він використовує HTTP мабуть, навіть при тому, що Chrome
є свого роду спрощення світ для нас, але не показує нам, HTTP.
Але це дійсно саме це.
Chrome тільки економити деякі введені з клавіатури символи в ці дні.
І ось що ми зараз бачимо.
>> Так що все прекрасно і чудово.
Але це досить захват сторінки.
Дозвольте мені піти і зробити щось Тепер трохи відрізняється.
Отже, дозвольте мені повернутися до Gedit.
І замість того, привіт, мир, давайте поставимо зображення.
І я стверджував з before-- відпустити мене в моєму каталозі локальний громадськості.
І дозвольте мені йти вперед і скопіювати ціла купа файлів з сьогоднішнього дня
від моєї папці Dropbox в тут.
>> Тепер, якщо я друкую Ls, дивитися на всіх цих файлів
що я поширюватися Сайт Звичайно напередодні сьогоднішнього дня,
один з яких як і раніше hello.html.
Так що є, що один.
І згадати цю дурну один з минулого time-- cat.jpg.
Отже, дозвольте мені спробувати вбудувати cat.jpg всередині моєї веб-сторінці.
>> Я збираюся йти вперед і зробити cat.jpg, зберегти.
Дозвольте мені повернутися до Chrome.
І дозвольте мені збільшити Шрифт і зараз перезавантажити.
На жаль, коли я поклав це?
Standby-- мене все ще є старий Версія від мого робочого столу відкритим.
Отже, дозвольте мені перейти в мою віртуальний хост, мій локальний, моя громадська і hello.html.
Так що тепер дозвольте мені йти вперед і кажуть cat.jpg всередині тіла
де я хочу, щоб це було відображається і перезавантажте.
Звичайно, це не правильно.
>> Тому мені потрібно, щоб сказати браузеру трохи свідоміше, що я хочу, щоб це зробити.
Просто ввівши ім'я явно недостатньо.
Так нагадаємо, що був ще один тег, зображення, IMG, якщо коротко.
Це тільки тому, що люди Не подобаються повні слова типу.
І тоді ми можемо зробити джерело = "cat.jpg".
>> А тепер я збираюся зробити Одна справа відрізняється тут.
Навіть при тому, що всі наші мітки досі є
було це поняття почати тег і кінцевий тег,
що насправді не роблять сенс для зображення, чи не так?
Зображення або є, або немає.
І тому люди прийшли з простіший конвенції.
Якщо у вас є тег, який може і починатися і закінчуватися в одній і тій же time--
вона може бути порожнім, тому, щоб speak-- просто поставити косу риску всередині тега
в самому кінці.
Тепер дозвольте мені повернутися до моєї браузері.
Хіт Перезавантажити Блін, щось не так.
Ви, напевно, бачили це іноді в Інтернеті,
навіть якщо він не був винен.
Це вина веб-сервера.
Що оди це, здається, вказують?
Це працює.
Ось де образ належить.
Да?
>> АУДИТОРІЯ: Але це не мати доступ до зображення.
>> DAVID J Маланій: Це не мати доступ до зображення.
Це, або ще гірше, може бути, це навіть не існує.
Давайте подивимося, якщо ми не можемо діагностувати, що.
Нагадаємо, з минулого разу, що, якщо в Chrome, в приладі,
або навіть на вашому Mac або PC, Ви зайдіть в меню Developer
і перейти до Developer Tools варіант, який, ймовірно, у Вас є
не використовується багато чи коли-небудь.
І якщо я йду в Мережу і перезавантажте сторінку,
давайте реально дивитися на HTTP Запити, які приймаються.
>> Схоже hello.html є дійсно ОК, значить 200.
Але cat.jpg є 403.
Так що це не 404.
Файл, ймовірно, існує.
403 означає, заборонено.
Так що це трохи заплутаним.
Я збираюся повернутися до мого вікні терміналу.
Дозвольте мені збільшити тут.
І зробимо Ls.
Там в ті ж файли.
>> Тепер дозвольте мені зробити LS-л, які ви, ймовірно,
використовується, перш ніж подивитися на файл розміри, може бути, або тимчасові мітки.
І ми бачимо цілу купу Переважна інформація.
Але зверніть увагу, наскільки деталей.
Ось hello.html в цьому гребти тут і ось cat.jpg.
І це всього лише прилад бути доброзичливі, виділивши в форматі JPEG користувач
в фіолетовий, як це.
Але що ще відрізняється рядом розмір файлу і ім'я файлу?
>> АУДИТОРІЯ: [нерозбірливо].
DAVID J Маланій: Так, є більше двох R, сюди.
Зверніть увагу, що hello.html вже відбувається.
Ось і виходить, що ім'я цей каталог громадськості важливо.
Все, що в цьому каталозі призначається, щоб бути відкритими.
Але це не достатньо просто копіювати файли туди.
Крім того, необхідно змінити Режим файли,
змінити права Файл активності не
бути стандартно, яка є те, що тільки я можу читати
і записати його, я як власник.
Я хочу, щоб весь світ всіх на вміти читати мій файл, якщо можна так висловитися.
Читати тільки означає його перегляду.
>> І дійсно, як ви побачите в проблемі встановити сім, ось що означають ці R в.
Середнє цих двох R в хай усім ще в світі також прочитати його,
особливо зараз, це в цьому каталозі.
Так, найпростіший спосіб виправити це, щоб перейти до моєї рядку і зробити CHMOD для зміни
Режим і потім зробити A + R, в цілому, все, все, плюс г для читання,
а потім cat.jpg Enter.
Ніщо, здається, сталося, що Зазвичай це означає гарну річ.
Так LS-л again-- зараз давайте подивимося на cat.jpg.
І це дозвіл здається, змінилися.
Як осторонь, якщо ви робите помилка, і ви, приміром,
тільки що зробив your-- я не знаю-- есе загальнодоступним випадково,
Ви можете зробити навпаки, CHMOD на-р.
Хоча, чесно кажучи, це не повинно бути в загальному каталозі
в будь-якому випадку, якщо це занепокоєння.
>> Так що тепер давайте повернемося до мій браузер і перезавантаження.
І я збираюся натисніть трохи Ghostbusters
символ, щоб очистити цю частину Екран тому ми можемо бачити нові запити.
І дійсно, тут є Grump Кет раніше.
Але що ще більш важливо, Технічно, існує
число 200, яка означає, що ми отримали це ОК.
Гаразд, так що все прекрасно і чудово.
Але ми не робимо кращий веб-сайтів,
і ми не будемо намагатися занадто сильно, щоб зробити саме незвичайне із сайтів сьогодні.
Але давайте хоча б щось зробити супер знайомі до гримлячи
від декількох інших тегів.
Тому припустимо, я не просто хочу кішку тут.
Припустимо, що я насправді хочу це кішка посилання на щось.
>> Я міг би, наприклад, зробити щось на зразок цього.
для анкерного HREF для гіпер посилання equals--
і давайте просто робити щось як www.google.com закриття
цитувати заслони дужку.
А тепер шукати кішок.
Закрити якір тег.
Так що це тільки один вид принципово нова деталь.
Тег звичайно, відрізняється.
Це ім'я для якоря HREF або гіпер посилання.
>> Але що ще більш важливо, є це синтаксичні особливості тут.
Це те, що ми почнемо називати НЕ тег, але атрибут.
І атрибутом є те, що змінює поведінку тега.
І це атрибут, HREF, засоби змінити поведінку цієї якоря
так що, коли він натиснув, він іде за наступною адресою тут.
І, звичайно, що URL є Google.
>> Між тим, що це текст тут буде?
Ну, що це буде що людина насправді
бачить, як підкреслений посилання, так просто.
Отже, давайте спробуємо це.
Дозвольте мені зберегти його.
Я до сих пір в hello.html.
Але у версії онлайн, ви побачите фактичні імена файлів ми заздалегідь підготували.
Дозвольте мені йти вперед і перезавантаження.
А тепер це дуже захват сторінки ще.
Але якщо я наведіть курсор миші на there-- і це трохи мала,
но-- ви можете бачити в нижній лівий кут екрану,
це дійсно збирається google.com.
І якщо я натискаю, що це буде збийте мені шлях до фактичної Google.
>> Але зверніть увагу, тут можливість для експлуатація, як в сторону.
І ми повернемося до іншої питання безпеки найближчим часом.
Бо є ця дихотомія між тим, де ви йдете і що ви говорите,
Ви могли б зробити щось подібне this-- http://www.google.com.
Добре, а тепер, якщо я перезавантажити Після збереження цій сторінці,
це виглядає як я збираюся піти в Google.
Але немає ніякої причини, я повинні піти в Google, чи не так?
Я міг фактично йти щось подібне badguy.com, перезавантажте сторінку тут.
І зауважте, це все ще виглядає як Google.
І тільки якщо я різкий Досить навести тут
я бачу це навіть збирається піти в інше місце.
>> Так що, якщо ви коли-небудь отримував електронна пошта, особливо
один з Paypal або здавалося б, від Paypal
прошу вас увійти на ваш рахунок, це
Тому ви ніколи не повинні або натисніть посилання в повідомленнях електронної пошти,
чесно кажучи, будь-які посилання в електронних листах.
Якщо ви знаєте, що фактична гроші в Paypal або банку
Америки або Fidelity або будь сайт, ввести його вручну.
Тому що подивіться, як легко це обдурити когось в поданні, що
виглядає як посилання.
Але це насправді міг піти абсолютно в будь-якому місці.
>> І є набагато більше, загроз, ніж це.
Насправді, це трохи дотичній тепер, але одна
з кращих, які я коли-небудь бачив які відтоді були закриті,
це хтось привів людей to-- так що це може сказати,
Натисніть тут, щоб увійти в ваше рахунок, банківський рахунок.
І це було Банк Заході.
>> Так хтось купив це.
І це трохи легше побачити це в моноширінним шрифтом збільшено
в на 30-футовий проектор с.
Але коли він маленький шрифт в що ви отримуєте електронною поштою,
це виглядає як bankofthewest.com, НЕ bankofthevvest.com,
які хтось заплатив $ 10 купити.
І тоді це привело їх до еквівалент якийсь поганий сайт.
>> І ви побачите, too-- фактично ми можемо зробити this-- якщо я йду до фактичного сайті,
bankofthewest.com, знову ж таки, відкликає в останній раз
що якщо це їх веб-сторінки і Ви цікаво, як це працює,
можна, звичайно, піти в Інструменти для розробників Chrome.
І ви можете побачити все HTML красиво відформатована там.
>> Але ближче до справи, Ви cam-- давайте закрити
this-- ви можете піти, щоб подивитися Розробник View Source.
Чому б мені просто не скопіювати все, що А потім я
може перейти в моїй маленькій вікні GEdit тут і зробити свій власний веб-сторінки.
Зберегти в hello.html.
І, ймовірно, це буде перерва, бо це не так легко, як правило.
Але тепер, якщо я перезавантажити свій власний сторінку на мій власний хіт перезавантаження і CS50 Appliance,
Добре, деякі речі зламав.
Але я досить близькі до того, моя власна банківська сайт, чи не так?
Все це HTML--
>> [Сміх]
>> DAVID J Маланій: --Я НЕ actually-- і ви
знаю, що є хтось там, хто фактично натисніть ці посилання теж.
Отже, ясно, деякі речі зламав.
Але що відбувається, щоб привести нам в дискусію,
зайво прямо зараз, як до того, що CSS, каскадні таблиці стилів, є,
і як ви насправді завантажити інші файли HTML
і JPEG файли GIF файли, Сайт може використовувати.
Але все це здійсненним.
Але це насправді зводиться до ці дуже прості евристики.
>> Так що тепер давайте просто побіжно Кілька інших прикладів HTML
просто щоб дати вам відчуття про те, що ще можна зробити.
Наприклад, це list.html.
Припустимо, що я хотів зробити веб-сторінку зі списком будинків в квадрат.
Я міг би використовувати вул тег для невпорядкований Список, а потім у списку пункт дитина
а потім ітерації over-- або список, rather-- будинку в питання.
>> І якщо я відкриваю цю гру, давайте зробимо це.
Давайте НЕ hello.html, але list.html.
Чорт візьми.
Як це виправити?
Це та ж сама проблема, як і раніше, не так?
Отже, дозвольте мені зробити chmod-- oops-- CHMOD + р від list.html.
І тепер, якщо я повернуся в своєму браузері і натисніть Reload, там це.
Так що, якщо ви коли-небудь хотіли зробити маркований список, ви можете зробити це.
Якщо ви хочете бути супер уяву і зробити упорядкований список, чи не невпорядкований список,
змінити тих, оле, перезавантажте сторінку, і Тепер браузер налічуватиме це за вас.
>> Що ще ми можемо зробити?
Ну, пару others-- якщо у вас є довгі абзаци text--
Наприклад, деякі Латинський текст як this--
і ви хочете його в окремих пунктах, відкритий р, поруч р для тега абзацу.
І робити це знову і знову.
І якщо я зараз відкрити цей файл, paragraphs.html, добре, це
стає дратівливим.
Так що тепер давайте просто повернемося до моїх підкажіть, CHMOD A + R R зірку .html--
миленький дика карта, так сказати.
Це повинно виправити всі ці проблеми для мене.
Давайте перезавантажити.
Там в три абзаци.
>> А тепер давайте йти вперед і відкрити один інший.
Як щодо столу?
Ви помітите, таблиця виглядає трохи складніше.
Але це те ж саме idea-- відкритий тег, відкритий тег,
відкритий, відкритий, відкриття, закриття тегів, відкритий тег.
І це відбувається стояти Таблиця, чия межа, очевидно
буде товщина 1-- все що означає: рядок таблиці, таблиці
Дані, які означає клітку.
І якщо я повернуся в своєму браузері тут і піти в table.html,
Ви можете побачити щось як це, огидний.
Але ми повернемося до точки де ми можемо насправді
зробити речі гарніше, ніж це.
>> Отже, дозвольте мені передбачають зараз.
Там в пучки з декількох тегів.
І HTML чудово підібрати бо, чесно кажучи, все, що вам потрібно зробити,
дивитиметься на існуючих веб-сторінок з якою ви знайомі.
І ви, як, ну, от як вони зробили це естетично.
>> Або ви можете подивитися будь онлайн ресурс про те, як HTML працює,
і ви побачите, що є Вся лексика інших тегів.
Але з простою ментальної моделі одна, що майже будь тег відкритті
повинен бути закритий, його дійсно робить достатньо, щоб навчити себе
HTML після зрозуміти ці основні ідеї тегів
і атрибути і добре сформованості що ми говорили про,
закриття все, що ми могли б відкрити так що ми не плутайте браузер.
Так тепер давайте це більш цікавий рівень
перейшовши в реальне.
І підемо до мого Mac тут, на google.com.
А тепер notice-- давайте зробимо це.
Я гонг, щоб перейти до Налаштування, Налаштування пошуку.
Я хочу, щоб відключити цей прикрий момент Результати річ, де він одразу ж
починає реагувати на вашій друку.
Давайте зробимо цей старий школу так ми насправді бачимо, що відбувається.
>> Так що я йду, щоб врятувати мого Налаштування тут Google.
А тепер notice-- я збираюся шукати щось подібне кішок.
І він як і раніше робить авто повна тут, але якщо на машині
люди набрали в минулому.
Але зверніть увагу, що це відбудеться.
>> В URL на даний момент це, просто google.com.
І технічно, це риса.
Google просто порятунок характер і не показує нам, що.
Вони показують нам HTTPS, просто бути супер обнадіює, що ми
в безпечному або зашифрованої сторінці.
>> Отже, дозвольте мені йти вперед і шукати кішок.
Тепер це стало дійсно Переважна швидко.
Подивіться на довжину цього URL.
Але виявляється, що велика частина цього матеріалу в URL насправді досить марно.
Я збираюся почати видалення речі, які я не розумію.
Я бачу кішок.
Я розумію, кішок.
Я не знаю, чому кішки там знову.
Я дійсно не знаю, що це за дурниці.
Так що я просто буду продовжувати виявлення і видалення матеріалу
що я не розумію, перегонку URL в тільки в цьому.
>> Тепер дозвольте мені почати вводити знову.
Схоже, Google все ще працює.
Так чому, вони додають Багато матеріалу для їх URL-адреси за замовчуванням.
Але це не є обов'язковим.
Так що ж таке хороша про це?
Ну, дозвольте мені йти вперед і відкрити інспектор в Chrome.
Там трохи ярлик миша для неї.
>> Перейдіть на вкладку Network.
А тепер дозвольте мені перезавантажити цю сторінку ще раз.
І я тримаю Shift.
Як осторонь, браузерів як правило, кешувати або зберегти
Інформація лише заради ефективності в.
Але зазвичай тримає Зрушення і перевантаження змусить все
щоб почати все з початку.
І ось що я хочу зробити тут.
>> І зауважте, все це Рядки, які тільки з'явилися.
Виходить, що в будь-який момент Мережі сторінка, там може бути тільки один файл
involved-- hello.html-- або там 52 може бути, як в даному випадку.
Коли я відвідую google.com, мабуть, мій браузер
стартує 52 окремих запитів HTTP.
Чому це?
>> Ну, подивіться на те, що всередині цієї веб-сторінці до верхньої.
Там не тільки текст, але є фактичні зображення
кішок більш вправо.
Там в барвистий логотип тут зліва.
Там всі з цих значків для мікрофона і так далі.
Там дуже багато деталей, будівництво блоки, скретч штук, якщо хочете,
на цій веб-сторінці.
А що браузер робить на отримувати найпершу файл, який
це рядок тут, це, по суті, ітерації по HTML верхньої
вниз, зліва направо, шукаю речі, як зображення мітки або інші теги
які згадуючи інші файли і коли він бачить їх, йде і отримує їх
через HTTP, життєздатним цілому Метафора конверт,
а потім відображає їх у Підходяще місце на веб-сторінці.
>> Але зверніть увагу, тут, якщо я зупинюся на перші кидок, пошуку кішки,
помітити, що, насправді він використовує протокол HTTP 1.1.
І, на жаль, Google Chrome зараз в версії 39
це свого роду нульового відповіді речей вниз і не показуючи нам фактичні заголовки.
Але те, що було насправді послав це запит для НЕ слеш, але / пошук? д = кішки.
>> Тепер, чому це так важливо?
Ну, я збираюся вивести з того, що якщо ви Google
підтримує запити цієї форми, тому Не я реалізувати власний пошук
Двигун для CS50, але тільки передня кінець, просто графічний інтерфейс користувача.
І ми будемо аутсорсинг задній кінець, призводить фактичний пошук в Google.
>> Так як я можу це зробити?
Ну, дозвольте мені перейти в Gedit тут.
І дозвольте мені йти вперед і відкривати до, скажімо, новий файл.
І я йду, щоб врятувати цей тимчасово як пошуку 0.html.
А потім в кінці кінців, ми будемо швидко чекаю того, що я заздалегідь підготовлені.
>> І я збираюся швидко на швидку руку типу DOC
HTML відкритий кронштейн HTML закрита дужка HTML.
Тоді я збираюся зробити голову близько голова відкрита назва CS50
Пошук замість пошуку Google.
Тут, внизу, я буду мати тіло, тут близько тіло.
А тепер мені потрібно CS50 Пошук.
І насправді, давайте побудувати цей поступово.
Я збираюся йти вперед і закрити цей та насправді поклав його в загальний каталог.
Так дайте мені тільки один момент.
Пошук-0.html-- я збираюся тимчасово називати його search.html.
Я збираюся CHMOD йому + R search.html.
А тепер я збираюся відкрити його.
Гаразд, так, щоб було швидко.
Але мета просто був щоб отримати нас до точки
того, цей текст файл з ім'ям search.html.
Так що нема на що дивитися ще.
Справді, якщо я йду в моєму браузері, і перейти до search.html, це все, що є.
Але ви знаєте, що?
Я можу бути трохи незвичним.
Я прочитав у книзі, що є Тема тег називається h1.
І я збираюся йти вперед і використовувати цю відкриту h1 і близько h1.
Оновити сторінку.
І тепер це більше і сміливіше, не все, що цікаво,
але принаймні це структурно цікавішим.
Але тепер дозвольте мені представити ще один тег.
Виявляється є форма тега.
І дозвольте мені закрити цю мітку.
І виходить, що є вхід тег,
має атрибут типу, який це тип даних поля,
якщо ви будете.
І буде типу тексту.
І його значення буде бути CS50 Пошук.
Закрити тег.
І там відбувається, немає поняття відкриття та закриття з окремими тегами.
>> Дозвольте мені повернутися сюди і подивитися, що відбувається, перезавантажте.
Отримання цікаво.
Схоже, це текстове поле.
І насправді, я не хочу поставити значення там ще.
Дозвольте мені повернутися сюди і фактично отримати позбавитися від цього значення, щоб зберегти його простим.
Замість значення, що я хотів дати цю річ було ім'я.
І я не знаю, що це таке, так що я повернуся до цього.
>> Але нижче, що я хочу зробити тип входу = уявити.
І це значення буде CS50 Пошук.
І ми побачимо, чому я переїхав значення в цьому.
Коли я перезавантажити, я, здається, тепер є зачатки мого власного пошуку
Двигун, супер огидний, хоча, чесно кажучи, це
недалеко кидок від того, що Сторінка Google, за замовчуванням виглядає.
>> Якщо я йду сюди зараз, я можу набрати в кішки і, сподіваюся, натисніть кнопку Пошук.
Але я не зовсім зроблено ще, бо я не реалізовані,
Очевидно, бази даних.
Я не лізли Веб-за результатів пошуку.
Тому мені потрібно, щоб аутсорсинг, що в Google.
Так як же це зробити?
>> Ну, перш за все я потрібно додати і дії
приписати моєї тега форми, що є http://www.google.com/search.
І я знаю, що тільки від того, висновок, подивившись уважно
на їх URL.
А тепер зробити припущення.
Що повинен це текстове поле, ймовірно, назвати, на основі якої ми прийшли
від до?
>> АУДИТОРІЯ: д.
>> DAVID J Маланій: д.
І ми насправді не потрібно питання помітити це виходить, але д дійсно це,
д для запиту, ймовірно, по за замовчуванням, просто тому що це
що Ларрі і Сергій придумав років тому.
Так що тепер дозвольте мені перезавантажити сторінку.
Це не виглядає все, що відрізняється.
Але тепер подивимося, що відбувається.
>> Якщо я друкую в кішок і натисніть CS50 Пошук і відпустити,
помітити, що я отримати збитим від фактичної Google.
Тепер, Google в даний час трохи дратує в тому, що вони
додавши додатковий параметр, якщо хочете, щоб в URL.
От і все відбувається автоматично на стороні Google.
>> Важливою частиною є те, що я, здається, щоб породили цей запит тут.
І справді, це те, що відбувається.
Якщо у вас є HTML, що Схоже, це, це
є свого роду позначення веб-розробників за ці слова, йти вперед і створити форму
що, коли він уявив, він збирається за наступною адресою.
І коли URL надав Значення для таких речей, як д,
не йдуть просто на цей URL.
Насправді, перейти до питання знак, а потім д = кішки.
Додайте параметр, Параметр HTTP подібне.
>> І тільки, щоб бути супер точним, що їх висновок here--
але я буду більш explicit-- є що метод, який я хочу використати
це отримати, а щось на зразок Повідомлення, яке ми в кінцевому підсумку побачити.
Коротше кажучи, просто розуміння HTML і використовуючи деякі досить прості теги,
Тепер ми можемо приступити до створення наш власний фронт кінцевий користувач
інтерфейс з можливістю пошуку Двигун позаду нього.
>> Але це звичайно, досить огидний.
Отже, дозвольте мені насправді відкрити трохи краще версія.
Це той, який я підготував в вперед, що є деякі коментарі.
Але ви побачите, що я в значній мірі відтворили його.
Так що це вже доступні в Інтернеті.
І я, трапляється, превентивно перейти до HTTPS просто тримати його просто.
>> А тепер давайте відкриємо Наступна ітерація цього.
Є замість версія 1 0.
Що вистрибує на вас, як злегка відрізняється в цьому прикладі?
>> АУДИТОРІЯ: [нерозбірливо].
>> Так, є такий текст вирівняти центр.
Це трохи дивно, тут.
Але це дійсно нова.
І, може бути, думаю, що це відбудеться.
Якщо я йду в моєму браузері зараз і відвідати пошуку-1.html,
це майже те ж саме.
Але це крок ближче до бути трохи більш значною.
Це ще негарно, але красивіше в тому, що принаймні, все, тепер по центру.
>> Ось і виходить, що те, що я використовую є інша мова взагалі називається
CSS, каскадні таблиці стилів.
І CSS, чесно кажучи, це свого роду з, на мою особисту думку,
жахливо розроблена мова.
Це дуже дратує пам'ятати всі різні деталі.
Але це те, що стилізує Вся всесвітня павутина сьогодні.
Я образили кого.
Добре.
Так що давайте повернемося сюди і подивитися, як ми насправді за допомогою цього.
І виходить, принаймні, це насправді досить проста мова.
Це просто пар ключ-значення, властивості і значення, властивості і значення.
Справді, тут є один таке майно і значення.
>> Просто за допомогою стилю атрибутів на моєму тілі тега
і надавши йому значення Слово товстої кишки і інше слово,
або властивість і значення, Я можу вплинути на естетику
веб-сторінки, а не обов'язково структура ще,
але естетика нього.
І тільки по погуглити навколо, я розумію, що листи CSS, каскадні таблиці,
підтримує властивість вирівнювання тексту, значення якого може
бути зліва, справа, або центр, наприклад.
>> Так що тепер, коли я перезавантажити цю сторінку, то, що я дійсно отримував
був центром сторінка, але все ще досить потворний.
Давайте йти вперед і відкривати до версії 2 Пошук.
А тепер зверніть увагу, що я зробив трохи більше.
Зверніть увагу, що тут усередині голови Тег, може бути більше, ніж заголовку.
Насправді, є тег стиль.
І це, де це тільки отримує трохи брудний бачення CSS іноді.
>> Зверніть увагу, що я, здається, є щось що структурно виглядає зовсім інакше.
Але тут це ім'я тег Хочу стилізований.
Ось наші старі друзі кучеряве підтяжки і закрита фігурна дужка.
А потім тут є те, що властивість і його значення.
>> Якщо я завантажити цей файл, search2.html, Кінцевим результатом є ідентичним.
Але це крок у бік підвищення якості виконуваних робіт.
Виділивши цей CSS, у мене є не змішуються його з моєї HTML.
І справді, як ми побачимо, я міг використовувати ці властивості і значення.
Якби я хотів зробити букети частини моєї веб-сторінці по центру,
Я не доведеться вводити стиль = вирівнювання тексту центр повсюдно.
Я можу поставити в одному місці можливо, хотіли нагорі.
>> Але навіть це не найкращий дизайн.
Насправді, одна з речей, ви дізнаєтеся, як ви проводите більше часу з
веб-програмування є те, що чим більше ви можете модулярізуете речі і фактор речі
як .h файлів давайте фактор речі з, подобається helpers.c Давайте фактор речі
декілька psets тому.
Точно так же, ми могли б хочу добитися цього.
>> Так помітити в версії три з search.html я маю
очищені глава сторінка і просто поставити
в цьому, посилання тег, який всупереч назві,
не дає вам гіперпосилання.
Він пов'язує в інший файл шляхом HREF значення якого в даному випадку,
є пошук-3.css
Так що я розумію, що ми збираємося швидко.
Але все, що я роблю це свого роду переміщення речі навколо.
Нехай мені відкриту пошуку 3.css.
Там він не є, нічого дійсно до нього.
Я просто скопіював і вставив його в новий подати, так само, як ми врахували речі з
в інші файли перед.
І result-- повністю underwhelming--
буде точно те ж саме.
Але ми рухаємося toward-- ні, це не так.
О, я знаю, чому.
>> Так що, схоже, що це помилка.
І це в якомусь сенсі.
Але дозвольте мені відкрити свою вкладку Мережа.
Дозвольте мені перезавантажте сторінку.
Ах, чому CSS не застосовується?
Добре, файл CSS, аналогічно, має щоб бути доступний усім, так сказати.
І це теж нині заборонено.
Отже, дозвольте мені зробити CHMOD A + R зірки точка CSS-- whoops--
ми точка CSS це просто Розширення файлу для файлів стилів.
Тепер дозвольте мені повернутися до мій браузер і перезавантаження.
ОК, трохи краще.
>> Тепер зробимо одну річ.
У пошуковій-4.html.
У мене є версія, що я просто думав, був набагато крутіше, хоча і набагато більше
складний.
Давайте подивимося на результат в першу чергу.
Закрити це, щоб дати нам більше місця.
Змініть це шукати-4, Enter.
>> А тепер купа речей зламані.
Я збираюся повернутися в моєму каталозі тут.
А тепер я просто хочу зробити CHMOD з A + R на file--
бо я знаю, що це exists-- називається logo.gif, який є образ.
А тепер перезавантажити.
І wow-- так що тепер я досить близько, чесно кажучи,
подобатися версію Google 1999, і чесно кажучи, версія Google 2014,
чи не так?
>> Так що це зараз відбувається на їх сайт, в кінцевому рахунку, якщо я шукаю для кішок.
І це дійсно так.
Але те, що я зробив по-іншому в цій версії 4?
Таким чином, ми не будемо надто докладно зупинятися на цьому тут.
Ви побачите це в проблему встановити сім кінці кінців.
Але зверніть увагу, я зробив кілька речей.
>> Я ввів DIV тег, який є підрозділом,
близькі за духом до пункту тега.
Але поділ, як, ось прямокутна невидимим область
екрану.
Давайте дамо йому унікальний Ідентифікатор, підвал, тільки
так що ми можемо говорити про це в нашому форматі HTML в іншому місці.
Ось ще один DIV сторінки чий ID збирається задовольнятися.
Це зміст сторінки.
І тут це заголовок сторінки.
>> Іншими словами, у мене є по суті в HTML я подумки
дивляться цю веб-сторінку в якості Три компонента, заголовок
тут з цією невидимою прямокутника, утримання в середині, а потім
підвал внизу, навіть хоча ми не бачимо ці речі.
Тому що я хочу, щоб в моїй голові сторінка тут, або в файлі .css,
Я можу використовувати цей синтаксис.
>> Тема не є тег.
Це ID так виходить що, роблячи #header,
Тепер я можу застосувати одну або декілька властивості в заголовку.
Я можу зробити те ж саме зміст, те ж саме для утримання тут.
>> Так, наприклад, у виносці, повідомлення всі ці властивості я додаю.
І я знаю, що вони існують тільки на читання на документації для CSS.
Розмір шрифта буде smaller-- тому деякі відносний розмір шрифту.
Вага збирається бути сміливим.
Margin-- скільки пікселів навколо it-- 20 пікселів.
І це буде по центру.
>> Але зараз, сторінка виглядає наступним чином.
Якщо я не задоволений моя копія тут же,
Я міг би зробити щось на зразок червоного кольору.
І тоді я можу зберегти це, перезавантажте, і тепер я стилізований підвал.
Так що це просто натякаючи на владу про те, що ви можете зробити на веб-сторінці
щоб змінити хід подій.
>> І навіть крутіше, ніж це, якщо ви хочете копатися з фактичними сайтів,
Ви не можете постійно міняти їх.
Але якщо я відкриваю Інспектор Chrome знову
і я йду ні до лівій стороні Тут, який показує HTML на Facebook,
але показує на правій сторона все його CSS,
Ви можете і змінити стан речей на льоту.
Отже, дозвольте мені йти вперед і робити це.
>> Дозвольте мені йти вперед і управління натисніть на цю випадкового слова тут,
підписати і натисніть Огляньте елемент.
Chrome дуже зручно переходить до h1 тег, Facebook використовує.
І зауважте, тут Facebook має вигляд ліниво
жорстко розмір шрифту у власності тут.
>> Так здорово, що хоча що якщо я насправді йти сюди
і кажуть, о, Facebook, я не люблю, що 64 пікселів, ми можемо тепер змінити Facebook.
Звичайно, ми тільки змінюючи його особисто для мене на даний момент.
Але це всього лише ще інструмент в нашому наборі інструментів
що відбувається, щоб дозволити нам налаштувати і з'ясувати, а також діагностувати
питання в наших власних веб-сторінок.
І ми могли б так само перейти тут, що те ж саме, що.
Якщо ви дійсно хочете отримати фантазії, я значить, тепер ви можете дійсно мутувати сторінку
і робити божевільні речі.
>> Так чому все це корисно?
Ну, зрештою, ми захоче бути
можливість створювати веб-сторінки, що рухає нашими задніх кінців,
не тільки Google і аутсорсинг задній кінець там.
Ми насправді хочемо значення, наприклад,
дії нашої пошукової системи атрибутів йти не до когось ще,
але щось подібне search.php, де search.php на нашій власній сервері,
нема на кого-то другого.
>> І так, щоб потрапити туди, ми насправді потрібно ввести нову мову.
Таким чином, ми вже дивилися на один новий Мова тут, або дві дійсно, HTML
і CSS.
Але вони насправді просто структурні та естетичні мови.
Вони не програмування мови як такі.
А от про те, як багато формального Час, як ми будемо витрачати на них.
Тому що ми почнемо зараз до переходу на PHP.
>> Так PHP є актуальною Мова програмування.
Це мова сценаріїв в сенсі, що це
значить бути легка вага чимось на зразок C,
І це інтерпретована мова, що означає, що це не складено.
Таким чином, в двох словах, що це значило коли ми використовували мову, як з
і ми повинні були зібрати його?
Що це означає для компіляції C вихідний код?
АУДИТОРІЯ: [нерозбірливо].
DAVID J Маланій: Скажи це ще раз?
АУДИТОРІЯ: [нерозбірливо].
DAVID J Маланій: Прекрасно.
Це перетворює його в двійковому вигляді.
Це перетворює його в нулів та одиниць від фактичного англійська-як вихідний код.
І тоді ми можемо насправді запустити ці нулі й одиниці
пропускаючи їх через CPU, двічі клацнувши значок
або виконання команди.
>> PHP і Python і Рубі і Perl і JavaScript
і грона друга мови інтерпретуються
мови, що є Ви не компілювати їх.
Швидше, ви годуєте їх як внесок в Програма називається перекладача.
І що перекладач, які хтось написав,
зчитує вихідний код зверху вниз, зліва направо і тільки інтерпретує
ці лінії і робить те, що ви говорите.
>> Так що, якщо ви зіткнулися з лінія, яка говорить друк,
це не обов'язково конвертувати друк до відповідних нулів та одиниць.
Це просто є цей перекладача як великий, якщо умова, що говорить,
якщо інструкція програміста є друк, то зробіть наступне.
Так він інтерпретує його як раз по виду міркування
через те, що ти говориш це зробити.
>> І PHP є одним з цих мов.
І PHP років тому був розроблений саме для веб-програмування.
І це було спочатку дуже неакуратно брудний мову.
І справді, є величезний Кількість поганий код PHP там.
Але сама мова дозрів протягом багатьох років,
тож тепер це насправді чудовий наступний крок
педагогічно від C, тому що це так чертовски знайоме всім
ви тільки що бачили в останні кілька тижнів.
>> Той початкова різницю ми побачимо це немає основна функція більше.
Коли ви почнете писати код, це просто відбувається не отримати виконана ні на що,
як ми побачимо трохи пізніше.
Між тим, ось що Мінлива виглядає в PHP.
Це трохи різні, але тільки чуть-чуть.
>> В PHP, тобто не сувора типізація.
Там в тиждень набравши, який просто означає, що
типи даних, такі як рядки і номера та інші речі.
Але ви не турбуйтеся вказавши що вони більше.
PHP цифри це для вас.
Знак долара є тільки рішення що PHP люди зробили років
назад таким чином, щоб будь-яка змінна в PHP просто починає зі знаком долара.
Це насправді свого роду корисні тим, що він стрибає на вас трохи більше.
>> Але після цього, це це стан, при PHP.
Що змінилося порівняно з C?
НЕ Trick question-- нічого, який насправді дуже приємно.
Логічні вирази в PHP-- же.
Логічні вирази с і проти або, перемикачі, петлі, петлі, loops-- ОК,
цей відрізняється.
>> Ось і виходить, що є Кілька інших функцій в PHP.
Один з них насправді це, який чудесно зручно.
Якщо $ чисел є масивом, що ви заявив раніше в програмі,
у вас є ця фантазія для кожної конструкції що замість того, щоб робити все, що
дратує Я дорівнює 0, я це менше, ніж це, [? Я ++?],
для кожного числа як числа, де кожен цих цінностей знак долара тільки
змінна, а другий Ви можете думати, як І.
Ви могли б назвати це все, що ви хочете.
Я назвав його номер.
Це буде перебрати масив називається число.
І на кожній ітерації, це відбувається автоматичне оновлення
для вас число знак долара Змінна, так що ви постійно
мати доступ до змінної, яку без необхідності робити будь-які квадратна дужка
позначення або індексації в масиві.
>> Крім того, у нас навіть є такі речі, як масиви, які виглядають майже так само ,,
за винятком того, дуже часто, як ми будемо см, і в PHP і JavaScript
попередньо инициализировать масив використовуючи квадратні дужки.
З використовує фігурні дужки.
Так що це трохи відрізняється, хоча ми дійсно не використовувати цей прийом багато.
>> Але ще більш потужно, PHP має асоціативні масиви,
який є химерним способом сказати хеш-таблиці.
Насправді, якщо ви хочете оголосити хеш Таблиця в PHP, на відміну від C-- скільки
рядків коду пішло на насправді реалізувати хеш-таблицю в C?
Або скільки рядків коду є його приймаючи до реалізації хеш-таблицю в C?
Так що це, ймовірно, багато, чи не так?
Це кілька десятків, може бути, 100 або 200.
Це нетривіальна.
Чи він збирається бути, як Ви скоро побачите, нетривіально
для реалізації хеш-таблицю [Нерозбірливо], а також спробувати.
Але в PHP-- і, чесно кажучи, я ймовірно, не повинен сказати вам це
до Monday-- в PHP, якщо ви хочете стіл, зробити.
Це хеш table-- так з одного рядка коду.
І
>> Багато мов зробити.
Удачи з PSET п'ять.
Так багато мов цього.
Вони дають вам ці абстракції що інші люди, іншими програмістами,
створили для Вас, так що Ви можете стояти на своїх плечах
і почати використовувати ідеї, які супер переконливим, як хеш-таблиці і дерева
і намагається.
Але ви не обов'язково повинні здійснювати ці речі самостійно.
>> І так, в кінцевому рахунку, те, що ми збираємося використовувати PHP для
потенційно написанні програм з так званої командного рядка.
Ми могли б відтворити кожну програму ми написали в цьому семестрі досі,
крім, може бути, Breakout, яка використовує SPL, яка специфічна для C на даний момент.
Але кожен Інша проблема встановити, звичайно Маріо і Цезар
і Vigenere і [? Crack?] І далі, ми
може повторно реалізувати в PHP, і ймовірно, трохи легше.
>> Але що ми в кінцевому підсумку збирається використовувати PHP для це веб-програмування.
І ми збираємося ввести в наступному тиждень ментальна модель, парадигма називається
MVC, вид моделі контролера, які, якщо ви зробили програмування
до цього в Python або Рубі або в іншому місці, ви
може знаєте цієї команди з Рейки і Django тощо.
Але якщо ви новачок в це занадто, ви побачите
що це насправді дуже природно розширення факторизации
і начебто дизайну коду, який ми
робив у С. Ми збираємося зараз застосовувати деякі з цих уроків в PHP
так, щоб, зрештою, ми реалізації наших власних веб-сайтів.
І якщо ви роду загіпнотизовані або вражені
що ми збираємося зробити, все так швидко,
розумію, що майже кожен семестр, майже 90%
студентів CS50, в тому числі які ніколи не програмували,
в кінцевому підсумку зробити остаточні проекти, засновані на веб-програмування.
І таким чином, ви побачите, що повертається високі в найближчі тижні.
Таким чином, ми будемо бачити вас тоді в понеділок.
>> СПІКЕР 1: А тепер, Deep Думки по Daven Фарнем.
Хеш-таблиці.
>> [Сміх]