Javascript 101. Parte 2

Transcrição

1 Javascript 101 Parte 2

2 Recapitulando O Javascript é uma linguagem de programação funcional Os nossos scripts são executados linha a linha à medida que são carregados. O código que está dentro de uma função é lido e salvo na memória, mas só é executado quando a função é chamada. Variáveis Devemos usar sempre a palavra reservada var para declarar uma variável antes de a usar. Ao acto de atribuir um valor inicial a uma variável dá-se o nome de inicialização. Uma variável pode ser declarada e inicializada ao mesmo tempo ou separadamente. Uma declaração de variável é uma instrução simples que termina com um ponto-e-vírgula. Funções Uma função é uma colecção de instruções que estão agrupadas. As funções são definidas e chamadas separadamente. Podemos enviar informação para uma função, passando argumentos na chamada da função. A declaração de uma função não precisa que se escreva um ponto-e-virgula no final da função.

3 Operadores

4 Operadores Operadores Aritméticos: + - * / % São usados para realizar operações aritméticas entre valores e/ou variáveis. O operador de módulo - % - devolve o resto inteiro da divisão de dois números Os operadores ++ e --, adicionam ou subtraem uma unidade a um valor inicial. Fazer alert(++10) ou alert(10++) são coisas diferentes: No primeiro caso, primeiro é somado uma unidade a 10, e depois é feito o alert, sendo exibido 11; No segundo caso, primeiro é feito o alert do 10, e depois é somada uma unidade ao 10. ex.: console.log( ((5+3)/2)++ ); // devolve 5

5 Operadores Operadores de Comparação: < <= ==!= >= > Usamo-los para comparar valores entre si. Os operadores < e > servem para validar se um valor é maior (>) ou menor (<) que outro; Os operadores <= e => validam se um valor é maior/menor ou igual a outro; O operador == (igual) valida se um valor é igual a outro. Para além deste, existe ainda o operador === (igual e do mesmo tipo) que valida se os valores são iguais e do mesmo tipo. O operador!= valida se um valor é diferente de outro. Tal como acima, existe também o operador! ==, que valida, não só, se um valor é diferente do outro mas também se são de tipos diferentes. ex.: console.log( 5<10 ); // devolve true; console.log( 5!=10 ); // devolve true; console.log( 5==10 ); // devolve false; console.log( 10<=10 ); // devolve true; console.log( 10== 10 ); // devolve true; console.log( 10=== 10 ); // devolve false;

6 Operadores Operadores Lógicos: &&! O operador lógico AND (&&) serve para avaliar duas preposições simultaneamente. A regra para este operador é: - Sempre que uma das opções da condição seja falsa, o resultado é falso. Só quando ambas as preposições são verdadeiras é que o resultado é verdadeiro. ex.: (true && false); // devolve false O operador lógico OR ( ) serve para avaliar duas preposições independentemente. A regra para este operador é: Basta que uma das condições seja verdadeira, para o resultado ser verdadeiro. ex.: (true false); // devolve true O operador lógico NOT (!) pega numa preposição e inverte-lhe o valor. ex.: (!true); // devolve false

7 Operadores Operadores de Atribuição += -= *= /= São usados para abreviar instruções que pretendam somar, subtrair, multiplicar ou dividir um qualquer número a uma variável. Ou seja, se tivermos a seguinte variável: var a = 5; E lhe quisermos somar o número 10, em vez de escrevermos: a = a + 10; // a fica igual a 15 Escrevemos: a+=10; // a fica igual a 15

8 Operadores Concatenação de Strings: + Podemos usar o sinal de soma (+) para concatenar/juntar duas strings. ex.: var nome = António, frase = O seu nome é: + nome; console.log( frase );

9 Estruturas de Controlo

10 Estruturas de controlo As funções que escrevemos até agora faziam cálculos simples e tinham alguma flexibilidade ao usarmos variáveis e argumentos, mas queremos que as nossas aplicações sejam mais complexas que isso. Habitualmente, as tarefas necessitam que a aplicação reaja de forma diferente de acordo com determinadas condições. As estruturas de controlo servem para alterar a ordem de computação. Por exemplo: Determinadas linhas de código só são corridas se uma condição se verificar - estruturais condicionais (if, else); Porções de código são executadas várias vezes seguidas - estruturas de repetição (ciclos).

11 Condição if Uma instrução de if testa uma condição para saber se a mesma é verdadeira. Se a condição for verdadeira então o código dentro do if será executado. Se a condição não for verdadeira, então o if sai sem ser executado. Uma instrução de if simples tem o seguinte aspecto var x = 5; if( x > 0 ) { console.log( x + é maior que 0 ); } Uma vez que o valor de x é igual a 5, e 5 é maior que 0, então a condição é avaliada como true e o código dentro do if é executado.

12 Condição if Numa condição de if simples, é-nos permitido usar os operadores de comparação. Para relembrar: < <= == ===!=!== >= > Então e porque não podemos usar apenas =? O sinal de igual, em Javascript, é sempre um operador de atribuição. Ou seja, sempre que o Javascript encontra um = vai tentar atribuir o valor à direita do sinal à entidade do lado esquerdo. Assim, no seguinte exemplo, o valor de x é reescrito var x = 5; if (x=6) { console.log(x); // x vai ser igual a 6 }

13 Truthy vs true OK, mas e quando devo usar ===? O if não testa apenas pela verdade absoluta, e pode também testar para aquilo que se pode chamar um truthy value (uma verdadinha vá). Uma string que contenha caracteres, um número diferente de 0 ou uma variável que tenha sido declarada e inicializada vai ser avaliada como truthy e o código dentro do nosso if vai ser executado. Se quisermos testar se um valor é realmente true (ou seja, é avaliado usando o tipo de dados boolean true ) temos de usar === ou!==. O uso de == ou!= pode por vezes produzir resultados inesperados.

14 Condição else O if é bastante útil - permite-nos testar uma série de coisas e fazer com que o nosso programa se comporte de forma diferente dependendo dos resultados dos testes, mas dá-nos opções limitadas. É aí que entra a condição else. O else permite-nos definir um comportamento alternativo se a condição que testámos no if não for verdadeira. Eis o aspecto de um else : if( x === 5 ) { // código a ser executado se for true } else { // código a ser executado se não for true } Agora podemos preparar o nosso código para o caso da nossa condição ser verdadeira ou não.

15 Condição else if Mas ainda há mais Podemos usar o else e o if juntos para podermos abranger ainda mais possibilidades. Desta forma: if( x === 5 ) { // código a ser executado caso o valor de x seja 5 } else if ( y === 5 ) { // código a ser executado caso o valor de x não seja 5, mas que o valor de y é 5 } else { // código a ser executado caso nenhuma das condições if acima se verifiquem }

16 AND e OR Os operadores and (&&) e or ( ) permitem-nos testar várias condições no mesmo if. Para executar o mesmo código caso o x ou o y sejam iguais a 5, podemos usar o operador or : if( x === 5 y === 5 ) { //código é executado caso o valor de x seja 5 ou o valor de y seja 5 } Se quisermos que o código seja executado se o x e o y sejam iguais a 5, usamos o operador and : if( x === 5 && y === 5 ) { //código é executado quando tanto o valor de x como de y são 5 } É importante lembrar que em ambos os cenários, as condições são lidas da esquerda para a direita e só continuam a ser testadas se necessário.

17 Condições switch Se, por ventura, tivermos de fazer uma condição que possa ser reduzida a uma única variável (seja ela uma variável booleana, uma string ou número), em vez de utilizarmos as condições if else podemos usar as condições switch. Então quando devemos usar estas condições, em detrimento das condições if else? Quando estivermos a pensar em que tipo de condição vamos usar, devemos perguntar-nos: Consigo relacionar todas as variantes da minha condição a uma única variável? Se sim, então, usar a condição switch é uma opção válida, uma vez que, poupa algum tempo a escrever e é fácil de ler e interpretar. Caso contrário, e a comparação com uma única variável não for possível, então precisamos de usar o if else

18 Condições switch Sintaxe: switch ( valor_avaliado ) { case valor1: // código a ser executado; break; case valor2: // código a ser executado; break;... default: // código a ser executado; break; } Equivalente a: if( valor_avaliado === valor1 ) Equivalente ao else, ou seja, só é executado se as condições acima forem falsas

19 Condições switch O valor de controlo: Referi-me a ele como variável, o valor de controlo de uma condição de switch faz exactamente o que o nome sugere: controla o caminho de execução que a condição de switch vai seguir. O valor de controlo pode ser do tipo de dados primitivos: String, Number, Boolean. Os casos (case): Os caminhos de execução possíveis de uma condição de switch são deliniados pelos seus cases. Sem surpresa, os cases devem ser do mesmo tipo de dados do valor de controlo. Assim, se o vosso valor de controlo for um numero então, os cases do switch também o devem ser. Os casos devem ser seguidos pelo código a ser executado, caso o valor de controlo seja igual ao valor do case. Os blocos de código que se seguem não são envoltos em chavetas. No entanto, a seguir a cada bloco de código tem de se escrever a palavra reservada break;. Caso contrário, o programa continuaria a ler e a executar as linhas de código que se seguem, mesmo que fizessem parte de um case diferente. O caso default: É uma boa pratica aplicar, também, um caso default dentro de uma condição switch. A sintaxe é, em tudo, igual à dos cases, mas em vez de case usa-se a palavra reservada default desprovida de um valor de comparação. O default é usado para executar um bloco especifico de código quando nenhum dos casos anteriores é igual ao valor de controlo.

20 Ciclos for Por vezes, queremos que a nossa aplicação efectue tarefas repetitivas, mas não queremos que o nosso código se repita. É nesta altura que usamos estruturas de repetição, ou ciclos (loops). Os ciclos for permitem-nos especificar uma lógica para decidir quantas vezes repetimos uma tarefa e incluir uma variável que é actualizada de cada vez que o ciclo é corrido. Um ciclo for é estruturado da seguinte forma: for([inicialização]; [condição]; [expressão de update]){ // código a ser executado de cada vez que o loop corre }

21 Ciclos for Para iniciar o loop, precisamos de uma variável que vai controlar o nosso ciclo. Inicializamos esta variável com um valor inicial. É isto a inicialização. for( var i = 0; [condição]; [expressão de update]){ } // código a ser executado de cada vez que o loop corre É prática comum usar a letra i como nome da variável - é uma abreviação para iterator ou variável de iteração.

22 Ciclos for A seguir, temos de especificar uma condição que vai ser testada de cada vez que o ciclo é corrido. O ciclo é executado enquanto a condição for avaliada como true. for( var i = 0; i <= 5; [expressão de update]){ } // código a ser executado de cada vez que o loop corre

23 Ciclos for Finalmente, precisamos de uma expressão que vai actualizar o valor da variável de iteração depois de cada vez que o ciclo é corrido. for( var i = 0; i <= 5; i++ ){ // código a ser executado de cada vez que o loop corre } Nota: i++ e i+=1 são ambos notações curtas para i = i + 1. Assim, neste exemplo, o nosso ciclo vai correr 6 vezes (0-5), e cada vez que o ciclo completa uma volta, o valor da variável i (que pode ser usada dentro do ciclo) vai ser actualizado - é-lhe somado 1.

24 Matrizes (Arrays)

25 Matrizes (Arrays) Já falamos sobre alguns tipos de dados de Javascript - number, string, boolean, undefined e null. Estes tipos de dados simples só podem conter um valor único. Para além deles, também existem no Javascript, alguns tipos de dados mais complexos. Um exemplo desses tipos de dados são as matrizes ou arrays. As matrizes podem ser vistos como variáveis especiais que podem conter vários valores, no formato de uma tabela.

26 Matrizes (Arrays) No fundo, uma matriz pode ser vista como um objecto que possui algumas operações especiais, como, por exemplo, a possibilidade de contar o número de posições dentro da matriz. As matrizes possuem uma determinada dimensão, sendo que os valores nela guardados começam na posição 0. É por isso, muito comum usarmos ciclos for para manipularmos os dados das matrizes.

27 Matrizes (Arrays) Uma matriz é uma colecção de valores de qualquer tipo, escritos assim: [ cão, 2, 5, true ] Podemos atribuir uma matriz ao valor de uma variável, tal e qual como inicializaríamos uma variável de um tipo de dados simples: var cores = [ vermelho, amarelo, verde, azul ]; Para saber o número de elementos num array, usa-se a propriedade length da seguinte forma: console.log( cores.length ); // devolve 4

28 Matrizes (Arrays) Alguns métodos das matrizes, usando o array hipotético myarray : myarray.sort(); - ordena a matriz alfabeticamente myarray.reverse; - inverte a ordem dos elementos do array myarray.push( ); - adiciona um elemento ao final da matriz myarray.pop(); - remove o último elemento da matriz myarray.tostring(); - devolve uma string contendo os valores dos elementos do array, separados por vírgulas

29 Arrays e ciclos for Os itens numa matriz podem ser acedidos pelo numero da sua posição num array, usando uma notação de parêntesis rectos. A primeira posição num array, é a posição 0. var mycars = [ Ford, KIA, Peugeot ]; mycars[0] // Ford mycars[1] // KIA Assim, para fazer um ciclo que percorra os itens do array mycars, vamos inicializar a variável de iteração a 0. for( var i = 0; [condição]; [expressão de update]){ // código a ser executado de cada vez que o loop corre }

30 Arrays e ciclos for Tal como referi anteriormente, os arrays possuem uma propriedade chamada length. Podemos usa-la para escrever a condição do nosso loop. for( var i = 0; i < mycars.length; [expressão de update]){ // código a ser executado de cada vez que o loop corre } Finalmente, queremos correr o nosso ciclo uma vez por cada item na matriz, assim, vamos incrementar em 1 a nossa variável de iteração, de cada vez. for( var i = 0; i < mycars.length; i++ ){ // código a ser executado de cada vez que o loop corre }

31 Arrays e ciclos for Podemos agora usar o valor de i, em cada volta do ciclo, para aceder ao item do array mycars correspondente: for( var i = 0; i < mycars.length; i++ ){ console.log( mycars[i] ); } "