• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript - Aula Introdutůria
 

JavaScript - Aula Introdutůria

on

  • 16,130 views

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

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

Statistics

Views

Total Views
16,130
Views on SlideShare
15,706
Embed Views
424

Actions

Likes
2
Downloads
0
Comments
0

10 Embeds 424

http://lp-plural.blogspot.com 226
http://lp-plural.blogspot.com.br 80
http://lp-plural.blogspot.ru 55
http://www.slideshare.net 43
http://www.pearltrees.com 15
http://www.eradigitalnet.co.cc 1
http://webcache.googleusercontent.com 1
http://www.eradigitalnet.net63.net 1
http://lp-plural.blogspot.pt 1
http://www.lp-plural.blogspot.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript - Aula Introdutůria JavaScript - Aula Introdutůria Presentation Transcript

    • JavaScript Lucas Leite Maicon Martins
    • O que √© JavaScript
      • JavaScript √© uma linguagem de programa√ß√£o criada pela Netscape em 1995, que a princ√≠pio se chamava LiveScript, para atender, principalmente, as seguintes necessidades:
      • * Valida√ß√£o de formul√°rios no lado cliente (programa navegador);
      • * Intera√ß√£o com a p√°gina. Assim, foi feita como uma linguagem de script.
      • Principais Caracter√≠sticas
      • Oferece tipagem din√Ęmica - tipos de vari√°veis n√£o s√£o definidos;
      • √Č interpretada, ao inv√©s de compilada;
      • Possui √≥timas ferramentas padr√£o para listagens
      • Oferece bom suporte a express√Ķes regulares.
      • JavaScript + CSS = DHTML
    • Aten√ß√£o!
      • JavaScript n√£o √© Java!
      • 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.
      • Java -> Compilado, executado pela m√°quina virtual
      • JavaScript -> Interpretado, executado pelo navegador
    • Criando projeto no Eclipse
      • Abrir o eclipse
      • File -> New -> Project
        • Web -> Static Web Project (Next)
        • Project Name: AulaJS_0_Inicio (Finish)
      • Clicar na direita na pasta WebContent, New -> Other
        • Web -> HTML (Next)
        • File Name: index.html (Finish)
      • Clicar na direita na pasta WebContent, New -> Other
        • Web -> JavaScript (Next)
        • File Name: script.js (Finish)
    • Incorpora√ß√£o de Script ao HTML
      • 3 maneiras:
      • Definir todo o JavaScript dentro das tags <script> e </script> dentro do <head> do html
        • <html>
        • <head>
        • <title>Titulo</title>
        • <script>
        • alert('hello world');
        • </script>
        • </head>
        • <body>
        • </body>
        • </html>
    • Incorpora√ß√£o de Script ao HTML
      • 3 maneiras:
      • 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
        • <html>
        • <head>
        • <title>Titulo</title>
        • </head>
        • <body>
        • <h1> Texto qualquer </h1> <br>
        • <script>
        • alert('outra maneira');
        • document.write('teste 123');
        • </script>
        • </body>
        • </html>
    • Incorpora√ß√£o de Script ao HTML
      • 3 maneiras:
      • Definir na tag <head>, atrav√©s da tag <script>, uma refer√™ncia a um arquivo .js externo.
        • index.html
        • <html>
        • <head>
        • <title>Titulo</title>
        • <script src=&quot;teste.js&quot;></script>
        • </head>
        • <body>
        • </body>
        • </html>
        • teste.js
        • alert(‚Äúmaneira recomendada‚ÄĚ);
    • Detectando Erros (Mozilla Firefox)
      • Para detectar erros em JavaScript, o mais utilizado √© o ‚ÄúConsole de JavaScript‚ÄĚ do Mozilla Firefox (Menu Ferramentas).
      • Internet Explorer n√£o possui console que trate erros JavaScript de forma f√°cil.
      • <html>
      • <head>
      • <script>
        • a = 4;
        • b = 6;
        • c = a + b
        • alert(z);
        • c = &quot;teste&quot;;
        • alert(c);
      • </script>
      • </head>
      • <body>
      • </body>
      • </html>
    • Estrutura da Linguagem ‚Äď Condicional If
      • <html>
      • <head>
      • <script>
        • numero = 10;
        • if (numero >= 5) {
          • alert(numero+&quot; √© maior que 5&quot;);
        • } else {
          • alert(numero+&quot; √© menor que 5&quot;);
        • }
      • </script>
      • </head>
      • <body>
      • </body>
      • </html>
    • Estrutura da Linguagem ‚Äď Condicional If Aninhado
      • <html>
      • <head>
      • <script>
        • numero = 10;
        • aux = 5;
        • if ((numero >= 5)&&(aux % 2 == 0)) {
          • alert(numero+&quot; √© maior que 5 e &quot;+aux+&quot; √© par&quot;);
        • } else if ((numero < 10)||(aux % 2 != 0)) {
          • alert(numero+&quot; √© menor que 10 ou &quot;+aux+&quot; √© √≠mpar&quot;);
        • } else {
          • alert(&quot; Exce√ß√£o &quot;);
        • }
      • </script>
      • </head>
      • <body>
      • </body>
      • </html>
    • Estrutura da Linguagem ‚Äď Switch
      • <script>
        • farol = &quot;amarelo&quot;
        • switch (farol) {
          • case &quot;vermelho&quot;:
            • alert(&quot;Pare&quot;)
            • break
          • case &quot;amarelo&quot;:
            • alert(&quot;Atencao&quot;)
            • break
          • case &quot;verde&quot;:
            • alert(&quot;Prossiga&quot;)
            • break
          • default :
            • alert(&quot;Cor ilegal&quot;)
        • }
      • </script>
    • Estrutura da Linguagem ‚Äď Switch (Break aninhado)
      • <script>
        • letra = &quot;e&quot;
        • switch (letra) {
          • case &quot;a&quot;:
          • case &quot;e&quot;:
          • case &quot;i&quot;:
          • case &quot;o&quot;:
          • case &quot;u&quot;:
            • alert(&quot;vogal&quot;)
            • break
          • default :
            • alert(&quot;outra letra&quot;)
        • }
      • </script>
    • Estrutura da Linguagem ‚Äď For
      • <script>
      • cont = 4;
      • for (i = 0; i < cont; i++)
      • {
      • alert(i);
      • }
      • </script>
      • <script>
      • cor = new Array();
      • cor[ &quot;amarelo&quot; ] = &quot;yellow&quot;;
      • cor[ &quot;verde&quot; ] = &quot;green&quot;;
      • cor[ &quot;azul&quot; ] = &quot;blue&quot;;
      • for (chave in cor) {
      • alert(&quot;A chave do vetor √© &quot;+chave+&quot; e o valor √© &quot;+cor[chave]);
      • }
      • </script>
    • Estrutura da Linguagem ‚Äď While - Do..While
      • <script>
      • numero = 0;
      • while (numero < 10) {
      • numero++;
      • }
      • alert(numero);
      • </script>
      • <script>
      • numero = 20;
      • do {
      • numero++;
      • } while (numero < 10)
      • alert(numero);
      • </script>
    • Estrutura da Linguagem ‚Äď Fun√ß√Ķes
      • function para_maiusculas (obj) {
      • obj.value = obj.value.toUpperCase();
      • }
      • function mes_extenso(mes){
      • str = &quot;&quot;;
      • switch (mes) {
      • case 1 : str = &quot;JANEIRO&quot;; break;
      • case 2 : str = &quot;FEVEREIRO&quot;; break;
      • case 3: str = &quot;MAR√áO&quot;; break;
      • case 4: str = &quot;ABRIL&quot;; break;
      • case 5: str = &quot;MAIO&quot;; break;
      • case 6: str = &quot;JUNHO&quot;; break;
      • case 7: str = &quot;JULHO&quot;; break;
      • case 8: str = &quot;AGOSTO&quot;; break;
      • case 9: str = &quot;SETEMBRO&quot;; break;
      • case 10: str = &quot;OUTUBRO&quot;; break;
      • case 11: str = &quot;NOVEMBRO&quot;; break;
      • case 12: str = &quot;DEZEMBRO&quot;; break;
      • }
      • return str;
      • }
    • 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.
    • DOM ‚Äď Vis√£o Geral e Simplificada (Netscape '01)
    • 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.
    • 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.