Baixe o app para aproveitar ainda mais
Prévia do material em texto
Desenvolvimento para WEB 1 Aula 1 JavaScript - Introdução Profa. Havana Alves JavaScript • Uma linguagem script é uma linguagem de programa leve, e JavaScript é uma delas; • O código JavaScript pode ser inserido em páginas HTML, podendo ser executado pela maioria dos navegadores modernos. • Até alguns anos atrás, o JavaScript era utilizado para criar pequenos programinhas encarregados de realizar ações dentro do âmbito de uma página web. Atualmente, ele faz muito mais que isso. • Com Javascript podemos criar efeitos especiais e criar conteúdos dinâmicos. JavaScript ≠ Java • Java é fortemente tipada e possui tipos estáticos • JavaScript oferece uma reduzida quantidade de tipos, isto é, o necessário para criação de telas dinâmicas e certa lógica nas páginas html. Onde escrever JavaScript? • O código JavaScript deve ser inserido na tag <script></script> o qual fica, geralmente, dentro da tag <head></head>, porém pode vir também no <body></body>. <html> <head> <script></script> </head> </html> Onde escrever JavaScript? • Saída de texto: Comando alert(); alert(“Olá pessoal!!”); Comando document.write(); document.write(“Olá pessoal!!!”); Variáveis • Criando variáveis: para criar variáveis, utilizamos a palavra chave var. var nome = “Jesuíno”; var idade = 29; (!)O tipo de cada variável depende do valor atribuído a ela, assim, a variável nome é tipo texto e a variável idade é numérica. Saída de texto com variávels alert(“Nome é ”+nome); Tipos de Dados • Numéricos: Armazena tanto valores inteiros como ponto flutuante (double ou float em Java) 1 84 3.141516 0.0001 • Alguns valores numéricos especiais : ○ NaN - Na verdade NaN é a abreviação de (Not a Number) = (Não um Número), ele é o resultado geralmente de operações inválidas com números. Como por exemplo, o resultado da operação (0/0), irá resultar no NaN. Ele também é uma constante, que pode ser atribuida a uma variável, como veremos mais adiante. Tipos de Dados •Alguns valores numéricos especiais (continuacao) : ○ Infinity - Representa um valor infinito, podendo ser tanto positivo quanto negativo. Todas as operações com valores infinitos resultará no NaN. Tipos de Dados • Texto (Strings): São cadeias de caracteres. ▫ Uma String pode ser qualquer texto dentro de um par de aspas, que podem ser duplas ou únicas: var str1=“computador”; var bike = ‘bicicleta’ var frase = “Ele se chama ‘Johny’ ” Tipos de Dados • Lógicos Podem assumir os valores true ou false • Null O null é um valor especial, representa um objeto nulo; não deve ser confundido com uma variável não inicializada, pois o valor null existe. Uma variável com o conteúdo null existe em memória, referenciando este objeto especial. Tipos de Dados • Undefined: O valor undefined significa que a variável não foi instanciada. Inicialmente todas as variáveis se encontram neste estado. var x; alert(“O valor de x é ”+x); Variáveis e Tipos de Dados Obs1: o JavaScript é case-sensitive, ou seja, letras minúsculas e maiúsculas são diferentes. Assim: var Nome; é uma variável e var nome; é outra variável Obs2: os valores undefined e null devem ser escritos sempre em letras minúsculas. Variáveis e Tipos de Dados ● Conversão→ uma variável pode ser convertida: ○ sendo atribuída para outro tipo; var numero = 1; (inteiro) numero = numero / 2; (converte-se em decimal) ○ utilizando uma função de conversão numero = parseFloat(numero);(para decimal) numero = parseInt(numero);(para inteiro) ○ fazendo operações aritiméticas. var numero = 0.5; (é decimal) numero = " " + numero; (virou texto) Contantes São variáveis declaradas coma palavra chave “const”, e que não podem sofrer alteração de seu conteúdo e nem de sua declaração no escopo da rotina. const fator = 1.34; const nome = “Sérgio”; Se tentar efetuar uma redeclaração ocorrerá um erro de execução, exemplo: const fator = 1.34; var fator = 22 • ou então se este já tiver sido declarado function funcao() {} const funcao=”teste”; Arrays •São variáveis que contém várias ocorrências em seu interior. A declaração de uma matriz é feita delimitando os elementos por colchetes“[]” ou utilizando o objeto Array(). var frutas=[“laranja”, “banana”, “pera”]; var nomes=new Array(“Sérgio”,“Eduardo”,”Rodrigues”); var valores=[1.34, 10, 50, 13e2]; pode-se utilizar elementos vazios na declaração de uma matriz, por exemplo : var frutas; frutas=["laranja","banana",,"pera",,," abacaxi"]; Arrays •Funções de uma variável array: concat() - concatena dois ou mais arrays e retorna uma cópia como resultado. indexOf() - procura por um objeto dentro do array e retorna o índice caso o encontre. join() - concatena todos os elementos de um array em uma string. lastIndexOf() - procura, de trás para frente, por um objeto dentro array e retorna o índice caso o encontre. pop() - remove o último objeto de um array e retorna o objeto removido. push() - adiciona um objeto no final do array e retorno o novo tamanho do Funções •As funções são declaradas pela palavra reservada “function”, seguido pelo identificador, por parâmetros (que são opcionais) delimitados por “()“ parêntesis, e do corpo que é delimitado por “{}“ chaves. function quadrado(x) { return x*x; } function printNome(nome) { alert(“Seu nome é ”+nome); } Esta função retorna um valor, mas não é necessário indicar isso na função, como acontece em JAVA. Nem o tipo do parâmetro. Funções •Podemos imprimir a saída de uma função function quadrado(x) { return x*x; } alert(quadrado(2)); document.write(quadrado(10)); Operadores Mudança de valor: = Atribuição ++ Incremento -- Decremento Comparação: == Igual != Diferente < Menor que >= Menor ou igual a > Maior que >= Maior ou igual que Lógicos: && E (And) || Ou (Or) ! Não (Not) Exercícios Exercício 1.1 Crie duas variáves x e y, as quais irão receber números. Imprima, na página, as 4 operações entre elas. Exercício 1.2 Crie uma variável chamada peso, uma chamada altura e outra chamada imc. Crie uma função que receba o peso e a altura e retorne o imc. O cálculo do IMC é peso / (altura)2. Imprima o IMC calculado. Condicionais • IF var x =10; if(x<20){ alert(“X é menor que 20”); }else{ alert(“X não é menor que 20”) } Condicionais • SWITCH var opcao =2; switch(opcao){ 1: alert(“saindo do programa”); break; 2: alert(“continuar no programa”); break; default: alert(“opção não existe”); } Laços • FOR var frutas=[“laranja”, “banana”, “pera”]; for(var i= 0; i <frutas.length; i++){ document.write(frutas[i]+”<br>); } var i; for(i= 0; i <frutas.length; i++){ document.write(frutas[i]+”<br>); } Laços • WHILE var frutas=[“laranja”, “banana”, “pera”]; var i=0; while(i <frutas.length){ document.write(frutas[i]+”<br>); i++; } Laços • DO WHILE var frutas=[“laranja”, “banana”, “pera”]; var i=0; do{ document.write(frutas[i]+”<br>); i++; }while(i <frutas.length); Exercícios Exercício 2 Reescreva a função de cálculo do IMC, inserindo as seguintes condições: < 19 → abaixo do peso >19 e <25 → peso normal >25 e <27 → acima do peso > 27 → obeso A função deve imprimir a condição, de acordo com o IMC.
Compartilhar