Javascript Function para guardar script! JavaScript

Mizrain Phelipe Sá · 23 de dezembro de 2020

Tenho um script e gostaria apenas de coloca-lo dentro de uma function porque não é boa prática deixar scripts "soltos", então gostaria de uma função que não modifique em nada o meu script, apenas sirva de "deposito" e que meu script continue funcionando e sendo reconhecido perfeitamente pelo HTML.

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },    
    options: {}
});

<html>
<head>
<title></title>
</head>
<body>

<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</body>
</html>

vini_seven · 23 de dezembro de 2020

Em 23/12/2020 às 12:04, Mizrain Phelipe Sá disse:

Tenho um script e gostaria apenas de coloca-lo dentro de uma function porque não é boa prática deixar scripts "soltos", então gostaria de uma função que não modifique em nada o meu script, apenas sirva de "deposito" e que meu script continue funcionando e sendo reconhecido perfeitamente pelo HTML.


var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },    
    options: {}
});


<html>
<head>
<title></title>
</head>
<body>

<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</body>
</html>

Expandir

É só encapsular todo o script dentro de uma função, use o parâmetro .ready ao criar a função exemplo:

$(document).ready(function() {

//todo o script aqui

}

Com isso o código javascript é executado depois que todo o DOM da página foi carregado e está pronto para ser manipulado, isso evita do seu código javascript ser executado antes por exemplo da página carregar todos os outros elementos html, e css.

Adriano_web · 23 de dezembro de 2020

@Mizrain Phelipe Sá Você pode usar uma função onload que executa o bloco de códigos quando a página termina de carregar, ou usar uma expressão de função chamada imediatamente. Segue o exemplo:.

Opção 1:

window.onload = function() {
   // código vai aqui...
}

Opção 2:

(function() {
  // Código vai aqui...
})();

A diferença é clara, a opção 1 executa a função quando a página(seus conteúdos) terminam de carregar e a opção 2 executa o bloco de código imediatamente independente se a página terminou o carregamento ou não.