❖ A linguagem JavaScript possui tipos dinâmicos! ❖ Dependendo do valor atribuído à variável, ela se
adequa ao tipo do valor !
❖ JS suporta ❖ Strings! ❖ Números! ❖ Booleanos ❖ Vetores! ❖ Objetos! ❖ Null
Tipos de dados
var carName = "Volvo XC60"; // Usando aspas duplas var carName = 'Volvo XC60'; // Usando aspas simples
var x1 = 34.00; // Escrito com decimais var x2 = 34; // Escrito sem decimais var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
var x = true; var y = false;
var cars = ["Saab", "Volvo", "BMW"];
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; var cars; // Valor é undefined
Funções
❖ Uma função é um bloco de código designado para
realizar uma tarefa!
❖ A função é executada quando é chamada em algum
trecho do código!
❖ O nome de uma função pode conter letras, dígitos,
underscores, e cifrão
functionName(parameter1, parameter2, parameter3) {
code to be executed }
Funções
❖ Uma função será executada quando!
❖ Algum evento acontece (um usuário clica em um
botão)!
❖ Quando é invocada em um código! ❖ Automaticamente
Funções
❖ Retorno!
❖ Quando uma função alcança a declaração return, a
função para de executar!
❖ É possível utilizar o mesmo código várias vezes para
produzir resultados diferentes
var x = myFunction(4, 3);
!
function myFunction(a, b) { return a * b;
Escopo
❖ Em JavaScript, o escopo é o conjunto de variáveis,
objetos e funções que é possível ter acesso!
❖ As funções possuem escopo em JS!
❖ Local - são excluídas quando a função termina! ❖ Global - são excluídas quando se fecha a página! ❖ Automaticamente global
Escopo
// aqui nao eh possivel usar //carName
!
function myFunction() {
var carName = "Volvo"; !
// aqui eh possível
! }
var carName = " Volvo"; !
//aqui eh possível usar carName
!
function myFunction() { !
// aqui tambem eh possível
! }
// aqui eh possivel usar carName
!
function myFunction() { carName = "Volvo"; !
// aqui eh possível usar carName
! }
Eventos
❖ Eventos são ações que ocorrem em elementos HTML! ❖ O JavaScript pode reagir a partir desses eventos!
❖ Um evento HTML pode ser algum uma ação do navegador
ou do usuário!
❖ Exemplos!
❖ Uma página termina de carregar!
❖ Um campo de entrada sofre alguma mudança! ❖ Um botão foi clicado
Eventos
❖ O HTML permite a inserção de atributos tratadores de
eventos utilizando a linguagem JavaScript!
❖ A inserção pode ser feita com aspas simples ou aspas
duplas
<some-HTML-element some-event='some JavaScript'>
<some-HTML-element some-event="some JavaScript">
Eventos
❖ Alguns eventos comuns do HTML
Evento Descrição
onchange (ver exemplo) Um elemento HTML sofreu alteração
onclick O usuário clica em um elemento HTML
onmouseover O usuário move o mouse sobre um elemento HTML onmouseout O usuário retira o mouse do elemento HTML
onkeydown O usuário pressiona um tecla do teclado onload O navegador termina de carregar a página
Strings
❖ Podem ser utilizadas aspas simples ou aspas duplas
para criar uma string!
❖ Pode-se utilizar aspas dentro da string contanto que não
sejam iguais as aspas da própria string!
❖ É possível inserir aspas dentro da string utilizando o
caracter \
var carname = "Volvo XC60";
var carname = 'Volvo XC60';
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
var answer = 'It\'s alright';
Strings
❖ Em JavaScript, as strings possuem métodos e
propriedades, assim como objetos
Propriedade Descrição
length Retorna o tamanho da string
Método Descrição
charAt() Retorna o caractere que está na posição especificada
concat() Joins two or more strings, and returns a copy of the joined strings
Números
❖ JavaScript possui apenas um tipo de número! ❖ Ponto flutuante de 64-bit!
❖ Número de precisão dupla, seguindo o padrão IEEE
754
Valor (Mantissa) Expoente Sinal
Número
❖ Precisão!
❖ Inteiros são considerados precisos até 15 dígitos!
❖ O número máximo de decimais é 17, mas a aritmética
não é 100% precisa!
❖ Existe um artifício para superar esse problema
var x = 999999999999999; // x will be 999999999999999 var y = 9999999999999999; // y will be 10000000000000000 var x = 0.2 + 0.1; // x will be 0.30000000000000004
Números
❖ Para colocar um número em hexadecimal, basta iniciá-
lo com 0x!
❖ Por padrão, JS apresenta os número na base 10!
❖ Para apresentar números em outras bases, basta usar o
método toString() var x = 0xFF; // x will be 255 var myNumber = 128; myNumber.toString(16); // returns 80 myNumber.toString(8); // returns 200 myNumber.toString(2); // returns 10000000
Números
❖ Infinity!
❖ Valor retornado quando um número excede o valor mais
alto possível!
❖ Também com a divisão por zero! ❖ NaN - isNaN!
❖ É uma palavra reservada que indica que um valor não é
um número!
Números
❖ Propriedades dos números
Propriedades Descrição
MAX_VALUE Retorna o maior valor possível em JS MIN_VALUE Retorna o menor valor possível
NEGATIVE_INFINITY Representa o -infinito (retornado em um overflow) NaN Representa um valor "Not-a-Number"
Números
❖ Métodos globais!
❖ Métodos de números
Método Descrição
Number() Retorna um número, convertido pelo seu argumento
parseFloat() Retorna um número em ponto flutuante com base no argumento parseInt() Retorna um inteiro com base no argumento
Método Descrição
toString() Retorna o número como string
toExponential() Retorna uma string de um número na notação exponencial
toFixed() Retorna uma string de um número com uma quantidade especificada de casas decimais
Operadores
❖ Os operadores podem ser ! ❖ Aritméticos!
❖ De atribuição! ❖ De string!
Operadores
❖ Aritméticos
Operator Description Example Result Result
+ Addition x = y + 2 y = 5 x = 7 - Subtraction x = y - 2 y = 5 x = 3 * Multiplication x = y * 2 y = 5 x = 10 / Division x = y / 2 y = 5 x = 2.5 % Modulus (division remainder) x = y % 2 y = 5 x = 1 ++ Increment x = ++y y = 6 x = 6 x = y++ y = 6 x = 5 -- Decrement x = --y y = 4 x = 4 x = y-- y = 4 x = 5
Operadores
❖ Atribuição
Operator Example Same As Result
= x = y x = y x = 5 += x += y x = x + y x = 15 -= x -= y x = x - y x = 5 *= x *= y x = x * y x = 50 /= x /= y x = x / y x = 2 %= x %= y x = x % y x = 0
Operadores
❖ De String!
❖ O operador + é utilizado para concatenar strings! ❖ É possível adicionar strings e números!
❖ O resultado é uma string
txt1 = "What a very"; txt2 = "nice day"; txt3 = txt1 + txt2; x = 5 + 5; y = "5" + 5; z= "Hello" + 5;
Operadores
❖ Bit-a-bit
Operator Description Example Same as Result Decimal
& AND x = 5 & 1 0101 & 0001 1 1
| OR x = 5 | 1 0101 | 0001 101 5
~ NOT x = ~ 5 ~0101 1010 10
^ XOR x = 5 ^ 1 0101 ^ 0001 100 4
<< Left shift x = 5 << 1 0101 << 1 1010 10 >> Right shift x = 5 >> 1 0101 >> 1 10 2
Operadores
❖ Outros operadores!
❖ typeof -> retorna o tipo da variável!
❖ delete -> remover propriedades de objetos!
❖ unário + -> converter uma variável em um número! ❖ Operadores lógicos!