• HTML, CSS, JavaScript
  • Интернет
  • представляет собой сеть сетей компьютеров или серверов, которые общаются друг с другом, отправляя и получая данные.
  • на стороне сервера: работает на сервере или в облачных сервисах
  • на стороне клиента: работает на собственных устройствах пользователей
  • первоначальный «интернет» был создан в 1969 году и назывался ARPANET, который соединял компьютеры между различными учреждениями.
  • сегодня гораздо больше кабелей и серверного оборудования соединяют все компьютеры в Интернете.
  • маршрутизаторы — это специализированные компьютеры с ЦП и памятью, которые направляют или ретранслируют данные из одной точки в другую. дома или в кампусе у нас могут быть маршрутизаторы, которые принимают данные и отправляют их.
  • у маршрутизатора может быть несколько вариантов того, в каком направлении отправлять некоторые данные, и существуют алгоритмы, которые пытаются определить это направление.
  • протоколы – это набор правил или соглашений, таких как физическое рукопожатие для людей, которые мир согласовал для компьютеров для связи.
  • TCP: протокол управления передачей
  • IP: интернет-протокол
  • TCP/IP — это два протокола для передачи данных между двумя компьютерами. в реальном мире мы могли бы написать адрес на конверте, чтобы отправить кому-то письмо, вместе с нашим собственным адресом для письма в ответ.
  • IP – это протокол, который включает стандартный способ обращения компьютеров друг к другу. IP-адреса – это уникальные адреса компьютеров, подключенных к Интернету, поэтому пакет, отправленный с одного компьютера на другой, будет проходить по маршрутизаторам, пока не достигнет пункта назначения.
  • IP-адрес может иметь формат #.#.#.#, где каждое число может иметь значение от 0 до 255. Каждое число будет размером в один байт, поэтому весь адрес будет 4 байта или 32 бита. это означает, что эта версия IP, версия 4, может поддерживать не более 4 миллиардов адресов. другая версия IP, версия 6, использует 128 бит для поддержки гораздо большего числа возможных адресов.
  • TCP — это протокол для отправки и получения данных. TCP позволяет одному серверу с одним и тем же IP-адресом предоставлять несколько услуг за счет использования номера порта, небольшого целого числа, добавляемого к IP-адресу. например, HTTP отправляется на порт номер 80, а HTTPS использует порт номер 443.
  • TCP также позволяет отправлять большие объемы данных, например изображения, небольшими порциями. каждый из них может быть помечен порядковым номером, например, «часть 1 из 4» или «часть 2 из 4». и если один порт потерян, получатель может снова запросить недостающую часть.
  • UDP — это еще один протокол для отправки данных, который не гарантирует доставку, как TCP, который может быть полезен для потоковой передачи видео или звонков в реальном времени, поскольку мы не хотим ждать повторной доставки всех пакетов до того, как получаем новые.
  • DNS, система доменных имен, — это еще одна технология, которая преобразует доменные имена, такие как cs50.harvard.edu.tr, в IP-адреса. DNS обычно предоставляется соседним сервером с большой таблицей в памяти доменных имен и IP-адресов.
  • паутина
  • Интернет с маршрутизаторами, IP, TCP и DNS похож на водопровод, который позволяет нам отправлять данные с одного компьютера на другой. Интернет — это одно приложение, созданное поверх Интернета.
  • HTTP, протокол передачи гипертекста, стандартизирует взаимодействие веб-браузеров и веб-серверов в пакетах TCP/IP.
  • HTTPS — это безопасная версия HTTP, обеспечивающая шифрование содержимого пакетов между браузером и сервером.
  • URL-адрес или веб-адрес может выглядеть так:
  • https://www.example.com/
  • https://используемый протокол
  • / в конце — это запрос файла по умолчанию. он также может заканчиваться чем-то вроде /file.html для определенного файла.
  • example.com — это доменное имя, а другие, такие как .edu или .io, указывают, какой тип веб-сайта может быть там размещен.
  • www – это имя хоста или субдомен, который ссылается на один или несколько определенных серверов в доменном имени. имя домена может включать веб-серверы для почты, поэтому каждый субдомен может указывать на них отдельно.
  • вместе www.example.com — это полное доменное имя или имя, имеющее определенный набор адресов.
  • две команды, поддерживаемые HTTP, включают GET и POST. GET позволяет браузеру запрашивать страницу или файл в URL-адресе, а POST позволяет браузеру отправлять на сервер дополнительные данные, которые скрыты от URL-адреса. оба этих запроса являются запросами, которые мы можем отправить серверу, который предоставит взамен ответ.
  • запрос GET начнется с:
  • ПОЛУЧИТЬ / HTTP/1.1
  • Хост: www.example.com
  • …
  • GET указывает, что запрос относится к какому-то файлу, а / указывает файл по умолчанию.
  • существуют разные версии протокола HTTP. поэтому HTTP/1.1 указывает, что браузер использует версию 1.1.
  • Хост: www.example.com указывает, что запрос относится к www.example.com, поскольку на одном и том же веб-сервере может размещаться несколько веб-сайтов и доменов.
  • ответ на успешный запрос будет начинаться с:
  • HTTP/1.1 200 ОК
  • Тип контента: text/html
  • …
  • веб-сервер ответит версией HTTP, за которой следует статус, который здесь 200 OK, что указывает на то, что запрос был действительным.
  • затем веб-сервер указывает тип контента в своем ответе, который может быть текстом, изображением или другим форматом.
  • наконец, остальная часть пакета или пакетов будет включать содержимое.
  • ключи и значения, такие как:
  • Хост: www.example.com и
  • Тип контента: text/html
  • известны как заголовки HTTP
  • местоположение:заголовок для перенаправления браузером
  • в терминале VS Code мы также можем использовать командную строку, curl, чтобы увидеть заголовки ответа на запрос.
  • Код состояния HTTP:
  • 200 OK
  • 301 перемещен навсегда
  • 302 найдено
  • 304не изменено
  • 307временная переадресация
  • 401 неавторизованный
  • 403запрещено
  • 404 не найдено
  • *418Я чайник (первоапрельская шутка много лет назад)
  • 500внутренняя ошибка сервера
  • 503служба недоступна
  • HTML
  • Язык гипертекстовой разметки
  • не является языком программирования, а скорее используется для форматирования веб-страниц и указания браузеру, как их отображать.
  • пара ключ-значение: элемент данных идентифицируется произвольным именем. ключ — это имя, а значение — это содержимое.
  • простая страница в HTML может выглядеть так:
  • ‹!DOCTYPE html›
  • ‹html lang="ru"›
  • ‹голова›
  • ‹название›
  • привет, заголовок
  • ‹название›
  • ‹голова›
  • ‹тело›
  • привет, тело
  • ‹тело›
  • ‹/html›
  • ‹!DOCTYPE html› — это заявление о том, что страница соответствует стандарту HTML.
  • слова в скобках, такие как ‹html› и ‹/html›, являются тегами.
  • первый — это начальный или открытый тег, а второй — закрывающий тег.
  • начальный тег здесь также имеет атрибут , lang="en"
  • обратите внимание, что атрибуты представляют собой пары ключ-значение.
  • мы можем использовать валидатор (w3.org), чтобы проверить правильность нашего HTML.
  • Тег ‹p› указывает, что каждый раздел текста должен быть абзацем.
  • мы можем добавлять заголовки с такими тегами, как ‹h1›, ‹h2›… каждый уровень заголовка имеет разный размер, и мы можем использовать до шести уровней заголовков с ‹h6›
  • ‹ul› , чтобы создать неупорядоченный список , например маркеры.
  • ‹ol› , для упорядоченного списка.
  • тег ‹таблица›
  • ‹tr› теги как строки
  • Теги ‹td› для отдельных ячеек.
  • image.html, ‹img› , alt, чтобы добавить альтернативный текст для доступности.
  • видео.html
  • link1.html, с помощью ‹a› мы можем создавать ссылки или теги привязки.
  • hrefатрибут предназначен для гипертекстовой ссылки или просто того, куда нас должна вести ссылка, а внутри тега находится текст, который должен отображаться как ссылка.
  • фишинг – это обман пользователей, форма социальной инженерии, включающая вводящие в заблуждение ссылки.
  • в responsive.html мы можем добавить атрибуты, чтобы сделать нашу страницу адаптивной или автоматически адаптировать ее для разных размеров экрана.
  • мы также можем предоставить входные данные в запросе как часть URL-адреса, например
  • https://www.example.com/path?key=values
  • здесь ? указывает, что мы добавляем входные данные, которые будут включать одну или несколько пар "ключ-значение".
  • если мы ищем что-то в Google, мы увидим, что URL-адрес меняется на
  • https://www.google.com/search?q=cats&...
  • здесь ключ q для запроса имеет значение cats вместе с другими ключами и значениями.
  • CSS
  • каскадные таблицы стилей
  • ‹style› сообщает браузеру, как отображать теги на странице.
  • CSS использует свойства или пары ключ-значение, такие как размер шрифта: большой.
  • чтобы отделить CSS от HTML, мы можем включить стили в тег ‹head›.
  • мы можем использовать CSS селектор типа для стилизации каждого типа тега
  • мы также можем использовать более конкретный селектор класса.
  • мы можем определить собственный класс CSS с помощью . за которым следует выбранное нами ключевое слово.
  • .centered
  • .большой
  • .средний
  • .маленький
  • затем к любому количеству тегов в HTML-коде нашей страницы мы можем добавить один или несколько таких классов с атрибутом class.
  • мы можем взять весь CSS для свойств и переместить их в другой файл с
  • ‹ссылка›тег
  • у нас есть повторно используемый файл CSS
  • В CSS также есть селекторы идентификаторов. инструмент разработчика Chrome, вкладка элементы.
  • мы можем щелкнуть элемент в HTML на этой панели и изменить стиль нашей страницы в нашем браузере. мы можем навести указатель мыши на свойства CSS с правой стороны и снять или изменить их. это не изменит копию нашего браузера, поэтому мы можем поэкспериментировать.
  • мы также можем щелкнуть правой кнопкой мыши все, что отображается на странице, и нажать «проверить элемент», чтобы увидеть его выделенным на панели для нас, где мы можем быстро внести дополнительные изменения или узнать, как другие страницы реализуют функции.
  • с CSS мы также будем полагаться на ссылки и другие ресурсы, чтобы узнать, как использовать свойства по мере необходимости.
  • набор соглашений CSS и общих стилей известен как фреймворк с классами и компонентами, которые мы можем быстро использовать.
  • одной из популярных сред является bootstrap с такими компонентами, как оповещения, которые мы можем использовать с HTML.
  • даже с помощью фреймворка мы все равно можем написать свои собственные стили CSS, чтобы изменить все, что захотим.
  • JavaScript
  • код по-прежнему будет поступать с наших веб-серверов, но он будет выполняться браузером пользователя.
  • синтаксис JavaScript аналогичен синтаксису C и Python для основных конструкций.
  • пусть счетчик = 0
  • счетчик++
  • if (x<y)
  • {
  • }
  • пока (правда)
  • {
  • }
  • в JS мы используем let для объявления переменных без указания типов.
  • с JS мы можем изменять HTML в браузере в режиме реального времени. мы можем использовать теги ‹scripts› для непосредственного включения нашего кода из файла .js.
  • onsubmit, чтобы вызвать функцию, которую мы определили в JS, и использовать return false, чтобы предотвратить фактическую отправку формы где бы то ни было.
  • document – это глобальная переменная, поставляемая с JS в браузере, а querySelector – это функция, которую мы можем использовать для выбора узла в модели DOM, объектной модели документа или дереве. структура HTML-страницы. после того, как мы выберем элемент с именем ID, мы получим текст value внутри ввода и добавим его в наше оповещение.
  • мы можем переместить нашу функцию в нижнюю часть ‹body› страницы, так как мы хотим, чтобы остальная часть страницы загружалась первой.
  • мы также можем использовать анонимные функции в JS. мы можем передать функцию без имени с синтаксисом function(), и оказывается, что обработчики событий в JS получают переменную события, e, по соглашению, что мы можем использовать внутри нашей функции.
  • мы можем реализовать форму с автозаполнением, используя словарь слов и прослушиватель событий для события keyup.

Evernote ссылка