Introdução ao
JavaScript
Onde colocar JavaScript
Em HTML, o código JavaScript é inserido entre as tags <script> e
</script>.
<script>
document.getElementById("demo").innerHTML = "O meu primeiro JS";
</script>
JavaScript no <head>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Parágrafo mudou!";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">Um parágrafo.</p>
<button type="button" o
nclick="myFunction()">Clica aqui!</button>
</body>
</html>
JavaScript no <body>
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="demo">Um parágrafo.</p>
<button type="button" o
nclick="myFunction()">Clica aqui!</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Parágrafo mudou!";
}
</script>
</body>
</html>
JavaScript em arquivo externo
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">Um parágrafo.</p>
<button type="button" onclick="myFunction()">Clica aqui!</button>
<p>(Função almacenada em um arquivo externo "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
Saída de dados
JavaScript pode "exibir" dados de maneiras diferentes:
- Escrevendo em um elemento HTML, usando innerHTML.
- Escrevendo na saída HTML usando document.write( ).
- Escrevendo em uma caixa de alerta, usando window.alert( ).
- Escrevendo no console do navegador, usando console.log( ).
Usando Inner HTML
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
Usando document.write( )
<html>
<body>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Usando window.alert( )
<html>
<body>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Usando console.log( )
<script>
console.log(5 + 6);
</script>
Statements (declaração de
variáveis)
var Declara uma variável, opcionalmente inicializando com um valor.
let Declara acesso ao local da variável, opcionalmente inicializando
com um valor.
const Declara uma constante de apenas leitura.
Tipos de variáveis em JavaScript
Os tipos de variáveis em JS são classificados em:
Strings — Uma String nada mais é que texto puro.
Numbers — São os números, seja eles integer, float, double etc.
Booleans — São os operadores booleanos (true ou false)
Arrays — É uma estrutura de dado para armazenar uma coleção de
valores, sendo eles de qualquer tipo.
Objects — Conjunto de atributos aninhados a uma variável denomina-se
um objeto
Null - Uma palavra resrevada especial denotando um valor nulo. (Como o
JavaScript diferencia maiúsculas de minúsculas, nulo não é o mesmo que
Nulo, NULL ou qualquer outra variante.)
NaN - Not a Number
Undefined
Operadores Matemáticos
Operadores de Atribuição
Operadores Relacionais
Operadores Lógicos
JavaScript Functions (funcões)
Uma função JavaScript é um bloco de código projetado para executar uma
tarefa específica.
Uma função JavaScript é executada quando "algo" a invoca (chama).
//Função sem passagem de parâmetros
function dividir(){
alert(6 /2 );
}
//Função com passagem de parâmetros
function multiplicar(num1, num2){
alert(num1 * num2);
}
multiplicar(6,2)
//Função com passagem de parâmetros
function subtrair(num1, num2){
return num1 - num2;
}
resultado = subtrair(6, 2);
alert(resultado);
Estruturas de Decisão
if - Se (acontecer tal coisa)
else - Senão
if (condição){
//comandos
}
if (condição){
//comandos 1
}else{
//comandos 2
}
Estruturas de Repetição
for
for (var i=0; i<3; i++){
//comandos
}
while
while (i<3){
//comandos
i++
}
Eventos