Site do PT09: Iniciação ao Javascript

Neste post venho apresentar-vos um site criado por mim e pelo Pedro Peres sobre as condições em Javascript (sendo "Condições em Javascript" o nome do mesmo), que foi criado no âmbito da proposta de trabalho 09 da disciplina de Aplicações informáticas B no ano letivo 2019/2020. 

Este site apresenta o nosso vídeo tutorial sobre as condições (if) em JS. Este vídeo é muito completo, usando um compilado de cenas tipo palestra, exemplos e exercícios. Passando a sua mensagem de forma didática, simples e divertida.

Para além disso podem ter acesso a todos os nossos recursos utilizados no vídeo (explicações e exercícios).

Temos ainda uma página que fala um pouco sobre os autores do vídeo (nós).

Caso deseje apenas ver o vídeo, possui o link aqui. Para acessar ao site cliquem aqui.

As imagens são printscreens do site.

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.

Divulgação do site comum

Olá! Fica aquí a minha subpágina no site comum, que inclui um tutorial em video sobre as declarações if/else em Javascript. Espero que gostem!

Storyboard

Um storyboard é um guia visual que narra as principais cenas de uma obra audiovisual, sendo, no geral, apresentado por desenhos rápidos e objetivos com poucos detalhes.

É uma técnica indispensável: a criação de uma obra audiovisual deve ser feita partir do respetivo storyboard, previamente elaborado, uma vez que este ajuda a organizar e a planear o filme, permitindo ao autor experimentar diferentes enredos e partilhar e visualizar a sua ideia. No storyboard, além de se definir a ação da obra, definem-se também outras características importantes como planos de filmagem e modos de filmagem das várias cenas do filme.

Storyboard No Country For Old Men

Storyboard  Star Wars

Planos de Filmagem

O plano cinematográfico diz respeito à proporção em que as personagens ou objetos que estão a ser filmados são enquadrados. O tipo de planos escolhidos para a filmagem de uma dada cena é bastante importante, já que permite enfatizar determinadas características na cena  e ressaltar emoções nos espetadores.

O plano é definido pela distância que é dada entre a câmara e o objeto que está a ser filmado. Entre os vários planos existentes segue-se o exemplo de alguns:

Grande Plano Geral (GPG) : Enquadra uma ambiente ou espaço

Plano Geral (PG): Enquadra uma personagem num determinado ambiente ou espaço

Plano Conjunto (PC): Enquadra um grupo de personagens

Plano Americano (PA): Enquadra as personagens da cabeça até aos joelhos

Plano Médio (PM): Enquadra as personagens da cabeça até à cintura

Plano Próximo (PM): Enquadra uma personagem da cabeça até ao peito

Grande Plano (GP) ou Close: Enquadra o rosto de uma personagem da cabeça até ao ombros

Plano Muito Grande (MGP) ou Super Close: Foca-se no rosto da personagem

Função alert()

Em Javascript, a função alert é utilizada para transmitir uma mensagem importante ao usuário através de uma caixa de diálogo, a qual apresenta a string definida e um botão de confirmação (OK) para garantir que o usuário leu a mensagem. 

A caixa de diálogo força o usuário a ler a mensagem, não permitindo que aceda ao resto da página enquanto esta não estiver fechada. Por esta razão são bastante utilizadas para o bloqueio das ações do usuário e para a validação de formulários.

A estrutura da função alert é a seguinte:

var alerta = alert("string a ser exibida");

Função prompt()

Em Javascript, a função prompt é utilizada para receber input do usuário: permite a exibição de uma caixa de diálogo com a string definida e fornece um espaço para o usuário escrever uma resposta. A estrutura básica desta caixa de diálogo é:

• Campo de input, no qual o usuário insere algum valor;
• Botão OK;
• Botão Cancelar

Após a caixa de diálogo ser exibida, o usuário só poderá aceder à página depois desta desaparecer, isto é, após inserir um valor ou clicar em "cancelar". Se o usuário clicar em "OK" o que foi digitado no campo de input é convertido em valor, caso o usuário cancele a caixa de diálogo ou não escreva nada no campo de input o valor retornará null. 

A estrutura da função prompt é a seguinte:

var person = prompt("string a ser exibida", "valor de input predefinido");

Operadores de comparação em Javascript

Em Javascript, os operadores de comparação são utilizados para comparar dois valores.







Neste contexto, seguem-se alguns operadores de comparação e os respectivos significados:

• == : retorna verdadeiro se os operandos são iguais, mesmo não sendo do mesmo tipo;

• != : retorna verdadeiro se os operandos não são iguais, mesmo não sendo do mesmo tipo;

• === : retorna verdadeiro se os operandos são iguais e do mesmo tipo;

• !== : retorna verdadeiro se os operandos não são iguais ou não são do mesmo tipo;

• > :  significa maior que;

• >= :  significa maior ou igual a;

• < :  significa menor que;

• <= :  significa menor ou igual a;

Operadores lógicos em Javascript

Em Javascript, os operadores lógicos combinam duas expressões boleanas, formando uma cujo valor será verdadeiro ou falso. Neste sentido, seguem-se alguns do operadores lógicos mais utilizados, bem como o seu significado:

• &&: o e lógico retorna verdadeiro se ambas as expressões são verdadeiras;

• || : o ou lógico retorna verdadeiro se pelo menos uma das expressões é verdadeira;

• ! : o não lógico retorna verdadeiro se a expressão for falsa; 

Alguns erros comuns em Javascript

Ao programar em Javascript facilmente o programa simplesmente não funciona, para de funcionar de repente, ou apresenta um comportamento inesperado devido a erros no código. 

Neste sentido, seguem-se alguns dos erros que mais frequentemente surgem ao programar em Javascript:

• Programas em JavaScript podem gerar resultados inesperados se um programador usar acidentalmente um operador de atribuição (=) , em vez de um operador de comparação (==) numa instrução if.

Ex:

var x = 0;

if (x == 10)

A expressão boelana é falsa, já que 10 ≠ 0

var x = 0;

if (x = 10)

A expressão boleana é verdadeira, visto que se atribui o valor 10 à variável x 

• Apesar de ambos serem operadores de comparação, o operador igual (==) e o operador estritamente igual (===) são ligeiramente diferentes, sendo que para o último o tipo de dados a ser comparado é relevante.

Ex:

var x = 10;
var y = "10";
if (x == y)

A expressão boelana é verdadeira, já que é irrelevante o valor de y ser uma cadeia de caracteres

var x = 10;
var y = "10";
if (x === y)

A expressão boleana é falsa, porque numa comparação estrita o facto do valor de x ser númerico e de y, uma cadeia de caracteres é relevante

• A confusão entre a adição de valores numéricos e a concatenação, isto é, a adição de cadeias de caracteres, também é frequente.

Ex:

var x = 10;
var y = 5;
var z = x + y; // O valor de z é 15

var x = 10;
var y = "5";
var z = x + y; // O valor de z é "105"

Inserir comentários em Javascript

Um comentário é uma parte do código que não é interpretada pelo navegador, sendo frequentemente utilizado para escrever textos que ajudam a identificar o que representa o um dado bloco de código. Pensando num trabalho em equipa, esta é uma excelente prática.

– Para fazer um comentário com uma linha de código utiliza-se a dupla barra, //:

<script>

  // window.alert("Este alerta não será mostrado");

</script>

– Para comentar várias linhas, deve-se iniciar o texto com /* e terminar com */.

<script>

  /* Exemplo de comentário para
  várias linhas.

  Basta escolher o início e fim. */

</script>

Javascript: loop for

O loop for é uma ferramenta bastante útil quando se pretende executar um determinado bloco de código várias vezes em Javascript. A sua sintaxe é a seguinte.

for (declaração 1; declaração 2; declaração 3) {
bloco de código a ser executado
}

• A declaração 1 é executada uma vez antes do loop começar. Normalmente é utilizada para declarar a variável usada no loop. 

• A declaração 2 define uma condição. Se o valor desta expressão boleana for true a declaração 3 é executada e o loop continua. Caso o valor seja false o loop é encerrado.

• A declaração 3 corresponde ao incremento ( positivo ou negativo ), sendo executada no final de cada passagem através do loop.

Breve história do CSS

Com a evolução dos recursos de programação, as páginas da internet adotavam cada vez mais estilos e variações, a fim de se tornarem mais elegantes e atrativas para os usuários. Neste contexto, foram criadas novas tags e atributos de estilo para o HTML, de tal modo que esta linguagem passou a exercer tanto a função de estruturar o conteúdo de uma página quanto de apresentá-lo ao usuário final. 

Contudo, esta abordagem trazia vários problemas para os web designers: não havia uma forma de definir, por exemplo, um padrão para todos os cabeçalhos ou conteúdos em diversas páginas, ou seja, todas as alterações teriam que ser feitas manualmente, uma a uma.

A partir destas complicações, nasceu o CSS. Foi proposto pela primeira vez, em 1994, por Hakon Lie, e, em 1995, foi desenvolvido pelo W3C ( World Wide Web Consortium ).

Com a criação do CSS foi possível a separação do conteúdo e formato de um documento da sua apresentação. Isto proporcionou uma maior flexibilidade e controlo na especificação das características de um site, permitiu o compartilhamento de formato e reduziu a repetição no conteúdo estrutural de uma página.

As linguagens de marcação passaram novamente a exercer sua função de marcar e estruturar o conteúdo de uma página,  enquanto o CSS encarregou-se da aplicação dos estilos necessários para a aparência dela, por meio da criação de um arquivo externo que permite alterações de estilo em todas as páginas de um site de forma fácil e rápida.

Javascript: loop while

Em Javascript, a declaração while especifica a execução cíclica de um dado bloco de código enquanto o teste condicional for verdadeiro.

while (condição) {
código de bloco a ser executado;
}

Exemplo:

var n = 0; 

var x = 0; 

while (n < 2) { 

n++; 

x += n; 

}

x e n assumem os seguintes valores:

1. Depois da primeira passagem: n = 1 e x = 1
2. Depois da segunda passagem: n = 2 e x = 3

A declaração do / while é uma variante da declaração while: permite executar um determinado bloco de código antes de verificar se a condição é verdadeira, repetindo-se posteriormente o mesmo código, até a condição ser falsa.

do  {
código de bloco a ser executado;
}
while (condição);

Javascript: declaração if/else

Em Javascript, as declarações if / else são utilizadas para tomar decisões, uma vez que executam um determinado bloco de código apenas se a condição especificada for verdadeira.

Existem 3 tipos de declarações condicionais:

• if, o qual é utilizado para especificar a execução de um bloco de código, se o teste condicional for verdadeiro;

if (condição) {
bloco de código a ser executado se a condição for verdadeira;
}


• else if, que especifica uma nova condição a testar, caso a condição anterior tenha sido falsa;

if (condição1) {

           bloco de código a ser executado se a condição1 for verdadeira;
           } 
         else if (condição2) {
           bloco de código a ser executado se a condição1 for falsa e a condição2 verdadeira;
           } 

• else, o qual determina a execução de dado bloco de código, caso as condições das declarações anteriores sejam falsas.

         if (condição1) {
           bloco de código a ser executado se a condição1 for verdadeira;
           } 

         else if (condição2) {
           bloco de código a ser executado se a condição1 for falsa e a condição2 verdadeira;
           } 

         else { 

           bloco de código a ser executado se a condição1 e a condição2 forem falsas;
           }

 

Javascript: valores primitivos

No Javascript as variáveis podem armazenar três tipos de valores primitivos ou primários diferentes: valores boleanos, cadeias de caracteres e valores numéricos.

As cadeias de caracteres são usadas para representar texto em Javascript e devem ser sempre delimitadas por aspas duplas ( " ) ou simples ( ' ).

ex. var nome = "Sofia";

O JavaScript fornece sequências de escape para incluir em cadeias de caracteres caracteres especiais que não podem ser digitados diretamente.

Algumas das mais frequentemente utilizadas são:

ex. var nome = "Intitularam-nos de \"Vikings do Norte\"";

Os valores numéricos não são delimitados por aspas.

ex. var preço = 12;
    var preço = 3.99;

Os valores boleanos também não são delimitados por aspas e só podem assumir dois valores: true ou false.

ex. var x = true;

Nomear variáveis em Javascript

Em Javascript, nem todos os nomes definidos para uma variável são válidos. Para nomear uma variável devem-se seguir algumas regras:

• O primeiro caracter deve ser uma letra, o símbolo do dolar ($) ou um underscore (_), não sendo permitida a utilização de números como primeiro caracter;

            ex. var _idade ; 

• Os caracteres que se seguem ao primeiro podem ser letras, símbolos do dolar ($), underscores (_) ou números, não podendo ser utilizados operadores matemáticos ou lógicos;

• A capitalização é tida em conta pelo Javascript.

            ex. As variáveis preçoTotal  e  preçototal são diferentes

• Nomes de variáveis não podem conter espaços. Assim, para nomear uma variável com múltiplas palavras deve ser utilizada a capitalização em camelo;

            ex. Para nomear a variável Preço Total deve-se escrever : var preçoTotal ; 

• Não se devem utilizar palavras reservadas que o Javascript usa para os seus próprios propósitos, como var, if, function, while, entre outras;

Algumas palavras reservadas no Javascript

Como adicionar Javascript a um documento HTML

Para adicionar JavaScript a uma página deve ser utilizada a tag <script>, podendo fazer-se essa inserção de duas formas:

1. Inserindo códigos no próprio documento HTML (inline):

Utiliza-se a tag <script>, com o valor do atributo type = "text/javascript", escrevendo-se o código JavaScript dentro dessa tag.

Exemplo:

<script type="text/javascript"> 

alert('Olá mundo!');
</script>

2. Relacionando um arquivo externo no documento HTML:

Utiliza-se a tag <script>, com o valor do atributo type = "text/javascript",  preenchendo o atributo src da tag com o caminho para o arquivo em questão.

Exemplo:

<script type="text/javascript" src="js/meu-arquivo.js"></script>

Javascript: variáveis

Variável é um dos conceitos mais importantes no estudo de programação, independente da plataforma ou linguagem utilizada. Uma variável referencia um dado espaço na memória do computador utilizado para guardar informações que serão usadas em programas. Basicamente, as variáveis armazenam valores.

Em Javascript, para fazer a declaração de uma variável utiliza-se a palavra reservada var, seguida do nome da variável e, opcionalmente, atribui-se um valor à variável, adicionando o operador de atribuição  =, seguido do valor. A declaração deve terminar sempre com um ponto e vírgula ( ; ).

1. <script type="text/javascript"> 
2. var nome = "Gabriel Mendonça"; 
3. var idade = 25; 
4. </script>

Para facilitar a compreensão do código, deve-se sempre escolher um nome que identifique o tipo de dado a ser armazenado, devendo-se evitar começar o nome da variável com números ou utilizar termos que constituem palavras reservadas que o Javascript utiliza para os seus próprios propósitos, como var, function, if, entre outros.

.zip

O formato zip  foi criado em 1989 por Phil Katz, fundador da empresa PKWARE, e é um formato de arquivo usado para compactação de dados armazenados num computador. 

O objetivo da compactação é reduzir o tamanho de um arquivo (em alguns KB ou até MB), permitindo downloads mais rápidos e maior capacidade de armazenamento,  mas também agrupar vários arquivos num só, facilitando o transporte de ficheiros. Assim, é possível fazer a compressão de arquivos de áudio, vídeo e imagens,  os quais, após a compactação, passam a possuir a extensão “.zip”.

Existem muitos softwares que trabalham com este tipo de arquivo, tais como:

7-Zip

WinRAR

WinZip