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

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

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

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


Пример 2:

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


✍ Решение:
 

    Ответ:

    Задание 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);

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

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

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


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

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

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

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

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

    *
    *

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