{"id":19774109,"url":"https://github.com/miguelitodev/javascript-imc","last_synced_at":"2025-02-28T05:20:51.053Z","repository":{"id":104286163,"uuid":"377550163","full_name":"miguelitodev/javascript-imc","owner":"miguelitodev","description":"Projeto realizado no Curso de JavaScript: Programando na linguagem da web da Alura","archived":false,"fork":false,"pushed_at":"2021-06-17T13:46:21.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-23T21:05:26.285Z","etag":null,"topics":["alura","alura-courses","html","imc","javascript","js"],"latest_commit_sha":null,"homepage":"https://miguelrisquelme.github.io/javascript-imc/","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/miguelitodev.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}},"created_at":"2021-06-16T15:52:09.000Z","updated_at":"2021-06-17T13:46:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"75ba8769-e93b-4953-87be-b0eaab109d17","html_url":"https://github.com/miguelitodev/javascript-imc","commit_stats":null,"previous_names":["miguelitodev/javascript-imc"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelitodev%2Fjavascript-imc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelitodev%2Fjavascript-imc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelitodev%2Fjavascript-imc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelitodev%2Fjavascript-imc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miguelitodev","download_url":"https://codeload.github.com/miguelitodev/javascript-imc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241104698,"owners_count":19910483,"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":["alura","alura-courses","html","imc","javascript","js"],"created_at":"2024-11-12T05:12:00.764Z","updated_at":"2025-02-28T05:20:51.036Z","avatar_url":"https://github.com/miguelitodev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Curso de JavaScript: Programando na linguagem da web\n\n## Porque quebrar uma função?\n\nSabemos que quebrar uma grande função complexa é uma boa prática por causa de diversos fatores, mas podemos citar como os principais deles:\n\n- Dar manutenção ao código fica muito mais fácil, visto que agora podemos examinar vários pequenos blocos , que são muito mais fáceis de compreender do que um grande bloco de texto\n- Ao quebrar uma grande função, também estamos deixando ela com menos responsabilidades, com a meta de atingir o ideal de que cada função tenha apenas uma única responsabilidade.\n- O código também fica muito mais fácil de testar, pois se temos diversas funções pequenas conseguimos ir testando uma a uma em busca de erros ou bugs do código.\n- E por último, a legibilidade do código aumenta muito, pois dando nomes semânticos a cada uma das funções menores conseguimos deixar bem claro o que aquela parte do código deve fazer e facilita o entendimento do todo como um geral.\n\n## Curiosidades\n\n```js\n// Previne o comportamento padrão dos eventos, como recarregar a página\nevent.preventDefault();\n```\n\n```js\n// this é o cara que é dono do evento acionado\n// Nesse caso o dono do evento click é a tabela, logo ela que será removida\ntabela.addEventListener(\"click\", function () {\n\tthis.remove();\n});\n```\n\n## Pontos ressaltados\n\n- Separar a organização de nosso código em arquivos .js\n- Importar arquivos .js sempre ao final do body\n- A representação do HTML pela variável document\n- A função que faz busca querySelector()\n- Preferir selecionar por #id ou .classe\n- O operador lógico de OU ( || )\n- O operador lógico de E ( \u0026\u0026 )\n- Busca de elementos\n- Como selecionar diversos elementos com a função querySelectorAll()\n- Relembramos um método clássico de iteração com o for\n- Vimos como manipular estilos com a propriedade .style\n- Vimos que devemos utilizar camelCase quando queremos modificar uma propriedade que tenha duas palavras, como a background-color\n- A boa prática de não alterar o estilo diretamente no Javascript e sim modificar as classes dos elementos com a propriedade .classList\n\n## Referências\n\n- \u003ca target=\"_blank\" href=\"https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Events\"\u003eIntrodução a eventos\u003c/a\u003e\n- \u003ca target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/Events\"\u003eTipos de eventos\u003c/a\u003e\n- \u003ca target=\"_blank\" href=\"https://youtu.be/GTMEuHxh8aQ\"\u003eValidação de forms customizada com HTML e JavaScript | Code/Drops #32\u003c/a\u003e\n- \u003ca target=\"_blank\" href=\"https://medium.com/@jezmael/como-validar-os-dados-de-um-formul%C3%A1rio-com-javascript-abdc5a5fba67\"\u003eComo validar os dados de um formulário com JavaScript\u003c/a\u003e\n- \u003ca target=\"_blank\" href=\"https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RegExp\"\u003eRegExp\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiguelitodev%2Fjavascript-imc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiguelitodev%2Fjavascript-imc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiguelitodev%2Fjavascript-imc/lists"}