Основы JavaScript

Что такое JavaScript на самом деле?

JavaScript ("JS" для краткости) — это полноценный динамический язык программирования, который применяется к HTML документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.

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

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

• Программные Интерфейсы приложения (API) встроенные в браузеры, обеспечивающие различные функциональные возможности, такие как динамическое создание HTML и установку CSS стилей, захват и манипуляция видеопотоком, работа с веб-камерой пользователя или генерация 3D графики и аудио сэмплов.
• Сторонние API позволяют разработчикам внедрять функциональность в свои сайты от других разработчиков, таких как Twitter или Facebook.
• Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.

Пример "hello world"

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

Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS, и вам придется начать с малого, продолжая изучение небольшими шагами. Для начала, мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, что бы создать "hello world!" пример (стандартный пример в основах программирования).

1. Для начала, перейдите на ваш тестовый сайт и создайте новый файл с именем main.js. Сохраните его в вашей папке scripts.
2. Далее, перейдите в ваш index.html файл и введите следующий тег в новую строку прямо перед закрывающим тегом </body>:

   <script src="scripts/main.js"></script>

3. Он основном делает ту же работу, что и элемент <link> для CSS — добавляет JavaScript на страницу, позволяя ему взаимодействовать с HTML (и CSS, и чем-нибудь ещё на странице).
4. Теперь добавьте следующий код в файл main.js:

   var myHeading = document.querySelector('h1');
   myHeading.textContent = 'Hello world!';

5. Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите index.html в браузере. Вы должны увидеть что-то вроде этого:

Что произошло?

Итак, ваш заголовок текста был изменен на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции querySelector(), захватив ссылку на наш заголовок и сохранив ее в переменной названной myHeading. Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.

После этого, мы устанавливаем значение переменной myHeading в textContent свойство (которое представляет собой контент заголовка) "Hello world!".

Ускоренный курс по основам языка

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

Переменные

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

var myVariable;

После объявления переменной, вы можете присвоить ей значение:

myVariable = 'Bob';

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

var myVariable = 'Bob';

Вы можете получить значение, просто вызвав переменную по имени:

myVariable;

После установки переменной значения, вы можете изменить его позже:

var myVariable = 'Bob';
myVariable = 'Steve';

Обратите внимание, что переменные имеют разные типы данных:

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

Комментарии

Вы можете поместить комментарии в JavaScript код, так же как вы делали это в CSS:

/*
Всё, что находится тут комментарий.
*/

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

// Это комментарий

Операторы

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

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

Условия

Условие — это кодовая структура, которая позволяет вам проверить истинно ли выражение, а затем выполнить другой код в зависимости от результата. Самая распространенная форма условия называется, if ... else. Например:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');
} else {
  alert('Awwww, but chocolate is my favorite...');
}

Выражение внутри if ( ... ) — это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную iceCream со строкой chocolate и увидеть равны ли они. Если это сравнение возвращает true, выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции else.

Функции

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

1. var myVariable = document.querySelector('h1');

2. alert('hello!');

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

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

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

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

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Попробуйте запустить вышеупомянутую функцию в консоли, затем попробуйте использовать вашу новую функцию несколько раз, например:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

События

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

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем HTML элемент и устанавливаем ему обработчик свойства onclick анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить, когда происходит событие клика.

Обратите внимание, что

document.querySelector('html').onclick = function() {};

эквивалентно

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

Просто, так короче.

Прокачаем пример нашего веб-сайта

Теперь, когда мы прошли некоторые основы JavaScript, давайте добавим несколько крутых несложных функций в пример нашего сайта, чтобы дать вам некоторое представление о принципах работы.

Добавление смены изображения

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

1. В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.
2. Сохраните изображение в вашу папку images.
3. Перейдите в ваш файл main.js и введите следующий JavaScript. (Если ваш "hello world" JavaScript по-прежнему существует, удалите его.)

   var myImage = document.querySelector('img');
   
   myImage.onclick = function() {
       var mySrc = myImage.getAttribute('src');
       if(mySrc === 'images/firefox-icon.png') {
         myImage.setAttribute ('src','images/firefox2.png');
       } else {
         myImage.setAttribute ('src','images/firefox-icon.png');
       }
   }

4. Сохраните все файлы и загрузите index.html в браузере. Теперь, когда вы щёлкните по изображению, оно должно измениться на другое!

Итак, мы сохраняем ссылку на наш элемент изображения в переменной myImage. Далее, мы создаём этой переменной обработчик события onclick с анонимной функцией. Теперь, каждый раз, когда на этот элемент изображения щёлкнут:

1. Мы получаем значение из атрибута src изображения.
2. Мы используем условие для проверки значения src, равен ли путь к исходному изображению:
   1. Если это так, мы меняем значение src на путь ко 2 изображению, заставляя другое изображение загружаться внутри элемента <image>.
   2. Если это не так (значит, оно должно было уже измениться), мы меняем значение src, возвращаясь к первоначальному пути изображения, каким он был изначально.

Добавление персонального приветственного сообщения

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

1. В index.html, добавьте следующую строку перед элементом <script>:

   <button>Change user</button>

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

   var myButton = document.querySelector('button');
   var myHeading = document.querySelector('h1');

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

   function setUserName() {
     var myName = prompt('Please enter your name.');
     localStorage.setItem('name', myName);
     myHeading.textContent = 'Mozilla is cool, ' + myName;
   }

   Эта функция содержит функцию prompt(), которая вызывает диалоговое окно, немного похожее на alert() кроме того, что prompt() просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает OK. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием localStorage, которое позволяет нам сохранять данные в браузере и извлекать их позднее. Мы используем функцию setItem() из localStorage для создания и хранения данных в свойстве под названием 'name', и устанавливаем это значение в переменную myName, которая содержит имя введенное пользователем. В конце мы устанавливаем textContent заголовку в виде строки и имени пользователя.
4. Затем добавляем блок if ... else, чтобы мы могли вызвать код инициализации, приложение устанавливает выполняет его, когда оно впервые загружается:

   if(!localStorage.getItem('name')) {
     setUserName();
   } else {
     var storedName = localStorage.getItem('name');
     myHeading.textContent = 'Mozilla is cool, ' + storedName;
   }

   Этот первый блок использует оператор отрицания (логическое НЕ) чтобы проверить, существуют ли данные в пункте name. Если нет, то функция setUserName() запускается для его создания. Если это так (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохраненное имя, используя getItem() и устанавливаем textContent заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри setUserName().
5. В заключение, установим обработчик события onclick на кнопку, чтобы при щелчке по ней запускалась функция setUserName(). Это позволяет пользователю задавать новое имя, всякий раз, когда он захочет, нажав на кнопку:

   myButton.onclick = function() {
     setUserName();
   }
   

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

Заключение

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

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

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