JS-гайд основные концепции JavaScript с примерами кода


Оглавление (нажмите, чтобы открыть):

JavaScript — Урок 1. Основные понятия

Язык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems и анансирован в 1995 году. JavaScript предназначен для создания интерактивных html-документов. Основные области использования JavaScript:

  • Создание динамических страниц, т.е. страниц, содержимое которых может меняться после загрузки.
  • Проверка правильности заполнения пользовательских форм.
  • Решение «локальных» задач с помощью сценариев.
  • JavaScript-код — основа большинства Ajax-приложений.

JavaScript позволяет создавать приложения, выполняемые на стороне клиента, т.е. эти приложения выполняются браузером на компьютере пользователя.

Программы (сценарии) на этом языке обрабатываются встроенным в браузер интерпретатором. К сожалению, не все сценарии выполняются корректно во всех браузерах, поэтому тестируйте свои javascript-программы в различных браузерах.

Язык JavaScript регистрозависимый, т.е. заглавные и прописные буквы алфавита считаются разными символами.

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

Литералы — это простейшие данные с которыми может работать программа.

  • Литералы целого типа — целые числа в представлении:
    • десятичном, например: 15, +5, -174.
    • шестнадцатеричном, например: 0х25, 0хff. Шестнадцатеричные числа включают цифры 0 — 9 и буквы a, b, c, d, e, f. Записываются они с символами 0х перед числом.
    • восьмеричном, например: 011, 0543. Восьмеричные числа включают только цифры 0 — 7.

  • Вещественные литералы — дробные цисла. Целая часть отделяется от дробной точкой, например: 99.15, -32.45. Возможна экспоненциальная форма записи, например: 2.73e -7 . В привычном виде это 2.73Х10 -7 , но в javascript знак умножения и 10 заменяются символом -e-.
  • Логические значения — из два: истина (true) и ложь (false).
  • Строковые литералы — последовательность символов, заключенная в одинарные или двойные кавычки. Например: «ваше имя», ‘ваше имя’.

Переменные

Переменные используются для хранения данных. Переменные определяются с помощью оператора var, после которого следует имя переменной. Имя переменной должно начинаться с буквы латинского алфавита или с символа подчеркивания. Само имя может включать буквы латинского алфавита, цифры и знак подчеркивания.

Например:
var test
var _test
var _my_test1

Каждой переменной можно присвоить значение либо при ее инициализации (объявлении), либо в коде самой программы. Оператор присваивания обозначается знаком равно ( =), но знак равенства здесь не имеет своего прямого значения. В данном случае он лишь указывает на то, что данной переменной присвоили значение.

Например:
var a=15
var b=23.15
var c=’выполнено’
var s=true

Каждая переменная имеет тип, определяемый значением переменной. Так в нашем примере: переменные a и b имеют тип number, переменная c имеет тип string, а переменная s — логический тип.

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

В выражении a*b, a и b называются операндами, а * — знак операции. В javascript определены следующие операции:

операция название
+ сложение
вычитание
* умножение
/ деление
% остаток от деления целых чисел
++ увеличение значения операнда на единицу
уменьшение значения операнда на единицу

Операторы в выражении вычисляются слева направо в соответствии с приоритетами арифметических операций. Изменить порядок вычисления можно с помощью скобок.

Для каждого из арифметических операторов есть форма, в которой одновременно с заданной операцией выполняется присваивание:

оператор эквивалентный оператор присваивания
X+=Y X=X+Y
X-=Y X=X-Y
X*=Y X=X*Y
X/=Y X=X/Y
X%=Y X=X%Y

В данном случае сначала вычисляется правый операнд, а затем полученное значение присваивается левому операнду.

Для того, чтобы можно было сравнивать два значения в javascript определены операции сравнения, результатом которых может быть только логическое значение: true или false:

операция название
= больше или равно
> больше

В javascript определены логические операции:

&& — логическое И (AND),

|| — логическое ИЛИ (OR),

! — логическое НЕ (NOT).

Результаты воздействия логических операторов на различные комбинации значений операндов показаны в таблице:

A B A&&B A||B !A
true true true true false
true false false true false
false true false true true
false false false false true

Проще говоря, значение выражения A&&B истинно, если истинны оба оператора, и ложно в противном случае. Значение выражения A||B истинно, если значение хотя бы одного операнда истинно, и ложно в противном случае. Если значение операнда А истинно, то !A — ложно и наоборот.

Для строковых литералов определена операция конкатенация строк, т.е. их объединение. Обозначается эта операция знаком плюс (+). Результатом выполнения операции является также строка. Пример:

var st1=»Привет»;
var st2=»Вася»;
var st3=st1+st2;

В результате в переменной st3 будет значение «Привет Вася».

В конце приведем таблицу приоритетов операций в порядке их убывания. Приоритет операций определяет порядок, в котором выполняются операции в выражении.

название обозначение
инкремент ++
декремент
отрицание !
унарный минус
умножение *
деление, остаток от деления /,%
сложение +
вычитание
сравнение , =
равенство ==
не равенство !=
логическое И &&
логическое ИЛИ ||
присваивание =, +=, -=, *=, /=, %=, !=

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

Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.

Лекции по веб-программированию

Современный JavaScript – это «безопасный» язык программирования общего назначения. Обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

Язык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems и анонсирован в 1995 году.

Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.

В браузере JavaScript умеет делать всё, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером:

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

Язык JavaScript регистрозависимый, т.е. заглавные и прописные буквы алфавита считаются разными символами.

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

Типы данных

1. Единый тип «число» (number) используется как для целых, так и для вещественных чисел.
Целые числа в представлении:
— десятичном: 15, +5, -174.
— шестнадцатеричном: 0х25, 0хff. Шестнадцатеричные числа включают цифры 0-9 и буквы a, b, c, d, e, f. (Записываются они с символами 0х перед числом.)
— восьмеричном: 011, 0543. Восьмеричные числа включают только цифры 0-7. (Записываются они с символа 0 перед числом.)

Вещественные числа.
Целая часть отделяется от дробной точкой, например: 99.15, -32.45. Возможна экспоненциальная форма записи, например: 2.73E-7. В привычном виде это 2.73*10 -7 .

2. Строка «string»

В JavaScript одинарные и двойные кавычки равноправны. Можно использовать или те или другие. Тип символ не существует, есть только строка.

3. Булевый (логический) тип «boolean»

У него всего два значения: true (истина) и false (ложь).

4. Специальное значение «null»

Значение null не относится ни к одному из типов выше, а образует свой отдельный тип, состоящий из единственного значения null:

В JavaScript null не является «ссылкой на несуществующий объект» или «нулевым указателем», как в некоторых других языках. Это просто специальное значение, которое имеет смысл «ничего» или «значение неизвестно».

5. Специальное значение «undefined»

Значение undefined, как и null, образует свой собственный тип, состоящий из одного этого значения. Оно имеет смысл «значение не присвоено».

Если переменная объявлена, но в неё ничего не записано, то её значение как раз и есть undefined:

6. Объекты «object»

Первые 5 типов называют «примитивными».

Особняком стоит шестой тип: «объекты».

Он используется для коллекций данных и для объявления более сложных сущностей.

Объявляются объекты при помощи фигурных скобок <. >, например:

Таким образом в javascript определено 5 «примитивных» типов: number, string, boolean, null, undefined и 6-й тип – объекты object.

Переменные

Переменные используются для хранения данных. Переменные определяются с помощью оператора var , после которого следует имя переменной. Имя переменной должно начинаться с буквы латинского алфавита или с символа подчеркивания. Само имя может включать буквы латинского алфавита, цифры и знак подчеркивания.

Каждая переменная имеет тип, определяемый значением переменной.

Выражения

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

В выражении a*b, a и b называются операндами, а * — знак операции. В javascript определены следующие операции:

операция название
+ сложение
вычитание
* умножение
/ деление
% остаток от деления целых чисел
++ увеличение значения операнда на единицу
уменьшение значения операнда на единицу

Операторы в выражении вычисляются слева направо в соответствии с приоритетами арифметических операций. Изменить порядок вычисления можно с помощью скобок.

Для каждого из арифметических операторов есть форма, в которой одновременно с заданной операцией выполняется присваивание:

оператор эквивалентный оператор присваивания
X+=Y X=X+Y
X-=Y X=X-Y
X*=Y X=X*Y
X/=Y X=X/Y
X%=Y X=X%Y

В данном случае сначала вычисляется правый операнд, а затем полученное значение присваивается левому операнду.

Для того, чтобы можно было сравнивать два значения в javascript определены операции сравнения, результатом которых может быть только логическое значение: true или false:

операция название
= больше или равно
> больше

В javascript определены логические операции:
&& — логическое И (AND),
|| — логическое ИЛИ (OR),
! — логическое НЕ (NOT).

Для строковых переменных определена операция конкатенация строк, т.е. их объединение. Обозначается эта операция знаком плюс (+). Результатом выполнения операции является также строка. Пример:

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

название обозначение
инкремент ++
декремент
отрицание !
унарный минус
умножение *
деление, остаток от деления /,%
сложение +
вычитание
сравнение , =
равенство ==
не равенство !=
логическое И &&
логическое ИЛИ ||
присваивание =, +=, -=, *=, /=, %=, !=

Встраивание в веб-страницы

Расположение внутри страницы

Для добавления JavaScript-кода на страницу, можно использовать теги script > / script > , которые рекомендуется, но не обязательно, помещать внутри контейнера head > . Контейнеров script > в одном документе может быть сколько угодно. Атрибут «type=’text/javascript’» указывать необязательно, данное значение используется по умолчанию.

Скрипт, выводящий модальное окно с классической надписью «Hello, World!» внутри браузера:

Расположение внутри тега

Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий. Пример использования:

В приведённом примере при нажатии на ссылку функция confirm(‘Вы уверены?’); вызывает модальное окно с надписью «Вы уверены?», а return false; блокирует переход по ссылке. Разумеется, этот код будет работать только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдёт без предупреждения.

Вынесение в отдельный файл

Есть и третья возможность подключения JavaScript — написать скрипт в отдельном файле, а потом подключить его с помощью конструкции

Обработка событий

При интерпретации html-страницы браузер создает объекты javascript. Они хранятся в виде иерархической структуры, отражая структуру документа, например:

На самом верхнем уровне находится объект window, представляющий окно браузера и являющийся «родителем» всех остальных объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document (текущая страница) может иметь дочерний объект form (форма) и т.д.

Все объекты имеют методы (отделяются от объекта точкой), например:
document.write позволяет писать текст в текущую страницу,
window.open открывает новое окно браузера.

Сценарий, написанный на javascript, может выполняться на определенное событие. Для этого в тегах элементов страницы введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Например:

Здесь Click — событие (щелчок по div-у), onClick — обработчик события,
addText() — имя функции, которая сработает при возникновении этого события (щелчка по div-у).

Перечислим события, которые поддерживаются javascript.

�� JS-гайд: основные концепции JavaScript с примерами кода. #[email protected]

Гайд по принципу Парето: 20% языка, которые нужны вам в 80% случаев. Только основные концепции JavaScript с примерами кода.

JS-гайд: основные концепции JavaScript с примерами кода

Гайд по принципу Парето: 20% языка, которые нужны вам в 80% случаев. Только основные концепции JavaScript с примерами кода.

Комментарии (4)

Влад Саитов

>const >иммутабельность Ага Время читать доку)

Хасан Афхаров

Евгений Алаев

Влад, досадно если такие вещи будут читать только-только вникающие в язык люди

Евгений Алаев

Товарищи из Proglib, неплохо было бы поправить статью в этом месте☝

О проекте

Данный сайт является агрегатором контента из популярных социальных сетей. Добавление новых материалов производится в автоматическом режиме. Администрация проекта не несет ответственности за их содержание.

Гайд по стилю кода на JavaScript от AirBnB

Перевод AirBnB Style Guide — Airbnb JavaScript Style Guide (en) на русский язык от команды Uprock. За что им огромное спасибо! Подробнее о переводе на хабре.

Стиль вашего кода, может сказать о вас достаточно много. Это один из показателей опытного разработчика. Помимо исключительно визуальной составляющей, в переводе содержатся бенчмарки и рекомендации по производительности. А в некоторых случаях, использование такого кодстайла, может избавить вас он проблем связанных с тонкостями языка. Статья является отличным дополнением к вопросам для собеседования кандидату на должность Front-end разработчика и к вашему скилу как разработчика ��

Оглавление

Простые типы: Когда вы взаимодействуете с простым типом, вы взаимодействуете непосредственно с его значением в памяти.

Сложные типы: Когда вы взаимодействуете со сложным типом, вы взаимодействуете с ссылкой на его значение в памяти.

Объекты

Для создания объекта используйте фигурные скобки. Не создавайте объекты через конструктор new Object .

Не используйте зарезервированные слова в качестве ключей объектов. Они не будут работать в IE8. Подробнее

Не используйте ключевые слова (в том числе измененные). Вместо них используйте синонимы.

Массивы

Для создания массива используйте квадратные скобки. Не создавайте массивы через конструктор new Array .

Если вы не знаете длину массива, используйте Array::push.

Если вам необходимо скопировать массив, используйте Array::slice. jsPerf

Чтобы скопировать похожий по свойствам на массив объект (например, NodeList или Arguments), используйте Array::slice.

Строки

Используйте одинарные кавычки » для строк.

Строки длиннее 80 символов нужно разделять, выполняя перенос через конкатенацию строк.

Осторожно: строки с большим количеством конкатенаций могут отрицательно влиять на быстродействие. jsPerf и Обсуждение

Когда строка создается программным путем, используйте Array::join вместо объединения строк. В основном для IE: jsPerf.

Функции

Примечание ECMA-262 устанавливает понятие блока как списка операторов. Объявление функции (не путайте с присвоением функции переменной) не является оператором. Комментарий по этому вопросу в ECMA-262.

Никогда не используйте аргумент функции arguments , он будет более приоритетным над объектом arguments , который доступен без объявления для каждой функции.

Свойства

Используйте точечную нотацию для доступа к свойствам и методам.

Используйте нотацию с [] , когда вы получаете свойство, имя для которого хранится в переменной.

Переменные

Всегда используйте var для объявления переменных. В противном случае переменная будет объявлена глобальной. Загрязнение глобального пространства имен — всегда плохо.

Используйте одно var объявление переменных для всех переменных, и объявляйте каждую переменную на новой строке.

Объявляйте переменные, которым не присваивается значение, в конце. Это удобно, когда вам необходимо задать значение одной из этих переменных на базе уже присвоенных значений.

Присваивайте переменные в начале области видимости. Это помогает избегать проблем с объявлением переменных и областями видимости.

Области видимости

Объявление переменных ограничивается областью видимости, а присвоение — нет.

Объявление анонимной функции поднимает наверх области видимости саму переменную, но не ее значение.

Именованные функции поднимают наверх области видимости переменную, не ее значение. Имя функции при этом недоступно в области видимости переменной и доступно только изнутри.

Объявления функции поднимают на верх текущей области видимости и имя, и свое значение.

Более подробно можно прочитать в статье JavaScript Scoping & Hoisting от Ben Cherry

Условные выражения и равенства

    Используйте === и !== вместо == и != .

Условные выражения вычисляются посредством приведения к логическому типу Boolean через метод ToBoolean и всегда следуют следующим правилам:

  • Object всегда соответствует true
  • Undefined всегда соответствует false
  • Null всегда соответствует false
  • Boolean остается неизменным
  • Number соответствует false, если является +0, -0, или NaN, в противном случае соответствует true
  • String означает false, если является пустой строкой » , в противном случае true. Условно говоря, для строки происходит сравнение не ее самой, а ее длины – в соответствии с типом number.

Используйте короткий синтаксис.

Более подробно можно прочитать в статье Truth Equality and JavaScript от Angus Croll

Блоки кода

Используйте фигурные скобки для всех многострочных блоков.

Комментарии

Используйте /** . */ для многострочных комментариев. Включите описание, опишите типы и значения для всех параметров и возвращаемых значений в формате jsdoc.

Используйте // для комментариев в одну строку. Размещайте комментарии на новой строке над темой комментария. Добавляйте пустую строку над комментарием.

Префикс TODO помогает другим разработчикам быстро понять, что вы указываете на проблему, к которой нужно вернуться в дальнейшем, или если вы предлагете решение проблемы, которое должно быть реализовано. Эти комментарии отличаются от обычных комментариев, так как не описывают текущее поведение, а призывают к действию, например TODO — нужно реализовать интерфейс . Такие комментарии также автоматически обнаруживаются многими IDE и редакторами кода, что позволяет быстро перемещаться между ними.

Используйте // TODO FIXME: для аннотирования проблем

Используйте // TODO: для указания решений проблем

Пробелы

Используйте программную табуляцию (ее поддерживают все современные редакторы кода и IDE) из двух пробелов.

Устанавливайте один пробел перед открывающей скобкой.

Оставляйте новую строку в конце файла.

Используйте отступы, когда делаете цепочки вызовов.

Запятые

Запятые в начале строки: Нет.

Дополнительная запятая в конце объектов: Нет. Она способна вызвать проблемы с IE6/7 и IE9 в режиме совместимости. В некоторых реализациях ES3 запятая в конце массива увеличивает его длину на 1, что может вызвать проблемы. Этот вопрос был прояснен только в ES5 (оригинал):

Редакция ECMAScript 5 однозначно устанавливает факт, что запятая в конце ArrayInitialiser не должна увеличивать длину массива. Это несемантическое изменение от Редакции ECMAScript 3, но некоторые реализации до этого некорректно разрешали этот вопрос.

Точки с запятой

Да.

Приведение типов

    Выполняйте приведение типов в начале операции, но не делайте его избыточным.

Используйте parseInt для чисел и всегда указывайте основание для приведения типов.

Если по какой-либо причине вы делаете что-то дикое, и именно на parseInt тратится больше всего ресурсов, используйте побитовый сдвиг из соображений быстродействия, но обязательно оставьте комментарий с объяснением причин.

Примечание: Будьте осторожны с побитовыми операциями. Числа в JavaScript являются 64-битными значениями, но побитовые операции всегда возвращают 32-битные значенения. Источник. Побитовые операции над числами, значение которых выходит за 32 бита (верхний предел: 2,147,483,647).

Соглашение об именовании

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

Используйте camelCase для именования объектов, функций и переменных.

Используйте PascalCase для именования конструкторов классов

Используйте подчеркивание _ в качестве префикса для именования внутренних методов и переменных объекта.

Создавая ссылку на this , используйте _this .

Задавайте имена для функций. Это повышает читаемость сообщений об ошибках кода.

Геттеры и сеттеры: функции для доступа к значениям объекта

    Функции универсального доступа к свойствам не требуются

Если вам необходимо создать функцию для доступа к переменной, используйте раздельные функции getVal() и setVal(‘hello’)

Если свойство является логическим(boolean), используйте isVal() или hasVal()

Вы можете создавать функции get() и set(), но будьте логичны и последовательны – то есть не добавляйте свойства, которые не могут быть изменены через эти функции.

Конструкторы

Присваивайте метод прототипу вместо замены прототипа на другой объект. Замена прототипа на другой объект делает наследование невозможным.

Методы могут возвращать this для создания цепочек вызовов. Но стоит оставаться последовательным и обеспечить одинаковое поведение для всех методов, кроме геттеров.

Вы можете заменить стандартный метод toString(), но убедитесь, что он работает и не вызывает побочных эффектов.

События

Подключая набор данных к событиям (как DOM-событиям, так и js-событиям, например, в Backbone), передавайте объект вместо простой переменной. Это позволяет в процессе всплытия событий добавлять к данному объекту дополнительную информацию.

Модули

  • Модуль должен начинаться с ! . За счет этого даже некорректно сформированный модуль, в конце которого отсутствует точка с запятой, не вызовет ошибок при автоматической сборке скриптов. Объяснение
  • Файл должен быть именован с camelCase, находиться в папке с тем же именем, и совпадать с именем экспортируемой переменной.
  • Добавьте метод noConflict(), устанавливающий экспортируемый модуль в состояние предыдущей версии.

Всегда объявляйте ‘use strict’; в начале модуля.

jQuery

Для jQuery-переменных используйте префикс $ .

Кэшируйте jQuery-запросы. Каждый новый jQuery-запрос делает повторный поиск по DOM-дереву, и приложение начинает работать медленнее.

Для DOM-запросов используйте классический каскадный CSS-синтаксис $(‘.sidebar ul’) или родитель > потомок $(‘.sidebar > ul’) . jsPerf

Используйте find для поиска внутри DOM-объекта.

30 сайтов-примеров отличного использования JavaScript Материал редакции

Ресурс Creative Bloq опубликовал материал, в котором его авторы поделились с читателями лучшими, на их взгляд, примерами использования JavaScript для создания сайтов. ЦП выбрал 30 самых интересных ресурсов.

С помощью JavaScript, утверждают авторы статьи, можно создавать запоминающиеся платформы, на которые пользователь захочет вернуться. Язык позволяет разрабатывать игры, сайты, API и многое другое.

1. Портфолио Майка Куса

Портфолио веб-дизайнера Майка Куса выполнено в «чистой и сдержанной манере», пишут редакторы Creative Bloq. В нём большие изображения сочетаются с простыми элементами пользовательского интерфейса.

«Я думаю о своих работах, как о бренде. Нет никакой необходимости добавлять в мой сайт лишние элементы дизайна», — говорит Кус.

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

2. Hello Monday

Сайт креативного агентства Hello Monday претерпел значительные изменения, замечают авторы статьи. Разработчиками компании была проделана огромная работа. Им удалось сделать интерфейс дружелюбным для пользователя.

Старый сайт агентства Hello Monday

Теперь на сайте представлены примеры уже выполненных агентством заказов — у каждого проекта есть своя страница, на которой описана его история, что даёт пользователю более глубокое понимание, чем занимается Hello Monday.

Обновлённый сайт Hello Monday

«Мы пытались отойти от шаблонного представления о том, как должен выглядеть сайт креативного агентства», — рассказывает Кэти Хертел, руководитель проекта по редизайну веб-страницы Hello Monday. Авторы материала находят сайт очень привлекательным и отзывчивым, чему способствует организация проектов на главной странице: она автоматически дополняется новыми работами агентства при прокрутке вниз.

3. Multeor

Multeor — это многопользовательская онлайн-игра, написанная на JavaScript с использованием элемента canvas HTML5. Она разработана Арьеном де Врайзом и Филидором Вайзе, а спроектирована Артуром ван Хугом. Основная задача пользователя в игре — контролировать падение метеоритов, получая очки за оставленные им разрушения.

Игра использует Node.js-сервер для управления связью между настольными и мобильными устройствами с помощью WebSockets.

Вайзе акцентирует внимание на том, что при разработке Multeor не использовались уже существующие игровые библиотеки:

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

4. Crime Timeline

Crime Timelime — агрегатор, собирающий данные о преступности в Великобритании с помощью публичных API. Он позволяет пользователям узнать, как обстоят дела в их регионе.

«Мы организовали сайт таким образом, чтобы он показывал карту региона и места совершения преступлений — за месяц, выбранный пользователем на панели снизу», — говорит разработчик проекта Алекс Миллер.

Ресурс использует API Google Maps, для создания панели с месяцами применялись jQuery и jQRangeSlider. Когда пользователь взаимодействует с картой — например, щелкает мышкой в определенное место на ней, сайт обновляет изображение с помощью JavaScript. «Пузырьки», показывающие количество преступлений, были созданы с помощью CSS и анимированы с помощью jQuery.

5. Here is Today

На сайте Here is Today язык JavaScript использовался для создания анимации. Создатель ресурса, дизайнер Люк Твимэн, так объясняет свою идею: «Я хотел создать что-то, что дало бы каждому человеку ощущение масштаба времени. Here is Today помогает понять, насколько обширна история вселенной».

Твимэн отмечает, что он с самого начала решил отказаться от стандартных величин измерения — пикселей, и описал собственные, основываясь на размерах экрана. Это было сделано для того, чтобы сайт выглядел одинаково на всех устройствах.

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

6. Tweetmap

Tweetmap изображает на страны на карте пропорционально количеству отправленных из них твитов. Разработчик сервиса Роб Хоукс перечисляет несколько технологий, использованных при его создании: TopoJSON, D3.js, Node.js, PhantomJS, и специальные алгоритмы построения смежных картограмм в режиме реального времени.

Мы выбрали Node.js, потому что у нас уже был опыт его использования, и потому что это простая, быстрая и гибкая платформа. Для анимации карты (в формате TopoJSON) мы используем D3 — фантастическую библиотеку для визуализации данных. В частности, мы широко применяем модуль geo, который позволяет делать сложные географические расчеты и преобразования.

Чтобы избежать проблем с представлением карт в браузере клиента, система генерирует карты на сервере с помощью D3, запускает и рендерит их с помощью движка PhantomJS, и только потом передаёт пользователю — это позволяет не создавать «дыр» при показе карт.

7. The Trip

The Trip — интерактивный фильм, созданный с помощью JavaScript и HTML5 (без использования Flash). Отто Наскарелла, создатель проекта, считает, что задача разработки подобного сервиса оказалась очень сложной:

Большинство трудностей, с которыми мы столкнулись, были связаны с тем, что HTML5 на момент написания сайта не имел средств для кросс-браузерной разработки. Тогда мы решили, что будем рекомендовать клиентам использовать Chrome.

Код сайта на JavaScript использует jQuery практически для всех задач. Разработчики также применяли TextBlur и TextDrop — для размытия и анимации текста.

8. Si Digital

Эта страница, написанная на JavaScript — новое портфолио и блог дизайнерского и маркетингового агентства Si Digital. Ведущий разработчик проекта Алекс Крук так объясняет анимацию на главной странице: «Жидкость, движущаяся по трубам, ведёт пользователей по нашему портфолио — она активирует анимацию изображений на каждом из этапов исследования сайта клиентом».

Для достижения подобного эффекта Крук применил метод jQuery.animate(). К тому же, добавляет он, нужно было правильно выбрать скорость заполнения жидкостью труб — ведь все читают с разной скоростью.

Интерактивный график на странице с описанием выполненных проектов и команды агентства, реализован с помощью jQuery. Временная шкала, по словам Крука, генерируется динамически — на основе информации из базы данных, с использованием технологии Ajax.

9. Сайт Жана Хальфстейна

Жан Хальфстейн — веб-дизайнер. В его портфолио авторов статьи больше всего привлекла главная страница — и анимация на ней. «Я действительно неплохо провёл время, пока возился с различными эффектами. Я очень люблю использовать новые технологии, так что решил сделать основную страницу своего сайта своеобразной песочницей — там я развлекаюсь с Three.js и элементом canvas HTML5», — рассказывает Хальфстейн.

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

10. Портфолио Ника Джонса

По словам Джонса, когда он разрабатывал сайт, у него было больше опыта в работе с Flash, чем с JavaScript, но ему захотелось попробовать что-нибудь новое — чтобы понять, на что он способен. «Я сразу понял, что синтаксис JavaScript почти такой же, как синтаксис ActionScript — поэтому очень скоро полностью освоился», — описывает процесс написания кода Джонс.

Джонс вспоминает, что Flash не давал ему доступа к работе с движениями мыши — это был новый опыт, который ему очень понравился. Разработчик хотел добиться такой отзывчивости сайта, которой он не мог достичь, используя переходы между классами в CSS. Джонс доволен достигнутым результатом:

Если вы собираетесь перейти с ActionScript на JavaScript, не медлите ни секунды. Делая свой сайт, я хотел понять, способен ли JavaScript на то, на что способен Flash. И я очень впечатлён.

11. MapsTD

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

Создатель проекта Дункан Барклай объясняет, как это работает: «Мы использовали API Google Maps, MooTools и JavaScript. Самая сложная часть — поиск маршрута, которым будут следовать враги пользователя. Как только игрок выбрал начальную точку, сервис осуществляет поиск долготы и широты, и вычисляет возможные пути c помощью Google».

По ходу игры на экране появляется всё больше противников. Барклай рассказывает, что разработчикам пришлось «бороться» c таймингом браузеров — дело в том, что большинство из них со временем снижает частоту проверки обновлений на странице, и нужно было сделать так, чтобы этого не происходило.

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

12. Glimpse Catalogs

Ресурс Glimpse разработан совместно командой Windows IE и проектом TheFind, и соединяет в себе систему поиска TheFind и приложение тех же разработчиков для онлайн-шопинга на Facebook. В рамках Glimpse программисты выпустили собственный фреймворк, основанный на Turn.js.

Целью команды с самого начала было сделать из Glimpse веб-приложение, а не обычный сайт. Разработчики использовали парадигму «модель-представление-поведение», которая разделяет на три отдельных компонента модель данных, пользовательский интерфейс и взаимодействие с клиентом. Сервис применяет шаблоны рендеринга моделей на стороне клиента Thrift или JSON — в зависимости от вычислительной мощности клиента.

Библиотека Turn.js также использовалась при разработке каталогов. С помощью CSS и JavaScript моделям, представленным на сайте, придаётся объём — за счет наложения теней на изображение.

13. Red Bull Music Academy Radio

RBMA Radio использует инструмент Modernizr, который позволяет вести кросс-браузерную разработку на HTML5 и CSS. Modernizr постоянно обновляется, так что создатели сайта могут улучшать код по мере представления новых возможностей.

Кроме того, при реализации сервиса применена библиотека Backbone.js — с помощью неё подгружаются плитки для создания эффекта бесконечной страницы.

14. Nouvelle Vague

Nouvelle Vague — сайт от французского дизайнерского агентства Ultranoir. Сервис позволяет «отслеживать» твиты по заданному хештегу. Он реализован с помощью JavaScript, WebGL и HTML5. HTML5, правда, отвечает только за тизер при открытии ресурса.

Один из разработчиков агентства рассказал, что на создание сайта ушло четыре месяца, а трудились над ним три человека. «Нам было очень интересно попробовать поработать с WebGL», — объясняет он.

Основная цель проекта заключалась в том, чтобы при помощи 3D-изображений воссоздать атмосферу из видеозаставки. Команда погрузилась в новые технологии HTML5, CSS3 и JavaScript, и считает, что эти языки могут стать стандартами для работы с 3D в будущем — из-за качественного рендеринга, богатых возможностей взаимодействия и реагирования.

15. The Convergence

The Convergence — браузерная игра, своей ретро-графикой напоминающая Super Mario Bros. Она демонстрирует потрясающие возможности JavaScript и HTML5 и доказывает, что HTML5 справляется со своими задачами ничуть не хуже, чем Flash.

Разработчики обещают в будущем добавить в игру аудиосопровождение и новые уровни, а также поддержку Mozilla Gamepad API.

16. Kindle Cloud Reader

Это веб-приложение превращает слова «купите один раз, читайте на всех устройствах» в реальность. Оно использует технологии HTML5, JavaScript API, библиотеки jQuery и jQuery UI и несколько плагинов jQuery, в том числе jScrollPane для прокрутки страниц и jQuery Templates. Кроме того, команда разработчиков воспользовалась WebSQL для поддержки офлайн-режима.

17. Les Enfants Terrible

Сайт, запущенный студией WeFail, считают авторы заметки, выглядит страшновато, но всё равно очень круто. Ресурс выполнен в довольно резком стиле. JavaScript используется для анимации при взаимодействии пользователя и системы. Чтобы прокручивание осуществлялось только для отдельных элементов интерфейса, командой был применён плагин jQuery ScrollTo. Для появления видео не во всплывающих окнах, а прямо на сайте использовалась библиотека Shadowbox.js.

Кроме того, в коде Les Enfants применяется плагин jQuery Cycle — он отвечает за отображение картинок и примеров работ агентства.

«Мы запустили Les Enfants, чтобы понять, какие возможности по производительности имеются у JavaScript. Оказалось, что в сочетании с СSS Transform можно добиться отличных результатов», — говорит разработчик Мартин Хью.

Не так давно, отмечает Хью, подобные вещи можно было создавать только при помощи Flash, но теперь у него есть жизнеспособная альтернатива — JavaScript.

18. Pinterest

Pinterest — яркий пример использования JavaScript для создания эффекта бесконечной страницы. Для создания сайта понадобились инструменты jQuery, jQuery UI и плагин PageLess.

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

19. Love Bomb Builder

Love Bobm Builder помогает пользователям выразить свою любовь или благодарность кому-либо. Это аккуратный и простой сайт, который позволяет создать и отправить послание-бомбу.

Ресурс иcпользует инструмент Modernizr для своевременного обновления кода на JavaScript и HTML5.

20. Michelberger Booze

Когда пользователь попадает на сайт, первым делом он видит так называемый «прелоадер» — может показаться, что он выполнен при помощи Flash, но это не так. За наполнение стакана пивом по мере загрузки отвечает HTML5 и JavaScript.

Ресурс использует функцию частичной прокрутки — только для отдельных элементов интерфейса, и позволяет пользователю интерактивно взаимодействовать с изображениями.

Нажимая на маски животных, клиент отправляется к другим сценам — все анимационные эффекты в которых исполнены при помощи jQuery.animate().

21. Trello

Trello — приложение для совместного или индивидуального планирования, в котором пользователи могут создавать списки выполненных и невыполненных задач и делиться прогрессом в режиме реального времени. Сайт разработан с использованием Node.js, MongoDB и Backbone.js.

Один из создателей Trello Даниэль ле Черминан поясняет, что применение только одного языка при написании сайта помогает новым членам команды быстрее влиться в процесс разработки.

Общение между пользователями реализовано с помощью Web Sockets — ле Черминан отмечает, что это достаточно новая технология, поэтому при её настройке возникали некоторые сложности.

22. BrowserQuest

Это игра в ретро-стиле, созданная студией Little Workshop, призвана продемонстрировать возможности HTML5, JavaScript и, в особенности, Web Sockets. Он может одновременно поддерживать взаимодействие между тысячами пользователей.

«Создание многопользовательской игры — отличный способ продемонстрировать, как такие технологии могут работать вместе. BrowserQuest опирается на серверы Node.js, каждый из которых может запустить несколько экземпляров игрового мира», — рассказывает разработчик студии Гийом Лекольне.

23. JS1k

JS1k — ежегодный конкурс, задача участников которого создать страницу на JavaScript на заданную тему (чаще всего — анимированные изображения). Её вес не должен превышать 1 КБ.

Тема этого года — «Here be dragons».

Работа-победитель конкурса в 2012 году. Автор — Филипп Бучанан, тема — «Любовь»

Работа победителя 2012 года изначально весила 8 КБ — но за день Филипп смог сократить её размер до требуемого 1 КБ, оптимизировав алгоритм генерации дерева:

Моей тактикой был «честный обман» компилятора. Например, использование конструкции «a ? b : c» вместо «if (a) b else c» экономит 8 байтов.

24. Timeline

Сервис помогает пользователям создавать таймлайны, и он очень прост в использовании. В интерактивную шкалу можно включать твиты, видео, фотографии и аудиозаписи. Свой таймлайн можно описать с помощью JSON или Google Docs — как удобнее самому клиенту.

25. Draw a Stickman

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

Для создания игры использовались jQuery и библиотека для работы с векторной графикой Raphal.js. Реализация проекта с помощью Raphal помогла разработчикам избежать проблем с производительностью на большинстве устройств и во всех браузерах.

26. Panera Bread

Рекламный сайт сети пекарен Panera Bread был создан агентством Luxurios Animals. Технический директор студии Дэн Федермен говорит, что разработчики с самого начала решили реализовывать проект на CSS3 там, где это возможно, а для всего остального использовать JavaScript.

Анимация с помощью CSS3 обеспечивает плавность переходов на всех типах устройств. Кроме того, команда воспользовалась библиотекой Hammer.js для обработки прикосновений, Backbone.js для создания моделей данных, плагинами jQuery Transit и Isotope и HTML.

27. Peanut Gallery

Peanut Gallery — проект, реализованный Google Creative Lab. Сайт позволяет пользователям добавлять озвучку в «немые» короткометражки с при помощи микрофона. Ресурс использует Google Speech API и JavaScript API — они помогают интегрировать распознавание речи в веб-приложения.

Валден Кламп, один из разработчиков проекта, выделяет на его взгляд интересную особенность Google Speech API — динамического распознавание речи. Например, если англоязычный пользователь начинает произносить «European Union», то сначала распознаётся слово «your» или «year» и лишь под конец оно преобразовывается в «European». Ещё одна полезная возможность — распознавание знаков препинания. Словосочетания «вопросительный знак», «восклицательный знак» и другие автоматически превращаются в соответствующие им пунктуационные знаки.

28. The Interactive Ear

«Интерактивное ухо» создано агентством Epiphany Solutions для своего клиента Amphilon, который специализируется на слуховых аппаратах и других решениях для слабослышащих людей. Ресурс ориентирован на детей возраста младшей и средней школы. Сайт состоит из трёх «витрин», демонстрирующих, как устроено человеческое ухо.

Создатель проекта Брайан Джеймс отмечает, что благодаря использованию JavaScript, HTML5 и CSS команда смогла достичь максимальной производительности даже в устаревших и неподдерживаемых браузерах. Анимации при исследовании уха с помощью лупы — это GIF-изображения.

29. Violin

Violin — инструмент для визуализации кода на JavaScript. Он показывает, как части приложения взаимодействуют друг с другом в режиме реального времени. Сам сайт выполнен на JavaScript с использованием библиотеки D3.js для построения графиков.

30. Сайт Филиппы Грегори

Сайт британской писательницы Филиппы Грегори, автора романа «Ещё одна из рода Болейн», выполнен по её заказу агентством Better. Основной задачей разработчиков являлась оптимизация площадки для всех видов устройств. Ресурс построен на базе FuelPHP CMS. JavaScript отвечает за пользовательский интерфейс, интерактивность и плавность переходов на сайте.

Правила написания JavaScript кода

Правила написания JavaScript кода

Данный обзор предназначен только для личного использования. Это не сборник абсолютных/идеальных правил, если существующий код уже написан в определённом стиле, то именно ему стоит отдать предпочтение.

Подразумевается возможность развития и обновления этого документа если какие-то идеи окажутся неудачными.

Переменные должны определяться в верху функции, даже если они определяются ниже по коду. Если переменной присваивается значение, эта запись должна идти отдельной строкой кода; если переменные только объявляются можно писать их одной строкой, но только в самом начале определения. Перед знаком = и после него должны быть пробелы. Переменные должны быть выровнены по левой кромке.

Предполагается использование camelCase стиля именования методов и mixed_underscore для атрибутов и сервисных функций. Подумайте как лучше выразить назначение функции или переменной, скажем массивы лучше именовать во множественном числе, а перед булевыми перемененными использовать is .

Отступы и пробелы

Для отступа используются четыре пробела. Стоит убирать пробелы перед переносом строки. После двоеточий и запятых пробелы необходимы всегда.

Для определения строк используются одинарные кавычки.

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

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

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

При работе с откомментированным кодом не забывайте проверять сохраняется ли актуальность данного комментария и исправлять/удалять его.

Для длинных строк нужно использовать /* . */ .

Длинные одно-строчные комментарии должны быть отдельной строчкой, предпочтительно над комментируемым кодом. Так же перед ними стоит оставлять пустую строку.

Комментарии внутри строки можно использовать только для описания специфических аргументов в списке формальных параметров:

Массивы и инициализация объектов

Пустые объекты и массивы не должны содержать пробелов. Однострочные массивы и инициализаторы объектов допустимы только если они умещаются в строку-две.

Отступы многострочных инициализаторов аналогичны таковым у блоков.

Обратите внимание на то, что перед двоеточием пробела нет.

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

Хотя она и назначена осмысленному атрибуту, функция была задана анонимной.

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

Незначительные по размеру блоки, вроде функций обратного вызова или обработчиков событий могут и не иметь подходящего имени, в таких случаях анонимность оправданна.

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

Вызов функции должен содержать пробелы между параметрами, но не должен содержать пробелов около открывающей и закрывающей скобок:

Простые вызовы должны быть в одну строку:

Если функция вызывается со множеством параметров или длинными аргументами, её вызов должен разделяться на название и список аргументов, по одному на строку:

К слову, если аргументы содержат объекты с длинными атрибутами, их стоит тоже записать в несколько строк:

Существует несколько способов создания объектов. В целом рекомендуется использовать паттерн «конструктор»:

Вложенные конструкторы допустимы, но перед этим стоит подумать «а стоит ли».

Часто требуется сохранить ссылку на конструируемый объект для использования во внутренних функциях. Для этого стоит задать переменную self :

Стоит отметить что эта строка всегда идёт в конструкторе первой.

Использование именованных параметров

Использование именованных параметров уменьшает повторения(?) и делает код читабельнее. Их использование особенно полезно если из названия функции не ясно что в неё передавать.

Чтобы в таком коде понять что делает вызов функции, придётся возвращаться к её определению.

В данном примере становится очевидно что представляет собой каждый параметр.

Что нужно для начала работы функции должно быть очевидно в самом её начале. При её определении либо заносите в var все используемые перемененные, либо комментируйте что из параметров будет использоваться и для чего.

Вложенные функции неплохо подходят для разбиения функционала и могут использоваться свободно. Если функция используется только другой функцией её стоит определить внутри последней.

Как исключение иногда стоит определять дочернюю функцию вне основной с целью избегания перекрёстных ссылок (см. раздел о замыканиях).

Общее поведение может быть сгруппировано в отдельные модули:

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

Код в представлении

Допустимо использование встроенного JavaScript-кода, но только если инициализаторы связаны с содержимым страницы. В целом код должен быть отделён от представления.

Допустимо встраивать в представление установку констант.

Использование JavaScript в атрибутах HTML противопоказано:

Применяйте ненавязчивый javascript с целью разделить функциональность (слой обработки) от представлений и кода страничек.

Всегда используйте var . Никогда не применяйте неявного приравнивания. Скажем, если хотите создать объект внутри window, так и пишите:

Константы должны определяться аналогично обычным переменным, но при этом следовать своему стилю именования. Ключевое слово ‘const’ плохо поддерживается и его следует избегать.

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

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

После блоков for / while / switch / if / else точки-с-запятой не используются в целях повышения удобочитаемости кода.

Тернарный оператор полезен при назначении переменных. Однако вложенные тернарные операторы недопустимы из-за их низкой читаемости.

Проверка на равенство

В большинстве случаев необходимо использование строгой проверки на (не)равенство ( === and !== ). В частности желательно приведение перемененных перед сравнением.

Проверка типов по возможности должна делаться с помощью именованных методов: arr.isArray , str.isString , func.isFunction , и obj.isObject .

Определение внутри блоков

Как общую практику избегайте объявлений внутри вложенных блоков. Особенно старайтесь избегать определения внутри блоков функций, т.к. это нестандартно для ECMAScript. ECMAScript допускает только определения функций в корневом блоке скрипта или функции(?).

Как общее правило переменные стоит выносить из блоков.

JavaScript Руководство по стилю и соглашения о кодировании

Всегда используйте одинаковые правила кодирования для всех ваших проектов JavaScript.

Соглашения о кодировании JavaScript

Соглашения о кодировании — это руководство по стилю программирования. Они обычно охватывают:

  • Правила именования и объявления для переменных и функций.
  • Правила использования пробелов, отступов и комментариев.
  • Практика и принципы программирования

Правила кодирования безопасное качество:

  • Улучшает читаемость кода
  • Упростить обслуживание кода

Соглашения о кодировании могут быть документированы правилами для команд, или просто вашей индивидуальной практикой кодирования.

На этой странице описаны общие соглашения о коде JavaScript, используемые html5 css.
Вы также должны прочитать следующую главу «рекомендации» и узнать, как избежать ошибок кодирования.

Имена переменных

В html5 css мы используем camelCase для имен идентификаторов (переменных и функций).

Все имена начинаются с буквы.

В нижней части этой страницы вы найдете более широкое обсуждение правил именования.

firstName = «John»;
lastName = «Doe»;

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Пространства вокруг операторов

Всегда ставьте пробелы вокруг операторов (= +-*/), и после запятой:

Примеры:

Отступ кода

Всегда используйте 4 пробела для отступа блоков кода:

Функции:

Не используйте вкладки (таблицы) для отступа. Различные редакторы интерпретируют вкладки по-разному.

Правила операторов

Общие правила для простых инструкций:

  • Всегда заканчивайте простой оператор точкой с запятой.

Примеры:

var values = [«Volvo», «Saab», «Fiat»];

var person = <
firstName: «John»,
lastName: «Doe»,
age: 50,
eyeColor: «blue»
>;

Общие правила для сложных (составных) операторов:

  • Поместите открывающую скобку в конец первой линии.
  • Используйте один пробел перед открывающей скобкой.
  • Поместите закрывающую скобку на новую линию без пробелов.
  • Не заканчивайте сложный оператор точкой с запятой.

Functions:

Петли:

Правила объекта

Общие правила для определений объектов:

  • Поместите открывающую скобку на ту же линию, что и имя объекта.
  • Используйте двоеточие плюс один пробел между каждым свойством и его значением.
  • Используйте кавычки вокруг строковых значений, а не вокруг числовых значений.
  • Не добавляйте запятую после последней пары значение свойства.
  • Поместите закрывающую скобку на новую линию без пробелов.
  • Всегда заканчивайте определение объекта точкой с запятой.

Пример

Короткие объекты могут быть записаны сжатыми, на одной линии, используя пробелы только между свойствами, как это:

Длина линии «Hello Dolly.»;

Соглашения об именовании

Всегда используйте одно и то же соглашение об именах для всего кода. Например:

  • Имена переменных и функций, написанные как camelCase
  • Глобальные переменные, написанные в верхнем регистре (мы не, но это довольно часто)
  • Константы (например, PI), написанные в верхнем регистре

Если вы используете Hyp-кур, camelCase, или ундер_скорес в именах переменных?

Это вопрос, который часто обсуждают программисты. Ответ зависит от того, кого вы спрашиваете:

Дефисы в HTML и CSS:

Атрибуты HTML5 могут начинаться с данных-(данные-количество, данные-цена).

CSS использует дефисы в именах свойств (размер шрифта).

Дефисы можно ошибочно считать попытками вычитания. Дефисы не допускаются в именах JavaScript.

Подчеркивает:

Многие программисты предпочитают использовать подчеркивания (дате_оф_бирс), особенно в базах данных SQL.

Подчеркивания часто используются в документации PHP.

Паскалкасе:

Паскалкасе часто предпочитают программисты C.

camelCase

camelCase используется самим JavaScript, jQuery и другими библиотеками JavaScript.

Не запускайте имена с помощью знака $. Это поставит вас в конфликт со многими именами библиотек JavaScript.

Загрузка JavaScript в HTML

Используйте простой синтаксис для загрузки внешних скриптов (атрибут Type не нужен):

Доступ к элементам HTML

Следствие использования «неопрятных» стилей HTML может привести к ошибкам JavaScript.

Эти два JavaScript-заявления будут давать разные результаты:

var obj = getElementById(«Demo»)

var obj = getElementById(«demo»)

If possible, use the same naming convention (as JavaScript) in HTML.

Расширения файлов

HTML-файлы должны иметь расширение .HTML (не .htm).

CSS-файлы должны иметь расширение .CSS .

JavaScript-файлы должны иметь расширение .js .

Использовать имена файлов нижнего регистра

Большинство веб-серверов (Apache, UNIX) чувствительны к регистру имен файлов:

Лондон. jpg не может быть доступен как London. jpg.

Другие веб-серверы (Microsoft, IIS) не чувствительны к регистру:

Лондон. jpg можно получить как Лондон. jpg или Лондон. jpg.

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

Если вы переходите от регистра к регистру, то даже небольшие ошибки могут нарушить ваш веб-сайт.

Чтобы избежать этих проблем, всегда используйте имена файлов нижнего регистра (если это возможно).

Производительности

Соглашения о кодировании не используются компьютерами. Большинство правил мало влияют на выполнение программ.

Отступы и лишние пробелы не имеют большого значение в небольших скриптах.

Для кода в разработке следует предпочесть удобочитаемость. Более крупные сценарии производства должны быть minified.

JavaScript для начинающих – простые примеры

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

Примечание. Данный урок предназначен в большей степени для тех пользователей, которые понимают общие принципы программирования, а также знают основы HTML. Если Вы не знаете что такое тег ol и li, то Вам лучше познакомиться сначала с основами HTML. Также, если Вы не знаете что это за конструкция if…then…else (это общий вид), рекомендую узнать общие принципы программирования в не зависимости от языка программирования. Только в этом случае можно начать изучать JavaScript. И этот урок будет для Вас максимально полезен.

Основы JavaScript — теория

И начнем как обычно с основ, т.е. с определения, что такое JavaScript? JavaScript – это скриптовый язык программирования, код которого выполняется на стороне клиента (пользователя). Применяется обычно для организации на сайте динамических HTML страниц, без перезагрузки самой страницы, т.е. без обращения к серверу.

Зачем нужен JavaScript?

А зачем Вы спросите организовывать динамические страницы?

Во-первых, это красиво, удобно и современно.

Во-вторых, для того чтобы сделать любое изменение на сайте необходимо перезагрузить страницу, при этом у сервера будут отниматься ресурсы, а теперь представьте что у Вас посещаемый сайт и таких обращений очень много, Ваш сервер будет просто перегружен. А так как JavaScript — это клиентская технология, обращения к серверу не нужны. Вся программа на JavaScript будет выполняться непосредственно у Вас на компьютере или на компьютере пользователя, который зашел к Вам на сайт.

Теперь поговорим конкретней для чего можно использовать JavaScript у себя на сайте? Например, для динамически выпадающего меню или появления, исчезания каких-то элементов управления. В общем можно сделать практически все что угодно.

Сейчас давайте разберемся с принципами этого языка программирования. JavaScript не строго типизированный язык программирования. Точку с запятой в конце каждой строки можно не ставить, но лучше ставить, для того чтобы самим лучше понимать и читать код, но если Вы вдруг забыли поставить точку с запятой, то никакой ошибки не будет в отличие, например, от языка PHP.

В процессе формирования HTML страницы браузером, сам браузер не только отрисовывает ее, но и формирует так называемое дерево элементов, которое состоит из узлов. А каждый узел формируется на основе кода HTML. Исходя из всего сказанного, можно сказать, что JavaScript может изменять это дерево и соответственно изменять сам код HTML, а как следствие изменять отображение HTML страницы в браузере. Под изменением дерева элементов понимается как само изменение некоторых узлов, так и удаление, добавление этих самых узлов. Чтобы было понятней, узел формируется на основе элементов в HTML, другими словами, тегов или самого содержимого, т.е. текста. Например, следующий код HTML можно отобразить в виде дерева элементов.

Код HTML:

Узлы этого кода:

Корневой Узел – html

Дочерний Узел узла HTML — body

Дочерний Узел узла body – p

Дочерний Узел узла p — сам текст (текст является отдельным узлом, это нужно помнить при добавлении, удалении и изменении текста).

Надеюсь с этим понятно, перейдем непосредственно к синтаксису и написанию первых программ на JavaScript.

По началу мне показалось, что JavaScript очень схож, с серверным языком программирования PHP, но это только в некоторых конструкциях, да, кстати, он также схож и с просто языком программирования JAVA, но на самом деле схоже написание нескольких конструкций и называние этих языков, но в остальном, имеется в виду в принципах программирования, это две разные вещи. Кстати, JavaScript никак не связан с языком JAVA, если только названием, поэтому не путайте JavaScript — это один язык программирования, а Java — это совсем другой. Но почему его назвали именно JavaScript? Да потому что в то время, когда разрабатывали JavaScript, был сильно популярен язык Java, и поэтому разработчики JavaScript решили переименовать свой язык LiveScript (так он изначально назывался) в JavaScript, а также изменили написание базовых конструкций, похожих на Java. Кстати, JavaScript официально называется ECMAScript, существует одноименный стандарт. Это для того чтобы не было проблем с владельцами торговой марки Java. Таким образом, JavaScript и JAVA — это совершенно два разных языка программирования. А почему у всех на устах название JavaScript? Да потому что просто так привыкли, и все называют язык ECMAScript языком JavaScript.

Пример кода JavaScript

Хватит лирического отступления от сути нашего вопроса, перейдем к тому, как нам изменять эти самые узлы в этом дереве. Как обычно мы это сделаем на примере. Ниже у нас есть небольшой список, как нам в него добавить (или удалить) еще несколько значений? Попробуйте нажать «Добавить в список» и у Вас откроется окно для ввода, введите название нового пункта и нажмите OK. Как все это происходит, давайте разбираться.

Сам пример:

  1. Первоя строка
  2. Вторая строка
  3. Третья строка

Добавить в список

Удалить из списка

Код JavaScript:

Код HTML:

В самом коде я написал комментарии, поэтому я думаю проблем возникнуть не должно, что для чего. Но я все равно поясню общую картину.

У нас есть некий список, помеченный >

1. addLi() –для добавления новых строк.

В функции addLi мы просим пользователя ввести название новой строки с помощью встроенной функции prompt, и помещаем это название в переменную stroka (как Вы уже, наверное, поняли, переменные объявляются с помощью оператора var).

Затем с помощью метода getElementById объекта document, находим нужный нам id списка.

Потом с помощью метода createElement все того же объекта document, создаем элемент LI (Вы, наверное, заметили, что при создании элемента, его название пишется с большой буквы).

Далее с помощью метода appendChild мы присваиваем нашему списку еще один новый пункт LI.

Затем мы создаем новый узел текст и передаем ему значение, которое ввел пользователь в нашу переменную stroka.

И снова присваиваем, только уже элементу li, новое его значение (или его дочерний узел, т.е. текст) с помощью метода appendChild.

2. deleteLi() – для удаления этих строк.

Здесь мы также находим наш список с помощью метода document.getElementById и передаем ему значение spisokst.

Затем заводим новую переменную lastLi и присваиваем ей значение последнего пункта в нашем списке (ol.lastChild).

Здесь существует небольшая проблема, по стандарту при формировании страницы HTML все пробелы, табуляции, комментарии в коде HTML учитываются, но не выводятся на экран, поэтому запомните, при обращении к последним элементам, какого-нибудь узла, там может оказаться пробел, табуляция или комментарии, поэтому результат может немного отличатся от действительного, например, если бы я здесь не учел этого, то у меня пункты в списке удалялись через один или, в некоторых случаях, через два клика на кнопку «Удалить из списка» и чтобы этого избежать я проверял, что находится в последнем узле. Если это пока не понятно, можете не запоминать:)

3. Также хочу отметить, что функционал кнопок также реализован на javascript путем обработки событий, например, при клике (событие — onClick=»javascript:addLi()») на кнопку «Добавить в список» запускается функция addLi(), а при клике на кнопку «Удалить из списка» запускается функция deleteLi(). Остальное сделано для визуальных эффектов, пока это можете не запоминать. Например, событие onmouseover означает, что при наведении курсора мыши будет что-то выполняться.

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

JS-гайд: основные концепции JavaScript с примерами кода

В этой рубрике Вы найдете уроки, которые относятся к теме создания сайта, но не попали ни в один раздел.

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Распознавание текста из изображений через командную строку

Для человека не составляет особого труда посмотреть на изображение и прочитать представленный текст. Для машины данный процесс не так прост. Однако с помощью imgclip вы сможете быстро выполнить данную операцию.

HTTPie — удобный инструмент похожий на cURL

cURL — это самый известный инструмент для отправки HTTP запросов из командной строки. В этом уроке мы познакомим вас с более удобным аналогом, который называется HTTPie.

Введение в JavaScript

Этот пост посвящён главному языку будущего — JavaScript. Благодаря своей гибкости используется в браузере, на серверах, в мобильных приложениях, на десктопе и практически во всех видах программирования. Удобный синтаксис позволяет легко писать на нём, а высокая производительность делает его отличным выбором для решения любых задач — от небольших магазинов до огромных highload проектов. JavaScript по праву является самым популярным в мире языком. На каждом сайте есть браузерный JavaScript, а JavaScript на сервере используется такими крупными корпорациями, как Amazon, Yahoo, HP, NASA, Walmart и многие другие.

Часто задаваемые вопросы

В: Что это за язык такой?

О: Мультипарадигменный язык, изначально создавался для использования в браузерах как язык сценариев для придания интерактивности веб-страницам, однако в процессе своего развития преодолел этот этап и сейчас может использоваться для любых целей ввиду своей неограниченной гибкости и удивительно удобного синтаксиса. Сочетает в себе особенности объектно-ориентированного, функционального, событийно-ориентированного, декларативного и императивного программирования. Объектно-ориентированная часть реализована через прототипирование. В последних стандартах язык сделал большой шаг в сторону функционального программирования.

В: Какие возможные направления для разработки существуют?

О: Практически все! Можно писать Front-end, Back-end, GameDev, 2D/3D графику, разрабатывать мобильные и десктопные приложения. Список инструментов для различных целей

В: Можно выучить только один фреймворк/библиотеку и всё писать на нём?

О: Не стоит начинать учить отдельный фреймворк или библиотеку, пока отсутствуют базовые знания самого языка. Во-первых, из-за отсутствия знаний самого языка возникнет масса проблем с пониманием принципа работы фреймворка/библиотеки, во-вторых, этим можно сильно испортить себе восприятие языка и после этого будет гораздо сложнее изучать чистый JS и другие фреймворки.

В: Существуют ли стайл-гайды для JavaScript?

В: Какие новые возможности добавил ES6?

О: Вот здесь можно почитать на русском

В: Я хочу писать на ES6, но многие браузеры не поддерживают новые возможности. И вообще, надоел геморрой с браузерным зоопарком. Неужели нет способа обойти это?

О: Конечно есть! Чтобы код одинаково хорошо работал во всех браузерах и все возможности ES6 и будущих стандартов нормально работали необходимо собрать код с помощью сборщика. Сборщик компилирует весь код в один файл и делает его полностью кроссбраузерным. Наиболее удобен в использовании Webpack, хотя существуют и аналоги. Потребуется некоторое время на изучение, но результат себя окупит. Сборщики нужны только во Front-end, Node.js и так поддерживает все новые возможности.

В: Зачем нужны CoffeeScript и TypeScript?

О: Это особые варанты JS для любителей других языков. CoffeeScript подходит для любителей Ruby и Python, TypeScript — для сторонников строготипизированных языков вроде C# или Java. Если ты новичок в программировании, то учи оригинал, а диалекты попробуешь, когда уже будет опыт.

В: Зачем нужны таск-раннеры, такие как Gulp или Grunt?

О: Они позволяют одной консольной командой запустить выполнение заранее прописанного процесса, который может содержать множество команд и который неудобно каждый раз выполнять вручную. Пример — компиляция JS с помощью Webpack, сборка LESS стилей в CSS и многое другое. Ещё раз — таск-раннер не замена сборщику, Gulp — не конкурент Webpack, они выполняют совершенно разные задачи и зачастую используются вместе.

В: Можно ли писать фронт на других языках?

О: Да, существуют компиляторы различных языков в JS, такие как ScalaJS, PyJS и другие. Но стоит помнить, что у них есть масса недостатков и использовать их стоит только если на чистом JS (также CS и TS) не получается писать совершенно. Они предназначены прежде всего для тяжёлых приложений вроде браузерных 3D игр в классических Front-end целях не очень удобны.

В: Я слышал про какой то WebAssembly, который заменит JS. Это правда? Что это такое?

О: Нет, неправда. WebAssembly (WASM) практически не имеет отношения к классическому Front-end. Это особая технология, позволяющая выполнять в браузере бинарный код, компилируемый из различных языков. Он предназаначен для выполнения в браузере тяжёлых приложений вроде трёхмерных онлайн-игр и никак не связан с привычными задачами JS. Более того, учитывая развитую инфраструктуру JS, множество фреймворков и библиотек на все случаи жизни, большое количество профессиональных разработчиков, огромное количество легаси-кода, выполнение WASM иных задач, не связанных с различными высокопроизводительными трёхмерными приложениям, видится невозможным. Кроме того, WASM не затрагивает серверную и мобильно-десктопную часть JavaScript, которые уже успели стать довольно популярными.

В: С чего начать изучение?

Материалы для изучения

Книги про JavaScript

Марейн Хавербек — «Выразительный JavaScript» — Вводная книга по JavaScript и программирование в целом.

Дэвид Фленеган — «JavaScript: Подробное руководство«

Дуглас Крокфорд «JavaScript: сильные стороны«

Стефанов С. — «JavaScript. Шаблоны«

Джон Резиг — «Секреты JavaScript ниндзя«

Николас Закас — «JavaScript. Оптимизация производительности«

Джон Резиг, Расс Фергюсон — «JavaScript для профессионалов«

Dr. Axel Rauschmayer — «Speaking JavaScript: An In-Depth Guide for Programmers«

Discover Meteor — Книга по Meteor.js — одному из самых лёгких и функциональных фреймворков.

М. Кантелон , М. Хартер — «Node.js в действии«

Кирилл Сухов — «Node.js. Путеводитель по технологии«

Дэвид Хэррон — «Node.js. Разработка серверных веб-приложений»

Тодд Мотто — «Учебник AngularJS«

Max P — «Курс по React.js для начинающих«

Эдди Османи — «Разработка Backbone.js приложений«

Эрл Каслдайн, Крэйг Шарки — «Изучаем JQuery«

Адам Фримен — «jQuery для профессионалов«

И не забываем читать официальную документацию для каждого фреймворка.

learn.javascript.ru — Самый главный русскоязычный сайт по JavaScript. Других таких подробных уроков не найти. Начинать строго с него.

node-center.ru — Второй по важности сайт. Ориентирован на Node.js, но мелькает материал и по Front-end. Сборник всей нужной информации, перевод официальной документации, список книг и ссылок.

jstherightway.org — Огромный англоязычный гайд. Есть книги, статьи, список фреймворков и многое другое. По сути, этот текст — краткий аналог этого гайда.

nodeguide.ru — Большое количество переведённых статей по Node.js

Блоги и новостные ленты

weblog.bocoup.com — Bocoup Weblog

perfectionkills.com — Perfection Kills

reddit.com/r/javascript — subreddit на reddit.com

toddmotto.com — Todd Motto, Lead front-end @appsbroker . Developer Expert @google .

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

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

Уже не такой сильный, но все еще интересный проект, также обязателен для улучшения навыка.

Дает хорошее представление о замыканиях.

Прошёл курсы, прочитал книги и думаешь, что знаешь JS? Теперь изучи тонкости и особенности языка. Сделать это можно здесь — https://shamansir.github.io/JavaScript-Garden/

Список инструментов для различных целей

Мастер Йода рекомендует:  В чипах Qualcomm нашли три уязвимости
Добавить комментарий