Um pouco da História
JavaScript é a linguagem de script criada pela Netscape em
95. O JavaScript foi lançado juntamente com a versão 2.0 do navegador. Com a
criação do JavaScript as páginas HTML ganharam mais vida e um pouco mais de
dinamismo.
Ao contrário de que muitos pensam JavaScript não é derivado de Java, mesmo possuindo algumas semelhanças.
Ao contrário de que muitos pensam JavaScript não é derivado de Java, mesmo possuindo algumas semelhanças.
Chamada Inline e Externa
Assim como o CSS o JavaScript permite fazer chamadas do código .js de
maneira interna ou externa. Basta escolher a maneira desejada e prestar atenção
à alguns detalhes.
Chamada Interna ou Inline
Para inserir um JavaScript em seu documento HTML basta utilizar a tag
<script> </script>. O numero de scrpits em sua página é ilimitado.
A tag <script> pode ser adicionada na tag <body> ou na tag
<head>.
Exemplo:
<head>
<script> document.write("Teste de Script");
</script>
</head>
Dica importante
Se possuir algum comando que precise ser executado antes do carregamento da página é importante que este fique na tag <head>.
Chamada Externa
A chamada externa pode ser chamada na tag <body> ou na tag <head> através da tag <script> com o atributo src(source).Exemplo
<body>
<script src="meuCodigo.js"></script>
</body>
Dica Importante
Não esqueça de verificar
o caminho do arquivo .js na hora que for informar no atributo src.
Tipos de dados em Variáveis JavaScript
Em JavaScript ou em qualquer outra linguagem de programação a variável funciona como uma gaveta. A função da gaveta é guardar coisas como: blusas, cuecas, calças entre outros objetos que desejar. A variável funciona da mesma forma, sua função é guardar um dado/informação.Um exemplo bem prático é como funciona em álgebra, lembra? Em álgebra usamos letras para armazenar valores.
X = 5;
Y = 6;
Z = X + Y;
Pelo exemplo acima podemos dizer que o valor de Z é 11. As letras utilizadas na álgebra são como as variáveis em JavaScript.
Toda variável possui um tipo, tipo este que pode ser: Number, String, Boolean, Array e Null.
Exemplos:
Number - São números reais com ou sem casas decimais, como: 100, 799, 3.413.Exemplo:
var x =5;
String - São cadeia de caracteres como: João, Paulo, Diego.
Exemplo:
var aluno ="Diego";
Boolean - São valores booleanos como: verdadeiro ou falso.
Exemplo:
var x = true;
Array - Com o array é possível guardar as informações das variáveis dentro de uma matriz.
Exemplo:
var alunos = new Array();
alunos [0]= "Thiago";
alunos[1]= "Diego";
alunos[2]= "Leticia";
Null - As variáveis também podem ser declaradas como nulas, ou seja, com um valor nulo.
Exemplo:
var alunos = null;
Funções em JavaScript
As funções em javaScript são como as funções utilizadas em qualquer outra linguagem de programação, é um bloco de comando que é "chamado" em algum determinado momento em seu script para ser executado.Uma função é escrita dentro de um bloco que é delimitado por { } (chaves).
Exemplo de Sintaxe:
function NomeDaFunção() { O código que será executado
}
No exemplo acima temos a palavra function que representa a declaração de uma função, seguida do nome da função, parênteses e o código que será executado.
Dica Importante:
O nome da função deverá sempre representar o que a função dela, ou seja, se crio uma função para apagar nomes, o ideal é que minha função se chame apagarNomes ou deletarNomes. Isto ajuda na hora de identificar problemas ou até mesmo de um outro programador entender o que a função faz.
Exemplo de aplicação em um código:
<html> <head> <script> function mensagemAlerta() { alert("Olá Mundo!"); } </script> </head> <body> <button onclick="mensagemAlerta()">Clique aqui!!</button> </body> </html>
No código acima foi criado um botão com um evento onclick, quando o usuário clicar neste botão a função mensagemAlerta será chamada. A função mensagemAlerta tem como objetivo exibir uma caixa de alerta com a mensagem: Olá Mundo!.
Chamando uma função com Parâmetro (Passagem de Parâmetro)
Quando chamamos uma função podemos informar alguns parâmetros a ela. Podemos informar a quantidade de parâmetros que acharmos necessário.Parâmetro são normas, ou seja, posso informar que por padrão a minha função receberá dois valores: nome e cargo.
function minhaFuncao(nome, cargo)
{
alert("Bem vindo" + nome + ", seu cargo é:" + cargo);
}
Abaixo segue um exemplo simples de como colocar em prática a passagem de parâmetro com o assunto abordado no exemplo anterior.
Exemplo do arquivo .html:
<html>
<body>
<head>
<title>
Minha Página JavaScript
</title>
</head>
<body>
<script src="teste1.js"></script>
<p id="titulo">Selecione um nome abaixo e conheça o cargo do funcionário selecionado</p>
<button onclick="myFunction2('Thiago Anselme','Desenvolvedor')">Thiago</button>
<button onclick="myFunction2('Diego Santos', 'Estagiário')"> Diego</button>
</body>
</html>
Exemplo do arquivo .js:
function myFunction2(nome,cargo)
{
Alert ("Bem vindo " + nome + ", seu cargo é: " + cargo);
}
No exemplo acima foi criado uma página HTML com dois botões. Um botão tem o nome Thiago e o segundo botão se chama Diego. Ao clicar em um dos botões o usuário visualiza o nome completo e o cargo que foi passado por parâmetro. O exemplo .js contém o mesmo código que foi explicado anteriormente.
Eventos intrínsecos da HTML
Os eventos geralmente são usados para combinar com as funções JavaScript. Estes eventos geralmente são "chamados" através de ações executadas pelo usuário. Alguns exemplos são: Eventos gerados pelo teclado, eventos gerados pelo mouse, eventos gerados por objetos, eventos gerados pelo formulário entre outros.Exemplo de sintaxe:
<p onclick="minhaFuncao()"> Clique aqui para que o evento chame a função </p>
No exemplo acima foi adicionado o evento onclick na tag <p>. Quando o usuário clicar no texto a função "minhaFuncao()" será chamada e executará o que está descrito nela.
Um dos eventos mais comuns e mais utilizados são os eventos gerado pelo mouse. Abaixo seguem alguns exemplos de eventos:
onclick - Evento chama a função quando o elemento recebe um clique;
ondblclick - Evento chama a função quando o elemento recebe um duplo clique;
onmouseover - Evento chama a função quando o ponteiro do mouse esta sobre o elemento;
onmouseout - Evento chama a função quando o ponteiro do mouse esta fora do elemento;
Abaixo segue um link para o site da W3Schools com todos os eventos.
http://www.w3schools.com/jsref/dom_obj_event.asp
Lembro a você que JavaScript é um mundo grande e que vale ser explorado.
Grande abraço.
Até a próxima...
Nenhum comentário:
Postar um comentário