Урок 2. Данные и функции в JavaScript
Теория
Данные - это объекты, которыми может оперировать JavaScript, к примеру, имя пользователя - это строка, а его возраст - это число. Данные могут быть разных типов.
Строки и числа
Самыми простыми типами данных в JavaScript являются строки и числа.
Числа обозначают сами себя: 1, 8, 88, а вот строки требуется брать в кавычки (одинарные или двойные): 'строка', "строка".
Переменные
1 из самых главных и распространенных объектов в программировании - переменная.
Переменная - это такой объект, который может хранить внутри себя различные данные, например, строки или числа.
Имя переменной должно состоять из английских букв: больших или маленьких, а также цифр и знака_подчеркивания.
В JavaScript при объявлении переменной должно быть написано ключевое слово var (не всегда!):
var a//Объявлена переменная.
var a,a1,isVar,is_var//Объявлена группа переменных.
Операция присваивания
Очень важным элементом программирования - операция присваивания:
a=4//Переменной a присвоено значение 4.
Комментарии
В коде JavaScript можно оставлять комментарии. Они могут быть многострочными и 1-строчными:
a=4//Пример 1-строчного комментария.
/*Пример
многострочного комментария.*/
Комментарии игнорируются браузером при выполнении кода.
Функция alert
В JavaScript существует специальная функция alert, которая позволяет вывести какой-либо текст в окно браузера в виде диалогового окна.
Следующий код выводит на экран заданный текст:
alert('Привет, мир')//Выведет на экран фразу 'Привет, мир'.
В следующим коде переменной t присваивается фраза, а затем содержимое этой переменной выводится на экран:
t='Привет, мир';alert(t)//Выведет на экран фразу 'Привет, мир'.
Математические операции
В JavaScript между числами можно совершать различные математические операции:
alert(2+3);//Выведет 5.
alert(5-1);//Выведет 4.
alert(2*3);//Выведет 6.
alert(6/2)//Выведет 3.
Получение определенного символа строки
В JavaScript можно получить доступ к определенному символу строки по его номеру таким образом: a[n] - n-ный символ строки (нумерация начинается с 0):
var a,b;//Объявим наши переменные.
a='abcde';//В переменной а будет хранится значение 'abcde'.
b=a[0];//В переменной b будет 'a'.
b=a[1];//В переменной b будет 'b'.
b=a[4]//В переменной b будет 'e'.
Сложности с операцией присваивания
Присваивание отличается от обычного равенства:
a=1;a=a+2
С точки зрения математики запись a=a+2 абсурдна, но не с точки зрения программирования.
В данном случае переменная a имела значение 1, а затем переменной a присвоили новое значение (старое значение переменной a+2).
Операции инкремента и декремента
Операция a++ или ++a увеличивает переменную a на 1 (инкремент).
Операция a-- или --a уменьшает переменную a на 1 (декремент).
Примеры:
a=1;a++;//Увеличит a на 1 (равнозначно a=a+1).
alert(a);//Выведет 2.
a=1;a--;//Уменьшит a на 1 (равнозначно a=a-1).
alert(a)//Выведет 0.
Рассмотрим разницу между ++a и a++.
Есть код alert(++a) и код alert(a++).
В 1-м случае переменная сначала увеличится на 1, а потом выведется, во 2-м случае - сначала выведется, а потом увеличится на 1.
Операции +=, -=, *=, /=
Мы уже рассматривали код, который демонстрирует сложности с операцией присваивания: var a=2;a=a+3.
В данном случае мы присваиваем переменной a ее текущее значение, увеличенное на 3. Однако JavaScript позволяет записать этот код еще короче с помощью оператора +=:
a=2;a+=3//Этот код полностью эквивалентен коду a=a+3.
Кроме того, существуют операторы -=, *=, /=, которые эквивалентны следующему коду:
a=2;a-=3;//Этот код полностью эквивалентен коду a=a-3.
a=2;a*=3;//Этот код полностью эквивалентен коду a=a*3.
a=2;a/=3//Этот код полностью эквивалентен коду a=a/3.
Специальные значения
В JavaScript существуют ключевые слова для некоторых специальных значений: undefined, null, true, false, NaN, Infinity, -Infinity.
Значения undefined и null
Значение undefined обозначает неопределенность. К примеру, если обратиться к переменной, которой еще не задали значение, то ее значение и будет undefined.
var a;alert(a)//Выведет undefined.
Значение null обозначает 'ничего'. Например, можно присвоить переменной значение null в знак того, что там ничего не лежит.
Это значение очень похоже на undefined, но отличие в том, что undefined - это не определенное значение, а null - определенное - ничего.
Значения true и false
Значения true и false обозначают истину и ложь соответственно. Они используются тогда, когда предполагается 2 варианта ответа: да-нет.
Например, на вопрос 'ты ел?' можно ответить да (true) или нет (false).
Значение NaN
Значение NaN (Not-A-Number) обозначает не число. Оно может получится в таком случае, когда умножается строка с буквами на число:
alert('abc'*3)//Выведет NaN.
Значения Infinity и -Infinity
Значения Infinity и -Infinity обозначают соответственно бесконечность и минус бесконечность. Они получаются, если какое-то число делить на 0. В этом случает JavaScript не выдает ошибку, а возвращает эти значения.
Если делить на 0 положительное число, получается Infinity, а если отрицательное, - то -Infinity.
Функция prompt
Функция prompt не только выдает окошко с текстом, но и позволяет получить от пользователя какой-либо текст.
Этот текст можно записать в переменную и затем выполнить над ним какие-либо операции.
В следующем примере спросим имя пользователя, запишем его в переменную n и с помощью функции document.write напишем на странице:
n=prompt('Ваше имя');document.write('Ваше имя: '+n)
Функция confirm
Если нужно просто спросить у пользователя 'Да' или 'Нет', не давая ему возможность ввести иной текст, используется функция confirm.
Эта функция вызывает окошко с вопросом, на который нужно ответить пользователю, и 2 кнопками для ответа: с кнопкой 'ОК' и с кнопкой 'Отмена'.
Если пользователь нажмет 'ОК', то функция вернет true, а если 'Отмена', то вернет false.
В следующем примере функция confirm выведет диалоговое окно с вопросом 'ты ел?'.
Если вы нажмете 'Ок', то в переменную a запишется true и с помощью функции document.write напишется на странице, а если нажмете 'Отмена', то false:
a=confirm('ты ел?');document.write(a)
Типизация переменных
Что будет, если попробовать перемножить число и строку, вот так: 3*'3'? В результате получится число 9. Это значит, что JavaScript автоматически осуществляет преобразование типов при необходимости.
Но есть нюанс: если попытаться сложить строку и число, то JavaScript сложит их как строки, а не как числа, вот так: '3'+3 получится строка '33', а не число 6.
В случае с умножением JavaScript понимал, что нельзя перемножить строки, поэтому строки переводил в числа и перемножал их. А случай со сложением можно трактовать двояко: складывать как строки или как числа (+ используется как для сложения строк, так и чисел).
Бороться с этим можно следующем способом: нужно сделать недопустимую для строк операцию, например, так: +'3'+3 (поставить+перед строкой и она преобразуется к числу).
2-й вариант такой: можно сказать JavaScript, что мы хотим явно преобразовать строку к числу. Это делается с помощью функции Number, вот так: Number('3')+3. В результате получится 6, а не '33'.
К числам могут преобразовываться не только строки, но и любые другие типы данных, например true тоже можно преобразовать к числу таким образом: Number(true).
Можно преобразовывать и к другим типам с помощью функций Boolean, String и других подобных.
Практика
Примеры решения задач
Задача
Создать переменную str и присвоить ей значение 'abcde'. Обращаясь к отдельным символам этой строки выведите на экран символ 'a', символ 'b', символ 'e'.
Решение: будем обращаться к отдельным символам этой строки, к примеру, буква 'a' имеет номер 0 и ее можно вывести так: str[0], буква 'b' имеет номер 1 и так далее:
var str='abcde';document.write(str[0]);//Выводится буква 'a'.
document.write(str[1]);//Выводится буква 'b'.
document.write(str[4]);//Выводится буква 'e'.
Задача
Написать скрипт, который считает количество секунд в часе.
Решение: так как в минуте 60 секунд, а в часе 60 минут, то умножив 60 на 60 получится количество секунд в часе:
document.write(60*60)
Если нужно получить количество секунд в сутках, то умножим еще и на 24 часа:
document.write(60*60*24)
Задача
Переделать приведенный код так, чтобы в нем использовались операции +=, -=, *=, /=, ++, --. Количество строк кода при этом не должно измениться. Код для переделки:
n=1;
n=n+8;
n=n-7;
n=n*5;
n=n/7;
n=n+1;
n=n-1;
alert(n);
Решение: заменим все подходящие места на сокращенную форму записи. К примеру, вместо n=n+8 можно написать n+=8, а вместо n=n+1 будет n++. Результат переделки будет выглядеть так:
n=1;
n+=8;
n-=7;
n*=5;
n/=7;
n++;
n--;
alert(n);
Задачи для решения
Работа с переменными
Создать переменную n и присвоить ей значение 3. Вывести значение этой переменной на экран с помощью метода alert.
Создать переменные a=8, b=2. Вывести на экран их сумму, разность, произведение и частное (результат деления).
Создать переменные c=8, d=2. Просуммировать их, а результат присвоить переменной r. Вывести на экран значение переменной r.
Создать переменные a=8, b=2, c=5. Вывести на экран их сумму.
Создать переменные a=9, b=8. Отнять от a переменную b и результат присвоить переменной c. Затем создать переменную d, присвоить ей значение 7. Сложить переменные c и d, а результат записать в переменную r. Выведите на экран значение переменной r.
a=9,b=8;c=a-b;d=7;r=c+d;document.write(r)
Работа со строками
Создать переменную s и присвоить ей значение 'Привет'. Вывести значение этой переменной на экран.
Создать переменные s1='Привет, ' и s2='Мир'. С помощью этих переменных и операции сложения строк вывести на экран фразу 'Привет, Мир'.
Создать переменную n и присвоить ей имя Иван. Вывести на экран фразу 'Привет, %Имя%!'.
Создать переменную a и присвоить ей возраст (8). Выведите на экран 'Мне %Возраст% лет'.
Функция prompt
Спросить имя пользователя с помощью метода prompt. Вывести с помощью alert сообщение 'Ваше имя %имя%'.
Спросить у пользователя число. Вывести с помощью alert квадрат этого числа.
Обращение к символам строки
Создать переменную s и присвоить ей значение 'abcde'. Обращаясь к отдельным символам этой строки вывести на экран символ 'a', символ 'c', символ 'e'.
s='abcde';a=s[0];b=s[2];c=s[4];document.write(a,b,c)
Создать переменную s и присвоить ей значение '12345'. Найти произведение цифр этого числа.
s='12345';a=s[0];b=s[1];c=s[2];d=s[3];e=s[4];r=Number(a)+Number(b)+Number(c)+Number(d)+Number(e);document.write(r)
Практика
Написать скрипт, который считает количество секунд в часе, в сутках, в месяце.
Создать 3 переменные: час, минута, секунда. С их помощью вывести текущее время в формате 'час:минута:секунда'.
Создать переменную, присвоить ей число. Возвести это число в квадрат. Вывести его на экран.
Работа с присваиванием, инкрементами и декрементами
Переделать этот код так, чтобы в нем использовались операции +=, -=, *=, /=. Количество строк кода при этом не должно измениться.
n=6;
n=n+7;
n=n-8;
n=n*9;
n=n/2;
alert(n)
Переделать этот код так, чтобы в нем использовались операции ++ и --. Количество строк кода при этом не должно измениться.
n=8;
n=n+1;
n=n+1;
n=n-1;
alert(n)
