45:["$","title",null,{"children":"Introdução ao Javascript | carolx | Observable"}] 4d:T5c1,# 1. Variáveis Como o próprio nome indica, variável é algo que pode variar. No javascript, o conceito de variáveis é semelhante ao de outras linguagens de programação ou até da matemática - você usa variáveis para armazenar um dado, texto, número ou qualquer objeto que você queira utilizar mais tarde. Para declarar uma variável em javascript, basta começar a linha com a palavra-chave ***var*** seguido do nome da variável e seu valor. Por exemplo: `var x = 0;` Nesse exemplo, x é uma variável que irá armazenar um número, e inicialmente esse número é 0. Podemos alterar esse valor mais à frente, por exmplo após um cálculo: ``` var x = 1; var y = 4; x = x + y; // resultado: x = 5 ``` Nesse exemplo, a soma utiliza o valor anteriormente definido para x, e após o cálculo, o resultado irá substituir o valor de x. Você pode nomear variáveis em javascript com o nome que quiser, desde que respeite algumas regras de sintaxe: - Não use espaços, acentos, hífens ou caracteres especiais. Se você utilizar esses caracteres, o navegador pode retornar erros - Você só deve usar a palavra-chave **var** na primeira vez em que a variável aparecer - Para deixar o nome da variável mais legível, é uma boa prática usar o que chamamos de "Camel Case", ou seja, caso a variável tenha mais de uma palavra, retiramos os espaços e iniciamos cada palavra exceto a primeira com letra maiúscula. Assim: ``` var nomeDaVariavel = 0; ```4e:T430,### Pratique: 1. Abra o console do navegador, usando as teclas **Control** + **Shift** + **J**. Toda vez que o código tiver o comando `console.log('')`, você poderá ver o resultado nessa janela 2. Clique no botão TESTAR EXEMPLO, e observe que o cálculo total aparece no console. 3. Mova a linha `console.log("Total: " + totalDeFrutas);` para antes da linha onde `totalDeFrutas` é calculado. Aplique a mudança usando shift + enter. Ao clicar em TESTAR, o console irá exibir a linha `"Total: undefined"`. Isso acontece porque ao declarar `var totalDeFrutas`, não atribuimos um valor a esta variável, que ficou indefinida. Ou seja, como o cálculo ainda não foi feito neste ponto do código, não há valor a exibir. 4. No bloco de *js* acima, altere o valor de bananas ou laranjas para outros números, e aplique a mudança. Clique novamente em TESTAR EXEMPLO e você verá uma nova linha no console, mostrando o novo valor. **DICA:** Usar console.log() pode ser uma boa forma de testar o seu código durante o aprendizado, para entender onde está o problema.4f:T508,### Pratique: No exemplo acima, temos uma lista (Array) de nomes, armazenada na variável `nomesDeUsuario`. - Se o console do navegador não estiver aberto, abra-o novamente usando **Control + Shift + J**. Ao clicar no botão de TESTAR, o console mostra a lista completa `nomesDeUsuario`, e depois dela, o texto "Último nome: Simone" - No bloco de javascript, descomente a linha a seguir, retirando as duas barras `//` antes dela: ``` // nomesDeUsuario.push("Antônio"); ``` *push()* é um método das Arrays. É usado para incluir um item na lista, ao final dela. Sempre usamos o ponto entre o nome da Array e o método ou propriedade que queremos chamar. - Clique novamente em TESTAR. Repare que agora, no console, a lista tem 6 itens, mas o último nome está incorreto, não é "Antônio". Vamos corrigir o código para exibir o último nome depois que a Array é aumentada. - Na linha a seguir, altere `nomesDeUsuario[4]` para `nomesDeUsuario[5]`: ``` console.log("Último nome: ", nomesDeUsuario[4]); ``` Fazemos isso porque, ao incluir um item, o último item passou a ser o que está no *índice* 5 da Array. clique em TESTAR, e agora o último nome estará correto. - **Experimente:** Como você faria para exibir o segundo nome da lista em vez do último?50:T45d,example2B = () => { // notação do ObservableHQ /* Javascript */ var listaDeFrutas = [ "bananas", "laranjas", "nectarinas" ]; // cria uma Array com itens tipo String (texto) var contagemDeFrutas = [ 10, 12, 6 ]; // cria uma Array com itens tipo Number (número) var totalDeFrutas = contagemDeFrutas[0] + contagemDeFrutas[1]; // Altera o conteúdo dos elementos HTML '.fruta-0' e '.contagem-0', // inserindo nele o item [0] da Array 'listaDeFrutas' e 'contagemDeFrutas' ("bananas", 10) document.querySelector('#exemplo2a > .fruta-0').innerHTML = listaDeFrutas[0]; document.querySelector('#exemplo2a > .contagem-0').innerHTML = contagemDeFrutas[0]; // Da mesma forma, insere os dados da segunda fruta ("laranjas", 12) document.querySelector('#exemplo2a > .fruta-1').innerHTML = listaDeFrutas[1]; document.querySelector('#exemplo2a > .contagem-1').innerHTML = contagemDeFrutas[1]; // Seleciona o elemento onde deve aparecer o total, e altera o conteúdo com o valor da soma document.querySelector('#exemplo2a > .contagem-total').innerHTML = totalDeFrutas; } // notação do ObservableHQ51:T469,### Pratique: No bloco do HTML acima, temos três linhas dedicadas às frutas, ainda sem dados. Elas são identificadas com as classes 'fruta-0', 'contagem-0', uma para cada item da Array. No bloco de Javascript, definimos duas Arrays, uma para conter os nomes e a outra para a contagem de frutas. 1. Clique no botão TESTAR EXEMPLO acima, e observe a contagem se atualizar nas linhas do html 2. O código não inclui as nectarinas na terceira linha da tabela. Para incluir, repita as duas linhas: ``` document.querySelector('.fruta-1').innerHTML = listaDeFrutas[1]; document.querySelector('.contagem-1').innerHTML = contagemDeFrutas[1]; ``` Mas ao inserir essas novas linhas, modificamos as referências ao número 1, substituindo por 2 (que é a posição de "nectarinas" na Array). 2. Na linha do código onde é feito o cálculo do total, adicione também a contagem de nectarinas ``` var totalDeFrutas = contagemDeFrutas[0] + contagemDeFrutas[1] + contagemDeFrutas[2]; ``` 3. Aplique as mudanças e teste novamente o exemplo. O valor correspondente a nectarinas deve ser atualizado, assim como o total.52:T492,# 3. Funções Como você deve ter reparado no **Exemplo 2-B**, tivemos que repetir algumas linhas de código cada vez que adicionamos uma nova fruta. Para tornar esse código mais eficiente, eliminando repetições desnecessárias, podemos usar o que no javascript chamamos de **functions** (funções ou métodos). Uma função é um bloco de código javascript que pode ser executado quantas vezes for necessário, com mudanças de parâmetro definidas. Para declarar uma função, você pode utilizar a seguinte notação: ``` function nomeDaFuncao(){ // seu código aqui } ``` É possível fazer com que a função fique mais versátil, se adaptando a certos parâmetros. Por exemplo, se quisermos que uma mensagem diferente seja exibida no console do navegador a cada vez que a função for executada, passamos dentro dos parêntesis um parâmetro (que nesse caso, chamamos de `texto`) ``` function mostraMensagem(texto){ console.log(texto); } ``` Então, em qualquer parte do código, basta chamar a função e passar a mensagem como parâmetro, assim: ``` mostraMensagem("Olá mundo!"); ``` Vejamos a seguir alguns exemplos de como utilizar funções.53:T45a,example3A = () => { // notação do ObservableHQ /* Javascript */ var listaDeFrutas = [ "bananas", "laranjas", "nectarinas" ]; // cria uma Array com itens tipo String (texto) var contagemDeFrutas = [ 8, 12, 6 ]; // cria uma Array com itens tipo Number (número) var totalDeFrutas = 0; // iniciamos a variável com o valor 0 // Criamos uma função que irá preencher nome e número de frutas // Criar a função não faz com que o código dentro dela seja executado imediatamente, // só a deixa declarada para uso futuro function adicionaFruta(numero){ document.querySelector('#exemplo3a > .fruta-' + numero).innerHTML = listaDeFrutas[numero]; document.querySelector('#exemplo3a > .contagem-' + numero).innerHTML = contagemDeFrutas[numero]; // cada vez que a função for executada, somamos a contagem // da fruta passada em parâmetro, e atualizamos o total totalDeFrutas = totalDeFrutas + contagemDeFrutas[numero]; } // Aqui sim, é quando executamos a função, passando o parâmetro desejado adicionaFruta(0); adicionaFruta(1); } // notação do ObservableHQ54:[] 49:{"id":"7926dead7478108f","slug":"introducao-ao-javascript","title":"Introdução ao Javascript","thumbnail":"f523dee7f6d698fa349203e7daa65819672823cfe24360f4967eed316237491b","access_level":"public","create_time":"$D2022-03-13T05:19:10.719Z","update_time":"$D2022-03-23T22:56:04.362Z","view_time":null,"first_public_time":"$D2022-03-16T22:51:39.336Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e49bedd1198f6f94","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1515,"publish_version":1515,"role":null,"authored":false,"authors":[{"type":"individual","id":"845b73f2d04459f8","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"845b73f2d04459f8","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":null,"role":"editor"},{"type":"individual","id":"d65a29b738c2e74f","login":"tiagombp","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c9efc3ec79f2da0371c9ed09baf9e22624bf7477f9dfc315c05d581f8e0a4daa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":25,"collection":{"id":"bfe1f0fd95ab6ced","slug":"programacao-web-introducao","title":"Programação Web - Introdução","owner":{"id":"e49bedd1198f6f94","login":"845b73f2d04459f8","name":"carolx"}},"type":"notebook","body":{"titling":"auto","title":"Introdução ao Javascript","cells":[{"id":0,"value":"# Introdução ao Javascript\n\nJá falamos de como montar a estrutura da página usando HTML, e vimos também um pouco sobre como aplicar estilos e formatar visualmente essa página, usando a sintaxe em CSS. \n\nO terceiro pilar da programação para web é o javascript, responsável pela lógica de interação ou qualquer mudança dinâmica na página. Usando javascript, podemos, por exemplo:\n- Definir uma ação a ser executada quando o usuário interagir;\n- Definir acões a serem executadas durante a rolagem da página;\n- Carregar dados externos e criar elementos dinamicamente;\n- Enviar dados inseridos na página para um servidor, etc.\n\nNesse trimestre, veremos apenas uma introdução a javascript, tema a ser aprofundado em outra disciplina.\n\nHoje, vamos abordar:\n\n1. O que são **variables** (variáveis)\n2. O que são **arrays** (matrizes ou listas)\n3. O que são **functions** (funções or métodos)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":363,"value":"{\n console.log('<<<<<< início do exercício >>>>>>>');\n return '';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"

\n ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"### EXEMPLO 1-A\n\nAntes de usar as variáveis em cálculos ou funções, precisamos dizer ao compilador de javascript que ela existe. Isso é o que chamamos de \"declarar a variável\". No bloco de código js a seguir, demonstramos como declarar variáveis.\n\nVocê pode declarar a existência da variável, sem atribuir um valor inicial a ela. Por exemplo:\n- var nomeDeUsuario;\n\nNo entanto, é uma boa ideia declarar sempre um valor inicial, ainda que vazio, para evitar erros do navegador se a variável for usada sem um valor. Por exemplo:\n- var nomeDeUsuario = \"\";\n\nNesse caso, declaramos como valor inicial uma String vazia, já determinando que essa variável conterá um texto entre aspas. \n\nObserve o exemplo a seguir.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"exemplo1A = () => { // notação do ObservableHQ\n\n /* Javascript */\n var totalDeFrutas; // a variável pode ser declarada sem valor inicial\n var bananas = 12; // declaramos a variável e damos a ela o valor inicial 12\n var laranjas = 6; // declaramos a variável laranjas e atribuimos o valor inicial 6\n\n // Calculamos a soma e atualizamos a variável que estava vazia\n totalDeFrutas = bananas + laranjas; // o novo valor da variável é a soma das duas frutas\n\n // Mostra o resultado no console do navegador (Control + Shift + J)\n console.log(\"Total: \" + totalDeFrutas);\n \n} // notação do ObservableHQ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"Antes de clicar no botão a seguir, use as teclas Control + Shift + J para abrir o console.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1233,"value":"\nRepare, no exemplo acima, como escrevemos o nome da variável. \n- `totalDeFrutas` - (✓) bom\n- `TotalDeFrutas` - (𐄂) ruim\n- `totaldefrutas` - (𐄂) ruim\n\nIsso é uma **convenção de boa prática**, para não confundir com outras nomeações no javascript. Se você não usar \"camel case\", não haverá erros no navegador, mas é recomendado usar para ajudar na legibilidade do código.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"

Título

Total:

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"exemplo1B = () => { // notação do ObservableHQ\n /* Javascript */\n \n var novoTitulo = \"Cesta de Frutas\"; // variável do tipo String, ou seja, contém texto\n \n var totalDeFrutas = 0; // essa é uma variável do tipo Number com valor inicial 0\n var bananas = 8; // declaramos a variável bananas com um valor inicial\n var laranjas = 12; // declaramos a variável laranjas com um valor inicial\n\n // Calculamos a soma e atualizamos o total\n totalDeFrutas = bananas + laranjas;\n \n // Usamos document.querySelector(\".total\") para buscar o primeiro elemento que tenha a classe \"total\"\n // (vamos explorar um pouco mais esse método em outra aula)\n var elementoTotal = document.querySelector('.total');\n \n // Alteramos o conteúdo interno desse elemento (propriedade innerHTML) para mostrar o valor\n elementoTotal.innerHTML = totalDeFrutas;\n \n} // notação do ObservableHQ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"### Pratique:\n\nNo javascript acima, experimente os seguintes passos:\n\n1. Clique em TESTAR EXEMPLO. A soma aparece na tabela do HTML\n\n2. Altere o número de cada fruta, e clique no botão novamente para ver a mudança na tabela do html\n\n3. Digamos que a houve a adição de 6 nectarinas à cesta de frutas. Crie uma nova variável ( `var nectarinas = 6` ) e depois, inclua-a no cálculo do total:\n\n ```totalDeFrutas = bananas + laranjas + nectarinas```\n \n Clique novamente no botão e veja o valor se alterar na tabela do html\n\n4. **Experimente:** Tente alterar o título da tabela para mostrar o texto \"Cesta de Frutas\", contido na variável `novoTitulo`. Para isso, você precisa usar o método `document.querySelector()` para selecionar o elemento com a classe `.titulo`, da mesma forma que foi feito com o elemento `.total`. Depois, é preciso alterar a propriedade innerHTML desse elemento. Adicione esses comandos em uma nova linha. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"# 2. Arrays\n\nAlém das variáveis do tipo *String* (texto escrito) e do tipo *Number* (números), um tipo de variável útil para quem trabalha com dados é o tipo *Array*. \n\nPense na *Array* como um conjunto de itens, uma lista. Poderíamos escrever as nossas frutas do exemplo anterior usando uma Array, da seguinte forma:\n\n```var frutas = [ \"bananas\", \"laranjas\", \"nectarinas\" ];```\n\nAssim, não precisamos declarar uma variável para cada fruta. \n\nCada item da Array é associado a um número, começando do 0 para o primeiro item da lista. Se você quiser fazer referência a cada item, pode fazer assim:\n\n```\nfrutas[0] // Para referenciar o item \"bananas\"\nfrutas[1] // Para referenciar o item \"laranjas\"\nfrutas[2] // Para referenciar o item \"nectarinas\"\n```\n\nCada item da Array pode ser modificado ou referenciado em outras linhas de código. Por exemplo, ao escrever a linha abaixo, o item \"bananas\" é substituído por \"uvas\":\n\n```\nfrutas[0] = \"uvas\"\n```\n\nVejamos o exemplo a seguir:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1289,"value":"### EXEMPLO 2-A\n\nVamos testar nesse exemplo como referenciar cada item de uma Array, e como inserir um item ao final dessa Array via código.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1294,"value":"exemplo2A = () => { // notação do ObservableHQ\n\n /* Javascript */\n var nomesDeUsuario = [ \"Marina\", \"William\", \"Ana\", \"João\", \"Simone\" ]; // cria uma Array com itens tipo String (texto)\n\n // Insere o nome \"Antônio\" no final da lista\n // nomesDeUsuario.push(\"Antônio\");\n\n // Mostra a lista de nomes no console do navegador\n console.log(\"Lista de nomes: \", nomesDeUsuario);\n console.log(\"Último nome: \", nomesDeUsuario[4]);\n \n} // notação do ObservableHQ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1341,"value":"$4f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1198,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1449,"value":"

Cesta de Frutas

\n \n

\n\n

Total

Cesta de Frutas

\n \n

\n\n

Total