На чем писать javascript

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

function название(аргументы) < // полезная работа >

Например, эта функция выводит в консоль текущее время и дату:

function printCurrentDate() < var objToday = new Date(), weekday = new Array('Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'), dayOfWeek = weekday[objToday.getDay()], dayOfMonth = objToday.getDate(), months = new Array('января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'), curMonth = months[objToday.getMonth()], curYear = objToday.getFullYear(), curHour = objToday.getHours() >12 ? objToday.getHours() - 12 : (objToday.getHours()

А чтобы выполнить всё это хозяйство, достаточно написать в консоли или вызвать в коде одну команду:

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

Что переводится как «Исполни функцию printCurrentDate без дополнительных аргументов, а её результат передай команде alert».

Кстати, как только функция выполняет команду return, она отдаёт нужные данные и перестаёт выполняться.

Аргументы функции. У функции могут быть аргументы: это способ сообщить что-то в функцию. Например, у вас может быть функция для проверки логина и пароля. Чтобы проверить их, вам нужно передать в функцию логин и пароль. Вы указываете при объявлении функции, что вам нужно передать в неё эти два параметра, и называете их по именам. Дальше внутри функции вы можете использовать эти имена. А при вызове функции вам нужно вместо имён передать уже настоящие данные.

Вот мы определили функцию, в которую передаются два параметра, а потом они проверяются:

function checkUserCredentials(username, password) /*тут вы проверяете переменные username и password, например так:*/
if (username == secret1 && password == secret2) return true;
>else console.log('Неверный логин или пароль');
return false;
>
>

А теперь вызываем эту функцию, но уже с нужными данными:

var isValidUser = checkUserCredentials('admin','qwerty');

Вместо конкретных строк admin и qwerty можно передать в функцию значения других переменных, а также целые объекты, массивы и что угодно ещё. Представьте, что это такое окошко, через которое вы передаёте что-то в функцию.

Как обратиться к чему-то на странице

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

document.getElementById() — находит элемент по его ID. Например, если у нас есть абзац

Это текст абзаца

, то обратиться к нему можно так:

var s = document.getElementById("radio");

После этого через переменную s можно работать с этим конкретным абзацем.

Кроме document.getElementById() ещё применяют:

• document.getElementsByName() — поиск по имени элемента;
• document.getElementsByClassName — по названию класса;
• document.querySelector() — возвращает первый элемент с указанным CSS-стилем;
• document.querySelectorAll() — возвращает все элементы с указанным CSS-стилем.

Как вставить чужой код и вызвать его

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

1. Вы пишете в поисковой системе, что вам нужно сделать.
2. Скорее всего, вы попадёте на сайт StackOverflow.
3. Там вы увидите несколько вариантов решения вашей проблемы с готовым кодом.
4. Вы возьмёте этот код и вставите в свой.
5. Возможно, он заработает.

Чтобы код заработал, помните о таких нюансах:

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

function solveMyProblem() /*тут непонятный код*/
>

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

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

document.getElementById("myElement");

Вместо myElement может быть что-то другое. Вот на место этого слова нужно вписать айдишник нужного вам объекта на странице. Если у нужного объекта нет айдишника, его нужно прописать. Например:

.

Как повесить событие на кнопку или нажатие клавиши

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

Кнопка на странице:

1. Создаём кнопку на странице тегом :
   Это кнопка
2. Добавляем обработчик нажатия onclick — он сработает, когда мы нажмём на кнопку:
   Это кнопка
3. Внутри кавычек пишем JS-команду или функцию из нашего скрипта, который мы подключили к странице. Например, вызовем функцию test():

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

Кнопка на клавиатуре:

1. Добавляем на страницу стандартный обработчик событий addEventListener() .
2. Указываем, что будем следить за нажатиями на клавиатуре — пишем параметр 'keydown' .
3. Внутри обработчика проверяем код кнопок и выполняем нужные действия, например, вызываем функции.

Например, вот так мы сделали управление платформой в пинг-понге на JavaScript:

// Отслеживаем нажатия клавиш document.addEventListener('keydown', function (e) < // Если нажата клавиша вверх, if (e.which === 38) < // то двигаем правую платформу вверх rightPaddle.dy = -paddleSpeed; >// Если нажата клавиша вниз, else if (e.which === 40) < // то двигаем правую платформу вниз rightPaddle.dy = paddleSpeed; >// Если нажата клавиша W, if (e.which === 87) < // то двигаем левую платформу вверх leftPaddle.dy = -paddleSpeed; >// Если нажата клавиша S, else if (e.which === 83) < // то двигаем левую платформу вниз leftPaddle.dy = paddleSpeed; >>);

Нужна ли здесь jQuery или какая-нибудь ещё библиотека?

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

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

var $elem = $(".SomeClass")
$elem.remove();

Чтобы такое заработало, нужно подключить jQuery на HTML-странице, добавив перед вызовом своего скрипта такую строку:

Если знака доллара нет, но при запуске скрипт ругается на какую-то команду, то, скорее всего, нужно подключить что-то ещё. Самый простой способ узнать, что именно подключать, — набрать в Яндексе набрать название этой команды и добавить фразу «как работает». Например, если скрипт выдаёт ошибку на команде LUME.defineElements(); , то первый же ответ в поиске даст нам нужную библиотеку:

Куда ходить за вопросами или помощью

Если нужно разобраться, как работает какая-то функция, библиотека или технология, — читайте «Код».

Если нужно быстрое решение — ищите его на StackOverflow.

Если нужна помощь со стороны и подробные объяснения, как что устроено, — приходите учиться в Практикум на веб-разработку. Можно не спеша на курсах, можно быстро на буткемпе.

Что дальше

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

• Своя игра: создаём собственную «Змейку»
• Пианино на JavaScript для Chrome
• Автоматическое оглавление на странице
• Делаем игру Quatro

Веб-разработка — это новый чёрный

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

Получите ИТ-профессию

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.