>> [Музыка, играющая]
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 Фарнэме.
Хэш-таблицы.
>> [Смех]