Те, кто хочет понимать, как работает какой-нибудь язык программирования, сталкиваются с трудностями уже на старте. Нужно изучить инструкцию и поставить среду, и только тогда начинать. Например, если вы хотите программировать на C, то нужно установить компилятор и отладчик или же воспользоваться полноценными IDE (средами) разработки. Для того чтобы программировать на PHP, нужно установить веб-сервер с интерпретатором языка и опционально различные модули, а также базу данных. А вот языку JavaScript не нужно ничего, кроме веб-браузера. Ну и, конечно же, блокнота.
Любой человек, даже далекий от программирования, может воспользоваться обычным блокнотом (но лучше брать Notepad++) и создать свой первый, ну, назовем его, скрипт на JavaScript. Сейчас вы самостоятельно поймете, как можно делать свои первые шаги, — дам несколько примеров.
Первое, что нам необходимо, — создать в каком-либо месте файл с расширением .html. Назовем его document.html. Открываем файл редактором (Notepad++ или блокнот) и пишем наш первый код. Я специально не буду писать HTML-документ «по канонам» со всей разметкой — просто простые примеры скриптов. Каждый пример нужно вставить в файл, сохранить его и открыть браузером, например Google Chrome.
Пример №1 позволит нам увидеть сообщение в консоли браузера, а также на экране.
<script>
console.log("Привет, мир!");
document.write("<p><b>Привет, мир!</b> (выведено через document.write)</p>");
</script>
Открываем браузером и видим, что у нас вывелось сообщение «Привет, мир!». Жмем F12 и попадаем в консоль браузера и видим также это сообщение.
Пример №2 – знакомимся с типами данных. Здесь мы видим, что name – это строка, age – это число, а isStudent – булевое выражение, которое означает ложь или правду. Запустите и убедитесь сами! Оператор typeof как раз позволяет нам определить тип переменной.
<script>
let name = "Анна";
let age = 25;
let isStudent = true;
document.write("<p>Имя: " + name + " (" + typeof name + ")</p>");
document.write("<p>Возраст: " + age + " (" + typeof age + ")</p>");
document.write("<p>Студент: " + isStudent + " (" + typeof isStudent + ")</p>");
</script>
Пример №3 – простые математические операции. Здесь даже объяснять ничего не нужно!
<script>
let a = 10;
let b = 5;
document.write("<p>" + a + " + " + b + " = " + (a + b) + "</p>");
document.write("<p>" + a + " - " + b + " = " + (a - b) + "</p>");
document.write("<p>" + a + " * " + b + " = " + (a * b) + "</p>");
document.write("<p>" + a + " / " + b + " = " + (a / b) + "</p>");
</script>
Пример №4 – Здесь мы сразу понимаем, как работает оператор if и else. Пример покажет, что число нечетное. Если вы поставите цифру 8, то сработает первое условие, если 7, то второе. Просто запускайте!
<script>
let number = 7;
if (number % 2 === 0) {
document.write("<p>Число " + number + " - четное</p>");
} else {
document.write("<p>Число " + number + " - нечетное</p>");
}
</script>
Кстати, строчка if (number % 2 === 0) выясняет делится ли число на 2 без остатка.
Пример №5 — массивы данных. Он наглядно показывает, как собирать массив в JavaScript и «рисует» уже элементы массива для понимания.
<script>
let fruits = ["яблоко", "банан", "апельсин"];
document.write("<p>Первый элемент: " + fruits[0] + "</p>");
document.write("<p>Второй элемент: " + fruits[1] + "</p>");
document.write("<p>Третий элемент: " + fruits[2] + "</p>");
document.write("<p>Все элементы: " + fruits.join(", ") + "</p>");
</script>
Пример №7 — Циклы. Устали? Ну еще один, а если вам понравится, то мы продолжим такие короткие уроки. Вам нужно вывести какую-то информацию много много раз, но эта информация (или же часть) повторяется. Да, можно сделать так:
<script>
document.write('Привет, мир!');
document.write('Привет, мир!');
document.write('Привет, мир!');
document.write('Привет, мир!');
document.write('Привет, мир!');
</script>
А можно просто так:
<script>
for (let i = 0; i < 5; i++) {
document.write('Привет, мир!');
}
</script>
Магия? Не-а! Ну вот, очень надеюсь что вам понравятся такие небольшие уроки и они будут продолжены – будем изучать JavaScript вместе с Блогом системного администратора.
Будете пробовать? Напишите в комментариях 👇
Чтобы не пропустить ничего важного, подписывайтесь на наши каналы в мессенджере MAX и Telegram.