JavaScript Looping

Looping ( Laço de Repetição )

O looping será utilizado toda vez que um trecho do programa precisar ser feito por mais de uma vez. Existem alguns tipos de Loopings, os infinitos – de decisão no inicio e decisão no fim e os finitos. Vamos ver como funcionam os Loopings de Decisão no inicio do trecho de repetição, vamos conhecer o Looping While ( Enquanto ).

Looping While

Esse looping repete o trecho de acordo com a condicional no inicio do trecho, veja bem; ele pergunta, e, de acordo com a resposta, ele executa o trecho mais uma vez ou não. Vamos aos exemplos.

exemplo while 01: Criar um programa que leia 10 valores e apresente a soma e a média dos valores.

Fluxograma 

Obs. O trecho será repetido 10 vezes, pedirá e somará os 10 valores e, somente quando i for 11 ele passa como Não a resposta da decisão do Looping While e segue o programa calculando a média e apresentando os resultados.

JavaScript

 

Exemplo While 02: Criar um programa que apresente a TABUADA de uma valor digitado pelo usuário.

Fluxograma 

 

JavaScript

Looping For

Este looping é finito, isto é, sua repetição é definida pelo programador, ele tem inicio e fim definidos, e, conta ainda com o incremento ou decremento de um contador.[ para avanças ou retroceder em um determinado número de passos, isso quer dizer que ele avança de um em um ou de dois em dois ou de 3 em 3 e assim por diante... Veja os principais aspectos a serem observados na imagem:

 

Exemplo For 01: Criar um programa que apresente os impares do intervalo de 1 a 20.

Algoritmo

1 – criar uma variável do tipo inteiro I;
2 – criar um looping while de 1 até 20 com o contador I;
3 – verificar se I é IMPAR;
3.1 – SIM, apresente o valor de I;
3.2 – NÃO, passe para o próximo valor até o último (20)

JavaScript

 

Vejamos mais um exemplo

Exemplo for 02 : Criar um programa que apresente a soma dos pares e a soma dos impares do intervelo de 0 a 20.

PRONTO! PRONTO! 

Curta! Compartilhe e Apreenda!!!

Decisoes JavaScript

Operadores Relacionais

Os Operadores Relacionais são utilizados nas decisões quanto a procura de um determinado valor ou um que seja diferente, ou ainda, em um que seja menor. Veja os Operadores utilizados em JavaScript abaixo;

Operadores Lógicos

São utilizados para agrupar ou escolher qual decisão tomar quanto existem mais de uma em uma única vez. Veja os Operadores utilizados em JavaScript abaixo;

Estruturas Condicionais – Decisão Simples

Esse procedimento lhe servirá para tomar decisões no trajeto, isto é, decidir se o caminho é esse ou aquele a ser seguido. A decisão simples apenas responde SIM a pergunta que temos antes de tomar a decisão. Vejamos um exemplo completo com 4E.

Exemplo 4 – Etapas: Criar um programa que leia dois valores e apresente a soma dos valores somente se o resultado da soma for maior que 20.

 

1E – Algoritmo

1 – criar duas variáveis do tipo inteiro A e B;

2 – ler os valores de A e B;

3 – Criar uma variável SOMA do tipo inteiro;

4 – Implicar os valores de A e B em SOMA;

5 – verificar se o resultado da soma é maior que 20;

5.1 – Caso SIM: apresente o resultado da soma.

2E – Fluxograma

3E – Portugol

programa exemplo_decisao_simples;

var

A , B , SOMA : inteiro;

inicio

escreva(“Entre com o primeiro valor :: “);
leia(A);
escreva(“Entre com o segundo valor :: “);
leia(B);
SOMA <– A + B;
se ( SOMA > 20 ) então
inicio
escreva ( SOMA );
fim;

fim.

4E – JavaScript

Com o desenvolvimento em um bloco de notas (como vimos acima e, salvando o documento como HTML ) podemos ver o resultado no navegador de internet.

A Entrada do primeiro valos por prompt Javascript é o que vemos acima.

A entrada do segundo valor.

E o resultado que aparece caso o resultado seja maior ou igual a 20.

Estruturas Condicionais – Decisão Composta

Estas estruturas são utilizadas para responder se SIM e se NÃO, quanto a tomada de decisão. Não existe outro modo de aprender a não ser fazendo, vamos observar o exemplo com 4 etapas para este caso.

Exemplo 4 – Etapas: Criar um programa que leia um valor e apresente se o valor é par ou ímpar.

1E – Algoritmo

1 – Criar uma variável do tipo inteiro A;

2 – Ler o valor de A;

3 – Verificar se o valor de A dividido em dois módulos iguais resta zero;

3.1 – Caso SIM: apresente o resultado “PAR”.

3.1 – Caso NÃO: apresente o resultado “ÍMPAR”.

Neste caso verificamos os valores se são pares ou ímpares pelo método de divisão por dois em  módulos iguais, e, observamos o resto da divisão. veja.

 

2E – Fluxograma

Obs.:: na decisão o símbolo % significa que o valor de A será dividido por dois e será verificado o resto da divisão, se restar zero então o valor é par senão o valor é ímpar.

3E – Portugol

programa exemplo_decisao_composta;

var

A : inteiro;

inicio

escreva(“Entre com o valor :: “);
leia(A);
se ( A % 2 = = 0 ) então
inicio
escreva ( “PAR”);
senão
escreva (” IMPAR”);
fim;

fim.

4E – JavaScript

 

Eis o código no bloco de notas.

Observe o resultado no navegador...

Estruturas Condicionais – Decisão Encadeada

Estas estruturas são utilizadas para responder se SIM e se NÃO, quanto a tomada de decisão está em uma sequencia necessária para alcançar o destino desejado. Veja algumas etapas para o caso a seguir.

Exemplo: Criar um programa que leia um valor e apresente se o valor esta na faixa 1 ( de zero a 2 ),  na faixa 2 ( de 3 a 6 ), ou na faixa 3 ( de 7 a 10 ).

ETAPA 2 – Fluxograma

Obs.:: as decisões perguntam duas coisas ao mesmo tempo observe, “o valor de A é maior que zero e menor que 3 ?” se SIM apresente Faixa 1 senão se ” o valor de A é maior ou igual a 3 e menor que 7 ?” , SIM !, apresente faixa 2, senão se ” o valor de A é maior ou igual a 7 e menor ou igual a 10 ?, SIM, apresente faixa 3, senão apresente fora das faixas!.

Veja outro exemplo de JavaScript com decisões.


Exemplo JS - Criar um programa que apresente se uma pessoa pode ou não votar. A página deve dizer que pode votar caso maior de 16 anos e que não pode votar caso menor que 16 anos.

PRONTO, PRONTO ! 
Curta! Compartilhe e Apreenda!!!

JavaScript Basico 01

Introdução

O que é JavaScript ?

JavaScript é a linguagem de programação usada por 99% dos webmasters e de páginas web em geral. Como toda linguagem de programação, o JavaScript obedece uma série de convenções. Você deve, por exemplo, ficar a par de todas as palavras-chaves, da maneira de capitalizar (letras maiúsculas) as palavras e de muitos outros aspectos que fazem do JavaScript uma linguagem próxima do Delphi, Visual Basic, C++, mas ainda assim completamente diferente na maneira de lidarmos com suas características e resultados.

Onde começar ?

Inicie o seu editor HTML preferido e faça o projeto de uma página. Crie algo parecido com o que está logo abaixo:

<html>
<head>
<title>Meu primeiro JavaScript</title>
</head>
<body>

</body>
</html>

Agora, entre as tags <body></body> vamos digitar o seguinte código:

<script language="javascript">
<!--
  document.write('Este é o meu primeiro JavaScript');
//-->
</script>

Este script escreverá "Este é o meu primeiro JavaScript" quando você executar a página.

Entendendo o script

Na parte <script language="javascript">, nós estamos dizendo ao browser que tipo de código ele está prestes a executar. Você verá futuramente que temos uma variedade de scripts que podem ser executados pelo browser, entre eles, JScript, VBScript, etc.

Na parte <!-- nós estamos dizendo ao browser o seguinte: "Se você for um dos browsers mais antigos ou não suporta JavaScript, faça o favor de pular algumas das linhas de código que vem a seguir".

A parte do código:

document.write('Este é o meu primeiro JavaScript');

transmitiu ao browser a seguinte mensagem: "Acesse o documento (a página atual) e escreva (write) o texto que está entre aspas simples". Observe que usamos ponto-e-vírgula depois da instrução para separar as instruções, como veremos nas próximas partes do curso. Em seguida nós temos //--> que quer dizer "aqui está o final do código a ser executado por este script".

E finalmente temos a tag de fechamento </script> que quer dizer "Já que o código a ser executado acabou, eu vou fechar aqui para que o browser não faça nenhuma besteira". Simples, não?

Vamos rever o código completo? Aqui está:

<html>
<head>
<title>Meu primeiro JavaScript</title>
</head>
<body>

<script language="javascript">
<!--
  document.write('Este é o meu primeiro JavaScript');
//-->
</script>

</body>
</html>

Agora, para praticar ainda mais o nosso primeiro JavaScript, experimente alterar a linha de texto e ver o resultado. E para praticar JavaScript e HTML ao mesmo tempo, tente o código:

<script language="javascript">
<!--
  document.write('<b>Este é o meu primeiro JavaScript. Em negrito agora.</b>');
//-->
</script>

Cuidado com a quebra de linha. A instrução document.write('Texto aqui'') deve estar em apenas uma linha. Experimente substituir as tags <b></b> por <i></i> para visualizar o resultado.

Lembre-se que a tag <b> transforma o texto em negrito (bold) e a tag <i> faz o texto itálico (italics).

<html>

<head>
<title>Estudando JavaScript</title>
</head>
<body>

<script type="text/javascript">
<!--
  var nome;
  nome = window.prompt('Por favor, digite o seu nome', 'Seu nome');
  document.write('Olá, ' + nome + '! Bem-vindo ao meu site.');
//-->
</script>

</body>
</html>

Este código exibirá uma mensagem parecida com a figura abaixo:

Vamos rever o código?

Criamos uma variável chamada nome. Observe que podemos criar uma variável com valor nulo (null) inicialmente, e só passar um valor a ela no momento oportuno. Não é um bom procedimento, pois corremos o risco de tentar acessar uma variável que não recebeu valores ainda. Caso isso aconteça, o JavaScript retornará o valor dessa variável como undefined. A seguir, definimos que a nossa variável nome deverá armazenar o valor digitado pelo visitante por meio da caixa de mensagem prompt. Prompts serão discutidos em outra parte do curso. Depois que o visitante digita o nome, nós já temos um valor para a nossa variável e podemos agora escrevê-la na página, usando uma mensagem adicional. Novamente tente entender a função da variável. Os demais elementos serão explicados mais adiante.

Então, lembre-se! Variáveis em JavaScript podem armazenar qualquer valor: strings, inteiros, valores true ou false (boolean) e assim por diante. Você pode diferenciar as suas strings de outros valores das variáveis, simplesmente fazendo uso das aspas simples ('valor') ou aspas duplas ("valor").

Para prosseguirmos precisamos antes saber algumas coisas...

Palavras Reservadas

Assim como em outras linguagens, Javascript possui palavras previamente designadas para algum procedimento, são elas::

Palavras Reservadas em JavaScript
abstract boolean break byte case catch char class const continue debugger default delete do double	else enum export extends false final finally float for function goto if implements import in	instanceof int interface long native new null package private protected public return short static super	switch synchronized this throw throws transient true try typeof var void volatile while with

Além das palavras listadas acima, é recomendável evitar escolher nomes semelhantes aos da tabela abaixo para suas variáveis ou funções. Tais nomes são de objetos, métodos ou propriedades dos navegadores Internet Explorer, Netscape, Firefox, etc.

Evite usar as palavras abaixo
alert all anchor anchors area array assign blur button checkbox clearTimeout clientInformation close closed confirm crypto date defaultStatus document element elements embed embeds escape eval	event fileUpload focus form forms frame frames frameRate function getClass hidden history image images isNaN java JavaArray JavaClass JavaObject JavaPackage innerHeight innerWidth layer layers length	link location Math mimeTypes name navigate navigator netscape Number Object offscreenBuffering onblur onerror onfocus onload onunload open opener option outerHeight outerWidth packages pageXOffset pageYOffset parent	parseFloat parseInt password pkcs11 plugin prompt prototype radio reset screenX screenY scroll secure select self setTimeout status String submit sun taint text textarea top toString unescape untaint valueOf window

Operadores Aritméticos

Operador	Usado para	Exemplo	Resultado
+	Adição	1 + 2;	3
-	Subtração	12 - 10;	2
*	Multiplicação	2 * 3;	6
/	Divisão	10 / 3;	3.33333333
%	Módulo	10 % 3;	1
++	Incremento	x = 5; x++;	x = 6
--	Decremento	x = 5; x--;	x = 4
-	Número Negativo	-20	20 negativo

Operadores Relacionais

Operador	Significado	Exemplo
==	Igual a	15 == 13 é false
!=	Diferente de	15 != 13 é true
>	Maior que	15 > 13 é true
>=	Maior ou igual a	9 >= 10 é false
<	Menor que	10 < 3 é false
<=	Menor ou igual a	10 <= 13 é true

Operadores Lógicos

Operador	Significado	y = 10; x 5
&&	e	(x == 10) && (y < 10) é true
||	ou	(x == 10) || (y == 10) é true
!	não	!(x == y) é true

Atenção! vamos resolver alguns exercícios.

1) - Criar um site que calcule a área de uma circunferência com o raio digitado pelo usuário.

O código poderia ser escrito assim ::

E, o resultado seria assim...

Vamos entender o código::

<script> 

abrimos com a tag acima o script javascript

  raio=0;

criamos a variável raio

  area=0;

criamos a variável area

   et=prompt("entre com o raio: ");

neste ponto criamos a variável "et" ( para a ENTRADA do valor ) e utilizamos a função prompt ( tipo de entrada dor janela e caixa de texto com botão OK e CANCELAR).

   raio=eval(et);

agora inserimos o valor digitado pelo usuário na variável raio com a função eval para converter o valor lido do tipo texto em valor numérico.

   area=3.14*(raio*raio);

calculamos a área da circunferência com a fórmula

   document.write("O resultado é :: "+area);

imprimimos no navegador o texto + o resultado que possui a variável area

</script>

fechamos o script javascript

2) - Criar um site que leia o Nome e o Sobrenome e apresente o Nome Completo e uma Saudação.

Codigo...

Resultado no Navegador...

Fonte:http://www.arquivodecodigos.net/

Pronto! Pronto!

É isso!

Curta! Compartilhe e Apreenda !