Objetivos de aprendizagem
Conhecer a linguagem de programação Javascript Entender a sintaxe básica da linguagem Entender como utilizá-la no lado cliente, junto com HTML
var
ou let
.var
- declara uma variável, opcionalmente, inicializando-a com um valor. Atualmente não é recomendado o uso de var
. Veja abaixo um exemplo de declaração de varável com var
: let
- declara uma variável, opcionalmente, inicializando-a com um valor. O let
foi introduzido na versão 6 do Javascript. Variáveis declaradas com let
possuem escopo mais restrito do que as variáveis declaradas com var
(vamos explicar mais sobre escopo nas próximas seções). Veja abaixo um exemplo de declaração de varável com let
: const
. const
- declara uma constante de escopo de bloco, que deve ser inicializada na declaração e após sua inicialização é utilizada somente para leitura.Veja abaixo um exemplo de declaração de varável com const
: //
para comentários de uma linha e /* */
para comentários de múltiplas linhas. Veja os exemplos abaixo:"
) ou aspas simples ('
). No entanto, é importante destacar que a string deve ser delimitada por aspas do mesmo tipo; ou seja, as duas aspas simples ou ambas aspas duplas. Veja alguns exemplos de strings literais:Boolean
- armazena valores lógicos: true
e false
.null
- palavra-chave que indica valor nulo. undefined
- indefinido, identifica a falta de valor para uma determinada variável é.Number
. - armazena valores numéricos, inteiros e de ponto flutuantes: 42
ou 3.14159
.String
- armazena uma sequência de caracteres: "bob"
Symbol
(novo em ECMAScript 6). Um tipo de dado cuja as instâncias são únicas e imutáveis (pouco utilizado ainda).Object
.Object
- (Objeto) - é um tipo mais dinâmico, que ao desenvolvedor criar atributos e métodos, além de já possuir um conjunto de métodos pré-definidos. Geralmente, cria-se objetos para agrupar valores em uma única referência. Veja um exemplo abaixo da notação literal de um objeto::
, entre chaves, a chave identifica a propriedade do objeto.objeto.propriedade
. Veja o exemplo abaixo:(+)
, subtração (-)
, multiplicação (*)
e divisão (/)
. true ou false
), neste caso, retornam um valor lógico (true ou false
). Veja os operadores lógicos na tabela abaixo:expr1 && expr2
- Retorna true se expr1
e expr2
forem verdadeiras, se pelo menos uma for falsa retorna falseexpr1 && expr2
- Retorna true se expr1
ou expr2
for verdadeira, ou ambas. E retorna false se somente se expr1
e expr2
forem falsas. !true
- Retorna false; !false
- Retorna true.if..else
ou switch
.if
aplicada a uma condição lógica (true ou false) para executar alguma declaração caso a condição lógica seja verdadeira. Use a cláusula opcional else
para executar alguma declaração caso a condição lógica passada para o if
seja falsa. condicao
deve ser uma expressão lógica, que retorna um valor true
ou false
.if...else
simples é suficiente para testar uma condição lógica, mas em alguns casos há a necessidade de testar duas ou mais condições lógicas em sequência, nesse caso, é possível combinar declarações com else if
para testar condições lógicas em sequência. Veja o exemplo abaixo:Em Javascript, alguns valores padrões são avaliados com false, veja abaixo:
false
undefined
null
0
NaN
''
(string vazia)Todos os outros valores, incluindo todos os objetos, são avaliados como verdadeiros quando passados para uma declaração condicional.
switch
é uma declaração de múltipla escolha, similar a uma série de declarações if
na mesma expressão. É recomendado sua utilização para testar um conjunto de condições pré-definidas. switch
permite que um programa avalie uma variável e tente associar o valor da variável ao rótulo de um case
. Se uma correspondência é encontrada (o valor da variável é igual a um dos rótulos case
), o programa executa a declaração associada aquele case. Caso nenhuma correspodência seja encontrada é executada a declaração padrão definida no comando default
. Uma declaração switch
se parece com o seguinte:switch
: recebe a variável(ou expressão) que armazena o valor responsável pelo controle de escolhas.case
: lista todos os possíveis valores esperados para a variável do comando switch;break
: comando que encerra a execução do switch;default
: é executado caso nenhum rótulo seja encontrado, não é obrigatório o uso desse comando (mas recomendo utilizá-lo sempre).for
é repetido até que a condição especificada seja falsa. Uma declaração for
tem a seguinte sintaxe:for
é executado, ocorre os seguintes passos:expressaoInicial
é inicializada e, caso atenda a condição especificada, é executada. condicao
é avaliada. caso o resultado de condicao
seja verdadeiro, o laço é executado. Se o valor de condicao
é falso, então o laço terminará. incremento
deve ser atualizado e retorna o controle para o passo seguinte, onde a condição é novamente verificada (passo 2).for
, veja o código abaixo:let index = 0;
é a expressão inicial, onde é criado uma variável chamada index e atribuído o valor 0 a ela;index < nomes.length;
- é a condição, onde verifica se a variável index é menor do que o tamanho do array nomes;index++;
- é o incremento, ou seja, soma se mais 1 a variável index a cada repetição do laçoindex
é 0, menor do que o tamanho do array de nomes
que é 3, então é executada a instrução dentro do bloco for
: console.log(nomes[index])
, exbindo o primeiro nome no console "Jesiel", ao final da repetição é incrementado 1 à variável index
;nomes
que é 3, então é executada a instrução dentro do bloco for
: console.log(nomes[index])
, exbindo o segundo nome no console "Viana", ao final da repetição é incrementado 1 à variável index
;nomes
que é 3, então é executada a instrução dentro do bloco for
: console.log(nomes[index])
, exbindo o terceiro nome no console "Jesiel", ao final da repetição é incrementado 1 à variável index
;index
é 3 que é igual ao tamanho do array de nomes
que também é 3, nesse caso a condição do for
é considerada falsa e o laço for é encerrado.while
executa suas instruções, desde que uma condição especificada seja avaliada como verdadeira. Segue uma declaração while
: while
, porque uma vez que a condição seja verdeira e se ela nunca for modificada dentro do bloco while
, o laço entrarar num ciclo de repetição infinita.function
- palavra reservada para iniciar uma função (obrigatório);nomeDaFuncao
- nome da função, sempre deve vir acompanhado de parênteses (obrigatório);parametros
- variáveis que serão usadas dentro da função (opcional);{}
- chaves definem o escopo da função (obrigatório);instruções
- declarações que serão executados dentro da função (obrigatório);return valor
- valor devolvido para o invocador da função o resultado da execução desta (opcional).raizQuadradaDe
recebe um numero
com parâmetro (entre parênteses) e retorna a raiz quadrada desse número.exibeNoConsole
recebe um valor
como como parâmetro e imprime esse valor no console. Esta função não tem retorno.if, for, while
), ela é chamada de variável local, pois ela está disponível somente dentro desse bloco ou função. O escopo de bloco e funções no Javascript é definido por um par de chaves. Veja exemplos abaixo:x
- variável global, visível em qualquer parte do arquivo Javascript em que ela está declarada, ou seja, pode ser acessada dentro do bloco if
, dentro da função executa
, etc.y
- variável de escopo de bloco, só pode ser acessada dentro do bloco if
onde ela foi declarada, a delimitação do escopo do bloco é baseada nas chaves (linhas 3 e 5 do exemplo acima)z
- variável de escopo local, só pode ser acessada dentro da função (executa
) onde ela foi declarada, a delimitação do escopo da função é baseada nas chaves (linhas 7 e 9 do exemplo acima)JavaScript antes do ECMAScript 6 (2015) não possuía escopo de declaração de bloco; pelo contrário, uma variável declarada dentro de um bloco de uma função era uma variável local e quando declarada dentro de um bloco global era uma variável global.
let
para criação de variáveis.let
permite que você declare variáveis limitando seu escopo no bloco, instrução, ou em uma expressão na qual ela é usada. Isso é inverso da palavra chave var
, que define uma variável globalmente ou no escopo inteiro de uma função, independentemente do escopo de bloco. Veja o exemplo abaixo para enteder melhor as diferenças de escopo entre let e var.var a
- definie uma variável com escopo global dentro de um bloco iflet b
- definie uma variável com escopo de bloco dentro de um bloco ifUmas das principais utilidades do Javascrip no lado cliente é a manipulação de elementos HTML, se quiser aprender como manipular elementos HTML e deixar sua página Web dinâmica e interativa veja o vídeo abaixo: