SlideShare uma empresa Scribd logo
JS - JavaScript.pdf
Objetivos da aula:
■ Fundamentos da
linguagem Javascript
JAVASCRIPT - Aula 01
O que é Javascript?
JavaScript é uma linguagem de programação client-side.
• Ela é utilizada para controlar o HTML e o CSS para manipular
comportamentos na página.
• Mas lembre-se: JavaScript NÃO É Java!
Imagine três camadas básicas no desenvolvimento para Web:
o A informação, que fica no HTML
o A formatação, que fica no CSS
o O comportamento, que fica no JavaScript
Onde eu posso usar javascript na minha página?
<head>
<script>
alert("Javascript no head!");
</script>
<script src="myScript.js"></script>
</head>
<body>
<script>
alert("Javascript no body!");
</script>
</body>
Podemos adicionar Javascript em 3 lugares:
• Escrevendo javascript na tag
<script> no head do HTML.
• Escrevendo javascript na tag
<script> no body do HTML.
• Criando um arquivo externo
com a extensão .js e passando
o caminho do arquivo em um
atributo src da própria tag
<script>
https://www.w3schools.com/js/js_whereto.asp
O que mais eu posso fazer
JavaScript consegue mudar aspectos de uma página em tempo de execução.
No exemplo abaixo, o javascript está captando uma tag e jogando uma
informação dentro dela, para mostrar ao usuário.
<body>
<div id="demo"></div>
<script>
document.getElementById("demo").innerHTML="HelloJavaScript";
</script>
</body>
https://www.w3schools.com/js/js_intro.asp
Exibindo informações:
<p id="demo"></p>
<script>
//1ª Forma – Captando uma tag e escrevendo nela
document.getElementById("demo").innerHTML=5+6;
//2ª Forma – Exibindo um “alerta”
alert(5+6)
//3ª Forma – Escrevendo no console do navegador
console.log(5+6);
</script>
<!-- 4ª Forma - Usando um evento -->
<button type="button"onclick="alert(5 + 6)">Somar</button>
https://www.w3schools.com/js/js_output.asp
Atividade prática: Cartão de visitas
Monte um cartão de visitas online contendo:
– Seu nome.
– Um botão que, quando pressionado, revela sua profissão. (Use qualquer
uma das formas de mostrar texto usadas no slide anterior)
Dica 1: Monte uma página simples em HTML para começar
Dica 2: https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst
Variáveis, números, strings e comentários
//Este é um comentário de uma linha em
Javascript
/* Este é um comentário
de várias linhas em Javascript */
Comentários são úteis para sinalizar algo no seu código que não pode e nem
precisa ser mostrado ao usuário na tela:
https://www.w3schools.com/js/js_comments.asp
Temos três tipos primitivos em Javascript:
• strings - cadeias de caracteres, frases. Sempre são envolvidas por aspas ""
• number – números inteiros ou reais, não precisam de aspas
• booleanos – true ou false, representam apenas valores verdadeiros ou falsos
Variáveis, números, strings e comentários
// Criando variáveis:
var x; let y; const z;
let nome = "John";
let sobrenome = "Doe";
x = 5;
y = 6.5;
z = x + y;
y = 8; //funciona
Z = 12; //erro -> const não permite mudança de valor
let nome = "Josh";
//erro -> let permite mudança de valor, mas não redeclaração
var x = 12; //funciona
Variáveis são uma forma de guardar
informações que podem ser reutilizadas no
código. Para criar uma variável, é necessário
uma palavra reservada que pode ser let,
const ou var (esta última está caindo em
desuso).
• const é uma variável de somente leitura,
não é possível mudar o valor dela após a
criação.
• let é uma variável que permite a
mudança no seu valor posteriormente
• var permite a recriação (ou redeclaração)
da variável posteriormente.
https://www.w3schools.com/js/js_syntax.asp
Regras de identificadores
As regras de identificadores de variáveis para Javascript são semelhantes a outras linguagens de
programação; Deve começar por letra, underscore _ ou cifrão $. Os caracteres seguintes podem ser
letras, dígitos, underscores ou cifrões, mas evite criar nome de variáveis com acentos. Convencionou-se
declarar variáveis constantes (const) utilizando todas as letras maiúsculas (TAXA, FATOR, ALIQUOTA, etc).
Também não é permitido utilizar palavras reservadas como nomes de variáveis. Palavras reservadas são
palavras que servem para designar comandos da linguagem: Exemplo: var, let, function, if, else
var teste;
var _teste;
var $teste;
const TESTE;
https://www.w3schools.com/js/js_syntax.asp
/* Javascript é case sensitive, uma
variável criada com primeira letra maiúscula
é diferente de uma variável com letra
minúscula */
let nome;
let Nome;
//diferentes
Palavras Reservadas (Keywords)
São palavras que não podemos usar para dar nome a variáveis e funções, servem
para designar comandos da linguagem:
Exemplo: var, let, function, if, else
https://www.w3schools.com/js/js_syntax.asp
https://www.w3schools.com/js/js_let.asp
Operadores e expressões
Operadores matemáticos e expressões ( + -* / ):
(5 + 6) * 10 != 5 + 6 * 10
+ -> Operador de soma e de concatenação (junção) de strings
- -> Operador de subtração
* -> Operador de multiplicação
/ -> Operador de divisão
** -> Operador de exponenciação
% -> Operador de módulo (realiza a divisão e retorna o resto dela)
// 10 % 5 retorna o resto 0
https://www.w3schools.com/js/js_arithmetic.asp
Operador de atribuição = (sinal de igual) -> Atribui um valor à alguma variável
let x = 10; // Em x coloque o valor 10
Concatenando strings
let text1 = "John";
let text2 = "Doe";
let text3 = text1 +" "+ text2; // "John Doe"
/* Somando números e letras: cast para string*/
let x = 5 + 5; // 10 -> Número
let y ="5" + 5; // "55" -> Texto
let z ="Oi" + 5; // "Oi5" -> Texto
Operadores de comparação
Operadores de comparação:
== igualdade de valores // 5 == "5" é verdadeiro pois o valor 5 é o mesmo
=== mesmo valor e mesmo tipo // 5 === "5" é falso, pois o valor é o mesmo, mas o tipo não
!= diferente de valores
!== diferente no valor OU diferente no tipo
> maior que
< menor que
>= maior ou igual
<= menor ou igual
? Operador ternário // Veremos em comandos condicionais
https://www.w3schools.com/js/js_operators.asp
Atribuição de valores
Existem atalhos para atribuições corriqueiras, como incrementar ou decrementar o valor de
uma variável.
let x =
x += 5;
10;
//x = x + 5;
x -= 5; //x = x -5;
x *= 5;
x /= 5;
x %= 5;
x++; //x = x + 1; Incremento de 1
x--; //x = x -1; Decremento de 1
let text1 ="Um dia muito";
text1 +=" bonito"; //"Um dia muito bonito"
https://www.w3schools.com/js/js_assignment.asp
Atividade: Somador e subtrator
Crie uma página contendo três botões, que vão incrementar e decrementar o
valor de uma variável:
− O primeiro botão incrementa a variável e mostra no console
– O segundo botão decrementa a variável e mostra no console
– O terceiro botão zera a variável e mostra no console.
Você concluiu a aula 01 do seu módulo de Javascript.
Continue praticando e até a próxima aula!

Mais conteúdo relacionado

Mais procurados

Message Oriented Architecture
Message Oriented ArchitectureMessage Oriented Architecture
Message Oriented Architecture
elliando dias
 
XXE Exposed: SQLi, XSS, XXE and XEE against Web Services
XXE Exposed: SQLi, XSS, XXE and XEE against Web ServicesXXE Exposed: SQLi, XSS, XXE and XEE against Web Services
XXE Exposed: SQLi, XSS, XXE and XEE against Web Services
Abraham Aranguren
 
Unrestricted file upload CWE-434 - Adam Nurudini (ISACA)
Unrestricted file upload CWE-434 -  Adam Nurudini (ISACA)Unrestricted file upload CWE-434 -  Adam Nurudini (ISACA)
Unrestricted file upload CWE-434 - Adam Nurudini (ISACA)
Adam Nurudini
 
OWASP A4 XML External Entities (XXE)
OWASP A4 XML External Entities (XXE)OWASP A4 XML External Entities (XXE)
OWASP A4 XML External Entities (XXE)
Michael Furman
 
Programação orientada a objetos
Programação orientada a objetosProgramação orientada a objetos
Programação orientada a objetos
Cleyton Ferrari
 
this keyword in Java.pptx
this keyword in Java.pptxthis keyword in Java.pptx
this keyword in Java.pptx
ParvizMirzayev2
 
Aula 10 - Cross Site Scripting (XSS)
Aula 10 - Cross Site Scripting (XSS)Aula 10 - Cross Site Scripting (XSS)
Aula 10 - Cross Site Scripting (XSS)
Carlos Henrique Martins da Silva
 
Arrays in PHP
Arrays in PHPArrays in PHP
SQL Injection
SQL InjectionSQL Injection
SQL Injection
Sayed Ahmad Naweed
 
Php Using Arrays
Php Using ArraysPhp Using Arrays
Php Using Arrays
mussawir20
 
Ciberdefensa en el marco de la inteligencia ecuador (19 pp)
Ciberdefensa en el marco de la inteligencia ecuador (19 pp)Ciberdefensa en el marco de la inteligencia ecuador (19 pp)
Ciberdefensa en el marco de la inteligencia ecuador (19 pp)
luis enrique
 
Penetration Testing AWS
Penetration Testing AWSPenetration Testing AWS
Penetration Testing AWS
Sanjeev Kumar Jaiswal
 
Mobile Application Penetration Testing
Mobile Application Penetration TestingMobile Application Penetration Testing
Mobile Application Penetration Testing
BGA Cyber Security
 
SQL Injection Tutorial
SQL Injection TutorialSQL Injection Tutorial
SQL Injection Tutorial
Magno Logan
 
Oops concepts in php
Oops concepts in phpOops concepts in php
Oops concepts in php
CPD INDIA
 
OWASP Mobile Top 10
OWASP Mobile Top 10OWASP Mobile Top 10
OWASP Mobile Top 10
NowSecure
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
Jorge Ávila Miranda
 
Introduction To CodeIgniter
Introduction To CodeIgniterIntroduction To CodeIgniter
Introduction To CodeIgniter
Muhammad Hafiz Hasan
 
Desenvolvimento em Três Camadas com PHP, MVC e Ajax
Desenvolvimento em Três Camadas com PHP, MVC e AjaxDesenvolvimento em Três Camadas com PHP, MVC e Ajax
Desenvolvimento em Três Camadas com PHP, MVC e Ajax
Almir Neto
 
Bbl sur les tests
Bbl sur les testsBbl sur les tests
Bbl sur les tests
Idriss Neumann
 

Mais procurados (20)

Message Oriented Architecture
Message Oriented ArchitectureMessage Oriented Architecture
Message Oriented Architecture
 
XXE Exposed: SQLi, XSS, XXE and XEE against Web Services
XXE Exposed: SQLi, XSS, XXE and XEE against Web ServicesXXE Exposed: SQLi, XSS, XXE and XEE against Web Services
XXE Exposed: SQLi, XSS, XXE and XEE against Web Services
 
Unrestricted file upload CWE-434 - Adam Nurudini (ISACA)
Unrestricted file upload CWE-434 -  Adam Nurudini (ISACA)Unrestricted file upload CWE-434 -  Adam Nurudini (ISACA)
Unrestricted file upload CWE-434 - Adam Nurudini (ISACA)
 
OWASP A4 XML External Entities (XXE)
OWASP A4 XML External Entities (XXE)OWASP A4 XML External Entities (XXE)
OWASP A4 XML External Entities (XXE)
 
Programação orientada a objetos
Programação orientada a objetosProgramação orientada a objetos
Programação orientada a objetos
 
this keyword in Java.pptx
this keyword in Java.pptxthis keyword in Java.pptx
this keyword in Java.pptx
 
Aula 10 - Cross Site Scripting (XSS)
Aula 10 - Cross Site Scripting (XSS)Aula 10 - Cross Site Scripting (XSS)
Aula 10 - Cross Site Scripting (XSS)
 
Arrays in PHP
Arrays in PHPArrays in PHP
Arrays in PHP
 
SQL Injection
SQL InjectionSQL Injection
SQL Injection
 
Php Using Arrays
Php Using ArraysPhp Using Arrays
Php Using Arrays
 
Ciberdefensa en el marco de la inteligencia ecuador (19 pp)
Ciberdefensa en el marco de la inteligencia ecuador (19 pp)Ciberdefensa en el marco de la inteligencia ecuador (19 pp)
Ciberdefensa en el marco de la inteligencia ecuador (19 pp)
 
Penetration Testing AWS
Penetration Testing AWSPenetration Testing AWS
Penetration Testing AWS
 
Mobile Application Penetration Testing
Mobile Application Penetration TestingMobile Application Penetration Testing
Mobile Application Penetration Testing
 
SQL Injection Tutorial
SQL Injection TutorialSQL Injection Tutorial
SQL Injection Tutorial
 
Oops concepts in php
Oops concepts in phpOops concepts in php
Oops concepts in php
 
OWASP Mobile Top 10
OWASP Mobile Top 10OWASP Mobile Top 10
OWASP Mobile Top 10
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
 
Introduction To CodeIgniter
Introduction To CodeIgniterIntroduction To CodeIgniter
Introduction To CodeIgniter
 
Desenvolvimento em Três Camadas com PHP, MVC e Ajax
Desenvolvimento em Três Camadas com PHP, MVC e AjaxDesenvolvimento em Três Camadas com PHP, MVC e Ajax
Desenvolvimento em Três Camadas com PHP, MVC e Ajax
 
Bbl sur les tests
Bbl sur les testsBbl sur les tests
Bbl sur les tests
 

Semelhante a JS - JavaScript.pdf

Java script1
Java script1Java script1
Manual-de-php
Manual-de-phpManual-de-php
Manual-de-php
diogoa21
 
Introdução ao php - Tipos de variáveis
Introdução ao php - Tipos de variáveisIntrodução ao php - Tipos de variáveis
Introdução ao php - Tipos de variáveis
gbpf
 
Aula 03 - Introducao ao PHP (1).pdf
Aula 03 - Introducao ao PHP (1).pdfAula 03 - Introducao ao PHP (1).pdf
Aula 03 - Introducao ao PHP (1).pdf
JOSESOUZA55923
 
tmn - Introdução ao JavaScript
tmn - Introdução ao JavaScripttmn - Introdução ao JavaScript
tmn - Introdução ao JavaScript
Claudio Gamboa
 
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Julio Betta
 
Curso Ruby
Curso RubyCurso Ruby
Curso Ruby
Regis Magalhães
 
Introdução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on RailsIntrodução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on Rails
Julio Betta
 
Minicurso Ruby on Rails Dextra
Minicurso Ruby on Rails DextraMinicurso Ruby on Rails Dextra
Minicurso Ruby on Rails Dextra
Dextra
 
Introdução a php
Introdução a phpIntrodução a php
Introdução a php
Allen Gomes Vidal
 
Estruturas blade-repeticao
Estruturas blade-repeticaoEstruturas blade-repeticao
Estruturas blade-repeticao
Renato Lucena
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQuery
Harlley Oliveira
 
Guia Rápido de Referência Java
Guia Rápido de Referência JavaGuia Rápido de Referência Java
Guia Rápido de Referência Java
Mario Jorge Pereira
 
BOOTSTRAP EXEMPLO DE PAGIAN CRIADA COM O FRAMEWORK
BOOTSTRAP EXEMPLO DE PAGIAN CRIADA COM O FRAMEWORKBOOTSTRAP EXEMPLO DE PAGIAN CRIADA COM O FRAMEWORK
BOOTSTRAP EXEMPLO DE PAGIAN CRIADA COM O FRAMEWORK
ssuser21bc1b
 
Curso java script
Curso java scriptCurso java script
Curso java script
Regisnaldo Alencar
 
PHP
PHPPHP
Minicurso PHP básico
Minicurso PHP básicoMinicurso PHP básico
Minicurso PHP básico
Cezar Souza
 
Curso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como ProgramarCurso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como Programar
Tiago Antônio da Silva
 
Aprendendo PHP.pdf
Aprendendo PHP.pdfAprendendo PHP.pdf
Aprendendo PHP.pdf
ssuserad6350
 
Introdução ao php
Introdução ao phpIntrodução ao php
Introdução ao php
Tiago Davi
 

Semelhante a JS - JavaScript.pdf (20)

Java script1
Java script1Java script1
Java script1
 
Manual-de-php
Manual-de-phpManual-de-php
Manual-de-php
 
Introdução ao php - Tipos de variáveis
Introdução ao php - Tipos de variáveisIntrodução ao php - Tipos de variáveis
Introdução ao php - Tipos de variáveis
 
Aula 03 - Introducao ao PHP (1).pdf
Aula 03 - Introducao ao PHP (1).pdfAula 03 - Introducao ao PHP (1).pdf
Aula 03 - Introducao ao PHP (1).pdf
 
tmn - Introdução ao JavaScript
tmn - Introdução ao JavaScripttmn - Introdução ao JavaScript
tmn - Introdução ao JavaScript
 
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
 
Curso Ruby
Curso RubyCurso Ruby
Curso Ruby
 
Introdução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on RailsIntrodução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on Rails
 
Minicurso Ruby on Rails Dextra
Minicurso Ruby on Rails DextraMinicurso Ruby on Rails Dextra
Minicurso Ruby on Rails Dextra
 
Introdução a php
Introdução a phpIntrodução a php
Introdução a php
 
Estruturas blade-repeticao
Estruturas blade-repeticaoEstruturas blade-repeticao
Estruturas blade-repeticao
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQuery
 
Guia Rápido de Referência Java
Guia Rápido de Referência JavaGuia Rápido de Referência Java
Guia Rápido de Referência Java
 
BOOTSTRAP EXEMPLO DE PAGIAN CRIADA COM O FRAMEWORK
BOOTSTRAP EXEMPLO DE PAGIAN CRIADA COM O FRAMEWORKBOOTSTRAP EXEMPLO DE PAGIAN CRIADA COM O FRAMEWORK
BOOTSTRAP EXEMPLO DE PAGIAN CRIADA COM O FRAMEWORK
 
Curso java script
Curso java scriptCurso java script
Curso java script
 
PHP
PHPPHP
PHP
 
Minicurso PHP básico
Minicurso PHP básicoMinicurso PHP básico
Minicurso PHP básico
 
Curso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como ProgramarCurso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como Programar
 
Aprendendo PHP.pdf
Aprendendo PHP.pdfAprendendo PHP.pdf
Aprendendo PHP.pdf
 
Introdução ao php
Introdução ao phpIntrodução ao php
Introdução ao php
 

JS - JavaScript.pdf

  • 2. Objetivos da aula: ■ Fundamentos da linguagem Javascript JAVASCRIPT - Aula 01
  • 3. O que é Javascript? JavaScript é uma linguagem de programação client-side. • Ela é utilizada para controlar o HTML e o CSS para manipular comportamentos na página. • Mas lembre-se: JavaScript NÃO É Java! Imagine três camadas básicas no desenvolvimento para Web: o A informação, que fica no HTML o A formatação, que fica no CSS o O comportamento, que fica no JavaScript
  • 4. Onde eu posso usar javascript na minha página? <head> <script> alert("Javascript no head!"); </script> <script src="myScript.js"></script> </head> <body> <script> alert("Javascript no body!"); </script> </body> Podemos adicionar Javascript em 3 lugares: • Escrevendo javascript na tag <script> no head do HTML. • Escrevendo javascript na tag <script> no body do HTML. • Criando um arquivo externo com a extensão .js e passando o caminho do arquivo em um atributo src da própria tag <script> https://www.w3schools.com/js/js_whereto.asp
  • 5. O que mais eu posso fazer JavaScript consegue mudar aspectos de uma página em tempo de execução. No exemplo abaixo, o javascript está captando uma tag e jogando uma informação dentro dela, para mostrar ao usuário. <body> <div id="demo"></div> <script> document.getElementById("demo").innerHTML="HelloJavaScript"; </script> </body> https://www.w3schools.com/js/js_intro.asp
  • 6. Exibindo informações: <p id="demo"></p> <script> //1ª Forma – Captando uma tag e escrevendo nela document.getElementById("demo").innerHTML=5+6; //2ª Forma – Exibindo um “alerta” alert(5+6) //3ª Forma – Escrevendo no console do navegador console.log(5+6); </script> <!-- 4ª Forma - Usando um evento --> <button type="button"onclick="alert(5 + 6)">Somar</button> https://www.w3schools.com/js/js_output.asp
  • 7. Atividade prática: Cartão de visitas Monte um cartão de visitas online contendo: – Seu nome. – Um botão que, quando pressionado, revela sua profissão. (Use qualquer uma das formas de mostrar texto usadas no slide anterior) Dica 1: Monte uma página simples em HTML para começar Dica 2: https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst
  • 8. Variáveis, números, strings e comentários //Este é um comentário de uma linha em Javascript /* Este é um comentário de várias linhas em Javascript */ Comentários são úteis para sinalizar algo no seu código que não pode e nem precisa ser mostrado ao usuário na tela: https://www.w3schools.com/js/js_comments.asp Temos três tipos primitivos em Javascript: • strings - cadeias de caracteres, frases. Sempre são envolvidas por aspas "" • number – números inteiros ou reais, não precisam de aspas • booleanos – true ou false, representam apenas valores verdadeiros ou falsos
  • 9. Variáveis, números, strings e comentários // Criando variáveis: var x; let y; const z; let nome = "John"; let sobrenome = "Doe"; x = 5; y = 6.5; z = x + y; y = 8; //funciona Z = 12; //erro -> const não permite mudança de valor let nome = "Josh"; //erro -> let permite mudança de valor, mas não redeclaração var x = 12; //funciona Variáveis são uma forma de guardar informações que podem ser reutilizadas no código. Para criar uma variável, é necessário uma palavra reservada que pode ser let, const ou var (esta última está caindo em desuso). • const é uma variável de somente leitura, não é possível mudar o valor dela após a criação. • let é uma variável que permite a mudança no seu valor posteriormente • var permite a recriação (ou redeclaração) da variável posteriormente. https://www.w3schools.com/js/js_syntax.asp
  • 10. Regras de identificadores As regras de identificadores de variáveis para Javascript são semelhantes a outras linguagens de programação; Deve começar por letra, underscore _ ou cifrão $. Os caracteres seguintes podem ser letras, dígitos, underscores ou cifrões, mas evite criar nome de variáveis com acentos. Convencionou-se declarar variáveis constantes (const) utilizando todas as letras maiúsculas (TAXA, FATOR, ALIQUOTA, etc). Também não é permitido utilizar palavras reservadas como nomes de variáveis. Palavras reservadas são palavras que servem para designar comandos da linguagem: Exemplo: var, let, function, if, else var teste; var _teste; var $teste; const TESTE; https://www.w3schools.com/js/js_syntax.asp /* Javascript é case sensitive, uma variável criada com primeira letra maiúscula é diferente de uma variável com letra minúscula */ let nome; let Nome; //diferentes
  • 11. Palavras Reservadas (Keywords) São palavras que não podemos usar para dar nome a variáveis e funções, servem para designar comandos da linguagem: Exemplo: var, let, function, if, else https://www.w3schools.com/js/js_syntax.asp https://www.w3schools.com/js/js_let.asp
  • 12. Operadores e expressões Operadores matemáticos e expressões ( + -* / ): (5 + 6) * 10 != 5 + 6 * 10 + -> Operador de soma e de concatenação (junção) de strings - -> Operador de subtração * -> Operador de multiplicação / -> Operador de divisão ** -> Operador de exponenciação % -> Operador de módulo (realiza a divisão e retorna o resto dela) // 10 % 5 retorna o resto 0 https://www.w3schools.com/js/js_arithmetic.asp Operador de atribuição = (sinal de igual) -> Atribui um valor à alguma variável let x = 10; // Em x coloque o valor 10
  • 13. Concatenando strings let text1 = "John"; let text2 = "Doe"; let text3 = text1 +" "+ text2; // "John Doe" /* Somando números e letras: cast para string*/ let x = 5 + 5; // 10 -> Número let y ="5" + 5; // "55" -> Texto let z ="Oi" + 5; // "Oi5" -> Texto
  • 14. Operadores de comparação Operadores de comparação: == igualdade de valores // 5 == "5" é verdadeiro pois o valor 5 é o mesmo === mesmo valor e mesmo tipo // 5 === "5" é falso, pois o valor é o mesmo, mas o tipo não != diferente de valores !== diferente no valor OU diferente no tipo > maior que < menor que >= maior ou igual <= menor ou igual ? Operador ternário // Veremos em comandos condicionais https://www.w3schools.com/js/js_operators.asp
  • 15. Atribuição de valores Existem atalhos para atribuições corriqueiras, como incrementar ou decrementar o valor de uma variável. let x = x += 5; 10; //x = x + 5; x -= 5; //x = x -5; x *= 5; x /= 5; x %= 5; x++; //x = x + 1; Incremento de 1 x--; //x = x -1; Decremento de 1 let text1 ="Um dia muito"; text1 +=" bonito"; //"Um dia muito bonito" https://www.w3schools.com/js/js_assignment.asp
  • 16. Atividade: Somador e subtrator Crie uma página contendo três botões, que vão incrementar e decrementar o valor de uma variável: − O primeiro botão incrementa a variável e mostra no console – O segundo botão decrementa a variável e mostra no console – O terceiro botão zera a variável e mostra no console.
  • 17. Você concluiu a aula 01 do seu módulo de Javascript. Continue praticando e até a próxima aula!