CS50 на русском 2016 Основы программирования (часть 2)
Часть 1 - Часть 2
На Неделе 6 мы оставим позади язык C и рассмотрим веб-программирование, а точнее - протоколы передачи данных и язык HTML. Вы узнаете что такое Интернет. Мы также вспомним, структруры данных, которые мы изучили на Неделе 5.
00:00:00 - Обзор Недели 5
00:05:18 - Веб-программирование
00:06:30 - Воины Сети
00:07:25 - Домашняя сеть
00:09:50 - DHCP и IP
00:12:56 - IP адреса
00:14:38 - DNS
00:16:29 - Роутеры
00:18:25 - nslookup
00:20:47 - Отслеживание маршрута
00:27:05 - Подводные кабели
00:29:10 - Пакеты
00:30:24 - TCP
00:34:01 - Порты
00:37:20 - Брандмауэр - Firewall
00:40:37 - VPN
00:43:46 - Воины сети (что такое Интернет?)
00:56:56 - HTTP
00:58:38 - GET
01:00:35 - Коды статусов
01:01:51 - Telnet
01:04:36 - Curl
01:08:17 - Запросы
01:11:49 - HTML
01:18:21 - hello.html
01:20:42 - image.html
01:22:48 - link.html
01:26:07 - paragraphs.html
01:27:37 - headings.html
01:28:22 - list.html
01:29:12 - table.html
01:30:21 - css0.html
01:32:36 - css1.html
01:34:45 - css2.html
01:37:57 - POST
01:39:39 - search.html
Словарь Недели 6
На этой Неделе словарь терминов представлен в основном аббревиатурами, которые используются для пояснения того, что такое Интернет и, как в браузерах создаются веб-страницы. Словарь содержит следующие термины и определения:
HTML (HyperText Markup Language) - язык гипертекстовой разметки
CSS (Cascading Style Sheets) - каскадные таблицы стилей
Firewall - брандмауэр, межсетевой экран
Router - роутер, маршрутизатор
VPN (Virtual Private Network) - виртуальная частная сеть
HTTP (HyperText Transfer Protocol) - протокол передачи гипертекста
LAN (Local Area Network) - локальная вычислительная сеть
IP address - адрес Интернет-протокола
Что такое Интернет и как он устроен изнутри
Адреса используются людьми довольно давно и являются очень удобным инструментом при поиске того или иного строения. Сложно представить себе карту района или города, в которой было бы отмечено большое дерево или гора, или указана любая другая точка отсчета. И было бы указано количество шагов в каждом из направлений, которые необходимо преодолеть, чтобы добраться в нужное место. Это больше напоминает карту сокровищ из мультфильма, фильма или сказки.
Поэтому люди пришли к соглашению использовать адреса. Точно так же существуют адреса и у компьютеров, которые называются IP адресами. IP адреса присваиваются компьютерам при подключении к сети, другими словами это уникальный адрес вашего компьютера в сети. Сеть может быть локальной, которая покрывает относительно небольшую группу компьютеров и других устройств, например, принтеров. IP адрес версии 4, так называемый IPv4 представляет собой 32-битное число, записанное в виде четырех десятичных чисел от 0 до 255, разделенных точкой. Например, 198.23.199.12.
Это похоже на то, как мы в реальном мире отправляем письма в конвертах с указанием адреса КОМУ и адреса ОТ кого. В мире Интернета отправка информации между компьютерами осуществляется по такой же самой аналогии, только вместо слов Нью-Йорк, Уолл-Стритт 45 указывается IP адрес компьютера отправителя и компьютера получателя. Но это еще не все. При отправке информации между IP адресами компьютеров находятся роутеры или маршрутизаторы. Это устройства, предназначенные для того, чтобы направлять информацию друг другу до тех пор, пока она не достигнет точки назначения. Маршрутизатор смотрит на IP адрес получателя, указанный на «конверте» и отправляет информацию соответствующему роутеру. Так происходит до тех пор, пока конечный адресат не получит свой пакет информации.
Порты
Возникает логичный вопрос: «Откуда компьютер знает, какой тип данных содержится в том или ином пакете информации?» Все очень просто. Каждый тип информации передается по соответствующему порту. Давайте посмотрим на самые популярные номера портов:
1. 21 FTP - для передачи файлов в незашифрованном виде
2. 22 SSH - для передачи файлов в зашифрованном виде
3. 25 SMTP - протокол для передачи почтовых сообщений в незашифрованном виде
4. 53 DNS - система доменных имен
5. 80 HTTP - протокол передачи гипертекста
6. 443 HTTPS - протокол передачи гипертекста с использованием SSL-шифрования
С полным перечнем портов Вы можете ознакомиться в Википедии.
Но стоит отметить, что было бы неудобно посещать Facebook, Google или любой другой сайт, если бы нужно было помнить его адрес в виде 32-битного кода. Поэтому люди пришли к соглашению использовать систему доменных имен DNS. Система предназначена для того, чтобы преобразовывать числовой адрес в текстовый, а текстовый - в числовой. Именно благодаря DNS мы вводим в браузере адреса всех сайтов в виде букв.
Язык разметки HTML и каскадные таблицы стилей CSS
Что же происходит после того, как Вы перешли по какому-то адресу в Интернете? Браузер покажет Вам нужную веб-страницу. Язык, на котором написана веб-страница называется HTML. Помните структуры данных с Недели 5, которые выглядят в виде деревьев. Такое же самое дерево элементов выстраивается и при помощи языка разметки HTML, а CSS служит для стилизации элементов дерева элементов. Давайте посмотрим на простейших HTML код, отображающий в окне браузера фразу «Привет, мир», которую мы впервые увидели на Неделе 0.
Привет, мир!
Привет, мир!
Что такое Интернет?
Хорошим тоном считается размещение CSS-стили в отдельном файле и подключать их в файл HTML. Преимуществом такого подхода является не только удобство при создании веб-страницы, а и отсутствие повторной загрузки кода стилей при обновлении страницы или при переходе на другую страницу.
На Неделе 7 мы вплотную начнем рассматривать основы языка Python, узнаем какой алгоритм применяется для распознавания содержания изображений и с головой окунемся в приложения группировки текста по смыслу. На Неделе 7 мы узнаем о том, что такое машинное обучение и вспомним что такое Интернет с предыдущей недели.
00:00:00 - Вступление
00:01:47 - Введение в машинное обучение
00:11:21 - Классификация изображений
00:17:13 - Плоский мир
00:19:35 - Линейный, Плоский, Объемный, и другие миры
00:26:19 - Введение в Python
00:30:55 - Обучение с учителем
00:43:52 - Python для классификации изображений
00:56:01 - Глубокое обучение
01:00:07 - Глубокое обучение в автомобилях
01:03:43 - Кластеризация текста
01:17:07 - Итоги
Словарь Недели 7
Machine Learning - машинное обучение
Image Recognition - распознавание изображений
Natural Language Processing - обработка естественного языка
K-Nearest Neighbors Algorithm - метод k ближайших соседей
Lineland - Лайнландия (линейный одномерный мир)
Flatland - Флатландия (плоский двумерный мир)
Spaceland - Спейсландия (объемный трехмерный мир)
Deep learning - глубинное или глубокое обучение
Semi-supervised learning -0бучение с частичным привлечением учителя
Что такое машинное обучение?
Люди по-разному интерпретируют понятие машинное обучение. Для кого-то это понятие ассоциируется с кучей роботов, как было не раз продемонстрировано в Голливудских фильмах. Для кого-то машинное обучение это не что иное, как комната с кучей серверов или сложные математические функции. На самом деле машинное обучение это подраздел искусственного интеллекта, основанный на алгоритмах, которые могут обучаться. На сегодняшний день существует масса различных приложений, которые используют алгоритмы машинного обучения. Среди них: поисковые системы, приложения распознавания изображений, приложения распознавания голоса, обработка естественного языка. На первый взгляд эти приложения создают впечатления сложных алгоритмических закономерностей. Так и есть, однако в их основе лежат простые принципы, базирующиеся на вычислении расстояния к ближайшей известной точке и являются основой алгоритма классификатора ближайшего соседа.
Для вычисления вышеупомянутых расстояний используется широко известная теорема Пифагора, которую все изучали в школе. Примечательным является тот факт, что теорема Пифагора отлично работает не только в одно-, двух-, трехмерном измерении, но и в значительно больших измерениях. Удивлены? Да-да, вы все правильно поняли. К сожалению в школьной программе, в университете основной упор делается на одно-, двух- и трехмерные измерения. Однако в реальности существуют 32-мерные, 64-мерные и более измерения.
Алгоритмы машинного обучения были известны еще в 80-х годах ХХ столетия, однако ввиду отсутствия достаточной вычислительной мощности так и остались в теории на бумаге. Еще одной проблемой в то время было отсутствие доступа к огромному количеству информации, которую можно использовать в качестве обучающего набора.
Распознавание изображений
Машинное обучение используется в большом количестве различных приложений. На Неделе 7 мы будем акцентировать внимание на распознавании изображений и обработке естественного языка. Первым приложением, которое приходит в голову при упоминании фразы «распознавание изображений» является, конечно же, Facebook. В действительности Facebook использует алгоритм глубинного обучения, который не является столь же тривиальным, как пример на Неделе 7. Однако даже сложный алгоритм распознавания изображений компании Facebook или компании Tesla берет свое начало из алгоритма, состоящего всего из 3 строк. Как Вы уже поняли из названия, эти строки написаны на языке Python, обладающим удивительной читабельностью и простотой. Данный алгоритм использует определенное количество обучающего набора изображений и на основании этих изображений делает вывод о содержании того или иного изображения.
Думаю Вас определенно интересует точность такого алгоритма. Спешу сообщить, что при наличии обучающего набора из 100 изображений, точность распознавания составляет 63%. Однако если воспользоваться обучающим набором, состоящим из 1000 изображений, точность составит, внимание, 97%. В этом случае речь шла о распознавании черно-белых изображений цифр размером 8 на 8 пикселей.
Когда мы рассмотрим пример с цветными изображениями размером 32 на 32 пикселя, то столкнемся с некоторыми сложностями. Проблема заключается в том, что изображение, на котором, например, сфотографирована лошадь может отличаться от другого изображения с лошадью по многим параметрам. Это может быть ракурс съемки, размер, положение, освещенность и так далее. В этом случае алгоритм распознавания изображений сталкивается с настоящими сложностями. И тогда в помощь приходят алгоритмы глубокого обучения, которые использует Facebook и Tesla в своих автопилотах, где точность распознавания составляет 95%.
В этом случае возникает еще один логический вопрос: «А достаточно ли иметь точно при распознавании изображений в 95%?» Ответ на этот вопрос Вы сможете найти на Неделе 7 курса CS50 по основам программирования.
Группировка (кластеризация) текста
А как на счет задачки по группировке текста по его содержанию. Например, у Вас есть тысячи фильмов, содержащих название и описание и стоит задача отсортировать их по жанрам. Комедии к комедиям, мультфильмы к мультфильмам, боевики к боевикам, трейлеры к трейлерам. Интересная задача, не так ли? В этом Вам поможет машинное обучение, тот же самый базовый алгоритм классификатора ближайшего соседа. Реализация такого алгоритма выглядит простой и понятно, конечно же, с использованием языка Python.
Одним из значащих событий для всех причастных к алгоритмам обучения стало мероприятие, произошедшее в марте 2016 года. Это был турнир между компьютером и чемпионом мира по игре Go, которая по количеству комбинаций во много превышает шахматы. Этот турнир закончился со счетом 4:1 в пользу компьютера. Это была демонстрация мощи машинного обучения всему миру.
На Неделе 8 мы выполним полное погружение в язык Python, перенесем все программы с языка C на язык Python. На Неделе 8 мы рассмотрим MVC и узнаем, как создаются динамические веб-сайты с помощью языка Python. Мы создадим свой собственный веб-сервер и вспомним машинное обучение с предыдущей недели.
00:00:00 - Обзор Недели 7
00:02:15 - Переход от C к Python
00:11:40 - Интерпретируемые языки
00:15:26 - Перенос программ на язык Python
00:17:47 - hello.py
00:20:05 - string.py
00:26:20 - int.py
00:27:03 - imprecision.py
00:30:01 - ints.py
00:32:47 - temperature.py
00:34:14 - logical.py
00:38:35 - positive.py
00:48:35 - cough0.py
00:49:35 - cough1.py
00:50:00 - cough2.py
00:51:20 - cough3.py
00:52:30 - cough4.py
00:55:17 - strlen.py
00:57:34 - ascii0.py
00:59:25 - argv0.py
01:01:09 - argv1.py
01:02:33 - argv2.py
01:05:23 - exit.py
01:06:59 - compare1.py
01:10:20 - copy1.py
01:14:20 - noswap
01:15:52 - noswap.py
01:18:06 - swap.py
01:21:24 - structs0.py
01:25:34 - structs1.py
01:29:22 - student.py
01:34:50 - Проверка орфографии
01:35:46 - dictionary.py
01:38:53 - Преимущества языка высокого уровня
01:40:09 - Веб-программирование
01:44:24 - MVC
01:46:14 - serve.py
01:53:51 - Веб Фреймворки
01:54:42 - Flask
02:11:19 - Итоги
Словарь Недели 8
Function - функция
Loop - цикл
Range - диапазон
Variable - переменная
Boolean expression - логическое выражение
Condition - условие
Source code - исходный код
Define - задать
Compiler - компилятор
Bytecode - байт-код
Interpreter - интерпретатор
Tuple - кортеж
Same - одинаковый
Different - разный
Format - формат
Temperature - температура
Something - что-то
Cough - кашель
Achoo - чиханье
MVC (Model-View-Controller) - Модель-Вид-Контроллер
Dorm - общежитие
Cart - корзина
Failure - провал
Success - успех
Student - студент
Read - читать
Write - писать
Response - ответ
Framework - шаблон, каркас
Register - регистрация
Submit - отправить
Title - заголовок
Body - тело
Quantity - количество
Store - магазин
Перенос программ с языка С на язык Python
На Неделе 8 мы начнем углубленно рассматривать язык Python. Мы начнем с легендарной фразы «Привет, мир!» и рассмотрим способы выражения функций, условий, логических выражений, переменных и циклов, используя язык Python. Особенностью языка Python в отличие от C является то, что язык Python является интерпретируемым языком более высокого уровня, нежели C. Это означает, что нам не нужно каждый раз компилировать код, как мы делали в C с помощью clang. Еще одним преимуществом Python является читабельность кода, что дает возможность буквально писать практически целые предложения. Нам больше не нужно использовать амперсанд «&» для обозначения «И» или использовать вертикальные черточки «||» для обозначения «или». Нам достаточно просто написать «and» или «or».
Еще одна проблема, с которой мы столкнулись в C заключалась в делении двух целых чисел integer друг на друга. В языке C при делении 1 на 10 результатом было ближайшее округленное целое число 0. В языке Python эта проблема решена, более того не нужно никаких объявлений типов данных. То есть Python сам понимает типы данных, то ли это строка, то ли число и т.д. Однако даже с переходом на Python осталась одна проблема, касающаяся точности. Если мы разделим 1 на 10 и посмотрим на 55 знаков после запятой, то увидим точно такой же результат, как и в С.
Больше кода на Python
Помните «\n», который в языке С приходилось каждый раз добавлять для перехода на новую строку? В Python уже по умолчанию курсор переходит на следующую строку и только в случае, если Вам нужно остаться на той же строке Вы пишите end=»». Короче говоря, Вам не нужно заботиться о многих низкоуровневых вещах, которые были в С. Это касается не только компиляции кода, это касается также работы с памятью компьютера, которую Python делает за Вас. Помните когда в C у нас не получалось поменять местами 2 значения или сравнить два значения до тех пор, пока мы не начали использовать указатели pointers. В языке Python указатели pointers отсутствуют, однако сравнение чисел происходит не по их адресам в памяти, а по их значениям.
И нам больше не нужно вникать в то, как вещи реализуются под капотом, нам не нужно беспокоиться об возможных утечках памяти. Мы становимся на плечи других людей, которые столкнулись до нас с определенными проблемами и решили их. Стоит помнить, что есть Python версии 2 и версии 3. Особенностью является то, что они несовместимы. Это значит, что код, написанный в версии 2 не будет работать в версии 3 и наоборот.
Таким образом, на Неделе 8 мы рассмотрим все программы, которые мы написали на протяжении всех предыдущих недель. От простейшей программ «Привет, мир!» до кода программы для записи данных в файл .csv.
Язык Python для создания веб-сайтов
На Неделе 6 мы впервые познакомились с веб-страницами, языком HTML и CSS. Мы создали свою собственную первую веб-страницу, что-то а-ля первый веб-сайт Google для поиска. Сам поиск осуществлялся веб-сервером Google. Как на счет создания собственного веб-сервера? Вот где язык Python становится по-настоящему интересным. Пришло время создавать динамические веб-страницы на языке Python. Как на счет корзины в интернет-магазине, где Вы можете добавить определенное количество товаров и увидеть их в корзине. Мы также познакомимся с MVC.
Мы будем использовать фрэймворки, так называемые шаблоны, которые, как правило находятся в свободном доступе и содержат определенный функционал. Вот, что по-настоящему завораживает. К слову, стоит сказать, что динамические веб-страницы можно создавать и при помощи языка C, но это как раз тот случай, когда программирование становится рутинным и скучным. Именно для того, чтобы не придумывать велосипед каждый раз и существуют фреймворки, предоставляющие функционал, написанный каким-то первопроходцем, столкнувшимся с той или иной проблемой.
Неделя 9 посвящается знакомству с языком структурированных запросов SQL. На Неделе 9 мы рассмотрим простой и удобный способ хранения, получения, обновления, удаления данных, используя язык SQL. Мы создадим нашу первую таблицу в базе данных в программе SQLite и продолжим изучать язык Python, который рассмотрели на предыдущей неделе.
00:00:00 - Обзор Недели 8
00:05:40 - froshims0
00:09:31 - froshims1
00:12:20 - SQL
00:19:13 - phpLiteAdmin
00:27:07 - Язык SQL и его команды
00:38:38 - Типы данных в SQL
00:43:27 - Объединение таблиц
01:03:12 - sqlite
01:06:51 - froshims2
01:32:03 - Объектно-реляционное отображение
01:39:14 - Внедрение SQL-кода
Словарь Недели 9
Create - создать
Insert - вставить
Select - выбрать
Update - обновить
Delete - удалить
Name - имя
Dorm - общежитие
Primary key - первичный ключ
Autoincrement - автоматическое увеличение
Default - по умолчанию
Value - значение
Browse - обзор
Structure - структура
From - из
Join - соединить
Where - где
Users - пользователи
Zipcode - почтовый код
State - штат
Country - страна
City - город
Register - регистрация
Регистрация пользователей
В сети Интернет содержится бесчисленное множество сайтов, которые предоставляют возможность регистрации пользователей. Среди таких сайтов в основном блоги, интернет-магазины, корпоративные сайты, форумы и т.д. Это дает возможность не только быстро осуществлять авторизацию реальных посетителей при посещении веб-ресурса, но и хранить всю необходимую информацию о клиентах, заказчиках, участниках и т.д. На прошлой неделе мы реализовали веб-форму для регистрации участников на занятия спортом и записывали данные о зарегистрированных участниках в CSV-файлы. Напомню, что это одни из простейших файлов, в которых данные разделены запятыми.
Вместе с этим у владельца или разработчика сайта возникает вопрос удобного хранения и быстрого доступа к данным о зарегистрированных пользователях. Ведь каждый раз, когда кто-то пытается авторизоваться, Вам следует проверять зарегистрирован этот пользователь или нет? Более того, Вам может понядобиться посмотреть, например, список всех зарегистрированных пользователей и отфильтровать список по дате регистрации. Это крайне неудобно делать, используя CSV-файлы.
Поэтому сегодня мы рассмотрим язык SQL - язык структурированных запросов, который является удобным инструментом для управления данными.
Язык SQL и таблицы Excel
Существует множество программ, которые предоставляют возможность хранить данные в табличном виде. Наверное, многие сталкивались с ними, это Microsoft Excel, Google Spreadsheet, Apple Numbers и другие. Мы обычно используем первую строку для названия столбцов таблицы:
В этом примере у нас есть структурированные данные с ключами или метаданные, которые описывают каждый столбец (названия столбцов). Мы можем думать об этих данных, как о списке строк. Но есть более удобные программы для хранения данных, которые легко интегрировать с другими программами.
Язык SQL используется для реляционных баз данных или баз данных, чьи данные связаны друг с другом в разных таблицах. Существует много различных программ, которые поддерживают язык SQL, например, MySQL, PostgreSQL. Обычно эти программы работают, как серверы - слушают запросы и отвечают на них. Но мы будет рассматривать язык SQL, используя программу SQLite, которая является довольно простой и не требует установки сервера.
Мы можем вставлять, обновлять, удалять данные, используя очень удобный интерфейс. Или же мы можем вручную прописывать необходимые запросы к базе данных для осуществления необходимых операций:
CREATE TABLE 'registrants' ('id' INTEGER PRIMARY KEY, 'name' TEXT, 'dorm' TEXT)
INSERT INTO 'registrants' (name, dorm) VALUES('David', 'Matthews')
SELECT * FROM 'registrants'
Создаем таблицу под названием registrants, в которой 3 поля: поле «id», поле «name», поле «dorm».
Вставляем в таблицу registrants в поле «name» David, в поле «dorm» - Matthews.
Выбираем все элементы таблицы registrants.
Используя вышеприведенные команды мы можем управлять данными в нашей базе не только используя веб-интерфейс или прописывая команды вручную, но и с помощью языка Python.
Избыточность и внедрение SQL-кода
Часто случается, что опеределенную информацию можно обобщить. Например, представим ситуацию, когда несколько сотен или тысяч человек регистрируется на Вашем сайте. Они указывают свой адрес, который содержит почтовый код и страну.
Такая ситуация приводт к избыточному хранению данных, а точнее к нерациональному использованию памяти. Получается, что Вы храните много одних и тех же данных из-за чего впустую тратите место своего жесткого диска. Это может привести к дополнительным расходам на приобретение памяти. Гораздо целесообразнее разделить эти данные на две таблицы:
И связать первую таблицу со второй, используя идентификатор id.
Не стоит забывать о защите данных, так как язык SQL может быть использован злоумышленниками для получения информации из чужой базы данных или ее удаления. Во фреймворки, как правило, добавляются строки кода, позволяющие предотвратить различного рода атаки. Больше об этом и много другом в видео лекции Недели 9.
Неделя 10 посвящается рассмотрению языка Javascript. На десятой Неделе мы рассмотрим язык Javascript, который позволяет взаимодействовать с пользователем на стороне клиента, в браузере. Язык Javascript дает возможность динамически генерировать содержимое страницы без ее перезагрузки, а также изменять структуру элементов DOM. В начале Недели 10 мы вспомним язык SQL, язык разметки HTML и CSS.
00:00:00 - Обзор Недели 10
00:01:27 - язык JavaScript
00:02:52 - Frosh IMs
00:03:51 - Синтаксис JavaScript
00:09:23 - Компоненты JavaScript
00:16:37 - dom0.html
00:25:25 - dom1.html
00:29:11 - dom2.html
00:35:51 - form0.html
00:38:13 - form1.html
00:44:12 - form2.html
00:47:49 - form3.html
00:52:35 - blink.html
00:58:07 - storage.html
01:01:02 - geolocation.html
01:03:25 - Ajax
01:05:08 - ajax0.html
01:12:12 - ajax1.html
01:17:10 - ajax2.html
01:25:16 - map.html
01:34:50 - Bootstrap
01:36:35 - Изображения и язык JavaScript
01:40:27 - Итоги
Словарь Недели 10
Drag -перетаскивание
Click -нажатие кнопки мыши
Get quote -получить котировку
Agree - согласие
GUI - графический интерфейс пользователя
Dorm - общежитие
Callback -обратный вызов
Demo -демо
Finance -финансы
Submit - отправить
Get - получить
Element -элемент
Summer - лето
Ready -готовый
Event - событие
Alert - предупреждение
Prevent -препятствовать
UX (User experience) - пользовательский опыт
Confirmation - подтверждение
Agreement - соглашение
Register -регистрировать
Required -обязательный
Error - ошибка
Blink - мигание
Visible - видимый
Hidden - скрытый
Visibility - видимость
Unvisible - невидимый
Local storage - локальное хранилище
Geolocation - геолокация
Allow - разрешение
JSON (JavaScript Object Notation) - текстовый формат обмена данными
Price - цена
Symbol - символ
HTML, CSS и язык Javascript
На Неделе 6 мы познакомились с простейшими веб-страницами, которые выглядели следующим образом:
Привет, мир!
Привет, мир!
Такого рода страницы являются статическими, то есть «жестко» закодированными. Они написаны на языке HTML, который понимают все браузеры, благодаря чему воспроизводят веб-страницу на экране пользователя. Кроме того, мы видели, что HTML элементы выстраиваются браузером в определенной последовательности, которая похожа на дерево tree из языка C, но называется DOM (Document Object Model). У каждой веб-страницы существует DOM, который выглядит следующим образом:
Давайте поговорим о том, каким образом мы можем генерировать DOM динамически, чтобы у нас была возможность взаимодействовать с пользователем. Мы уже частично рассматривали этот вопрос при знакомстве с языком Python, который позволял динамически генерировать веб-страницу. После этого, сгенерированная веб-страница загружалась в браузер к пользователю и мы видели обновленную информацию. Однако проблема заключается в том, что нам приходилось каждый раз обращаться к серверу затем, чтобы загрузить оттуда сгенерированную информацию. Оказывается, что этого можно избежать, используя язык Javascript, который может не обращаясь к серверу, генерировать DOM в браузере пользователя. Язык Javascript использует Ajax (Asynchronous Javascript and XML), что не требует перезагрузки страницы. Соответственно уменьшает нагрузку на сервер, уменьшает трафик и ускоряет реакцию интерфейса на действия пользователя.
События в языке Javascript
Язык Javascript является событийно-ориентированным, а именно использующим события DOM. Самые популярные из них представлены в таблице:
Тип события
Название события
Описание
События мыши
onclick
Событие, возникающее, когда пользователь нажимает на элемент
События мыши
oncontextmenu
Событие, возникающее, когда пользователь нажимает правой кнопкой на элемент, чтобы открыть контекстное меню
События мыши
ondblclick
Событие, возникающее, когда пользователь нажимает на элемент дважды
События клавиатуры
onkeydown
Событие, возникающее, когда пользователь осуществляет ввод с клавиатуры
События объектов
onload
Событие, возникающее, когда объект был загружен
События объектов
onresize
Событие, возникающее, когда окно браузера изменило размер
События объектов
onscroll
Событие, возникающее, когда произошла прокрутка полосы прокрутки элемента
События форм
onsubmit
Событие, возникающее, когда произошла отправка формы
События перемещения
ondrag
Событие, возникающее, когда произошла произошло перемещение элемента
События перемещения
ondrop
Событие, возникающее, когда перемещаемый элемент был отпущен над заданной областью
События буфера обмена
oncopy
Событие, возникающее, когда пользователь копирует контент элемента
Существует гораздо большее количество событий DOM, полный перечень можно увидеть на сайте w3school.
Язык Javascript и библиотека Jquery
Для написания кода, используя язык Javascript, необходимо заключить его в специальные теги . Например, вот так:
Пример 1
Помните, в языке Python мы рассматривали фреймворк Flask? В языке Javascript существует нечто похожее, а именно - мегапопyлярная библиотека Jquery. Эта библиотека используется практических на всех сайтах и позволяет значительно ускорить работу и написание кода, используя язык Javascript.
Подключается библиотека Jquery, в тех же тегах . Существует огромное количество мест, откуда ее можно загрузить или подключить, одним из таких мест является сайт Jquery
Кстати, стоит отметить, .min означает, что библиотека в сжатом состоянии, то есть занимает меньше места. Соответственно Вам нужно меньше данных загружать с сервера, что позволит быстрее загрузить сайт. Стоит также сказать, что, как правило, скрипты располагаются в конце страницы, перед закрывающим тегом и выносятся в отдельный файл, который находится в сжатом состоянии. Это позволяет настроить загрузку структуры документа и стилей, а затем загрузить скрипты. Это положительно сказывается на SEO оптимизации сайта.
Неделя 11 является последней лекцией курса по основам программирования CS50 2016 года. На последней неделе курса мы подведем итоги, сыграем в несколько игр и увидим какую роль играет виртуальная реальность в развлечениях и исследованиях. Кроме того, подведем итоги курса и вспомним все, начиная с Недели 0 и языка Scratch.
00:00:00 - Итоги курса
00:02:12 - Персонал CS50 2016
00:05:00 - Rosebud
00:06:26 - Виртуальная реальность CS50
00:11:17 - Игра Tilt Brush
00:13:35 - Игра Fruit Ninja в ВР
00:16:32 - Путешествие в Египет
00:31:29 - Игра Иви
00:35:34 - Студенческие достижения
00:37:16 - Заключительные мероприятия
00:39:08 - Это был CS50.
Часть 1 - Часть 2
Смотрите также:
Весь гарвардский курс по основам программирования (CS50 2015 год)
Сайты для обучения программированию
11 ресурсов для бесплатного образования
15 образовательных YouTube каналов на русском языке
Лекции и уроки
Нейросеть сделала компьютерную игру
Игра «Маг кода» для изучения Python, JavaScript, анализа данных, машинного обучения и нейронных сетей
Click to viewНа Неделе 6 мы оставим позади язык C и рассмотрим веб-программирование, а точнее - протоколы передачи данных и язык HTML. Вы узнаете что такое Интернет. Мы также вспомним, структруры данных, которые мы изучили на Неделе 5.
00:00:00 - Обзор Недели 5
00:05:18 - Веб-программирование
00:06:30 - Воины Сети
00:07:25 - Домашняя сеть
00:09:50 - DHCP и IP
00:12:56 - IP адреса
00:14:38 - DNS
00:16:29 - Роутеры
00:18:25 - nslookup
00:20:47 - Отслеживание маршрута
00:27:05 - Подводные кабели
00:29:10 - Пакеты
00:30:24 - TCP
00:34:01 - Порты
00:37:20 - Брандмауэр - Firewall
00:40:37 - VPN
00:43:46 - Воины сети (что такое Интернет?)
00:56:56 - HTTP
00:58:38 - GET
01:00:35 - Коды статусов
01:01:51 - Telnet
01:04:36 - Curl
01:08:17 - Запросы
01:11:49 - HTML
01:18:21 - hello.html
01:20:42 - image.html
01:22:48 - link.html
01:26:07 - paragraphs.html
01:27:37 - headings.html
01:28:22 - list.html
01:29:12 - table.html
01:30:21 - css0.html
01:32:36 - css1.html
01:34:45 - css2.html
01:37:57 - POST
01:39:39 - search.html
Словарь Недели 6
На этой Неделе словарь терминов представлен в основном аббревиатурами, которые используются для пояснения того, что такое Интернет и, как в браузерах создаются веб-страницы. Словарь содержит следующие термины и определения:
HTML (HyperText Markup Language) - язык гипертекстовой разметки
CSS (Cascading Style Sheets) - каскадные таблицы стилей
Firewall - брандмауэр, межсетевой экран
Router - роутер, маршрутизатор
VPN (Virtual Private Network) - виртуальная частная сеть
HTTP (HyperText Transfer Protocol) - протокол передачи гипертекста
LAN (Local Area Network) - локальная вычислительная сеть
IP address - адрес Интернет-протокола
Что такое Интернет и как он устроен изнутри
Адреса используются людьми довольно давно и являются очень удобным инструментом при поиске того или иного строения. Сложно представить себе карту района или города, в которой было бы отмечено большое дерево или гора, или указана любая другая точка отсчета. И было бы указано количество шагов в каждом из направлений, которые необходимо преодолеть, чтобы добраться в нужное место. Это больше напоминает карту сокровищ из мультфильма, фильма или сказки.
Поэтому люди пришли к соглашению использовать адреса. Точно так же существуют адреса и у компьютеров, которые называются IP адресами. IP адреса присваиваются компьютерам при подключении к сети, другими словами это уникальный адрес вашего компьютера в сети. Сеть может быть локальной, которая покрывает относительно небольшую группу компьютеров и других устройств, например, принтеров. IP адрес версии 4, так называемый IPv4 представляет собой 32-битное число, записанное в виде четырех десятичных чисел от 0 до 255, разделенных точкой. Например, 198.23.199.12.
Это похоже на то, как мы в реальном мире отправляем письма в конвертах с указанием адреса КОМУ и адреса ОТ кого. В мире Интернета отправка информации между компьютерами осуществляется по такой же самой аналогии, только вместо слов Нью-Йорк, Уолл-Стритт 45 указывается IP адрес компьютера отправителя и компьютера получателя. Но это еще не все. При отправке информации между IP адресами компьютеров находятся роутеры или маршрутизаторы. Это устройства, предназначенные для того, чтобы направлять информацию друг другу до тех пор, пока она не достигнет точки назначения. Маршрутизатор смотрит на IP адрес получателя, указанный на «конверте» и отправляет информацию соответствующему роутеру. Так происходит до тех пор, пока конечный адресат не получит свой пакет информации.
Порты
Возникает логичный вопрос: «Откуда компьютер знает, какой тип данных содержится в том или ином пакете информации?» Все очень просто. Каждый тип информации передается по соответствующему порту. Давайте посмотрим на самые популярные номера портов:
1. 21 FTP - для передачи файлов в незашифрованном виде
2. 22 SSH - для передачи файлов в зашифрованном виде
3. 25 SMTP - протокол для передачи почтовых сообщений в незашифрованном виде
4. 53 DNS - система доменных имен
5. 80 HTTP - протокол передачи гипертекста
6. 443 HTTPS - протокол передачи гипертекста с использованием SSL-шифрования
С полным перечнем портов Вы можете ознакомиться в Википедии.
Но стоит отметить, что было бы неудобно посещать Facebook, Google или любой другой сайт, если бы нужно было помнить его адрес в виде 32-битного кода. Поэтому люди пришли к соглашению использовать систему доменных имен DNS. Система предназначена для того, чтобы преобразовывать числовой адрес в текстовый, а текстовый - в числовой. Именно благодаря DNS мы вводим в браузере адреса всех сайтов в виде букв.
Язык разметки HTML и каскадные таблицы стилей CSS
Что же происходит после того, как Вы перешли по какому-то адресу в Интернете? Браузер покажет Вам нужную веб-страницу. Язык, на котором написана веб-страница называется HTML. Помните структуры данных с Недели 5, которые выглядят в виде деревьев. Такое же самое дерево элементов выстраивается и при помощи языка разметки HTML, а CSS служит для стилизации элементов дерева элементов. Давайте посмотрим на простейших HTML код, отображающий в окне браузера фразу «Привет, мир», которую мы впервые увидели на Неделе 0.
Привет, мир!
Привет, мир!
Что такое Интернет?
Хорошим тоном считается размещение CSS-стили в отдельном файле и подключать их в файл HTML. Преимуществом такого подхода является не только удобство при создании веб-страницы, а и отсутствие повторной загрузки кода стилей при обновлении страницы или при переходе на другую страницу.
На Неделе 7 мы вплотную начнем рассматривать основы языка Python, узнаем какой алгоритм применяется для распознавания содержания изображений и с головой окунемся в приложения группировки текста по смыслу. На Неделе 7 мы узнаем о том, что такое машинное обучение и вспомним что такое Интернет с предыдущей недели.
00:00:00 - Вступление
00:01:47 - Введение в машинное обучение
00:11:21 - Классификация изображений
00:17:13 - Плоский мир
00:19:35 - Линейный, Плоский, Объемный, и другие миры
00:26:19 - Введение в Python
00:30:55 - Обучение с учителем
00:43:52 - Python для классификации изображений
00:56:01 - Глубокое обучение
01:00:07 - Глубокое обучение в автомобилях
01:03:43 - Кластеризация текста
01:17:07 - Итоги
Словарь Недели 7
Machine Learning - машинное обучение
Image Recognition - распознавание изображений
Natural Language Processing - обработка естественного языка
K-Nearest Neighbors Algorithm - метод k ближайших соседей
Lineland - Лайнландия (линейный одномерный мир)
Flatland - Флатландия (плоский двумерный мир)
Spaceland - Спейсландия (объемный трехмерный мир)
Deep learning - глубинное или глубокое обучение
Semi-supervised learning -0бучение с частичным привлечением учителя
Что такое машинное обучение?
Люди по-разному интерпретируют понятие машинное обучение. Для кого-то это понятие ассоциируется с кучей роботов, как было не раз продемонстрировано в Голливудских фильмах. Для кого-то машинное обучение это не что иное, как комната с кучей серверов или сложные математические функции. На самом деле машинное обучение это подраздел искусственного интеллекта, основанный на алгоритмах, которые могут обучаться. На сегодняшний день существует масса различных приложений, которые используют алгоритмы машинного обучения. Среди них: поисковые системы, приложения распознавания изображений, приложения распознавания голоса, обработка естественного языка. На первый взгляд эти приложения создают впечатления сложных алгоритмических закономерностей. Так и есть, однако в их основе лежат простые принципы, базирующиеся на вычислении расстояния к ближайшей известной точке и являются основой алгоритма классификатора ближайшего соседа.
Для вычисления вышеупомянутых расстояний используется широко известная теорема Пифагора, которую все изучали в школе. Примечательным является тот факт, что теорема Пифагора отлично работает не только в одно-, двух-, трехмерном измерении, но и в значительно больших измерениях. Удивлены? Да-да, вы все правильно поняли. К сожалению в школьной программе, в университете основной упор делается на одно-, двух- и трехмерные измерения. Однако в реальности существуют 32-мерные, 64-мерные и более измерения.
Алгоритмы машинного обучения были известны еще в 80-х годах ХХ столетия, однако ввиду отсутствия достаточной вычислительной мощности так и остались в теории на бумаге. Еще одной проблемой в то время было отсутствие доступа к огромному количеству информации, которую можно использовать в качестве обучающего набора.
Распознавание изображений
Машинное обучение используется в большом количестве различных приложений. На Неделе 7 мы будем акцентировать внимание на распознавании изображений и обработке естественного языка. Первым приложением, которое приходит в голову при упоминании фразы «распознавание изображений» является, конечно же, Facebook. В действительности Facebook использует алгоритм глубинного обучения, который не является столь же тривиальным, как пример на Неделе 7. Однако даже сложный алгоритм распознавания изображений компании Facebook или компании Tesla берет свое начало из алгоритма, состоящего всего из 3 строк. Как Вы уже поняли из названия, эти строки написаны на языке Python, обладающим удивительной читабельностью и простотой. Данный алгоритм использует определенное количество обучающего набора изображений и на основании этих изображений делает вывод о содержании того или иного изображения.
Думаю Вас определенно интересует точность такого алгоритма. Спешу сообщить, что при наличии обучающего набора из 100 изображений, точность распознавания составляет 63%. Однако если воспользоваться обучающим набором, состоящим из 1000 изображений, точность составит, внимание, 97%. В этом случае речь шла о распознавании черно-белых изображений цифр размером 8 на 8 пикселей.
Когда мы рассмотрим пример с цветными изображениями размером 32 на 32 пикселя, то столкнемся с некоторыми сложностями. Проблема заключается в том, что изображение, на котором, например, сфотографирована лошадь может отличаться от другого изображения с лошадью по многим параметрам. Это может быть ракурс съемки, размер, положение, освещенность и так далее. В этом случае алгоритм распознавания изображений сталкивается с настоящими сложностями. И тогда в помощь приходят алгоритмы глубокого обучения, которые использует Facebook и Tesla в своих автопилотах, где точность распознавания составляет 95%.
В этом случае возникает еще один логический вопрос: «А достаточно ли иметь точно при распознавании изображений в 95%?» Ответ на этот вопрос Вы сможете найти на Неделе 7 курса CS50 по основам программирования.
Группировка (кластеризация) текста
А как на счет задачки по группировке текста по его содержанию. Например, у Вас есть тысячи фильмов, содержащих название и описание и стоит задача отсортировать их по жанрам. Комедии к комедиям, мультфильмы к мультфильмам, боевики к боевикам, трейлеры к трейлерам. Интересная задача, не так ли? В этом Вам поможет машинное обучение, тот же самый базовый алгоритм классификатора ближайшего соседа. Реализация такого алгоритма выглядит простой и понятно, конечно же, с использованием языка Python.
Одним из значащих событий для всех причастных к алгоритмам обучения стало мероприятие, произошедшее в марте 2016 года. Это был турнир между компьютером и чемпионом мира по игре Go, которая по количеству комбинаций во много превышает шахматы. Этот турнир закончился со счетом 4:1 в пользу компьютера. Это была демонстрация мощи машинного обучения всему миру.
На Неделе 8 мы выполним полное погружение в язык Python, перенесем все программы с языка C на язык Python. На Неделе 8 мы рассмотрим MVC и узнаем, как создаются динамические веб-сайты с помощью языка Python. Мы создадим свой собственный веб-сервер и вспомним машинное обучение с предыдущей недели.
00:00:00 - Обзор Недели 7
00:02:15 - Переход от C к Python
00:11:40 - Интерпретируемые языки
00:15:26 - Перенос программ на язык Python
00:17:47 - hello.py
00:20:05 - string.py
00:26:20 - int.py
00:27:03 - imprecision.py
00:30:01 - ints.py
00:32:47 - temperature.py
00:34:14 - logical.py
00:38:35 - positive.py
00:48:35 - cough0.py
00:49:35 - cough1.py
00:50:00 - cough2.py
00:51:20 - cough3.py
00:52:30 - cough4.py
00:55:17 - strlen.py
00:57:34 - ascii0.py
00:59:25 - argv0.py
01:01:09 - argv1.py
01:02:33 - argv2.py
01:05:23 - exit.py
01:06:59 - compare1.py
01:10:20 - copy1.py
01:14:20 - noswap
01:15:52 - noswap.py
01:18:06 - swap.py
01:21:24 - structs0.py
01:25:34 - structs1.py
01:29:22 - student.py
01:34:50 - Проверка орфографии
01:35:46 - dictionary.py
01:38:53 - Преимущества языка высокого уровня
01:40:09 - Веб-программирование
01:44:24 - MVC
01:46:14 - serve.py
01:53:51 - Веб Фреймворки
01:54:42 - Flask
02:11:19 - Итоги
Словарь Недели 8
Function - функция
Loop - цикл
Range - диапазон
Variable - переменная
Boolean expression - логическое выражение
Condition - условие
Source code - исходный код
Define - задать
Compiler - компилятор
Bytecode - байт-код
Interpreter - интерпретатор
Tuple - кортеж
Same - одинаковый
Different - разный
Format - формат
Temperature - температура
Something - что-то
Cough - кашель
Achoo - чиханье
MVC (Model-View-Controller) - Модель-Вид-Контроллер
Dorm - общежитие
Cart - корзина
Failure - провал
Success - успех
Student - студент
Read - читать
Write - писать
Response - ответ
Framework - шаблон, каркас
Register - регистрация
Submit - отправить
Title - заголовок
Body - тело
Quantity - количество
Store - магазин
Перенос программ с языка С на язык Python
На Неделе 8 мы начнем углубленно рассматривать язык Python. Мы начнем с легендарной фразы «Привет, мир!» и рассмотрим способы выражения функций, условий, логических выражений, переменных и циклов, используя язык Python. Особенностью языка Python в отличие от C является то, что язык Python является интерпретируемым языком более высокого уровня, нежели C. Это означает, что нам не нужно каждый раз компилировать код, как мы делали в C с помощью clang. Еще одним преимуществом Python является читабельность кода, что дает возможность буквально писать практически целые предложения. Нам больше не нужно использовать амперсанд «&» для обозначения «И» или использовать вертикальные черточки «||» для обозначения «или». Нам достаточно просто написать «and» или «or».
Еще одна проблема, с которой мы столкнулись в C заключалась в делении двух целых чисел integer друг на друга. В языке C при делении 1 на 10 результатом было ближайшее округленное целое число 0. В языке Python эта проблема решена, более того не нужно никаких объявлений типов данных. То есть Python сам понимает типы данных, то ли это строка, то ли число и т.д. Однако даже с переходом на Python осталась одна проблема, касающаяся точности. Если мы разделим 1 на 10 и посмотрим на 55 знаков после запятой, то увидим точно такой же результат, как и в С.
Больше кода на Python
Помните «\n», который в языке С приходилось каждый раз добавлять для перехода на новую строку? В Python уже по умолчанию курсор переходит на следующую строку и только в случае, если Вам нужно остаться на той же строке Вы пишите end=»». Короче говоря, Вам не нужно заботиться о многих низкоуровневых вещах, которые были в С. Это касается не только компиляции кода, это касается также работы с памятью компьютера, которую Python делает за Вас. Помните когда в C у нас не получалось поменять местами 2 значения или сравнить два значения до тех пор, пока мы не начали использовать указатели pointers. В языке Python указатели pointers отсутствуют, однако сравнение чисел происходит не по их адресам в памяти, а по их значениям.
И нам больше не нужно вникать в то, как вещи реализуются под капотом, нам не нужно беспокоиться об возможных утечках памяти. Мы становимся на плечи других людей, которые столкнулись до нас с определенными проблемами и решили их. Стоит помнить, что есть Python версии 2 и версии 3. Особенностью является то, что они несовместимы. Это значит, что код, написанный в версии 2 не будет работать в версии 3 и наоборот.
Таким образом, на Неделе 8 мы рассмотрим все программы, которые мы написали на протяжении всех предыдущих недель. От простейшей программ «Привет, мир!» до кода программы для записи данных в файл .csv.
Язык Python для создания веб-сайтов
На Неделе 6 мы впервые познакомились с веб-страницами, языком HTML и CSS. Мы создали свою собственную первую веб-страницу, что-то а-ля первый веб-сайт Google для поиска. Сам поиск осуществлялся веб-сервером Google. Как на счет создания собственного веб-сервера? Вот где язык Python становится по-настоящему интересным. Пришло время создавать динамические веб-страницы на языке Python. Как на счет корзины в интернет-магазине, где Вы можете добавить определенное количество товаров и увидеть их в корзине. Мы также познакомимся с MVC.
Мы будем использовать фрэймворки, так называемые шаблоны, которые, как правило находятся в свободном доступе и содержат определенный функционал. Вот, что по-настоящему завораживает. К слову, стоит сказать, что динамические веб-страницы можно создавать и при помощи языка C, но это как раз тот случай, когда программирование становится рутинным и скучным. Именно для того, чтобы не придумывать велосипед каждый раз и существуют фреймворки, предоставляющие функционал, написанный каким-то первопроходцем, столкнувшимся с той или иной проблемой.
Неделя 9 посвящается знакомству с языком структурированных запросов SQL. На Неделе 9 мы рассмотрим простой и удобный способ хранения, получения, обновления, удаления данных, используя язык SQL. Мы создадим нашу первую таблицу в базе данных в программе SQLite и продолжим изучать язык Python, который рассмотрели на предыдущей неделе.
00:00:00 - Обзор Недели 8
00:05:40 - froshims0
00:09:31 - froshims1
00:12:20 - SQL
00:19:13 - phpLiteAdmin
00:27:07 - Язык SQL и его команды
00:38:38 - Типы данных в SQL
00:43:27 - Объединение таблиц
01:03:12 - sqlite
01:06:51 - froshims2
01:32:03 - Объектно-реляционное отображение
01:39:14 - Внедрение SQL-кода
Словарь Недели 9
Create - создать
Insert - вставить
Select - выбрать
Update - обновить
Delete - удалить
Name - имя
Dorm - общежитие
Primary key - первичный ключ
Autoincrement - автоматическое увеличение
Default - по умолчанию
Value - значение
Browse - обзор
Structure - структура
From - из
Join - соединить
Where - где
Users - пользователи
Zipcode - почтовый код
State - штат
Country - страна
City - город
Register - регистрация
Регистрация пользователей
В сети Интернет содержится бесчисленное множество сайтов, которые предоставляют возможность регистрации пользователей. Среди таких сайтов в основном блоги, интернет-магазины, корпоративные сайты, форумы и т.д. Это дает возможность не только быстро осуществлять авторизацию реальных посетителей при посещении веб-ресурса, но и хранить всю необходимую информацию о клиентах, заказчиках, участниках и т.д. На прошлой неделе мы реализовали веб-форму для регистрации участников на занятия спортом и записывали данные о зарегистрированных участниках в CSV-файлы. Напомню, что это одни из простейших файлов, в которых данные разделены запятыми.
Вместе с этим у владельца или разработчика сайта возникает вопрос удобного хранения и быстрого доступа к данным о зарегистрированных пользователях. Ведь каждый раз, когда кто-то пытается авторизоваться, Вам следует проверять зарегистрирован этот пользователь или нет? Более того, Вам может понядобиться посмотреть, например, список всех зарегистрированных пользователей и отфильтровать список по дате регистрации. Это крайне неудобно делать, используя CSV-файлы.
Поэтому сегодня мы рассмотрим язык SQL - язык структурированных запросов, который является удобным инструментом для управления данными.
Язык SQL и таблицы Excel
Существует множество программ, которые предоставляют возможность хранить данные в табличном виде. Наверное, многие сталкивались с ними, это Microsoft Excel, Google Spreadsheet, Apple Numbers и другие. Мы обычно используем первую строку для названия столбцов таблицы:
В этом примере у нас есть структурированные данные с ключами или метаданные, которые описывают каждый столбец (названия столбцов). Мы можем думать об этих данных, как о списке строк. Но есть более удобные программы для хранения данных, которые легко интегрировать с другими программами.
Язык SQL используется для реляционных баз данных или баз данных, чьи данные связаны друг с другом в разных таблицах. Существует много различных программ, которые поддерживают язык SQL, например, MySQL, PostgreSQL. Обычно эти программы работают, как серверы - слушают запросы и отвечают на них. Но мы будет рассматривать язык SQL, используя программу SQLite, которая является довольно простой и не требует установки сервера.
Мы можем вставлять, обновлять, удалять данные, используя очень удобный интерфейс. Или же мы можем вручную прописывать необходимые запросы к базе данных для осуществления необходимых операций:
CREATE TABLE 'registrants' ('id' INTEGER PRIMARY KEY, 'name' TEXT, 'dorm' TEXT)
INSERT INTO 'registrants' (name, dorm) VALUES('David', 'Matthews')
SELECT * FROM 'registrants'
Создаем таблицу под названием registrants, в которой 3 поля: поле «id», поле «name», поле «dorm».
Вставляем в таблицу registrants в поле «name» David, в поле «dorm» - Matthews.
Выбираем все элементы таблицы registrants.
Используя вышеприведенные команды мы можем управлять данными в нашей базе не только используя веб-интерфейс или прописывая команды вручную, но и с помощью языка Python.
Избыточность и внедрение SQL-кода
Часто случается, что опеределенную информацию можно обобщить. Например, представим ситуацию, когда несколько сотен или тысяч человек регистрируется на Вашем сайте. Они указывают свой адрес, который содержит почтовый код и страну.
Такая ситуация приводт к избыточному хранению данных, а точнее к нерациональному использованию памяти. Получается, что Вы храните много одних и тех же данных из-за чего впустую тратите место своего жесткого диска. Это может привести к дополнительным расходам на приобретение памяти. Гораздо целесообразнее разделить эти данные на две таблицы:
И связать первую таблицу со второй, используя идентификатор id.
Не стоит забывать о защите данных, так как язык SQL может быть использован злоумышленниками для получения информации из чужой базы данных или ее удаления. Во фреймворки, как правило, добавляются строки кода, позволяющие предотвратить различного рода атаки. Больше об этом и много другом в видео лекции Недели 9.
Неделя 10 посвящается рассмотрению языка Javascript. На десятой Неделе мы рассмотрим язык Javascript, который позволяет взаимодействовать с пользователем на стороне клиента, в браузере. Язык Javascript дает возможность динамически генерировать содержимое страницы без ее перезагрузки, а также изменять структуру элементов DOM. В начале Недели 10 мы вспомним язык SQL, язык разметки HTML и CSS.
00:00:00 - Обзор Недели 10
00:01:27 - язык JavaScript
00:02:52 - Frosh IMs
00:03:51 - Синтаксис JavaScript
00:09:23 - Компоненты JavaScript
00:16:37 - dom0.html
00:25:25 - dom1.html
00:29:11 - dom2.html
00:35:51 - form0.html
00:38:13 - form1.html
00:44:12 - form2.html
00:47:49 - form3.html
00:52:35 - blink.html
00:58:07 - storage.html
01:01:02 - geolocation.html
01:03:25 - Ajax
01:05:08 - ajax0.html
01:12:12 - ajax1.html
01:17:10 - ajax2.html
01:25:16 - map.html
01:34:50 - Bootstrap
01:36:35 - Изображения и язык JavaScript
01:40:27 - Итоги
Словарь Недели 10
Drag -перетаскивание
Click -нажатие кнопки мыши
Get quote -получить котировку
Agree - согласие
GUI - графический интерфейс пользователя
Dorm - общежитие
Callback -обратный вызов
Demo -демо
Finance -финансы
Submit - отправить
Get - получить
Element -элемент
Summer - лето
Ready -готовый
Event - событие
Alert - предупреждение
Prevent -препятствовать
UX (User experience) - пользовательский опыт
Confirmation - подтверждение
Agreement - соглашение
Register -регистрировать
Required -обязательный
Error - ошибка
Blink - мигание
Visible - видимый
Hidden - скрытый
Visibility - видимость
Unvisible - невидимый
Local storage - локальное хранилище
Geolocation - геолокация
Allow - разрешение
JSON (JavaScript Object Notation) - текстовый формат обмена данными
Price - цена
Symbol - символ
HTML, CSS и язык Javascript
На Неделе 6 мы познакомились с простейшими веб-страницами, которые выглядели следующим образом:
Привет, мир!
Привет, мир!
Такого рода страницы являются статическими, то есть «жестко» закодированными. Они написаны на языке HTML, который понимают все браузеры, благодаря чему воспроизводят веб-страницу на экране пользователя. Кроме того, мы видели, что HTML элементы выстраиваются браузером в определенной последовательности, которая похожа на дерево tree из языка C, но называется DOM (Document Object Model). У каждой веб-страницы существует DOM, который выглядит следующим образом:
Давайте поговорим о том, каким образом мы можем генерировать DOM динамически, чтобы у нас была возможность взаимодействовать с пользователем. Мы уже частично рассматривали этот вопрос при знакомстве с языком Python, который позволял динамически генерировать веб-страницу. После этого, сгенерированная веб-страница загружалась в браузер к пользователю и мы видели обновленную информацию. Однако проблема заключается в том, что нам приходилось каждый раз обращаться к серверу затем, чтобы загрузить оттуда сгенерированную информацию. Оказывается, что этого можно избежать, используя язык Javascript, который может не обращаясь к серверу, генерировать DOM в браузере пользователя. Язык Javascript использует Ajax (Asynchronous Javascript and XML), что не требует перезагрузки страницы. Соответственно уменьшает нагрузку на сервер, уменьшает трафик и ускоряет реакцию интерфейса на действия пользователя.
События в языке Javascript
Язык Javascript является событийно-ориентированным, а именно использующим события DOM. Самые популярные из них представлены в таблице:
Тип события
Название события
Описание
События мыши
onclick
Событие, возникающее, когда пользователь нажимает на элемент
События мыши
oncontextmenu
Событие, возникающее, когда пользователь нажимает правой кнопкой на элемент, чтобы открыть контекстное меню
События мыши
ondblclick
Событие, возникающее, когда пользователь нажимает на элемент дважды
События клавиатуры
onkeydown
Событие, возникающее, когда пользователь осуществляет ввод с клавиатуры
События объектов
onload
Событие, возникающее, когда объект был загружен
События объектов
onresize
Событие, возникающее, когда окно браузера изменило размер
События объектов
onscroll
Событие, возникающее, когда произошла прокрутка полосы прокрутки элемента
События форм
onsubmit
Событие, возникающее, когда произошла отправка формы
События перемещения
ondrag
Событие, возникающее, когда произошла произошло перемещение элемента
События перемещения
ondrop
Событие, возникающее, когда перемещаемый элемент был отпущен над заданной областью
События буфера обмена
oncopy
Событие, возникающее, когда пользователь копирует контент элемента
Существует гораздо большее количество событий DOM, полный перечень можно увидеть на сайте w3school.
Язык Javascript и библиотека Jquery
Для написания кода, используя язык Javascript, необходимо заключить его в специальные теги . Например, вот так:
Пример 1
Помните, в языке Python мы рассматривали фреймворк Flask? В языке Javascript существует нечто похожее, а именно - мегапопyлярная библиотека Jquery. Эта библиотека используется практических на всех сайтах и позволяет значительно ускорить работу и написание кода, используя язык Javascript.
Подключается библиотека Jquery, в тех же тегах . Существует огромное количество мест, откуда ее можно загрузить или подключить, одним из таких мест является сайт Jquery
Кстати, стоит отметить, .min означает, что библиотека в сжатом состоянии, то есть занимает меньше места. Соответственно Вам нужно меньше данных загружать с сервера, что позволит быстрее загрузить сайт. Стоит также сказать, что, как правило, скрипты располагаются в конце страницы, перед закрывающим тегом и выносятся в отдельный файл, который находится в сжатом состоянии. Это позволяет настроить загрузку структуры документа и стилей, а затем загрузить скрипты. Это положительно сказывается на SEO оптимизации сайта.
Неделя 11 является последней лекцией курса по основам программирования CS50 2016 года. На последней неделе курса мы подведем итоги, сыграем в несколько игр и увидим какую роль играет виртуальная реальность в развлечениях и исследованиях. Кроме того, подведем итоги курса и вспомним все, начиная с Недели 0 и языка Scratch.
00:00:00 - Итоги курса
00:02:12 - Персонал CS50 2016
00:05:00 - Rosebud
00:06:26 - Виртуальная реальность CS50
00:11:17 - Игра Tilt Brush
00:13:35 - Игра Fruit Ninja в ВР
00:16:32 - Путешествие в Египет
00:31:29 - Игра Иви
00:35:34 - Студенческие достижения
00:37:16 - Заключительные мероприятия
00:39:08 - Это был CS50.
Часть 1 - Часть 2
Смотрите также:
Весь гарвардский курс по основам программирования (CS50 2015 год)
Сайты для обучения программированию
11 ресурсов для бесплатного образования
15 образовательных YouTube каналов на русском языке
Лекции и уроки
Нейросеть сделала компьютерную игру
Игра «Маг кода» для изучения Python, JavaScript, анализа данных, машинного обучения и нейронных сетей