Entendendo Javascript - 2
Exemplos que utilizam Javascript
Js nos navegadores
Antes a nossa realidade era essa e todo mundo já ouviu essa piada, a causa era exatamente o suporte a Javascript nos navegadores:
Js nos navegadores
Mas ultimamente os browsers estão se preocupando mais com suporte mais padronizado ao ECMA Script nos grandes navegadores salvo algumas diferenças básicas (até o Internet Explorer !!!)
Js nos navegadores
OK, como a nossa realidade é sempre em volta do navegador, vamos ao básico para utilizar um script... na sua página HTML, você pode declarar a tag de script pura com:
<script type="text/javascript" src="scripts/tripa.js"></script><script> /*awesome*/ </script>Ou incluir um arquivo externo com:
Entendendo a árvore do DOM
<html>
<head>
<title>My Title</title>
</head>
<body>
<h1>My header</h1>
<a href="http://www.google.com.br">My link</a>
</body>
</html>Entendendo a árvore do DOM
Contexto
Tudo no Javascript está dentro de um contexto, mesmo que não pareça, mesmo esse código simples:
<script>
console.log(5 + 6);
</script>
Está no fundo no fundo, dentro do contexto da janela, (window) este código se auto-executa da forma que vimos antes, como se ele estivesse declarado assim:
<script>
( console.log(5 + 6) )();
</script>
Contexto
Aliás... o próprio "console" que chamamos pelo "console.log" na verdade é filho de "window" que o objeto que representa a janela do nosso navegador:
<script>
( window.console.log(5 + 6) )();
</script>
Objeto window
Absolutamente todo código Javascript está abaixo do objeto "window" explicita ou implicitamente, mesmo que não seja declarado nada, como no exemplo anterior
https://developer.mozilla.org (window)
window.alert("quero café");
window.scrollTo( 0, 1000 );Objeto console
https://developer.mozilla.org (console)
console.info("Mensagem");
console.log("Mensagem %cEstilosa",
"color:#bada55; font-style: bold; padding: 2px"); Esse é o primeiro cara que vai te ajudar na hora de realizar um debug do seu código, o padrão para exibir o console no seu navegador é F12
Objeto Math
Math.sqrt(16); //4
Math.PI; //3.141592653589793
Math.cos(1); //0.5403023058681398
Math.ceil(1.2); //2
Math.floor(1.2); //1
Math.random(); //Um número aleatório entre 0 e 1
//esta função retorna um valor aleatório entre um mínimo e um máximo
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}Objeto document
Document normalmente tem funções comuns úteis para o dia-a-dia, JQuery costuma inclusive fazer "atalhos" para métodos como documet.getElementById()
https://developer.mozilla.org (document)
Objeto document
<html>
<head>
<title>My Title</title>
</head>
<body>
<h1 id="header">My header</h1>
<a href="http://www.google.com.br" id="myLink">My link</a>
</body>
</html>
<script>
console.log( document.getElementById("myLink") );
</script>Objeto document
//Retorna uma lista de elementos com o nome de tag HTML fornecido.
document.getElementsByTagName();
function encontrarTagP() {
var all = document.getElementsByTagName('p');
var num = all.length;
alert('Existem ' + num + ' parágrafos neste documento');
}Objeto document
//Retorna uma lista de elementos com o nome de classe CSS fornecido.
document.getElementsByClassName();
<p class="test">hello</p>
<script>
var test = document.getElementsByClassName("test");
console.log(test);
</script>Interagindo com Tags
Tags HTML podem ser manipuladas normalmente com JS, é o uso mais comum da linguagem.
Atributos, valores e eventos podem ser manipulados programáticamente
Interagindo com Tags
<html>
<head>
<title>My Title</title>
</head>
<body>
<h1 id="header">My header</h1>
<a href="http://www.google.com.br" id="myLink">My link</a>
</body>
</html>
<script>
console.log( document.getElementById("myLink").href );
</script>Eventos do Navegador
<html>
<head>
<title>My Title</title>
</head>
<body>
<h1 id="header">My header</h1>
<a href="http://www.google.com.br" id="myLink">My link</a><br>
<input type="button" value="Click me!"
onclick="exibirConsole()">
</body>
</html>
<script>
function exibirConsole(){
console.log( document.getElementById("myLink").href );
}
</script>Eventos do Navegador
Há uma lista bem extensa de eventos possíveis listados aqui:
Qualquer evento pode realizar uma chamada para uma função diferente do JS
Manipulando HTML
<html>
<body>
<h1 id="header">Você não clicou no botão</h1>
<input type="button" value="Clique em mim!" onclick="change()">
<script>
var count = 0;
function change(){
var element = document.getElementById("header");
count++;
element.innerHTML = "Você clicou no botão " + count + " vez(es)!";
console.log(window.count);
}
</script>
</body>
</html> Manipulando HTML
<html>
<body>
<form action="">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="button" value="Click Me" onclick="check()">
</form>
</body>
</html>
<script>
function check(){
console.log(document.getElementsByName("gender")[0].value);
console.log(document.getElementsByName("gender")[1].checked);
console.log(document.getElementsByName("gender")[2]);
}
</script>
Manipulando HTML
<html>
<body>
<form action="">
<input type="checkbox" name="coffee" value="latte"> Latte<br>
<input type="checkbox" name="coffee" value="capuccino"> Capuccino<br>
<input type="checkbox" name="coffee" value="expresso"> Expresso<br>
<input type="button" value="Click Me" onclick="check()">
</form>
</body>
</html>
<script>
function check(){
console.log(document.getElementsByName("coffee")[0].value);
document.getElementsByName("coffee")[0].checked =
!document.getElementsByName("coffee")[0].checked;
console.log(document.getElementsByName("coffee")[1].checked);
console.log(document.getElementsByName("coffee")[2].value);
}
</script>
Criando componentes HTML
// cria um elemento <button>
var btn = document.createElement("button");
// cria um nó de texto
var t = document.createTextNode("Clique em mim");
// adiciona o nó de texto ao objeto <button>
btn.appendChild(t);
// adiciona o nó <button> no corpo <body> da página HTML
document.body.appendChild(btn);https://developer.mozilla.org (document.creteElement())
Navegando pelos nós do DOM
if (element.hasChildNodes()) {
// primeiro checamos se o objeto não está vazio
var children = element.childNodes;
for (var i = 0; i < children.length; i++) {
// faz algo com cada nó filho ( children[i] )
}
}https://developer.mozilla.org (Node.childNodes)
Removendo componentes HTML
<html>
<div id="top" align="center" style="background: #F00">A
<div id="elementoAninhado" style="background: #0F0">B</div>
</div>
<input type="button" value="Magic" onclick="magic()">
</html>
<script>
function magic(){
// Removendo um elemento sabendo o nó pai
var d = document.getElementById( "top" );
var aninhado = document.getElementById( "elementoAninhado" );
var noRemovido = d.removeChild( aninhado );
}
</script>https://developer.mozilla.org (document.removeChild())
Removendo componentes HTML
<html>
<div id="top" align="center" style="background: #F00">A
<div id="elementoAninhado" style="background: #0F0">B</div>
</div>
<input type="button" value="Magic" onclick="magic()">
</html>
<script>
function magic(){
// Removendo um elemento sem precisar especificar o nó pai
var node = document.getElementById("elementoAninhado");
// node.parentNode encontra o nó que é pai deste elemento
if (node.parentNode) {
node.parentNode.removeChild(node);
}
}
</script>https://developer.mozilla.org (document.removeChild())
Removendo componentes HTML
<div id="top" align="center">
<div id="elementoAninhado"></div>
</div>https://developer.mozilla.org (document.removeChild())
// Removendo todos os filhos de um elemento
var element = document.getElementById("top");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
Alguma Dúvida?
Entendendo Javascript - 2
By Chrysthian Simão
Entendendo Javascript - 2
JS em Navegadores
