RPG Maker MV JavaScript para Iniciantes no RPG Maker MV #1 - Sintaxe e Dicas.

[Virage Detoldev]

Olá pessoal, bem-vindo ao primeiro guia de JavaScrpit para Iniciantes. Nesse guia, vamos entender o básico da sintaxe (forma de escrever) códigos e algumas regras e dicas para você ir aprendendo aos poucos como isso funciona. Antes de mais nada, leia mais sobre essas aulas no índice delas, clicando aqui, para saber mais sobre por onde começar e etc.


Sem mais delongas, vamos a lista:


[greenalert]1. O JAVASCRIPT É CASE-SENSITIVE![/greenalert]

Isso significa que ele é sensível ao que você escreveu, ou seja, a forma como se escreve algo impacta na leitura do código. Dessa forma, preste bastante atenção nas letras maiúsculas e minúsculas para que não ocorra erros na hora de executar seu código.


Exemplos:

Se eu criar uma variável e der o nome de nomeHeroi e depois fosse, por exemplo, exibir o nome desse herói na tela usando nomeheroi, daria erro, pois eu usei um H maiúsculo ao criar.

É bastante importante ter uma noção disso, pois muitas vezes o código dá errado e até você descobrir que foi somente uma letra errada irá consumir seu tempo.


[greenalert]2. TODO CÓDIGO DECLARADO DEVE ACABAR EM PONTO E VÍRGULA.[/greenalert]

Todo comando na programação é dado por linhas, que são finalizadas com ponto e vírgula (. Inserir um ponto e vírgula ao final de uma linha, declara que o comando acabou e o próximo comando, caso exista, irá acontecer em sequência. Se você não declara o código, ou seja, indica onde fica o final de cada comando, o programa não saberá onde ele começa e termina.


Exemplos:

Forma correta:

var teste = 12;
var nome = "Paulo";
var cor = "Azul";

Forma incorreta:

var teste = 12 var nome = "Paulo";
var cor = "Azul"

Observação: Apesar de se chamar linha de comando, você pode escrever vários comandos em uma mesma linha, contanto que indique o fim de cada um deles com o (. O problema disso é que pode tornar a leitura do código difícil e confusa.


[greenalert]3. [DICA] SEMPRE QUE POSSÍVEL, FAÇA A INDENTAÇÃO DO CÓDIGO.[/greenalert]

Identar o código significa organizá-lo para uma melhor leitura. Lembre-se que as vezes alguém pode estar aprendendo a programar e quer entender os passos de uma função, ou alguém quer alterar algo de um plugin e vai procurar algo no meio do código. Separar comandos por linhas é uma das formas mais básicas de identar.


Exemplo:

var valor1 = 10;
var valor2 = 30;
var soma = valor1 + valor2;

Você pode ir mais além, usando espaços com o TAB para diferenciar onde algo começa e termina.


Exemplo:

Window_MenuCommand.prototype.needsCommand = function(name) {
    var flags = $dataSystem.menuCommands;
    if (flags) {
        switch (name) {
        case 'item':
            return flags[0];
        case 'skill':
            return flags[1];
        case 'equip':
            return flags[2];
        case 'status':
            return flags[3];
        case 'formation':
            return flags[4];
        case 'save':
            return flags[5];
        }
    }
    return true;
};

Não tente entender o código, só preste atenção em como ele foi organizado.

Usar esses espaçamentos é realmente obrigatório? Não. Isso só serve para facilitar a leitura. Com o tempo você vai perceber o quanto ajuda.

Ainda falando sobre organizar o código, não podemos esquecer o próximo tópico.


[greenalert]4. [DICA] SEMPRE QUE POSSÍVEL, FAÇA COMENTÁRIOS NOS CÓDIGOS.[/greenalert]

Comentários são textos que não são lidos como código e só são exibidos dentro dele. Eles servem para indicar algo. Geralmente são usados para indicar o que um bloco de códigos faz ou, se quiser, o que cada linha faz. Sempre que você por duas barras //, todo texto após elas e na mesma linha, são comentários. Se você quiser fazer um bloco de comentários, que tenha várias linhas, comece com /* e ao final do texto, termine com o */.


Exemplos:

// Essa é uma linha de comentário.

/*
Esse é um bloco de comentário.
Que pode ter mais de uma linha.
É você quem decide o que escrever.
E nada disso é executado como código.
Só sendo visto por quem for editar o plugin.
*/

Bem simples, não é? Imagine que você quer fazer um sistema de dia e noite para um jogo, você pode usar os comandos para indicar o que cada parte faz.


Exemplo:

// Ações para quando é dia.

var horario = "dia";

// Ações para quando é noite.

var horario = "noite";

Você pode inserir o comentário antes de uma linha de código, ou após o código. A forma como você documenta seu código é pessoal.


Vou mostrar mais um exemplo:

Scene_Menu.prototype.createGoldWindow = function() { // Função que cria a janela de Ouro.
    this._goldWindow = new Window_Gold(0, 0); // Novo objeto Window_Gold, nas coordenadas x:0 e y:0.
    this._goldWindow.y = Graphics.boxHeight - this._goldWindow.height; // Informa que a coordenada Y será a altura máxima da tela, menos a altura da janela de ouro, para que ela fique posicionada no final da janela.
    this.addWindow(this._goldWindow); // Cria a janela, com os dados acima.
};

Mais uma vez, não preste atenção no código, só observe o exemplo de como fica "fácil" entender o que cada coisa faz se for comentada.

Lembre-se, assim como identar, você não é obrigado a comentar nada. Principalmente linha por linha. Isso é só um exemplo de como fica mais fácil ler um código se ele for comentado.


[greenalert]5. O JAVASCRIPT IGNORA QUEBRAS DE LINHA E LINHAS PULADAS.[/greenalert]

Parece inútil essa informação, mas quando se trata de organizar um código, as vezes pular uma linha para diferenciar as linhas pode ajudar na hora de ler e é bom saber que pular uma linha não atrapalha o código.


Por exemplo:

var valor1 = 12;
var valor2 = 40;
var media = (valor1+valor2) / 2;

Funcionaria da mesma forma se fosse feito assim:

var valor1 = 12;

var valor2 = 40;

var media = (valor1+valor2) / 2;

Vamos agora para a última parte dessa introdução, que é:


[greenalert]6. CÓDIGOS SÃO EXECUTADOS NA ORDEM QUE VOCÊ ESCREVE.[/greenalert]

Muito importante e muitas vezes esquecido de ser mencionado. Para que algo aconteça na ordem desejada, ele deve ser escrito na ordem correta. Imagine que você quer que uma imagem apareça no topo da tela, depois desça até o final e desapareça. O código deverá ser organizado da seguinte forma:


- Uma imagem invisível é criada na tela.
- Imagem é levada ao topo da tela.
- Imagem deixa de ser invisível.
- Imagem desde ao fundo da tela.
- Imagem volta a ser invisível.


Se você escrever esses códigos, mas fora da ordem necessária, haverá um erro no produto final, como por exemplo:


- Uma imagem invisível é criada na tela.
- Imagem desde ao fundo da tela.
- Imagem é levada ao topo da tela.
- Imagem deixa de ser invisível.
- Imagem volta a ser invisível.


Existem os mesmos códigos que antes, mas por conta da ordem, a imagem só iria aparecer no topo da tela e sumir no topo, pois foi levada para baixo invisível e depois jogada para o topo novamente, antes de aparecer e sumir. Parece bobagem falar nisso, mas é importante saber que a execução de um código sempre é feita de cima para baixo e que a ordem influencia sim no que o programa faz.




Bom gente, esse foi o básico sobre sintaxe e organização. Até o próximo guia sobre variáveis no JavaScript.




[redalert]SUMÁRIO DA AULA[/redalert]

- Explicação sobre case-sensitive.
- Explicação sobre declarações e o uso do ponto e vírgula.
- Explicação sobre identação do código.
- Explicação sobre comentários nos códigos.
- Explicação sobre quebras de linha e espaçamentos.
- Explicação e conceito sobre ordem de execução do código.
​

 

[HermesPasser]

Boa iniciativa, irá ajudar para quando eu soltar o source comentado do meu projeto.

 

[Mallyacum]

Gostei muito. :deku: :lendo:

 

[Suchimu]

Ótimo guia! >. >