Функции JavaScript
Сегодня я проведу вас через урок JavaScript, который представляет собой функции в простой и понятной форме. Все, что вам нужно, это прочитать весь мой блог и опробовать предоставленные мной блоки кода.
Необходимый фон: все, что вам нужно, это редактор кода, чтобы вы могли писать свой код. Я использую Visual Studio Code, и вы можете использовать любые другие текстовые редакторы, такие как Sublime, notepad ++, с которыми вы знакомы. Обязательно сохраните свой код с расширением html (.html).
Давайте начнем!
Что такое функция?
Функция Java Script - это блок кода, предназначенный для выполнения определенной задачи.
Почему функции?
Основным преимуществом функций является возможность повторного использования. После того, как вы определили функцию, вы можете вызывать ее несколько раз в соответствии с вашими требованиями, предоставляя разные параметры, дающие разные результаты.
Определение функции
Для определения функции используется ключевое слово функция, за которым следует имя, за которым следует набор круглых скобок (). В скобках передаются параметры. Выполняемый код записан в фигурные скобки {}.
функция имя (параметр1, параметр2, параметр3) {
// напишите здесь свой код для выполнения
}
Примечание. Параметры функции описаны ниже.
Вызов функции
Чтобы выполнить функцию, нам нужно вызвать функцию. Для этого пишется имя функции, за которым следуют круглые скобки. В круглых скобках передаются аргументы.
имя_функции (аргумент1, аргумент2, аргумент3);
После того, как функция определена, вы можете вызывать ее сколько угодно раз.
Параметры функции
Параметры функции - это имена в определении функции. После определения параметра JavaScript позволяет вам использовать эти параметры для вашей функции.
Вы можете передать один параметр или несколько параметров одновременно, а также разные аргументы для одного параметра.
Неясно разница параметра и аргумента? Вот ответ.
Параметры записываются в скобках определения функции. Аргументы записываются внутри скобок при вызове функции.
Используя Параметры, мы говорим о функции, которая предоставляет вам столько данных. Используя аргументы, мы передаем фактические значения этих данных.
Заявление о возврате
Функция может содержать оператор возврата внутри фигурных скобок. Это полезно для получения значения после такого процесса, как расчет. Это дает окончательное значение, возвращаемое функцией. Это возвращаемое значение может быть присвоено переменной и использовать его.
<!DOCTYPE html>
<html>
<body>
<p>This simple function dispaly the multiplication of 4 * 3</p>
<script>
function myFunction(a, b) { //function definition
return a * b;
}
var x = myFunction(4, 3); //function calling
document.writeln(x); //priting output value
</script>
</body>
</html>
Пока все хорошо!
Оповещение, подсказка, подтверждение
JavaScript предоставляет в основном три типа всплывающих окон, которые будут отображаться в вашем браузере после выполнения кода.
Окно предупреждения
Вы когда-нибудь видели, что браузер задает вам такие вопросы, как:
Вы хотите покинуть эту страницу?
И вам нужно нажать ОК, чтобы продолжить.
Это окно с предупреждением. Окно предупреждения можно использовать, если вы хотите убедиться, что информация доходит до пользователя. Чтобы продолжить, пользователь должен нажать кнопку "ОК".
Функция предупреждения принимает единственный параметр - текст, который должен отображаться пользователю во всплывающем окне.
предупреждение (Вы хотите покинуть эту страницу? \ n Нажмите "ОК");
<!DOCTYPE html>
<html>
<head>
<title>Alert Box</title>
</head>
<body>
<h2>JavaScript Alert Box</h2>
<script>
alert("Do you want to leave this page?\nClick OK");
</script>
</body>
</html>
Подсказка
Поле подсказки используется для ввода пользователем значения перед входом на страницу. В окне подсказки есть два варианта: ОК или Отмена. Пользователь должен нажать ОК или Отмена, чтобы продолжить после ввода введенного значения.
Если пользователь нажимает кнопку «ОК», в поле возвращается входное значение. Если пользователь нажимает кнопку «Отмена», в поле возвращается значение null.
Здесь в поле приглашения вводятся два параметра. Один - метка, второй - строка
Ярлык: то, что вы хотите отобразить в текстовом поле
Строка: строка по умолчанию для отображения в текстовом поле. Это необязательно.
Если нажать Отмена,
<!DOCTYPE html>
<html>
<head>
<title>Prompt Box</title>
</head>
<body>
<h2>JavaScript Prompt Box</h2>
<script>
var user = prompt("Please enter your age");
alert(user);
</script>
</body>
</html>
Подтвердить поле
Поле подтверждения часто используется, чтобы пользователь мог что-то подтвердить или принять. В окне подтверждения также есть две опции: ОК или Отмена.
Если пользователь нажимает кнопку «ОК», в поле возвращается значение истина.
Если пользователь нажимает кнопку «Отмена», в поле возвращается значение false.
<!DOCTYPE html>
<html>
<head>
<title>Confirm Box</title>
</head>
<body>
<h2>JavaScript Confirm Box</h2>
<script>
var result = confirm("Do you really want to leave this page?");
if (result == true) {
alert("Thanks for visiting");
}
else {
alert("Thanks for staying with us");
}
</script>
</body>
</html>
Вы не знакомы с условными операторами JavaScript? Щелкните здесь.
Локальные переменные
Переменные, к которым можно получить доступ только внутри объявленной функции, являются глобальной переменной. Они являются локальными по отношению к функции.
Функции, используемые как значения переменных
Ранее вы видели, что переменной была присвоена функция.
Функция может быть присвоена переменной, что означает, что функцию можно использовать для вычислений и формул.
var имя_переменной = имя_функции (параметр);
Попробуйте сами написать функцию прямо сейчас. Отредактируйте и посмотрите, что получится.
Вот калькулятор, созданный с использованием функций JavaScript.
<!-- create table -->
<body>
<script>
//function for displaying values
function dis(val){
document.getElementById("edu").value+=val
}
//function for evaluation
function solve(){
let x = document.getElementById("edu").value
let y = eval(x)
document.getElementById("edu").value = y
}
//function for clearing the display
function clr(){
document.getElementById("edu").value = ""
}
</script>
<div class = title >JavaScript Calculator</div>
<table border="1">
<tr>
<td><input type="button" value="c" onclick="clr()"/> </td>
<td colspan="3"><input type="text" id="edu"/></td>
<!-- clr() function will call clr to clear all value -->
</tr>
<tr>
<!-- creating buttons and assigning values-->
<td><input type="button" value="+" onclick="dis('+')"/> </td>
<td><input type="button" value="1" onclick="dis('1')"/> </td>
<td><input type="button" value="2" onclick="dis('2')"/> </td>
<td><input type="button" value="3" onclick="dis('3')"/> </td>
</tr>
<tr>
<td><input type="button" value="-" onclick="dis('-')"/> </td>
<td><input type="button" value="4" onclick="dis('4')"/> </td>
<td><input type="button" value="5" onclick="dis('5')"/> </td>
<td><input type="button" value="6" onclick="dis('6')"/> </td>
</tr>
<tr>
<td><input type="button" value="*" onclick="dis('*')"/> </td>
<td><input type="button" value="7" onclick="dis('7')"/> </td>
<td><input type="button" value="8" onclick="dis('8')"/> </td>
<td><input type="button" value="9" onclick="dis('9')"/> </td>
</tr>
<tr>
<td><input type="button" value="/" onclick="dis('/')"/> </td>
<td><input type="button" value="." onclick="dis('.')"/> </td>
<td><input type="button" value="0" onclick="dis('0')"/> </td>
<!-- Evaluating function call eval()-->
<td><input type="button" value="=" onclick="solve()"/> </td>
</tr>
</table>
</body>
Эти сайты будут полезны для самообучения.
