Ir para conteúdo

Aprendendo Javascript

mdgabrielzim

Por mdgabrielzim
em Programação Web

 Share

Posts Recomendados

mdgabrielzim

mdgabrielzim 41

Postado
Postado (editado)

Introdução

Para quem é direcionado este Tutorial de JavaScript?

Para quem não sabe nada de JavaScript ainda, mas já sabe básico de HTML.

O que é JavaScript?

É uma linguagem utilizada principalmente para auxílio de desenvolvimento de páginas para a Internet.

 

JavaScript é a mesma coisa que Java?

Não, JavaScript é mais simples que Java. Aprender JavaScript é o melhor começo se você quer aprender Java, C, C++, PHP, pois a sintaxe (forma de escrever a linguagem) é semelhante.

O que posso fazer com o JavaScript?

Você pode tornar suas páginas mais “inteligentes”, com recursos adicionais como: botões que mudam ao passar o mouse em cima, exibir o horário atual, verificar se o preenchimento de um formulário está correto, e muito mais! O JavaScript pode lhe salvar nas horas em que você menos espera, pois as possibilidades de utilização são infinitas. Só não garanto que á resolver o problema da fome no mundo.

 

Expressões de loops “for”

Usa-se o for quando se quer que um trecho de código se repita n vezes.

a=2

for (i=0;i<2;i++) {

a=i

}

alert(a)

A novidade é a linha de código acima mostrada na linha 2. Vamos analizá-la. Utilizamos uma variável temporária chamada i. Inicializamos ela com valor igual a zero. O bloco do meio funciona como um if. Se o valor de i for menor que 2, ele entra no loop.

 

A última parte diz o que fazer com a variável i. Neste caso a cada repetição, estamos incrementando o valor de i. Se não fizéssemos isto, a condição anterior (i<2) sempre seria verdadeira, e entraríamos em um loop infinito, pois o valor de i sempre seria menor que dois.

 

Neste caso, o for funciona como um encurtador de código e você pode substituí-lo pelo código abaixo.

i=0

while (i<2) {

a=i

i++

}

 

Bem e isso ae ..Eu tirei muitas coisa boas desse tuto espero que façam o mesmo

Creditos

DGmike 80%

Mdgabrielzim 20%

 

Onde coloco o código JavaScript?

O Código JavaScript fica Entre o <script> e o </script>, e dentros da tags <head> e </head>. Ficaremos com a seguinte estrutura:

<html>

<head>

<title>Minha página</title>

<script>

alert("Minha primeira mensagem!")

</script>

</head>

<body>

</body>

</html>

Eis nosso primeiro código. Vamos analisá-lo?

Entendendo o código:

alert("Minha primeira mensagem!");

Exibe uma janela com a frase Minha primeira mensagem! com apenas um botão de OK. Teste você mesmo, crie um arquivo com extensão .htm e execute.

Exemplo básico, manipulação de variável.Há mais três diferentes maneiras de colocar o código JavaScript na página, mas iremos utilizar o método acima em nosso tutorial.

 

Exemplo básico, manipulação de variável

Fazer aparecer na tela o resultado de um cálculo.

a=2

b=9

c=a+b

alert©

Temos aqui manipulação de variáveis, assim como na matemática tradicional.

 

Entendendo o código:

a=2

b=9

c=a+b

Faz com que a variável a receba o número 2, a variável b receba o número 9, a variável c receba o resultado de a + b.

alert©

Faz com que uma janela exiba o conteúdo da variável c.

 

Note que não usamos aspas na frente e atrás do c porque estamos consultando o valor de uma variável. Se colocássemos aspas, ele iria mostrar apenas a letra c, literalmente.

 

Expressões condicionais: “if”

bananas=6

if (bananas==6) {

alert("É verdade. Temos meia dúzia de bananas")

}

O if é a mais básica das expressões condicionais no JavaScript. Com ele, você pode decidir se quer executar uma ação ou não.

 

Entendendo o código:

bananas = 6

Faz com que a variável “bananas” receba o número 6.

if (bananas == 6) {

alert ("É verdade. Temos meia dúzia de bananas")

}

Esta é a expressão condicional (linha 1). Se ela for verdadeira (no caso, se bananas for igual a seis), entraremos no bloco de código. A seguir, temos a estrutura de um bloco de código. A abertura de chaves { abre o bloco de código. Este é conjunto de operações que se deseja realizar. Reforçando, só estaremos executando esta parte se a condicional for verdadeira.

 

Nos mostra uma janelinha de aviso o seguinte texto: É verdade. Temos meia dúzia de bananas

 

Na última linha, temos o fechamento de chave }, que fecha o conjunto de operações. Você pode fazer experimentos, trocando o “bananas == 6″ por “bananas == 10″ ou qualquer outro valor que não seja 6.

 

Já que a condicional não vai ser verdadeira, ele simplesmente não entra no bloco do código que faz o alert(“É verdade. Temos meia dúzia de bananas”).

 

Expressões condicionais “if / else”

Utilizamos o else, quando o if não for verdadeiro.

bananas=22

if (bananas==6) {

alert ("É verdade. Temos meia dúzia de bananas")

} else {

alert("Não é verdade. Temos outra quantidade de bananas")

}

Neste exemplo estamos utilizando o if e o else.

 

Leia-se: Se (if) o número de bananas for igual a 6, faça alert(“É verdade. Temos meia dúzia de bananas”). Senão (else), faça alert(“Não é verdade. Temos outra quantidade de bananas”).

 

Também podemos trabalhar com condicionais, resumindo códigos simples a uma linha. A sintaxe da condicional é:

(condição ? verdadeiro : falso)

Desta forma podemos substituir certos códigos com quatro linhas:

if (preco>10) {

resultado="Muito Caro!"

} else {

resultado="Podemos comprar"

}

A apenas uma linha de código:

resultado = ( preco>10 ? "Muito Caro!" : "Podemos comprar" )

 

Expressões condicionais “if / else” encadeadas

bananas=22

if (bananas==6) {

alert("Temos seis de bananas")

} else if (bananas==10) {

alert("Temos dez bananas")

} else {

alert("Temos outra quantidade de bananas")

}

No exemplo acima, cairemos em “Temos outra quantidade de bananas”. Experimente trocar o valor de bananas (para seis ou para dez) para cair nas outras condições.

 

Expressões seletoras “switch”

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

farol = "amarelo"

switch (farol) {

case "vermelho":

alert("Pare")

break

case "amarelo":

alert("Atencao")

break

case "verde":

alert("Prossiga")

break

default:

alert("Cor ilegal")

}

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:

letra="e"

switch (letra) {

case "a":

case "e":

case "i":

case "o":

case "u":

alert("Vogal")

break;

default:

alert("Outro caracter")

}

Expressões de loops “while”

Usa-se o while quando se quer que um trecho de código se repita n vezes, com condicional bem simples.

numero = 0

while (numero < 10) {

numero++

}

alert(numero)

Enquanto a condição for verdadeira, o bloco será executado. Note que dentro do bloco estamos executando um código que fará a condição ser falsa depois de algumas repetições. Se não fizéssemos a condição ficar falsa, ele entraria no que chamamos de loop infinito, o que não é nada bom.

Expressões de loops “do while”

Usa-se o do while quando se quer que um trecho de código se repita n vezes, mas executa o bloco de código antes da verificação da condição.

numero = 0

do {

numero++

} while (numero < 10)

alert(numero

A diferença de ter um do na frente é que o código será executado antes da condição ser verificada. Execute exemplo e verifique se o resultado é diferente do while normal.

 

Bem e isso ae esse tuto me ajudou pakas resolvi compartlhar com vocês abrs

Creditos

dgmike 80%

Mdgabrielzim 20%

Editado por Mdgabrielzim
Link para o comentário
Compartilhar em outros sites
Demonbholder

Demonbholder 420

Postado
Postado

Javascript é realmente uma linguagem impressionante, apresenta incríveis recursos e não é muito complicada. Gosto muito de usá-la, ajuda muito principalmente para layout de uma página.

 

O tutorial já parte um pouco do "médio do básico", por isso pode ficar difícil para quem não sabe nada, até por que, looping já uma coisa intermediária na minha opinião.

 

Mas enfim, bom tutorial, aprovado.

Link para o comentário
Compartilhar em outros sites
  • 1 month later...
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...