JavaScript – один из наиболее популярных языков программирования, который подойдёт для начинающих. С его помощью на сайт добавляют анимацию, отклики, динамические стили. В статье мы расскажем обо всех аспектах изучения JavaScript, познакомим с основными инструментами разработчика.
Вы узнаете, как выучить JavaScript с нуля и где найти полезную информацию по нему.
JS – динамический язык программирования, который применяют к HTML страницы. JavaScript используется в современных браузерах, поскольку это гибкий и компактный язык. Разработчики создали много полезных инструментов, которые делают разработку сайтов проще и быстрее. Поэтому этот язык программирования подойдёт начинающим специалистам.
Если вы решили изучать JavaScript, то вам сначала нужно научиться запускать консоль, где вы будете кодировать. Открыть её можно с помощью сочетания клавиш ctrl+shfit+K или ctrl+shift+L.
Также можете в поисковой строке браузера ввести код, нажать enter, и консоль запустится. Можете воспользоваться блокнотом, сохранённом в HTML-формате. Нужно открыть блокнот, вставить туда код, нажать «Сохранить как», выбрать формат «Все файлы (*.*)» и назвать файл «мойкод.html».
В основы программирования на JS входят типы данных. Среди самых простых – строки и числа. Числа могут быть любыми и обозначают сами себя: 2, 36, 789 и т.п. Но строки всегда обрамляются в одинарные или двойные кавычки:
'строка', "строка"
Переменными называют контейнеры, внутри которых разработчики могут хранить значения, например, числа и строки. Сначала специалист объявляет переменную, используя ключевое слово var или let, а потом вписывает любое имя, которым хотел бы назвать переменную. Например, let myVariable;. Затем переменной присваивается значение, например var myVariable = 'Tom';.
В написания кода важно не забывать в конце ставить «;». Этот символ покажет, где заканчивается оператор. Его используют, если в одной строке несколько операторов.
Разработчики могут называть переменные по-разному, но всё-таки есть небольшие ограничения.
При написании сценария JavaScript используются следующие типы переменных:
Операция присваивания нужна для того, чтобы переменной присвоить значение. В коде var a = 7; мы присвоили переменной а значение 7. Операций много. Это может быть деление, умножение и другие математические формулы.
Зачастую во время обучения начинающие программисты путают присваивание с обычным равенством. Возьмём пример:
var a = 1; a = a + 2;
Если смотреть на вторую строку с точки зрения математики, то это абсурд. Но с точки зрения программирования всё будет верно. В первой строке мы указали, что у переменной а значение 1. Потом мы присвоили ей новое значение, которое равно сумме её старого значения и 2.
Комментарии
Комментарий – небольшой фрагмент текста, который можно добавить в код. Он игнорируется браузером пользователя. Комментарий можно пометить в код:
/*
Всё, что находится тут - комментарий.
*/
Если в комментарии нет переноса строк, то он выделяется двумя косыми чертами: // Это комментарий.
В функции упаковывают функциональности, которые пользователь хочет использовать повторно. JS позволяет создавать функцию, которую программист вызывает по имени вместо того, чтобы переписывать заново весь код. Есть несколько функций, и одна из них – alert.
alert('hello!');
Она встроена в браузер, чтобы пользователю было использовать её, когда нужно. С её помощью появляется всплывающий блок в браузере. Блоку задают строку, чтобы функция знала, что нужно писать в нём. В нашем примере появится окошко с приветствием.
Также функция может выводить на экран математические операции. Например, alert(5 - 1); покажет нам в блоке 4.
Операторы – математические символы, которые производят результат из двух значений переменных. Для начинающих разработчиков важно знать следующие виды операций:
Например,
alert(2 + 1); //выведет 3 alert(5 - 4); //выведет 1 alert(8 * 3); //выведет 24 alert(6 / 3); //выведет 2
Чтобы овладеть языком java script, нужно разбираться в операциях инкремента и декремента. Первая увеличивает переменную на единицу и записывается следующим образом: a++ или ++а.
Вторая уменьшает переменную на единицу. Её записывают в виде а-- или --а.
var a = 1; a++; //увеличит a на 1, что соответствует коду a = a + 1; alert(a); //выведет 2 или var a = 1; a--; //уменьшит a на 1, что соответствует коду a = a - 1; alert(a); //выведет 0
Между ++а и а++ есть разница. Возьмём код alert(++a) и код alert(a++). В первом варианте переменная увеличится на единицу, а потом выведется. Во втором варианте наоборот.
Мы уже рассмотрели код, в котором показаны сложности с операцией присваивания:
var a = 1; a = a + 2;
Мы присваиваем переменной а старое значение, которое увеличиваем на 2. Но js позволяет укоротить этот код с помощью оператора +-:
var a = 1; a += 3; //этот код равен коду a = a + 3.
Аналогично работают другие операторы -=, *=, /=, которые записываются следующим образом:
var a = 2;
a -= 3; //этот код равен коду a = a - 3;
var a = 2;
a *= 3; //этот код равен коду a = a * 3;
var a = 2;
a /= 3; //этот код равен коду a = a / 3
Также во время выполнения кода используются операция Равенства и Неравенства. Первая делает проверку, если видит, что два значения равнозначны, вторая превращает true в false и наоборот.
Начинающим программистам следует изучить условное ветвление, когда мы выполняем различные действия, которые зависят от условий. Используются символы if, ?. Например
let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', '');
if (year == 2015) alert( 'Вы правы!' );
В примере ниже используется 2 инструкции – добавляется строка «Вы такой умный»
if (year == 2015) {
alert( "Правильно!" );
alert( "Вы такой умный!" );
}
Чтобы указать, что действие ложно, можно использовать блок else.
let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', '');
if (year == 2015) {
alert( 'Да вы знаток!' );
} else {
alert( 'А вот и неправильно!' ); // любое значение, кроме 2015
}
Чтобы проверить несколько вариантов, можно использовать блок else if.
let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', '');
if (year < 2015) {
alert( 'Это слишком рано...' );
} else if (year > 2015) {
alert( 'Это поздновато' );
} else {
alert( 'Верно!' );
}
Для того, чтобы легче и быстрее создавать сайты, программисты используют фреймворки. JQuery – один из популярных для JavaScript. Он отличается от остальных простотой и удобством использования. Библиотека нужна для того, чтобы манипулировать деревом HTML DOM, обрабатывать события, CSS-анимации и Ajax. Для работы с фреймворком понадобятся базовые знания CSS, поскольку именно от них отталкивается его селектор.
Библиотека jQuery помогает укрощать код, имеет простой синтаксис, благодаря которому программисту становится легче писать запросы или команды. Если писать код на JS, то он может открыться не на всех браузерах. Если использовать библиотеку jQuery, то таких проблем не будет.
Среди минусов библиотеки – она незначительно увеличивает скорость загрузки страницы, уменьшает производительность кода.
Чтобы научиться использовать этот инструмент, нужно сначала его скачать с официального сайта. Он бесплатный, и на нём работают более 70% сайтов. Послу установки фреймворк нужно подключить с помощью команды:
<script type="text/JavaScript" src="jquery.min.js"></script>;
Если пользоваться хостингом Google или Яндекс, то подключение будет иное:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> или <script src="https://yastatic.net/jquery/2.2.0/jquery.min.js"></script>
Покажем, как можно использовать библиотеку jquery для создания сайтов. Для этого её нужно подключить к любому CDN – технологии, ускоряющая доставки контента конечному пользователю. Рассмотрим пример с Google CDN.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Страница, к которой подключен jQuery</title>
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Моя страница, к которой подключён jQuery</h1>
<script>
document.addEventListener('DOMContentLoaded', function () {
/* код на jQuery */
// установим body фон #eee
$('body').css('background-color', '#eee');
// выровняем h1 по центру
$('h1').css('text-align', 'center');
// добавим в конец страницы элемент div с контентом "Всем привет!"
$('body').append('<div style="text-align: center; font-size: 20px;">Всем привет!</div>');
});
</script>
</body>
</html>
Node.js – кроссплатформенная среда выполнения для JS, которая используется в серверном программировании. Платформа имеет базу JS, движок V8. Её зачастую используют для создания сайтов.
Платформа проста в освоении и использовании. JavaScript-код работает в два раза быстрее за счёт неблокирующей архитектуры, что ускоряет работу программистов. В свободном доступе более полумиллиона библиотек с полезными материалами для разработчика.
Скачать платформу можно на сайте. Первым приложением для Node.js, которое может создать начинающий программист, будет веб-сервер с кодом:
const http = require('http')
const hostname = '127.0.0.1'
const port = 3000
const server = http.createServer((req, res) => {
res.statusCode = 200
res.setHeader('Content-Type', 'text/plain')
res.end('Hello Sun\n')
})
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`)
})
Для запуска этого кода нужно сохранить его в файле server.js, а потом запустить команду: node server.js. Проверить результат работы можно, введя в адресной строке адрес сервера http://127.0.0.1:3000, который мы указали в коде. Если ошибок нет, то на странице появится надпись «Hello Sun».
Для платформы существует множество библиотек. Среди них:
Для создания интерактивных сайтов используются также три популярных фреймворка – Angular, React или Vue.js.
Преимущества Angular:
Преимущества React:
Преимущества Vue.js:
Основные инструменты разработчика
Существуют разные инструменты разработчика, которые упрощают и ускоряют процесс создания сайта:
Разработчики должны не создавать сайты с приложениями, но и искать в них ошибки, если готовый продукт не работает должным образом.
Ошибки бывают синтаксическими и логическими. Первые относятся к орфографическим. У вторых синтаксис правильный, но код работает не так, как предполагал разработчик. И оба вида ошибок нужно уметь искать.
Их можно найти с помощью онлайн-валидаторов. Вам нужно просто скопировать код в поле, и программа автоматически покажет, где у вас ошибка. Вы можете воспользоваться Involta, iCoder.Uz или других онлайн или офлайн-приложений.
Основы JavaScript покажет самоучитель «Изучаем программирование на JavaScript» от Элизабет Робсон и Эрика Фримена. Авторы познакомят с JS, научат его основам. Читатели смогут написать несколько простых приложений и подготовятся к более серьёзным книгам.
«Типы и грамматические конструкции JS» от Кайла Симпсона. В книге рассматриваются все нюансы работы языка, включая замыкания, прототипы и т.п. Почитать будет полезно новичкам и разработчикам уровня Миддл.
«Как устроен JavaScript» от Дугласа Крокфорда. Книга расскажет об устройстве объектов, принципах ООП, работе генераторах, числах в JS. Автор расскажет о тонкостях языка программирования.
«Руководство JavaScript» — просто подробный гайд о языке.
«Учебник по JavaScript» – современный джава скрипт учебник, который научит человека без опыта тонкостям JS.
Каждый блок программы обучения содержит задачи по JavaScript, которые помогут отточить полученные навыки. Поэтому и вы после того, как изучите какую-либо главу или раздел, можете переходить по ссылкам ниже и проверять свои знания на практике:
Чтобы научиться языку программирования, нужно постоянно самосовершенствоваться. Мало только изучить основы, нужно следить за трендами, новинками, поскольку программирование постоянно меняется, и от разработчиков требуют актуальные знания.
Полезные телеграм-каналы:
Список полезных видеоуроков:
Список статей, из которых вы подчерпнёте много нового:
Плюсы: высокая популярность языка, его простота, перспективы карьерного роста. Минусы: много конкуренции, нужно постоянно самостоятельно развиваться.
JS используют в разработке веб-приложений, операционных систем, мобильных программ.
Если вы хотите изучить JS, то вам нужно:
'строка', "строка"
var a = 1;
a = a + 2;
var a = 1;
a = a + 2;
/*
Всё, что находится тут - комментарий.
*/
alert('hello!');
alert ('hello!');
alert ('hello!');
alert( 'hello!' );
<script>
alert('hello!');
</script>
<script src="/path/to/script.js"></script>
<script src="/path/to/script.js"></script>
let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', '');
if (year == 2015) alert( 'Вы правы!' );
if (year == 2015) {
alert( "Правильно!" );
alert( "Вы такой умный!" );
}
let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', '');
if (year == 2015) {
alert( 'Да вы знаток!' );
} else {
alert( 'А вот и неправильно!' ); // любое значение, кроме 2015
}
<script type="text/JavaScript" src="jquery.min.js"></script>;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> или <script src="https://yastatic.net/jquery/2.2.0/jquery.min.js"></script>