JavaScript - Aula Introdutória

10,020
-1

Published on

Slides da aula introdutória sobre JavaScript, elaborado por Lucas Leite e Maicon Martins.

Published in: Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,020
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JavaScript - Aula Introdutória

  1. 1. JavaScript Lucas Leite Maicon Martins
  2. 2. O que é JavaScript <ul><li>JavaScript é uma linguagem de programação criada pela Netscape em 1995, que a princípio se chamava LiveScript, para atender, principalmente, as seguintes necessidades: </li></ul><ul><li>* Validação de formulários no lado cliente (programa navegador); </li></ul><ul><li>* Interação com a página. Assim, foi feita como uma linguagem de script. </li></ul><ul><li>Principais Características </li></ul><ul><li>Oferece tipagem dinâmica - tipos de variáveis não são definidos; </li></ul><ul><li>É interpretada, ao invés de compilada; </li></ul><ul><li>Possui ótimas ferramentas padrão para listagens </li></ul><ul><li>Oferece bom suporte a expressões regulares. </li></ul><ul><li>JavaScript + CSS = DHTML </li></ul>
  3. 3. Atenção! <ul><li>JavaScript não é Java! </li></ul><ul><li>O nome JavaScript trata-se de uma estratégia de marketing da Netscape para lançar sua linguagem de programação e atrelar a linguagem Java. </li></ul><ul><li>Java -> Compilado, executado pela máquina virtual </li></ul><ul><li>JavaScript -> Interpretado, executado pelo navegador </li></ul>
  4. 4. Criando projeto no Eclipse <ul><li>Abrir o eclipse </li></ul><ul><li>File -> New -> Project </li></ul><ul><ul><li>Web -> Static Web Project (Next) </li></ul></ul><ul><ul><li>Project Name: AulaJS_0_Inicio (Finish) </li></ul></ul><ul><li>Clicar na direita na pasta WebContent, New -> Other </li></ul><ul><ul><li>Web -> HTML (Next) </li></ul></ul><ul><ul><li>File Name: index.html (Finish) </li></ul></ul><ul><li>Clicar na direita na pasta WebContent, New -> Other </li></ul><ul><ul><li>Web -> JavaScript (Next) </li></ul></ul><ul><ul><li>File Name: script.js (Finish) </li></ul></ul>
  5. 5. Incorporação de Script ao HTML <ul><li>3 maneiras: </li></ul><ul><li>Definir todo o JavaScript dentro das tags <script> e </script> dentro do <head> do html </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title>Titulo</title> </li></ul></ul><ul><ul><li><script> </li></ul></ul><ul><ul><li>alert('hello world'); </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  6. 6. Incorporação de Script ao HTML <ul><li>3 maneiras: </li></ul><ul><li>Definir durante a execução da página um código que será executado quando a página chegar nesta parte, através da tag <script> também </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title>Titulo</title> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><h1> Texto qualquer </h1> <br> </li></ul></ul><ul><ul><li><script> </li></ul></ul><ul><ul><li>alert('outra maneira'); </li></ul></ul><ul><ul><li>document.write('teste 123'); </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  7. 7. Incorporação de Script ao HTML <ul><li>3 maneiras: </li></ul><ul><li>Definir na tag <head>, através da tag <script>, uma referência a um arquivo .js externo. </li></ul><ul><ul><li>index.html </li></ul></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title>Titulo</title> </li></ul></ul><ul><ul><li><script src=&quot;teste.js&quot;></script> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul><ul><ul><li>teste.js </li></ul></ul><ul><ul><li>alert(“maneira recomendada”); </li></ul></ul>
  8. 8. Detectando Erros (Mozilla Firefox) <ul><li>Para detectar erros em JavaScript, o mais utilizado é o “Console de JavaScript” do Mozilla Firefox (Menu Ferramentas). </li></ul><ul><li>Internet Explorer não possui console que trate erros JavaScript de forma fácil. </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script> </li></ul><ul><ul><li>a = 4; </li></ul></ul><ul><ul><li>b = 6; </li></ul></ul><ul><ul><li>c = a + b </li></ul></ul><ul><ul><li>alert(z); </li></ul></ul><ul><ul><li>c = &quot;teste&quot;; </li></ul></ul><ul><ul><li>alert(c); </li></ul></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  9. 9. Estrutura da Linguagem – Condicional If <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script> </li></ul><ul><ul><li>numero = 10; </li></ul></ul><ul><ul><li>if (numero >= 5) { </li></ul></ul><ul><ul><ul><li>alert(numero+&quot; é maior que 5&quot;); </li></ul></ul></ul><ul><ul><li>} else { </li></ul></ul><ul><ul><ul><li>alert(numero+&quot; é menor que 5&quot;); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  10. 10. Estrutura da Linguagem – Condicional If Aninhado <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script> </li></ul><ul><ul><li>numero = 10; </li></ul></ul><ul><ul><li>aux = 5; </li></ul></ul><ul><ul><li>if ((numero >= 5)&&(aux % 2 == 0)) { </li></ul></ul><ul><ul><ul><li>alert(numero+&quot; é maior que 5 e &quot;+aux+&quot; é par&quot;); </li></ul></ul></ul><ul><ul><li>} else if ((numero < 10)||(aux % 2 != 0)) { </li></ul></ul><ul><ul><ul><li>alert(numero+&quot; é menor que 10 ou &quot;+aux+&quot; é ímpar&quot;); </li></ul></ul></ul><ul><ul><li>} else { </li></ul></ul><ul><ul><ul><li>alert(&quot; Exceção &quot;); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  11. 11. Estrutura da Linguagem – Switch <ul><li><script> </li></ul><ul><ul><li>farol = &quot;amarelo&quot; </li></ul></ul><ul><ul><li>switch (farol) { </li></ul></ul><ul><ul><ul><li>case &quot;vermelho&quot;: </li></ul></ul></ul><ul><ul><ul><ul><li>alert(&quot;Pare&quot;) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>break </li></ul></ul></ul></ul><ul><ul><ul><li>case &quot;amarelo&quot;: </li></ul></ul></ul><ul><ul><ul><ul><li>alert(&quot;Atencao&quot;) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>break </li></ul></ul></ul></ul><ul><ul><ul><li>case &quot;verde&quot;: </li></ul></ul></ul><ul><ul><ul><ul><li>alert(&quot;Prossiga&quot;) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>break </li></ul></ul></ul></ul><ul><ul><ul><li>default : </li></ul></ul></ul><ul><ul><ul><ul><li>alert(&quot;Cor ilegal&quot;) </li></ul></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li></script> </li></ul>
  12. 12. Estrutura da Linguagem – Switch (Break aninhado) <ul><li><script> </li></ul><ul><ul><li>letra = &quot;e&quot; </li></ul></ul><ul><ul><li>switch (letra) { </li></ul></ul><ul><ul><ul><li>case &quot;a&quot;: </li></ul></ul></ul><ul><ul><ul><li>case &quot;e&quot;: </li></ul></ul></ul><ul><ul><ul><li>case &quot;i&quot;: </li></ul></ul></ul><ul><ul><ul><li>case &quot;o&quot;: </li></ul></ul></ul><ul><ul><ul><li>case &quot;u&quot;: </li></ul></ul></ul><ul><ul><ul><ul><li>alert(&quot;vogal&quot;) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>break </li></ul></ul></ul></ul><ul><ul><ul><li>default : </li></ul></ul></ul><ul><ul><ul><ul><li>alert(&quot;outra letra&quot;) </li></ul></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li></script> </li></ul>
  13. 13. Estrutura da Linguagem – For <ul><li><script> </li></ul><ul><li>cont = 4; </li></ul><ul><li>for (i = 0; i < cont; i++) </li></ul><ul><li>{ </li></ul><ul><li>alert(i); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li><script> </li></ul><ul><li>cor = new Array(); </li></ul><ul><li>cor[ &quot;amarelo&quot; ] = &quot;yellow&quot;; </li></ul><ul><li>cor[ &quot;verde&quot; ] = &quot;green&quot;; </li></ul><ul><li>cor[ &quot;azul&quot; ] = &quot;blue&quot;; </li></ul><ul><li>for (chave in cor) { </li></ul><ul><li>alert(&quot;A chave do vetor é &quot;+chave+&quot; e o valor é &quot;+cor[chave]); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>
  14. 14. Estrutura da Linguagem – While - Do..While <ul><li><script> </li></ul><ul><li>numero = 0; </li></ul><ul><li>while (numero < 10) { </li></ul><ul><li>numero++; </li></ul><ul><li>} </li></ul><ul><li>alert(numero); </li></ul><ul><li></script> </li></ul><ul><li><script> </li></ul><ul><li>numero = 20; </li></ul><ul><li>do { </li></ul><ul><li>numero++; </li></ul><ul><li>} while (numero < 10) </li></ul><ul><li>alert(numero); </li></ul><ul><li></script> </li></ul>
  15. 15. Estrutura da Linguagem – Funções <ul><li>function para_maiusculas (obj) { </li></ul><ul><li>obj.value = obj.value.toUpperCase(); </li></ul><ul><li>} </li></ul><ul><li>function mes_extenso(mes){ </li></ul><ul><li>str = &quot;&quot;; </li></ul><ul><li>switch (mes) { </li></ul><ul><li>case 1 : str = &quot;JANEIRO&quot;; break; </li></ul><ul><li>case 2 : str = &quot;FEVEREIRO&quot;; break; </li></ul><ul><li>case 3: str = &quot;MARÇO&quot;; break; </li></ul><ul><li>case 4: str = &quot;ABRIL&quot;; break; </li></ul><ul><li>case 5: str = &quot;MAIO&quot;; break; </li></ul><ul><li>case 6: str = &quot;JUNHO&quot;; break; </li></ul><ul><li>case 7: str = &quot;JULHO&quot;; break; </li></ul><ul><li>case 8: str = &quot;AGOSTO&quot;; break; </li></ul><ul><li>case 9: str = &quot;SETEMBRO&quot;; break; </li></ul><ul><li>case 10: str = &quot;OUTUBRO&quot;; break; </li></ul><ul><li>case 11: str = &quot;NOVEMBRO&quot;; break; </li></ul><ul><li>case 12: str = &quot;DEZEMBRO&quot;; break; </li></ul><ul><li>} </li></ul><ul><li>return str; </li></ul><ul><li>} </li></ul>
  16. 16. DOM – Document Object Model O Modelo de Objeto de Documentos (DOM) é uma interface de programação de aplicativos (API) para documentos HTML e XML. É a definição da estrutura lógica dos documentos e o meio pelo qual um documento é acessado e manipulado. Ou seja, é o mapeamento em objetos e atributos das tags e elementos do HTML. O DOM é padronizado pelo W3C, mas nem sempre as suas especificações são implementadas fielmente nos browsers. O Internet Explorer, por exemplo, possui muitas implementações do DOM que diferem do padrão W3C, causando transtornos com compatibilidades com browsers que implementam o padrão mais fielmente (Firefox e Opera). O DOM foi concebido para ser utilizado com qualquer linguagem de programação. Atualmente, a linguagem que mais implementa o conceito de DOM é o JavaScript, sendo ele a parte mais fundamental dessa linguagem.
  17. 17. DOM – Visão Geral e Simplificada (Netscape '01)
  18. 18. DOM – Objeto Window Acessar Frames dentro da páginas (em desuso) Acesso do documento em si, o HTML da Window Arquivo que Window está usando. Pode ser alterado (GOTO) Acesso ao Histórico. Avança e recua páginas.
  19. 19. DOM – Objeto Window (+) + atributos Window.Status Barra de Status do Navegador (não-padrão) + métodos Window.Open() Abre uma nova janela do navegador (usada para pop-ups) Window.Close() Fecha a janela corrente Window.Alert() Mensagem de alerta (já usada em exemplos anteriores) Window.Confirm() Mensagem com opções OK/Cancela Window.Prompt() Mensagem com edit para entrada de dados simples (ruim) Atividade Proposta Crie um HTML que incorpore um script escrito em outro arquivo, onde serão criadas funções a serem disparadas pelo <head> do HTML. O objetivo é criar um Prompt para entrada de um texto simples, a informação passada a um Confirm que, se OK mostre um Alert, senão abra uma Popup com um HTML simples.

×