https://www.asolucoesweb.com.br/detalhes/javascript-para-iniciantes
- 01 - Ferramentas e servidor
- 02 - Variáveis e escopo
- 03 - Bom e Dom
- 04 - Seletores Html
- 05 - Funções
- 06 - Closures
- 07 - Callbacks
- 08 - Funções assíncronas
- 09 - Eventos parte 1
- 10 - Eventos parte 2
- 11 - Arrays
- 12 - Loopings
- 13 - Condicionais
- 14 - Considerações finais
-> npm init
{
"name": "aula01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "lite-server"
},
"author": "josemalcher",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.3.0"
}
}
-> npm run dev
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aula 01</title>
</head>
<body>
<script>
var nome = "josemalcher";
console.log(nome);
</script>
</body>
</html> var idade = 34; //global
function idadePEssoa() {
var idade = 24; //local
console.log(idade);
}
idadePEssoa();
nomePessoa = "jose"; // "super-global" - Sempre com "var"
function nome() {
console.log(nomePessoa);
}
nome();BOM -
DOM - https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM
- var div = document.getElementById("divid");
- var div = document.getElementsByClassName("div");
- var btn = document.querySelector("#alink");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aula 01</title>
</head>
<body>
<div id="divid">Dentro da DIV id</div>
<a href="" id="alink">Link1</a>
<script>
//var btn = document.querySelector("#alink");
var btn = document.getElementById("alink");
btn.onclick = function () {
console.log("LINK OK");
return false; // para não atualizar a página
}
</script>
</body>
</html> var pessoa = function () {
console.log("Função Anônima!");
};
pessoa();
//função auto-executa
(function () {
console.log("Auto Executou")
})(); function pessoa(idade) {
var idade = idade;
return function () {
console.log(idade);
}
}
var pessoa = pessoa(33);
pessoa();function add() {
var numero = 1;
return function () {
console.log(numero + 1);
}
}
var soma = add();
soma();
soma();
soma(); /*setTimeout(function () {
console.log("Depois de 3 segundos");
}, 3000);*/
function teste() {
console.log("Depois de 3 segundos");
}
setTimeout(teste, 3000); function pessoa(callbackteste) {
console.log(callbackteste());
}
pessoa(function () {
console.log("PESSOA CALLBACK");
}); /*setInterval(function () {
console.log("teste");
}, 3000);*/
function soma() {
var i = 0;
return function () {
i += 1;
console.log("Somando: " + i);
}
}
var soma = soma();
setInterval(soma, 2000); //Exenplo simples!
setTimeout(function () {
console.log("Etapa 1");
}, 2000);
console.log("Etapa 2");var btn = document.querySelector("#btn-teste");
/*btn.onclick = function() {
teste();
};*/
btn.addEventListener('click', function () {
teste();
});
function teste() {
console.log("Teste");
};var campo = document.querySelector("#campo");
campo.addEventListener("focusout", function () {
console.log("this.value");
});
function teste() {
console.log("Teste");
}- aula01/js/main.js
function event(target,event,callback) {
target.addEventListener(event, callback);
}var input = document.querySelector("#campo1");
event(input,'focusout', function () {
console.log("teste");
});<video src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" id="video"></video>
<button id="btn-play" type="submit">Play Video</button>
<button id="btn-pause" type="submit">PAUSE</button>window.onload = function () {
var btn_play = document.getElementById("btn-play");
var btn_pause = document.getElementById("btn-pause");
var video = document.getElementById("video");
btn_play.addEventListener('click', function () {
video.play();
});
btn_pause.addEventListener('click', function () {
video.pause();
});
}https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array
window.onload = function () {
var nome = ['jose', 'maria','vanilda'];
//console.dir(nome);
//console.log(nome.splice(0,2));
nome.push('joão');
nome.push('carla'); //adiciona
nome.pop(); //remove
var nomes2 = new Array('jose','maria','...');
}window.onload = function () {
var nomes = ['jose', 'karla', 'maria'];
nomes.forEach(function (nome) {
console.log(nome);
})
}window.onload = function () {
var nomes = ['jose', 'karla', 'maria'];
for (var i = 0; i < nomes.length ; i++) {
console.log(nomes[i]);
}
var i = 0;
while (i < nomes.length) {
console.log(nomes[i]);
i++;
}
}window.onload = function () {
var idade = 40;
if(idade < 20) {
console.log("idade menor que 20");
}else{
console.log("idade maior que 20");
}
var resultado = (idade <= 30) ? "menor que 30": "Maior que 30" ;
console.log(resultado);
}