Инвестирование как метод успешного заработка

04 Структура кода

Vodya — Tue, 29 Sep 2015 07:25:35 GMT

В этом мини-уроке будет рассмотрена общая структура кода, так же команды и их разделение.

Команды
Для того, чтобы добавить в код ещё одну команду — можно поставить её после точки с запятой. Например, вместо одного вызова alert сделаем два:
alert('Привет'); alert('Форум');
Но для большей информативности и удобства чтения кодом, к примеру другим разработчиком, каждая команда пишется с новой строки.
alert('Привет');
alert('Форум');

Точка с запятой
Точку с запятой во многих случаях можно не ставить, если есть переход на новую строку.
Так тоже будет работать:
alert('Привет')
alert('Форум')
В этом случае JavaScript интерпретирует переход на новую строчку как разделитель команд и автоматически вставляет «виртуальную» точку с запятой между ними.

Однако, важно то, что «во многих случаях» не означает «всегда»!
Например, запустите этот код:
alert(3 +
1
+ 2);
Результатом этой команды будет выведено сообщение 6
То есть, точка с запятой не ставится. Почему? Интуитивно понятно, что здесь дело в «незавершённом выражении», конца которого JavaScript ждёт с первой строки и поэтому не ставит точку с запятой. И здесь это, пожалуй, хорошо и приятно.

Но в некоторых важных ситуациях JavaScript «забывает» вставить точку с запятой там, где она нужна. Таких ситуаций не так много, но ошибки, которые при этом появляются, достаточно сложно обнаруживать и исправлять. Чтобы не быть голословным, вот небольшой пример.
Такой код работает:
[1, 2].forEach(alert)
Он выводит по очереди 1, 2. Почему он работает — сейчас не важно, позже разберёмся.
Важно, что вот такой код уже работать не будет:
alert("Сейчас будет ошибка")
[1, 2].forEach(alert)
Выведется только первый alert, а дальше — ошибка. Потому что перед квадратной скобкой JavaScript точку с запятой не ставит, а как раз здесь она нужна.
Если её поставить, то всё будет в порядке:
alert( "Сейчас будет ошибка" );
[1, 2].forEach(alert)
Поэтому в JavaScript рекомендуется точки с запятой ставить. Сейчас это, фактически, стандарт, которому следуют все большие проекты.

Комментарии
Со временем программа становится большой и сложной. Появляется необходимость добавить комментарии, которые объясняют, что происходит и почему.
Комментарии могут находиться в любом месте программы и никак не влияют на её выполнение. Интерпретатор JavaScript попросту игнорирует их.
Однострочные комментарии начинаются с двойного слэша //. Текст считается комментарием до конца строки:
// Команда ниже говорит "Привет"
alert( 'Привет' );
alert( 'Мир' ); // Второе сообщение выводим отдельно
Многострочные комментарии начинаются слешем-звездочкой "/*" и заканчиваются звездочкой-слэшем "*/", вот так:
/* Пример с двумя сообщениями.
Это - многострочный комментарий.
*/
alert( 'Привет' );
alert( 'Мир' );
Всё содержимое комментария игнорируется. Если поместить код внутрь /* ... */ или после // — он не выполнится.
/* Закомментировали код
alert( 'Привет' );
*/
alert( 'Мир' );

03 Внешние скрипты и порядок исполнения

Vodya — Tue, 04 Aug 2015 10:51:23 GMT

Если JavaScript-кода много — его выносят в отдельный файл, который подключается в HTML:

Здесь /path/to/script.js — это абсолютный путь к файлу, содержащему скрипт (из корня сайта). Браузер сам скачает скрипт и выполнит.
Можно указать и полный URL, например:

Также можно использовать путь относительно текущей страницы. Например, src="lodash.js" обозначает файл из текущей директории.
Для подключения нескольких скриптов, используется несколько тегов:

...

Внимание!
В HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл. Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего кеша. Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.
При указывании атрибут src, то содержимое тега игнорируется. В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.
Вот так не cработает:

Необходимо выбрать: либо SCRIPT идёт с src, либо содержит код. Тег выше следует разбить на два: один — с src, другой — с кодом, вот так:

Асинхронные скрипты: defer/async
Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.
Если браузер видит тег

Кролики посчитаны!

Такое поведение называют «синхронным». Как правило, оно вполне нормально, но есть важное следствие.
Если скрипт — внешний, то пока браузер не выполнит его, он не покажет часть страницы под ним.
В таком документе, пока не загрузится и не выполнится big.js, содержимое body будет скрыто:

Этот текст не будет показан, пока браузер не выполнит big.js.

А действительно ли мы этого хотим? То есть, действительно ли оставшуюся часть страницы нельзя показывать до загрузки скрипта?
Есть ситуации, когда мы не только НЕ хотим такой задержки, но она даже опасна.
Например, при подключении внешнего скрипта, который показывает рекламу или вставляет счётчик посещений, а затем идёт наша страница. Конечно, неправильно, что пока счётчик или реклама не подгрузятся — оставшаяся часть страницы не показывается. Счётчик посещений не должен никак задерживать отображение страницы сайта. Реклама тоже не должна тормозить сайт и нарушать его функционал.
А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго!
Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):

Важная информация не покажется, пока не загрузится скрипт.

...Важная информация!

Что же тогда делать?
Можно поставить все подобные скрипты в конец страницы — это уменьшит проблему, но не избавит от неё полностью, если скриптов несколько. Допустим, в конце страницы 3 скрипта, и первый из них тормозит — получается, другие два его будут ждать — тоже нехорошо.
Кроме того, браузер дойдёт до скриптов, расположенных в конце страницы, они начнут грузиться только тогда, когда вся страница загрузится. А это не всегда правильно. Например, счётчик посещений наиболее точно сработает, если загрузить его пораньше.
Поэтому «расположить скрипты внизу» — не лучший выход.
Кардинально решить эту проблему помогут атрибуты async или defer:

Атрибут async
Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении

А в таком коде (с defer) первым сработает всегда 1.js, а скрипт 2.js, даже если загрузился раньше, будет его ждать.

Поэтому атрибут defer используют в тех случаях, когда второй скрипт 2.js зависит от первого 1.js, к примеру — использует что-то, описанное первым скриптом.
Второе отличие — скрипт с defer сработает, когда весь HTML-документ будет обработан браузером.
Например, если документ достаточно большой…

Много много много разного
Скрипт async.js выполнится, как только загрузится — возможно, до того, как весь документ готов. А defer.js подождёт готовности всего документа.
Это бывает удобно, когда мы в скрипте хотим работать с документом, и должны быть уверены, что он полностью получен.

Внимание!
При одновременном указании async и defer в современных браузерах будет использован только async, в IE9- — только defer (не понимает async).

Атрибуты async/defer — только для внешних скриптов
Атрибуты async/defer работают только в том случае, если назначены на внешние скрипты, т.е. имеющие src. При попытке назначить их на обычные скрипты script, они будут проигнороированы.
Пример с async:

Важная информация теперь не ждёт, пока загрузится скрипт...

...Важная информация!

При запуске вы увидите, что вся страница отобразилась тут же, а alert из внешнего скрипта появится позже, когда загрузится скрипт.

02 Знакомство с тегом
Vodya — Fri, 31 Jul 2015 12:58:05 GMT
Программу написанную на языке Web-программирования JavaScript можно вставить в любом месте HTML при помощи тега script
Пример:

Код

Начало документа...

...Конец документа

    Пример показывает использование следующего фрагмента кода: script ... script

Тег script содержит исполняемый код. Предыдущие стандарты HTML требовали
обязательного указания атрибута type, но сейчас он уже не нужен. Достаточно просто script.
Браузер, когда видит script:

Начинает отображать страницу, показывает часть документа до script.

Встретив тег script, переключается в JavaScript-режим и не показывает, а исполняет его содержимое.

Закончив выполнение, возвращается обратно в HTML-режим и только тогда отображает оставшуюся часть документа.    Попробуйте этот пример в действии, и вы сами всё увидите.

alert(сообщение)
Отображает окно с сообщением и ждёт, пока посетитель не нажмёт «Ок».

Кодировка и тег META
При попытке сделать такой же файл у себя на диске и запустить, вы можете
столкнуться с проблемой — выводятся «кракозяблы», «квадратики» и
«вопросики» вместо русского текста.
Чтобы всё было хорошо, нужно:

Убедиться, что в HEAD есть строка . Если вы будете
открывать файл с диска, то именно он укажет браузеру кодировку.
Убедиться, что редактор сохранил файл именно в кодировке UTF-8, а не, скажем, в windows-1251.

    Указание кодировки — часть обычного HTML, чтобы не было сюрпризов при запуске примеров локально.

Современная разметка для SCRIPT
    В старых скриптах оформление тега SCRIPT было немного сложнее. В устаревших руководствах можно встретить следующие элементы:

Код

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

Вот мы и научились писать первую программу для браузера на языке Web-программирования JavaScript.

01 Введение в JavaScript

Vodya — Thu, 30 Jul 2015 09:53:26 GMT

В первой статье мы узнаем что из себя представляет язык Web-програмиирования javascript, когда он был создан и для каких целей.

Что из себя представляет JavaScript?
JavaScript был создан для того, чтобы web-страничкам вдохнуть «жизнь». Отойти от скучных и не привлекательных на то время сайтов к более интерактивным и комфортно используемым. Программы на языке Web-программирования JavaScript называются скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страничка — тут же выполняются, тем самым уменьшая нагрузку за счет автономности работы скрипта.

Почему был придуман язык Web-программирования JavaScript?
Изначально у сегодняшнего языка Web-прогроммирования JavaScript было название: «LiveScript». Нынешнее ж название языка JavaScript было придумано лишь из-за маркетингового хода. В то время был очень популярен язык Java, и маркетологи решили, что схожее название сделает новый язык более популярным.
Планировалось, что JavaScript будет «младшим братом» Java. Однако, история распорядилась по-своему, JavaScript сильно вырос, и сейчас это совершенно независимый язык, со своей спецификацией, которая называется ECMAScript, и к Java не имеет никакого отношения.

Теперь узнаем что может язык Web-программирования JavaScript:
JavaScript — это «безопасный» язык программирования общего назначения. Не предоставляет низкоуровневых средств работы с памятью, процессором, так как изначально был ориентирован на браузеры, в которых это не требуется.
Остальные возможности — зависят от окружения, в котором запущен JavaScript. В браузере JavaScript умеет делать всё, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером:

Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.
Реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора, нажатия на клавиатуру и т.п.
Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется "AJAX").
Получать и устанавливать cookie, запрашивать данные, выводить сообщения…
…и многое, многое другое!,

Что не умеет делать JavaScript:
Т.к. язык разработан на работу с браузера, то все функции языка ограничены в области одной загруженной страницы. Это сделано для безопасности пользователей, чтобы злоумышленник не мог с помощью JavaScript получить личные данные или как-то навредить компьютеру пользователя.
Этих ограничений нет там, где JavaScript используется вне браузера, например на сервере. Кроме того, современные браузеры предоставляют свои механизмы по установке плагинов и расширений, которые обладают расширенными возможностями, но требуют специальных действий по установке от пользователя.
И так, что же он не умеет:

JavaScript не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. Он не имеет прямого доступа к операционной системе.
Современные браузеры могут работать с файлами, но эта возможность ограничена специально выделенной директорией — «песочницей». Возможности по доступу к устройствам также прорабатываются в современных стандартах и частично доступны в некоторых браузерах.
JavaScript, работающий в одной вкладке, не может общаться с другими вкладками и окнами, за исключением случая, когда он сам открыл это окно или несколько вкладок из одного источника (одинаковый домен, порт, протокол).
Есть способы это обойти, и они раскрыты в учебнике, но они требуют специального кода на оба документа, которые находятся в разных вкладках или окнах. Без него, из соображений безопасности, залезть из одной вкладки в другую при помощи JavaScript нельзя.
Из JavaScript можно легко посылать запросы на сервер, с которого пришла страница. Запрос на другой домен тоже возможен, но менее удобен, т. к. и здесь есть ограничения безопасности.

И к завершению первой статьи о языке Web-программирования JavaScript узнаем о его уникальности.
Три замечательных особенности JavaScript:

Полная интеграция с HTML/CSS;
Простые вещи делаются просто;
Поддерживается всеми распространёнными браузерами и включён по умолчанию.

Этих трёх вещей одновременно нет больше ни в одной браузерной технологии. Поэтому JavaScript и является самым распространённым средством создания браузерных интерфейсов.

На этом первую с ознакомлением языка Web-программирования мы закончим. Спасибо за внимание и до новых встреч.