JavaScript é a linguagem de script da web.
Todas as páginas HTML modernos estão usando JavaScript para adicionar funcionalidade,
validação de entrada, se comunicar com servidores web, e muito mais.
caso não tenha um Adobe DreamWeaver, recomendo o notepad++JavaScript é fácil de aprender. Você vai se divertir.
Primeiro exemplo, descubra seu fuso horário...
Ex:
<!DOCTYPE html>
<html>
<head>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">This is a paragraph.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
Quem deve ler este tutorial?
1. Este tutorial é para você que quer aprender JavaScript:
O JavaScript é, e como fazê-lo trabalhar com HTML e CSS.
2. Este tutorial também é para você que usaram JavaScript antes:
Traga o seu conhecimento até à data. Muita coisa mudou no desenvolvimento JavaScript nos últimos anos.
O Que Você Já Deveria Saber
Antes de continuar, você deve ter uma compreensão básica do seguinte:
HTML e CSS
Se você deseja estudar estes assuntos primeiro
JavaScript é a linguagem de programação mais popular do mundo. É a linguagem de HTML e web, para os servidores, PCs, laptops, tablets, smartphones e muito mais.
JavaScript é uma linguagem de script
A linguagem de script é uma linguagem de programação leve.
JavaScript é o código de programação que pode ser inserido em páginas de HTML.
JavaScript inserido em páginas HTML, pode ser executado por todos os navegadores modernos.
JavaScript é fácil de aprender.
O que você aprenderá
Abaixo está uma amostra do que você vai aprender neste tutorial.
JavaScript: Escrevendo na saída HTML
Ex:
<!DOCTYPE html>
<html>
<body>
<p>
JavaScript can write directly into the HTML output stream:
</p>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<p>
You can only use <strong>document.write</strong> in the HTML output.
If you use it after the document has loaded (e.g. in a function), the whole document will be overwritten.
</p>
</body>
</html>
*Você só pode usar document.write na saída HTML. Se você usá-lo depois que o documento foi carregado, todo o documento será substituído.
JavaScript: reagir aos acontecimentos
Ex:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>
JavaScript can react to events. Like the click of a button:
</p>
<button type="button" onclick="alert('Welcome!')">Click Me!</button>
</body>
</html>
A função alert () não é muito usado em JavaScript, mas muitas vezes é bastante útil para experimentar código.
O evento onclick é apenas um dos muitos eventos do HTML, você vai aprender sobre neste tutorial.
JavaScript: Alterando conteúdo HTML
Usando JavaScript para manipular o teor de elementos de HTML é uma funcionalidade muito poderoso.
Ex:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">
JavaScript can change the content of an HTML element.
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // Find the element
x.innerHTML="Hello JavaScript!"; // Change the content
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
Muitas vezes você vai ver document.getElementById (" algumas id ") . Isso é definido no HTML DOM.
O DOM ( D ocument O bject M odelo) é o padrão W3C oficial para acessar elementos HTML.
Você vai encontrar vários capítulos sobre o HTML DOM neste tutorial.
JavaScript: Alterando Imagens HTML
Este exemplo altera dinamicamente a fonte atributo (src) de um elemento <image> HTML:
Ex:
<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="pic_bulboff.gif";
}
else
{
element.src="pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light</p>
</body>
</html>
JavaScript pode alterar a maioria dos atributos de qualquer elemento HTML, não apenas imagens.
JavaScript: Alterando Estilos HTML
Mudar o estilo de um elemento HTML, é uma variante de mudar um atributo HTML.
Ex:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">
JavaScript can change the style of an HTML element.
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // Find the element
x.style.color="#ff0000"; // Change the style
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
JavaScript: validar a entrada
JavaScript é comumente usado para validar a entrada.
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>Please input a number.</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("Not Numeric");
}
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
*Java e JavaScript são duas linguagens completamente diferentes, tanto em conceito e design.
Java (inventado por Sun) é uma linguagem de programação mais complexa na mesma categoria C. ECMA-262 é o nome oficial do JavaScript padrão. JavaScript foi inventado por Brendan Eich. Ela apareceu em Netscape (o navegador já não existente), em 1995, e foi adotado pela ECMA (a associação padrão) desde 1997.
