Linguagem de Programação para Web JavaScript (Elementos de Programação e Programação Básica) Prof. Mauro Lopes 1
Objetivos Iniciaremos aqui o nosso estudo sobre a Linguagem de Programação JavaScript. Apresentaremos os conceitos básicos sobre a Linguagem, tais como variáveis, constantes, palavras reservadas, operadores aritméticos, expressões aritméticas e a estrutura básica do código. Ao final o aluno entenderá como inserir código JavaScript em suas páginas. 2
Plano de Aula Variáveis e Constantes Palavras Reservadas Operadores e Expressões Aritméticas Estrutura Básica do JavaScript Objetos window e document Estruturas de Decisão e Repetição 3
Elementos de Programação Variáveis: O armazenamento de um dado em memória através das Linguagens de Programação é feito pelas variáveis; O nome de uma variável é utilizado para sua identificação e posterior uso dentro de um programa; As regras a seguir são utilizadas no JavaScript para definição do nome de uma variável: O nome de uma variável pode ter um ou mais caracteres; O primeiro caractere de uma variável não pode ser um número; O nome de uma variável não pode ter espaços em branco; O nome de uma variável não pode ser uma palavra reservada; O único caractere que não é letra ou número permitido no nome de uma variável é o undescore ( _ ); O JavaScript é case sensitive; 4
Elementos de Programação Variáveis: A declaração de uma variável em JavaScript é feito usando-se a palavra reservada var; Outro ponto importante é com relação a tipagem de dados. Este conceito é inexistente quando da declaração de uma variável em JavaScript. Então como o JavaScript se vira? Pesquise sobre a Tipagem Dinâmica 5
Elementos de Programação Variáveis: Dê nome aos dados var titulo = JavaScript na Prática ; Palavra reservada: var Nomes de variáveis normalmente em snake_case Linha termina em ponto e vírgula ( ; ) Quando não declaramos uma variável com var, ela vira uma variável global. Cuidado!!! 6
Elementos de Programação Tipagem fraca, dinâmica e implícita var numero = 100; (int) var titulo = jquery na Prática ; (string) var quantidade = 5.7; (float) var erro = true; (boolean) 7
Elementos de Programação Constantes: Com relação ao conceito de constante, é tudo aquilo que é fixo ou estável; Na expressão abaixo temos o conteúdo 2.45 como um valor constante: resultado = entrada + 2.45; constante 8
Elementos de Programação Palavras Reservadas: Toda linguagem de programação tem um conjunto de comandos e funções internas, que formam as instruções de uma linguagem para que seja possível programar. Este conjunto de comandos e funções denomina-se palavras reservadas ou palavras-chave; O quadro ao lado não apresenta as funções internas 9
Elementos de Programação Operadores e Expressões Aritméticas: Operadores aritméticos são classificados em binários ou unários. São binários quando atuam em operações de exponenciação, multiplicação, divisão, adição e subtração. São unários quando atuam na inversão de um valor, de positivo para negativo ou vice-versa; Uma Expressão Aritmética consiste no relacionamento entre variáveis e constantes numéricas com a utilização dos operadores aritméticos; Binário: +, -, *, /, %. Unário: ++, --, -. 10
Elementos de Programação Estrutura Básica do JavaScript: Todo programa em JavaScript pode ser inserido em uma de duas áreas (ou em ambas) de um documento HTML, entre as tags <body> e </body> ou <head> e </head>; Entre as tags <body>: O código é executado quando a referida página é acessada; Entre as tags <head>: O código é executado em forma de uma função. A chamada a essa função deve ser definida entre as tags <body>; Seja qual for a área escolhida para escrever um código em JavaScript, este deve ser definido entre as tags <script> e </script>; 11
Elementos de Programação Estrutura Básica do JavaScript: Como conteúdo do elemento <script> <script type="text/javascript" > alert("executando o código"); </script> Especificando um arquivo de código através do atributo src do elemento <script> <script type="text/javascript" src="common.js ></script> 12
Elementos de Programação Estrutura Básica do JavaScript: 1. <script language= JavaScript type= text/javascript > 2. //<![CDATA[ 3. [comandos em JavaScript] 4. // ]]> 5. </script> Considerações sobre o código: Identificação do tipo de script em uso (language e type) e da versão (version). O parâmetro de versão pode ser omitido, deixando o código genérico; O Código <![CDATA[]> (character data) é usado para evitar problemas com a validação do XHTML. Com isto as ferramentas de validação identificam os códigos como uma seqüência de dados baseados em caracteres; 13
Programação Básica O que é o objeto window? O objeto window faz a manipulação das janelas do navegador. Sempre que abrirmos o navegador automaticamente esse objeto é gerado, isso acontece porque esse objeto representa exatamente essa janela que foi aberta; Esse objeto permite aos desenvolvedores criar e abrirem novas janelas de maneiras diferentes; Algumas Propriedades: Closed: Esta propriedade retorna um valor booleano indicando se a janela foi fechada. DefaulStatus: Com esta propriedade conseguimos definir uma mensagem padrão que será exibida na barra de status do navegador. Document: Esta propriedade possui todas as características da página HTML, como por exemplo, cor das letras, cor do fundo, imagens, etc. InnerHeigth: Com esta propriedade podemos definir ou obter a altura da área onde o conteúdo é apresentado, não a altura do navegador em si. InnerWidth: Com esta propriedade podemos definir ou obter a largura da área onde o conteúdo é apresentado, não a largura do navegador em si. 14
Programação Básica Como usar o document? document.getelementbyid(id): é usado quando queremos localizar e retornar um elemento HTML baseado no valor de sua propriedade id; document.getelementsbytagname(tagname): Busca nós correspondentes de uma tag; document.getelementsbyclassname(class): Busca nós com uma classe específica; Os métodos getelementsbytagname e getelementsbyclassname permitem trazer resultados únicos em nós específicos. Basta informar o número do array que deseja obter os dados (getelementsbytagname(tag)[3]) 15
Programação Básica Estruturas de Decisão Pela similaridade com a Linguagem de Programação C, iremos apenas citar as estruturas existentes na Linguagem JavaScript, pois a sintaxe e semântica destas estruturas são iguais; Decisão Simples If <(condição)> { } <instruções para condição verdadeira>; Decisão Composta If <(condição)> { } else { } <instruções para condição verdadeira>; <instruções para condição falsa>; 16
Estrutura de Decisão Seleção Sequencial switch <variável> { } Programação Básica case <opção 1>:<operação 1>; break; case <opção 2>:<operação 2>; break; case <opção n>:<operação n>; break; default: <operação default>; Operadores Lógicos e Relacionais && (conjunção) AND (E) (disjunção) OR (OU)! (negação) NOT (NÃO) Conjunto de operadores relacionais: == (igual a), < (menor que), > (maior que), <= (menor ou igual a), >= (maior ou igual a),!= (diferente de) 17
Programação Básica Estruturas de Repetição Laço de Repetição com Condição Inicial while <(condição)> { } <instrução 1 executada enquanto condição for verdadeira>; <instrução 2 executada enquanto condição for verdadeira>; <instrução n executada enquanto condição for verdadeira>; Laço de Repetição com Condição Final do { <instrução 1 executada até que a condição seja verdadeira>; <instrução 2 executada até que a condição seja verdadeira>; <instrução n executada até que a condição seja verdadeira>; } while <(condição)>; 18
Estruturas de Repetição Laço de Repetição Iterativo Programação Básica for (<início>; <fim>; <incremento>) { } <instrução 1>; <instrução 2>; <instrução 3>; <instrução n>; 19
Programação Básica Vamos Praticar!!! Vamos fazer como nosso amigo ao lado. Vamos entender um pouco mais do JavaScript praticando!! 20
Atividade para a Próxima Aula: Pesquise sobre a História da Linguagem JavaScript. Que outras linguagens de script existem para o desenvolvimento web. Comente sobre elas; Pesquise como o JavaScript trabalha com tipagem de dados; O que é Ajax? ATIVIDADE PARTICIPE!! ISSO FAZ PARTE DA SUA AVALIAÇÃO 21
Perguntas Página do Professor Mauro: http://www.dai.ifma.edu.br/~mlcsilva 22
Próxima Aula... JavaScript: Funções, Tratamento de Eventos, Manipulação de Strings, Vetores, Datas e Operações Matemáticas 23
Referências Materiais avulsos da Internet e o Livro Guia de Orientação e Desenvolvimento de Sites - Html, Xhtml, Css e Javascript / Jscript, Jose Augusto N. G. Manzano, 1ª Edição - Editora Érica, 382 páginas. 24