На уроке будут разобраны функции javaScript для преобразования типов данных; даны примеры с решениями по использованию различных методов javascript вывода текста и его ввода
Напоминаем, что данный сайт не претендует на полное изложение информации по теме. Целью портала является предоставление возможности усваивания материала на основе готовых решенных примеров по javaScript с лабораторными заданиями для закрепления материала. Представленные на сайте labs-org.ru лабораторные задания по javaScript выстроены последовательно по мере увеличения сложности. Сайт labs-org.ru может быть использован учителями и преподавателями в качестве вспомогательного наглядного пособия.
JavaScript функции для работы с типами данных
Иногда в программе требуется преобразовать тип переменной. Рассмотрим основные функции, связанные с преобразованием типов:
parseInt(строка, основание)
преобразует указанную в параметре строку в целое число. Если есть второй параметр — система счисления — преобразование происходит по указанному основанию системы счисления (8, 10 или 16):
parseInt("3.14") // результат = 3
parseInt("-7.875") // результат = -7
parseInt("435") // результат = 435
parseInt("Вася") /* результат = NaN,
то есть не является числом */
parseInt("15" ,8) // результат = 13 |
parseInt("3.14") // результат = 3
parseInt("-7.875") // результат = -7
parseInt("435") // результат = 435
parseInt("Вася") /* результат = NaN,
то есть не является числом */
parseInt("15" ,8) // результат = 13
Важно:
Функция parseInt()
отсекает дробную часть числа. Чтобы округлить число необходимо использовать метод Math.round()
parseFloat (строка)
преобразует указанную строку в число с плавающей разделительной точкой (десятичной):
parseFloat("3.14") // результат = 3.14
parseFloat("-7.875") // результат = -7.875
parseFloat ("435") // результат = 435
parseFloat ("Вася") /* результат = NaN,
то есть не является числом */
parseFloat ("17.5") // результат = 17.5 |
parseFloat("3.14") // результат = 3.14
parseFloat("-7.875") // результат = -7.875
parseFloat ("435") // результат = 435
parseFloat ("Вася") /* результат = NaN,
то есть не является числом */
parseFloat ("17.5") // результат = 17.5
Важно: Обе функции и parseInt()
и parseFloat()
используют в качестве параметра строку и преобразуют ее в число
Кроме того, в javascript предусмотрены еще два способа преобразований:
1. Обычные преобразования:
x = Number(x) // к числу
x = String(x) // к строке
x = Boolean(x) // к булеву типу |
x = Number(x) // к числу
x = String(x) // к строке
x = Boolean(x) // к булеву типу
2. Компактные преобразования:
x = +x // к числу
x = x + '' // к строке
x = !!x // к булеву типу |
x = +x // к числу
x = x + '' // к строке
x = !!x // к булеву типу
- Функция javascript
isNaN(значение)
служит для определения того, является ли значение выражения числом:
isNaN(123) /* результат false
(то есть это - число) */
isNaN("50 рублей") /* результат true
(то есть это - не число) */ |
isNaN(123) /* результат false
(то есть это - число) */
isNaN("50 рублей") /* результат true
(то есть это - не число) */
Иногда можно получить такую ошибку JavaScript —
NaN
— когда значение не является числом (а ожидается число):
let a=8;
let b="pi";
let S=a*b; // S=NaN |
let a=8;
let b="pi";
let S=a*b; // S=NaN
В качестве значения переменной может быть undefined
— не определено. Такое случается, когда переменная создана, но значение ей не присвоено:
let b;
document.write(b); // b=undefined |
let b;
document.write(b); // b=undefined
- Для того чтобы узнать текущий тип данных конкретной переменной в javascript используется функция
typeof
:
typeof 33 // возвращает строку "number",
typeof "A String" // возвращает строку "string",
typeof true // возвращает строку "boolean",
typeof null // возвращает строку "object" |
typeof 33 // возвращает строку "number",
typeof "A String" // возвращает строку "string",
typeof true // возвращает строку "boolean",
typeof null // возвращает строку "object"
Пример 1. Создайте сценарий:
- с двумя строковыми переменными со значениями
"строка1"
и "строка2"
; с помощью операции конкатенации объедините строки;
- с двумя числовыми переменными со значениями
3.14
и FF
; выведите их произведение, преобразованное в целое число. Для вывода значений используйте метод document.write()
.
✍ Решение:
- Создайте веб-страницу с html-скелетом и тегом script:
<html><head></head>
<body>
<!-- Сценарий -->
<script>
// для кода JavaScript
</script>
<!-- Конец сценария -->
</body></html> |
<html><head></head>
<body>
<!-- Сценарий -->
<script>
// для кода JavaScript
</script>
<!-- Конец сценария -->
</body></html>
- В коде для javascript инициализируйте две строковые переменные:
let c=3.14;
let d=0xFF; // 16-я система счисления |
let c=3.14;
let d=0xFF; // 16-я система счисления
Вспомним, что для чисел 16-й системы используется префикс 0x.
- Инициализируйте две числовые переменные:
// Инициализация двух переменных:
let a="строка1";
let b="строка2"; |
// Инициализация двух переменных:
let a="строка1";
let b="строка2";
- Выведите результаты с помощью метода document.write() с несколькими параметрами, разделенными через запятую. Чтобы вывести в две строки следует применить тег
br
. Для преобразования в целый тип используйте функцию parseInt():
document.write("конкатенация: ",a+b,"<br/>произведение: ", parseInt(c*d)); |
document.write("конкатенация: ",a+b,"<br/>произведение: ", parseInt(c*d));
- Протестируйте сценарий в браузере.
Задание Js 1: Даны переменные:
a="12";
b="7.15";
Найдите остаток от деления числовых значений переменной a на переменную b. Используйте функции преобразования типов.
Результатом должно быть число 5.
Рекомендации:
Для округления числа следует использовать метод Math.round()
:
x = Math.round(x)
Вопросы для самоконтроля:
- Назовите функцию, преобразующую указанную в параметре строку в целое число.
- Назовите функцию, преобразующую указанную строку в число с плавающей разделительной точкой.
- В каком случае может возникнуть ошибка NaN?
- Когда значение переменной может быть undefined?
Методы javaScript вывода данных и ввода (диалоговые окна)
JavaScript может выдавать сообщения и запрашивать данные у пользователя с помощью трех диалоговых окон, вызываемых методами alert, confirm и prompt. Рассмотрим работу с ними:
alert()
Синтаксис:
[window.]alert(сообщение)
С помощью уже знакомого нам модального окна с предупреждением на экран выводится информация для пользователя. Например:
Пользователь читает сообщение и щелкает по кнопке OK, чтобы закрыть это окно.
Можно выводить значение переменной:
let price = 28;
alert(`Стоимость = ${price} рублей`); // Стоимость = 28 рублей |
let price = 28;
alert(`Стоимость = ${price} рублей`); // Стоимость = 28 рублей
confirm()
Синтаксис:
[window.]confirm(сообщение)
В отличие от предыдущего модального окна, в диалоговом окне confirm пользователь может выбрать один из двух вариантов: OK или Отмена.
Важно: Если выбрана кнопка OK, то в сценарий возвращается значение true, если Отмена — значение false.
let a = confirm("Вы действительно хотите завершить работу?");
alert(a); // yes, если нажата ok |
let a = confirm("Вы действительно хотите завершить работу?");
alert(a); // yes, если нажата ok
prompt()
Синтаксис:
[window.]prompt(сообщение,значение_поля_ввода)
С помощью окна ввода, вызываемого методом prompt, пользователь может ввести данные, которые будут использоваться далее в сценарии.
prompt("Как Вас зовут?", "Иван"); |
prompt("Как Вас зовут?", "Иван");
Важно: Метод prompt
принимает два аргумента: первый выводится в качестве простой строки в модальном окне; второй — значение по умолчанию в текстовом поле для ввода. Оба аргумента заключаются в кавычки.
Важно: Для решения заданий следует иметь в виду, что функция prompt()
возвращает строковое значение, т.е. если требуется производить дальнейшие вычисления с введенным значением, то необходимо преобразовать тип данных
Важно: Во всех трех случаях использования методов ввода или вывода объект
window
можно опускать:
window.alert("сообщение"); // строгий синтаксис |
window.alert("сообщение"); // строгий синтаксис
alert("сообщение"); // нестрогий синтаксис |
alert("сообщение"); // нестрогий синтаксис
Этот объект означает «окно», и для краткости обращения к методам разрешено его не использовать, поэтому в синтаксисе он выделен квадратными скобками
Пример 2:
- При загрузке страницы запросить у пользователя ввести имя (функция
prompt()
). С помощью метода document.write
вывести на экран строку «Привет, введенное имя !»
.
↓
- При помощи функции
prompt()
попросить пользователя ввести 2 числа. Выполнить произведение чисел и вывести результат на экран с помощью метода document.write
. Вывод должен иметь следующий вид:
✍ Решение:
1 задание:
- Создайте веб-страницу с html-скелетом и тегом script:
<html><head></head>
<body>
<!-- Сценарий -->
<script>
// для кода JavaScript
</script>
<!-- Конец сценария -->
</body></html> |
<html><head></head>
<body>
<!-- Сценарий -->
<script>
// для кода JavaScript
</script>
<!-- Конец сценария -->
</body></html>
- В коде для javascript инициализируйте переменную для присваивания ей значения — имени, которое введет пользователь в модальное окно prompt():
let name = prompt("Введите Ваше имя"); |
let name = prompt("Введите Ваше имя");
В результате данного присваивания в переменной name сохранится значение, которое введет пользователь в модальное окно.
- Выведите сохраненное значение с помощью метода document.write() с несколькими параметрами, разделенными через запятую:
document.write("Привет, ", name," !"); |
document.write("Привет, ", name," !");
- Протестируйте сценарий в браузере.
2 задание:
- Создайте веб-страницу с html-скелетом и тегом script.
- В коде для javascript инициализируйте две переменных для присваивания им значений — чисел, которое введет пользователь в модальные окна prompt(). Для преобразования в целый тип используйте функцию parseInt().
Вспомним, что метод prompt() возвращает строковое значение. Поэтому для дальнейшей работы с числами, значения необходимо преобразовать в числовой тип:
let a = parseInt(prompt("Введите первое число"));
let b = parseInt(prompt("Введите второе число")); |
let a = parseInt(prompt("Введите первое число"));
let b = parseInt(prompt("Введите второе число"));
Преобразование также можно выполнить отдельным оператором:
let a = prompt("Введите первое число");
a = parseInt(a); |
let a = prompt("Введите первое число");
a = parseInt(a);
- Выполните произведение переменных, выдав результат с помощью метода document.write(). Для «красивого вывода» используйте несколько параметров, перечисленных через запятую:
document.write(a, " * ", b, " = ", a*b); |
document.write(a, " * ", b, " = ", a*b);
- Протестируйте сценарий в браузере.
Задание Js 2. Допишите фрагмент кода для конвертации строкового значения в числовое. Для вывода результата используйте метод
document.write
:
let x = prompt("Введите значение x ", "0");
let y = prompt("Введите значение y ", "0.0");
let integerX = ...
let floatY = ...
let result = integerX + floatY;
...; |
let x = prompt("Введите значение x ", "0");
let y = prompt("Введите значение y ", "0.0");
let integerX = ...
let floatY = ...
let result = integerX + floatY;
...;
Задание Js 3. Найдите ошибки в следующем фрагменте кода:
let firstName = prompt("Введите имя"; "сюда");
let lastName = promt("Введите фамилию");
int age = prompt("Введите возраст");
alert(Age); |
let firstName = prompt("Введите имя"; "сюда");
let lastName = promt("Введите фамилию");
int age = prompt("Введите возраст");
alert(Age);
Задание Js 4. Вычислить значение выражения по формуле (все переменные принимают вещественные значения):
Предлагаемый алгоритм:
- Запрос значения
x
- Вычисление выражения
- Вывод результата при помощи метода
alert
Вопросы для самоконтроля:
- Какие методы для вывода модальных окон в javascript Вы знаете?
- Какой метод позволяет вывести модальное окно для ввода данных?
- Какой из вариантов работы с методом alert, расположенных ниже, правильный?:
-
-
Здорово!
Пока всё нравится — толково и хорошие задания!
Спасибо!
Замечательно;)
Кто нибудь, подскажите, почему в этом примере : parseInt («15» ,8) // результат = 13, в первой главе на это странице результат 13, а не Nan????
parseInt («15» ,8) — означает, что число 15 нужно читать как восьмеричное, то есть, в числе 13: 1 = 8 и +5 к нему = 13.
Забыл дописать — ответ будет выведен числом в десятичном виде.
Мне этот сайт очень нравится! Тут интересно изучать JS. Но у меня есть вопрос: На этом сайте какой версии JS обучают и актуально ли это?
Стараемся периодически обновлять до новейших версий. Но материал не исчерпывающий