SlideShare une entreprise Scribd logo
1  sur  19
JavaScript Lucas Leite Maicon Martins
O que é JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Atenção! ,[object Object],[object Object],[object Object],[object Object]
Criando projeto no Eclipse ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Incorporação de Script ao HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Incorporação de Script ao HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Incorporação de Script ao HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Detectando Erros (Mozilla Firefox) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Estrutura da Linguagem – Condicional If ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Estrutura da Linguagem – Condicional If Aninhado ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Estrutura da Linguagem – Switch ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Estrutura da Linguagem – Switch (Break aninhado) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Estrutura da Linguagem – For ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Estrutura da Linguagem – While - Do..While ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Estrutura da Linguagem – Funções ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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.

Contenu connexe

Tendances

Aula 02 e 03 estrutura básica parte 01 e 02
Aula 02 e 03 estrutura básica parte 01 e 02Aula 02 e 03 estrutura básica parte 01 e 02
Aula 02 e 03 estrutura básica parte 01 e 02
Jolvani Morgan
 

Tendances (20)

Xhtml
XhtmlXhtml
Xhtml
 
Clean Code (Robert C. Martin)
Clean Code (Robert C. Martin)Clean Code (Robert C. Martin)
Clean Code (Robert C. Martin)
 
Aula 01 - Começando a programar em PHP
Aula 01 - Começando a programar em PHPAula 01 - Começando a programar em PHP
Aula 01 - Começando a programar em PHP
 
Aula 02 e 03 estrutura básica parte 01 e 02
Aula 02 e 03 estrutura básica parte 01 e 02Aula 02 e 03 estrutura básica parte 01 e 02
Aula 02 e 03 estrutura básica parte 01 e 02
 
1. Computador; Línguas naturais; Linguagens de Programação; Algoritmo e progr...
1. Computador; Línguas naturais; Linguagens de Programação; Algoritmo e progr...1. Computador; Línguas naturais; Linguagens de Programação; Algoritmo e progr...
1. Computador; Línguas naturais; Linguagens de Programação; Algoritmo e progr...
 
Clean code
Clean codeClean code
Clean code
 
HTML e Hipertexto
HTML e HipertextoHTML e Hipertexto
HTML e Hipertexto
 
Clean code
Clean codeClean code
Clean code
 
Codigo limpo
Codigo limpoCodigo limpo
Codigo limpo
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQuery
 
Aula06 - JavaScript
Aula06 - JavaScriptAula06 - JavaScript
Aula06 - JavaScript
 
Clean code - Mantenha seu código limpo
Clean code - Mantenha seu código limpoClean code - Mantenha seu código limpo
Clean code - Mantenha seu código limpo
 
Aula05-JavaScript
Aula05-JavaScriptAula05-JavaScript
Aula05-JavaScript
 
Clean Code
Clean CodeClean Code
Clean Code
 
Xhtml 2011 - atualizado
Xhtml   2011 - atualizadoXhtml   2011 - atualizado
Xhtml 2011 - atualizado
 
Java script2
Java script2Java script2
Java script2
 
Apresentação Clean Code
Apresentação Clean CodeApresentação Clean Code
Apresentação Clean Code
 
Trabalho sobre a linguagem Python
Trabalho sobre a linguagem PythonTrabalho sobre a linguagem Python
Trabalho sobre a linguagem Python
 
2. Programação e resolução de problemas; Algoritmos; Snap! – Fundamentos de P...
2. Programação e resolução de problemas; Algoritmos; Snap! – Fundamentos de P...2. Programação e resolução de problemas; Algoritmos; Snap! – Fundamentos de P...
2. Programação e resolução de problemas; Algoritmos; Snap! – Fundamentos de P...
 
Expressões idiomáticas do python
Expressões idiomáticas do pythonExpressões idiomáticas do python
Expressões idiomáticas do python
 

En vedette (10)

Lógica de Programação com Javascript - Aula #03
Lógica de Programação com Javascript - Aula #03Lógica de Programação com Javascript - Aula #03
Lógica de Programação com Javascript - Aula #03
 
Operadores e condições
Operadores e condiçõesOperadores e condições
Operadores e condições
 
Fórmulas (operadores e operandos
Fórmulas (operadores e operandosFórmulas (operadores e operandos
Fórmulas (operadores e operandos
 
Lógica de Programação com Javascript - Aula #05
Lógica de Programação com Javascript - Aula #05Lógica de Programação com Javascript - Aula #05
Lógica de Programação com Javascript - Aula #05
 
Lógica de Programação com Javascript - Aula #02
Lógica de Programação com Javascript - Aula #02Lógica de Programação com Javascript - Aula #02
Lógica de Programação com Javascript - Aula #02
 
Lógica de Programação com Javascript - Aula #04
Lógica de Programação com Javascript - Aula #04Lógica de Programação com Javascript - Aula #04
Lógica de Programação com Javascript - Aula #04
 
Lógica de Programação com Javascript - Aula #01
Lógica de Programação com Javascript - Aula #01Lógica de Programação com Javascript - Aula #01
Lógica de Programação com Javascript - Aula #01
 
Javascript (parte 1)
Javascript (parte 1)Javascript (parte 1)
Javascript (parte 1)
 
[Curso Java Basico] Exercicios Aula 19
[Curso Java Basico] Exercicios Aula 19[Curso Java Basico] Exercicios Aula 19
[Curso Java Basico] Exercicios Aula 19
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 

Similaire à JavaScript - Aula Introdutória

Java mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebJava mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento Web
Bruno Borges
 
Logica Algoritmo 07 Subalgoritmos
Logica Algoritmo 07 SubalgoritmosLogica Algoritmo 07 Subalgoritmos
Logica Algoritmo 07 Subalgoritmos
Regis Magalhães
 
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
guestaa73e1a
 
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Bruno Abrantes
 

Similaire à JavaScript - Aula Introdutória (20)

Javascript
JavascriptJavascript
Javascript
 
Java mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebJava mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento Web
 
Aula 2 - ASP
Aula 2 - ASPAula 2 - ASP
Aula 2 - ASP
 
Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6
 
Desenvolvimento de web sites com php
Desenvolvimento de web sites com phpDesenvolvimento de web sites com php
Desenvolvimento de web sites com php
 
Html5 - O futuro da Web
Html5 - O futuro da WebHtml5 - O futuro da Web
Html5 - O futuro da Web
 
Mini Curso Python
Mini Curso PythonMini Curso Python
Mini Curso Python
 
Logica Algoritmo 07 Subalgoritmos
Logica Algoritmo 07 SubalgoritmosLogica Algoritmo 07 Subalgoritmos
Logica Algoritmo 07 Subalgoritmos
 
Desenvolvendo aplicações web com python e web2py
Desenvolvendo aplicações web com python e web2pyDesenvolvendo aplicações web com python e web2py
Desenvolvendo aplicações web com python e web2py
 
Html5
Html5Html5
Html5
 
Java script
Java scriptJava script
Java script
 
Mini-curso codeIgniter - aula 1
Mini-curso codeIgniter - aula 1Mini-curso codeIgniter - aula 1
Mini-curso codeIgniter - aula 1
 
Introdução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on RailsIntrodução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on Rails
 
Aula 3 - ASP
Aula 3 - ASPAula 3 - ASP
Aula 3 - ASP
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
 
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 

JavaScript - Aula Introdutória

  • 1. JavaScript Lucas Leite Maicon Martins
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 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. DOM – Visão Geral e Simplificada (Netscape '01)
  • 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. 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.