JavaScript para Iniciantes: Conceitos Básicos Explicados de Forma Simples
JavaScript (ou JS) é a linguagem de programação mais usada no mundo para
desenvolvimento web. Ela roda no navegador do usuário (lado do cliente) e também pode
rodar no servidor (com [Link]).
No OutSystems, o JavaScript é usado principalmente no lado do cliente (Client Actions,
eventos de tela, customizações de widgets, etc.).
1. O que é JavaScript?
● Linguagem interpretada (não precisa compilar antes de rodar).
● É case-sensitive (maiúsculas e minúsculas importam: nome é diferente de Nome).
● É fracamente tipada (você não precisa declarar o tipo da variável na maioria das
vezes).
2. Variáveis
JavaScript
let nome = "João"; // variável que pode mudar
const idade = 25; // constante (não pode mudar)
var cidade = "São Paulo"; // forma antiga (evite usar hoje)
● let → variável local (recomendado).
● const → valor que não muda.
● var → escopo antigo (pode dar problema, evite).
3. Tipos de Dados Principais
Tipo Exemplo Descrição
String "texto" ou 'texto' Textos
Number 42, 3.14 Números
Boolean true / false Verdadeiro ou Falso
Array [1, 2, 3] Lista de valores
Object {nome: "João", idade: 25} Estrutura com
propriedades
null / undefined null ou undefined Ausência de valor
4. Operadores
● Aritméticos: +, -, *, /, % (resto)
● Comparação: ==, === (igualdade estrita), >, <, >=, <=
● Lógicos: && (E), || (OU), ! (NÃO)
Exemplo:
JavaScript
if (idade >= 18 && temCarteira) {
[Link]("Pode dirigir");
5. Estruturas de Controle
Condicionais:
JavaScript
if (condicao) {
// faz algo
} else if (outraCondicao) {
// faz outra coisa
} else {
// senão
Loops (repetições):
JavaScript
// For tradicional
for (let i = 0; i < 10; i++) {
[Link](i);
// ForEach (mais moderno)
[Link](num => [Link](num));
6. Funções
JavaScript
// Função tradicional
function somar(a, b) {
return a + b;
// Arrow Function (ES6 - mais moderna)
const somar = (a, b) => a + b;
7. Arrays e Objetos (muito importantes)
JavaScript
// Array
const frutas = ["maçã", "banana", "laranja"];
[Link]("uva"); // adiciona no final
frutas[0]; // acessa primeiro item
// Objeto
const pessoa = {
nome: "Maria",
idade: 30,
ativo: true,
endereco: { cidade: "Rio" }
};
[Link]([Link]); // Maria
8. Manipulação do DOM (o que torna o JS poderoso na web)
O DOM é a representação da página HTML que o JavaScript pode alterar dinamicamente.
JavaScript
// Selecionar elementos
[Link]("meuBotao");
[Link](".minhaClasse");
// Alterar conteúdo
[Link]("titulo").innerText = "Novo Texto";
// Adicionar evento
[Link]("click", () => {
alert("Botão clicado!");
});
9. Conceitos Importantes no OutSystems
● Client Actions: São funções JavaScript que rodam no navegador do usuário.
● Eventos: On Click, On Change, On Initialize, etc.
● JavaScript Nodes: No OutSystems você pode colocar blocos de código JavaScript
puro dentro das Client Actions.
● Widgets: Você pode referenciar widgets ($[Link]) e manipular via JS.
10. Conceitos Modernos (ES6+)
● Arrow Functions (=>)
● Template Literals (`Olá ${nome}`)
● Destructuring:
JavaScript
● const {nome, idade} = pessoa;
● Promises e Async/Await (para chamadas assíncronas):
JavaScript
async function buscarDados() {
const resposta = await fetch("/api/dados");
const dados = await [Link]();
● }
Dicas para Iniciantes
1. Use sempre let e const (nunca var).
2. Pratique no console do navegador (pressione F12 → aba Console).
3. No OutSystems, comece criando Client Actions simples antes de escrever JS puro.
4. Ferramentas boas: VS Code + extensão JavaScript.
Quer que eu explique algum tema com mais detalhes e exemplos práticos?
Exemplos que posso aprofundar:
● Arrays e métodos (map, filter, reduce)
● Objetos e JSON
● Eventos e manipulação de tela
● Como usar JavaScript dentro do OutSystems
● Funções assíncronas (Promises)
● Diferença entre Client Action e JavaScript Node