Como Transformar Script numa Função

[webcoders.pt]

Saudações a todos.

Iniciei recentemente a estudar de modo autodidata a linguagem javascript, logo peço já desculpas por um questão tão simples, mas como faço para transformar este script abaixo, que está na página http://webcoders.pt/w3estudos.php numa função no ficheiro externo.

A tabela.

<TABLE>
        <TBODY>
            <TR><TH>Debian</TH></TR>
            <TR><TD ID="Deb" align="center">0</TD></TR>
            <TR><TD><BUTTON TYPE="button" onclick='Debian()'>Sufragar Debian</BUTTON></TD></TR>
        </TBODY>
    </TABLE>

O script

        <SCRIPT>
        <!--
        var VotaDebian = (function(){
                var ContaDebian = 0;
                return function(){return ContaDebian += 1;}
            })();
        function Debian(){
            document.getElementById('Deb').innerHTML=VotaDebian();
        }

</SCRIPT>

[M6]

Não sei se percebi bem a tua questão. queres colocar o script num ficheiro externo e inclui-lo no html?

[webcoders.pt]

6 hours ago, M6 said:

Não sei se percebi bem a tua questão. queres colocar o script num ficheiro externo e inclui-lo no html?

Sim, isto mesmo!

Já tentei passar disto...

<SCRIPT>
 
        var VotaDebian = (function(){
                var ContaDebian = 0;
                return function(){return ContaDebian += 1;}
            })();
        function Debian(){
            document.getElementById('Deb').innerHTML=VotaDebian();
        }

</SCRIPT>

...para isto:

function ContaDebian(){

         var VotaDebian = (function(){
                var ContaDebian = 0;
                return function(){return ContaDebian += 1;}
            })();  

}

function Debian(){ document.getElementById('Deb').innerHTML=ContaDebian(); }

Mas qdo chamava a função Debian() o script não funcionava.

Também tentei isto:

function ContaDebian(){

         var VotaDebian = (function(){
                var ContaDebian = 0;
                return function(){return ContaDebian += 1;}
            })();  

function Debian(){ document.getElementById('Deb').innerHTML=VotaDebian(); }

}

Mas também nada.

Pode ajudar-me, sff?

Cptos

Edited May 16, 2017 at 09:37 PM by webcoders.pt

[jacreis]

1º coloca o JS num ficheiro. Vamos chamar de "app.js"
2º no html utiliza o tag script para importar o ficheiro
<script src="app.js"></script>

 

+info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

[webcoders.pt]

10 minutes ago, jacreis said:

1º coloca o JS num ficheiro. Vamos chamar de "app.js"
2º no html utiliza o tag script para importar o ficheiro
<script src="app.js"></script>

 

+info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Acabei de pôr no ficheiro externo.js o seguinte:

function ContaDebian(){
    var VotaDebian = (function(){
                var ContaDebian = 0;
                return function(){return ContaDebian += 1;}
            })();
}
function Debian(){
            document.getElementById('Deb').innerHTML=ContaDebian();
        }

e no ficheiro html o seguinte:

<SCRIPT>
        Debian();
</SCRIPT>

O resultado foi que apareceu lá o seguinte: undefined

Sabe o porquê?

[jacreis]

Fácil o ContaDebian() não retorna nada, por isso o undefined.

Pensa no seguinte:
- Pq é que tens uma função( VotaDebian ) dentro de outra função ( ContaDebian )?
- O que é que estas a contar?

 E deverias aprender a programar de forma + organizada. É especialmente importante no caso do JS, uma vez que podes facilmente ficar com uma amalgama. Há diferentes convenções

vê: 

- https://google.github.io/styleguide/javascriptguide.xml
- https://github.com/airbnb/javascript

[webcoders.pt]

12 horas atrás, jacreis disse:

Fácil o ContaDebian() não retorna nada, por isso o undefined. - @jacreis, Disto eu já sabia. O que quero descobrir é como faço para passar isto...

<SCRIPT>
 
        var VotaDebian = (function(){
                var ContaDebian = 0;
                return function(){return ContaDebian += 1;}
            })();
        function Debian(){
            document.getElementById('Deb').innerHTML=VotaDebian();
        }

</SCRIPT>

...para um ficheiro externo??? Do jeito como está, dentro do ficheiro html, o script funciona como quero, mas não o quero dentro do mesmo ficheiro. Quero-o dentro de um ficheiro .js externo.

 

Pensa no seguinte:
- Pq é que tens uma função( VotaDebian ) dentro de outra função ( ContaDebian )? É uma questão de tentativa e erro. Nunca percorreste esta via?
- O que é que estas a contar? - Os cliques.

 

 E deverias aprender a programar de forma + organizada. É especialmente importante no caso do JS, uma vez que podes facilmente ficar com uma amalgama. Há diferentes convenções - Isto vem com o tempo. Sê mais paciente com os iniciantes e se não tiveres paciência para com os tais, é melhor ajudares apenas os avançados 😉

Mto obg pela crítica e cptos.

 

 

 

 

 

 

 

[jacreis]

As perguntas que te fiz eram de retórica. E tinham o intuito de ires olhar, com olhos de ver, para o teu código. Estão lá as repostas.

Citação

- Pq é que tens uma função( VotaDebian ) dentro de outra função ( ContaDebian )? É uma questão de tentativa e erro. Nunca percorreste esta via?

Claro, "you got to learn to crawl before you learn to walk". Mas tb deves aprender a reflectir no que fazes... isto deve contar com 80% do trabalho do programador.

Citação

E deverias aprender a programar de forma + organizada. É especialmente importante no caso do JS, uma vez que podes facilmente ficar com uma amalgama. Há diferentes convenções - Isto vem com o tempo. Sê mais paciente com os iniciantes e se não tiveres paciência para com os tais, é melhor ajudares apenas os avançados

Aprenderes cedo a fazer as coisas bem vai poupar muitos dissabores, especialmente qd começares a fazer o debug. Podes pensar que não, mas estou a tentar ajudar-te.

E por falar em debug, já conheces a developers tool? se n conheces deverias (chrome : view > developers tool ) ela dá muita informação do que estás a fazer mal.

PS: só para que saibas tenho o ficheiro js feito desde ontem e tem apenas 4 linhas e 1 função... agora vou ter uma reunião, da parte da tarde se ainda tiveres duvidas, diz que eu mando-te a solução para o teu problema.

[jacreis]

As perguntas que te fiz eram de retórica. E tinham o intuito de ires olhar, com olhos de ver, para o teu código. Estão lá as repostas.

Citação

- Pq é que tens uma função( VotaDebian ) dentro de outra função ( ContaDebian )? É uma questão de tentativa e erro. Nunca percorreste esta via?

Claro, "you got to learn to crawl before you learn to walk". Mas tb deves aprender a reflectir no que fazes... isto deve contar com 80% do trabalho do programador.

Citação

E deverias aprender a programar de forma + organizada. É especialmente importante no caso do JS, uma vez que podes facilmente ficar com uma amalgama. Há diferentes convenções - Isto vem com o tempo. Sê mais paciente com os iniciantes e se não tiveres paciência para com os tais, é melhor ajudares apenas os avançados

Aprenderes cedo a fazer as coisas bem vai poupar muitos dissabores, especialmente qd começares a fazer o debug. Podes pensar que não, mas estou a tentar ajudar-te.

E por falar em debug, já conheces a developers tool? se n conheces deverias (chrome : view > developers tool ) ela dá muita informação do que estás a fazer mal.

PS: só para que saibas tenho o ficheiro js feito desde ontem e tem apenas 4 linhas e 1 função... agora vou ter uma reunião, da parte da tarde se ainda tiveres duvidas, diz que eu mando-te a solução para o teu problema.

[webcoders.pt]

51 minutos atrás, jacreis disse:

E por falar em debug, já conheces a developers tool? se n conheces deverias (chrome : view > developers tool ) ela dá muita informação do que estás a fazer mal.

Vou ver se consigo instalar o Chrome no Fedora, penso que há um ficheiro rpm no site do Google.

PS: só para que saibas tenho o ficheiro js feito desde ontem e tem apenas 4 linhas e 1 função... agora vou ter uma reunião, da parte da tarde se ainda tiveres duvidas, diz que eu mando-te a solução para o teu problema.

À tarde eu não posso, pois sou copeiro e horário de restaurante é ingrato, mas se quiseres enviar-mo via email, ei-lo aqui:
adonai.adoneinu@gmail.com
Se for por outra via, diga-me qual.

Mais uma vez obg e cptos

 

 

 

 

[jacreis]

Podes utilizar o FF... se até o IE já têm.

Tenta fazer 1º... se n conseguires diz, que eu ponho aqui uma das soluções possiveis. 🙂

 

[jacreis]

Como prometido, aqui vai...
https://jsfiddle.net/sxzndtqy/

[webcoders.pt]

4 horas atrás, jacreis disse:

Como prometido, aqui vai...
https://jsfiddle.net/sxzndtqy/

@jacreis, obrigado pela ajuda, mas não consegui seguindo o teu código, porém, devo dizer-te que através dele percebi uma coisa mto simples, que bastava que eu copiasse o script sem as tags script para o ficheiro .js externo e chamá-lo no ficheiro html. Deixe-me ser mais claro. Eu pensava que só podiam haver funções dentro do ficheiro .js externo, logo eu não sabia como pôr esta parte...

var VotaDebian = (function(){
    var ContaDebian = 0;
    return function(){return ContaDebian+=1;}
})();

...dentro do ficheiro externo. Pensava que havia de pô-lo dentro de uma função, por isso estava a tentar pô-lo dentro de uma como bem viste.

Ficou assim:

var VotaDebian = (function(){
    var ContaDebian = 0;
    return function(){return ContaDebian++;}
})();
function Debian(){document.getElementById('Deb').innerHTML=VotaDebian();}

Mas deu um errito. Não começava com o valor zero, mas com o 1. Então troquei o
return function(){return ContaDebian+=1;} por return function(){return ContaDebian++;}
e o código passou a correr à perfeição.

Pode não ser o mais curto, mas funciona.

Novamente obg e cptos.

[HappyHippyHippo]

variveis globais é algo que me faz cocigas

document.getElementsByTagName('BUTTON')[0].onclick = function(){
  this.setAttribute('data-count', val = (parseInt(this.getAttribute('data-count')) || 0) + 1);
  document.getElementById('Deb').innerHTML = val;
};

[jacreis]

@webcoders.pt 🙂 há muitas formas de fazer o mesmo em JS, umas melhores outras piores.
Vê como o @HappyHippyHippo demonstra outra forma de guardar a info.