VisualStudio Code | node.js | Watch in Chrome | Node Exec | Ctrl+S | Ctrl+KS | Ctrl+Shift+P

Ferramentas de trabalho

Node.js https://nodejs.org/en/ – O Node.js é uma plataforma para construir aplicações web de alta performance usando JavaScript. Esta linguagem pode ser usada do lado do cliente e do lado do servidor. É muito rápido porque assegura a ausência de bloqueios aquando a comunicação entre o cliente e o servidor

Chrome – Browser

VisualStudio Code - https://code.visualstudio.com/ Excelente Editor que permite trabalhar em várias linguagens e em HTML. Permite também trabalhar com node.js
                                - Instalar os Plugins Watch In Chrome e Node Exec

Links

Operadores - https://www.w3schools.com/js/js_arithmetic.asp
Manual Js -  https://developer.mozilla.org/en-US/docs/Web/JavaScript

Node.js - Utilizando as ferramentas de trabalho

Trabalhar com node.js - Em baixo podem ver duas formas de trabalhar com node.js 

          Nota1: Para utilizar o Node.js no VisualStudio Code é necessário instalar o node.js
          Nota1: Depois de abrir o terminal no VisualStudio Code o primeiro comando deverá ser node 

Exemplo d funcionamento da consola Node.js

Exemplo d funcionamento do Node.js no VisualStudio Code

1º Exemplo - Trabalhar com janelas Alert, confirm, prompt
window.alert("APARECE A JANELA ALERT");
window.confirm("Janela com Ok ou Cancelar");
window.prompt("Escreve qualquer coisa");

Variáveis e tipos de dados 
Concatenar e somar (+)  O operador para somar e concatenar é o mesmo, contudo concatena quando trata de caracteres ou strings e soma quando trata com números.
     - Number.parseInt converte de string para número inteiro
     - Number.parseFloat converte de string para número real
     - Variável.toLocaleUpperCase()  Converte texto em maiúsculas
     - Variável.to LowerCase()  Converte texto em minúsculas
     - length Fornece os tamanho de um texto em número de caracteres
     - document.writeln Output no body do browser

Exemplo 06
Neste exemplo foram utilizados vários comandos para tratamento de texto e declaração de variáveis.

Notas importantes:

window.alert(`a soma de ${n1} + ${n2} = ${s} `); // mensagem com window.alert e placeholder ${} // para utilizar o placeholder é necessário usar o acento grave ou CRASE


var n1 = Number.parseInt (window.prompt("Digita um número"));// converte String em número inteiro

Ver código em txt

Operadores Aritméticos 
https://www.w3schools.com/js/js_arithmetic.asp

Exemplo 07
Neste exemplo foram utilizados os operadores vários comandos para tratamento de texto e declaração de variáveis https://www.w3schools.com/js/js_arithmetic.asp

Notas importantes:
Nota1   ** Potência e.g. 5**2=25 
Nota2   Atenção à precedencia dos operadores
Nota3   = operador de atribuição
Nota4  X++ pós-incremento, ++X pré-incremento

Ver código em txt

Operadores de atribuição
https://www.w3schools.com/js/js_arithmetic.asp

Exemplo xXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Neste sexemplo foram utilizados os operadores vários comandos para tratamento de texto e declaração de variáveis https://www.w3schools.com/js/js_arithmetic.asp

Ver código em txt

Operadores Relacionais ou Operadores de Comparação
https://www.w3schools.com/js/js_operators.asp

Exemplo 08
Os operadores de comparação servem para comparar números, servem para verificar se um número é maior, menor, igual... a outro. https://www.w3schools.com/js/js_operators.asp

Notas importantes:
Nota1   = vs == vs === Atenta que:
= significa atribuição, e.g. X=5 (à variável X é atribuido o valor 5);
== verifica se os números são iguais NÃO verifica o tipo de dado
=== verifica se os números e os tipos de dados são iguais

Ver código em txt

Operadores ternários - São chamados de ternários porque são compostos por 3 partes (TESTE ? Verdade : Falso).

Operadores Lógicos (Não! E&& ou||) 
Precedencia  !   &&   ||
https://www.w3schools.com/js/js_operators.asp

Exemplo 08XXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXX


Os operadores de comapração servem para comparar números, servem para verificar se um número é maior, menor, igual... a outro. https://www.w3schools.com/js/js_operators.asp

Notas importantes:
Nota1   = vs == vs === Atenta que:
= significa atribuição, e.g. X=5 (à variável X é atribuido o valor 5);
== verifica se os números são iguais NÃO verifica o tipo de dado
=== verifica se os números e os tipos de dados são iguais

Ver código em txt

Instalação do Watch in chrome e NodeExec

Exemplos DOM - Neste exemplo vamos manipular o output da página através do JavaScript alterando os outputs HTML e os outputs JavaScript

Neste exemplo vamos manipular o output da página através do JavaScript alterando os outputs HTML e os outputs JavaScript

getElementsByTagName(`p`)[2] - trás um objeto html por nome da tag (no caso p [2] quer dizer 3º parágrafo do html, uma vez que a contagem começa em 0)

p2.style.color=`red` - Altera a cor do parágrafo dois para vermelho, no output HTML

Ver código em txt

Eventos DOM - Neste exemplo vamos os eventos do rato mouse (para ver a lista de eventos do mouse acede ao 
 https://developer.mozilla.org/en-US/docs/Web/Events depois Ctrl+F e escreve mouse)

Eventos mouse


mousedown Um botão do dispositivo apontador é pressionado.
mouseenter Um dispositivo apontador é movido para o elemento que tem o ouvinte conectado.
mouseleave Um dispositivo apontador é movido do elemento que tem o ouvinte conectado
.mousemove Um dispositivo apontador é movido sobre um elemento. (Disparado continuamente enquanto o mouse se move.)
mouseover Um dispositivo apontador é movido para o elemento que tem o ouvinte conectado ou para um de seus filhos.
mouseout Um dispositivo apontador é movido para fora do elemento que tem o ouvinte conectado ou fora de um de seus filhos.
mouseup Um botão do dispositivo apontador é liberado sobre um elemento.

Ver código em txt

Exemplo - Somar 2 números (formulário HTML + CSS+ JavaScript)
   getElementById      Variável.innerHTML ou innerText

Somar 2 números (formulário HTML + CSS+ JavaScript)


getElementById - serve para fazer a ligação entre os objetos HTML e o JavaScript

Variável.innerHTML ou innerText - Faz o output do JavaScript para o Browser (o innerHTML trás as formatações HTML e o innerText escreve sem formatação)

Ver código em txt

Exemplo - Utilizar a condição If ELSE - Condição simples

Paragraph

Ver código em txt

Exemplo - Utilizar a condição If ELSE - Condição composta
IF ANINHADO

Ver código em txt  
IF ANINHADO

Ver código em txt  
IF ANINHADO

Exemplo - Utilizar a condição
switch case break
switch (expressão) {}  

Ver código em txt  
switch case break

Primeiro site -   *.CSS    *.html     *.JS

Neste exercício o site responde automaticamente à hora local variando as imagens conforme a hora do dia Primeiro Site

Ver código em txt  

Segundo site -   *.CSS    *.html     *.JS

Neste exercício o site calcula a idade de uma pessoa mostrando um foto correspondente ao sexo e idade Segundo Site

Ver código em txt  

Onde colocar o JavaScrip no HTML? - Dentro de <head> ou <body> 

JavaScript dentro de <head>

Exemplo1 - Neste exemplo, o JavaScript foi colocado em <head>
A função "MinhaFunc" é chamada quando o botão é pressionado

<!DOCTYPE html>
<html>
<head>
<script>
function MinhaFunc() {
document.getElementById("exemplo").innerHTML = "O botão foi acionado. Olá Mundo";
}
</script>
</head>
<body>
<h2>Função alterar um parágrafo</h2>
<p id="exemplo">O botão ainda não foi acionado</p>
<button type="button" onclick="MinhaFunc()">Clica no botão </button>
</body>
</html>

JavaScript dentro de <body> OUTPUT

Exemplo2 - Neste exemplo, o JavaScript foi colocado em <body>
Não foi definida uma função. O código apenas soma 2 números. 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Somar 2 números com js dentro de body</h2>
<p id="exemplo"></p>
<script>
document.getElementById("exemplo").innerHTML=5+5;
</script>
</body>
</html>

JavaScript dentro de <body> OUTPUT com "document.write"

Exemplo3 - Neste exemplo, o JavaScript foi colocado em <body>
Soma dois números com recurso a document.write

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<h2>Somar 2 números com js dentro de body "document.write"</h2>
<script>
document.write(5 + 5);
</script>
</body>
</html