Uma breve introdução a os conceitos de JavaScript

1. JavaScript
Introdução
Matheus Soares
17 de Outubro de 2016
IFCE - Instituto Federal de Educação, Ciência e Tecnologia do Ceará, Campus Crato

2. Índice
1. Introdução
2. Sobre
3. Tipos de Dados
4. Sintaxe e Implementação
5. Concluindo
1

3. Introdução

4. Explicando
JavaScript, por que estudar?
2

5. Explicando
JavaScript, por que estudar?
1 Simples e de fácil execução.
2

6. Explicando
JavaScript, por que estudar?
1 Simples e de fácil execução.
2 JavaScript Everywhere.
2

7. Explicando
JavaScript, por que estudar?
1 Simples e de fácil execução.
2 JavaScript Everywhere.
3 HTML, JavaScript e CSS.
2

8. Extra
JavaScript se encontra nos navegadores, algumas Smart Tv, e algumas
aplicações do OSX e Windows 8 e Windows Phone
3

9. Sobre

10. Informações
Caracteristicas:
4

11. Informações
Caracteristicas:
• Liguagem de Programação Interpretada
4

12. Informações
Caracteristicas:
• Liguagem de Programação Interpretada
• Client-Side
4

13. Informações
Caracteristicas:
• Liguagem de Programação Interpretada
• Client-Side
• Dinamicamente Tipada
4

14. Informações
Caracteristicas:
• Liguagem de Programação Interpretada
• Client-Side
• Dinamicamente Tipada
• Linguagem assíncrona
4

15. Informações
Caracteristicas:
• Liguagem de Programação Interpretada
• Client-Side
• Dinamicamente Tipada
• Linguagem assíncrona
4

16. Informações
Caracteristicas:
• Liguagem de Programação Interpretada
• Client-Side
• Dinamicamente Tipada
• Linguagem assíncrona
4

17. Informações
Caracteristicas:
• Liguagem de Programação Interpretada
• Client-Side
• Dinamicamente Tipada
• Linguagem assíncrona
4

18. Infomações
Um Pouco de Historia:
5

19. Infomações
Um Pouco de Historia:
• SmallTalk, Self, LiveScript...
5

20. Infomações
Um Pouco de Historia:
• SmallTalk, Self, LiveScript...
• Brendam Eich
5

21. Infomações
Um Pouco de Historia:
• SmallTalk, Self, LiveScript...
• Brendam Eich
• Baseada em ECMAScript
5

22. Tipos de Dados

23. Declaração de Variaveis
var
Declara uma variável, global ou local.
let
Declara uma variável de escopo local.
const
Declara uma constante.
6

24. Strings
1 var ola = "Ola Mundo";
2 var ola = 'Ola Mundo ';
String é um conjuto de caracteres, onde cada caractere tem um índice:
1 ola.charAt (1); // "l"
7

25. Strings
1 var ola = "Ola Mundo";
2 var ola = 'Ola Mundo ';
String é um conjuto de caracteres, onde cada caractere tem um índice:
1 ola.charAt (1); // "l"
E são imutáveis
7

26. Strings
1 var ola = "Ola Mundo";
2
3 ola.length; // 9
4 ola.toLowerCase (); // ola mundo
5 ola.toUpperCase (); // OLA MUNDO
6 ola.charAt (0); // a
7 ola.charCodeAt (4); // 97
8 ola.indexOf('l'); // 1
9 ola.concat(", Bom Dia"); //Ola Mundo , Bom dia
10 ola.match("Mundo"); // [ 'Mundo ', index: 4, input:
'Ola Mundo ' ]
11 ola.replace("Mundo", "Pessoas"); //Ola Pessoas
12 ola.split(" "); //[ 'Ola ', 'Mundo ' ]
13 ola.substring (3); // ' Mundo '
14 ola.italics (); // <i>Ola Mundo</i>
8

27. Number
Number é o tipo numérico, como a tradução já diz.
1 var numero = 100;
2
3 numero.toExponential (2); // 1.0e+2
4 numero.toFixed (2); // 100.00
5 numero.toPrecision (1); // i.0e +2
6 numero.toString (); // "100"
7 numero.valueOf (); // 100
Os numérais em JS não há necessidade de especificação .
9

28. Number
So existe apenas um tipo númerico
10

29. Number
So existe apenas um tipo númerico
• IEEE-754
10

30. Number
So existe apenas um tipo númerico
• IEEE-754
• binary64
10

31. Number
So existe apenas um tipo númerico
• IEEE-754
• binary64
• Máximo 1,79769x10308 e de no mínimo 5x10-324
10

32. Number
Api Math
1 var x = 10;
2
3 Math.abs(x); // Retorna o valor absoluto de x
4 Math.cos(x); // Retorna o cosseno , x em radianos
5 Math.sin(x); // Retorna o seno , x em radianos
6 Math.tan(x); // Retorna a tangente do angulo
7 Math.sqrt(x); // Retorna a raiz quadrada de x
8 Math.pow(x, y); // Retorna x elevado a y
9 Math.log(x); // Retorna o logaritmo natural(Base E)
10
11 Math.round (2.7);// Retorna o numero arrendondado , 3
12 Math.floor (10.3); // Retorna o inteiro do numero ,
10
11

33. Number
Algumas Observações
12

34. Number
Algumas Observações
• NaN
12

35. Number
Algumas Observações
• NaN
• Infinity
12

36. Number
Algumas Observações
• NaN
• Infinity
• 0.1 + 0.2
12

37. Boolean
Boolean O tipo boolean é simples, contem apenas o true e false.
1 var valorVerd = true;
2 var valorFals = false;
3
4 valorVerd.toString (); // "true"
5 valorFals.toString (); // "false"
6 valorVerd.valueOf (); // true
7 valorFals.valueOf (); // false
13

38. undefined e null
Undefined é simplismente quando um objeto ainda não tem um valor
definido. Ex.
1 var x;
2
3 x; // undefined
4
5 function alertMsg (){
6 alert(x);
7 }
Atenção
O objeto existe, apenas não há valor associado a ele.
14

39. undefined e null
Null é o valor nulo, isso que dizer a um valor associado mas esse valor é
nulo. Ex.
1 var x = null;
2 x; // null
Atenção
O objeto existe e nesse caso é o valor null associado a ele.
15

40. Sintaxe e Implementação

41. Hoisting
Hoisting é uma caracteristica do JavaScript em que é possível utilizar
uma variável antes mesmo de declarar. Ex.
1 a = 12;
2
3 var a;
16

42. Adicionando ao HTML
Para inserir o JavaScript dentro do HTML existem algumas formas, a
primeira é:
Tag <script>
1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <script type="text/javascript">
6 var x = 5;
7 var y = 3;
8 document.write (x+y);
9 </script>
10 <title></title>
11 </head>
12 <body>
13
14 </body>
15 </html>
17

43. Adicionando ao HTML
Esta forma insere um arquivo externo ao código HTML.
tag <script src>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <script type="text/javascript" src="arquivo.js">
</script>
6 </head>
7 <body>
8
9 </body>
10 </html>
Pode-se Adicionar via link web, apenas mudando o conteudo da src
18

44. Window
Window é um objeto reservado do JavaScript que representa toda tela
mostrada pelo navegador, podemos trabalhar de varias formas.
19

45. Formas de Saida
window.alert é utlizado pra mandar caixas de mensagens ao usuario.
Sintaxe:
1 var msg = "Ola mundo";
2 window.alert(msg);
20

46. Document
Document é um objeto do JavaScript que lhe da a liberdade de navergar
pelo DOM, ou seja todo elemento do HTML é o document, e através
deste objeto podemos manipular os elemento contido neles.
21

47. Formas de Saida
document.write é utlizado escrever diretamente na página. Sintaxe:
1 var x = 5;
2 var y = 3;
3 document.write (x + y);
Atenção
O document.write pode tirar todo o seu conteudo carregado via HTML.
22

48. Formas de Saida
innerHTML é utilizado para modificar um certo conteúdo selecionando
ateriomente do HTML. Ex.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <p id="num"></p>
8 <script>
9 document.getElementById ("num").innerHTML = 3 +
2;
10 </script>
11 </body>
12 </html>
Utiliziando apenas <script> ira reconhecer como JavaScript por padrão.
23

49. Formas de Saida
console.log irá apenas dar a saida em um console, pode ser observado
abrindo o console do navegado(Que tenha suporte JavaScript) ou usando
interpretadores como NodeJS, console.log é utilizando bastante para
verificar o andamento do código JS.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7
8 <script type="text/javascript">
9 console.log("Hello");
10 </script>
11
12 </body>
13 </html> 24

50. Eventos
Eventos são ocorrências que acontecem ao decorrer da visualização de
uma página, varias ações podem acontecer e com isso sucedem outras
ações e isso pode ser chamado de Eventos.
25

51. Eventos
Eventos são ocorrências que acontecem ao decorrer da visualização de
uma página, varias ações podem acontecer e com isso sucedem outras
ações e isso pode ser chamado de Eventos.
• Carregar a página
25

52. Eventos
Eventos são ocorrências que acontecem ao decorrer da visualização de
uma página, varias ações podem acontecer e com isso sucedem outras
ações e isso pode ser chamado de Eventos.
• Carregar a página
• Clicar em um elemento
25

53. Eventos
Eventos são ocorrências que acontecem ao decorrer da visualização de
uma página, varias ações podem acontecer e com isso sucedem outras
ações e isso pode ser chamado de Eventos.
• Carregar a página
• Clicar em um elemento
• Passar o mouse em um elemento
25

54. Eventos
Eventos são ocorrências que acontecem ao decorrer da visualização de
uma página, varias ações podem acontecer e com isso sucedem outras
ações e isso pode ser chamado de Eventos.
• Carregar a página
• Clicar em um elemento
• Passar o mouse em um elemento
• Mudar o valor de um campo.
25

55. Eventos
Eventos são ocorrências que acontecem ao decorrer da visualização de
uma página, varias ações podem acontecer e com isso sucedem outras
ações e isso pode ser chamado de Eventos.
• Carregar a página
• Clicar em um elemento
• Passar o mouse em um elemento
• Mudar o valor de um campo.
• Página terminou de carregar
25

56. Eventos
onClick é utilizado quando quer que seja feito algo quando o usuário
clica em algum ponto determinado. Ex.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <button onclick="window.alert('Ola Mundo ')">
Click</button>
8 </body>
9 </html>
26

57. Eventos
onmouseover é um evento que dispara quando o mouse fica por cima do
objeto.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title Teste></title>
5 </head>
6 <body>
7 <h2 onmouseover=" this.innerHTML= 'ok'" id="h">
8 Coloque o mouse em cima
9 </h2>
10 </body>
11 </html>
27

58. onload é um evento que dispara quando a página é carregada.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <script type="text/javascript">
7 window.onload = function () {
8 alert("OK");
9 }
10 </script>
11 </head>
12 <body onload="alert('OK 2')"">
13 <p> IFCE </p>
14 </body>
15 </html>
28

59. Exercício
1. Considerando os conteúdos apresentados, desenvolva uma página em
que ao carrega seja exibido uma caixa de mensagem: "Ola Mundo".
2. Uma página em que ao clicar em um botão, exiba uma caixa de
mensagem: "Ola Mundo"
29

60. Operadores
Operações Matemáticas
1 x + y;
2 x - y;
3 x * y;
4 x / y;
5 x++;
6 x--;
30

61. Operadores
Atribuição
1 x = y;
2 x += y;
3 x -= y;
4 x /= y;
31

62. Operadores
Comparadores
1 1 == "1"; // verdade
2 1 === "1"; // falso
3 1 != "1"; // falso
4 1 !== "1";// verdade
5 1 > 0; // verdade
6 1 < 0; // falso
7 1 >= 1; // verdade
8 1 <= 1; // verdade
9 ?;
10
11 var x = a ? 2 : 3;
12
13 if(a){
14 x = 2;
15 }else{
16 x = 3
17 } 32

63. Condicionais e Laços
If e else
1 if (a){
2 // Bloco...
3 }else{
4 // Bloco...
5 }
33

64. Condicionais e Laços
If e else if
1 if (a){
2 // Bloco...
3 }else if (b){
4 // Bloco...
5 }...{
6 ...
7 }else{
8 // bloco....
9 }
34

65. Condicionais e Laços
Comparadores Lógicos
E-And
1 (a > 10 && a < 50);
Ou-Or
1 (a = 10 || a = 50);
Not-Negação
1 var x = 1;
2 !(x == 1); // falso
35

66. Condicionais e Laços
While
1 while(// teste){
2 // bloco..
3 }
36

67. Condicionais e Laços
Do While
1 do {
2 // executa uma vez
3 }while(/* teste */){
4 // bloco
5 }
37

68. Questão Rápida
O que sera exibido no seguinte script:
1 if (!!(1 == "1")) {
2 document.write ("Verde");
3 }else{
4 document.write ("Vermelho");
5 }
38

69. Condicionais e Laços
For
1 for (var i = coisas.length - 1; i >= 0; i--) {
2 coisas[i]
3 }
39

70. Condicionais e Laços
For in
1 for (variavel in objeto){
2 // bloco...
3 }
40

71. Condicionais e Laços
For each O laço for each é parecido com o anterior, este no caso, para
cada propriedade do objeto, temos uma declaração distinta.
1 for each(variavel in onjeto){
2 // bloco
3 }
4
5 var sum = 0;
6 var obj = {prop1: 5, prop2: 13, prop3: 8};
7
8 for each (var item in obj) {
9 sum += item;
10 }
11
12 console.log(sum); //26
41

72. Objetos
A criação de objetos em JavaScript é bem simples, pois o js utiliza uma
especie de dinamização de chaves e valores para criar as características de
um objeto.
Por exemplo, para criar um objeto em Js:
1 var pessoa = {
2 nome: "Matheus",
3 idade: 19,
4 telefone: null
5 };
O objeto acima é chamado de Objeto Literal
42

73. Objetos
1 var pessoa = {
2 nome: "Matheus",
3 idade: 19,
4 telefone: null
5 endereco: {
6 rua: "Tal",
7 numero: 400,
8 bairro: "Tal 2"
9 }
10 };
43

74. Funções
Funções são blocos de códigos que podem ser chamados, assim como na
maiorias das liguagens é escrito em uma sintaxe simples:
1 function nome_funcao(para1 , para2) {
2 return para1 + para2;
3 }
O JavaScript tem como principal mecanismo suas funções, por serem
bastantes dinâmicas.
44

75. Funções
Funções com retorno:
1 function nome_funcao(para1 , para2) {
2 return para1 + para2;
3 }
Funções são de primeira classe, ou seja pode ser atribuídas a variáveis e
ser passada como parâmetros.
45

76. Praticando
Mãos na massa!
• Crie um documento html com dois inputs e um paragrafo vázio, crie
um botão que quando clicarmos some os numeros encontrados nos
inputs.
• Obs. Para chamar uma Função de um evento basta invocar, Ex.
•1 <button onClick="funcao ()"> Click </button>
46

77. Funções
47

78. Funções
••1 console.log(teste ());
2
3 function teste (){
4 return 2 + 2;
5 }
47

79. Funções
••1 console.log(teste ());
2
3 function teste (){
4 return 2 + 2;
5 }
1 console.log(teste ());
2
3 var teste = function (){
4 return 2 + 2;
5 }
47

80. Funções
Call e Apply São formas de invocar uma função. Função.apply()
Função.call() A diferença está na maneira de passar argumentos, o apply
recebe argumetos como um Array
48

81. Call e Objetos
Call e Objetos posso usar um Objeto como parâmetro do call para
referenciar o this ao objeto passado:
1 var obj = {a: 4, b: 5};
2
3 var func = function () {
4 return this.a + this.b;
5 }
6
7
8 console.log(func.call(obj));
49

82. Funções
Construindo métodos em objetos, utilizando funções:
50

83. Funções
Construindo métodos em objetos, utilizando funções:
• Já vimos os objetos literais do JS.
50

84. Funções
Construindo métodos em objetos, utilizando funções:
• Já vimos os objetos literais do JS.
• Podemos escrever métodos para estes objetos com funções:
50

85. Funções
Construindo métodos em objetos, utilizando funções:
• Já vimos os objetos literais do JS.
• Podemos escrever métodos para estes objetos com funções:
•1 var album = {
2 ano: 1991,
3 nome: "Black Album",
4 artista: "Metallica",
5 getname: function () {
6 return this.nome;
7 }
8 }
9
10 console.log(album.getname ());
50

86. Funções
Função Construtora, instaciamento por new Quando queremos criar
vários objetos com os mesmo atriutos.
51

87. Funções e Objetos
Podemos criar objetos atráves de funções construtoras:
1 var Album = function(ano , nome , artista){
2 this.ano = ano;
3 this.nome = nome;
4 this.artista = artista;
5 }
6
7 var album_sm = new Album (1999 , "S&M", "Metallica")
;
52

88. Funções e Objetos
Está forma de criação de objeto seria equivalente a:
1 var Album = function(ano , nome , artista){
2 this.ano = ano;
3 this.nome = nome;
4 this.artista = artista;
5 }
6
7 var sem = {};
8
9 Album.call(sem , 1999, "S&M", "Metallica");
10
11 console.log(sem);
53

89. arrays
Arrays é mais um dos objetos reservados do JavaScript, não são como os
array de outras linguagem. No caso do JS nos é fornecido uma serie de
propriedades pra esse objeto para nós dar a capacidade de trabalhar.
1 var arr = []; // Inicializando um Array
2
3 arr [0] = "A";
4 arr [1] = "B";
5
6 var arr = ["A", "B"];
7
8 var arr = new Array ();
9
10 var arr = new Array("A", "B");
11
12 var arr = new Array (5);
54

90. Datas
O objeto Date é utilizado quando se tem o objetivo de se trabalhar com
Datas, "Dias, meses, anos, minutos, segundos..."
55

91. Client-Side
O que é client-side?
Figura 1: Cliente e Servidor
Dessa forma é possível ter uma aplicação de resposta rápida sem
congestionar o servidor, tendo em vista que as validações são realizadas
no lado do cliente.
56

92. Client-Side
O que é client-side?
Figura 1: Cliente e Servidor
Dessa forma é possível ter uma aplicação de resposta rápida sem
congestionar o servidor, tendo em vista que as validações são realizadas
no lado do cliente.
56

93. Concluindo

94. Validando Formulario de Login e Senha
56

95. Perguntas?
56

96. Obrigado!
56

97. References I
57