Javascript

Aula 02
PROF. GUSTAVO LINHARES
OBJETIVOS

 Aprender a sintaxe básica da linguagem;

Sintaxe do JavaScript

 A sintaxe do JavaScript é o conjunto de regras, como os programas

de JavaScript são construídos:

var x, y, z; // How to declare variables

x = 5; y = 6; // How to assign values
z = x + y; // How to compute values
Variáveis de JavaScript

 Em uma linguagem de programação, as variáveis são usadas para

armazenar valores de dados.

 JavaScript usa a palavra-chave var para declarar variáveis.

 Um sinal de igual é usado para atribuir valores a variáveis.
 Neste exemplo, x é definido como uma variável. Então, x é
atribuído (dado) o valor 6:
var x;
x = 6;
Declarando (Criando) Variáveis de
JavaScript
 Criar uma variável em JavaScript é chamado de "declarar" uma
variável.
 Você declara uma variável de JavaScript com a palavra-chave
var :
var carName;
 Após a declaração, a variável não tem valor. (Tecnicamente tem o
valor de indefinido )
 Para atribuir um valor à variável, use o sinal de igual:
carName = "Volvo";
Declarando (Criando) Variáveis de
JavaScript
 Você também pode atribuir um valor à variável quando declara:
 var carName = "Volvo";

Uma declaração, muitas variáveis

 Você pode declarar várias variáveis em uma declaração.

 Comece a declaração com var e separe as variáveis por vírgula :

Exemplo:
var person = "John Doe", carName = "Volvo", price = 200;
Operadores de JavaScript

 O JavaScript usa operadores aritméticos (+ - * /) para calcular

valores:
(5 + 6) * 10

 O JavaScript usa um operador de atribuição (=) para atribuir

valores às variáveis:
var x, y;
x = 5;
y = 6;
Operadores Aritméticos

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement
Operadores de atribuição

Operator Example Same As

= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y

Exemplo
Operadores de String

 O operador + também pode ser usado para adicionar

(concatenar) strings.
Exemplo:
txt1 = "John";
txt2 = "Doe";
txt3 = txt1 + " " + txt2; //John Doe
Adicionando strings e números

 Adicionando dois números, retornará a soma, mas adicionando um

número e uma string retornará uma string:
Exemplo:

x = 5 + 5;
y = "5" + 5;
z = "Hello" + 5;

Resultado:
10
55
Hello5
Operadores de comparação

Operator Description

== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
Operadores lógicos

Operator Description
&& logical and
|| logical or
! logical not
Expressões de JavaScript

 Uma expressão é uma combinação de valores, variáveis e

operadores, que calcula para um valor.

 Por exemplo, 5 * 10 avalia para 50:

 Os valores podem ser de vários tipos, como números e strings.

 Por exemplo, "John" + “ ” + "Doe" resultado "John Doe":

Comentários de JavaScript

 Nem todas as declarações de JavaScript são "executadas".

 Código após barras duplas // ou entre / * e * / é tratado como um
comentário .
 Os comentários são ignorados e não serão executados:
Exemplo:
var x = 5; // I will be executed

// var x = 6; I will NOT be executed

Comentários de linha única

 Os comentários de linha única começam com //.

 Qualquer texto entre // e o fim da linha será ignorado pelo

JavaScript (não será executado).
 Este exemplo usa um comentário de linha única antes de cada
linha de código:
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
Comentários de linha única

 Este exemplo usa um comentário de linha única no final de cada

linha para explicar o código:

 var x = 5; // Declare x, give it the value of 5

 var y = x + 2; // Declare y, give it the value of x + 2
Comentários de várias linhas

 Comentários de várias linhas começam com / * e terminam com *

/.

 Qualquer texto entre / * e * / será ignorado pelo JavaScript.

 Este exemplo usa um comentário de várias linhas (um bloco de

comentários) para explicar o código:
Comentários de várias linhas

/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
JavaScript é Case Sensitive

 Todos os identificadores JavaScript são maiúsculas de minúsculas .

 As variáveis lastName e lastname são duas variáveis diferentes.

var lastname, lastName;

lastName = "Doe";
lastname = "Peterson";
O Operador de Atribuição

 Em JavaScript, o sinal de igual (=) é um operador de "atribuição",

não um operador "igual a".

 Isso é diferente da álgebra. O seguinte não faz sentido na álgebra:

 x=x+5
Tipos de dados JavaScript

 As variáveis de JavaScript podem conter números como 100 e

valores de texto como "John Doe".
 Na programação, os valores de texto são chamados de strings de
texto.
 O JavaScript pode lidar com muitos tipos de dados, mas, por
enquanto, apenas pense em números e strings.
 As strings são escritas dentro de aspas duplas ou simples. Os
números estão escritos sem aspas.
 Se você colocar um número entre aspas, ele será tratado como
uma string.
Tipos de dados

 As variáveis de JavaScript podem conter muitos tipos de dados :

números, strings, objetos e muito mais:
Tipo String

 Uma string (ou uma string de texto) é uma série de caracteres

como "John Doe".

 As strings são escritas com aspas. Você pode usar aspas simples ou
duplas:
Exemplo:
var carName = "Volvo XC60"; // Using double quotes
var carName = 'Volvo XC60'; // Using single quotes
Tipo número

 O JavaScript tem apenas um tipo de números.

 Os números podem ser escritos com, ou sem decimais:

Exemplo:
var x1 = 34.00; // Written with decimals
var x2 = 34; // Written without decimals
Os números extra grandes ou extra pequenos podem ser escritos com
notação científica (exponencial):
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
Tipo Boleano

 Os booleanos só podem ter dois valores: verdadeiro ou falso.

Exemplo:
var x = 5;
var y = 5;
var z = 6;
(x == y) // Returns true
(x == z) // Returns false
Tipo Array

 As matrizes de JavaScript são escritas com colchetes.

 Os itens da matriz são separados por vírgulas.
 O código a seguir declara (cria) uma matriz chamada carros,
contendo três itens (nomes do carro):
Exemplo:
var cars = ["Saab", "Volvo", "BMW"];
Os índices de matrizes são baseados em zero, o que significa que o
primeiro item é [0], o segundo é [1], e assim por diante.
Tipo Objeto

 Objetos de JavaScript são escritos com chaves.

 As propriedades dos objetos são escritas como pares nome: valor,

separados por vírgulas.
Exemplo:
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
O objeto (pessoa) no exemplo acima possui 4 propriedades:
firstName, lastName, age e eyeColor.
O operador typeof

 Você pode usar o mecanismo typeof do JavaScript para encontrar

o tipo de uma variável JavaScript.
 O operador typeof retorna o tipo de uma variável ou uma
expressão:
Exemplo:
typeof "" // Returns "string"
typeof "John" // Returns "string"
typeof "John Doe" // Returns "string“
typeof 0 // Returns "number"
typeof 314 // Returns "number"
typeof 3.14 // Returns "number"
Próxima aula

 Tipo Array
Exercícios 01

1. Crie uma variável chamada carName , atribua o valor " Volvo " e
mostre-a.
2. Crie uma variável chamada de número , atribua o valor 50 a ele e
visualize-o.
3. Exibir a soma de 5 + 10, usando duas variáveis x e y.
4. Crie uma terceira variável chamada z , atribua x + y a ela e
mostre-a.
5. Use uma única palavra-chave var para criar três variáveis com os
seguintes valores: firstName = "John" , lastName ="Doe", idade= 35
Exercício 02

 Exercício 01
 Exercício 02
 Exercício 03
 Exercício 04
 Exercício 05