Доброго времени суток всем желающим окунуться в интересный мир программирования и изучить основы языка JavaScript. Все мои последующие публикации в данном разделе помогут вам разобраться во многих базовых аспектах языка, научиться реализовывать популярные задачи программно, а также развивать свои навыки до более высоких уровней эрудиции.
Хочу отметить, что курс писался для начинающих javascript-овых разработчиков, однако он будет полезен и продвинутым девелоперам.
Что касается данной статьи, то я предоставлю вам общее представление о языке JavaScript, расскажу, в каких случаях его используют, и для любопытных приведу пример первого традиционного программного кода. А теперь давайте приступим к основной части!
Мир JavaScript-а
Сначала хочу поведать вам несколько интересных фактов, которые нужно знать, если вы хотите писать на конкретно этом языке и вообще работать в ИТ-шной области.
Итак, главным разработчиком JavaScript был Бредан Эйх. Он вместе с командой опытных экспертов начал создавать новый язык, который сможет внедряться в разметку на html. Это было в далеком 1995 году.
Как выучить JavaScript? Самый аху#### способ!
Некоторые из вас конечно могут сказать: «Как же далеком, если я застал тот год». В мире IT все развивается с бешенной скоростью (думаю вы обратили на это внимание), новые фреймворки и технологические решения появляются буквально каждый месяц.
Конечно языки выпускаются не с такой частотой, но большинство популярных и перспективных языков были созданы менее 15 лет назад (например, Swift презентовали только 2 года назад). Так что разработки быстро переходят из состояния «инновация» в состояние «старый (традиционный) инструмент для работы».
Очень часто новички путают JavaScript с Java, обращая внимание только на название и не понимая, в чем же собственно разница.
Вспоминая свое первое знакомство с этими двумя языками, хочу вас предупредить: профессиональные девелоперы очень не любят, когда кто-то оговаривается или по своей неопытности неверно использует эти два наименования. Косой взгляд вам обеспечен.
Java – это язык высокого уровня, код которого транслируется на виртуальной машине. В 1995 году он считался самым популярным и часто используемым языком для написания множества программ в разных сферах IT.
JavaScript же является встраиваемым языком в html-код и его главное предназначение – сделать страницу веб-ресурса интерактивной, т.е. более гибкой и «коммуникабельной». Он основан на ECMAScript, который в свою очередь является фундаментом еще для нескольких скриптовых языков.
JavaScript такое название получил не сразу. Изначально он был прозван Mocha, после переименован на LiveScript. Однако было принято решение воспользоваться хитрой маркетинговой фишкой и в название нового продукта включить слово «Java». Кстати, любое приложение, написанное на этом языке, называется скриптом.
Не смотри обучающие ролики!
Возможности JavaScript
Современный JavaScript является интерпретируемым языком. Это означает, что код программ обрабатывается и выполняется «как есть». Именно так браузеры работают со скриптами.
Если отойти в сторону от веб-разработки, то JavaScript можно найти и в других областях. С его помощью пишут разные виды приложений, игры, прикладное ПО и многое другое. Скрипты можно запустить абсолютно везде и не только в браузерах. Главное условие – наличие интерпретатора кода.
Основными преимуществами и навыками JavaScript-а являются:
- Умение создавать пользовательские теги в разметке html, а также удалять и видоизменять существующие;
- Быстрое и простое подключение к html;
- Возможность реагировать на различные пользовательские действия: кликанье, перемещение курсора по веб-странице, набор символов на клавиатуре и т.д.;
- Способность срабатывать в указанные моменты;
- Взаимодействие с jquery и ajax. При помощи первой технологии, которая является библиотекой JavaScript, упрощается работа с многими элементами веб-сервисов и в том числе с ajax. Ajax в свою очередь позволяет реализовывать очень классный финт ушами: отправлять информацию на сторону сервера, получать ответ и обновлять данные на веб-странице, не перегружая ее целиком.
- Спецификация JavaScript является общим стандартом и поэтому поддерживается всеми существующими браузерами;
- Высокая скорость работы.
Также я хочу отметить, что код, написанный на JavaScript иногда может заменить css. Однако тут есть несколько нюансов.
Во-первых, ключевое слово в предыдущем предложении – «иногда». Да, некоторые свойства внешнего вида веб-сервисов можно прописать с помощью скриптов, однако далеко не все.
Все-таки css и css3 живут ради исполнения своей главной цели – обеспечение качественного и многофункционального дизайна страниц сайтов. И стоит им отдать должное, ведь справляются со своей задачей они безупречно.
Во-вторых, в случае необходимости изменить оформление внешнего вида веб-сервисов, реализованных на языке js, будет намного труднее и ресурсозатратнее.
Ограничения js
Как и всегда, не бывает идеальных технологий, подходящих под все задачи и умеющих выполнять любые действия. Js не исключение. Несмотря на огромный список преимуществ, он тоже прячет несколько скелетов в шкафу.
Для начала в JavaScript отсутствует строгая типизация. Это может порадовать только вначале, когда голову посещают мысли: «Наконец не надо заморачиваться по поводу типов переменных и их конвертации».
Однако по мере увеличения сложности и объемов кода отсутствие типизации открывает свою настоящую сущность. Хотя бы взять компилятор. Он не может сообщить об ошибках несоответствия типов данных, так как сам не знает их до тех пор, пока не отработает нужная строчка программы.
Помимо этого, в языке не предусмотрена работа с файловыми системами (создание, удаление, подключение и т.д. файлов), а также с потоками ввода-вывода информации, что иногда очень критично. В этом случае девелоперам приходится искать другие инструменты для работы с документами.
Что касается наследования, то эту тему нужно подробно разбирать, ведь наследование в js – это совершенно другой механизм, отличающийся от привычного наследования в популярных языках. Пока скажу только, что он основан на прототипах и наследование выполняется через объекты.
Как подключается скриптовый код к html?
Для этого существует несколько способов, а точнее три. Выбор одного из них зависит от количества кода и самого проекта.
Если кто помнит мою публикацию о вставке css в html, то сразу поймет, о чем пойдет речь, потому что способы внедрения скриптов и стилевых правил идентичны.
Начнем с первого. Небольшой кусок кода можно вставить в язык разметки при помощи специального парного тега script>. По установленным правилам скриптовую часть, как и стилевые таблицы, принято вписывать внутри элемента .
Однако если вы вставите код в любом другом месте, результат работы от этого не изменится. Сейчас я покажу стандартный пример первой программы на js, который стал своего рода традицией посвящения новичков в изучение нового языка программирования. Давайте поприветствуем мир!
1 2 3 4 5 6 7 8 9 10 11
alert( ‘Hello, world!’ );
Если же создаваемый вами проект массивный или скрипт достаточно объемный, то используется внешнее подключение. Для этого прописывается все тот же парный тег, а в нем указывается тип и путь к файлу. Перепишем прошлый пример.
1 2 3 4 5 6 7 8 9 10
И третий способ – это внесение скриптовых элементов в теги. Такой вариант используется для определения событий (например, подключения события, которое срабатывает на щелчок мышки).
1 2 3 4 5 6 7 8 9 10
обработка функции avg_salary() //комментарий
Обратите внимание на конец 5-й строки приложения. Таким образом в js создается комментарий.
Вот теперь я рассказал все, что нужно знать для общего понимания особенностей языка JavaScript и его предназначения. Далее статьи будут касаться конкретных тем разработки на js. Так что подписывайтесь на мой блог и следите за обновлениями. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 1817 раз
Понравилась статья? Поделись с друзьями:
Этот блог уже читают
читай и ты!
Да, хочу читать и Я
Источник: romanchueshov.ru
Как писать чистый код: обзор лучших практик JavaScript
Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!
Перевод статьи «How to Write Clean Code: an Overview of JavaScript Best Practices and Coding Conventions».
Соглашения о написании кода (англ. Coding conventions) это руководства по стилю в программировании. Обычно они затрагивают следующие темы:
- Правила нейминга и объявления переменных и функций.
- Правила использования пробелов, отступов и комментирования.
- Принципы и практики программирования.
В этой статье я расскажу о самых важных соглашениях о написании кода на JavaScript. Если вы будете придерживаться правил из этой статьи, люди будут по-другому воспринимать ваш код. Ваша команда и ваш босс будут благодарны вам за написание чистого кода, но куда важнее, что вы и сами будете себе благодарны. Чистый код нравится всем.
Соглашения о написании кода нацелены на поддержание качества кода, улучшение его читаемости и облегчение поддерживаемости. Эти соглашения могут иметь форму вполне конкретной документации, которой должна следовать команда, или быть просто вашим личным подходом к программированию.
«Чистый код читается, как хорошо написанная проза. Чистый код никогда не затемняет намерения проектировщика; он полон четких абстракций и простых линий передачи управления», – Грэди Буч.
Соглашения о написании кода
Давайте для каждого отдельного пункта будем разбирать, что, собственно, чистым кодом НЕ является. Наши примеры будут касаться JavaScript.
Магические числа
Это жестко прописанные числа, значение которых не ясно. Впервые взглянув на этот код, вы даже не представляете, что это за число такое — 86400.
for(let i = 0; i < 86400; i += 1) < // . >
Будет гораздо лучше, если вы отредактируете такой код, прописав константу:
const SECOND_IN_A_DAY = 86400; for(let i = 0; i < SECOND_IN_A_DAY; i += 1) < // . >
Таким образом любой читатель будет знать, что речь идет о количестве секунд в сутках.
Глубокая вложенность
Если в вашем коде много вложенных циклов или условий, возможно, что-то следует вынести в отдельную функцию.
const exampleArray = [ [ [ ‘value’ ] ] ]; exampleArray.forEach((arr1) => < arr1.forEach((arr2) => < arr2.forEach((el) =>< console.log(el) >) >) >) // output: ‘value’
В данном примере мы можем создать функцию, которая будет перебирать все массивы и возвращать итоговое значение:
const exampleArray = [ [ [ ‘value’ ] ] ]; const retrieveFinalValue = (element) => < if(Array.isArray(element)) < return fetchValue(element[0]); >return element; > // output: ‘value’
Прекращайте писать комментарии
Хотя использование комментариев в коде может быть полезным, это также может служить признаком того, что ваш код не является самопоясняющим.
«Несмотря на то что комментарии по сути не являются ни чем-то плохим, ни чем-то хорошим, они часто используются в качестве «костылей». Код надо писать так, будто комментарии вообще не существуют. Это будет заставлять вас писать как можно более простым и самодокументирующим способом», – Джефф Атвуд.
Код должен говорить сам за себя!
Избегайте крупных функций
Крупный размер функции или даже класса намекает на то, что эта функция делает больше, чем следовало бы. Приведенный пример может показаться простым, но он хорошо иллюстрирует проблему. Эта функция делает намного больше, чем нужно.
const addMultiplySubtract = (a, b, c) => < const addition = a + b + c; const multiplication = a * b * c; const subtraction = a — b — c; return `$$ $`; >
Будет лучше создать несколько разных функций, чтобы разделить логику:
const add = (a, b, c) => a + b + c; const multiply = (a, b, c) => a * b * c; const subtract = (a, b, c) => a — b — c;
Повторы кода
Если вам приходится копировать и вставлять блок кода, это признак того, что данный блок можно выделить в отдельную функцию.
Хорошей иллюстрацией может послужить наш пример с глубокой вложенностью:
const exampleArray = [ [ [ ‘value’ ] ] ]; exampleArray.forEach((arr1) => < arr1.forEach((arr2) => < arr2.forEach((el) =>< console.log(el) >) >) >)
Здесь у нас много повторяющегося кода. Будет гораздо лучше выделить его в отдельную функцию и управлять логикой иначе, с меньшим количеством повторов:
const exampleArray = [ [ [ ‘value’ ] ] ]; const retrieveFinalValue = (element) => < if(Array.isArray(element)) < return fetchValue(element[0]); >return element; >
Другим хорошим примером повтора кода может послужить извлечение данных из параметров:
const getUserCredentials = (user) =>
Используя деструктуризацию объекта (ES6), мы можем просто сделать следующее:
const getUserCredentials = (user) => < const < name, surname, password >= user; >
Имена переменных
Camel case («верблюжий регистр») в JavaScript используется практически всегда. Это стандарт для написания имен переменных и функций.
Суть его в том, что в имени первое слово должно начинаться со строчной буквы (нижний регистр), а все первые буквы последующих слов должны быть заглавными (верхний регистр). Вот несколько примеров:
thisIsARandomCamelCaseName, camelCase, exampleFunctionName.
В общем, вы уловили.
Использование осмысленных имен
getUserData и getUserInfo — довольно нечеткие имена. О каких данных и какой информации идет речь?
Важно, чтобы имена наших функций, методов и переменных выражали их точное значение.
GetUserPost — куда лучшее имя, поскольку здесь мы точно понимаем, что извлекаем.
В случае сомнений выбирайте описательность, а не краткость
Нужно стараться быть как можно более лаконичным. Однако, если суть вашей функции двумя-тремя словами в имени не выразить, лучше описать ее большим количеством слов.
findUserByNameOrEmail и setUserLoggedInTrue лучше, чем findUser.
Если есть более короткий вариант, используйте его
Хотя getUserFromDatabase это очень описательное имя, можно придумать и другое, покороче. Спросите себя, имеет ли смысл добавлять к имени «fromDatabase». Скорее всего, нет, поскольку мы и так предполагаем, что пользователь извлекается из базы данных.
Используйте подходящие по смыслу глаголы
Функции обычно создают, читают, обновляют или удаляют (create, read, update or delete) что-либо. Можно подойти к делу даже более тщательно, чтобы ваши функции создавали, извлекали, устанавливали, добавляли, убирали, сбрасывали и удаляли (create, get, set, add, remove, reset, delete) разные вещи.
Имя функции должно быть глаголом или фразой, содержащей глагол, и должно сообщать о том, что эта функция делает.
При этом следует быть последовательным. Т.е., для извлечения данных всегда использовать get, а не get, retrieve, return и десять тысяч других слов.
В общем, должно быть
getQuestions, getUserPosts, getUsers,
getQuestions, returnUsers, retrieveUsers.
Конечно, все это вариации одних и тех же слов, но вам нужно выбрать для себя какой-то один вариант и придерживаться его постоянно. Например, когда удаляете что-нибудь, используйте или delete, или remove (но не оба слова) во всей вашей программе.
Имена булевых переменных должны хорошо читаться в if-then предложениях
Есть хороший тест для имен булевых переменных. Подставьте такое имя в if-then предложение и прочтите вслух. Если читается, как нормальный текст, все в порядке.
Например, если вы проверяем характеристики машины, какой нейминг кажется вам более удобным:
sedan, sold, green, airbag
isSedan, isSold, isGreen, hasAirbag?
Если мы проверяем эти характеристики, мы можем сделать что-то вроде
car.isSedan, car.isSold, car.hasAirbag (последнее гораздо лучше, чем car.airbags).
Таким образом читатель сразу сможет понять, что мы имеем дело с булевыми значениями.
Такие имена переменных звучат более естественно и облегчают чтение программы.
Используйте существительные для имен классов
Классы не принимают вещи, они и есть вещи. Более конкретно, они являются шаблонами чего-либо. Поэтому следует использовать
class Car =
class MakeCar .
Если бы вы собирались создать машину, вы бы не говорили «создать новую СоздатьМашину», вы бы сказали «создать новую Машину».
Используйте PascalCase для имен классов
Благодаря Pascal case вы сможете с легкостью отличать, что в вашем коде является классом, а что нет.
class Task
class task .
Константы пишите в верхнем регистре
Помните, мы создавали константу с количеством секунд в сутках?
SECOND_IN_A_DAY = 86400
Значение константы это нечто неизменное. Это соглашение уходит корнями в С и не всегда соблюдается в JavaScript.
Имейте в виду, что const и constant (константа) это не одно и то же. Объявление const просто означает, что значение не изменяется путем повторного присваивания. В то время как значение истинной константы это примитивное значение, которое позже не будет меняться.
Также можно сузить это определение до значений, являющихся не только примитивными, но и по самой сути своей фиксированными. Примерами могут служить количество часов в сутках, значение числа пи, названия дней недели.
const HOURS_IN_DAY = 24;
const USER_AGE = 30;
это примитивные значения, которые не будут меняться.
Избегайте однобуквенных имен переменных
В долгосрочной перспективе от слишком коротких имен больше хлопот, чем экономии на нажатиях клавиш.
Имена должны быть краткими и описательными. Переменная, инициализированная глобально, может в конечном итоге использоваться через сотню строк. Если она обозначается одной буквой, легко забыть, что это за переменная.
const dueDate = new Date()
гораздо лучше, чем
const d = new Date();
const query = () => < . >;
тоже гораздо лучше, чем
const q = () => < . >;
Однобуквенные имена можно использовать в маленьких функциях или в качестве индекса в цикле (это нормально):
for(let i = 0; i < 10>; i ++) < // . >
В долгосрочной перспективе следование этим правилам дает много преимуществ. Когда через несколько дней, месяцев или даже лет кто-то возьмется читать ваш код, он его бегло просмотрит и вздохнет или от облегчения, или от разочарования. Какой вариант вы предпочитаете?
Чистый код легко поддерживать в дальнейшем, он хорош для каждого отдельного разработчика и для команды в целом. И его намного легче читать.
Характеристики чистого кода:
- «Он должен быть элегантным: чистый код приятно читать. Чтение этого кода должно вызывать у вас улыбку, как мастерски сделанная музыкальная шкатулка или красивая машина».
- «Чистый код сфокусирован: каждая функция, класс, модуль служат какой-то конкретной цели и не загромождаются окружающими деталями».
- «Чистый код это забота. Кто-то потратил время на то, чтобы сделать свой код простым и упорядоченным. Этот человек уделил должное внимание деталям. Он проявил заботу».
Источник: techrocks.ru
2.13. Приемы программирования на JavaScript
Проще всего начать изучение программирования на каком-либо языке с простых примеров, которые читатель может немедленно проверить. С подачи авторов языка С все современные книги по программированию начинаются с примера печати фразы «Hello world» в разных ее проявлениях («Hello Java», «Hello Perl» и т.п.). Для JavaScript точного аналога такого подхода найти нельзя. Но мы попробуем проиллюстрировать на простых примерах основные приемы программирования.
Аналогом «Hello world» можно считать выдачу сообщения в отдельном окне, которое порождается при нажатии на гипертекстовую ссылку:
Пример 2.9. Программа выдачи простого предупреждения при выборе гипертекстовой ссылки. Схема URL — JavaScript
Самый первый пример JavaScript
Мой первый пример JavaScript
В текст этого документа внедрена гипертекстовая ссылка «Don`t click here» . Любопытно, что будет, если все-таки выбрать?
В данном примере среди текста документа расположена гипертекстовая ссылка «Don`t click here». Если ее выбрать при просмотре (кликнуть мышкой), то на экране появится окно-предупреждение с вопросом: «Do you speak English?».
Генерация этого окна осуществляется специальным методом window.alert, который выполняется при выборе гипертекстовой ссылки. Если быть более точным, то в качестве URL информационного ресурса, который следует загрузить при переходе по данной гипертекстовой ссылке, используется схема JavaScript — расширение спецификации URI для программирования сценариев просмотра гипертекстовых документов World Wide Web. В этом случае выполнение JavaScript-программы происходит при выборе гипертекстовой ссылки, а сам код программы записан как URL.
Рис. 2.1. Выполнение скрипта при выборе гипертекстовой ссылки
Добиться такого же эффекта можно и другим способом, не прибегая к новой схеме URL. Для этой цели можно использовать событие, которое генерируется программой-навигатором при выборе гипертекстовой ссылки — Click.
Пример 2.10. Программа выдачи простого предупреждения по событию Click при выборе гипертекстовой ссылки
Самый первый пример JavaScript
Мой первый пример JavaScript
В текст этого документа внедрена гипертекстовая ссылка «Don`t click here». Любопытно, что будет, если все-таки выбрать?
Обойтись без новой схемы URL здесь также не удается, но она используется только для того, чтобы после выбора гипертекстовой ссылки в рабочем поле программы навигатора не появлялось пустой страницы, или не приходилось загружать вновь старую страницу. Для обработки события используется конструкция onClick, которая реализует обращение к обработчику (handler) данного события, который в свою очередь вызывает выполнение кода, записанного вслед за onClick.
Размещение кода программы на JavaScript непосредственно в тагах HTML является обычным делом, но не всегда бывает удобным. Наиболее часто JavaScript-код выносят в специальный HTML-контейнер SCRIPT(. ). Для того, чтобы продемонстрировать применение этого подхода, видоизменим наш пример следующим образом:
Пример 2.11. Применение контейнера SCRIPT для размещение JavaScript-кода
Самый первый пример JavaScript // —>
Мой первый пример JavaScript
В текст этого документа внедрена гипертекстовая ссылка «Don`t click here». Любопытно, что будет, если все-таки выбрать?