JavaScript урок 2. Функции для работы с типами данных, методы ввода и вывода данных

На уроке будут разобраны функции 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
  • parseFloat (строка)
  • преобразует указанную строку в число с плавающей разделительной точкой (десятичной):

    parseFloat("3.14") 	// результат = 3.14
    parseFloat("-7.875") 	// результат = -7.875
    parseFloat ("435") 	// результат = 435
    parseFloat ("Вася") 	/* результат = NaN, 
    то есть не является числом */
    parseFloat ("17.5") 	// результат = 17.5

    Важно: Обе функции и parseInt() и parseFloat() используют в качестве параметра строку и преобразуют ее в число

  • Функция javascript isNaN(значение)
  • служит для определения того, является ли значение выражения числом:

    isNaN(123) 		/* результат false 
    (то есть это - число) */
    isNaN("50 рублей") 	/* результат true 
    (то есть это - не число) */

    Иногда можно получить такую ошибку JavaScript — NaN — когда значение не является числом (а ожидается число):

    var a=8; 
    var b="pi";
    var S=a*b; // S=NaN

    В качестве значения переменной может быть undefined — не определено. Такое случается, когда переменная создана, но значение ей не присвоено:

    var b; 
    document.write(b); // b=undefined

  • Для того чтобы узнать текущий тип данных конкретной переменной в javascript используется функция typeof:
  • 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>
  • В коде для javascript инициализируйте две строковые переменные:
  • var c=3.14; 
    var d=0xFF; // 16-я система счисления
    Вспомним, что для чисел 16-й системы используется префикс 0x.
  • Инициализируйте две числовые переменные:
  • // Инициализация двух переменных:
    var a="строка1"; 
    var b="строка2";
  • Выведите результаты с помощью метода document.write() с несколькими параметрами, разделенными через запятую. Чтобы вывести в две строки следует применить тег br. Для преобразования в целый тип используйте функцию parseInt():
  • document.write("конкатенация: ",a+b,"<br/>произведение: ", parseInt(c*d));
  • Протестируйте сценарий в браузере.

Задание Js 1: Даны переменные:

a="12";
b="7.15";

Найдите остаток от деления числовых значений переменной a на переменную b. Используйте функции преобразования типов. Результатом должно быть число 5.


Вопросы для самоконтроля:

  1. Назовите функцию, преобразующую указанную в параметре строку в целое число.
  2. Назовите функцию, преобразующую указанную строку в число с плавающей разделительной точкой.
  3. В каком случае может возникнуть ошибка NaN?
  4. Когда значение переменной может быть undefined?

Методы javaScript вывода данных и ввода (диалоговые окна)

JavaScript может выдавать сообщения и запрашивать данные у пользователя с помощью трех диалоговых окон, вызываемых методами alert, confirm и prompt. Рассмотрим работу с ними:

  1. alert()
  2. Синтаксис:
     
    [window.]alert(сообщение)

    С помощью уже знакомого нам модального окна с предупреждением на экран выводится информация для пользователя. Например:

    alert("сообщение");

    Пользователь читает сообщение и щелкает по кнопке OK, чтобы закрыть это окно.
    javascript alert

  3. confirm()
  4. Синтаксис:
     
    [window.]confirm(сообщение)

    В отличие от предыдущего модального окна, в диалоговом окне confirm пользователь может выбрать один из двух вариантов: OK или Отмена.

    Важно: Если выбрана кнопка OK, то в сценарий возвращается значение true, если Отмена — значение false.

    confirm("Вы  действительно хотите завершить работу?");

    javascript confirm

  5. prompt()
  6. Синтаксис:
     
    [window.]prompt(сообщение,значение_поля_ввода)

    С помощью окна ввода, вызываемого методом prompt, пользователь может ввести данные, которые будут использоваться далее в сценарии.

    prompt("Как Вас зовут?", "Иван");

    Важно: Метод prompt принимает два аргумента: первый выводится в качестве простой строки в модальном окне; второй — значение по умолчанию в текстовом поле для ввода. Оба аргумента заключаются в кавычки.

    javascript prompt
    Важно: Для решения заданий следует иметь в виду, что функция prompt() возвращает строковое значение, т.е. если требуется производить дальнейшие вычисления с введенным значением, то необходимо преобразовать тип данных

Важно: Во всех трех случаях использования методов ввода или вывода объект window можно опускать:

window.alert("сообщение"); // строгий синтаксис
alert("сообщение"); // нестрогий синтаксис

Этот объект означает «окно», и для краткости обращения к методам разрешено его не использовать, поэтому в синтаксисе он выделен квадратными скобками


Пример 2:

  1. При загрузке страницы запросить у пользователя ввести имя (функция prompt()). С помощью метода document.write вывести на экран строку «Привет, введенное имя !».
  2. диалоговое окно prompt

  3. При помощи функции prompt() попросить пользователя ввести 2 числа. Выполнить произведение чисел и вывести результат на экран с помощью метода document.write. Вывод должен иметь следующий вид:
  4. работа с окном prompt


✍ Решение:
 

1 задание:

  • Создайте веб-страницу с html-скелетом и тегом script:
  • <html><head></head>
    <body>
    <!-- Сценарий -->
    <script>
    	// для кода JavaScript
    </script>
    <!-- Конец сценария -->
    </body></html>
  • В коде для javascript инициализируйте переменную для присваивания ей значения — имени, которое введет пользователь в модальное окно prompt():
  • var name = prompt("Введите Ваше имя");
    В результате данного присваивания в переменной name сохранится значение, которое введет пользователь в модальное окно.
  • Выведите сохраненное значение с помощью метода document.write() с несколькими параметрами, разделенными через запятую:
  • document.write("Привет, ", name," !");
  • Протестируйте сценарий в браузере.

2 задание:

  • Создайте веб-страницу с html-скелетом и тегом script.
  • В коде для javascript инициализируйте две переменных для присваивания им значений — чисел, которое введет пользователь в модальные окна prompt(). Для преобразования в целый тип используйте функцию parseInt().
  • Вспомним, что метод prompt() возвращает строковое значение. Поэтому для дальнейшей работы с числами, значения необходимо преобразовать в числовой тип:
    var a = parseInt(prompt("Введите первое число"));
    var b = parseInt(prompt("Введите второе число"));
    Преобразование также можно выполнить отдельным оператором:

    var a = prompt("Введите первое число");
    a = parseInt(a);
  • Выполните произведение переменных, выдав результат с помощью метода document.write(). Для «красивого вывода» используйте несколько параметров, перечисленных через запятую:
  • document.write(a, " * ", b, " = ", a*b);
  • Протестируйте сценарий в браузере.

Задание Js 2. Допишите фрагмент кода для конвертации строкового значения в числовое. Для вывода результата используйте метод document.write:

var x = prompt("Введите значение x ", "0"); 
var y = prompt("Введите значение y ", "0.0");
var integerX = ...
var floatY = ...
var result = integerX + floatY;
...;


Задание Js 3. Найдите ошибки в следующем фрагменте кода:

var firstName = prompt("Введите имя"; "сюда");
var lastName = promt("Введите фамилию");
int age = prompt("Введите возраст");
alert(Age);

Задание Js 5. Вычислить значение выражения по формуле (все переменные принимают вещественные значения):
задание javascript вывод текста
Предлагаемый алгоритм:

  • Запрос значения x
  • Вычисление выражения
  • Вывод результата при помощи метода alert


Вопросы для самоконтроля:

  1. Какие методы для вывода модальных окон в javascript Вы знаете?
  2. Какой метод позволяет вывести модальное окно для ввода данных?
  3. Какой из вариантов работы с методом alert, расположенных ниже, правильный?:
  1. alert('hello');
  2. window.alert('hello');

Поделитесь уроком с коллегами и друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить