Как вывести результат в JavaScript (2 часть)
Для того, чтобы объявить в JavaScript переменную, пишут так:
var name;
где name – осмысленное название переменной, написанное латиницей
var multi_1; — мы объявляем переменную, говорим что у нас есть пустая ячейка
и туда надо что-то положить (присвоить).
Положим туда число, которые вводит пользователь. Переменной multi_1 присвоена запись, теперь в multi_1 лежит число, которое ввел пользователь.
Объявим вторую переменную и положим туда число, введенное пользователем во второй input.
var multi_2;
multi_2 = document.getElementById(‘inp_2’).value;
После введения в документ переменных, больше нет нужды писать длинные выражения, они будут написаны только один раз – первый. Заменим наше громоздкое выражение переменными. Вот так:
В ходе работы мы можем менять содержимое переменных — объявлять новое значение переменной, тогда старое содержимое переменной автоматически перезапишется на новое.
Также можно одновременно и объявлять переменную и присваивать ей значение. Эта запись
var multi_1 = document.getElementById(‘inp_1’).value;
равносильна этой записи.
var multi_1;
multi_1 = document.getElementById(‘inp_1’).value;
Нежелательно раскидывать объявление переменных по всему коду, можно перечислить все вводимые переменные через запятую в начале скрипта, добавляя их туда по ходу написания кода.
Такой подход, позволяет увидеть все переменные, прост в использовании и в дальнейшем будет использоваться для оптимизации работы скрипта.
Тип переменных
Положить в ячейку можно не только выражение, но и числа, строки, функции. В JavaScript коде, не нужно указывать тип переменных, строки надо заключать в кавычки.
var test = ‘Hello baby’;
Операции с переменными
С переменными можно производить различные математические действия: сложение, вычитание, деление и.т.д.
var number1 = 10;
var number2 = 20;
alert(number1+number2);
Ошибки в переменной
Если значение переменной number1 оставить пустым, то в консоли разработчика или в окошке alert, появиться ошибка NaN – не число. Нельзя число 20 сложить неизвестно с чем и ждать результата.
При попытке просто вывода пустой переменной, мы увидим undefined. Это предупреждение, что содержимое ячейки number1 не определено. В консоли разработчика, можно видеть все ошибки по JavaScript, но бывает так, что ошибок нет, а скрипт не работает. В таком случае надо искать причину в HTML/CSS коде, других вариантов нет.
Вывод результата
После тега hr, добавим в HTML разметку span, куда выведется результат умножения двух чисел.
На данный момент результат мы видим только в окошке alert, но хотим увидеть его на странице в теге span.
function multi() var multi_1, multi_2;
multi_1 = document.getElementById(‘inp_1’).value;
multi_2 = document.getElementById(‘inp_2’).value;
alert(multi_1*multi_2);
>
Нам надо убедиться, что мы имеем дело с числами, поэтому сделаем проверку.
multi_1 = parseInt (multi_1);
multi_2 = parseInt (multi_2);
parseInt – это функция, которая проверяет содержимое input и если потребуется преобразование в число, то сделает это. Если пользователь случайно введет, число 10.5 или 10d, то функция сама обрежет до целого числа. Нам нужны числа, а не строки.Необходимо создать ещё одну переменную. назовем её result и присвоим значение умножения. В ячейке result будет храниться результат умножения двух чисел.
var result;
result = multi_1*multi_2;
Вернемся к тегу span, где планируется вывод результата умножения. Мне надо получить элемент span c id result_multi, мы получаем весь элемент span со всеми его свойствами.
Но мне нужно только одно значение, которое отвечает за то, что будет выводиться между парными тегами span, за это отвечает свойство innerHTML.
При выполнении этой команды, браузер найдет элемент с указанным id и внутри тега span, выведет значение переменной result.
Перед начинающим веб-разработчиком не стоит вопрос – изучать или не изучать JavaScript. Вопрос лишь в том, как максимально эффективно это делать, чтобы после изучения, можно было бы легко применять свои полученные знания на практике? Дело в том, что я разработал уникальный видео-курс по JavaScript, с практической информацией, которую я использую в создании сайтов.
Создано 31.12.2018 10:30:00
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Возвращаемые значения функций
Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже.
| Необходимые навыки: | Базовая компьютерная грамотность, знание основ HTML и CSS, JavaScript first steps, Functions — reusable blocks of code. |
|---|---|
| Цели: | Понять что такое возвращаемое значение функции и как его использовать. |
Что из себя представляют возвращаемые значения?
Возвращаемые значения — это на самом деле просто значения, которые функция возвращает после своего завершения. Вы уже неоднократно встречали возвращаемые значения, хотя, возможно, и не осознавали этого. Напишем небольшой код:
var myText = "I am a string"; var newString = myText.replace("string", "sausage"); console.log(newString); // функция replace() принимает строку, // заменяет одну подстроку другой и возвращает // новую строку со сделанными заменами
Мы уже видели этот блок кода в нашей первой статье про функции. Мы вызываем функцию replace() на строке myText и передаём ей 2 параметра — заменяемую подстроку и подстроку, которой будем заменять. Когда функция завершит выполнение, она вернёт значение, которым является новая строка со сделанными в ней заменами. В коде выше мы сохраняем это возвращаемое значение как значение переменной newString .
Если вы посмотрите на функцию replace() на MDN reference page, вы увидите секцию под названием Return value. Очень важно знать и понимать какие значения возвращаются функциями, так что мы пытаемся включать эту информацию везде, где это возможно.
Некоторые функции не возвращают значения( на наших reference pages, возвращаемое значение обозначено как void или undefined в таких случаях). Например, в функции displayMessage() которую мы сделали в прошлой статье, в результате выполнения функции не возвращается никакого значения. Функция всего лишь отображает что-то где-то на экране.
В основном, возвращаемое значение используется там, где функция является чем-то вроде вспомогательного звена при вычислениях. Вы хотите получить результат, который включает в себя некоторые значения. Эти значения вычисляются функцией, которая возвращает результат так, что он может быть использован в следующих стадиях вычисления.
Использование возвращаемых значений в ваших собственных функциях
Чтобы вернуть значение своей функции, вы должны использовать ключевое слово return. Мы видели это в действии недавно — в нашем примере random-canvas-circles.html. Наша функция draw() отрисовывает где-то на экране 100 случайных кружков.
function draw() ctx.clearRect(0, 0, WIDTH, HEIGHT); for (var i = 0; i 100; i++) ctx.beginPath(); ctx.fillStyle = "rgba(255,0,0,0.5)"; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ctx.fill(); > >
Внутри каждой итерации есть 3 вызова функции random() . Это сделано чтобы сгенерировать случайное значение для текущей координаты x, y и для радиуса. Функция random() принимает 1 параметр (целое число) и возвращает случайное число в диапазоне от 0 до этого числа. Выглядит это вот так:
function random(number) return Math.floor(Math.random() * number); >
Тоже самое может быть написано вот так:
function random(number) var result = Math.floor(Math.random() * number); return result; >
Но первую версию написать быстрее и она более компактна.
Мы возвращаем результат вычисления Math.floor(Math.random()*number) каждый раз когда функция вызывается. Это возвращаемое значение появляется в момент вызова функции и код продолжается. Так, например, если мы выполним следующую строчку:
.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
и 3 вызова random() вернут значения 500, 200 и 35, соответственно, строчка будет выполнена как если бы она была такой:
.arc(500, 200, 35, 0, 2 * Math.PI);
Сначала выполняются вызовы функции random() , на место которых подставляются возвращаемые ей значения, а затем выполнятся сама строка.
Активное обучение: наша собственная, возвращающая значение функция
Теперь напишем нашу собственную возвращающую значение функцию.
function squared(num) return num * num; > function cubed(num) return num * num * num; > function factorial(num) var x = num; while (x > 1) num *= x - 1; x--; > return num; >
.onchange = function () var num = input.value; if (isNaN(num)) para.textContent = "You need to enter a number!"; > else para.textContent = num + " squared is " + squared(num) + ". " + num + " cubed is " + cubed(num) + ". " + num + " factorial is " + factorial(num) + "."; > >;
Примечание: Если у вас проблемы с работой данного примера, не стесняйтесь сверить ваш код с работающей версией finished version on GitHub (или смотрите живой пример), или спросите нас.
К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счёт квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу num ?
Это упражнение привнесло парочку важных понятий в изучении того, как использовать ключевое слово return . В дополнение:
- Приведите другой пример написание обработчика ошибок. Это довольно хорошая идея проверять что важные параметры предоставлены в правильном типе и если они опциональны то предусматривать для них значения по умолчанию. В таком случая ваша программа с меньшей вероятность подвержена ошибкам.
- Поразмышляйте о идее создания библиотеки функций. Чем дальше вы будите расти в профессиональном плане, тем больше будете сталкиваться с однотипными вещами. Это хорошая идея начать собирать свою собственную библиотеку функций, которые вы часто используют — в таком случае вы сможете просто скопировать их в ваш новый код или просто добавить их в любую HTML страничку, где это требуется.
Заключение
Функции очень полезны и несмотря на то, что об их синтаксисе и функциональности можно говорить долго, у нас есть довольно понятные статьи для дальнейшего обучения.
Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью ещё раз или свяжитесь с нами для получения помощи.
Смотрите также
- Функции более подробно — подробное руководство, охватывающее более продвинутую информацию, связанную с функциями.
- Колбэк-функции в JavaScript — распространённый паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.
- Назад
- Обзор: Building blocks
- Далее
In this module
- Making decisions in your code — conditionals
- Looping code
- Functions — reusable blocks of code
- Build your own function
- Function return values
- Introduction to events
- Image gallery
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как вывести результат функции javascript в html
Функция может возвращать результат. Для этого используется оператор return , после которого указывается возвращаемое значение:
function sum (a, b)
В данном случае функция sum() принимает два параметра и возвращает их сумму. После оператора return идет возвращаемое значение. В данном случае это значение константы result , в реальности это может быть любое выражение, в том числе и результат другой функции.
После получения результата функции мы можем присвоить его какой-либо другой переменной или константе:
function sum (a, b) < return a + b; >let num1 = sum(2, 4); console.log(num1); // 6 const num2 = sum(6, 34); console.log(num2); // 40
Функция может возвратить только одно значение. Если же нам надо возвратить несколько значений, то мы можем возвратить их в виде массива:
function rectangle(width, height) < const perimeter = width *2 + height * 2; const area = width * height; return [perimeter, area]; >const rectangleData = rectangle(20, 30); console.log(rectangleData[0]); // 100 - периметр прямоугольника console.log(rectangleData[1]); // 600 - площадь прямоугольника
В данном случае в функцию rectangle передаются ширина и высота прямоугольника, а внутри функции по этим данным вычисяем периметр и площадь прямоугольника и в виде массива возвращаем из функции.
В качестве альтернативы можно поместить многочисленные возвращаемые данные в один объект:
function rectangle(width, height)< const rectPerimeter = width *2 + height * 2; const rectArea = width * height; return ; > const rectangleData = rectangle(20, 30); console.log("Perimeter:", rectangleData.perimeter); // 100 - периметр прямоугольника console.log("Area:", rectangleData.area); // 600 - площадь прямоугольника
Возвращение функции из функции
Одна функция может возвращать другую функцию:
function menu(n) < if(n==1) return function(x, y)< return x + y;>else if(n==2) return function(x, y) < return x - y;>else if(n==3) return function(x, y) < return x * y;>return function() < return 0;>> const action = menu(1); // выбираем первый пункт - сложение const result = action(2, 5); // выполняем функцию и получаем результат в константу result console.log(result); // 7
В данном случае функция menu() в зависимости от переданного в нее значения возвращает одну из трех функций или пустую функцию, которая просто возвращает число 0.
Далее мы вызываем функцию menu и получаем результат этой функции — другую функцию в константу action.
const action = menu(1);
То есть здесь action будет представлять функцию, которая принимает два параметра и возвращает число. Затем через имя константы мы можем вызвать эту функцию и получить ее результат в константу result:
const result = action(2, 5);
Подобным образом мы можем получить и другую возвращаемые функции:
function menu(n) < if(n==1) return function(x, y)< return x + y;>else if(n==2) return function(x, y) < return x - y;>else if(n==3) return function(x, y) < return x * y;>return function()< return 0;>; > let action = menu(1); console.log(action(2, 5)); // 7 action = menu(2); console.log(action(2, 5)); // -3 action = menu(3); console.log(action(2, 5)); // 10 action = menu(190); console.log(action(2, 5)); // 0
Аналогичным образом можно возвращать функции по имени:
function sum(x, y) < return x + y;>function subtract(x, y) < return x - y;>function multiply(x, y) < return x * y;>function zero() < return 0;>function menu(n) < switch(n)< case 1: return sum; case 2: return subtract; case 3: return multiply; default: return zero; >> let action = menu(1); console.log(action(5, 4)); // 9 action = menu(2); console.log(action(5, 4)); // 1 action = menu(3); console.log(action(5, 4)); // 20 action = menu(190); console.log(action(5, 4)); // 0
Вывод данных Javascript
У JavaScript есть несколько различных способов «отобразить» данные:
- Запись в HTML элемент при помощи свойства innerHTML.
- Запись в вывод HTML при помощи метода document.write().
- Запись в окно предупреждений при помощи метода window.alert().
- Запись в консоль браузера при помощи метода console.log().
Использование innerHTML
Чтобы получить доступ к HTML элементу, JavaScript должен воспользоваться методом document.getElementById(id). Атрибут id определяет идентификатор HTML элемента. Свойство innerHTML определяет выводимый HTML контент:
Моя веб-страница
Первый параграф
Изменение свойства innerHTML элемента HTML это обычный способ вывода данных в HTML.
Использование document.write()
В тестовых целях для вывода данных можно использовать метод document.write():
Моя веб-страница
Первый параграф
Следует помнить, что использование метода document.write() после полной загрузки HTML документа удалит весь существующий HTML код:
Моя веб-страница
Первый параграф
Метод document.write() следует использовать только для тестирования.
Использование window.alert()
Для отображения данных также можно использовать окно сообщений. Для этого нужно воспользоваться методом window.alert():
Моя веб-страница
Первый параграф
Использование console.log()
Во время отладки скрипта, чтобы увидеть некие данные, вы можете вывести их в консоль браузера. Для этого используется метод console.log():
Подробнее об отладке скриптов будет рассказано в следующих главах.