O evento onload da página HTML irá realizar a chamada da função iniciar(). A função,
por sua vez, utiliza o método write do objeto document para escrever um determinado
conteúdo na área de trabalho do navegador.
A função iniciar() irá utilizar o objeto navigator, e por meio das propriedades appName e appVersion, irá identificar o nome e a versão do navegador que o
usuário está utilizando.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bem vindo ao JavaScript</title>
<meta charset="UTF-8">
<meta name="description" content=">
</head>
<body onload="iniciar()">
<script type="text/javascript">
function iniciar(){
document.write("<h1>" + document.title + "</h1>");
document.write("Você está utilizando o navegador " + navigator.appName + "<br>");
document.write("E a versão do navegador é " + navigator.appVersion + "<br>");
}
</script>
</body>
</html>
Variáveis em JavaScript
var
Escopo:
A variável declarada com var tem escopo de função ou escopo global. Se declarada fora de uma função,
ela será acessível em todo o script.
Redefinição:
Você pode redefinir uma variável var dentro do mesmo escopo.
let
Escopo:
A variável declarada com let tem escopo de bloco. Isso significa que ela é acessível apenas dentro do bloco de
código onde foi definida (por exemplo, dentro de um if, for ou {}).
Redefinição:
Você não pode redefinir uma variável let no mesmo escopo.
const
Escopo:
Assim como let, a variável declarada com const também tem escopo de bloco.
Imutabilidade:
A principal característica de const é que uma vez que a variável é atribuída, seu valor não pode ser reatribuído.
No entanto, se o valor for um objeto ou um array, suas propriedades ou elementos ainda podem ser modificados.
Hoisting:
Segue o mesmo comportamento de hoisting que let, não podendo ser acessada antes da declaração.
Uso de Containers em JavaScript
Apesar da linguagem HTML não permitir a inserção ou modificação do conteúdo após o carregamento da página, ela oferece
alguns elementos (tags) que atuam como container de dados.
Os elementos containers são aqueles que permitem marcar uma determinada porção de texto. Posteriormente, por meio de
scripts, esse texto pode ter o seu contúdo modificado após a página ser carregada.
Abaixo temos o exemplo deste tipo de uso, com o código a seguir:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Elemento Container</title>
<meta charset="UTF-8">
<meta name="description" content="Uso do elemento Container">
</head>
<body>
<script type="text/JavaScript">
function login(){
var nome = prompt("Qual o seu nome ? ","Seu nome");
resultado.innerHTML = "Olá, " + nome.toUpperCase() + ".";
}
</script>
<h1>Identificação</h1>
<input type="button" value="Login" onclick="login()">
<hr>
<div id="resultado">Olá.</div>
</body>
</html>
Explicando:
O uso do innerHTML.
O comando innerHTML em JavaScript é uma propriedade que permite acessar ou modificar
o conteúdo HTML de um elemento.
Por exemplo:
> Para obter o conteúdo: Se você tiver um elemento HTML, como um <div>, pode usar elemento.innerHTML para
obter o conteúdo HTML dentro desse <div>.
> Para definir o conteúdo: Você também pode usar elemento.innerHTML = "<p>Novo conteúdo</p>" para substituir
o conteúdo existente do elemento pelo novo HTML que você especificar.
Outro exemplo do uso de containers:
Controle de exibir imagens
JavaScript possibilita acessar os arquivos com imagens e permite que uma imagem seja trocada por outra. Neste
caso, não é necessário que a página HTML original seja recarregada. A partir dessa caracteristica, á possível
dinamizar as páginas, sem a necessidade de usar scripts com códigos complexos.
No código abaixo quando passamos o mouse em cima da lâmpada, ela irá ascender, e quando retiramos o mouse ela
irá apagar.
Para isso estaremos utilizando os eventos onMouseOver, que em inglês quer dizer 'quando o mouse tiver por cima',
que detecta a ação do mouse estar sobre um determinado elemento da página, e o evento onMouseOut detecta o contrário:
o evento de sair com o mouse de uma região.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Controle de Imagens</title>
<meta charset="UTF-8">
<meta name="description" content="Controle de imagens atravez do JavaScript.">
</head>
<body>
<script type="text/JavaScript">
function mudar(imagem){
lampada.src = imagem;
}
</script>
<h1>Imagens</h1>
<a onmouseover="mudar('lamp_lig.jpg')" onmouseout="mudar('lamp_desl.jpg')">
<img src="lamp_desl.jpg" border="0" id="lampada">
</a>
</body>
</html>
JavaScript com Formulários
Com JavaScript, é possível acessar os elementos de um formulário definidos em HTML. Dessa forma,
é possível realizar verificações e alterações no conteúdo dos elementos, o que oferece mais
possibilidades de interação com o usuário final da aplicação.
O código abaixo irá capturar os valores numéricos, e após o usuário clicar no botão Somar, o
programa irá realizar a soma e mostrar o resultado.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Soma dois valores</title>
<meta charset="UTF-8">
<meta name="description" content="Formulário em JavaScript para somar dois valores.">
</head>
<body>
<script type="text/JavaScript">
function Somar(){
// Obtendo os valores dos campos de entrada
var v1 = parseFloat(document.getElementById("num1").value);
var v2 = parseFloat(document.getElementById("num2").value);
var res = 0.0;
// Verificar se os valores são números válidos
if (isNaN(v1) || isNaN(v2)) {
alert("Por favor, insira números válidos.");
return; // Para a função caso os valores não sejam válidos
}
// Realizando a soma
res = v1 + v2;
// Exibindo o resultado
document.getElementById("resul").value = res;
}
</script>
<h1>Soma de dois valores</h1>
<form name="fsomar">
Valor 1: <input type="text" id="num1" value="0"><br>
Valor 2: <input type="text" id="num2" value="0"><br><br>
<input type="button" value="Somar" onclick="Somar()">
<input type="reset" value="Limpar"><br><br>
Resultado : <input type="text" id="resul" value="0" readonly>
</form>
</body>
</html>
Verificação de Números válidos
Usei a função isNaN() para verificar se os valores são números válidos. Caso contrário, exibe um alerta.
// Verificar se os valores são números válidos
if (isNaN(v1) || isNaN(v2)) {
alert("Por favor, insira números válidos.");
return; // Para a função caso os valores não sejam válidos
}
Botões de Radio
Os botões de Rádio (Radio Button) são utilizandos quando é necessário restringir os valores de uma
determinada entrada de dados a um conjunto de opções possíveis. Assim com base no projeto da
calculadora utilizaremos um conjunto de botões para que o usuário possa escolher a operação
matemática a ser realizada.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Uso do radio button</title>
<meta charset="UTF-8">
<meta name="description" content="Formulário em JavaScript soma valores dependendo da escolha com radio button.">
</head>
<body>
<script type="text/JavaScript">
function calcular(){
// Obtendo os valores dos campos de entrada
var v1 = parseFloat(document.getElementById("num1").value);
var v2 = parseFloat(document.getElementById("num2").value);
var res = 0.0;
// Verificar se os valores são números válidos
if (isNaN(v1) || isNaN(v2)) {
alert("Por favor, insira números válidos.");
return; // Para a função caso os valores não sejam válidos
}
// Verificando a operação a ser realizada.
if(somar.checked === true){
// Realizando a soma
res = v1 + v2;
}else if(subtrair.checked === true){
// Realizando a subtração
res = v1 - v2;
}else if(multiplicar.checked === true){
// Realizando a multiplicação
res = v1 * v2;
}else{
if( v2 != 0){
// Realizando a divisão
res = v1/v2;
}else{
alert("Valor de v2 não pode ser zero !!!");
return; //Para a função caso v2 tenha valor inválido.
}
}
// Exibindo o resultado
document.getElementById("resul").value = res;
}
</script>
<h1>Operação com dois valores</h1>
<form name="foperacao">
Valor 1: <input type="text" id="num1" value="0"><br>
Valor 2: <input type="text" id="num2" value="0"><br><br>
Opções de operação:<br>
<input type="radio" id="somar" name="op" checked>Somar
<input type="radio" id="subtrair" name="op">subtrair
<input type="radio" id="multiplicar" name="op">multiplicar
<input type="radio" id="dividir" name="op">dividir
<br>
<input type="button" value="Calcular" onclick="calcular()">
<input type="reset" value="Limpar"><br><br>
Resultado : <input type="text" id="resul" value="0" readonly>
</form>
</body>
</html>
Caixa de Seleção
A caixa de seleção é outro elemento em um formulário, que possibilita limitar a escolha de entrada de
dados em um formulário HTML a um conjunto pré determinado de valores.
Veja o código abaixo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Uso do radio button</title>
<meta charset="UTF-8">
<meta name="description" content="Formulário em JavaScript soma valores dependendo da escolha com radio button.">
</head>
<body>
<script type="text/JavaScript">
function calcular(){
// Obtendo os valores dos campos de entrada
var v1 = parseFloat(document.getElementById("num1").value);
var v2 = parseFloat(document.getElementById("num2").value);
var res = 0.0;
var vop = document.getElementById("op").value;
// Verificar se os valores são números válidos
if (isNaN(v1) || isNaN(v2)) {
alert("Por favor, insira números válidos.");
return; // Para a função caso os valores não sejam válidos
}
// Verificando a operação a ser realizada.
if(vop === '+'){
// Realizando a soma
res = v1 + v2;
}else if(vop === '-'){
// Realizando a subtração
res = v1 - v2;
}else if(vop === '*'){
// Realizando a multiplicação
res = v1 * v2;
}else if(vop === '/'){
if( v2 != 0){
// Realizando a divisão
res = v1/v2;
}else{
alert("Valor de v2 não pode ser zero !!!");
return; //Para a função caso v2 tenha valor inválido.
}
}else{
alert("Escolha a opção desejada.");
return;
}
// Exibindo o resultado
document.getElementById("resul").value = res;
}
</script>
<h1>Operação com dois valores</h1>
<form name="foperacao">
Valor 1: <input type="text" id="num1" value="0"><br>
Valor 2: <input type="text" id="num2" value="0"><br><br>
Opções de operação:<br><br>
<select id="op">
<option value="">Escolha uma opção</option>
<option value="+">Soma</option>
<option value="-">Subtração</option>
<option value="*">Multiplicação</option>
<option value="/">Divisão</option>
</select>
<br><br>
<input type="button" value="Calcular" onclick="calcular()">
<input type="reset" value="Limpar"><br><br>
Resultado : <input type="text" id="resul" value="0" readonly>
</form>
</body>
</html>
