Noções Básicas de Javascript

(1)

Instituto Federal de Educação,

Ciência e Tecnologia

Noções Básicas de

Javascript

Prof. Henrique Neto

Técnico em

Computação Gráfica

Campus Avançado de Jaguaruana

(2)

AGENDA

 Conceitos Iniciais

 Hello Word

 Sintaxe

– Variáveis

– Operadores Matemáticos – Entrada/Saida de Dados – Estruturas Condicionais

(3)

Motivação



Definida como a

“Linguagem da Web”;



Uma das linguagens mais populares do mundo;

(4)

Motivação

 JS permite ao programador o acesso a todos os elementos ou

objetos de uma página web, como:

– Imagens;

– Elementos em um formulário;

– Links;

– Entre outros;

 Esses objetos podem ser manipulados ou modificados de

maneira programática, uma vez que ele permite:

– Capturar eventos: Click do mouse ou tecla do teclado;

(5)

Estrutura Inicial



Para inserir código

JS

em uma página, usa-se a tag

<script>

;



Duas formas de definir um código:

–

Implementação

interna

ao código HTML;

(6)

Estrutura Inicial

<html>

<body> <script> //Comandos </scritp> </body> </html> <html>

<body>

Javascript INTERNO

(7)

Exemplo de Javascript INTERNO

<html>

<head> </head>

<body>

<script>

alert(

"Olá Mundo"

);

</script>

(8)

Exemplo de Javascript EXTERNO

<html>

<body>

</body> </html>

alert(“Olá Mundo”);

(9)

Exemplo de Javascript INTERNO

<html>

<head> </head>

<body>

<script>

document.write(

"Olá Mundo"

);

</script>

</body>

</html>

(10)

Exemplo de Javascript INTERNO

<html>

<head> </head>

<body>

<script>

document.write(

"Olá Mundo"

);

</script>

</body>

</html>

Outra forma de saida padrão

Objeto que representa a página toda.

(11)

Exemplo de Javascript INTERNO

<html>

<head> </head>

<body>

<script>

console.log(

"Olá Mundo"

);

</script>

</body>

</html>

(12)

AGENDA

 Hello Word

 Sintaxe

– Variáveis

– Operadores Matemáticos – Entrada/Saida de Dados – Estruturas Condicionais

(13)

SINTAXE



A sintaxe do JavaScript é similar a sintaxe do

C/C++

e do

Java

;



As instruções de

estruturas de seleção e repetição

normalmente encontradas em

C

_e

Java

_{também estão}

presentes em JS;



Há algumas diferenças quanto a

declaração de variáveis

(14)

Variáveis



Nomeadas da seguinte forma:

–

Começando sempre por alguma letra;

–

Pode conter números (nunca começar com números);

–

Pode-se usar o caractere '_' (underline);



Tipagem fraca:

variáveis sem tipo predefinido;



Declaração:

–

var

nome =

“Henrique”

;

(15)

Tipos de Variáveis

 Numéricos:

– Tipo único de 64 bits:

• 100,

• 100.0,

• 10e2;

– Infinity: Valores maiores que 1.797693e308;

 Strings:

– Representados por aspas simples e duplas;

– Pode-se concatenar (somar/unir) com o operador +;

– “Hello”;

– “Hello” + “World” é igual a “Hello World”;

(16)

Tipos de Variáveis



Exemplos:

–

var

resposta = 42;

–

resposta =

“Troquei 42 por essa string...”

;

(17)

Tipos de Variáveis

<html>

<head> </head>

<body>

<script>

var

texto

=

“Olá Mundo”

;

document.write(texto);

</script>

(18)

(19)

Tipos de Variáveis

<html>

<head> </head>

<body>

<script>

var

nota1

=

2 ;

var

nota2

=

4 ;

var

media

=

(nota1 + nota2)

/

2 ;

document.write(

“O valor da média é: ”

+ media);

</script>

</body>

(20)

AGENDA

 Hello Word

 Sintaxe

– Variáveis

– Operadores Matemáticos

– Entrada/Saida de Dados – Estruturas Condicionais

• Operadores relacionais

(21)

Entrada de Dados



Javascript possui o método/função prompt para entrada de

dados;



Ele abre uma caixa no navegador para a entrada de algum

dado;

prompt()

prompt(

<algum texto que se Mostrar deseja>

)

Uma forma

(22)

Entrada de Dados

<html>

<head> </head>

<body>

<script>

var

num = prompt();

document.write(

"O valor digitado foi: "

+ num);

</script>

</body>

</html>

(23)

Entrada de Dados

<html>

<head> </head>

<body>

<script>

var

nome = prompt(

"Digite o seu nome: "

);

document.write(

"Olá Mundo, eu sou "

+ nome);

</script>

</body>

</html>

(24)

Entrada de Dados

<html>

<head> </head>

<body>

<script>

var

num = prompt(

"Digite de um número: "

);

document.write(

"O valor digitado foi: "

+ num);

</script>

</body>

</html>

(25)

Entrada de Dados

<html>

<head> </head>

<body>

<script>

var

num = prompt(

"Digite de um número: "

);

document.write(

"O valor digitado foi: "

+ num);

</script>

</body>

</html>

(26)

Entrada de Dados

<html>

<head> </head>

<body>

<script>

var

num = prompt(

"Digite de um número: "

);

var

numInteiro = parseInt();

document.write(

"O valor digitado foi: "

+

numInteiro);

</script>

</body>

Se quisermos manipular o valor inteiro do número,

(27)

Praticando ...

1) Escreva um programa em javascript que leia dois números da entrada e escreva do documento HTML o resultado da soma.

Exemplo de Entrada Exemplo de Saída

2

4 6

9

(28)

Praticando ...

2) Escreva um programa em javascript que leia duas strings da entrada de forma separada. Crie uma variável que receberá a

concatenação das duas strings lidas. Ao final, escreva no documento HTML o resultado da concatenação.

Darcio

Douglas Darcio Douglas

Professor

(29)

Praticando ...

3) Escreva um programa em javascript que leia dois números reais (ponto flutuante ou float) da entrada e escreva no documento HTML o resultado da média entre eles.

2.6

6.7 4.65

5.5

9.5 7.5

(30)

Praticando ...

3) Escreva um programa em javascript para mostrar quantos

segundos tem uma quantidade qualquer de horas

fornecidas.

1 60

(31)

Algumas informações Gerais



Sintaxe semelhante as linguagens C/C++/Java



Chaves delimitam um bloco de código na utilização de funções;



São considerados valores

FALSO

s:

–

False, null, undefined, 0 e string vazia;



VERDADEIRO

para todos os demais valores;



Estruturas:

–

Seleção

(32)

AGENDA

 Hello Word

 Sintaxe

– Variáveis

– Entrada/Saida de Dados

– Estruturas Condicionais

• Operadores relacionais

(33)

Estruturas Condicionais



Resumem-se a dois tipos:

(34)

Estruturas Condicionais



Estrutura:

if-else

if

(

<expressão lógica>

) {

//Comandos

}

if

(

<expressão lógica>

) {

//Comandos

}

else

{

(35)

Estruturas Condicionais



Estrutura:

if-else

if

(

<expressão lógica>

)

//Comando

if

(

<expressão lógica>

)

//Comando1

else

//Comando2

Se apenas um comando estiver presente, os parênteses

(36)

(37)

if-else

<html>

<body>

var idade = 10;

if(idade < 18)

alert("Menor de Idade");

else

alert("Maior de Idade");

</script>

(38)

if-else

<html>

<body>

var valor = 10;

if(valor > 50)

alert("O valor: " + valor + “ é maior do que 50”);

else

alert("O valor: " + valor + “ é menor do que 50");

</script>

(39)

if-else

<html>

<body>

var valor = prompt(“Digite um valor:”); var valor_int = parseInt(valor);

if(valor > 50)

else

</script> </body>

</html>

(40)

if-else

<html>

<body>

if(valor > 50)

else

</script> </body>

Se o usuário digitar o valor 50?

(41)

if-else

<html>

<body>

if(valor > 50)

else

if( valor < 50 )

alert("O valor: " + valor + “ é menor do que 50"); else

alert("O valor: " + valor + “ é igual a 50");

</script> </body>

(42)

Praticando com IF ...

1) Escreva um programa em javascript que ler um número da entrada e verifica se ele está no intervalo de 1 a 10. Caso esteja no intervalo, escreva em uma caixa de alerta “OK, esta no intervalo”. Caso

contrário, escreva “NÃO esta no intervalo”.

6 OK, esta no intervalo

(43)

Praticando com IF ...

2) Escreva um programa em javascript que ler dois números da entrada, verifica e mostra qual o maior entre eles. Mostre também caso eles sejam iguais.

4

5 O maior eh 5

13

6 O maior é 13

45

(44)

Praticando com IF ...

2) Escreva um programa em javascript que ler duas notas de um aluno do IFCE, calcula a média e mostra se ele está “APROVADO” (media >=6) ou “REPROVADO” (media < 6). Condidere que a media final é calculada da seguinte forma:

– media_final = (nota1 + nota2)/2

5

5 REPROVADO

7

9 APROVADO

(45)

Praticando com IF ...

3) Escreva um programa em javascript que ler duas notas (nota de cada etapa) de um aluno do IFCE, verifica e mostra se ele está

“APROVADO”, “REPROVADO” ou “NEF”. Lembre que a media final é calculada da seguinte forma:

– media_final = (2*nota1 + 3*nota2)/5

5

5 NEF

7

9 Aprovado

2

(46)

Praticando com IF ...

4) Modifique o programa anterior da média para que quando a aluno ficar de NEF, mostrar também a nota que ele precisa ter para ser

aprovado. Lembre que na NEF, o aluno deve obter uma nota que somado com a sua média atual dê maior ou igual a 10:

– media_final + nota_nef >= 10 → Aprovado

5

6 NEF. Você precisa tirar 4.4 para passar

3

3 NEF. Voce precisa tirar 7 para passar

(47)

AGENDA

 Hello Word

 Sintaxe

– Variáveis

– Entrada/Saida de Dados

– Estruturas Condicionais

• Operadores relacionais

(48)

Estruturas de Repetição



Resumem-se a três tipos:

–

for

–

While

(49)

Estruturas de Repetição

 Motivação para se aprender estruturas de repetição:

– Exemplo1: Escreva um algoritmo que mostre 15 vezes na tela(saída padrao) a string “Programar é Legal”;

– Exemplo2: Escreva um algoritmo que mostre na tela todos os números pares de 1 até 100;

– Exemplo3: Escreva um algoritmo que calcule a média de 20 valores fornecidos pela entrada padrão;

– Exemplo4: Escreva um algoritmo para dividir dois números. Se o usuário digitar zero, peça que um novo valor seja

(50)

Estruturas de Repetição

 Exemplo1: (resposta)

(51)

Estruturas de Repetição

 Exemplo2: (todos os pares de 1 a 100)

(52)

Estruturas de Repetição

 Exemplo3: (media de 20 valores lidos₎

(53)

Estruturas de Repetição

 Exemplo4: (resposta)

(54)

Estruturas Condicionais



Estrutura:

for

(

<inicializacao>

;

<condição>

;

<incremento>

) {

/* Bloco de comandos */

}

Se apenas um comando

(55)

FOR

<html>

<body>

Texto Antes do FOR

for(var i = 1; i <= 15; i++)

document.write("<h1> Programar eh Legal </h1>");

</script>

Texto Depois do FOR

(56)

FOR

<html>

<body>

Texto Antes do FOR

for(var i = 1; i <= 15; i++)

document.write("<h1> Programa é legal " + i + " </h1>");

</script>

Texto Depois do FOR

(57)

FOR

<html>

<body>

Texto Antes do FOR

for(var i = 1; i <= 100; i++) {

if(i % 2 == 0)

document.write("<h1> " + i + " </h1>"); }

</script>

Texto Depois do FOR

</body> </html>

(58)

FOR

<html>

<body>

Texto Antes do FOR

for(var i = 2; i <= 100; i = i + 2) {

document.write("<h1> " + i + " </h1>"); }

</script>

Texto Depois do FOR

</body> </html>

(59)

FOR

<html>

<body>

var soma = 0;

for(var i = 1; i <= 10; i++) {

var a = prompt("Digite um valor");

soma = soma + parseInt(a); }

var media = soma/10;

document.write("A media eh: " + media);

</script>

</body> </html>

(60)

Estruturas Condicionais



Estrutura:

while

estiver presente, os parênteses

while

(

<condição>

) {

/* Bloco de comandos */

(61)

while

<html>

<body>

var i = 1;

while(i <= 10) {

document.write("<h1> Teste " + i + " </h1>"); i++;

}

</script>

</body> </html>

(62)

Estruturas Condicionais



Estrutura:

do-while

estiver presente, os parênteses

do

{

/* Bloco de comandos */

(63)

do-while

<html>

<body>

var i = 1;

do{

document.write("<h1> Teste " + i + " </h1>"); i++;

}while(i <= 10);

</script>

</body> </html>

(64)

do-while

<html>

<body>

var a = prompt("Digite o divisor:"); a = parseInt(a);

do{

var b = prompt("Digite o dividendo:"); b = parseInt(b);

}while(b == 0)

var result = a/b;

document.write("O resultado eh: " + result);

</script>

</body>

(65)

Praticando com Laços ...

(66)

Praticando com Laços ...

2) Escreva um programa em javascript que calcule e mostre a

soma de todos os números pares de 1 até 100.

Entrada Saída

(67)

Praticando com Laços ...

2) Escreva um programa em javascript que calcule e mostre a

média de todos os números pares de 1 até 200.

Entrada Saída

(68)

Praticando com Laços ...

3) Escreva um programa em javascript leia um número inteiro N da entrada padrão (teclado). Logo em seguida leia N valores da entrada (teclado);

Exemplo de Entrada Exemplo de Leitura

5 ₁₀

45 2 -10 4

3 ₄

(69)

Praticando com Laços ...

4) Escreva um programa em javascript leia um número inteiro N

da entrada padrão (teclado). Logo em seguida leia N valores da entrada (teclado) e ao final mostre a soma desse N valores;

5 /* qt. De valores a serem lidos */

3 4 7 2 1 17

3

_{/* qt. De valores a serem lidos */}

4

5

2

(70)

Praticando com Laços ...

5) Escreva um programa em javascript leia um número inteiro N

da entrada padrão (teclado). Logo em seguida calcule e mostre a média de N valores lidos pelo teclado.

3 4 7 2 1 3.4

4 5

(71)

Praticando com Laços ...

(72)

Praticando com Laços ...

7) Escreva um programa em javascript que leia um número N e monte a uma tabela com N linhas. Pode considerar cada linha tendo 3

células.

(73)

Praticando com Laços ...

8) Escreva um programa em javascript que leia um número N e monte a sua tabuada em uma

tabela:

(74)

Praticando com Laços ...

[DESAFIO] Escreva um programa em javascript que leia uma

quantidade N de linhas e uma quantidade M de colunas. Logo após faça uma tabela com N linhas e M colunas.