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 - 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).

PT08 - Passo 3 - Apresentação CSS

Com o fim desta Proposta de Trabalho segue-se a minha apresentação sobre CSS feita em Google Slides assim como pedido no Passo 3.

PT08: Passo 3 - CSS

Apresentação CSS

Hoje venho por este meio partilhar a minha apresentação de bases de CSS, realizada no âmbito da disciplina de Aplicações Informáticas B, no passo 3 da proposta de trabalho 08, sobre CSS.

Aconselho vivamente a vizualizerem pois contém de uma maneira muito simples a expicação do que é CSS, a sua realação com HTML e JavaScript, como é utilizados, entre outros, sempre complementado com alguns exercícios práticos para testar os conhecimentos:

HTML - Tabelas

UMA FERRAMENTA MUITO INTERESSANTE E ORGANIZADA EM QUALQUER LADO É UMA TABELA, AJUDA A ARRUMAR OS DADOS E A INFORMAÇÃO DE UMA MANEIRA SIMPLES E AGRADÁVEL, ASSIM TAMBÉM NÃO PODE FALTAR NUMA PÁGINA WEB!

A tag utilizada para criar uma tabela HTML é a tag <table>, posteriormente fechada com </table>. Dentro dela, incluímos todos os elementos que compõem a tabela, ou seja, as células da tabela. Assim sendo, os elementos de uma tabela consistem em outras tags que poderão ser utilizadas.

As tags que vão formar a estrutura básica de uma tabela em HTML são as tags <tr> e <td>. A tag <tr> representa uma linha e a tag <td> representa uma célula. Desta forma, a criação de colunas em uma tabela HTML é feita automaticamente através da quantidade de células incluídas dentro de uma linha. Por exemplo, vejamos na imagem abaixo como é que essa estrutura é formada:

Assim vamos criar a nossa primeira tabela com o código (inserido na tag <body>) abaixo:

<table border="1">
    <tr>
        <th>Nome</th>
        <th>Idade</th>
        <th>Profissão</th>
    </tr>
    <tr>
        <td>Bruna</td>
        <td>19</td>
        <td>Bioquímica</td>
    </tr>
    <tr>
        <td>Nyckollas</td>
        <td>17</td>
        <td>Estudante</td>
    </tr>
</table>

O output deste código no navegador será:

Claro que existem muitas mais configurações e modificações que podemos fazer em tabelas, mas decidi apenas falar dos conceitos básicos.

Referências:

• http://hilite.me (consultado a 20/04/2020);
• Logo HTML (consultado a 20/04/2020);
• Imagem da tabela (consultado a 20/04/2020).

HTML - Link

UMA DAS OUTRAS TAGS DE DECIDI TRAZER FOI A TAG DE LINK, QUE TAMBÉM É UM FERRAMENTA MUITO UTILIZADA DURANTE A CRIAÇÃO DE PÁGINAS DE WEB!

Para escrever um link utilizamos a estrutura:

<a href="https://www.thisisalink.com">This is a link</a>

Assim, sempre que quisermos adicionar uma frase com link, utilizamos <a href="link">Frase com link</a>, onde "Frase com link" é a frase que vai aparecer na página Web com a hiperligação, ou seja, o que escrevermos no lugar da palavra "link" não aparecerá.

Então escrevemos o código abaixo com a tag de link inserida e com a tag de parágrafo e de cabeçalho que aprendemos na publicação anterior:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>Links em HTML são definidos com a tag:</p>

<a href="https://www.w3schools.com">Isto é um link.</a>

</body>
</html>

Em que o output no navegador será:

Em que se clicar-mos no link, o navegador irá direccionarmos para www.w3schools.com


Referências:

• http://hilite.me (consultado a 20/04/2020);
• Logo HTML (consultado a 20/04/2020).

HTML - Imagens

UMA DAS TAGS MAIS UTILIZADAS TAMBÉM É A DE IMAGEM, PORQUE AFINAL O QUE SÃO PÁGINAS DA WEB SEM IMAGENS!

A tag de imagem é <image> e a sua estrutura de utilização é a seguinte:

<img src="urldaimagem" alt="nomedaimagem" width="largura" height="altura">

Em que src é a source, ou sejam o URL da imagem, alt é o nome que queremos dar à imagem (quando a imagem não carrega ou não é detectada, é esse nome que aparece na página), width é a largura e height é a altura.

Assim se seguirmos este exemplo:

<!DOCTYPE html>
<html>
<body>

<h2>Imagens em HTML</h2>
<p>As imagens em HTML são definidas com a tag:</p>

<img src="w3schools.jpg" alt="W3Schools Logo" width="895" height="493">

</body>
</html>

Em que a imagem denominada "w3schools.jpg" está na pasta onde se encontra o ficheiro html, o output no navegador será:

Se a imagem não fosse detectada ou carregada corretamente, o output seria:

Referências:

• http://hilite.me (consultado a 20/04/2020);
• Logo HTML (consultado a 20/04/2020).

HTML - Cabeçalhos e Parágrafos

UMAS DAS TAGS MAIS IMPORTANTES E MAIS UTILIZADAS NA PROGRAMAÇÃO EM HTML SÃO AS TAGS DE PARÁGRAFO E DE CABEÇALHO!

A tag de parágrafo, em inglês "paragraph", é <p> e a sua estrutura de utilização é

<p>Escrever parágrafo</p>

Assim, a tag de parágrafo escreve-se dentro da tag <body>. Se desejar deixar um espaçamento entre parágrafos, pode utilizar a tag <br />.

Já a tag de cabeçalho, em inglês "heading", tem variáveis, podendo ser <h1>, <h2>, ..., até <h6>, sendo assim o <h1> o maior cabeçalho que contém a informação menos importante e o <h6> o menos e que contém informação menos importante.

Assim, as tags são utilizadas da seguinte maneira:

<h1>Este é o cabeçalho 1</h1>
<h2>Este é o cabeçalho 2</h2>
<h3>Este é o cabeçalho 3</h3>
<h4>Este é o cabeçalho 4</h4>
<h5>Este é o cabeçalho 5</h5>
<h6>Este é o cabeçalho 6</h6>

E assim como a tag de parágrafo, escreve-se dentro da tag <body>. Assim, o output deste código seria:

Referências:

• Logo HTML (consultado a 20/04/2020);
• http://hilite.me (consultado a 20/04/2020);

HTML - Estrutura básica

PARA COMEÇAR, VAMOS APRENDER COMO É CONSTITUÍDA E COMO FUNCIONA UMA ESTRUTURA BÁSICA DE HTML!

A estrutura básica de um ficheiro HTML é como se fosse um hambúrguer ou outra coisa com camadas, cada tag é como se fosse um pedaço de pão, assim todas as tags iniciam e finalizam, e o conteúdo de dentro das tags é como se fosse o recheio do hambúrguer, assim cada documento HTML tem como base as seguintes tags:

<!DOCTYPE html> - define que este documento é HTML5;

<html> - primeiro elemento de uma página HTML, assim todos os documentos HTML começam e acabam com um elemento <html> e </html>, respectivamente;

<head> - onde se encontra toda a informação "invisível" no site como o seu título por exemplo;

<title> - define o título do documento;

<body> - contém toda a informação visível na página;

<h1> - define um cabeçalho na página;

<p> - define um parágrafo na página.

Assim, o "esqueleto" de um documento HTML é:

Assim, os cabeçalhos (<h1>) e parágrafos (<p>) ficariam dentro da tag <body>, mas em publicações futuras irei explicar melhor essas tags.

Referências:

• Esquema (consultado a 20/04/2020);
• Logo HTML (consultado a 20/04/2020).

HTML - Relação com CSS e JavaScript

PARA DESENVOLVER UMA PÁGINA NA WEB, É NECESSÁRIO SABER HTML, JAVASCRIPT E CSS E AINDA SABER RELACIONÁ-LOS!

Programar uma página na Web apenas com a linguagem HTML seria como olhar para uma pessoa e ver apenas o esqueleto, é estranho, feio e sem vida, assim para desenvolver uma página Web é necessário juntar HTML + CSS + Javascript. Estas três linguagens complementam-se e funcionam como um ser humano perfeito, onde o HTML é a base da programação, como se fosse o esqueleto o corpo, o CSS é a pele e o JavaScript são os músculos.

O HTML define o que vai em cima, o que é texto, o que é coluna, o que é imagem, ou seja, estrutura muito bem a página com início, meio e fim. Contudo deixa a página "feia" e é aí que entra o CSS. Esta linguagem é como se fosse a pele que o corpo usa. Ela vai dar cor e deixar a página mais atractiva.

CSS (Cascading Style Sheets) é um mecanismo para adicionar estilo com cores, fontes, espaçamento, entre outras a uma página Web. Em vez de colocar a formatação dentro do documento, o CSS cria um link para uma página que contém os estilos.

Contudo, não basta um esqueleto e pele para o corpo humano viver, é preciso músculos, articulações, entre outros e é aí que entra o Javascript. 

Com o JavaScript é possível dar movimento e acção à página e tudo ficará mais atractivo para quem  a visita.

JavaScript é uma linguagem de programação criada para ser parte dos navegadores web, para que scripts possam ser executados do lado do cliente e interajam com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido.

Assim aprendemos qual a relação entre estas 3 linguagens fantásticas, mas vamos continuar apenas com as publicações só de HTML, podendo fazer referência a algum dos outros!

Referências:

• 3 Logos (consultado a 20/04/2020);
• Informação (consultado a 20/04/2020);
• Logo HTML (consultado a 20/04/2020).

HTML - História

SENDO ISTO MAIS UMA CURIOSIDADE, NESTE PUBLICAÇÃO FALAREI DA HISTÓRIA DO HTML, DESDE QUANDO FOI CRIADO, ATÉ AOS DIAS DE HOJE!

O HTML foi criado em 1991, pelo físico inglês Tim Berners-Lee, no CERN (European Council for Nuclear Research, traduzido para Concelho Europeu para Pesquisa Nuclear) sediado na Suíça. 

O HTML foi inicialmente projectado para facilitar a a partilha de documentos científicos entre os diferentes departamentos do CERN e outras instituições de investigação nas proximidades. 

Em 1992, foi disponibilizada a biblioteca de desenvolvimento WWW (World Wide Web), uma rede de visibilidade mundial, que em conjunto com o HTML proporcionou a sua utilização à escala planetária através da WEB.

Referências:

• Wikipedia (consultado a 20/04/2020);
• Logo HTML (consultado a 20/04/2020).

HTML - Introdução

COMEÇANDO ASSIM A NOSSA CURADORIA DE HTML, PRECISAMOS DE SABER O QUE É ANTES DE COMEÇARMOS A APRENDER A TRABALHAR COM ELE!

HTML é uma sigla para HyperText Markup Language, e ao contrário do que muitos pensam, não é uma linguagem de programação, mas sim de marcação utilizada na construção de páginas na World Wide Web. Os seus elementos são tags e não scripts, assim as tags são elementos escritos entre os símbolos de menor e maior: <nomedatag> conteúdo da tag </nomedatag> . 

Os ficheiros HTML (.html ou .htm) são interpretados por navegadores, assim podemos utilizar até um simples notepad (bloco de notas) para escrever o código em HTML.

Para mais informações: https://www.w3schools.com/html/html_intro.asp

Referências:

• W3schools HTML (consultado a 20/04/2020);
• Logo HTML (consultado a 20/04/2020).

CSS para obter suporte para funções de trigonometria

CSS, a linguagem que estiliza e organiza como os elementos de página aparecem num site, terá suporte para funções de trigonometria, como seno, coseno, tangente e outras. As novas funções de trigonometria foram aprovadas no final de fevereiro numa reunião do Grupo de Trabalho CSS do World Wide Web Consortium (W3C).

As novas funções aprovadas e definidas para se associar ao padrão CSS são: 

• Seno - sin() 
• Coseno - cos() 
• Tangente - tan() 
• Arccoseno - acos() 
• Arcseno - asin() 
• Arctangente - atan() 
• Arctangente (de dois números x e y) - atan2()
• Raiz quadrada - sqrt()
• Raiz quadrada da soma dos quadrados de seus argumentos - hipot()
• Potência de - pow()

Foi aprovada a adição dessas novas funções matemáticas ao CSS, a pedido de vários Web developers que solicitaram uma maneira simples de controlar as animações CSS usando a sintaxe CSS nativa em vez de JavaScript. Os desenvolvedores queriam métodos simples para trabalhar com ângulos e sincronizar seqüências de animação complexas sem precisar escrever código JavaScript personalizado ou carregar bibliotecas de animação ou mecanismos de jogos volumosos e superdimensionados. 

Consultei o site ZDNet no dia 24/03/2018.