Вступление
Содержание
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++
В списках выше перечислены редакторы, которые использую я или мои знакомые – хорошие разработчики. Конечно, существуют и другие отличные редакторы, если вам что-то нравится – пользуйтесь.
Выбор редактора, как и любого инструмента, во многом индивидуален и зависит от ваших проектов, привычек, личных предпочтений.
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, для контроля наших проектов.
Веб-сервисы для облачного хранения проектов:
UI-клиенты для работы с git:
3.7 NPM
npm(Node.js Package Manager) — менеджер пакетов, входящий в состав Node.js.
3.8 Web-server
При необходимости мы будем использовать пакет XAMPP или Open Server
3.9 JavaScript sandboxes
3.10 Can I use
3.11 ES6 supporting
3.12 BrowserStack
4. Понятия обфускации и Reverse Engineering
Обфускация - https://beginners.re/RE4B-RU.pdf стр. 536
Reverse Engineering
http://xbb.uz/IT/Chto-takoe-revers-inzhiniring
- Дмитрий Скляров — “Искусство защиты и взлома информации”.
- Eldad Eilam, Reversing: Secrets of Reverse Engineering, (2005)
- Bruce Dang, Alexandre Gazet, Elias Bachaalany, Sebastien Josse, Practical Reverse Engineering: x86, x64, ARM, Windows Kernel, Reversing Tools, and Obfuscation , (2014)
- MichaelSikorski,AndrewHonig, PracticalMalwareAnalysis:TheHands-OnGuidetoDissectingMalicious Software, (2012)
- Chris Eagle, IDA Pro Book, (2011)