JavaScript
Um pouco de historia
O javascript foi desenvolvido em 1995 pela equipe do Netscape com o objetivo de ser uma linguagem de script do lado cliente o que permite que sejam executados comandos sem que seja necessário passar pelo servidor.
Originalmente concebido com o nome mocha e posteriormente batizado de livescript a linguagem foi renomeada como javascript alguns meses apenas o seu lançamento para aproveitar a popularidade da linguagem de programação recém lançada java.
Onde colocar o javascript
O javascript deve pode ser criado dentro do arquivo html ou pode vir de um arquivo externo de extensão .js, dentro do html ele deve estar entre as tags <script></script> que podem ser colocadas tanto no <head></head> quanto no <body></body>.
No javascript você pode tanto criar uma linha de código direta que será executada quando o navegador carregar o documento como pode-se criar também funções que são blocos de códigos que serão executados quando chamados por algum evento como por exemplo o click em um botão ou o pressionar de uma tecla em uma área de texto, para isso basta escrever function nomeDaFuncao(){} e colocar o código entre as chaves. Para chamar a função basta adicionar o nome da função(nomeDaFuncao()) como valor de um atributo de evento de um elemento html. Observe o exemplo abaixo.
No javascript você pode tanto criar uma linha de código direta que será executada quando o navegador carregar o documento como pode-se criar também funções que são blocos de códigos que serão executados quando chamados por algum evento como por exemplo o click em um botão ou o pressionar de uma tecla em uma área de texto, para isso basta escrever function nomeDaFuncao(){} e colocar o código entre as chaves. Para chamar a função basta adicionar o nome da função(nomeDaFuncao()) como valor de um atributo de evento de um elemento html. Observe o exemplo abaixo.
<html>
<head>
<script type="text/javascript">
function exibirAlerta(){
window.alert("essa é uma menssagem");
}
</script>
</head>
<body>
<input type="button" value="click Aqui" onclick="exibirAlerta()"/>
</body>
</html>
Copie o exemplo, salve e execute o html, você vai ver que ao clicar no botão será exibido uma janela popup de alerta.
trabalhando com elementos html(getElementById())
O método document.getElementById(id) permite selecionar o elemento que possui a id passada como valor no parâmetro, é possível mudar todos os atributos html ou de estilo do elemento, é possível também fazer marcações html com o atributo innerHTML.
<html>
<head>
<script type="text/javascript">
function editarTexto(){
document.getElementById("texto").innerHTML = "texto editado com javascript";
}
</script>
</head>
<body>
<input type="button" value="clique Aqui" onclick="editarTexto()"/>
<span id="texto"></span>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function editarEstiloTexto(){
document.getElementById("texto").style.color = "#99CC33";
}
</script>
</head>
<body>
<input type="button" value="clique Aqui" onclick="editarEstiloTexto()"/>
<span id="texto">esse é um texto que vai mudar de cor</span>
</body>
</html> Conclusão
Nesse primeiro post sobre javascript foi possível ver um pouco da historia dessa linguagem e também aprender alguns comandos básicos, no próximo post de javascript vamos ver um pouco mais da sintaxe da linguagem, conhecer as variáveis e os operadores.
Nenhum comentário:
Postar um comentário