JS4Girls 1 - Ribeirão Preto (2015)

Transcript

2. Caio Tarifa CEO @ Formaweb
 
 
 
 caio@yahoo.com
3. Ferramenta http://jsbin.com/?console
4. Introdução à Estrutura de Dados O que é um dado?
5. Nulo
 null Representa um objeto existente, mas que possui valor nulo ou vazio. var a = null;
6. Indefinido
 undefined Representa um objeto inexistente, portanto, sem valor definido. var b;
7. Número Inteiro
 integer Números inteiros são aqueles que podem ser escritos sem a necessidade de serem fracionados. var c = 0;
 var d = 171;
 var e = -500000;
8. Número Fracionado
 float Já estes são fracionados, ou seja, possuem casas decimais, como os valores monetários. var f = 0.0;
 var g = 29.0123456789;
 var h = -98765432.1;
9. Texto
 string E por que não armazenar palavras? Através do conceito de cadeia de caracteres, isso é possível. var name = "Caio";
 typeof name;
 
 name = name + " ";
 name += "Tarifa"; O conceito de unir dois textos é chamado de concatenação e se dá pela utilização do operador +.
10. Caracter
 char O JavaScript não possui o tipo caracter, nem por isso uma cadeia de caracteres deixa de ser formada por caracteres. var name = "Caio Tarifa";
 
 name.charAt(1);
 name[1];
 
 name.length;
11. Booleano
 bool Verdadeiro ou falso? 1 ou 0? Ying & Yang. O tipo booleano serve para representar estados binários. var foo = true;
 var bar = false;
 
 !foo;
 !1;
12. Matriz
 array Matriz é uma estrutura formada por linhas e colunas, sempre seguindo esta sequência. var fruits = ["uva", "maça", "tomate"];
 var people = [["Caio", 23 + 1], ["Ivan", 32]];
 
 fruits.length;
 fruits[1];
 fruits.forEach(function(fruit) {
 console.log(fruit);
 });
 
 people.length;
 people[2];
 people[0][1];
13. Exercícios • Só compensa abastecer com álcool se o valor for até 70% da gasolina. Sendo assim, divida o valor do álcool (R$ 2,79) pela gasolina (R$ 3,79). Observe o resultado decimal. Maior que 0,7 compensa a gasolina, caso contrário, o álcool. • Escreva um código que possua o nome e a idade de cinco amigos, depois faça mostrar a mensagem "Meu amigo " + name + " tem " + age + " anos".
14. Introdução à Lógica Solucionando problemas com sequências lógicas.
15. WTF? Técnica para desenvolver uma sequência de ações para atingir um objetivo. Os padrões destas sequências são adaptadas para cada linguagem de programação, a fim de produzir um sistema. Essa sequência lógica é denominada algoritmo.
16. Como trocar um pneu? 1. Afrouxar ligeiramente as porcas. 2. Suspender o carro com o macaco. 3. Retirar as porcas. 4. Remover o pneu furado. 5. Colocar o pneu reserva. 6. Apertar as porcas. 7. Abaixar o carro. 8. Dar o aperto final nas porcas.
17. Como fazer um bolo? 1. Bata as claras em neve. 2. Reserve. 3. Bata bem as gemas com a margarina e o açúcar. 4. Acrescente o leite e farinha aos poucos sem parar de bater. 5. Por último, agregue as claras em neve o fermento. 6. Coloque em forma grande de furo central untada e enfarinhada. 7. Asse em forno médio, preaquecido, por 40 minutos. 8. Quando espetar um palito e sair limpo, estará assado.
18. Como consumir uma bala? 1. Pegar a bala. 2. Retirar o papel. 3. Chupar a bala. 4. Jogar o papel no lixo.
19. Exercício Crie um algoritmo para tomar um banho, no mínimo 4 e, no máximo, 10 passos.
20. Portugol Portugol é uma linguagem acadêmica para a representação de um algoritmo. Veja, no exemplo abaixo, um exemplo para conferir a maioridade. inicio
 escreva("Qual a sua idade?")
 leia(idade)
 se idade >= 18 então
 escreva("Maior de idade.")
 senão
 escreva("Menor de idade")
 fimse
 fim
21. Instruções Uma instrução é a informação que indica a um computador uma ação elementar a executar, convém ressaltar que uma ordem (ou instrução) isolada não permite realizar o processo completo, para isso é necessário um conjunto de instruções colocadas em ordem sequencial lógica. A instrução mais simples que temos no JavaScript é uma atribuição de valor. var evento = "JS4Girls"; Por que nomeamos uma variável?
 Para que possamos utilizar e/ou modificar seu valor em outras partes do programa.
22. Booleano Antes de continuar, precisamos nos aprofundar um pouco mais no tipo criado por George Boole. Esta lógica algébrica é simples de entender pois possui apenas dois valores: • Verdadeiro | True | 1 • Falso | False | 0
23. O Ivan tem 30 anos. O que você abstrai de verdadeiro nessa afirmação? Exatamente o que vimos no algoritmo de Portugol, neste caso, que o Ivan é maior de idade.
24. Caro GPS, onde eu estou? Suponhamos que eu precise ir para a Av. 9 de Julho e pergunto para o GPS onde estou e ele responde: • Av. Francisco Junqueira Nesse caso nossa abstração resulta em… FALSO! local = leiaGPS()
 se local <> "Av. Francisco Junqueira"
 retorne falso
 senão
 retorne verdadeiro Entendeu? No caso o símbolo <> é utilizado como diferente.
25. Caro GPS, onde eu estou? Suponhamos que eu precise ir para a Av. 9 de Julho e pergunto para o GPS onde estou e ele responde: • Av. Francisco Junqueira Nesse caso nossa abstração resulta em… FALSO! local = leiaGPS()
 se local <> "Av. Francisco Junqueira"
 retorne falso
 senão
 retorne verdadeiro Entendeu? No caso o símbolo <> é utilizado como diferente.
26. E
 and O E é um operador lógico que irá testar duas premissas na qual o retorno só será verdadeiro se todas as proposições forem verdadeiras. Exemplo:
 O Caio é palmeirense E o Caio é homem. Outro exemplo:
 vou_ao_cinema = (estou_de_folga E tenho_dinheiro) Combinações:
 FALSE AND FALSE = FALSE
 FALSE AND TRUE = FALSE
 TRUE AND FALSE = FALSE
 TRUE AND TRUE = TRUE
27. OU
 or O OU é um operador lógico que irá testar duas premissas na qual o retorno só será verdadeiro se pelo menos uma proposição for verdadeira. Exemplo:
 O Caio é contador OU o Caio é homem. Outro exemplo:
 saio_de_casa = (tenho_dinheiro OR amigos_tem_dinheiro)
 vou_para_praia = (tenho_carro OR tenho_carona OR (tenho_dinheiro AND tem_onibus))
28. NEGUE
 not A operação de negação é exatamente o que você acha que ela faz, ela nega aquele valor e fazendo isso então ela o inverte. Exemplo:
 ~ O Caio é contador.
 Ou seja:
 O Caio não é contador. tomar_banho = ((NOT frio) AND agua)
29. Exercício Monte uma operação lógica OU com três premissas onde uma delas é falsa, uma é verdadeira e a outra pode ser qualquer valor utilizando o NOT. Aplique os valores lógicos em cada proposição para mostrar o seu resultado.
30. SE
 if O if é a operação que irá testar nossos valores, como vimos anteriormente na parte do algoritmo. Agora vamos aprender a utilizá-la em conjunto com nossos valores booleanos. if (proposições) {
 …
 } var idadeIvan = 30;
 if (idadeIvan >= 18) {
 console.log("Maior de idade.");
 }
31. SENÃO
 else Se o if não for verdadeiro. var idadeIvan = 30;
 
 if (idadeIvan >= 18) {
 console.log("Maior de idade.");
 } else {
 console.log("Menor de idade.");
 }
32. OU ENTÃO
 else if Se o if não for verdadeiro, tente isso aqui. var greetings = "";
 var time = prompt("Que horas são?");
 
 if (time < 13) {
 greetings = "Bom dia.";
 } else if (time < 19) {
 greetings = "Boa tarde.";
 } else {
 greetings = "Boa noite.";
 }
 
 alert(greetings);
33. Exercício Escreva um código que irá receber o ano que você nasceu em uma variável chamada age. Teste se é menor ou igual que 1996, caso sim, exiba a mensagem “Ok, pode entrar.” ou “Proibida a entrada.” caso não. Parabéns, isso é um sistema de validação de entrada. :)
34. ESCOLHA
 switch Serve para testarmos várias condições e executar o código necessário de acordo. var maritalStatus = prompt("Qual seu estado civil?"); switch (maritalStatus) {
 case "solteira":
 console.log("Bora pra festa?");
 break;
 case "casada":
 console.log("Parabéns pelo casamento!");
 break;
 case "divorciada":
 console.log("Deve ser um alívio!");
 break;
 case "viúva":
 console.log("Meus pêsames!");
 break;
 default:
 console.log("Complicado…");
 }
35. ENQUANTO
 while Em muitos casos precisamos repetir um certo “passo”, para facilitar nossa vida temos os laços de repetição. Podemos repetir um bloco de comandos quantas vezes necessário. while (proposição) {
 …
 } var number = 1;
 while (number <= 10) {
 console.log(number);
 number++;
 }
36. FAÇA ENQUANTO
 do while Muito parecido com o while, porém sempre irá executar primeiro, e conferir a condição depois. var number = 1; do {
 console.log(number);
 number++;
 } while (number <= 10);
37. Exercício Escreva um código onde inicie um número com o valor 0 e vá até 20, mostrando apenas os valores pares.
38. PARA
 for Para, faça e depois… for (initialize; condition; interate) {
 …
 } for (var number = 1; number <= 10; number++) {
 console.log(number);
 }
39. Funções Automatizando tarefas.
40. Escovando os dentes 1. Pegar a escova de dente. 2. Pegar a pasta de dente. 3. Abrir a pasta de dente. 4. Colocar a pasta de dente na escova. 5. Escovar os dentes. 6. Enxaguar a boca. 7. Cuspir.
41. Escovando os dentes Imaginou se em vez de você fazer esse passo-a- passo todos os dias, pudesse apenas rodar uma função onde você inicia com os dentes sujos e sai com eles limpinhos?
43. Sintaxe Criar uma função é muito simples. function name(params) {
 …
 }
44. Parâmetros Funções podem receber dados para serem processados, chamamos de parâmetro cada valor (ou variável) informados. Caso seja necessário informar mais de um parâmetro, separe-os por virgula. function welcome(name) {
 return "Estou feliz por estar aqui," + name;
 }
 welcome("Amanda"); function multiply(x, y) {
 return x * y;
 }
 multiply(5, 7);
45. Retorno Uma função pode ser criada para executar uma rotina ou processar dados, neste último caso, é comum que ela possua um retorno, isso é feito através da palavra return.
 
 O retorno de uma função também pode ser associado à uma variável. var result;
 
 function sum(a, b) {
 return a + b;
 }
 
 result = sum(2, 3);
46. Exercícios • Crie uma função que calcule e retorne o quadrado de um número. • Crie uma função que calcule e retorne o seu IMC, receba os valores de peso e altura através de parâmetros.
 Cálculo do IMC: peso / (altura * altura). • Com base no exercício anterior, crie duas variáveis (uma para peso e outra para a altura). Feito isso, utilize-as como parâmetro para invocar a função de cálculo do IMC. Associe o retorno da função à uma variável chamada IMCresult.
47. Objetos O JavaScript é orientado a objetos.
48. Que raio de objeto é esse? Um objeto é uma coleção de propriedades.
 
 Caio, mas o que é esse trem de propriedade? São associações entre nome e valor. O valor de uma propriedade pode ser um texto, número, matriz ou até mesmo uma função (ações).
49. Owwwn…
50. Sintaxe Com uma simples notação de ponto é possível acessar as suas propriedades: object_name.property_name var shoes = {
 brand: "Osklen",
 model: "Chamois Adapt",
 color: "Preto"
 };
51. Sintaxe Com uma simples notação de ponto é possível acessar as suas propriedades: object_name.property_name var shoe = {
 brand: "Osklen",
 model: "Chamois Adapt",
 color: "Preto"
 };
 
 shoe.price = 299.99;
 
 shoe.color;
52. Ações Um objeto possui propriedades do tipo ação (ou métodos) que são representados através de uma função anônima. Seguindo o exemplo do slide anterior, podemos criar ações como: mudar o preço e calçar. shoe.changePrice = function(value) {
 shoe.price = value;
 };
 
 shoe.putOn = function() {
 …
 };
53. Coleção Objetos também são tipos de dados e por isso podem ser inseridos dentro de uma matriz, criando assim uma coleção de objetos. var shoes = [{…}, {…}, {…}];
 shoes[0].color;
54. Coleção var shoes = [
 { color: "Branco" },
 { color: "Marrom" },
 { color: "Cinza" }
 ]; shoes.forEach(function(shoe) {
 console.log(shoe.color);
 });
55. Inception var motorcycle = {
 color: "Vermelho",
 wheels: 2,
 motor: {
 cylinders: 1,
 engineDisplacement: 125,
 fuel:"Gasolina"
 }
 };
56. Exercícios • Crie um objeto chamado clothing e insira propriedades que qualifiquem o que você está vestindo. Por exemplo, cor, marca e tamanho. • Com base no último exercício, formule uma frase concatenando as propriedades do objeto clothing. Por exemplo, "Minha blusa é " + clothing.color + ", da marca…".
57. Projeto Final Vamos criar um website?