JavaScript - Condições (Parte 2)

NA ÚLTIMA PUBLICAÇÃO FALÁMOS SOBRE OS MÉTODOS IF E ELSE, MAS E QUANDO QUEREMOS UTILIZAR MAIS DO QUE UMA CONDIÇÃO?PODEMOS DEFINIR MAIS "CAMINHOS" E É ISSO QUE VOU ENSINAR HOJE!

Podemos usar a instrução else if para especificar uma nova condição se a primeira condição for falsa. Segundo a teoria:

curso var = 1; 
if (curso == 1) { 
   document.write ("<h1> Tutorial em HTML </h1>"); 
} else if (curso == 2) { 
   document.write ("<h1> Tutorial do CSS </h1>"); 
} else { 
   document.write ("<h1> Tutorial em JavaScript </h1>"); 
}

O código acima diz:
- se o curso for igual a 1, execute "Tutorial em HTML";
- caso contrário, se o curso for igual a 2, execute "Tutorial em CSS";
- se nenhuma das condições acima for verdadeira, emita o "Tutorial em JavaScript";
Como a variável curso é igual a 1, obtemos o primeiro resultado!


Referências:

• Imagem (consultado a 27-5-2020);
• http://hilite.me/ (consultado a 27-5-2020).

JavaScript - Condições (Parte 1)

COMEÇANDO ASSIM POR OUTRO TÓPICO EM PROGRAMAÇÃO MAIS RELEVANTE, HOJE VAMOS FALAR DAS CLÁSSICAS CONDIÇÕES EM JAVASCRIPT!

Muitas vezes, quando se escreve código, deseja-se executar ações diferentes com base em condições diferentes, ou seja, tendo em conta acontecimentos ou resultados diferentes, o código segue "caminhos" diferentes.

Usa-se o clássico if para especificar um bloco de código que será executado se uma condição especificada for verdadeira. Assim exemplificando:

var myNum1 = 7; 
var myNum2 = 10; 
if (myNum1 < myNum2) { 
   alert ("JavaScript é fácil de aprender."); 
}

Assim o código "dentro" do if só é executado se a variável myNum1 for menor que a variável myNum2. Assim como é possível verificar a condição é verdadeira, logo irá executar o comando alert (falaremos deste comando brevemente).

Usa-se a instrução else para especificar um bloco de código que será executado se a condição for falsa. Assim exemplificando:

var myNum1 = 7; 
var myNum2 = 10; 
if (myNum1> myNum2) { 
   alert ("Esta é minha primeira condição"); 
} 
else { 
   alert ("Esta é minha segunda condição"); 
}

Assim neste caso a variável  myNum1 continua a ser menor que a variável myNum2, logo a condição é falsa e apenas irá ser executado o comando alert "dentro" do else.


Referências:

• Imagem 1 (consultado a 27-5-2020);
• http://hilite.me/ (consultado a 27-5-2020).

JavaScript- Operadores lógicos

NAS PUBLICAÇÕES DE SEGUNDA E QUARTA-FEIRA FALEI DE DOIS TIPOS DE OPERADORES, ARITMÉTICOS E DE COMPARAÇÃO, NESTA VOU FALAR NO ÚLTIMO TIPO DE OPERADORES QUE TAMBÉM É MUITO UTILIZADO  OS OPERADORES LÓGICOS!

Operadores lógicos, também conhecidos como operadores booleanos (assim chamados porque retornam sempre um valor booleano - true ou false), avaliam a expressão e retornam verdadeiro ou falso .

A tabela abaixo explica os operadores lógicos ( AND , OR , NOT ):

NOTA: Pode verificar-se todos os tipos de dados; operadores de comparação sempre retornam  valores booleanos: verdadeiro ou falso, nunca outro valor.

Assim como de acordo com a tabela acima, && significa "e", || significa "ou" e ! significa "não", todos traduzidos do inglês.

Exemplo:

(4> 2) && (10 <15)

Para que essa expressão seja verdadeira , ambas as condições devem ser verdadeiras .
- A primeira condição determina se 4 é maior que 2, o que é verdadeiro .
- A segunda condição determina se 10 é menor que 15, o que também é verdadeiro .

Com base nesses resultados, toda a expressão é verdadeira .

Referências:

• Tabela 1 (consultado a 27-5-2020);
• http://hilite.me/(consultado a 27-5-2020);
• Imagem 1(consultado a 27-5-2020).

JavaScript - Operadores de comparação

NA PUBLICAÇÃO PASSADA FOMOS APRESENTADOS AOS OPERADORES ARITMÉTICOS, JÁ NESTA VAMOS FALAR SOBRE OPERADORES DE COMPARAÇÃO!

Operadores de comparação são usados ​​em instruções lógicas para determinar a igualdade ou diferença entre variáveis ​​ou valores. Eles retornam verdadeiro (true) ou falso (false) .

O operador igual a (==) verifica se os valores dos operandos são iguais, sendo diferente do já falado operador de atribuição (=).

var num = 10; 
// num == 8 retornará false

Abaixo encontra-se uma tabela com todos os operados de comparação mais utilizados, com exemplos simples e com a descrição de cada um deles:

NOTA: Ao usar operadores, verifique se os argumentos são do mesmo tipo de dados; números devem ser comparados com números, strings com strings e assim por diante.

Referências:

• Tabela (consultado a 27-5-2020);
• http://hilite.me/(consultado a 27-5-2020);
• Imagem 1(consultado a 27-5-2020).

JavaScript - Operadores Matemáticos

NO JAVASCRIPT COMO EM QUALQUER OUTRA LINGUAGEM DE PROGRAMAÇÃO É NECESSÁRIO REALIZAR CÁLCULOS MATEMÁTICOS E ASSIM COMO NA MATEMÁTICA QUE SE APRENDE NA ESCOLA, EXISTEM OPERADORES PARA REALIZAR ESSAS OPERAÇÕES!

Os operadores matemáticos, também conhecidos como aritméticos, executam funções aritémicas em números, que podem estar ou não associados a variáveis. Assim abaixo encontram se os operadores mais importantes.

Vou dar um exemplo e falar brevemente de alguns deles:

Adição

O operador de acição é utilizado para determinar a soma de dois ou mais números ou variáveis:

var x = 10; 
var y = x + 5 + 22 + 45 + 6548; 
document.write (y); 

// Output 6630

O mesmo acontece com a subtração, multiplicação e divisão só que são realizados com operadores diferentes!

Módulo
O operador módulo pode ser oi mais confuso para a maioria das pessoas, é representado pelo sinal de percentagem e retorna o resto da divisão de um número por outro:

var x = 26% 6; 

// x é igual a 2

Incremento e Decremento
Já estes dois não existem em algumas linguagens e utilizam-se para adicionar ou subtrair uma unidade a um valor, respetivamente. Algumas das suas proriedades com exemplos podem ser consultadas abaixo:

Referêcias:

• Tabelas (consultado a 27-5-2020);
• Imagem 1(consultado a 27-5-2020);
• http://hilite.me/(consultado a 27-5-2020).

JavaScript - Tipos de dados

APÓS APRENDERMOS O QUE ARMAZENA OS DADOS, AS VARIÁVEIS, VAMOS APRENDER QUE TIPOS DE DADOS PODEM SER ARMAZENADOS PELAS MESMAS!

O termo data types ou tradfuzido para o portugês para "tipos de dados" refere-se aos tipos de valores com os quais um programa pode trabalhar. As variáveis no ​​JavaScript podem conter muitos tipos de dados, como números , sequências de caracteres , matrizes e muito mais.

Ao contrário de muitas outras linguagens de programação, o JavaScript não define tipos diferentes de números, como inteiros, de ponto flutuante, entre outros podendo ser escritos com ou sem algarismos decimais.

Inteiros

Como referi acima, as variáveis podem conter números inteiros como por exemplo:

var num = 42; // Um ​​número sem decimas

Ponto flutuante
Também podem armazenar números com casas decimais denominados números de ponto flutuante:

var preco = 55,55; 
document.write (preco); 

Strings
Um dos tipos de dados mais usados são as strings que são usadas para armazenas e manipular texto. Para as definir o texto tem de aparecer entre aspas, duplas ou simples:

var nome = 'João'; 
var texto = "O meu nome é João";

Booleanos
Valores booleanos são outro dos tipos de dados mais conhecidos e utilizados, sendo que no JavaScript existem dois true e false. Todos os valores 0 são falsos e todos os valores reais são verdadeiros:

var quarta = true; 
var ferias = false;

Referências:

• Imagem 1 (consultado a 27-5-2020);
• http://hilite.me/ (consultado a 27-5-2020).

JavaScript - Variáveis

COMO EM TODAS AS LINGUAGENS DE PROGRAMAÇÃO, VARIÁVEIS SÃO MUITO IMPORTANTES E DOS CONCEITOS MAIS BÁSICOS A APRENDER. ASSIM HOJE VOU ENSINAR COMO AS CRIAR E UTILIZAR MINIMAMENTE!

Variáveis são como "contentores" ou "gavetas" que guardam informação, que pode ser em forma de valor, de string, entre outros. O valor correspondente a uma variável pode mudar ao longo do programa.

Para criar uma variável utilizamos a keyword var da seguinte maneira:

var x = 10;

Uma variável pode ser criada sem um valor, que posteriormente pode ser obtido através de um cálculo ou de uma entrada do utilizador.

Para atribuir o valor de uma variável a outra utilizamos o sinal =, que não é o mesmo que "igual a"!

Regras de nomenclatura:

• O primeiro caracter deve ser uma letra, um sublinhado (_) ou um cifrão ($). Os caracteres subsequentes podem ser letras, dígitos, sublinhados ou cifrões;
• Números não são permitidos como o primeiro caracter;
• Nomes de variáveis não podem incluir um operador matemático ou lógico no nome. Por exemplo, 2 * algo ou isso + aquilo ;
• Os nomes JavaScript não devem conter espaços.

Nota: Também não é permitido utilizar nenhuma das palavras reservadas da linguagem! Estas podem ser consultadas abaixo:

Referências:

• Imagem 1 (consultado a 27-5-2020);
• Imagem 2(consultado a 27-5-2020);
• http://hilite.me/(consultado a 27-5-2020).

JavaScript - Comentários

NESTA PUBLICAÇÃO IREI ENSINAR A ESCREVER COMENTÁRIOS EM JAVASCRIPT. SÃO BASTANTE ÚTEIS EM TODOS OS TIPOS DE CÓDIGO SEJA QUAL FOR A LINGUAGEM DE PROGRAMAÇÃO E JAVASCRIPT NÃO É EXCEPÇÃO.

Nem todas as linhas de código em JavaScript são executados. Os comentários são linhas de código que são ignoradas e não são executadas e têm como função explicar alguma linha de código. Em projetos grandes com muito código normalmente este está dividido por diversos comentários que explicam o que cada bloco de código faz.

Para escrever um comentário basta escrever depois de // como no exemplo a seguir:

<script>
   // Isto é uma linha única de comentário
</script>

Para criar comentários de múltiplas linhas basta usar  /*   */ como no exemplo a seguir:

<script>
   /* Isto é um
   comentário que ocupa
   múltiplas linhas */
</script>

Referências:

• Imagem 1 (consultado a 27-5-2020);
• http://hilite.me/(consultado a 27-5-2020).

JavaScript - Ficheiros externos

NA PUBLICAÇÃO PASSADA ENSINEI A PROGRAMAR EM JAVASCRIPT NO PRÓPRIO FICHEIRO HTML, MAS PARA CÓDIGOS MAIS LONGOS É MAIS ORGANIZADO ESCREVÊ-LO NO FICHEIRO EXTERNO! VOU MOSTRAR COMO FAZER ISSO!

Scripts externos são úteis e práticos quando algum código é utilizado num número diferente de Web pages ou quando o código é muito extenso e é mais organizado escrevê-lo fora do ficheiro HTML.

Os ficheiros JavaScript terminam com .js.

Assim como nos ficheiros CSS externos, a ligação de um ficheiro JavaScript a um ficheiro HTML é simples e rápida:

<html>
   <head>
     <title> </title>
     <script src="demo.js"></script>
   </head>
   <body>
   </body>
</html>

Assim src como já sabemos significa source e "demo.js" é o nome do ficheiro JavaScript que se encontra na mesma localização que o ficheiro .html.

Referências:

• Imagem 1 (consultado a 27-5-2020);
• http://hilite.me/ (consultado a 27-5-2020).

JavaScript - Criando o primeiro JavaScript

NA PUBLICAÇÃO DE HOJE VOU ENSINAR A CRIAR O SEU PRIMEIRO JAVASCRIPT NUMA WEBPAGE!

O JavaScript numa página na Web "vive" dentro do documento HTML, ou seja, encontra-se ou está ligado a um código HTML.

Em HTML, o código JavaScript deve ser inserido entre as tags <script> e </script>:

<script>
   ...
</script>

O código em JavaScript pode ser colocado tanto na tag <body> como na <head>.
Vamos escrever um script de exemplo: Escrever "Olá Mundo!" no navegador!

<html>
   <head> </head>
   <body>
     <script>
       document.write("Hello World!");
     </script>
   </body>
</html> 

Nota: A função document.write() escreve uma string no documento HTML.
Assim o output no navegador seria algo como isto:

Referências:

• Imagem (consultado a 27-5-2020);
• http://hilite.me/ (consultado a 27-5-2020).

JavaScript - Introdução

COMO MENCIONADO EM PUBLICAÇÕES ANTERIORES SOBRE HTML, AS PUBLICAÇÕES SEGUINTES SERÃO APENAS DE JAVASCRIPT. HOJE VAMOS APRENDER O QUE É E INTRODUZIR-VOS A ESTA LINGUAGEM!

O que é?

O JavaScript é uma linguagem de programação do "lado cliente", ou seja, é processada pelo próprio navegador, assim trabalha em conjunto com HTML e CSS para nos proporcionar uma fantástica experiência nas páginas na Web. 

Nota: O JavaScript não deve ser confundido com a linguagem Java, sendo que a única parecença entre elas é o nome.

Para que serve?

Com o JavaScript podemos criar efeitos especiais para nossas páginas na Web, além de podermos proporcionar uma maior interactividade com seu utilizadores. 

Como funciona?

O JavaScript é uma linguagem orientada a objetos, ou seja, ela trata todos os elementos da página como objetos distintos, facilitando a tarefa da programação.

Resumindo, o JavaScript é uma poderosa linguagem que deve ser dominada por quem deseja criar páginas Web dinâmicas e interactivas. Em publicações futuras ensinarei a trabalhar e programar com o mesmo!

Referências:

• Imagem (consultado a 27-5-2020);
• Informação 1 (consultado a 27-5-2020);
• Informação 2 (consultado a 27-5-2020).

Iniciação ao JS: Comentários

Os comentários são cruciais em qualquer linguagem de programação. Ajuda nós e os outros a perceber o qual o raciocínio seguido na escrita daquele pedaço de código ou o seu objetivo ou aquilo que se refere. Pode parecer uma ferramenta exclusivamente útil para programadores em equipa, mas acredite, também é muito útil quando vamos mexer num pojeto que já não tocávamos à muito tempo.

Como puderam ver nos exemplos acima, os comentários podem ser feitos numa linha apenas, sendo apenas necessário iniciá-lo com "//". Caso necessite escrever um comentário que se prolongue por mais do que uma linha, terá que iniciar o mesmo com "/*" e terminá-lo com "*/". 

Imagens produzidas pelo autor

Iniciação ao JS: variáveis

As variáveis são provavelmente a peça mais fulcral de um código em Javascript e de grande parte das linguagens de programação. São utilizadas para guardar informação, que pode ser acedida mais tarde. Para além disso, como o nome sugere, as variáveis têm a capacidade de variar o valor que guardam no decorrer da execução do programa. O uso mais comum para as mesmas é a recolha e armazenamento de inputs do utilizador (valores que não são predefinidos e que podem ser alterados ao longo do tempo).

Como podem ver, a estrutura de uma variável é muito simples. Começamos por lhe dar um nome ao nosso gosto para que a possamos identificar e "chamar" mais tarde (o nome não pode possuir espaços ou caracteres especiais, sem ser o underscore). À frente colocamos APENAS um sinal de mais, pois estamos a fazer uma atribuição e não uma comparação. Por último colocam absolutamente o que quiserem no seu interior. Como vêm, fácil.
É importante frisar que no JS não é necessário indicar qual o tipo de variável antes de declarar a mesma (float, string, bool,...).

Imagem produzida pelo autor.

Iniciação ao JS: While loop

A estrutura de repetição que vou falar hoje é o while, Esta, em oposição ao for, é normalmente utilizada quando o programador não sabe o número de vezes que o loop terá que se repetir. Esta, para além de muito simples, é também transversal à maioria das linguagens de programação.

Como podem ver neste exemplo, o código dentro do loop é executado enquanto a variável i for verdadeira, no momento em que não o seja, o loop é quebrado o programa não executa o mesmo. É importante denotar que dentro dos parênteses colocamos a condição para que a estrutura seja executada, sendo que a mesma o é, sempre que o que se encontra dentro de parênteses seja True. Ou seja, funciona como um booleano, é executada quando o valor é True e não o é, quando o valor da condição é igual a False.

Imagem produzida pelo autor.

Iniciação ao JS: For

For é uma estrutura de repetição que executará o código no seu interior pelo determinado número de vezes que nós determinarmos. Esta condição é especialmente útil quando queremos repetir pedaços de código um número de vezes bem definido. Caso não saibamos com precisão o número de vezes que queremos que o código se repita, é melhor ser utilizada a estrutura de repetição while, que irei falar no próximo post.

Exemplo de um ciclo for

Como pode ver, dentro dos parênteses do for, declaramos a variável de "controlo", a seguir dizemos que este ciclo será executado enquanto o i for menor que 5 (vai ser executado 5 vezes, de 0 a 4, inclusive), por fim, indicamos que no final de cada ciclo, será adicionado +1 à variável i. Dentro das chavetas colocamos o comando que queremos que seja executado. É importante denotar que o for começa por verificar se a condição dentro de parênteses é verdadeira, e apenas caso seja, o código no seu interior é executado. Por último, após executar o código, é adicionado ou subtraído (o programador decide) o valor à variável de "controlo".

imagem produzida pelo autor

Iniciação ao JS: if

O if é uma estrutura transversal à maioria das linguagens de programação, sendo a espinha dorsal de muitos programas. No Javascript a situação não é diferente.

Porém, apesar de ser muito poderoso, o if é de extrema facilidade de utilização. É importante que tenham noção que "if" quer dizer "se" em português.

Colocamos o if e em seguida, dentro dos parênteses, a condição que necessita ser cumprida para que o código dentro das chavetas seja executado.

Podemos adicionar um "else" que significa "senão", ou seja, o código dentro das chavetas do  else será executado caso a condição para que o if seja executado não seja cumprida.

Podemos também executar um "else if" que significa "senão se", que irá apenas ser executada caso a condição do if não seja verdadeira e a sua for.

No fundo todas estes diferentes estruturas utilizam o raciocínio se algo acontece, então faz isto, senão acontece, faz aquilo, se não acontece isso mas acontece isto, executa isto. É um raciocínio muito simples. Lembro também que estas estruturas podem ser encadeadas e usadas inúmeras vezes, com excessão do else, que pode ser apenas utilizado uma vez por "estrutura".

Todas as fotos são da autoria do autor.

Iniciação ao JS: Confirm

Este comando é uma variação do prompt de que já falei. A única diferença é que em vez de retornar uma string ou um número (seja ele inteiro ou flutuante), este comando retorna um tipo de dados chamado de boolenao (com a abreviação bool). Este tipo de dados é o mais primitivo de todos, possuindo apenas dois estados: True (1) ou False (0). Este comando é muito útil para ser utilizado com condições if, pois se o valor for True (verdadeiro), a condição é executada, mas se o seu valor for False (falso), a condição não é executada. Este comando é especialmente útil quando usado para guardar o seu valor numa variável, como o exemplo a seguir demonstra.

Exemplo do comando "confirm" dentro de uma variável

 Resultado do comando "confirm"

Como podem ver, o resultado deste comando é um pop-up (como já disse inúmeras vezes, os utilizadores não costumam gostar), que quando clicamos no "OK" o valor recolhido é True, enquanto que quando clicamos no "Cancelar" o valor recolhido é False. 

Devo denotar que os pop-ups dependem de Browser para Browser,e como tal, todos terão duas opções de resposta ao confirm, mas o que estará escrito nas mesmas pode ser diferente de "OK" e "Cancelar", porém, o resultado será o mesmo.

Imagens produzidas pelo autor.

Iniciação ao JS: Document.write

O comando que vou falar hoje foi um que prometi quando vos falei do prompt. Porque razão? Esta é uma boa alternativa ao mesmo. Como já tinha dito, a maior falha do prompt é o facto de ser um pop-up, e toda a gente sabe o quanto a maioria dos utilizadores odeia pop-ups. 

Este document.write executa uma tarefa muito simples, escreve no documento (quando dizemos documento, estamos a referir-nos à página web que estamos a programar).

Exemplo da implementação do comando

Resultado do exemplo (escrito numa página web)

É importante denotar que esta ferramenta não deixa muitas opções de customização. Para ter uma maior variedade da mesma, aconselho a utilizar o .innerHTML que irei falar mais à frente. Mas como comando de escrita para iniciantes, o document.write é fantástico.

Imagens retiradas pelo autor.

Iniciação ao JS: Alert

No post passado mostrei-vos como é possível obter o input do utilizador de uma página web a partir de um pop-up. Neste post irei explicar como damos informação para um utilizador utilizando um pop-up.

Este comando é muito simples, apenas necessitamos de "chamar" a função alert: "alert()" e dentro dos parênteses colocamos aquilo que queremos que o pop-up mostre, seja uma variável, um cálculo, um texto (entre parênteses), etc... O ponto e vírgula no final do comando é opcional e muitas vezes depende do compilador.

Comando "Alert()"

Resultado

Gosto sempre de denotar o quão as pessoas odeiam pop-ups. Sendo que a implementação deste comando no seu site não é muito aconselhável (a não ser que esteja a começar e este seja o único método de interação com o usuário que conhece). Mas não se preocupem, em breve irei falar de outros modos de apresentar informação.

Imagens:

• printscreens do autor

Iniciação ao JS: Prompt

A maioria dos programas necessitam de um input do usuário, principalmente quando estamos a falar de uma página web. Por essa razão vou mostrar-vos o comando mais trivial utilizado para obter o input do utilizador.

Este "prompt" é muito simples. Sendo até possível colocá-lo dentro de uma variável, para armazenar o valor obtido.

Exemplo de um prompt dentro de uma variável

É importante referir que tanto a frase que colocamos dentro do prompt para guiar o utilizador, como a caixinha onde o mesmo pode escrever, aparecem em pop-up (todos sabemos como os utilizadores odeiam pop-ups).