{"id":13403065,"url":"https://github.com/gabrieldarezzo/helpjs-ravi","last_synced_at":"2025-05-16T01:07:34.836Z","repository":{"id":38147219,"uuid":"60920201","full_name":"gabrieldarezzo/helpjs-ravi","owner":"gabrieldarezzo","description":"Exercícios/Tutorial/Desafios para Iniciantes em JavaScript","archived":false,"fork":false,"pushed_at":"2024-01-02T21:41:02.000Z","size":448,"stargazers_count":1367,"open_issues_count":1,"forks_count":189,"subscribers_count":73,"default_branch":"master","last_synced_at":"2024-07-31T19:39:24.690Z","etag":null,"topics":["begginers","exercice","js","tutorial","tutorial-exercises","vanilla-javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gabrieldarezzo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-11T17:47:15.000Z","updated_at":"2024-07-29T18:15:49.000Z","dependencies_parsed_at":"2024-10-25T23:29:13.002Z","dependency_job_id":"21614957-8a9a-4ef5-928c-0551680db055","html_url":"https://github.com/gabrieldarezzo/helpjs-ravi","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrieldarezzo%2Fhelpjs-ravi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrieldarezzo%2Fhelpjs-ravi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrieldarezzo%2Fhelpjs-ravi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrieldarezzo%2Fhelpjs-ravi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gabrieldarezzo","download_url":"https://codeload.github.com/gabrieldarezzo/helpjs-ravi/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254448579,"owners_count":22072764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["begginers","exercice","js","tutorial","tutorial-exercises","vanilla-javascript"],"created_at":"2024-07-30T19:01:24.937Z","updated_at":"2025-05-16T01:07:29.816Z","avatar_url":"https://github.com/gabrieldarezzo.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# 40 - Exercicios em JavaScript (JS) \n\n\n\n\n\n## OLÁ INTERNET!!!   \n\n   \nTive a ideia de bolar uma lista de exercicios para quem tem interesse em aprender JavaScript.   \nSão todos exercicios simples, focando em quem gostaria de iniciar porém está meio perdido.   \nUma das vantagens de se começar a programar pelo JavaScript seria a premissa que todos tem um Browser/Navegador e um editor disponível.\n\nEu utilizo o [VS-Code](https://code.visualstudio.com/Download), é rapido é simples \u003cdel\u003eé barato\u003c/del\u003e é de graça. Com varios plugins para turbinar ele.  \nDúvidas de como executar o primeiro exercício abaixo?     \n[Como executar um script, Passo a Passo.](https://github.com/gabrieldarezzo/helpjs-ravi#como-executar-um-script)\n\n\n\n\n\n## Just.... DO IT:\n  - (1) Faça uma mensagem de **'Olá Mundo'**.... [Exemplo: 'Olá Mundo'](https://github.com/gabrieldarezzo/helpjs-ravi#exemplos)\n  - (2) Faça essa mensagem em um arquivo javascript externo e chame ela... **([Importado](https://github.com/gabrieldarezzo/helpjs-ravi#importado))**\n  - (3) Faça uma saída de soma de 2 inteiros, ex: alert(2 + 2) - [Somar dois Inteiros](https://github.com/gabrieldarezzo/helpjs-ravi#exemplo-de-alert--sa%C3%ADda--output-de-uma-soma-de-dois-inteiros-22)\n  - (4) No HTML Crie:\n```\n1 - Campo/Input do tipo text para preencher o nome completo.\n1 - Botão com o texto: 'Exibir Nome' e ao clicar neste botão é exibido um alert com o valor do campo nome completo, ex: ' O Nome Completo é: \"xxxx\". '\n```   \n  [Monitorando-Click](https://github.com/gabrieldarezzo/helpjs-ravi#monitorando-um-evento-click)  \n  [Exibir o nome ao clicar](https://github.com/gabrieldarezzo/helpjs-ravi#exibir-o-nome-ao-clicar)  \n\n  - (5) exiba a quantidade de letras que possuem o texto inserido ao clicar no botão\n```\nExemplos de entrada e saida:\n'Gabriel' // 7\n'Daniel' // 6\n'Ronaldo' // 7\n'Dennis Ritchie' // 14 (Espaço conta)\n```\n\n  - (6) No seu HTML exiba a imagem de uma lampada, ao clicar em cima da lampada, troque o src dela para a lampada que está acessa.\n  ```\n  //SRC da Lampada (apagada)  \n  https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/images/lampada.jpg?raw=true  \n\n  //SRC da Lampada (acessa)  \n  https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/images/lampada-on.jpg?raw=true\n  ```  \n  ... - [Alterar-Src de Img](https://github.com/gabrieldarezzo/helpjs-ravi#alterar-um-atributo-do-html)   \n\n\n  - (7) Agora que você já sabe utilizar o evento 'click', aprenda a usar o 'mouseover', ao passar o mouse em cima da 'lampada.jpg' altere ela para 'lampada-on.jpg' (Exemplo abaixo).\n  - (7a) Faça 2 campos no HTML chamados: 'Nome', 'Sobrenome' e um botão 'Saudação'; ao clicar no botão exibir um alert: 'Olá {NOME} {SOBRENOME}'\n  - (8) Crie um campo texto parar preencher um CPF `\u003cinput maxlength=\"11\" id=\"cpf\" /\u003e`, e exiba ao lado com pontuação conforme preencher \n  - (9) Preencha um CPF com pontuação `\u003cinput maxlength=\"14\" id=\"cpfPoint\" /\u003e` e no campo ao lado exiba sem pontuação.  \n  - (10) No HTML Crie:\n```\n2 x - Campo/Input do tipo text. (id=soma1, id=soma2)\n1 x - Botão (id=btn-soma)\n1 x - Campo (id=resultado-soma)\n\nCaso esteja preenchido um valor númerico nos dois campos(id=soma1, id=soma2), \nO resultado da soma devera aparecer no campo (id=resultado-soma) ao clicar no botão (id=btn-soma).\n```   \n  - (12) Faça um comentário de uma linha no JavaScript no exercicio anterior\n  - (12.a) Crie dois botões no HTML chamados: 'Verde', ,'Vermelho'. ao clicar neles, o style=\"background-color: {COR-SELECIONADA}\" vai ser alterado dinamicamente [Alterar-Style de uma div](https://github.com/gabrieldarezzo/helpjs-ravi#alterar-style-div)   \n  - (13) Faça um comentário de varias linhas no JavaScript no exercicio anterior do CPF.\n  - (14) Crie uma div vazia cujo o id dela é 'resultado'\nInsira via JavaScript assim que a tela carregar o seguinte texto: 'Esse texto foi inserido pelo JavaScript...' ['Exemplo de \"window.onload\"'](https://developer.mozilla.org/pt-BR/docs/Web/API/GlobalEventHandlers/onload#Exemplos)  \n  - (15) Agora crie um botão que ao ser clicado faça a mesma ação do exercício anterior.\n  - (16) Crie uma função que recebe 2 parâmetros e retorna a soma deles. (e utilize no exercicio 10)\n  - (17) Crie uma função que recebe 2 parâmetros e retorna a soma deles, porem caso seja passado um parâmetro vazio ela retorne zero.\n  - (18) Exiba o 'resto' da seguinte divisão: (5 / 2)\n  - (19) Crie uma função que retorna a palavra (impar/par) de acordo com seu parâmetro inteiro.\n  - (20) Crie uma função que recebe 2 parâmetros e retorna a multiplicação deles. \n  - (21) Crie uma função que calcula 5% de desconto retornando o valor do desconto.\n  - (22) Crie uma função que recebe o ano de nascimento da pessoa informando se ela é maior de idade ou menor.\n  - (23) Dentro da div com o id 'resultado', escreva 1x ('Repetição'). @dica 'innerHTML', ``` el.innerHTML = 'Repetição'; ```\n  - (24) Dentro da div com o id 'resultado', escreva 2x ('Repetição').\n  - (25) Dentro da div com o id 'resultado', escreva 20x ('Repetição'). (use o 'for' pelo amor de deus)\n  - (26) Dentro da div com o id 'resultado', escreva 5x ('Repetição'). (agora com forEach)\n  - (27) Dentro da div com o id 'resultado', escreva 5x ('Repetição'). (agora com while)\n  - (28) Dentro da div com o id 'resultado', escreva 5x ('Repetição'). (agora com do while) \n  - (29) Dentro da div com o id 'resultado', escreva os números de 0 ~ 10 (escolha uma das opções acima)\n  - (30) Dentro da div com o id 'resultado', escreva os números pares até 20... (ex 2,4,6...20)\n  - (31) Ok... chega de for(), mentira / #SQN... Exiba a tabuada do 1 até o 10 (for dentro de for?) (caso você escreva de forma manual.. eu vou te bater HSUAHASHUAS)\n```\n0 x 0 = 0\n0 x 1 = 0\n0 x 2 = 0\n...\n10 x 9 = 90\n10 x 10 = 100\n```  \n(Dica, pesquise um pouco de CSS para melhorar a visualização do resultado.)\n  \n  - (32) Crie uma função que informa se tem os caracteres 'dota' no parâmetro informado.\n  ```\n  Ex: 'Dota é melhor que LOL' (verdadeiro)\n  Ex: 'Lol é melhor que CS' (falso) / e Falso na vida real tmb.\n  ```\n  - (33) Exiba aleatoriamente um número pelo alert()\n  - (34) Agora faça um botão que ao clicar nele informa se a pessoa acertou o número.\n  - (35) Exiba a data atual pelo JavaScript no seguinte formato: dia/mês/Ano\n  - (36) Exiba o próximo mês (dinamicamente obviamente)\n\n## Just.... DO IT ARRAYS:  \nEntenda sobre arrays:\nhttps://pt.wikipedia.org/wiki/Arranjo_(computa%C3%A7%C3%A3o) ou https://en.wikipedia.org/wiki/Array_data_type\n\n\n\n- (37.a) Crie o seguinte array: ```var deuses = ['Aegir', 'Aud', 'Balder']```  \nE Exiba a quantidade/comprimento que ele tem com a função [.length](http://www.w3schools.com/jsref/jsref_length_string.asp)  \n\n- (37.b) Crie o seguinte array: ```var deuses = ['Aegir', 'Aud', 'Balder']```  \nE exiba um a um com ```alert()``` - De preferencia para laços de repetição (for, forEach, while, do{}while)\n\n- (37.c) Crie o seguinte array: ```var deuses = ['Aegir', 'Aud', 'Balder']```  \nE exiba um a um com ```alert()``` - De preferencia para funções com callbacks, Ex:(map, reduce, filter)\n\u003cimg src=\"https://cdn-images-1.medium.com/max/2000/1*A86lGTmXqQ_KrDUL47D2Hw.png\" alt=\"map, reduce, filter\" width=\"300px\"/\u003e\n\nLeia mais sobre como trabalhar com arrays:\nhttps://tableless.com.br/lidando-com-arrays-em-javascript/ \n\n- (37.e) Crie o seguinte array: ```var deuses = ['Aegir', 'Aud', 'Balder']```  \nAdicione os 3 Deuses: ('Loki', 'Odin', 'Frey') com a função [push()](http://www.w3schools.com/jsref/jsref_push.asp)  \n\n- (37.f) Crie o seguinte array: ```var deuses = ['Aegir', 'Aud', 'Balder']```  \nAdicione os 3 Deuses: ('Loki', 'Odin', 'Frey') com a função [.length](http://www.w3schools.com/jsref/jsref_length_string.asp)  \n\n- (37.g) Crie o seguinte array: ```var numbers = [5, 7, 1, 8, 9]```  \nE exiba de forma crescente  @dica: [.sort](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)   \n@dica2: http://pt.stackoverflow.com/questions/9900/como-ordenar-um-array-por-valores\n\n- (37.h) Crie o seguinte array: ```var numbers = [5, 7, 1, 8, 9]```  \nE exiba de forma decrescente.\n\n\n- (38) Crie o seguinte array: ```var deuses = ['Aegir', 'Aud', 'Balder', 'Bragi', 'Búri', 'Dag', 'Dellingr']```  \nE exiba todos os nomes, dentro do html: ```\u003cul id=\"nomes\"\u003e\u003c/ul\u003e```\n\n- (39) Crie um campo texto no html que armazena o conteúdo em um array sempre que você clicar no botão, e apresente em uma lista(ul)\n\n- (40) Crie um campo texto no html que armazena o conteúdo em um array sempre que você clicar no botão, e apresente em uma lista(ul) destacando os números pares\n\n- (41) Crie um contador como o abaixo:  \n\u003cimg src=\"https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/img-readme/contador-gif-5.gif\" alt=\"Contador\" width=\"width: 60px;\"/\u003e\n\n\n## Challenge Accepted  \n\n- (42) \n\u003cimg src=\"https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/img-readme/meme-challenge-accepted.jpg\" alt=\"Challenge Accepted Meme\" width=\"300px\"/\u003e\n\nCom as imagens abaixo:\n![Animação Urso](https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/img-readme/all-chara.png)\n\nCrie uma animação, onde a imagem se troca entre 1,2 e 3, e mova o bloco para a direita, dando entender que o urso está 'andando'.\n\u003cimg src=\"https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/img-readme/urso-animado.gif\" alt=\"Urso Animado\"/\u003e\n\n\n@Dica: Já deixei cortado cada uma com ( 32px x 32px )\n```    \n  https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-1.png\n  https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-2.png\n  https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/images/chara-3.png\n```\n\nBasicamente você pode usar os exemplos abaixo:  \n[Exemplo de temporizador/setTimeout()](https://github.com/gabrieldarezzo/helpjs-ravi#exemplo-de-temporizador)     \n[Alterar-Style de uma div](https://github.com/gabrieldarezzo/helpjs-ravi#alterar-style-div)  \n[Alterar-Src de Img](https://github.com/gabrieldarezzo/helpjs-ravi#alterar-um-atributo-do-html)   \n\nE obviamente um toque de de CSS para mover a img:\nLeitura recomendada:\nhttps://www.w3schools.com/css/css_positioning.asp\n\n\n---\nCaso ficou curioso de como fazer, tem um exemplo aqui:  \n\nOnde separei em 3 partes:  \n\n1-animacao (Onde ocorre a troca de forma dinamica entre a img-chara: 1,2,3)  \n2-mover-img (Empurro uma imagem estatica de forma dinamica da esquerda (left) até o final)  \n3-urso-animado (Junção de ambos exemplos, dando a impressão do urso 'andar')  \n\n\nVeja o código completo aqui:   \nhttps://github.com/gabrieldarezzo/gabrieldarezzo.github.io/tree/master/helpjs-ravi/desafio-urso  \n\n\nDemo Online do urso animado aqui: ( Não vale copiar em?! )\nhttp://gabrieldarezzo.github.io/helpjs-ravi/desafio-urso/3-urso-animado/  \n\n\n\n### BONUS - \nCrie um campo texto no html que armazena o conteúdo em um array sempre que você clicar no botão, e apresente em uma lista(ul) possibilitando excluir individualmente o item/li clicado\n\nJavaScript curiosidade...  \nhttp://pt.stackoverflow.com/questions/8035/qual-a-diferen%C3%A7a-entre-declarar-uma-matriz-com-array-e-em-javascript \n\n\n\n## Tópicos futuros:\n  - [Importado](https://github.com/gabrieldarezzo/helpjs-ravi#just-do-it-arrays) - Arrays/Matrizes/Vetores?\n  - Classes/Prototype\n  - JSON\n  - Manipulação de CSS pelo JavaScript\n  - [Jquery](http://try.jquery.com/)\n  - [feito](https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#guia-definitivo-ajax) - Ajax\n\n\n## Exemplos:\n\n### Exemplo de Saida: (Isto é um alert...)\n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml lang=\"pt-br\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eJS Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n      alert('Olá Mundo!');    \n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Como executar um script\nEstá com dúvidas de como executar o 'Olá mundo' no JavaScript?!\nFiz um passo a passo.  -\u003e\n**(Não precisa de servidor, como eu disse aqui é só JavaScript.... Qualquer navegador/browser já executa.**\n\n  - Copie e cole o conteúdo do código acima... (ou escreva, é bom saber algumas tags de cabeça...)\n![Código HTML + JavaScript](https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/img-readme/1.png)\n\n  - Clique em 'Arquivo' -\u003e 'Salvar Como'\n![Salvar-\u003eSalvar Como](https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/img-readme/2.png)\n\n  - Escolha uma pasta, (de preferencia crie uma para cada exercício. **Exemplo: 'ex', 'ex1', ...)** )\n![Salve o arquivo](https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/img-readme/3.png)\n\n  - Vá até a pasta escolhida, clique com botão direito no arquivo salvo e depois 'Abrir com' -\u003e 'Google Chrome' **(Caso não apareça a opção só arrasta para o navegador aberto)**\n![Salve o arquivo](https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/img-readme/4.png)\n\n  - Prontinho... Seu código foi executado  \n![Salve o arquivo](https://raw.githubusercontent.com/gabrieldarezzo/helpjs-ravi/master/img-readme/5.png)  \n@dica: caso você altere o arquivo 'index.html' é só dar um F5 (Ou Ctrl + R) no navegador que você olha a alteração.  \n\n\n\n## Exemplo de Comentário   \n\n```javascript\n\u003c!DOCTYPE HTML\u003e\n\u003chtml lang=\"pt-br\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eJS Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n    //Isto é um comentário, vai ser ignorado pelo interpretador\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n## Exemplo de Alert() / Saída / Output de uma soma de dois inteiros (2+2)  \nIsto tambem é um alert, pode ser considera um 'exibir' ou 'saída' ou 'output' da linguagem:  \n```javascript\n\u003c!DOCTYPE HTML\u003e\n\u003chtml lang=\"pt-br\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eJS Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n    alert(2 + 2);\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\nEntenda:  \nhttps://pt.wikipedia.org/wiki/Entrada/sa%C3%ADda ou https://en.wikipedia.org/wiki/Input/output  \n\n\n\n## Monitorando um evento click  \nIsto monitora o evento 'click' pelo JS no html (Incorporado/Importado)   \n```javascript\n\n\u003c!DOCTYPE HTML\u003e\n\u003chtml lang=\"pt-br\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eJS Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003cbutton id=\"btn-clicou\"\u003eExibir Alert\u003c/button\u003e\n\n\u003cscript type=\"text/javascript\"\u003e  \ndocument.getElementById('btn-clicou').addEventListener('click', function() {\n  alert('Click');\n});\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\nIsto monitora o evento 'click' (Inline / In-Tag)\n```html\n\u003cbutton onclick=\"alert('Hit-me');\"\u003eClick-Me\u003c/button\u003e\n```\n\n\n## Exibir o nome ao clicar\nIsto monitora o evento 'click' pelo JS no html (Incorporado/Importado)   \n```html\n\n\u003c!DOCTYPE HTML\u003e\n\u003chtml lang=\"pt-br\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eJS Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cp\u003eNome Completo:\u003c/p\u003e\n\u003cinput type=\"text\" name=\"nome-completo\" id=\"nome-completo\" placeholder=\"Digite seu nome\"/\u003e\n\u003cbr /\u003e\n\u003cinput type=\"button\" value=\"Exibir Nome\" id=\"btn-exibir-nome\"/\u003e\n\u003chr /\u003e\n\u003cscript type=\"text/javascript\"\u003e  \ndocument.getElementById(\"btn-exibir-nome\").addEventListener(\"click\", function() {\n  const nomeCompleto = document.getElementById('nome-completo').value;\n  alert('O Nome Completo é: ' + nomeCompleto );\t\n});\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n\n\n## Monitorando um evento click (2)  \nO código abaixo monitora o evento 'click' do elemento DOM com o id 'my-btn' e depois exibe o valor(value) do elemento my-txt  \n```html\n...\n\u003cbody\u003e\n\u003cp\u003ePreencha Qualquer coisa e depois clique no botão abaixo...\u003c/p\u003e\n\u003cinput type=\"text\" name=\"\" id=\"my-txt\" value=\"Aqui vai ser exibido\"  /\u003e\n\u003cbr /\u003e\n\u003cbutton id=\"my-btn\"\u003eOutro 'Button'\u003c/button\u003e\n\n\u003cscript type=\"text/javascript\"\u003e  \ndocument.getElementById(\"my-btn\").addEventListener('click', function() {\n  var texto = document.getElementById(\"my-txt\").value;\n  alert(texto);\n});\n\u003c/script\u003e\n\u003c/body\u003e\n...\n```\n\n## Alterar Style Div\nO código abaixo seleciona um elemento pelo DOM (id=\"my-photo\"), e altera o src deste elemento para 'foto-diferente.jpg'\n```html\n...\n\u003cbody\u003e\n  \n  \u003cstyle type=\"text/css\"\u003e\n  #quadrado {\n    height: 100px;\n    width: 100px;\n  }\n  \u003c/style\u003e\n\n  \u003cdiv id=\"quadrado\" style=\"background-color: #f00;\"\u003e\u003c/div\u003e  \n\n  \u003cscript type=\"text/javascript\"\u003e\n    document.getElementById(\"quadrado\").style = \"background-color: #f00;\";\n  \u003c/script\u003e\n\n\n\u003c/body\u003e\n...\n```\n\n## Alterar um atributo do HTML\nO código abaixo seleciona um elemento pelo DOM (id=\"my-photo\"), e altera o src deste elemento para 'foto-diferente.jpg'\n```html\n...\n\u003cbody\u003e\n  \u003cimg src=\"https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/images/lampada.jpg?raw=true\" alt=\"Minha Foto\" id=\"my-photo\"/\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n    document.getElementById(\"my-photo\").src = 'https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/images/lampada-on.jpg?raw=true';\n  \u003c/script\u003e\n\u003c/body\u003e\n...\n```\n\n\n## Criar Função\nO código abaixo cria uma função de somar em JavaScript, [leia mais](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Fun%C3%A7%C3%B5es)\n```html\n...\n\u003cbody\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        function somaDoisNumeros(primeiro, segundo){\n        \n            //Armazena o resultado da soma do primeiro parâmetro + segundo parâmetro.\n            var resultado = primeiro + segundo;\n            \n            //E retorna a variavel.\n            return resultado;\n        }\n        \n        alert(somaDoisNumeros(1, 3));\n        alert(somaDoisNumeros(3, 3));\n        alert(somaDoisNumeros(2, 2));\n    \u003c/script\u003e\n\u003c/body\u003e\n...\n```\n\n\n## Exemplo de temporizador   \n\nO código abaixo tem um temporizador que executa uma função anônima após 2000 μs ([microsecond](https://en.wikipedia.org/wiki/Microsecond)) (2 segundos)   \n\n\n```html\n...\n\u003cbody\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n      setTimeout(function(){\n        alert(\"Olá mundo atrasado dois segundos\"); \n      }, 2000);        \n    \u003c/script\u003e\n\u003c/body\u003e\n...\n```   \n# Explicações Gerais\n\n\n## Temos 3 formas de chamar um JavaScript (Inline, Incorporado, Importado) veja abaixo:   \n\n### Inline [(Veja o Demo)](http://gabrieldarezzo.github.io/helpjs-ravi/exemplos/inline/)\n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml lang=\"pt-br\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003ctitle\u003eJS Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cbutton onclick=\"alert('Hit-me');\"\u003eClick-Me\u003c/button\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```  \n  \n### Incorporado [(Veja o Demo)](http://gabrieldarezzo.github.io/helpjs-ravi/exemplos/incorporado/)\n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml lang=\"pt-br\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eJS Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \n  \u003cscript type=\"text/javascript\"\u003e\n    alert('Olá');\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```   \n  \n\n### Importado\nBasicamente seria 2 arquivos no mesmo nivel de pasta (index.html) e (my_script.js)\nConteúdo do 'index.html':\n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml lang=\"pt-br\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eJS Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cscript type=\"text/javascript\" src=\"my_script.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```   \n\nConteúdo do 'my_script.js':\n```javascript\nalert('Olá!!!');\n```\n\n\n\n# Pow eu fiz os códigos, porem não acontece nada/fiz os códigos e não ocorreu o esperado....\n  **Ai meu filho você precisa aprender a *debbugar**:\n  - http://www.devfuria.com.br/javascript/debugando/\n  - http://www.devmedia.com.br/depurando-javascript-com-google-chrome/28367\n  \n# Quer mais exercicios ?!   \n  - O @jcserracampos fez uma lista bem bacana para continuar a se desafiar: https://medium.com/@JCSerraCampos/diasto-sem-ideias-para-programar-hoje-e-agora-dcbeda65d223\n\n# Ainda tem dúvida? Cria um 'Issue' tio....\n  -  https://github.com/gabrieldarezzo/helpjs-ravi/issues \n  \n# Gosta de Videos?\n  -  https://github.com/carolcodes/youtube-br-desenvolvimento  \n  \n\n# Artigos lekais de JavaScript/HTML/CSS:  \n  - http://tableless.github.io/iniciantes/  \n  - https://www.youtube.com/playlist?list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc\n  - http://jstherightway.org/pt-br/#js-code-style\n  - http://www.codewars.com/?language=javascript\n  - Ebooks gratuitos de JS -\u003e http://jsbooks.revolunet.com/\n  \n# Pirou no 'Ursinho animado'?\n  - (Avançado | Inglês) Curso de 'Developing Games with HTML5' https://www.youtube.com/watch?v=x2EbfsQbsLI\u0026list=PLsrZV8shpwjMxD9LZ6qsKrtWR7xQEv192\n  \n# Motivos para você usar o Google Chrome:  \n- [Segredos do Chrome DevTools com @zenorocha](https://www.youtube.com/watch?v=XUgfwYzv-WQ\u0026list=PLiGzvgwA5Gmgnq5vPjJxW52hDiX3ndL53)  \n\n\nEntenda o que é ['Vanilla-js'](http://pt.stackoverflow.com/questions/46983/o-que-%C3%A9-o-vanilla-js)  \nPowered By:  \n[![Vanilla-js](http://vanilla-js.com/assets/button.png)](http://vanilla-js.com/)  \n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabrieldarezzo%2Fhelpjs-ravi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgabrieldarezzo%2Fhelpjs-ravi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabrieldarezzo%2Fhelpjs-ravi/lists"}