Знакомство с JavaScript. Часть вторая

Синтаксис

Постарайтесь запомнить несколько простых правил:

Каждая инструкция (команда) должна заканчиваться точкой с запятой.
Каждая инструция обычно пишется с новой строки - чтобы код было удобнее читать.
JavaScript (в отличие от HTML) видит разницу между заглавными и строчными буквами.

Переменные

Переменные - это "ящики" для хранения данных (информации). В переменную мы можем положить любое значение. Чтобы создать переменную используется ключевое слово let или const.


        let myVariable = 10; // Создаём переменную и присваиваем ей значение "10". 
        alert(myVariable);  // Выведет "10". 
        const MYVARIABLE = 5; // Создаём константу - неизменяемую переменную. Имена констант принято писать заглавными буквами.
        MYVARIABLE = 10; // Будет ошибка, потому что значение константы уже было задано ранее.

Имена переменных в JavaScript не могут:

Начинаться с цифры
Содержать любые символы, кроме букв, цифр и символов $ и _
Быть словом из списка зарезервированных слов. Например, let, class, return и function не могут быть использованы как имена переменных, потому что эти слова уже имеют своё значение в языке JavaScript.

Типы данных

Переменные могут хранить данные разных типов. Вот наиболее часто встречающиеся типы данных в JavaScript:

number

Число.

string

Строка. Строки заключаются в одинарные или двойные кавычки.

boolean

Булево (логическое значение). Истинно (true) или ложно (false).

null

«Ничего», «пусто» или «значение неизвестно».

undefined

Не определено. Значение не присвоено.

Вывод информации в браузер

С функцией alert вы уже познакомились на прошлом занятии. Но кроме неё есть и другие методы вывода информации в окно браузера:


          prompt("Сколько тебе лет?", 10);

Функция prompt выводит всплывающее окно с текстом, полем для ввода текста и кнопками OK/Отмена. В круглые скобки помещаются два параметра. Первый - текст для вывода. Второй (необязательный) - значение по умолчанию. Функция возвращает введённый пользователем текст либо null, если пользователь отменил ввод.


          confirm("Подтвердить ввод?");

Функция confirm выводит всплывающее окно с текстом вопроса и кнопками OK/Отмена. В круглые скобки помещается параметр - текст вопроса. Функция возвращает true, если пользователь нажал OK. В противном случае - false.

Задание 1 (на занятии)

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

document.write("Это моя первая программа на языке JavaScript");

Функция document.write выводит данные в окно браузера. При этом окно становится пустым. Эта функция может быть полезна вам при поиске ошибок в ваших программах.


        document.getElementById("demo").innerText = "Какой-то текст";

innerText меняет текст в элементe HTML. Пример кода выше выведет текст "Какой-то текст" в элемент с id="demo", заместив им содержимое этого элемента.


        let myText = document.getElementById("demo").innerText;
        alert(myText);

Мы также можем использовать innerText, чтобы получить текст из HTML-элемента.


        document.getElementById("demo").innerHTML = '<font size = "6" color = "red">Какой-то текст</font>';

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

Сложение в JavaScript

На уроках математики вы много раз складывали числа. JavaScript позволяет нам складывать не только числа, но и строки. И переменные. Эта операция встречается довольно часто.


          let fruits = "apples"; // Объявляем переменную и присваиваем ей значение
          fruits = fruits + ", bananas"; // Меняем значение переменной
          document.write(fruits); // Выведет "apples, bananas"

Задание 2 (на дом)

Заставьте говорящую картинку, которую вы сделали ранее, вести диалог с пользователем - она должна задать как минимум 2 вопроса (во всплывающих окнах) и выдать как минимум 2 реплики, не являющиеся вопросами. Для вывода реплик (слов, которые говорит картинка) обязательно используйте innerText или innerHTML. Подсказка - для решения этой задачи вам понадобятся переменные (как минимум одна) и сложение. Необязательно (но желательно) попробовать использовать в своём коде конструкцию If, которую вы видели на прошлом занятии.