RMB - Vivenciando as mudanças da vida. Vá agora para a nova RMB! rpgmakerbrasil.net!


    [Tutorial] Javascript #3 - Funções

    Compartilhe
    avatar
    cranem258
    Moderador Global
    Moderador Global

    Masculino Mensagens : 245
    Experiência : 3252
    Reputação : 37
    - : Nada :) - : nada :)

    [Tutorial] Javascript #3 - Funções

    Mensagem por cranem258 em Sex Jul 20, 2012 8:13 pm


    Sem necessidade de pedir desculpas pelo grande tempo sem fazer o tutorial, prometo que algum dia termino ele totalmente, se você não leu os outros anteriores, leia, eles são cruciais para o pleno entendimento de nossa aula atual. Agora, vamos ao tutorial...

    3.0 - Funções

    As funções são as partes mais importantes, talvez realmente as mais úteis em programas de Javascript, qual a "Função" das Funções? (hehe) Simples. Elas são localizações de frações de scripts que devem ser rodados à parte, ou de forma organizada, dependendo de certas condições, como por exemplo, apertar um botão ou clicar em um link da página onde você se encontra, e se você perguntar, sim, ele pode e deve ser usado para criar "calculadoras" na página da web, vamos ver isso mais adiante, visto que as "calculadoras" podem ser feitas de muitas variadas formas, dependendo do sua vontade ou do motivo se sua existência.




    3.1 - Partes de uma Função

    Mas, como vamos fazer uma função aparecer no programa? Com um simples código: "function nome_da_funcao() { executável }"
    Vamos analisar! Código function para abrir o sistema da função, depois o nome da mesma, seguido de parênteses "()" (vamos saber para que servem depois), e após isso chaves fechando a própria função em si "{ executável }", no caso, no lugar de "executável", você colocará seu código em javascript.

    Não é tão complexo assim né? Então vamos fazer um simples sistema, usando um botão de html para chamar o script parecido com o da aula anterior, que somará duas variáveis de valor 2 para formar 4, e jogará este valor na página, para isso, precisamos de um elemento de suporte, ele pode ser um "div", uma "table", ou até o mais simples, o "span".

    Analise o seguinte código, usando o que aprendemos na aula 2 e agora:
    Spoiler:

    Como vemos, usando o código getElementById podemos encontrar um elemento específico na página e trabalhar com ele, no caso, o código innerHTML servirá para sobrescrever internamente qualquer coisa dentro do span que terá o id "resultado" que será pego e sobrescrito pelo código quando o "button"(botão) for pressionado, como diz o código HTML "onclick" que resultará na execução da função "soma()", logo acima.


    3.2 - Códigos Essenciais Novos

    Podemos ver 3 coisas novas aqui, o código "getElementById" e o código "innerHTML" que são 100% importantes para o funcionamento do script, porquê? Primeiro, se não for usado o código getElementById, o script não reconhece o "span" que tem o id necessário que é imposto pelo HTML, no caso este é "resultado", já se não for usado o código "innerHTML", se for usado no lugar por exemplo, o código "write" (estudado na última aula), o script tentará sobrescrever toda a página com o valor de saída da execução (o "innerHTML" só sobrescreve o elemento com o id que o "getElementById" pegou antes).

    Acesse este Link para ver o script em ação ou baixe o exemplo.

    Anexos
    exemplo3.zip
    Você não tem permissão para fazer download dos arquivos anexados.
    (1 Kb) Baixado 0 vez(es)


    Última edição por cranem258 em Sex Jul 27, 2012 12:19 pm, editado 1 vez(es)


    _________________________________________________
    ~nyan

    "Distance makes the heart grow cold, and time weathers down all promises." - yuumei @ deviantart 


     
    [abre uma nova guia!]

    CopyRight:
    Todos os direitos das imagens utilizadas em meu avatar e userbars particulares são de
    JayNaylor®.
    Elas são disponibilizadas nas Comics em seu website.
    No entanto, em seu site, conteúdo pago inapropriado para menores talvez seja visualizado sem aviso.
    avatar
    Baranon
    Membro
    Membro

    Masculino Mensagens : 133
    Experiência : 2334
    Reputação : 43
    - : Nada :) - : nada :)

    Re: [Tutorial] Javascript #3 - Funções

    Mensagem por Baranon em Sex Jul 20, 2012 10:27 pm

    Parabéns pelo tuto Cranem, não li com muita paciência, mas tá bem explicado. +rep
    avatar
    Naxus
    Moderador
    Moderador

    Masculino Mensagens : 500
    Experiência : 3389
    Reputação : 68

    Re: [Tutorial] Javascript #3 - Funções

    Mensagem por Naxus em Sab Jul 21, 2012 12:14 am

    Grande cranem !
    Seus tutoriais de java script são todos ótimos, quando eu leio suas aulas vejo que não é um bicho de sete cabeças como eu imaginava, continue com o seu trabalho!
    Mais uma vez parabéns e até mais.
    +Rep

    Conteúdo patrocinado

    Re: [Tutorial] Javascript #3 - Funções

    Mensagem por Conteúdo patrocinado


      Data/hora atual: Dom Fev 25, 2018 9:02 am