Página1 Javascript JavaScript (JS) é uma linguagem de programação client side Funciona no navegador do usuário. É uma linguagem baseada em objetos. "Walmir".length; 6 Para que serve - fazer websites responder à interação do usuário (alterar cor, fonte, inserir conteúdo novo na página, validar formulários (html 5 substitui), etc. - criar apps. - organizar e apresentar dados (por ex. automatizar o trabalho com planilhas, visualização de dados). Tipos de dados - números (1, 101.23, etc.) - strings ( Jose da Silva, abc, etc.) - booleanos (um booleano é verdadeiro (true) ou falso (false)). Ex.: 23 > 11 é true; 3 < 2 é false. "Estou programando como um profissional".length > 10 true Lista de operadores de comparação - > Maior que - < Menor que - <= Menor ou igual a - >= Maior ou igual a - === Igual a -!== Diferente de Primeiros comandos de interação // Isto e um comentário, que o computador vai ignorar. Atenção! A linguagem é CASE SENSITIVE, ou seja, document é diferente de Document. document.write("ola! ") OLA! (será impresso no corpo da página) alert("ola! "); confirm("isto e um exemplo do uso de JS para criar interação em um website. Clique em OK para continuar! ");
Página2 prompt("qual o seu nome?"); Inserir código javascript na página html: É possível inserir código javascript em uma página html de duas maneiras. Veja a seguir. 1) Direto no código da página html (em head) Basta escrever o código entre as tags <script> Exemplo: <script> alert("olá!"); <script type="text/javascript"> Quando o navegador interpretar este código, mostrará uma janela onde se lê Olá!. 2) Indicando um arquivo externo (em head) É a mais utilizada. a) Cria-se um arquivo com a extensão.js onde o código será escrito. Exemplo: Conteúdo do arquivo chamado arquivo.js alert ("Olá! "); b) Conteúdo no arquivo.html <script src="arquivo.js"> Vantagem para reutilizar o código em outras páginas basta fazer a mesma referência ao arquivo.js (item b) e quando houver alteração no código javascript, será necessário alterar apenas em um local (arquivo.js). O resultado será o mesmo:
Página3 Variável É um texto (nome) que representa uma área de memória. Pode assumir (guardar) diversos conteúdos (textos, números resultantes de cálculos, etc.). Geralmente estes conteúdos serão usados posteriormente pelo programa. Algumas vezes os conteúdos são dados de entrada (dados que o programa precisa receber antes de realizar o processamento que vai produzir o resultado\informação). Exemplo: nome de um aluno, nota do aluno, etc. Maneiras de declarar (criar) uma variável: 1) var nome = "Ana Maria da Silva"; ou var nome; 2) nome = "Ana Maria da Silva"; Recomenda-se usar a 1ª opção e usá-la no início do programa Facilita a visualização das variáveis quando é necessário fazer uma manutenção no programa. Exemplo: var mensagem; mensagem = "Olá!"; alert(mensagem); mensagem = "Bem vindo"; alert(mensagem); Quando o navegador interpretar este código, mostrará duas janelas em sequência: Exemplos de script s (programas em JS) Primeiro exemplo de script O exemplo a seguir imprime a frase Bom dia! na página. Observe que, apesar de não existirem elementos entre as marcações <BODY> e </BODY>, esta frase é exibida. Isto ocorre porque a função document.write() instrui o navegador a colocar o que estiver entre apóstrofos na página. document.write("bom dia!<br>"); <body>
Página4 Segundo exemplo de script Uma das razões de utilizar Javascript é a possibilidade de montar um texto para ser exibido, incluindo valores de variáveis que podem ser inseridos pelo usuário. var nome nome = window.prompt("digite o seu nome:"); // na linha anterior pode-se usar apenas prompt, conforme exemplos. document.write("bom dia, " + nome + "!<br>"); <body> Eventos em Javascript Javascript é uma linguagem dirigida por eventos. Eventos (tais como, clicar no mouse, ou pressionar um botão) são utilizados para controlar a interação do usuário com o aplicativo. Manipuladores de eventos Javascript servem para ativar um script conforme atividades do sistema ou ações do usuário. Eles são divididos em 2 categorias: eventos de sistema e eventos de mouse. Alguns eventos de sistema: OnLoad, OnUnload, OnBeforeUnload. Eles não exigem a interação do usuário para serem ativados. Alguns eventos de mouse: OnClick, OnFocus, OnSelect, OnSubmit, OnMouseOver. Eles exigem a interação do usuário para serem ativados. Terceiro exemplo de script OnLoad Este evento é ativado após a página HTML ser completamente carregada. Ele é associado à tag <BODY>. <script language="javascript"> function chegada() { window.alert("seja bem-vindo ao nosso site!"); } <body onload="chegada()"> <h1>veja que interessante utilização do evento OnLoad.</h1>
Página5 Quarto exemplo de script OnBeforeUnload Este evento é ativado antes da página HTML ser abandonada. Pode ser associado à tag <BODY>. No Internet Explorer, abra o código a seguir e, em seguida, feche a guia de navegação correspondente: <script language="javascript"> function saida() { window.alert("volte sempre!"); } <body onbeforeunload="saida()"> <h1>veja que interessante utilização do evento OnBeforeUnload.</h1> Quinto exemplo de script No Chrome ou no Internet Explorer, abra o código a seguir e, em seguida, feche a guia de navegação correspondente: <script language="javascript"> window.onbeforeunload = saida; function saida() { return "Mensagem da página"; } Estrutura de Decisão Uma das mais importantes ações de um programa é a tomada de decisão conforme uma condição imposta. Operadores Lógicos Símbolo Significado && E OU! NÃO
Página6 Estrutura de Repetição Há situações em que é necessário repetir trechos de um programa um determinado número de vezes, isso pode ser conseguido utilizando-se o laço de repetição (também conhecido pelo nome looping). Funções/Métodos Métodos usados com PROMPT quando o valor informado deve ser convertido em numérico: - parseint() captura um valor como numérico inteiro. - parsefloat() captura um valor como numérico real. Funções Matemáticas: - Math.PI retorna o valor de pi (3,14...). - Math.cos retorna o cosseno de um número. - Math.random retorna um valor aleatório entre 0 e 1. - Math.sqrt retorna a raiz quadrada de um número. EXERCÍCIOS Exercício 1: Desenvolva um programa que apresente como resultado: O valor da raiz quadrada (Math.sqrt) de um número qualquer inteiro informado pelo usuário e o valor sorteado de forma randômica/aleatória (Math.random) entre 0 e 1. Obs.: os resultados devem aparecer em linhas diferentes (utilize a tag <br> (um código html) no comando document.write('... ', variável)). Salve como E1.html, execute no navegador e analise o resultado. <body> <script type="text/javascript"> var base, res, numero; base = parseint(prompt('entre com valor:','digite aqui')); res = Math.sqrt(base); document.write('a raiz quadrada de ', base, ' é ', res); numero = Math.random(); document.write('<br> O valor sorteado foi ', numero); Obs.: para obter números sorteados entre 0 e 99: numero = Math.round(Math.random()*100);
Página7 Exercício 2: Faça um programa que receba três notas de um aluno, calcule e mostre a média aritmética e a mensagem correspondente, conforme a tabela a seguir. A seguir, aos alunos que ficaram para exame, calcule e mostre a nota que deverão tirar para serem aprovados, considerando que a média final exigida para aprovação é 6,0 (média anual + nota exame final = 12). Exercício 3: Considere que agora queremos fazer o mesmo processamento do exercício 2, mas não para um aluno apenas e sim para um grupo de 4 (quatro) alunos. Altere o código do programa anterior e teste. Exercício 4: Faça com que o programa anterior (exercício 3) funcione para grupos com qualquer quantidade de alunos, ou seja, o usuário deve informar, no início do processamento, a quantidade de alunos da turma. Altere e teste. Exercício 5: Considerando o exercício anterior (exercício 5), altere o código para que o programa apresente também as seguintes informações ao final da execução: - O total de alunos aprovados; - O total de alunos em exame; - O total de alunos reprovados; - A média geral do grupo de alunos;