Ir para conteúdo

Curso De Javascript

Morpheus_

Por Morpheus_
em Programação Web

 Share

Posts Recomendados

Morpheus_

Morpheus_ 1

Postado
Postado (editado)
script.gif Curso de JavaScript

 

1• Liçao :

No que diz respeito a programaçao... Existe uma tradiçao que a primeira coisa que você deve saber fazer ao aprender uma nova linguagem é... Fazer surgir no dispositivo de saida a frase "Hello world!!!"

 

No nosso caso o dispositivo de saida é a pagina em si, ou qualquer aviso que ela passa ao usuário.

 

Chamamos de usuário, o carinha que vai iteragir com a pagina que você fez com tanto carinho... E que se souber mais do que você..(como é o caso do orkut) Vai usar e abusar do conteudo...

 

Bom... A nossa primeira experiencia com script também sera a maneira mais basica de executar um comando numa pagina atravez da barra de endereços...

 

Pois copie esse cod em qualquer barra de endereços e observe o resultado:

 

java script:alert("Hello world!!")

 

Pense nessa linha de cod... Modifique valores... Divirta-se um pouco... Feito isso estarao prontos para a 2• Liçao!

 

2• Liçao :

Bom... O que fizemos ali?

 

Com a palavra "java script:" informamos ao browser que aquilo nao é um link tipo http:\\google.com

Aquilo é o inicio de um cod JavaScript

 

Colocamos uma string dentro de um comando window chamado window.alert()

 

Mais prefixo window. Nesse caso é dispensável...

 

O comando alert() nada mais faz do que mostrar um aviso, uma caixa de dialogo com um texto definido pelo conteudo dos parentes.. ()

 

 

O que mais podemos colocar nesses parentes? é o ponto dessa liçao.....

 

 

A maioria das linguagens de programaçao utilizam varios tipos de valores diferentes mais o que todas tem em comum é a diferença entre o que é número e o que é texto.

 

 

No nosso primeiro cod. usamos uma string... Ou seja uma informaçao no formato TEXTO... Que poderia ser por ex:

 

 

"Matheus", "Breguez", "Morpheus_", "Belo Horizonte, 19 de agosto de 2007", "LoL"

 

 

Ou seja... Qualquer junçao de caracteres cercadas por aspas ("")

 

 

Uma brincadeira legal é colocar a string em formato de JAVASCRIPT dessa forma você substitui cada letra da string pelo seu equivalente em escaped bytes que foi criado inicialmente pra poder colocar nos endereços... Caracteres inválidos sem que isso altere o funcionamento do seu browser....

 

 

Na proxima liçao falaremos de numeros.... Mais vai treinando aí... Mude o alert('hello world!!!') por alert(4+4) Sem aspas... E veja o que acontece.

 

3• Lição :

 

Nos proximos posts ainda temos que ver variaveis... Funçoes... Propriedades... Metodos... ih!!!! Tem muuuita coisa... por hoje vamos aos números!

Bom... Onde paramos? no java script:alert(4+4)...

Aqueles que tiveram a curiosidade de colocar na barra de endereços... Descobriram que nao apareceu uma janela com o texto "4+4" e sim o numero 8

Oras! porque... obvio nao? Percebam a diferença... Texto é texto... Numero é numero... O javascript... Assim como quase todas as outras linguagens diferencia isso muito bem pra poder trabalhar... Se você colocar no lugar de 4+4 outra expressao qualquer.. Como 1+2+3+4+5+6 ele vai retornar o resultado... No caso 21... Agora preste atençao... Em conjunto com os numeros você usa (e como usa) os OPERADORES... Que são quase sempre os mesmos em todas as linguagens...

 

(+) ....... soma

(-) ....... subtraçao

(*) ....... multiplicaçao

(/) ....... divisão

 

 

Tem um monte de outros operadores mais tem a ver com estruturas de condiçao e manipulaçao de bits como or not xor e and... Mais isso vem mais pra frente.. porque é muito chato mecher com essa parte... Vamos nos concentrar na parte pratica.

Agora coloquem no alert() uma expressao bem legal como ....

 

((10+3)*(2345-4567)/2)+1

 

 

Ficando assim:

 

Código: 

java script:alert(((10+3)*(2345-4567)/2)+1)

 

 

Uma coisa que o javascript tem de bom... Que nao tem na maioria das linguas é que ele aceita todo tipo de numero sem te encher com aqueles erros de tipo...

Nas outras linguas você tem que especificar se o numero é inteiro, inteiro longo, ponto flutuante, e isso é muito chato.

mais pra frente temos que ver também que existem numeros de base diferente que facilitam a vida de quem programa... Bom... Facilita pra o programa que entende melhor o que você quer fazer.

Dentre eles os numeros HEXADECIMAIS sao os mais usados...

 

4• Lição :

 

Vejam esse código aqui:

 

Código: 

java script:window.alert("Morpheus_, coloca a minha fan bar na sua assinatura!!!")

 

 

 

Observem que aparece um alert com a frase Morpheus_, coloca a minha fan bar na sua assinatura!!!

 

Agora vejam esse código aqui:

 

Código: 

java script:%61%6C%65%72%74%28%22%70%61%70%69%62%61%71%75%ED%67%72%61%66%6F%20%6E%E3%6F%20%E9%20%70%72%6F%66%69%73%73%E3%6F%21%21%22%29

 

Observem que aparece a mesma menssagem em ambos os códigos...

 

E pra isso que serve os hexcodes...

 

5• Lição :

 

Vou colocar aqui algumas funções matemáticas do javascript...

 

Funções matemáticas.

 

||

||

\/

 

Modo de usar:

 

java script:função abaixo

 

 

Math.abs(número) - retorna o valor absoluto do número (ponto flutuante) 

Math.ceil(número) - retorna o próximo valor inteiro maior que o número 

Math.floor(número) - retorna o próximo valor inteiro menor que o número 

Math.round(número) - retorna o valor inteiro, arredondado, do número 

Math.pow(base, expoente) - retorna o cálculo do exponencial 

Math.max(número1, número2) - retorna o maior número dos dois fornecidos 

Math.min(número1, número2) - retorna o menor número dos dois fornecidos 

Math.sqrt(número) - retorna a raiz quadrada do número 

Math.SQRT2 - retorna a raiz quadrada de 2 

Math.SQRT_2 - retorna a raiz quadrada de 1/2 

Math.sin(número) - retorna o seno de um número (anglo em radianos) 

Math.asin(número) - retorna o arco seno de um número (em radianos) 

Math.cos(número) - retorna o cosseno de um número (angulo em radianos) 

Math.acos(número) - retorna o arco cosseno de um número (em radianos) 

Math.tan(número) - retorna a tangente de um número (angulo em radianos) 

Math.atan(número) - retorna o arco tangente de um número (em radianos) 

Math.pi- retorna o valor de PI 

Math.log(número) - retorna o logarítmo de um número 

Math.E - retorna a base dos logarítmos naturais 

Math.LN2 - retorna o valor do logarítmo de 2 

Math.LOG2E - retorna a base do logarítmo de 2 

Math.LN10 retorna o valor do logarítmo de 10 

Math.LOG10E - retorna a base do logarítmo de 10

 

Coloque no lugar do nome número o número.

 

6• Lição :

 

Variaveis...

 

De um modo bem simples e basico:

 

Eu tenho um cesto cinza de laranjas e um cesto marrom, no cesto cinza tem 8 laranjas e no marrom tem 15. Se eu colocar tudo numa terceira cesta [digamos... verde], Terei 23 laranjas num cesto verde.

 

Agora vamos anotar isso da forma mais basica possivel:

 

var CestoCinza = 8; 
var CestoMarrom = 15; 
var CestoVerde = CestoCinza + CestoMarrom; 
alert(CestoVerde); <--- esse vc ja conhece...

 

O que eu fiz...

 

Eu somei o conteudo de CestoCinza com o conteudo CestoMarrom eu nao somei 8 com 15... Eu somei o valor contido nas variaveis

Esse arranjo me possibilitaria somar quais quer valores contidos nos "cestos" que sao as nossas variaveis...

 

 

O observem o cod da janela fugitiva...

 

java script: 

a=0; 
x=0; 
y=0; 

setInterval(" 
a+=.01; 
x=Math.cos( a * 3 ) * 10; 
y=Math.sin( a * 2 ) * 10; 
moveBy(x,y) 

",10); 

void(0)

 

 

Ignore por enquanto os comandos que vc nao entender... Teremos tempo e voltaremos mais tarde neles...

 

Nesse caso temos 3 variaveis... Como o nome ja diz... Elas VARIAM conforme o funcionamento do cod a variavel "a" é acrecida de 0.01 a cada iteraçao do loop esse coeficiente vai alterar o valor do atribuido a funçao cos e sin para indicar em que grau da circunferencia [en radianos] o cod esta num dado momento... [que aumenta comforme o tempo]

nisso... a funçao Math.cos retorna para as variaveis x e y... o valor da coordenada em que o metodo MoveBy vai colocar a janela...

 

 

 

Teremos mais exemplos no decorrer do cursinho...

Treinem bastante o que souberem!

 

 

 

Exercícios para treinos:

 

java script:

 

//atribua variaveis assim:

 

 

var NomeIdiotaDeUmaVariavelQalquer = 1234;

var NomeIdiotaDeUmaOutraVariavelQalquer = 5678;

var NomeIdiotaDeUmaOutraVariavelQalquerQueContemASomaDasVariaveisAnteriores = NomeIdiotaDeUmaVariavelQalquer + NomeIdiotaDeUmaOutraVariavelQalquer;

 

 

//e faça testes assim

 

 

 

alert(NomeIdiotaDeUmaVariavelQalquer);

 

alert(NomeIdiotaDeUmaOutraVariavelQalquer);

 

alert(NomeIdiotaDeUmaOutraVariavelQalquerQueContemASomaDasVariaveisAnteriores);

 

alert(NomeIdiotaDeUmaVariavelQalquer + NomeIdiotaDeUmaOutraVariavelQalquer);

 

alert(NomeIdiotaDeUmaVariavelQalquer - NomeIdiotaDeUmaOutraVariavelQalquer);

 

 

Ah... Se for por isso na barra do IE nao use nomes tao grandes...

 

7• Lição :

 

Variáveis avançado

 

Em JavaScript, variáveis dinâmicas podem ser criadas e inicializadas sem declarações formais. Existem dois tipos de abrangência para as variáveis:

 

Global - Declaradas/criadas fora de uma função. As variáveis globais podem ser acessadas em qualquer parte do programa.

 

Local - Declaradas/criadas dentro de uma função. Só podem ser utilizadas dentro da função onde foram criadas e precisam ser definidas com a instrução Var.

 

Com relação a nomenclatura, as variáveis devem começar por uma letra ou pelo caracter sublinhado '_', o restante da definição do nome pode conter qualquer letra ou número.

 

É importante ressaltar que a variável Codigo é diferente da variável codigo, que por sua vez é diferente de CODIGO, sendo assim, muito cuidado quando for definir o nome das variáveis, utilize sempre um mesmo padrão para defini-las.

 

Podem existir variáveis globais com o mesmo nome de variáveis locais, porém, esta prática não é aconselhável.

 

Existem três tipos de variáveis: Numericas, Booleanas e Strings.

 

Como já era de se esperar, as variáveis numéricas são assim chamadas pois armazenam números, as Booleanas valores lógicos (True/False) e as Strings, sequência de caracteres.

 

As strings podem ser delimitadas por aspas simples ou duplas, a única restrição é que se a delimitação começar com as aspas simples, deve terminar com aspas simples, da mesma forma para as aspas duplas. podem ser incluídos dentro de uma string alguns caracteres especiais, a saber:

 

\t - posiciona o texto a seguir, na próxima tabulação; 

\n - passa para outra linha; 

\f - form feed; 

\b - back space; 

\r - carrige return.

 

O JavaScript reconhece ainda um outro tipo de contúdo em variáveis, que é o NULL. Ná prática isso é utilizado para a manipulação de variáveis não inicializadas sem que ocorra um erro no seu programa.

 

Quando uma variável possui o valor NULL, significa dizer que ela possui um valor desconhecido ou nulo, o null não é igual a nada, nem mesmo ao próprio null.

 

A representação literal para NULL é a string 'null' sem os delimitadores. quando referenciado por uma função ou comando de tela, será assim que NULL será representado. Observe que NULL é uma palavra reservada.

 

Você pode trabalhar ainda com Arrays, mas para isso será necessário alguns conhecimentos sobre Programação Orientada a Objetos.

isso no decorrer do nosso cursinho!

 

 

Bom e na próxima lição (uia!) vou falar sobre operadores...

vai começar a ficar complicado!

 

8• Lição :

 

Operadores

 

Junto com funções e variáveis, operadores são blocos de construção de expressões. Um operador é semelhante a uma função no sentido de que executa uma operação específica e retorna uma valor.

 

Operadores Unários e binários

Todos os operadores em JavaScript requerem um ou dois argumentos, chamados operandos. Aqueles que requerem um operando apenas, são denominados operadores unários, e os que requerem dois operandos são chamados de operadores binários.

 

Operador de String:

 

Código:

Operador de concatenação

 

Exemplo:

 

+ Nome1="José" 

Nome2="Silva" 

Nome = Nome1+" da "+Nome2 // O resultado é: "José da Silva"

 

 

Operadores Matemáticos:

 

Código:

Adição

 

Exemplo:

 

+ V01=5 

V02=2 

V=V01+V02 // resulta em: 7

 

 

Código:

Subtração

 

Exemplo:

 

- V01=5 

V02=2 

V=V01-V02 // resulta em: 3

 

 

Código:

Multiplicação

 

Exemplo:

 

* V01=5 

V02=2 

V=V01*V02 // resulta em: 10

 

 

Código:

Divisão

 

Exemplo:

 

/ V01=5 

V02=2 

V=V01/V02 // resulta em: 2.5

 

 

Código:

Módulo da divisão (resto)

 

Exemplo:

 

% V01=5 

V02=2 

V=V01%V02 // resulta em: 1

 

 

Código:

Incremento. Pode acontecer de duas formas: ++Variável ou Variável++Exemplo:

 

V01 = 5 

V02 = ++V01 // Resulta em 6 

V03 = V01 // Resulta em 6 

_________________________________ 

Exemplo: 

V01 = 5 

V02 = V01++ // Resulta em 5 

V03 = V01 // Resulta em 6

 

 

Código:

Decremento. Pode acontecer de duas formas: --Variável ou Variável--

 

Exemplo:

 

V01 = 5 

V02 = --V01 // Resulta em 4 

V03 = V01 // Resulta em 4 

_____________________________________ 

Exemplo: 

V01 = 5 

V02 = V01-- // Resulta em 5 

V03 = V01 // Resulta em 4

 

 

Operadores relacionais:

 

 

Código: 

<Menor> Maior que 


= = Igual 


!= Diferente 


>= Maior ou igual 


<= Menor ou igual

 

 

Operadores lógicos:

 

Código:

 

 

&& E lógico 


|| Ou lógico

 

 

 

Operadores de atribuição:

 

Código:

 

 

= Atribuir 


+= Soma ou concatenação e atribuição. x+=5 // é o mesmo que: x=x+5 


-= Subtração e atribuição. x-=5 // é o mesmo que: x=x-5 


*= Multiplicação e atribuição. x*=5 // é o mesmo que: x=x*5 


/= Divisão e atribuição. x/=5 // é o mesmo que: x=x/5 


%= Módulo e atribuição. x%=5 // é o mesmo que: x=x%5

 

 

Estudem pra valer...Agora em diante vai ser difícil a apredizagem e tudo deve ser lido com muita atenção!

 

9• Lição :

 

IF

 

É uma estrutura de controle para tomar decisões.

Realiza uma ou outra operação em função de uma condição.

 

 

SINTAXE: (ou, como "escreve"... haeuaheuaa)

 

if (codiçao) 
{ 
ações em caso positivo; 
} 
else 
{ 
ações em caso negativo; 
}

 

***************

 

 

Exemplo basicuzinho:

 

java script:nome=prompt("Qual é o seu nome?");media=prompt("Sua média neste semestre:");if (media>=7){alert(" "+nome+" você está aprovado!");} 
else{alert(" "+nome+" você está reprovado, ferrou!!");}

 

 

O que mais dah pra aprender com o exemplo basicuzinho?

 

 

var=prompt("Qual é o seu nome?");

Mostra uma caixa de diálogo e um campo de texto.

É usado pra pedir um dado qualquer para o usuario...

 

 

if (media>=7)

Se a media for maior ou igual a 7...

 

 

alert(" "+nome+" você está aprovado!");

MOSTRA que foi aprovado.

 

 

else = SE NÃO

 

 

alert(" "+nome+" você está reprovado, ferrou!!");

MOSTRA que foi reprovado.

 

10• Lição :

 

OBJETOS:

 

Quando lemos um livro sobre OOP, chegamos a incrível conclusão de que o autor tenta nos convencer de que um objeto pode ser qualquer coisa. O mais incrível ainda é que ele está absolutamente certo!

 

Não pretendo aqui discutir a respeito desse assunto, vou apenas relembrar alguns conceitos básicos.

 

Vou fazer uma comparação com uma Tv. Quando compramos um televisor, recebemos um manual, que por mais simples que possa ser, traz sempre algumas especificações técnicas do aparelho. Por exemplo: Polegadas da tela, voltagem de trabalho, entre outras. Essas especificações técnicas transferido para o vocabulário da OOP são as propriedades do objeto (televisor). Em JavaScript essas propriedades nada mais são do que variáveis internas do objeto.

 

Um objeto está sujeito a determinados métodos. Um método geralmente é uma função que gera alguma informação referente ao objeto. Por exemplo ao mudar de canal, nós estamos executando uma função do televisor, o mesmo ocorre quando aumentamos ou diminuimos o volume.

 

Seguindo nosso exemplo, quando a tensão da rede sai da faixa de trabalho no caso de uma queda de tensão ou uma sobrecarga, o sistema de segurança da Tv, não permite que ocorram danos no aparelho, quando muito, queima o fusível da fonte de alimentação. Em aparelhos mais modernos, quando uma emissora sai do ar, a tela fica azul, sem aquele chiado irritante. Sendo assim podemos concluir que nosso objeto está sujeito a algumas situações, estas situações podem ocorrer a qualquer momento, e são chamadas de eventos.

 

Criando Objetos

 

Trabalhar com objetos é a única forma de manipular com arrays, vejamos como: Digamos que queremos implementar uma lista de clientes, nosso objeto poderia ser definido assim:

 

Function CriaClientes(nome,endereco,telefone,renda)

 

{

 

this.nome=nome;

 

this.endereco=endereco;

 

this.telefone=telefone;

 

this.renda=renda;

 

}

 

A propriedade this especifica o objeto atual como sendo fonte dos valores passados a função.

 

Agora, basta criar o nosso objeto:

 

Maria = New CriaClientes('Maria Aparecida','Rua Guilhotina dos Patos, S/N','332-1148',1300)

 

Para acessar as propriedades do objeto Maria, basta usar a seguinte sintaxe:

 

Maria.nome - retorna 'Maria Aparecida'

 

Maria.endereco - retorna 'Rua Guilhotina dos Patos, S/N'

 

Maria.telefone - retorna '332-1148'

 

Maria.renda - retorna 1300

 

Você deve estar se perguntando: Mas você enrolou e não disse nada sobre arrays...

 

Está aí o que você queria! Uma outra forma de referenciar as propriedades do objeto Maria, é:

 

Maria[0], Maria[1], Maria[2], Maria[3]

 

 

Uma forma mais prática de criar arrays poderia ser a seguinte:

 

Function Matriz(n)

 

{

 

this.length=n

 

for (var contador=1 ; contador <=n ; conatdor=contador+1)

 

{

 

this[contador]=""

 

}

 

}

 

Para criar nossa matriz usaríamos o seguinte comando:

 

Mes=Matriz(12)

 

O próximo passo seria apenas incluir os dados:

 

Mes[1] = 'Janeiro'

 

Mes[2]='Fevereiro'

 

...

 

Mes[12]='Dezembro'

 

 

Podemos também utilizar os dois métodos ao mesmo tempo!

 

Clientes=New Matriz(3)

 

Clientes[1]=New CriaClientes("Charlene","Rua A, 51","331-0376",1150)

 

Clientes[2]=New CriaClientes("José","Rua das Avencas, S/N","332-2781",950)

 

Clientes[3]=New CriaClientes("Joaquim Manoel", "Rua Amancio ######, 171", ,1000)

 

Teríamos agora:

 

Clientes[1].nome = "Charlene";

 

Clientes[2].telefone="332-2781"

 

Clientes[3].telefone=null

 

Depois falaremos sobre as estruturas de controle...

 

11• Lição :

 

Isso pode ser útil.

 

Expressões seletoras switch

 

Usar o switch para condições de comparações simples, ao invés de utilizar o if

 

Citação: 

<html> 
<body> 

<script> 

farol=prompt("Informe uma cor."); 

switch (farol) { 
case "vermelho": 
alert("Pare") 
break 
case "amarelo": 
alert("Atencao") 
break 
case "verde": 
alert("Prossiga") 
break 
default: 
alert("Cor ilegal") 
} 

</script> 

</body> 
</html>

 

 

Atenção, não esqueça do break!

Sempre inclua um default. Se todas as condições anteriores forem falsas, o switch entrará no default. Ele é muito importante. O sistema de telefonia dos Estados Unidos já foi uma vez paralisada por várias horas por causa da falta de um default!

Agrupando condições:

 

Citação: 

<html> 
<body> 

<script> 

letra=prompt("Informe uma letra."); 

switch (letra) { 
case "a": 
case "e": 
case "i": 
case "o": 
case "u": 
alert("Vogal") 
default: 
alert("Outro caracter") 
} 

</script> 

</body> 
</html>

 

 

Ilustramos acima o porquê do uso (ou desuso) do break.

 

12• Lição :

 

Tabuada

Tai o cod pra quem quiser tirar uma noção...

 

Citação: 

<hmtl> 
<body> 
<script> 

java script: 
tab=prompt("Tabuada de:"); 
document.write("Tabuada de ",tab,"."); 
document.write("<br>","--=--=--=--=--=--=--","<br>") 
cont=1; 
while (cont<=10) { 
document.write (tab," x ",cont," = ",cont*tab,"<br>"); 
cont++; 
} 
document.write("--=--=--=--=--=--=--","<br>"); 
document.write("Fim da tabuada."); 

</script> 
</body> 
</html>

 

Creditos: Morpheus_, Google e Mep Site

Editado por Morpheus_
Link para o comentário
Compartilhar em outros sites
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...