Перейти к содержимому

Как изучать javascript с нуля

  • автор:

Как изучить JavaScript с нуля?

Как изучить JavaScript с нуля?

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

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

Не торопитесь

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

Основы JavaScript

База все глава – это девиз практически всех сфер программирования. Из-за огромной популярности JS, не придётся долго искать информацию по этому языку. Для новичков предложу небольшую выборку полезных материалов:

  • MDN’s JavaScript Guide . В учебнике представлены все ключевые данные для начала ознакомления с языком. После его изучения, уже можно создавать небольшие скрипты;
  • You Don’t Know JS – это бестселлер Кайла Симпсона. С его помощью уже удастся получить углублённые познания в языке;
  • CodeCademy . Является платформой для практичного изучения JS. Новичку помогает лучше понять саму концепцию языка;
  • Eloquent JavaScript . Считается книгой обязательной к прочтению всем разработчикам на JS. С неё начинать не советую, лучше предварительно обзавестись некоторым опытом и базовыми познаниями в JS или других языках;
  • Free Code Camp – сообщество разработчиков. За счёт ресурса удаётся поддерживать интерес к программированию и получается почувствовать соревновательный дух. Метод пригоден к использованию даже новичкам.

Во время ознакомления с этой информацией уже будет сформирована прочная база знаний. Сейчас пришло время заняться разработкой первых программ на JavaScript. Получив понимание алгоритмов работы языка, появится больший интерес и заинтересованность JS. Новичку советую дотянуть хотя бы до этого момента, затем уже принимать решение о дальнейшем направлении разработок. Усердный труд обязательно приведёт к успеху.

Если перечисленные материалы не по силам и в одиночку справиться с поставленной целью не удастся, есть масса тематических форумов. Одним из лучших является Stack Overflow . Не стоит забывать и о друзьях, они могут помочь «стать на ноги». Всегда задавайте себе вопросы и старайтесь отвечать на них, это помогает понять цель усердного труда.

Что дальше после основ?

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

Многие останавливаются и не желают углублённо изучать JS, а всё из-за сложности материала. Несмотря на трудности в изучении, небольшими шагами он поддастся. Опять же, нужно лишь приложить усилия.

Чтобы начать активное движение дальше, стоит изучить следующие книги:

  • Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript — глубокая книга, рассматривающая 68 подходов к созданию кода, всё это иллюстрируется на примерах. Помогает подобрать собственный стиль под различные проекты;
  • JavaScript — The Good Parts . Является основой JS, хотя и несколько устарела. Помогает изучить принципы написания эффективного и доступного для понимания кода;
  • JavaScript Design Patters – это помощник, вводящий в мир шаблонов. Простым, доступным языком используется о достоинствах шаблонов и способах использования;
  • Test-Driven JavaScript Development является лучшей книгой в сфере тестирования программ на JS.

Как преодолеть разочарование

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

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

Оптимальный путь изучения JS

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

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

Академия вёрстки Артема Исламова предлагает всем желающим вступить на 30 дневный марафон , стоимость которого лишь 1299 рублей . Полноценные качественные курсы по хорошей цене сейчас трудно найти. Они же предлагают курс, который обойдётся не более 43 рублей за день обучения.

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

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

Занятия длятся примерно от 15 и до 25 минут . Выбрать время изучения нового материала можете вы сами, так как все уроки будут доступны для просмотра в любое время суток. Марафон насыщен практическими заданиями, а также теорией, которая позволит вам уже через одну неделю после старта создать ваш первый веб сайт на HTML и CSS.

Больше интересных новостей

5 лучших JavaScript фреймворков и библиотек

5 лучших JavaScript фреймворков и библиотек

Чем отличаются языки программирования, сценариев и разметки?

Чем отличаются языки программирования, сценариев и разметки?

Python для финансов, и как его правильно применять?

Python для финансов, и как его правильно применять?

Факторы, которые мешают junior’у добиться успеха

Факторы, которые мешают junior’у добиться успеха

Уроки Javascript

Уроки JavaScript для начинающих / #1 – Введение в язык JS. Что к чему?

Уроки JavaScript для начинающих / #1 – Введение в язык JS. Что к чему?

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

Видеоурок

Полезные ссылки:

  • Курс по изучению HTML ;
  • Курс по изучению CSS ;
  • Практикум по JavaScript ;
  • Текстовый редактор Atom .
Информация про JavaScript

JavaScript является преимущественно клиентским языком, обычно использующимся для работы на стороне клиента. С его помощью можно разрабатывать приложения с самым разнообразным функционалом. Это может быть: аналог механических часов, различная анимация, графические эффекты и многое другое. Ничего не мешает создать практически все веб-приложение на JS.

В Интернете зачастую можно встретить название « javascripts », что является неверным названием языка. Никакой буквы «s» в конце слова здесь нет. Единственными верными названиями языка является «javascript», «js» или же более народная версия «ява скрипт».

Сегодня сложно переоценить роль JavaScript в вебе. Согласно статистике w3techs , сегодня свыше 97% сайтов применяют JS. Оставшиеся 3% — это преимущественно сайты визитки и одностраничники. Невероятная популярность языка делает его одним из самых желанных для изучения и выгодных в плане дальнейшего трудоустройства.

История языка

Язык основан в 1995 году компанией Netscape. Изначально предназначался в роли языка сценариев для их браузера Navigator 2. В начале пути носил название LiveScript. Разработчики воспользовались волной популярность Java и сменили название на JavaScript.

Такое решение запутало многих и даже по сей день их часто путают начинающие разработчики. Многие заявляют, что это одинаковые языки или имеют малозначимые отличия. Это совсем не так, JS и Java – совсем разные языки. Единственная схожесть в них – название.

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

По мере развития веба, вместе с релизом Node.js , JavaScript получил карт-бланш на активное развитие множества функций. Сегодня JS предоставляет намного больше возможностей для разработчика, чем когда-либо.

Сейчас JavaScript может использоваться и в качестве серверного языка. Прежде JS всегда рассматривался исключительно в качестве клиентского языка, работающего исключительно в браузере пользователя. Для работы с сервером приходилось пользоваться чем-то вроде Java , PHP , ASP.NET , Ruby . За счёт Node.js появилась возможность оперировать запросами на сервере посредством JS.

Несмотря на наличие возможности реализовать серверную часть на Node JS, большая часть веба использует для серверного языка PHP.

Распространение JS

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

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

Многое из того, что раньше называли фантастикой, сегодня успешно реализуется в JavaScript. Это особенно наглядно видно в популярном направлении программирования под IoT (интернет вещей). Таким образом JS можно успешно применять для разработки программ под все существующие умные устройства, поддерживающие работу с интернетом. Сегодня JS встречается практически везде, куда только добралось IT.

Версии языка

Ещё во время появления языка, браузеры Netscape и IE создали несколько отличающихся реализаций языка. Для унификации всех реализаций и восстановления общего знаменателя, разработали стандарт ECMAScript (управление стандартизацией взяла на себя ECMA). Если где-то увидите термин ECMAScript – это взаимозаменяемый синоним с JavaScript.

Уже сегодня ECMA разработала пару стандартов для JS, они удачно отражают прогресс в разработке самого языка. На сегодня актуальным считается ECMAScript 6 версии от 2015 года. Тем не менее многие браузеры ещё далеки от полной реализации данного стандарта. На завершение его внедрения может уйти ещё несколько лет. В силу этой причины довольно часто рассматривается стандарт ES5, как тот, который полностью поддерживается современными браузерами.

Инструменты разработки

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

Также хорошим редактором с поддержкой большинства операционных систем является Visual Studio Code . Он способен работать в MacOS, Windows и Linux. По возможностям этот программный продукт в разы превосходит Atom или же Notepad++.

JavaScript можно записывать и в ряде других программ: WebStorm, Netbeans и даже Notepad++. За счёт сред разработки код создается значительно быстрее и проще.

План курса

За курс мы будем изучать Javascript с нуля для начинающих . Начать курс js для начинающих нужно с переменных, а далее постепенно изучать более сложные конструкции.

В ходе изучения javascript (или же Ява скрипт) мы изучим все основные концепции, научимся работать с HTML при помощи языка JS, а также разработаем несколько мини проектов. К концу курса у вас будет достаточно знаний чтобы начать использовать Java Script внутри ваших проектов.

Дополнительные курсы

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

Также на сайте есть более углубленная программа по изучению разработки веб сайтов. Ознакомится с программой обучения по Front-end можно по этой ссылке и с программой обучения Full Stack по этой ссылке .

Книга «JavaScript с нуля до профи»

image

Привет, Хаброжители!

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

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

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

Для кого эта книга

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

Объектно-ориентированное программирование

Прежде чем мы начнем погружаться прямиком в увлекательные классы, давайте кратко поговорим об объектно-ориентированном программировании (ООП). ООП — очень важная парадигма программирования, в которой код структурируется в виде объектов, что приводит к более удобному обслуживанию и многократному использованию кода. Работа с ООП учит вас по-настоящему продумывать всевозможные ключевые моменты в объектах, объединив свойства таким образом, чтобы их можно было сгруппировать в схеме, называемой классом, который, в свою очередь, может наследовать свойства родительского класса.

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

Данный подход очень важен для Java.NET и других классических объектно-ориентированных способов написания кода. JavaScript не обязательно вращается вокруг объектов. Они нам понадобятся, и мы будем их использовать, но они, так сказать, не являются звездами нашего кода.

Классы и объекты

Кратко напомним: объекты представляют собой набор свойств и методов. Мы рассматривали их в главе 3. Свойства объекта должны иметь разумные имена. Так, например, если у нас есть объект person (человек), у него должны быть свойства с названиями age (возраст) и lastName (фамилия) и заданными значениями. Перед вами пример объекта:

let dog = < dogName: "JavaScript", weight: 2.4, color: "brown", breed: "chihuahua" >;

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

class ClassName < constructor(prop1, prop2) < this.prop1 = prop1; this.prop2 = prop2; >> let obj = new ClassName("arg1", "arg2");

Код определяет класс с именем ClassName, объявляет переменную obj и делает ее новым экземпляром объекта. Приводятся два аргумента, они будут использоваться конструктором для инициализации свойств. Как вы заметили, параметры для конструктора и свойства класса (prop1 и prop2) носят одинаковые названия. Свойства класса можно распознать по ключевому слову this перед ними. Ключевое слово this относится к объекту, которому принадлежит, поэтому является первым свойством экземпляра ClassName.

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

function Dog(dogName, weight, color, breed) < this.dogName = dogName; this.weight = weight; this.color = color; this.breed = breed; >let dog = new Dog("Jacky", 30, "brown", "labrador");

Пример с собакой также можно реализовать с использованием синтаксиса класса. Выглядит это так:

class Dog < constructor(dogName, weight, color, breed) < this.dogName = dogName; this.weight = weight; this.color = color; this.breed = breed; >> let dog = new Dog("JavaScript", 2.4, "brown", "chihuahua");

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

console.log(dog.dogName, "is a", dog.breed, "and weighs", dog.weight, "kg.");

Результат вывода на экран:

JavaScript is a chihuahua and weighs 2.4 kg.

В следующем разделе мы погрузимся во все детали классов.

Классы

Вы можете задаться вопросом: если классы делают то же самое, что и простое определение объекта, зачем они вообще нужны? Ответ заключается в том, что классы, по сути, являются схемами для объектов. Если нужно создать 20 записей собак, придется писать гораздо меньше кода, когда у нас есть класс dog. При описывании каждого объекта по отдельности нам придется каждый раз указывать имена всех свойств. И можно легко сделать опечатку или неправильно прописать свойство. Классы пригодятся в подобных ситуациях.

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

Давайте рассмотрим различные элементы классов.

Метод constructor

Особый метод constructor используется для инициализации объектов с помощью классов. В классе может быть только один метод constructor. Он содержит свойства, которые будут установлены при инициализации класса.

Ниже вы можете рассмотреть пример использования метода constructor при создании класса Person:

class Person < constructor(firstname, lastname) < this.firstname = firstname; this.lastname = lastname; >>

Под внешней оболочкой JavaScript инициализирует специальную функцию, основанную на методе constructor. Эта функция получает имя класса и создает объект с заданными свойствами. С помощью данной специальной функции вы можете прописывать экземпляры (объекты) класса.

А теперь перед вами код, создающий новый объект на основе класса Person:

let p = new Person("Maaike", "van Putten");

Именно слово new дает понять JavaScript, что требуется искать специальную функцию конструктора в классе Person и создавать новый объект. Конструктор вызывается и возвращает экземпляр объекта person с заданными свойствами. Этот объект сохраняется в переменной p.

Если использовать новую переменную p для логирования, можно увидеть, что свойства действительно установлены:

console.log("Hi", p.firstname);

Так будет выглядеть результат:

Hi Maaike

Как думаете, что произойдет, если создать класс без каких-либо свойств? Давайте выясним:

let p = new Person("Maaike");

Многие языки программирования выдали бы ошибку, но не JavaScript. Он просто присвоит оставшимся свойствам значение undefined. Давайте понаблюдаем за тем, что происходит, логируя результат:

console.log("Hi", p.firstname, p.lastname);

В консоли отобразится следующая запись:

Hi Maaike undefined

В методе constructor вы можете задать значения по умолчанию. Реализовать это можно следующим образом:

constructor(firstname, lastname = "Doe")

В результате на экран будет выведено не Hi Maaike undefined, а Hi Maaike Doe.

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

1. Создайте класс Person, включающий конструктор для firstname и lastname.
2. Создайте переменную и присвойте значение новому объекту Person, используя имя и фамилию вашего первого друга.
3. Теперь добавьте вторую переменную с именем второго друга, используя его имя и фамилию.
4. Выведите на экран обе записи с приветствием hello.

Методы

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

class Person < constructor(firstname, lastname) < this.firstname = firstname; this.lastname = lastname; >greet() < console.log("Hi there! I'm", this.firstname); >>

Вызвать метод greet для объекта Person можно следующим образом:

let p = new Person("Maaike", "van Putten"); p.greet();
Hi there! I'm Maaike

В классе можно указывать любое количество методов. В данном примере мы используем свойство firstname. Мы вызываем его с помощью this.property. Для чело­века с другим значением firstname, например Rob, на экран будет выведено следующее:

Hi there! I'm Rob

Методы, как и функции, могут принимать параметры и возвращать результаты:

class Person < constructor(firstname, lastname) < this.firstname = firstname; this.lastname = lastname; >greet() < console.log("Hi there!"); >compliment(name, object) < return "That's a wonderful " + object + ", " + name; >>

Функция compliment сама не выводит никаких значений, поэтому мы логируем ее:

let compliment = p.compliment("Harry", "hat"); console.log(compliment);

Результат будет следующим:

That's a wonderful hat, Harry

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

Получите полное имя своего друга.

1. Используйте класс Person из практического занятия 7.1, добавив метод с названием fullname, который будет возвращать совокупное значение firstname и lastname.
2. Создайте значения для person1 и person2, используя фамилии и имена друзей.
3. Используя метод fullname внутри класса, верните полное имя одного или обоих человек.

Свойства

Свойства (иногда называемые полями) содержат данные класса. В конструкторах мы уже видели один тип свойств:

class Person < constructor(firstname, lastname) < this.firstname = firstname; this.lastname = lastname; >>

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

let p = new Person("Maaike", "van Putten"); console.log("Hi", p.firstname);

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

Вот как добавить свойства, недоступные извне. Ставим перед ними символ #:

class Person < #firstname; #lastname; constructor(firstname, lastname) < this.#firstname = firstname; this.#lastname = lastname; >>

В данный момент к свойствам firstname и lastname доступа извне нет. Если попробуем ввести:

let p = new Person("Maria", "Saga"); console.log(p.firstname);
undefined

Если бы мы хотели убедиться, что можем создавать объекты только с именами, начинающимися на букву М, мы могли бы немного изменить конструктор:

constructor(firstname, lastname) < if(firstname.startsWith("M"))< this.#firstname = firstname; >else < this.#firstname = "M" + firstname; >this.#lastname = lastname; >

Теперь при попытке ввести значение firstname, которое не начинается на М, код добавит М в начало. Так, например, в консоли значение следующего имени будет отображено как Mkay:

let p = new Person("kay", "Moon");

Это очень простой пример проверки. На данный момент мы вообще не можем получить доступ к свойству извне класса после конструктора. Оно доступно только изнутри класса. Вот тут-то и вступают в игру геттеры и сеттеры.

Геттеры и сеттеры

Геттеры и сеттеры — это особые свойства, которые можно использовать для получения данных из класса и записи полей данных в классе. Геттеры и сеттеры являются вычисляемыми свойствами. Можно сказать, что они даже больше похожи на свойства, чем на функции. Мы называем их аксессорами (accessors). Геттеры и сеттеры выглядят как функции, потому что после них ставят скобки (()), но функциями они не являются!

Аксессоры начинаются с ключевых слов get и set. Хорошей практикой считается максимально закрывать поля и предоставлять доступ к ним с помощью геттеров и сеттеров. Благодаря этому свойства не могут быть заданы извне без контроля самого объекта. Подобный принцип называется инкапсуляцией. Класс инкапсулирует (помещает) данные и объект под контроль собственных полей.

Вот как это реализовать:

class Person < #firstname; #lastname; constructor(firstname, lastname) < this.#firstname = firstname; this.#lastname = lastname; >get firstname() < return this.#firstname; >set firstname(firstname) < this.#firstname = firstname; >get lastname() < return this.#lastname; >set lastname(lastname) < this.#lastname = lastname; >>

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

let p = new Person("Maria", "Saga"); console.log(p.firstname);

Результат вывода на экран:

Maria

Мы создали новый объект Person с именем Maria и фамилией Saga. На выходе отображается имя, что стало возможным только благодаря наличию у нас средства доступа — геттера. Мы также можем задать значение чему-то другому, используя сеттер. Давайте обновим значение имени так, что теперь это будет не Maria, а Adnane:

p.firstname = "Adnane";

На данный момент в сеттере не происходит ничего особенного. Мы могли бы выполнить такую же проверку, как и в предыдущем конструкторе, например:

set firstname(firstname) < if(firstname.startsWith("M"))< this.#firstname = firstname; >else < this.#firstname = "M" + firstname; >>

Теперь код проверит, начинается ли firstname с буквы M. Если да, то значение firstname обновится до значения параметра. Если нет, код добавит M перед параметром.

Обратите внимание, что мы не обращаемся к firstname так, как если бы это была функция. Если вы допишете круглые скобки (()), то получите сообщение об ошибке, говорящей, что это не функция.

Наследование

Наследование — одна из ключевых концепций ООП. Согласно ей классы могут иметь дочерние классы, которые наследуют свойства и методы родительского класса. Например, если вам понадобятся все виды транспортных средств в приложении, вы можете задать класс с названием Vehicle, в котором укажете некоторые общие свойства и методы объектов. Для продолжения можете создавать дочерние классы, основанные на классе Vehicle, например boat, car, bicycle и motorcycle.

Вот сильно упрощенная версия класса Vehicle:

class Vehicle < constructor(color, currentSpeed, maxSpeed) < this.color = color; this.currentSpeed = currentSpeed; this.maxSpeed = maxSpeed; >move() < console.log("moving at", this.currentSpeed); >accelerate(amount) < this.currentSpeed += amount; >>

Здесь представлены два метода в классе Vehicle: move и accelerate. Это может быть класс Motorcyle, наследуемый от данного класса с использованием ключевого слова extends:

class Motorcycle extends Vehicle < constructor(color, currentSpeed, maxSpeed, fuel) < super(color, currentSpeed, maxSpeed); this.fuel = fuel; >doWheelie() < console.log("Driving on one wheel!"); >>

С помощью ключевого слова extends мы указываем, что определенный класс является дочерним по отношению к другому. В данном случае Motorcycle — дочерний класс Vehicle. Это значит, что у нас будет доступ к свойствам и методам класса Vehicle в классе Motorcycle. Сюда же мы добавили особый метод doWheelie() для описания езды на заднем колесе. Включать данную возможность в класс Vehicle не было смысла, потому что она специфична для определенных транспортных средств.

Слово super в конструкторе вызывает конструктор родителя — в данном случае конструктор Vehicle. Это гарантирует, что поля от родителя также заданы и что методы доступны без необходимости делать что-либо еще: они наследуются автоматически. Вызов super() не является обязательным, но вы должны использовать это ключевое слово при нахождении в классе, который наследуется от другого класса — иначе получите ReferenceError.

В классе Motorcycle у нас есть доступ к полям класса Vehicle, поэтому следующая конструкция будет работать:

let motor = new Motorcycle("Black", 0, 250, "gasoline"); console.log(motor.color); motor.accelerate(50); motor.move();

В результате вы увидите:

Black moving at 50

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

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

Прототипы

Прототипы — это механизмы JavaScript, которые делают возможным существование объектов.

Если при создании класса никакие детали специально не уточняются, объекты наследуются от прототипа Object.prototype. Среди всех встроенных классов JavaScript, которые мы можем применять, этот довольно сложный. Нет необходимости изучать, как он реализован. Его можно считать базовым объектом, который всегда находится на вершине дерева наследования, а значит, всегда присутствует в наших объектах.

Для всех классов доступно свойство prototype, и оно всегда называется «прототип». Вызвать его можно так:

ClassName.prototype

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

class Person < constructor(firstname, lastname) < this.firstname = firstname; this.lastname = lastname; >greet() < console.log("Hi there!"); >>

И вот как добавить функцию в этот класс, используя prototype:

Person.prototype.introduce = function () < console.log("Hi, I'm", this.firstname); >;

Свойство prototype содержит в себе все методы и свойства объекта. Таким образом, добавление функции в prototype — это добавление функции в класс. Вы можете использовать prototype, чтобы добавлять свойства или методы объекту (как мы сделали выше с помощью функции introduce). Данный способ применим и для свойств:

Person.prototype.favoriteColor = "green";

После их можно вызывать из экземпляра класса Person:

let p = new Person("Maria", "Saga"); console.log(p.favoriteColor); p.introduce();

Мы получим следующий результат:

green Hi, I'm Maria

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

Следовательно, методы и свойства, определенные через prototype, точно такие же, как если бы они были определены в классе. Это означает, что, перезаписывая их для определенного экземпляра, вы не перезаписываете методы и свойства всех экземпляров. Например, если бы у нас был второй объект Person, он мог бы перезаписать значение favoriteColor, и это не изменило бы значение любимого цвета для объекта со значением firstname, равным Maria.

Прототипы не следует применять, если у вас есть контроль над кодом класса и вы хотите изменить его навсегда, — в таком случае просто измените класс. Однако с помощью прототипов вы можете расширить существующие объекты, в том числе с применением условий. Важно также знать, что встроенные объекты JavaScript имеют прототипы и наследуют от Object.prototype. Не меняйте данный прототип, иначе это повлияет на работу JavaScript.

Напишите класс, содержащий свойства для разных животных — в том числе звуки, издаваемые каждым видом — и создайте два (или более) объекта.

1. Создайте метод, который выводит на экран название этого животного и звук, который оно издает.
2. Добавьте прототип с другим действием для животного.
3. Выведите весь объект животного на экран.

Об авторах

Лоренс Ларс Свекис является экспертом в области инновационных технологий, имеет широкий спектр теоретических знаний и реальный опыт в области веб-разработки. Начиная с 1999 года участвует в различных веб-проектах, как крупных, так и небольших. Преподает с 2015 года и обожает воплощать идеи в онлайн-жизнь. Для Лоренса учить и помогать людям — потрясающая возможность, поскольку ему нравится делиться знаниями с обществом.

Майке ван Путтен известна страстью к обучению и разработке программного обеспечения, стремлением сопровождать людей на их пути к новым высотам в карьере. К числу ее любимых языков относятся JavaScript, Java и Python. Как разработчик участвует в проектах по созданию программного обеспечения и как тренер — в различных сферах, начиная с IT для «чайников» и заканчивая продвинутыми темами для опытных специалистов. Любит создавать образовательный онлайн-контент на различных платформах, предназначенный для широкой аудитории.

Роб Персиваль — уважаемый веб-разработчик и преподаватель Udemy с аудиторией более 1,7 миллиона учеников. Более 500 000 из них приобрели его «Полный курс веб-разработчика 2.0», а также курсы разработчиков Android и iOS.

О научном редакторе

Крис Минник — активный автор, блогер, тренер, спикер и веб-разработчик. Его компания WatzThis? занимается поиском лучших способов обучения новичков навыкам обращения с компьютером и программированию.

Крис более 25 лет трудится full-stack-разработчиком и более десяти лет — преподавателем. Обучает веб-разработке, ReactJS и продвинутому JavaScript во многих крупнейших мировых компаниях, а также в публичных библиотеках, коворкингах и на личных встречах.

Крис Минник — автор и соавтор более десятка технических изданий для взрослых и детей, включая React JS Foundations, HTML and CSS for Dummies («HTML и CSS для чайников»), Coding with JavaScript for Dummies («JavaScript для чайников»), JavaScript for Kids, Adventures in Coding и Writing Computer Code.

По факту оплаты бумажной версии книги на e-mail высылается электронная книга.
Для Хаброжителей скидка 25% по купону — JavaScript

12 книг по JavaScript, чтобы выучить язык с нуля и упорядочить знания

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

12 книг по JavaScript, чтобы выучить язык с нуля и упорядочить знания

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

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

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

Руководство охватывает стандарты ECMAScript 5 и HTML5. Многие главы переписаны заново, другие дополнены новой информацией, появились и новые главы с описанием библиотеки jQuery и поддержки JavaScript на стороне сервера.

Джон Дакетт «Javascript и jQuery. Интерактивная веб-разработка»

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

Алексей Васильев «JavaScript в примерах и задачах»

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

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

Использование шаблонов при программировании на языке JavaScript имеет свои особенности. Некоторые из них, разработанные с позиций языков со строгим контролем типов, таких как C++ и Java, не могут непосредственно применяться в языках с динамической типизацией, таких как JavaScript. Для таких шаблонов в языке JavaScript имеются более простые альтернативы.

Разработчики серверных, клиентских или настольных приложений на JavaScript нередко сталкиваются с проблемами, связанными с объектами, функциями, наследованием и другими особенностями этого языка. Какие же приемы разработки приложений на JavaScript являются наиболее удачными? Данная книга дает ответ на этот вопрос, предлагая большое количество различных шаблонов программирования на JavaScript, таких как «единственный объект» (singleton), «фабрика» (factory), «декоратор» (decorator) и другие. Можно сказать, что они являются не только методами решения наиболее типичных задач разработки ПО, но и заготовками решений для целых категорий таких задач.

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

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

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

Мартин Фаулер «Рефакторинг кода на JavaScript: улучшение проекта существующего кода»

Более двадцати лет опытные программисты во всем мире использовали книгу Мартина Фаулера «Рефакторинг», когда им нужно было улучшить проект существующего кода, повысить удобство сопровождения программного обеспечения или облегчить понимание существующего кода. Это новое издание было полностью обновлено, чтобы отразить важные изменения в области программирования. Второе издание книги содержит обновленный каталог рефакторингов и включает примеры кода на JavaScript, а также новые функциональные примеры, демонстрирующие рефакторинг без классов.

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

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

Дуглас Крокфорд «Как устроен JavaScript»

Игра в программирование без правил и ограничений. Большинство языков программирования выросли из древней парадигмы, порожденной еще во времена Фортрана. Гуру Javascript — Дуглас Крокфорд — выкорчевывает эти засохшие корни, позволяя нам задуматься над будущим программирования, перейдя на новый уровень понимания требований к Следующему Языку (The Next Language). Автор начинает с основ: имен, чисел, логических значений, символов и другой базовой информации. Вы узнаете не только о проблемах и трудностях работы с типами в JavaScript, но и о том как их можно обойти. Затем вы приступите к знакомству со структурами данных и функций, чтобы разобраться с механизмами, лежащими в их основе, и научитесь использовать функции высшего порядка и объектно-ориентированный стиль программирования без классов.

Кайл Симпсон « Замыкания и объекты»

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

Как и в других книгах серии «Вы не знаете JS», здесь показаны нетривиальные аспекты языка, от которых программисты JavaScript предпочитают держаться подальше. Вооружившись этими знаниями, вы достигнете истинного мастерства JavaScript.

Владимир Дронов «JavaScript. Народные советы»

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

Кит Вуд «Расширение библиотеки jQuery»

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

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

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

Бер Бибо, Иегуда Кац «jQuery. Подробное руководство по продвинутому JavaScript»

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

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

Danny Goodman «JavaScript Bible»

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *