Apostila Trabalho sobre Javascript

Apostila Trabalho sobre Javascript
Rate this post

Há alguns anos atrás eu fiz um trabalho sobre javascript no cursinho de programador web, e estou postando ele aqui pra quem quizer ou precisar, pode usar sem medo, valeu.


Introdução
Onmouseover
Onclick
Onblur
Onload e Onunload
OnChange
OnFocus
OnSelect
OnSubmit
OnContextMenu
OnSelectStart
Array
ParseInt
ParseFloat
Function
IF ELSE
For e While
Swith e Case
Break
Continue
Return
Escape
Window.open
Document.Write
Conclusão

Introdução

O javascript é uma linguagem muito poderosa, ela roda em cima de um navegador, para que possa ser interpretada precisa estar entre as tags <script></script>
Vamos aprender um pouco sobre essa brilhante linguagem javascript ao longo desse trabalho.

Onmouseover

É um evento que é disparado quando o mouse é movimentado por cima de um elemento, exemplo:

<html>
<head>
<script>
function fazer(){
alert(“ola”);
}
</script>
</head>
<body>
<input type=”button” onmouseover=”fazer()” value=”botão”>
</body>
</html>

<strong>Onclick </strong>

É um evento que ocorre quando um elemento é clicado. Ex:

<html>
<head>
<script>
function fazer(){
alert(“ola”);
}
</script>
</head>
<body>
<input type=”button” onclick=”fazer()” value=”botão”>
</body>
</html>

<strong>Onblur</strong>

È um evento que ocorre quando um elemento perde o foco, veja:

<html>
<head>
<script>
function fazer(){
alert(“ola”);
}
</script>
</head>
<body>
<input type=”text” onblur=”fazer()” value=”uia”>
</body>
</html>

Onload e Onunload

São eventos que são chamados quando um documento é carregado e descarregado respectivamente. EX:

<html>
<head>
<script>
function fazer(){
alert(“ola”);
}
</script>
</head>
<body onload=”fazer()” onunload=”fazer()”>
</body>
</html>

OnChange

É um evento que é chamado quando um campo texto sofre alteração. EX:

<html>
<head>
<script>
function fazer(){
alert(“ola”);
}
</script>
</head>
<body>
<input type=”text” onchange=”fazer()” value=”uia”>
</body>
</html>

OnFocus

É um evento que é chamado quando um  elemento recebe o foco. EX:

<html>
<head>
<script>
function fazer(){
alert(“ola”);
}
</script>
</head>
<body>
<input type=”text” onfocus=”fazer()” value=”uia”>
</body>
</html>

OnSelect

É um evento que é chamado quando um texto é selecionado em um elemento text. EX:

<html>
<head>
<script>
function fazer(){
alert(“ola”);
}
</script>
</head>
<body>
<input type=”text” onselect=”fazer()” value=”uia”>
</body>
</html>

OnSubmit

É um evento que é chamado quando um formulário é enviado. Ex:

<html>
<head>
<script>
function fazer(){
alert(“ola”);
}
</script>
</head>
<body>
<form name=”forme” action=”salva.php” onsubmit=”fazer()”>
<input type=”text” valor=”dados” name=”texto”>
<input type=”submit” value=”enviar”>
</form>
</body>
</html>

OnContextMenu

É um evento que é chamado quando o menu de contexto é chamado. EX:

<html>
<head>
<script>
function fazer(){
alert(“ola”);
}
</script>
</head>
<body onContextMenu=”fazer()”>
</body>
</html>

OnSelectStart

É um evento que é chamado quando uma parte de texto é selecionada no browser. Ex:

<html>
<head>
<script>
function fazer(){
alert(“ola”);
}
</script>
</head>
<body onselectstart=”fazer()”>
<p>
Sempre sempre sempre
</p>
</body>
</html>

Array

O Array é um tipo de dado em javascript que é útil para diversas coisas, como por exemplo para enumerar um objeto. EX:

<html>
<head>
<script>
teclado = new Array(5);
function faz(){
teclado[0] = “DÒ”;
teclado[1] = “RE”;
teclado[2] = “MI”;
teclado[3] = “FA”;
teclado[4] = “SOL”;
}
faz();
for(x=0;x<5;x++){
alert(teclado[x]);
}
</script>
</head>
<body>
</body>
</html>

ParseInt

É usado para converter dados para o tipo inteiro. EX:
<html>
<head>
<script>
vl1 = “23”;
vl2 = 2;
alert(2 + parseInt(23));
</script>
</head>
<body>
</body>
</html>

ParseFloat

É usado para converter dados para o tipo float, ex:

<html>
<head>
<script>
vl1 = “23.18”;
vl2 = 2;
alert(vl2 + parseInt(vl1));
</script>
</head>
<body>
</body>
</html>

Function

É um tipo de dado, e também é uma palavra reservada, utilizado para criação de métodos e funções. EX:

<html>
<head>
<script>
fazer = new function(){
alert(“oi”);
}
</script>
</head>
<body onload=”fazer”>
</body>
</html>

IF ELSE

São instruções que avaliam uma condição, se for verdadeira executa o código do if, se for false, exectuta o código do else. EX:

<html>
<head>
<script>
vida = true;
if(vida){
alert(“boa”);
}else{
alert(“ruim”);
}
</script>
</head>
<body>
</body>
</html>

For e While

São instruções de repetição, o for é usado quando já se sabe o número de loops a ser executados, já o while é utilizado quando não se sabe o numero de repetições. EX:

<html>
<head>
<script>
tudo = “”;
for(x=0;x<5;x++){
tudo = tudo + x;
}
sair = false;
while(!sair){
sair = confirm(“Deseja sair?”);
}
alert(tudo);
</script>
</head>
<body>
</body>
</html>

Swith e Case

São instruções de múltipla escolha, útil para evitar ifs e elses em demasia. EX:

<html>
<head>
<script>
animal = “papagaio”;
switch(animal){
case “arara”:
alert(“arara”);
break;
case “papagaio”:
alert(“papagaio”);
break;
default:
alert(“animal desconhecido”);
}
</script>
</head>
<body>
</body>
</html>

Break

É um comando do javascript, que serve para para a execução de loops, o script para o loop que estiver inserido e continua com a execução do programa. Um exemplo é o exemplo anterior.

Continue

É uma instrução de continuação, geralmente utilizada em loops, quando o script encontra esse comando, ele volta para o início do loop sem executar o que há depois desse comando. EX:

<html>
<head>
<script>
for(x=1;x<5;x++){
if(x>2){
continue;
}
document.write(x);
}
</script>
</head>
<body>
</body>
</html>

Return

É um comando utilizado em funções para se retornar um valor. EX:
<html>
<head>
<script>
function fazer(){
return “feito”;
}
alert(fazer());
</script>
</head>
<body>
</body>
</html>

Escape

É uma função que encripta uma string que é passada como parâmetro para caracteres unicode, isso é bom pra criar urls válidas. EX:
<html>
<head>
<script>
caminho = “shiodini o mestre.html”;
alert(escape(caminho));
</script>
</head>
<body>
</body>
</html>

Window.open

É uma função para se abrir uma nova janela, pode-se definir vários parâmetros como tamanho da janela, destino, se vai conter menus, etc. EX:
<html>
<head>
<script>
window.open(“http://www.hotmail.com”, “_blank”, “width=420 height=452”);
</script>
</head>
<body>
</body>
</html>

Document.Write

É um comando para escrever na página, o texto para ser escrito é passado como parâmetro. EX:

<html>
<head>
<script>
document.write(“luz do sol faz bem”);
</script>
</head>
<body>
</body>
</html>

Conclusão

Eu realmente gostei muito do que aprendi fazendo esse trabalho, percebi a importância do javascript na minha vida como programador web. As possibilidades que o javascript proporciona me deram um poder muito superior do que somente com o código html.

Bem, fica aí esse mini apostila sobre uma introdução em javascript, eu fiz isso como trabalho em um cursinho aqui da região, então não me taquem pedras, kkk

Add Comment