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


    [Tutorial] Javascript #4 - Criando uma Calculadora

    Compartilhe
    avatar
    cranem258
    Moderador Global
    Moderador Global

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

    [Tutorial] Javascript #4 - Criando uma Calculadora

    Mensagem por cranem258 em Sex Jul 27, 2012 12:13 pm


    Bem vindos ao quarto tutorial para Javascript por mim! :3
    Na aula passada aprendemos sobre funções e dois códigos básicos necessários para a criação de um script simples que "escreva" algo em certo lugar na página, se não lembra, eu recomendo que volte e revise a aula, pois essa será um pouco mais complexa e mostrarei um script funcional e completo para vocês.

    4.0 - Criando uma Calculadora

    Vamos começar do começo, como faremos uma calculadora, vamos precisar de certos ingredientes, mas vamos falar do processo primeiro, é assim que um script funciona, comece pensando no que ele fará antes de pensar o que escrever, vamos ver... Queremos uma calculadora que capture um número, então grave ele e some com outro número, uma bem básica, vamos ter então dois números somados, subtraidos, multiplicados ou divididos. Vai ser limitada a dois números mas é suficiente por agora.


    4.1 - Ai Que Difícil Fessôr!

    Haha! Sim! É muito difícil mesmo, demorei um tempo mas fiz uma calculadora de soma que calcula dois números inteiros menores que 10 e maiores que 0!
    OMG!! Poisé, funções são bem limitadas, mas vamos ver como o monstro ficou...
    Spoiler:
    AI CRENDEUSPAITODOPODEROSO! Qué isso? Só pra calcular 2 números inteiros maiores que 0 e menores que 10 e somá-los?
    Cranem: Sim... O_O

    Bem, esse é o problema das funções, elas são grandes, chatas, complicadas e bugadas. Mas na internet você acha uma grande lista das operações em javascript, como AQUI, então você pode achar outras formas de fazer seu programa sem usar funções, ou então até procurar por scripts já feitos, e então modifica-los, fracioná-los e testá-los até que façam o que você quer.
    Eu achei um script de autor desconhecido aqui: http://www.javascriptkit.com/script/cut18.shtml que fez uma calculadora com poucas linhas de código, e que calcula até 16 dígitos com tela! Viu como às vezes precisamos consultar a nossa amiga internet? Agora vamos ver como ele fez e aprender um pouco mais:
    Spoiler:
    UAU! Bem menos! E bem melhor!

    4.2 - Análise!!!

    Sim, e é só analisar o código pra perceber que é muito simples! Tem alguns ali que não sabemos, como Calc.Input.value += '1', esse código pega o elemento que tem o nome(NAME) de "Calc" (nesse caso é a FORM), e captura o elemento que tem o nome "Input" dentro de "Calc" (nesse caso é o primeiro INPUT), e nisso pega o "Value" (valor) dele e modifica adicionando a string '1' ( veja que 1 está entre aspas, então é uma string("texto"), ou seja, se você clicar 1 de novo, não vira 2, mas sim 11. então '1'+'1' = '11' Que loucura em! x3 ).
    No fim das contas, quando você clicar "=", ele roda "eval(Calc.Input.value)", o código "eval()" calcula qualquer valor ou string que esteja dentro de um input ou guardado em variáveis, no caso montamos "12+24" e clicamos "=", então o código eval() vai pegar isso e converter 12 em variável, 24 em variável, e + em operador e calcular, isso tudo é feito automaticamente, a menos que tivesse letras ali, mas como só temos números a pressionar, não nos preocupamos com esse tipo de bug!

    É isso pessoal, estudem os dois scripts e até a próxima aula!
    ~nyan



    _________________________________________________
    ~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
    Alucard_2
    Administrador
    Administrador

    Masculino Mensagens : 820
    Experiência : 3813
    Reputação : 57
    - : Melhor Tutorial - Oscar 2010

    Re: [Tutorial] Javascript #4 - Criando uma Calculadora

    Mensagem por Alucard_2 em Sab Jul 28, 2012 12:41 am

    Heh, não sei por que, na minha cabeça javascript sempre continha códigos curtos de 1 linha (no caso, sem clicar "Enter"), mas até que dá para fazer uns códigos grandões nele, certo? =D
    Essa da calculadora ficou boa, parabéns ;D
    Seria interessante na minha opinião colocar uma screen de como ficaria supostamente o resultado, pois ao meu ver calculadoras e etc... são coisas boas que ficam melhor de se mostrar o resultado, assim quem vai executar pode ver o processo final e acompanhar o seu processo ainda inacabado. ;)


    _________________________________________________
    O que estou fazendo agora:
    Avaliando Concursos
    Vamos ajudar a nova RMB a crescer!

    avatar
    cranem258
    Moderador Global
    Moderador Global

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

    Re: [Tutorial] Javascript #4 - Criando uma Calculadora

    Mensagem por cranem258 em Sab Jul 28, 2012 11:39 am

    O link para a própria calculadora está no post, não entendi a da screen, já que o usuário pode acessar e mexer nela... =\

    Até,
    ~nyan


    _________________________________________________
    ~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.

    Conteúdo patrocinado

    Re: [Tutorial] Javascript #4 - Criando uma Calculadora

    Mensagem por Conteúdo patrocinado


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