Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Javascript AULA 01

    Enviado por

    Gustavo Frota
    116 visualizações28 páginas
    O documento apresenta uma aula introdutória sobre JavaScript, abordando seus objetivos, como funciona, onde inserir códigos e como realizar saídas. Exemplos práticos demonstram como alterar conteúdos, estilos e elementos HTML, além de explicar declarações, funções e a inserção de códigos externos.

    Descrição original:

    Aula de Introdução ao Javascript.

    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
    O documento apresenta uma aula introdutória sobre JavaScript, abordando seus objetivos, como funciona, onde inserir códigos e como realizar saídas. Exemplos práticos demonstram como alterar conteúdos, estilos e elementos HTML, além de explicar declarações, funções e a inserção de códigos externos.

    Direitos autorais:

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

    Javascript AULA 01

    Enviado por

    Gustavo Frota
    O documento apresenta uma aula introdutória sobre JavaScript, abordando seus objetivos, como funciona, onde inserir códigos e como realizar saídas. Exemplos práticos demonstram como alterar conteúdos, estilos e elementos HTML, além de explicar declarações, funções e a inserção de códigos externos.

    Direitos autorais:

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

    Javascript

    Aula 01
    PROF. GUSTAVO LINHARES
    OBJETIVOS

     Familiarizar com a linguagem com exemplos práticos;


     Entender como e onde utilizar o javascript em páginas web;
     Aprender quais são as saídas/impressão do Javascript;
     Compreender como declara um código Javascript.
    Aprenda por exemplos

     Os exemplos são melhores do que 1000 palavras. Os exemplos são


    geralmente mais fáceis de entender do que as explicações de
    texto.

     Este tutorial complementa todas as explicações com


    esclarecimentos sobre "Experimente você mesmo".
     Se você tentar todos os exemplos, você aprenderá muito sobre o
    JavaScript, em um curto espaço de tempo!
    Você sabia?

     JavaScript e Java são linguagens completamente diferentes, tanto


    no conceito como no design.
    Exemplo:

     O JavaScript foi inventado por Brendan Eich em 1995 e tornou-se


    um padrão ECMA em 1997.
    JavaScript pode alterar o
    conteúdo HTML
     Um dos muitos métodos JavaScript HTML é getElementById () .
     Este exemplo usa o método para "encontrar" um elemento HTML
    (com id = "demo") e muda o conteúdo do elemento ( innerHTML )
    para "Olá JavaScript":

    Exemplo:
    document.getElementById("demo").innerHTML = "Hello JavaScript";
    JavaScript pode alterar os atributos
    HTML
     Este exemplo altera uma imagem HTML alterando o atributo src
    (source) de uma marca <img>:
    Exemplo:

     https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbul
    b
    JavaScript pode mudar estilos
    HTML (CSS)
     Alterar o estilo de um elemento HTML é uma variante de alteração
    de um atributo HTML:
    Exemplo:

     https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_style
    JavaScript pode ocultar elementos
    HTML
     Ocultar elementos HTML pode ser feito alterando o estilo de
    exibição:
    Exemplo:

     https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_hide
    JavaScript pode mostrar elementos
    HTML
     Mostrar elementos HTML ocultos também pode ser feito alterando o
    estilo de exibição:
    Exemplo:
     https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_show
    Javascript deve ser inserido entre:

     Em HTML, o código JavaScript deve ser inserido entre as tags


    <script> e </ script>.
     Exemplo:

    <script>
    document.getElementById("demo").innerHTML = "My First JavaScript";
    </script>
    Funções e eventos do JavaScript

     Uma função JavaScript é um bloco de código JavaScript, que


    pode ser executado quando "chamado" para.
     Por exemplo, uma função pode ser chamada quando ocorre um
    evento , como quando o usuário clica em um botão.
    JavaScript em <head> ou <body>?

     Você pode colocar qualquer número de scripts em um documento


    HTML.
     Scripts podem ser colocados no <body>, ou na seção <head> de
    uma página HTML, ou em ambos.
    JavaScript em <head>

     Neste exemplo, uma função JavaScript é colocada na seção


    <head> de uma página HTML.
     A função é invocada (chamada) quando um botão é clicado:
    Exemplo:
    https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_head
    JavaScript em <body>

     Neste exemplo, uma função JavaScript é colocada na seção


    <body> de uma página HTML.

     A função é invocada (chamada) quando um botão é clicado:


    OBS.: A colocação de scripts na parte inferior do elemento <body>
    melhora a velocidade da exibição, pois a compilação do script
    diminui a exibição.
    Exemplo:
    https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_body
    JavaScript externo

     Scripts também podem ser colocados em arquivos externos:


    Arquivo externo: myScript.js
    function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph
    changed.";
    }
     Os scripts externos são práticos quando o mesmo código é usado
    em muitas páginas da web diferentes.
     Os arquivos de JavaScript possuem a extensão de arquivo .js .
    JavaScript externo

     Para usar um script externo, coloque o nome do arquivo de script


    no atributo src (source) de uma marca <script>:
     Exemplo:
    https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_ext
    ernal
     Você pode colocar uma referência de script externa em <head>
    ou <body> como quiser.

     O script funcionará como se estivesse localizado exatamente onde


    a marca <script> está localizada.

     Os scripts externos não podem conter tags <script>.


    Vantagens de JavaScript Externo

     A colocação de scripts em arquivos externos possui algumas


    vantagens:
     Separa HTML e código
     Isso torna o HTML e o JavaScript mais fáceis de ler e manter
     Arquivos de JavaScript em cache podem acelerar cargas de
    página
     Para adicionar vários arquivos de script a uma página - use várias
    tags de script:
    <script src="myScript1.js"></script>
    <script src="myScript2.js"></script>
    Referências externas

     Os scripts externos podem ser referenciados com um URL completo


    ou com um caminho relativo à página da web atual.

     Este exemplo usa um URL completo para vincular a um script:

    Exemplo:
    https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_url
    Referências externas

     Este exemplo usa um script localizado em uma pasta especificada


    no site atual:
    Exemplo:
    https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_url_rel
    ative

     Este exemplo liga para um script localizado na mesma pasta que a


    página atual:
    Exemplo:
    https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_extern
    al
    Saída de JavaScript

    Possibilidades de exibição de JavaScript


    O JavaScript pode "exibir" dados de diferentes maneiras:

     Escrevendo em um elemento HTML, usando innerHTML .


     Escrevendo na saída HTML usando document.write () .
     Escrevendo em uma caixa de alerta, usando window.alert () .
    Usando innerHTML

     Para acessar um elemento HTML, o JavaScript pode usar o método


    document.getElementById (id) .

     O atributo id define o elemento HTML. A propriedade innerHTML


    define o conteúdo HTML:
    Exemplo:
    https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_dom
    Usando document.write ()

     Para fins de teste, é conveniente usar document.write () :


     Usando document.write () depois de um documento HTML estar
    totalmente carregado, irá excluir todos os HTML existentes :
    Exemplo:

    https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_write
    Usando window.alert ()

     Você pode usar uma caixa de alerta para exibir dados:


    Exemplo:
    https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_alert
    Programas de JavaScript

     Um programa de computador é uma lista de "instruções" a serem


    "executadas" por um computador.

     Em uma linguagem de programação, essas instruções de


    programação são chamadas de declarações .

     Um programa de JavaScript é uma lista de declarações de


    programação.
    Declarações de JavaScript

     Declarações de JavaScript são compostas por:

     Valores, Operadores, Expressões, Palavras-chave e Comentários.

     Esta declaração diz ao navegador que escreva "Hello Dolly". dentro


    de um elemento HTML com id = "demo":
    Exemplo:
    https://www.w3schools.com/js/tryit.asp?filename=tryjs_statement
    Declarações de JavaScript

     Exemplo:
    https://www.w3schools.com/js/tryit.asp?filename=tryjs_statements
    Ponto-e-vírgula;

     Ponto e vírgula separam instruções de JavaScript.


     Adicione um ponto e vírgula no final de cada declaração
    executável:
    var a, b, c; // Declare 3 variables
    a = 5; // Assign the value 5 to a
    b = 6; // Assign the value 6 to b
    c = a + b; // Assign the sum of a and b to c
    Quando separados por ponto e vírgula, várias declarações em uma
    linha são permitidas:
    a = 5; b = 6; c = a + b;
    Espaço branco do JavaScript

     O JavaScript ignora vários espaços. Você pode adicionar espaço


    em branco ao seu script para torná-lo mais legível.

     As seguintes linhas são equivalentes:


    var person = "Hege";
    var person="Hege";
    Uma boa prática é colocar espaços em torno de operadores (= + - *
    /):
    var x = y + z;

    Você também pode gostar