Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Javascript - Tutorial

    Enviado por

    Marcelo Siqueira
    5 visualizações17 páginas

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    5 visualizações17 páginas

    Javascript - Tutorial

    Enviado por

    Marcelo Siqueira

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 17

    Javascript - Tutorial

    Tutorial Rápido de Javascript


    Javascript - Introdução

    ● JavaScript é a linguagem de programação do HTML e da Web.


    ● JavaScript é fácil de aprender.
    ● Este tutorial ensinará JavaScript do básico ao avançado.
    Por que aprender JavaScript?

    JavaScript é uma das três linguagens que todos os desenvolvedores da Web precisam
    aprender:

    1. HTML para definir o conteúdo de páginas da web;


    2. CSS para especificar o layout das páginas da web;
    3. JavaScript para programar o comportamento de páginas da web.
    Momento do Código
    Exemplo para apresentar a data e a hora atuais no
    Browser
    <!DOCTYPE html>
    <html>
    <body>

    <h2>My First JavaScript</h2>

    <button type="button"
    onclick="document.getElementById('demo').innerHTML = Date()">
    Clique para apresentar a data e a hora.</button>

    <p id="demo"></p>

    </body>
    </html>
    Resultado
    JavaScript pode alterar o conteúdo HTML
    Este exemplo usa o método "find" para encontrar um elemento HTML (com id = "demo") e altera
    o conteúdo do elemento (innerHTML) para "Hello JavaScript":

    <!DOCTYPE html >


    <html>
    <body>

    <h2>O que o JavaScript pode fazer? </h2>

    <p id="demo">JavaScript pode mudar o conteúdo do HTML. </p>

    <button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello


    JavaScript!'" >Clique Aqui! </button>

    </body>
    </html>
    Resultado
    Outro exemplo
    <body>
    <h2>O que o Javascript pode fazer?</h2>
    <p>JavaScript pode mudar um valor de um atributo em HTML.</p>
    <p>Neste caso o JavaScript alterar o valor do atributo src (source) de uma imagem.</p>
    <button onclick="document.getElementById('myImage').src='imagem/pic_bulbon.gif'">
    Acenda a lâmpada
    </button>
    <img id="myImage" src="imagem/pic_bulboff.gif" style="width:100px">
    <button onclick="document.getElementById('myImage').src='imagem/pic_bulboff.gif'">
    Apague a lâmpada
    </button>
    </body>
    Luz apagada
    Luz Acesa
    JavaScript pode mudar seu CSS

    Alterando o estilo de um elemento HTML:

    <body>
    <h2>O que o JavaScript pode fazer?</h2>
    <p id="demo">JavaScript pode alterar o estilo de um elemento HTML.</p>
    <button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
    Clique Aqui!
    </button>
    </body>
    Resultado
    JavaScript pode ocultar elementos HTML

    <body>
    <h2>O que o JavaScript pode fazer ?</h2>
    <p id="demo">JavaScript pode ocultar elementos HTML.</p>
    <button type="button" onclick="document.getElementById('demo').style.display='none'">
    Clique aqui!
    </button>
    </body>
    Resultado
    JavaScript pode exibir elementos HTML

    <body>
    <h2>O que o JavaScript pode fazer?</h2>
    <p>JavaScript pode mostrar elementos HTML ocultos.</p>
    <p id="demo" style="display:none">E não é que apareci...!</p>
    <button type="button" onclick="document.getElementById('demo').style.display='block'">
    Clique aqui!
    </button>
    </body>
    Resultado
    Fim

    Obrigado,

    Maromo e Rodrigo

    Você também pode gostar