Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Aula 11 - Introdução JS (DDM)

    Enviado por

    ferexx8
    11 visualizações10 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
    11 visualizações10 páginas

    Aula 11 - Introdução JS (DDM)

    Enviado por

    ferexx8

    Direitos autorais:

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

    Desenvolvimento para

    Dispositivos Móveis
    (DDM)
    Aula 11
    JavaScript (JS)
    Prof. Wesley Pecoraro
    wesley.pecoraro@gmail.com 1
    Ementa do Curso
    • Introdução • JavaScript
    – Motivação e Objetivos, Histórico da – Características da linguagem
    Internet e das Linguagens para – Funções, Eventos
    WEB/MOBILE, Comparação entre – Windows
    linguagens.
    – Validação de dados
    • HTML (HyperText Markup Language)
    – JQuery
    – Estrutura da linguagem
    • XML (Extensible Markup Language)
    – Principais TAG’s, Formulários
    – Botões, Caixa de Texto
    – Caixa de Seleção, Botão de opção
    – Hiperlinks
    • Criação de Páginas estáticas
    – Cabeçalho, Menu
    – Navegação entre páginas
    • CSS
    – Estruturação de código
    – Criação de folhas de estilo
    – Aplicação de folhas de estilo
    2
    Ementa do Curso
    • Introdução • JavaScript
    – Motivação e Objetivos, Histórico da – Características da linguagem
    Internet e das Linguagens para – Funções, Eventos
    WEB/MOBILE, Comparação entre – Windows
    linguagens.
    – Validação de dados
    • HTML (HyperText Markup Language)
    – JQuery
    – Estrutura da linguagem
    • XML (Extensible Markup Language)
    – Principais TAG’s, Formulários
    – Botões, Caixa de Texto
    – Caixa de Seleção, Botão de opção
    – Hiperlinks
    • Criação de Páginas estáticas
    – Cabeçalho, Menu
    – Navegação entre páginas
    • CSS
    – Estruturação de código
    – Criação de folhas de estilo
    – Aplicação de folhas de estilo
    3
    DOM

    • O método document.getElementById(id)
    pode ser usado para acessar um elemento HTML a
    partir do JavaScript.
    <!DOCTYPE html>
    <html>
    <body>
    <h1>Minha primeira página WEB</h1>
    <p id="demo">meu primeiro parágrafo</p>

    <script>
    var texto = document.getElementById("demo").innerHTML =“ECP e GTI";
    console.log("pegando " + texto);
    </script>
    </body>
    </html>
    DOM
    • Encontrando elementos:
    <body>
    <p>Lista</p>
    <ul>
    <li>bebida</li>
    <li>comida</li>
    </ul>
    <p>O innerHTML contem 2 elementos</p>
    <p id="demo"></p>

    <script>
    var x = document.getElementsByTagName("li");
    document.getElementById("demo").innerHTML = x[1].innerHTML;
    console.log("pegando " + x[1].innerHTML);
    </script>
    <body>
    DOM

    • Encontrando elementos:

    <body>
    <div class="exemplo1">Elemento 1</div>
    <div class="exemplo2">Elemento 2</div>
    </body>

    <script>
    var elemento = document.getElementsByClassName(“exemplo1");
    elemento[0].innerHTML = “testando classe”;
    console.log(“JS” + elemento[0].innerHTML);
    </script>
    DOM

    • Encontrando elementos:

    <body>
    Azul: <input name="cor" type="checkbox" value="azul">
    Vermelho: <input name="cor" type="checkbox“ value="vermelho">
    <p>Numero de elementos cor é:</p>
    <p id="seletor"></p>
    </body>

    <script>
    var num = document.getElementsByName("cor").length;
    document.getElementById("seletor").innerHTML = num;
    console.log("JS numero = " + num);
    </script>
    DOM

    • Há também propriedades e métodos que permitem alterar os


    elementos HTML de uma página web.

    Método Descrição

    element.innerHTML= Altera o conteúdo de um elemento.

    Altera o valor de um atributo de um


    element.attribute=
    elemento.
    Altera o valor de um atributo de um
    element.setAttribute(attribute,value)
    elemento.
    Altera uma propriedade do estilo de um
    element.style.property=
    elemento.
    DOM

    • Alterando elementos:
    <!DOCTYPE html>
    <html>
    <body>
    <h1 id=“cabecalho">cabeçalho antigo</h1>
    <img id="imagem" src=“imagens/escudo1.png">
    <script>
    var element=document.getElementById(“cabecalho");
    element.innerHTML=“novo cabeçalho";
    document.getElementById("imagem").src=“imagens/escudo2.png";
    </script>
    </body>
    </html>
    DOM

    • Alterando elementos:
    <!DOCTYPE html>
    <html>
    <body>
    <p id="p2">Olá pessoal!p>

    <script>
    document.getElementById("p2").style.color="blue";
    </script>

    <p> O parágrafo acima foi alterado por JavaScript.</p>


    </body>
    </html>

    Você também pode gostar