JavaScript
Origem: Wikipédia, a enciclopédia livre.
JavaScript é uma linguagem de programação criada pela Netscape em 1995, que a princípio se chamava LiveScript, para atender, principalmente, as seguintes necessidades:
- Validação de formulários no lado cliente (programa navegador);
- Interação com a página. Assim, foi feita como uma linguagem de script. Javascript tem sintaxe semelhante à do Java, mas é totalmente diferente no conceito e no uso.
- Oferece tipagem dinâmica - tipos de variáveis não são definidos;
- É interpretada, ao invés de compilada;
- Possui ótimas ferramentas padrão para listagens (como as linguagens de script, de modo geral);
- Oferece bom suporte a expressões regulares (característica também comum a linguagens de script).
Sua união com o CSS é conhecida como DHTML. Usando o Javascript, é possível modificar dinamicamente os estilos dos elementos da página em HTML.
Dada sua enorme versatilidade e utilidade ao lidar com ambientes em árvore (como um documento HTML), foi criado a partir desta linguagem um padrão ECMA, o ECMA-262, também conhecido como ECMAScript. Este padrão é seguido, por exemplo, pela linguagem ActionScript da Adobe(Antigamente Macromedia, porém a empresa foi vendida à Adobe).
Além de uso em navegadores processando páginas HTML dinâmicas, o JavaScript é hoje usado também na construção do navegador Mozilla, o qual oferece para a criação de sistemas GUI todo um conjunto de ferramentas (em sua versão normal como navegador, sem a necessidade de nenhum software adicional), que incluem (e não apenas) um interpretador de Javascript, um comunicador Javascript <-> C++ e um interpretador de XUL, linguagem criada para definir a interface gráfica de aplicações.
O uso de JavaScript em páginas XHTML, pelo padrão W3C, deve ser informado ao navegador da seguinte forma:
<script type="text/javascript"> /* aqui fica o script */ </script>
Caso contrário, o navegador irá interpretar o script como sendo código HTML, escrevendo-o na página.
Índice |
[editar] Exemplos de scripts
[editar] Scripts simples
alert("cuidado"); // mostra um 'alert' de Yes ou No if(confirm("Escolha Yes Ou No para ver a mensagem correspondente?")) { alert("Mensagem 01"); // mostra um alerta para resposta OK } else { alert("Mensagem 02"); // mostra um alerta para resposta Cancelar } // escreve na barra de status do navegador window.defaultStatus="Mensagem que será mostrada";
[editar] Funções
Criando uma função simples:
function nome_da_funcao() { //nome_da_funcao deve ser substituído pelo nome da função que será colocada window.alert('Função terminada'); // alerta que será exibido quando a função for executada }
Outra função simples:
function nome_da_funcao(atributos) //nome_da_funcao deve ser substituído pelo nome da função que será colocada { confirm("Função terminada"); // pedido de confirmação com os botões OK e Cancelar }
// constructor function function MyObject(attributeA, attributeB) { this.attributeA = attributeA this.attributeB = attributeB } // cria um Objeto chamado obj obj = new MyObject('red', 1000); // acessa um atributo do obj alert(obj.attributeA); // accessa um atributo com notação de array associativo alert(obj["attributeA"]); // adiciona um novo atributo obj.attributeC = new Date(); // remove um atributo do obj delete obj.attributeB; // remove o Objeto inteiro delete obj; function Derive() { this.Override = function() { alert("Derive::Override()"); } } Derive.prototype = new Base(); d = new Derive(); d.Override(); d.BaseFunction(); d.__proto__.Override(); // somente mozilla //resultará na exposição: Derive::Override() Base::BaseFunction() Base::Override() // somente mozilla
[editar] Hierarquia do objeto
function red() { this.sayRed = function () { alert ('red wine') } } function blue() { this.sayBlue = function () { alert('blue sky') } this.someName = black // inherits black.someName() // inherits black } function black () { this.sayBlack = function () { alert('black night') } } function anyColour() { this.anotherName = red // inherits red this.anotherName() // inherits red this.sayPink = function() { alert('"Any Colour You Like" is a song of Pink Floyd') } this.anotherName = blue // inherits blue ( + black ) this.anotherName() // inherits blue ( + black ) this.anotherName = 'released 1973' // now it's a string - just for fun } function alert(){ alert('gabriel'); } var hugo = new anyColour() hugo.sayRed() hugo.sayBlue() hugo.sayBlack() hugo.sayPink() alert(hugo.anotherName)
[editar] Exemplos práticos
[editar] Pop-up não bloqueável
<html> <title></title> <style type="text/css"> #popup{ position: absolute; top: 30%; left: 30%; width: 300px; height: 150px; padding: 20px 20px 20px 20px; border-width: 2px; border-style: solid; background: #ffffa0; display: none; } </style> <body onload="javascript: abrir()"> <script language="javascript" type=""> function fechar(){ document.getElementById('popup').style.display = 'none'; } function abrir(){ document.getElementById('popup').style.display = 'block'; setTimeout ("fechar()", 3000); } </script> <DIV id="popup"> <p> Esse é um exemplo de popup utilizando DIV. Dessa maneira esse pop-up não será bloqueado. </p> <p> <small><a href="javascript: fechar();">[X]</a></small> </p> </DIV> <br /> <a href="javascript: abrir();">Abrir POPUP</a> <br /> <a href="javascript: fechar();">Fechar POPUP</a> </body> </html>
