Scribd Logo
Carica

Benvenuto in Scribd!

  • 3206-Desenvolvimento de Software para Web I - Tecnológico Aula 11

    Caricato da

    Wilton Ribeiro
    12 visualizzazioni52 pagine

    Titolo originale

    3206-Desenvolvimento_de_software_para_Web_I_-_Tecnológico_Aula_11

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    12 visualizzazioni52 pagine

    3206-Desenvolvimento de Software para Web I - Tecnológico Aula 11

    Caricato da

    Wilton Ribeiro

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 52

    Curso: Tecnologia em Anlise e Desenvolvimento de Sistemas Professora: Patrcia Luclia dos Santos Freitas

    Data: 31/10/2013

    CSS nvel 1: 17/12/1996 (Doc. nico -9 sees) CSS nvel 2: 12/05/1998 (Doc. nico -19 sees) CSS nvel 2.1: 02/08/2002 (Doc. nico -18 sees)
    Em 07/06/2011 foi proposta uma reviso pela W3C. A W3C prefere nomear nvel ao invs de verso.
    Nvel baseado nas verses anteriores com pequenas melhorias e novas opes.

    CSS3 foi diferente dos nveis anteriores

    CSS3
    No foi feito em um nico documento e sim em mdulos; Cada mdulo tem assuntos ou especificaes independentes;
    Exemplo Especificaes para seletores Especificaes para bordas e fundo

    Vantagem: independncia no desenvolvimento Quando cada mdulo desenvolvido ele avaliado e classificado pela W3C:
    Pode ser recomendado, ser candidatado, estar em rascunho ou outros status.

    Desvantagens

    Podem ser renderizado ou no dependendo do browser ou da verso utilizada. Quando renderizado pode assumir caractersticas diferentes.

    Para conhecer todos os comandos recomendados pela W3C sugiro: SILVA, M. S. CSS3: Desenvolva Aplicaes Web Profissionais com Uso dos Poderosos Recursos de Estilizao das CSS3. So Paulo: Novatec, 2012. H uma lista a partir da pgina 411

    uma linguagem de programao criada pela Netscape com a finalidade de fornecer interatividade as pginas web.
    Sua primeira verso foi criada em 1995 e implementada em 1996. Tendo sido inicialmente desenvolvida pela Netscape, a linguagem JavaScript acabou por dar origem especificao tcnica ECMAScript, que um padro oficial reconhecido pela indstria.

    Segundo a W3C podemos dividir o desenvolvimento de uma pgina da seguinte forma:


    XHTML: Estrutura

    CSS: Estilo visual/Apresentao


    JavaScript: Ao/interao

    Com o JavaScript podemos:


    Voc capaz, por exemplo, de responder muito facilmente a eventos iniciados pelo usurio.

    Pode-se criar pginas muito sofisticadas com a ajuda do JavaScript. possvel encontrar muitos exemplos e reutiliz-los.

    Movimentao de Menus Google maps O recurso de arrastar o mapa. Passar o mouse sobre um elemento e aparecer uma nova janelinha. Facebook Ao passar o mouse sobre os meus amigos, aparece o nome isto feito em javaScript. Quando se abre o elemento de batepapo (janelinha). Validao do formulrio

    Com o JavaScript podemos: Manipular


    Contedo das pginas web Alterar a apresentao Navegador (criar novas janelas)

    Interagir
    Usurio (clique de um mouse) Formulrios Linguagens dinmicas

    Qual a diferena entre Java e JavaScript? Ainda que os nomes sejam quase os mesmos, Java no a mesma coisa que JavaScript.
    Java uma linguagem formal de desenvolvimento de programas; JavaScript uma linguagem desenvolvida pela Netscape de suporte ao html que possibilita uma maior interao da pgina, mas no podemos cham-la de uma linguagem para desenvolvimento.

    Principais diferenas: Java uma linguagem de programao OO, ao passo que Java Script uma linguagem de scripts OO. Java cria aplicaes executadas em uma mquina virtual ou em um browser, ao passo que o cdigo JavaScript executado apenas em um browser. O cdigo Java precisa ser compilado, ao passo que os cdigos JavaScript esto totalmente em texto. Eles requerem plug-ins diferentes.

    Um cdigo JavaScript pode ser inserido em um documento HTML de duas formas: Interno: colocando o cdigo JavaScript como filho de um elemento com a tag script; Externo: Utilizando o atributo src de um elemento com a tag script no qual devemos passar o caminho relativo ou absoluto para um arquivo que contenha o cdigo JavaScript.

    <html > <head > <meta http - equiv =" Content - Type " content =" text / html ; charset =UTF -8"> <title >Inserindo cdigo JavaScript em um documento HTML </ title > <script type =" text / javascript " src =" codigo .js"></ script > <script type =" text / javascript "> window . onload = function (){ document . getElementById (ola -mundo ). innerHTML = Ol Mundo !; } </ script > </ head > <body > <p id="ola - mundo "></p> </ body > </ html >

    Comece criando um diretrio chamado javascript. Abra o modelo de um xhtml que ns j temos. Preferencialmente o javascript deve ser colocado dentro da tag head:
    <script> </script>

    <head> <meta http-equiv="Content-Type" content="text/html; charset=8859-1" /> <title> javascript </title>


    <script type="text/javascript" > alert ("Seja bem vindo(a) minha pgina!"); </script>
    </head>

    Utilize o atributo type:text/javascript dentro da sua tag script. Para isso vamos utilizar um mtodo chamado alert( ); Como parmetro o alert recebe o texto que ser mostrado entre aspas.

    Imagem da caixa de alerta

    Em JavaScript podemos usar comentrios com uma nica linha e comentrios com vrias linhas. Os comentrios com uma nica linha comeam com os caracteres //. Um comentrio que se estende por vrias linhas comea com a sequencia de caracteres /* e continua at ser encontrada a sequencia de caracteres */.

    O JavaScript uma linguagem de programao orientada a objeto interpretada pelo browser.


    O browser disponibiliza os objetos da pgina. Estes objetos so acessados pelo JavaScript.

    Paralelo com os objetos do mundo real


    Exemplo: Pessoa As pessoas tem uma srie de atributos que chamados de propriedades. Quais so os atributos de uma pessoa?
    Altura, peso, profisso

    As pessoas podem agir ou tomar algumas aes que no JavaScript so chamadas de mtodos ou funes.
    Algumas aes do objeto pessoa:
    andar(), dormir(), trabalhar ()

    Para acessar tanto as propriedades quanto os mtodos o JavaScript ns temos uma sintaxe prpria.

    Por exemplo se quisssemos acessar a altura de uma pessoa, como seria a sintaxe?

    Pessoa.altura;
    Pessoa.andar();

    Na linguagem JavaScript ns temos 3 categorias de objetos: Objetos Interno (string, date, number)
    Objetos do Browser (window, document) Objetos Personalizados (construdos pelo programador. Ex. objeto Pessoa.

    JavaScript organiza todos os elementos de uma pgina dentro de uma hierarquia. Cada elemento visto como um objeto.
    Os objetos podem ter propriedades, mtodos e responder a certos eventos.

    No exemplo anterior, ns temos, um link, duas

    imagens, e um formulrio com dois campos texto e dois botes.


    Do ponto de vista do JavaScript a janela do

    browser um objeto window, que contm certos elementos, como a barra de status.
    Dentro da janela, ns podemos carregar uma pgina HTML. Esta pgina um objeto document. Todos os objetos HTML so propriedades do

    objeto document.

    Podemos obter informaes de diversos objetos e ento manipul-los.


    Para isso ns devemos saber como acessar os diferentes objetos. Primeiro verifica-se o nome do objeto no diagrama de hierarquia. Por exemplo a primeira imagem. O primeiro objeto chamado document, a primeira imagem representada por Imagem[0].

    document.Imagem[0].

    Caso queira saber o que o usurio digitou dentro do primeiro elemento do formulrio, voc primeiro precisa pensar em como acessar esse objeto.
    Novamente ns seguiremos o diagrama de hierarquia, de cima para baixo. Siga o caminho que leva at Elem[0].

    Todos os nomes de objeto por onde voc passou


    tem que constar na referncia ao primeiro elemento do formulrio. Desta forma voc pode acessar o primeiro elemento texto assim:

    document.Form[0].Elem[0]

    O mtodo alert fornecido pelo browser, ligado a window. Desta forma ns podemos fazer a seguinte chamada do mtodo alert: window.alert (Ol mundo!!);
    desta forma que se acessa uma funo ou propriedades.

    Imagine que voc queira acessar a largura interna da nossa janela. Podemos criar uma varivel e associ-la com a propriedade innerWidth. Dentro do seu script coloque var largura = window.innerWidth; window.alert(largura);

    Acessando o objeto document que est dentro do window. Podemos acessar o atributo ou propriedade title da seguinte forma: window.alert (window.document.title);
    O acesso sempre do mais genrico para o mais especfico.

    Com os eventos possvel trazer interatividades as pginas. Dentro de cada elemento xhtml ns temos alguns atributos capazes de manipular estes eventos.
    Um dos atributos utilizado para manipular uma imagem seria o onclick (click o evento. On quando for clicado)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"

    xml : lang="en">

    <head> <meta http-equiv="Content-Type" content="text/html;

    charset=8859-1" />

    <title> Aula de JavaScript</title> <style type="text/css"> body {background-color: black;}

    #lamp {display:block; margin: 20px auto;}


    </style> </head>

    </head> <body> <img id="lamp src="lampada.jpg" />


    </body> </html>

    </head> <body> <img id="lamp" onclick =

    "window.alert('Voce clicou na imagem!');" src="lampada.jpg" />


    </body> </html>

    </head> <body> <img id="lamp" onmouseover =

    "window.alert('Voce passou o mouse sobre a imagem!');" src="lampada.jpg" />


    </body> </html>

    Eventos disparados sem a interveno do usurio. Onload (quando carregarmos o corpo do documento faa) <body onload=alert(carregado);>

    Vamos criar uma funo JavaScript que liga uma lmpada quando clicarmos sobre ela. Uma funo um bloco construdo dentro da tag script que chamar uma ao quando um elemento do xhtml receber alguma ao prdefinida do usurio ou no.
    importante notarmos que um evento deve estar ligado a um elemento.

    Ns temos dentro do elemento document uma srie de funes que nos auxiliam a manipular os elementos ligados ao documento.
    Por exemplo o getElementbyId() que recupera um elemento com o id especificado.

    <script type="text/javascript"> function ligar() { document.getElementById("lamp").src= "lampadaacesa.jpg"; } </script> </head>

    <body>
    <img id="lamp" onclick = "ligar();"

    src="lampadaapagada.jpg"; />
    </body> </html>

    Potrebbero piacerti anche