Eu tenho esse código em javascript e quero tirar algumas dúvidas:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>Faça uma saída de soma de 2 inteiros, ex: alert(2 + 2)</h3>
</div>
<div class="col-lg-3">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">N1</span>
</div>
<input type="text" class="form-control" id="n1" placeholder="Digite o n1">
</div>
</div>
<div class="col-lg-3">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">N2</span>
</div>
<input type="text" class="form-control" id="n2" placeholder="Digite o n2">
</div>
</div>
<div class="col-lg-1">
<button class="btn btn-success">Somar</button>
</div>
<div class="col-lg-3">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Result</span>
</div>
<input type="text" class="form-control" id="result" placeholder="Result">
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="soma.js"></script>
</html>
JS
var result = document.querySelector("input#result");
var button = document.querySelector("button");
/* function add(n1, n2) { ---> Possui parâmetros
n1 = document.querySelector("input#n1");
n2 = document.querySelector("input#n2");
result.value = parseInt(n1.value) + parseInt(n2.value);
return result;
} */
function add(){
var n1 = document.querySelector("input#n1");
var n2 = document.querySelector("input#n2");
result.value = parseInt(n1.value) + parseInt(n2.value);
}
button.onclick = function(){
add();
}
- É a mesma função, porém escrita de maneiras diferentes, qual situação devo usar uma função com parâmetros e outra não?
- Testei a função de parâmetros e com retorno normalmente, porém quando chamo essa função, não especifico nenhum argumento nela, porém emite o mesmo resultado, como isso é possível (é por conta dos parâmetros serem opcionais?)?
- Talvez javascript não seja a melhor ferramenta para esse tipo de pergunta, mas caso queremos usar tipagem forte, teria como? Se sim, qual seria a forma?
- Se eu colocar um
parseInt
emresult
, ele diz que o retorno deve sernumber
, porém se tento executar qualquer uma das funções, não retorna nada, por quê disso?