TypeScript

by Rodrigo Portillo

HTML

<!-- Aqui você vai ver HTML-->

<!--alert comum, sem passar parametro-->
<button onclick="alert()">
ALERT COMUM
</button>

<button onclick="alert('Oi, veia!')">
ALERT PARAM
</button>

<button onclick="alertarSaldacao()">
ALERTA SALDACAO
</button>

<button onclick="meuNome()">
MEU NOME
</button>

<button onclick="meuNomeLambda()">
MEU NOME LAMBDA
</button>

<!-- Exemplo de Interação -->
<!-- O label é a etiqueta que mostr ao usuário o título do campo-->
<label for="nome">Nome:</label>
<!-- Input é onde a pessoa colocará o valor (ou seja, input o valor)-->
<input id="nome" name="nome" placeholder="Digite seu nome"/>
<button name="saudacoes" onclick="saudacoes()">
SAUDACOES
</button>

CSS

/*Aqui você vai ver o CSS*/
/*
* Por enquanto ignore o CSS
*/
body{
  font-family: sans-serif;
}
button{
  display: block;
  margin-bottom: 1em;
}

input{
  font-size: 16px;
  border-radius: 3px;
  border: 1px solid black;
  padding: 5px 10px;
  min-width: 200px;
}

button[name=saudacoes]{
  background-color: blue;
  color: white;
  border-radius: 3px;
  padding: 5px 10px;
  border: 0;
  display: inline-block;
}

JavaScript

/* Aqui você vai ver o Javascript*/

// Vamos começar com o básico, vamos definir uma varíavel.
// Que nada mais é do que um espaço na memória

// Existem 3 tipos de variávels:  var, let e const
// var é uma variável que pode ser usada em qualquer lugar
// e tem o objetivo de seguir toda a aplicação
// let é igual a var, mas ela só existe dentro de um bloco, como
// uma função ou um laço
// const não é bem uma variável, é o que chamamos de constante
// basicamente, o const é um espaço na memória que você não vai
// mais modificar. Ou seja, se definir const, não pode mais mudar
// aquele valor

// Exemplo

const apresentacao = "Meu nome é ";
var nome = "Chacrinha";
let saudacao = apresentacao + nome; // vai imprimir Meu nome é Chacrinha

// Já a função (ou método) são comandos que escrevemos em
// blocos que podemos reutilizar em outros momentos. Por 
// convenção, mas não é absoluta, chamamos funções que tem
// retorno de método. Mas tem gente que chama tudo de método.
// Não importa como chamar, todo mundo vai entender

// Alguns métodos são nativos do Javascript, como o alert
// Clique em ALERT COMUM no HTML lá em cima.

// Um método pode ou não ter parâmetro, ou seja, esperar 
// que se passe um dado para ele executar.
// O alert permite passar parâmetro,
// Clique em ALERT PARAM no HTML lá em cima

// Então podemos criar nossas funções para fazer operações,
// Exemplo:
function alertarSaldacao(){
	alert(saudacao)
}
// Convém usar, em nomes de função e variáveis, o estilo
// de escrita chamado de camelCase
// basicamente é separar as palavras por letra maiúscula
// sendo a primeira de todas minúscula
// Essa convenção pode mudar, como o snake, que separa
// por _ ao invés de espaços ou para casos específicos, pode-se 
// usar variações, como colocar um _ na frente da variável
// quando quer indicar que ela não deve ser usada fora ou
// ser temporária, mas não se preocupe com isso agora

// Na prática, no Javascript, toda a função é uma variável
// Quando...