Home

Вступление

Содержание

1. О программировании

Кроме объяснения JavaScript я также хочу объяснить основные принципы программирования, веб-разработки, и поделиться знаниями IT-технологий в целом. Как выясняется, программировать тяжело. Обычно базовые принципы просты и понятны. Но программы, построенные на этих принципах, становятся сложными настолько, что вводят свои собственные правила и уровни сложности. Вы строите свой собственный лабиринт, и можете в нём потеряться.

Возможно, временами лекции и чтение конспектов будут разочаровывать вас. Если вы новичок в программировании, вам нужно будет много чего переварить. Много материала будет скомбинировано таким образом, что вам нужно будет установить новые связи между его частями.

Программа – сложное понятие. Это кусок текста, набранный программистом, это направляющая сила, заставляющая компьютер что-то делать, это данные в памяти компьютера, и при этом она контролирует работу с этой же самой памятью. Аналогии, которые пытаются сравнивать программы со знакомыми нам объектами обычно не справляются с этим. Одна более-менее подходящая – аналогия с машиной. Множество отдельных частей составляют одно целое, и чтобы заставить её работать, нам нужно представлять себе способы, которыми эти части взаимодействуют и что они привносят в работу целой машины.

Компьютер – это машина, которая устроена так, чтобы содержать в себе эти нематериальные машинки. Компьютеры сами по себе могут выполнять только простые действия. Польза их в том, что они могут делать это очень быстро. Программа может очень хитрым образом комбинировать эти действия так, чтобы в результате выполнялись очень сложные действия.

Для некоторых из нас программирование – это увлекательная игра. Программа – это мысленная конструкция. Ничего не стоит её построить, она ничего не весит, и она легко вырастает под нашими пальцами.

Если не быть осторожным, размер и сложность выходят из-под контроля, запутывая даже того, кто её пишет. Это основная проблема программирования: сохранять контроль над программами. Когда программа работает – это прекрасно. Искусство программирования – это умение контролировать сложность. Большая программа находится под контролем, и выполнена просто в своей сложности.

Многие программисты верят, что этой сложностью лучше всего управлять, используя в программах небольшой набор хорошо известных техник. Они описали строгие правила («наилучшие практики») того, какую форму программы должны иметь. И самые ревностные среди них считают тех, кто отклоняется от этих практик, плохими программистами.

По мере обучения вам всегда будут встречаться новые задачи и новые неизведанные территории. Программисты, не изучающие новое, стагнируют, забывают свою радость, их работа наскучивает им.

1.1 Почему язык имеет значение

В начале, при зарождении компьютерных дисциплин, не было языков программирования. Программы выглядели так:

00110001 00000000 00000000
00110001 00000001 00000001
00110011 00000001 00000010
01010001 00001011 00000010
00100010 00000010 00001000
01000011 00000001 00000000
01000001 00000001 00000001
00010000 00000010 00000000
01100010 00000000 00000000

Это программа, складывающая числа от 1 до 10, и выводящая результат (1 + 2 +… + 10 = 55). Она может выполняться на очень простой гипотетической машине. Для программирования первых компьютеров было необходимо устанавливать большие массивы переключателей в нужные позиции, или пробивать дырки в перфокартах и скармливать их компьютеру. Можете представить, какая это была утомительная, подверженная ошибкам процедура. Написание даже простых программ требовало большого ума и дисциплины. Сложные программы были практически немыслимы.

Конечно, ручной ввод этих мистических диаграмм бит (нулей и единиц) давал программисту возможность ощутить себя волшебником. И это чего-то стоило в смысле удовлетворения работой.

Каждая строка указанной программы содержит одну инструкцию. На обычном языке их можно описать так:

1. записать 0 в ячейку памяти 0
2. записать 1 в ячейку памяти 1
3. записать значение ячейки 1 в ячейку 2
4. вычесть 11 из значения ячейки 2
5. если у ячейки 2 значение 0, тогда продолжить с пункта 9.
6. добавить значение ячейки 1 к ячейке 0
7. добавить 1 к ячейке 1
8. продолжить с пункта 3.
9. вывести значение ячейки 0

Этот вариант легче прочесть, чем кучу бит, но он всё равно не очень удобен. Использование имён вместо номеров инструкций и ячеек памяти может улучшить понимание.

Этот вариант легче прочесть, чем кучу бит, но он всё равно не очень удобен. Использование имён вместо номеров инструкций и ячеек памяти может улучшить понимание.

  установить ‘total’ в 0
  установить ‘count’ в 1
[loop]
  установить ‘compare’ в ‘count’
  вычесть 11 из ‘compare’
  если ‘compare’ равно нулю, перейти на [end]
  добавить ‘count’ к ‘total’
  добавить 1 к ‘count’
  перейти на [loop]
[end]
  вывести ‘total’

Вот теперь уже не так сложно понять, как работает программа. Справитесь? Первые две строки назначают двум областям памяти начальные значения. total будет использоваться для подсчёта результата вычисления, а count будет следить за числом, с которым мы работаем в данный момент. Строчки, использующие ‘compare’, наверно, самые странные. Программе нужно понять, не равно ли count 11, чтобы прекратить подсчёт. Так как наша воображаемая машина довольно примитивна, она может только выполнить проверку на равенство переменной нулю, и принять решение о том, надо ли перепрыгнуть на другую строку. Поэтому она использует область памяти под названием ‘compare’, чтобы подсчитать значение count – 11 и принять решение на основании этого значения. Следующие две строки добавляют значение count в счетчик результата и увеличивают count на 1 каждый раз, когда программа решает, что ещё не достигла значения 11.

Вот та же программа на JavaScript:

'use strict';
var total = 0, count = 1;
while (count <= 10) {
  total += count;
  count += 1;
}
console.log(total);
// → 55

Еще несколько улучшений. Главное – нет необходимости вручную обозначать переходы между строками. Конструкция языка while делает это сама. Она продолжает вычислять блок, заключённый в фигурные скобки, пока условие выполняется (count <=10), то есть значение count меньше или равно 10. Уже не нужно создавать временное значение и сравнивать его с нулём. Это было скучно, и сила языков программирования в том, что они помогают избавиться от скучных деталей.

В конце программы по завершению while к результату применяется операция console.log с целью вывода.

И наконец, вот так могла бы выглядеть программа, если б у нас были удобные операции range и sum, которые, соответственно, создавали бы набор номеров в заданном промежутке и подсчитывали сумму набора:

'use strict';
console.log(sum(range(1, 10)));
// → 55

Мораль сей басни – одна и та же программа может быть написана и долго, и коротко, читаемо и нечитаемо. Первая версия программы была совершенно смутной, а последняя – почти настоящий язык – записать сумму диапазона номеров от 1 до 10. В следующих главах мы рассмотрим, как делать такие вещи.

Хороший язык программирования помогает программисту сообщать компьютеру о необходимых операциях на высоком уровне. Позволяет опускать скучные детали, даёт удобные строительные блоки (while и console.log), позволяет создавать свои собственные блоки (sum и range), и делает простым комбинирование блоков.

1.2 Код, и что с ним делать

Код – это текст, из которого состоят программы. В большинстве глав книги есть код. Чтение и написание кода – это неотъемлемая часть обучения программированию. Старайтесь не просто пробегать глазами примеры – читайте их внимательно и разбирайтесь. Сначала это будет происходить медленно и непонятно, но вы быстро овладеете навыками. То же – насчёт упражнений. Не подразумевайте, что вы в них разобрались, пока не напишете работающий вариант.

Я не просвещаю тех, кто не жаждет учиться, и не побуждаю тех, кто не хочет искать ответы самостоятельно. Если я покажу один угол квадрата, и они не приходят ко мне с остальными тремя – мне не нужно давать повторных объяснений.

Конфуций

2. WEB

World Wide Web, всемирная паутина (это не то же самое, что весь интернет в целом) – набор протоколов и форматов, позволяющий нам посещать странички через браузер. Web (рус. «паутина») в названии обозначает, что страницы можно легко связать друг с другом, в результате чего образуется гигантская сеть-паутина, по которой движутся пользователи.

Чтобы добавить в Веб содержимое, вам нужно соединить машину с интернетом и заставить её слушать 80 порт, используя протокол передачи гипертекста, Hypertext Transfer Protocol (HTTP). Он позволяет другим компьютерам запрашивать документы по сети.

Каждый документ имеет имя в виде универсального локатора ресурсов, Universal Resource Locator (URL), который выглядит примерно так:

   http:// javascript.net/12_browser.html
|          |              |               |
  протокол      сервер           путь

Первая часть говорит нам, что URL использует протокол HTTP (в отличие от, скажем, зашифрованного HTTP, который записывается как https://). Затем идёт часть, определяющая, с какого сервера мы запрашиваем документ. Последняя – строка пути, определяющая конкретный документ или ресурс.

У каждой машины, присоединённой к интернету, есть свой адрес IP, который выглядит как 37.187.37.82. Его иногда можно использовать вместо имени сервера в URL. Но цифры сложнее запоминать и печатать, чем имена – поэтому обычно вы регистрируете доменное имя, которое указывает на конкретную машину (или набор машин). Я зарегистрировал javascript.net, указывающий на IP-адрес машины, которую я контролирую, поэтому можно использовать этот адрес для предоставления веб-страниц.

Если вы введёте указанный URL в адресную строку браузера, он попробует запросить и показать документ, находящийся по этому URL. Во-первых, браузеру надо выяснить, куда ссылается домен javascript.net. Затем, используя протокол HTTP, он соединяется с сервером по этому адресу, и спрашивает его ресурс по имени /12_browser.html

3. Инструменты и их установка

3.1 Internet

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

3.2 Браузер

Для тестирования и отладки наших скриптов мы будем использовать браузер. Веб-разработчику желательно иметь возможность протестировать приложение в как можно большем количестве браузеров. Необходимом минимум: Chrome, Firefox, Safari, Opera.

3.3 Хостинг

Хо́стинг — услуга по предоставлению ресурсов для размещения информации на сервере, постоянно находящемся в сети.

3.4 IDE

IDE - Integrated Development Environment (Интегрированная среда разработки).

Термин IDE означает редактор, который расширен большим количеством «наворотов», умеет работать со вспомогательными системами, такими как багтрекер, контроль версий, и много чего ещё.

Как правило, IDE загружает весь проект целиком, поэтому может предоставлять автодополнение по функциям всего проекта, удобную навигацию по его файлам и т.п.

Присмотритесь к следующим вариантам:
- WebStorm/PHPStorm
- Atom
- VSC
- Brackets
- Sublime Text
- Notepad++

В списках выше перечислены редакторы, которые использую я или мои знакомые – хорошие разработчики. Конечно, существуют и другие отличные редакторы, если вам что-то нравится – пользуйтесь.

Выбор редактора, как и любого инструмента, во многом индивидуален и зависит от ваших проектов, привычек, личных предпочтений.

VSC hotkeys

3.5 Консоль (CLI)

CLI - Command Line

Очень важно познакомиться с использованием командной строки. Ниже приведен список основных команд, которые вам понадобятся при создании веб-приложения.

Commands:
cd - traverse directories pwd - print working (current) directory mkdir - creates an empty directory touch - creates new black file rm - deletes a file rm -rf - delete a directory and all of its contents. Be careful this command doesn't send anything to the trash bin. ls - list files in current directory mv - moves or renames a file cp - copies a file open - opens a file with the default program
Shortcuts
ctrl + c - kill current process

3.6 VCS

Система контроля версий (VCS) — это система, регистрирующая изменения в одном или нескольких файлах с тем, чтобы в дальнейшем была возможность вернуться к определённым старым версиям этих файлов.

VCS даёт возможность возвращать отдельные файлы к прежнему виду, возвращать к прежнему состоянию весь проект, просматривать происходящие со временем изменения, определять, кто последним вносил изменения во внезапно переставший работать модуль, кто и когда внёс в код какую-то ошибку, и многое другое.

Мы будем использовать GIT, для контроля наших проектов.

Веб-сервисы для облачного хранения проектов:
- GitHub
- GitLab
- Bitbucket

UI-клиенты для работы с git:
- GitKraken
- SourceTree

3.7 NPM

npm(Node.js Package Manager) — менеджер пакетов, входящий в состав Node.js.

NPM на хабре.

Install

3.8 Web-server

Мы будем использовать пакет XAMPP

3.9 JavaScript sandboxes

CodePen
JSFiddle
JS Bin

3.10 Can I use

Can I use

3.11 ES6 supporting

ES6 supporting

3.12 BrowserStack

BrowserStack

6. Понятия обфускации и Reverse Engineerin

7. 3 кита. HTML, CSS, JavaScript

В разработке фронтенда все начинается с HTML

HTML это язык разметки. С его помощью браузер знает как отобразить веб-страницу. HTML отделяет "контент" (слова, изображения, аудио, видео и т.д.) от "представления" (определения типа контента и правила как должен отображаться контент такого типа). HTML использует предопределённый набор 'элементов. Элементы могут либо иметь вложенную структуру и содержать другие элементы, либо содержать контент. Элементы определяются "тегами" которые всегда окружены угловыми скобками. Большинство тегов идёт парами - открывающий и закрывающий теги, и закрывающий всегда имеет слэш-символ перед именем тега.

Каскадные таблицы стилей (Cascading Style Sheets = CSS) — это язык, который отвечает за визуальное представление документов пользователю.

JavaScript изначально создавался для того, чтобы сделать web-странички «живыми». Программы на этом языке называются скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страничка – тут же выполняются.