Quando se fala em JavaScript no navegador, existem 3 conceitos a serem bem compreendidos: DOM selection, Event Handling e AJAX.<\/p>\n","protected":false},"author":1,"featured_media":219513,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[146],"type_de_post":[],"post-format":[179],"class_list":["post-219512","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","tag-web-pt-br","post-format-post-pt-br"],"acf":[],"acfml_non_translatable_locations":null,"_wp_attached_file":null,"_wp_attachment_metadata":null,"wpml_media_processed":null,"_elementor_inline_svg":null,"_elementor_source_image_hash":null,"_wp_attachment_image_alt":null,"_msc":null,"_elementor_is_screenshot":null,"_wp_attachment_context":null,"_oembed_4f1dc266c1e5b199d2e3668569863d35":null,"_wp_attachment_backup_sizes":null,"description_courte_du_cours":null,"_description_courte_du_cours":null,"sujets":null,"_sujets":null,"niveau":null,"_niveau":null,"duree":null,"_duree":null,"lien_externe_du_cours":null,"_lien_externe_du_cours":null,"_g_feedback_shortcode_8e54bebc0966bf7f9290fee5ef5e57c8a8c597c6":null,"_g_feedback_shortcode_atts_8e54bebc0966bf7f9290fee5ef5e57c8a8c597c6":null,"elementor_font_files":null,"elementor_font_face":null,"_elementor_location":null,"_elementor_priority":null,"_elementor_code":null,"_elementor_extra_options":null,"date_de_levent":null,"_date_de_levent":null,"heure_de_debut_de_levent":null,"_heure_de_debut_de_levent":null,"heure_de_fin_de_levent":null,"_heure_de_fin_de_levent":null,"time_zone":null,"_time_zone":null,"description_de_levent":null,"_description_de_levent":null,"format_du_cours":null,"_format_du_cours":null,"pre-requis":null,"_pre-requis":null,"langue_de_levent":null,"_langue_de_levent":null,"lien_externe_de_levent":null,"_lien_externe_de_levent":null,"_yoast_wpseo_primary_tag_events":null,"lieu_de_levent":null,"_lieu_de_levent":null,"_menu_item_type":null,"_menu_item_menu_item_parent":null,"_menu_item_object_id":null,"_menu_item_object":null,"_menu_item_target":null,"_menu_item_classes":null,"_menu_item_xfn":null,"_menu_item_url":null,"_omapi_type":null,"_omapi_ids":null,"_omapi_enabled":null,"_yoast_wpseo_content_score":null,"_pll_strings_translations":null,"_yoast_wpseo_primary_post_tag":null,"_yoast_wpseo_primary_type_de_post":null,"_yoast_wpseo_primary_post-format":null,"_oembed_e607e81f61090d85eabdabc743a27470":null,"_oembed_196c62ccee9fda191cd6fa5f568ddc05":null,"_oembed_6b5f28c0de48cbf3a2ad766be5eb3b30":null,"_oembed_082c4292f4cd0dedc40ae746a899501c":null,"om_disable_all_campaigns":null,"wpil_sync_report3":"1","_yoast_wpseo_focuskw":null,"_yoast_wpseo_linkdex":null,"_yoast_wpseo_opengraph-title":"Modern Javascript in the Browser | Le Wagon","_yoast_wpseo_opengraph-description":"Quando se fala em JavaScript no navegador, existem 3 conceitos a serem bem compreendidos: DOM selection, Event Handling e AJAX.","_yoast_wpseo_twitter-title":"Modern Javascript in the Browser | Le Wagon","_yoast_wpseo_twitter-description":"Quando se fala em JavaScript no navegador, existem 3 conceitos a serem bem compreendidos: DOM selection, Event Handling e AJAX.","wpil_links_inbound_internal_count":"0","wpil_links_inbound_internal_count_data":[],"wpil_links_outbound_internal_count":"0","wpil_links_outbound_internal_count_data":[],"wpil_links_outbound_external_count":"0","wpil_links_outbound_external_count_data":[],"wpil_sync_report2_time":"2023-08-11T09:32:12+00:00","gnpub_modified_count":null,"_encloseme":null,"_jetpack_memberships_contains_paid_content":null,"_oembed_df252bc3f21e94e550790f0a26013d33":null,"_oembed_7c25793225e5877909b9566a95c01f07":null,"_oembed_time_7c25793225e5877909b9566a95c01f07":null,"_oembed_c035311b2d37111892bc6336ad75c1a7":null,"_oembed_time_c035311b2d37111892bc6336ad75c1a7":null,"_yoast_wpseo_focuskw_text_input":"","_yoast_wpseo_opengraph-image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/vlwl9zkkfrrtvoal9hqpczogrpbq.jpeg","_yoast_wpseo_twitter-image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/vlwl9zkkfrrtvoal9hqpczogrpbq.jpeg","_bnitk_mfd_meta-robots-noindex":null,"_yoast_wpseo_meta-robots-noindex":null,"_bnitk_mfd_meta-robots-nofollow":null,"_yoast_wpseo_meta-robots-nofollow":null,"_oembed_9b38dff8e9475b390d223d1a13735d6e":null,"_oembed_09b03dce1da57707d8b400d6ead6cfea":null,"_oembed_time_09b03dce1da57707d8b400d6ead6cfea":null,"_oembed_761875ecd5d7c814e779a8a1669e3078":null,"_oembed_time_761875ecd5d7c814e779a8a1669e3078":null,"_oembed_60128998417fdcbaac97a635f5785efd":null,"_oembed_time_60128998417fdcbaac97a635f5785efd":null,"_oembed_bbc2c908fc7e611d82dce88119dc4350":null,"_oembed_time_bbc2c908fc7e611d82dce88119dc4350":null,"_oembed_5ada75a4373349f7b136423290505b3a":null,"_oembed_time_5ada75a4373349f7b136423290505b3a":null,"_oembed_086373a651e90a4eb1279fa1f945472c":null,"_oembed_time_086373a651e90a4eb1279fa1f945472c":null,"_wpml_post_translation_editor_native":null,"_oembed_5e24c29ce369f6b80c9eeec04f14665b":null,"_oembed_time_5e24c29ce369f6b80c9eeec04f14665b":null,"_oembed_8c3e7085f10b7c0fc5520e72277d797b":null,"_oembed_time_8c3e7085f10b7c0fc5520e72277d797b":null,"_oembed_1489782c3c8ef26605b6876b88f7bdda":null,"_oembed_time_1489782c3c8ef26605b6876b88f7bdda":null,"_oembed_0a3d659fc8de333aa903ab0b56018d23":null,"_oembed_time_0a3d659fc8de333aa903ab0b56018d23":null,"_oembed_d1585e059963c7dbe1909a198f64637b":null,"_oembed_da273c5e4d4993b38963204fa3018b68":null,"_oembed_time_da273c5e4d4993b38963204fa3018b68":null,"_oembed_a5e2c70342e4f17e48253b0a60b76258":null,"_oembed_time_a5e2c70342e4f17e48253b0a60b76258":null,"_oembed_83c8f84c43191797360817ecdc633650":null,"_oembed_time_83c8f84c43191797360817ecdc633650":null,"_oembed_e105b3463a1e23321ff3d1a9daf4ce77":null,"_oembed_1692f2329443bc1b18fc320e0d77cb4e":null,"_yoast_wpseo_schema_article_type":null,"_oembed_02bf1d274545a46fdad44828db802e9b":null,"_oembed_483efee027379bb1099137e135e60619":null,"_oembed_time_483efee027379bb1099137e135e60619":null,"_oembed_d9e3a2e55472c308a6d4f95f9859d57c":null,"_oembed_time_d9e3a2e55472c308a6d4f95f9859d57c":null,"_oembed_14a773041d4083fdc540105ccc635e1f":null,"_oembed_time_14a773041d4083fdc540105ccc635e1f":null,"_oembed_fd2c0295b311b878f43def139f693291":null,"_oembed_time_fd2c0295b311b878f43def139f693291":null,"_oembed_9e88339a75e081aa4aa002ac43b5917e":null,"_oembed_time_9e88339a75e081aa4aa002ac43b5917e":null,"_oembed_e58b2264fd34411178c5aead6e76fc0e":null,"_oembed_time_e58b2264fd34411178c5aead6e76fc0e":null,"_oembed_bddf29494cd341c273d2f25802785f3a":null,"_oembed_time_bddf29494cd341c273d2f25802785f3a":null,"_oembed_9fdc7ffbd7d1c456cb57323136bcf86d":null,"_oembed_time_9fdc7ffbd7d1c456cb57323136bcf86d":null,"_oembed_6882adf1f7ba34c40d8abda49c078862":null,"_oembed_time_6882adf1f7ba34c40d8abda49c078862":null,"_oembed_42ae0b6a999f98ed81c86edf9b80d360":null,"_oembed_time_42ae0b6a999f98ed81c86edf9b80d360":null,"_oembed_f4dcff6ba8f84f09cade790420ba4d80":null,"_oembed_time_f4dcff6ba8f84f09cade790420ba4d80":null,"_oembed_25071af9d5ecd73a9356fe5704bba4d8":null,"_oembed_time_25071af9d5ecd73a9356fe5704bba4d8":null,"_oembed_a86728f5efc0ca0642006bbb96f843cc":null,"_oembed_time_a86728f5efc0ca0642006bbb96f843cc":null,"_oembed_d7b5055b785ef8a0cf22c87d024bf2a4":null,"_oembed_time_d7b5055b785ef8a0cf22c87d024bf2a4":null,"_oembed_6a73e101cae7c3452b00a72cf0fc9b22":null,"_oembed_time_6a73e101cae7c3452b00a72cf0fc9b22":null,"_oembed_0aef478f0830cc2e857b9a150a7f763a":null,"_oembed_time_0aef478f0830cc2e857b9a150a7f763a":null,"_oembed_d1a3bdcdf10e4859560b01d910ad1120":null,"_oembed_time_d1a3bdcdf10e4859560b01d910ad1120":null,"_oembed_05ef2af36a31586761b7311d393d1df4":null,"_oembed_time_05ef2af36a31586761b7311d393d1df4":null,"_oembed_ed00fe1690bb2e86f1eb06acfe8a13e7":null,"_oembed_time_ed00fe1690bb2e86f1eb06acfe8a13e7":null,"_oembed_59ffcbf71f633752ca4f26b3b4a544c9":null,"_oembed_time_59ffcbf71f633752ca4f26b3b4a544c9":null,"_oembed_a7b688611478922544f14672fda18461":null,"_oembed_time_a7b688611478922544f14672fda18461":null,"_oembed_266f9a151e3a09eeee918af2d28fd24f":null,"_oembed_time_266f9a151e3a09eeee918af2d28fd24f":null,"_oembed_9f52726dd229470e47d40ff0c8aeb5f8":null,"_oembed_time_9f52726dd229470e47d40ff0c8aeb5f8":null,"_oembed_5547f713058fed19783e0533ce393a31":null,"_oembed_time_5547f713058fed19783e0533ce393a31":null,"_oembed_68ff8dd20e77e109ad084c2252ca040d":null,"_oembed_time_68ff8dd20e77e109ad084c2252ca040d":null,"_oembed_819f09a569080db91bf5dadda0a30d9f":null,"_oembed_time_819f09a569080db91bf5dadda0a30d9f":null,"_oembed_4fc081fbdf0afd05a624ba852a63e133":null,"_oembed_time_4fc081fbdf0afd05a624ba852a63e133":null,"_oembed_d66baf1301b99db8b19a0924319cf03e":null,"_oembed_time_d66baf1301b99db8b19a0924319cf03e":null,"_oembed_14a5f80e3eef4903e482b0ef3799659e":null,"_oembed_time_14a5f80e3eef4903e482b0ef3799659e":null,"_oembed_c24c715adb3853482526a794a5f3c3bb":null,"_oembed_time_c24c715adb3853482526a794a5f3c3bb":null,"_oembed_9c493e098be2852715cc990b6e6243f3":null,"_oembed_time_9c493e098be2852715cc990b6e6243f3":null,"_oembed_b60b7e3028d326711916099f54e986fa":null,"_oembed_time_b60b7e3028d326711916099f54e986fa":null,"_oembed_5283e19fcec44e632de8d436d46ec2f7":null,"_oembed_time_5283e19fcec44e632de8d436d46ec2f7":null,"_oembed_057692cb4479cf5c77363896a28db44f":null,"_oembed_time_057692cb4479cf5c77363896a28db44f":null,"_oembed_e8cb0f41d141fe5eb9d69fc32a98cd72":null,"_oembed_time_e8cb0f41d141fe5eb9d69fc32a98cd72":null,"_oembed_75dcbca80ec1829a77578390fae8fa56":null,"_oembed_time_75dcbca80ec1829a77578390fae8fa56":null,"_oembed_e49318dfeabd5f16d7967e2fcc746fbd":null,"_oembed_time_e49318dfeabd5f16d7967e2fcc746fbd":null,"_oembed_76116b03fe5a013341210d278021184b":null,"_oembed_time_76116b03fe5a013341210d278021184b":null,"_oembed_6c81e1c9b634b5066fb37aaccfd71053":null,"_oembed_time_6c81e1c9b634b5066fb37aaccfd71053":null,"_oembed_abbc1aa97e554f334c2ce25f0d883702":null,"_oembed_time_abbc1aa97e554f334c2ce25f0d883702":null,"_oembed_ba421363b36dd97c087665d5025396cf":null,"_oembed_time_ba421363b36dd97c087665d5025396cf":null,"_oembed_a98f236eb48eb9cd4ede7f319e9cfbc7":null,"_oembed_time_a98f236eb48eb9cd4ede7f319e9cfbc7":null,"_oembed_d61fec7d73397687995fec8d7bd9852f":null,"_oembed_time_d61fec7d73397687995fec8d7bd9852f":null,"_oembed_2e9e46a0176fe90e49cc5fff32ac6912":null,"_oembed_time_2e9e46a0176fe90e49cc5fff32ac6912":null,"_oembed_8a304f49b3aa1c3eec8d0b0577e05e3d":null,"_oembed_time_8a304f49b3aa1c3eec8d0b0577e05e3d":null,"_oembed_ad30824ca1e37cffdad2dbce46c4998a":null,"_oembed_time_ad30824ca1e37cffdad2dbce46c4998a":null,"_oembed_6c3dacc8273d4877c65378c1f324c9cc":null,"_oembed_time_6c3dacc8273d4877c65378c1f324c9cc":null,"_oembed_1d0e7d3c6d826ca1e56a24218abba6f2":null,"_oembed_time_1d0e7d3c6d826ca1e56a24218abba6f2":null,"_oembed_50929cd1300f7cdee57e6e5451afb186":null,"_oembed_time_50929cd1300f7cdee57e6e5451afb186":null,"_oembed_72dc139d079681a2c3d759a86af48ccc":null,"_oembed_time_72dc139d079681a2c3d759a86af48ccc":null,"_oembed_d359fdb1fa5da9e62dd3505937f46fb6":null,"_oembed_time_d359fdb1fa5da9e62dd3505937f46fb6":null,"_oembed_589d6065ccac39334963be5bd8656631":null,"_oembed_time_589d6065ccac39334963be5bd8656631":null,"_oembed_715be02b6ebadc1be6dd638a57d01eb7":null,"_oembed_time_715be02b6ebadc1be6dd638a57d01eb7":null,"_oembed_f5139a9df267d3aa532f5b56409c90b0":null,"_oembed_time_f5139a9df267d3aa532f5b56409c90b0":null,"_oembed_3d9a26be229b27005ca74596fb62cc08":null,"_oembed_time_3d9a26be229b27005ca74596fb62cc08":null,"_oembed_a7d6f0ce79de685fc6f7f4d447e15468":null,"_oembed_time_a7d6f0ce79de685fc6f7f4d447e15468":null,"_oembed_20849479e832b5312335e3086c5f972b":null,"_oembed_time_20849479e832b5312335e3086c5f972b":null,"_oembed_2be4d392f66846deb7624c1bf3bc293e":null,"_oembed_time_2be4d392f66846deb7624c1bf3bc293e":null,"_oembed_9bcf546ec292041d23df28a719840688":null,"_oembed_time_9bcf546ec292041d23df28a719840688":null,"_oembed_0858ffd7404bcd7d82896f942481fe63":null,"_oembed_time_0858ffd7404bcd7d82896f942481fe63":null,"_oembed_4a2dd0ecf082a7c7d82731c06a644799":null,"_oembed_time_4a2dd0ecf082a7c7d82731c06a644799":null,"_oembed_8a1e46bc730cb21c1085d157ae6fa8b6":null,"_oembed_time_8a1e46bc730cb21c1085d157ae6fa8b6":null,"_oembed_cae7deb931d75f809e459e912e71429a":null,"_oembed_time_cae7deb931d75f809e459e912e71429a":null,"_oembed_6fcb4f8ab72abccda75674f71a946f97":null,"_oembed_time_6fcb4f8ab72abccda75674f71a946f97":null,"_oembed_7f0bfd584f844117a64fe73d83b43245":null,"_oembed_time_7f0bfd584f844117a64fe73d83b43245":null,"_oembed_d0aea105cffdf6e004979cf1e4f51e96":null,"_oembed_time_d0aea105cffdf6e004979cf1e4f51e96":null,"_oembed_e53b85b8766b3dc91338f6c1b95a2541":null,"_oembed_time_e53b85b8766b3dc91338f6c1b95a2541":null,"_oembed_48832be87b763046d232c1f2b5ac5fb3":null,"_oembed_time_48832be87b763046d232c1f2b5ac5fb3":null,"_oembed_32a9a34fcf91c466be9a08e1dba3c84e":null,"_oembed_time_32a9a34fcf91c466be9a08e1dba3c84e":null,"_oembed_fb50b2dc07acfa2418f00cdc2ad4c4c2":null,"_oembed_time_fb50b2dc07acfa2418f00cdc2ad4c4c2":null,"_oembed_3089e1d62f944a73b38c996e49abd2fc":null,"_oembed_time_3089e1d62f944a73b38c996e49abd2fc":null,"_oembed_1ecc99e75cf5d001c8da4f4d600703a8":null,"_oembed_time_1ecc99e75cf5d001c8da4f4d600703a8":null,"_oembed_b9c03ca24b382c17966861d251dc3b8d":null,"_oembed_time_b9c03ca24b382c17966861d251dc3b8d":null,"_wp_trash_meta_status":null,"_wp_trash_meta_time":null,"_wp_desired_post_slug":null,"_oembed_031755ba22f2b639d88c78254a99ff39":null,"_oembed_time_031755ba22f2b639d88c78254a99ff39":null,"description_de_la_ressource":null,"_description_de_la_ressource":null,"titre_du_fichier":null,"_titre_du_fichier":null,"_edit_last":null,"_edit_lock":null,"_wp_old_slug":null,"_top_nav_excluded":null,"_cms_nav_minihome":null,"inline_featured_image":null,"_yoast_wpseo_estimated-reading-time-minutes":null,"_yoast_wpseo_wordproof_timestamp":null,"_wpml_media_duplicate":"1","_thumbnail_id":"219513","_wpml_media_featured":"1","_wpml_word_count":null,"_last_translation_edit_mode":null,"_last_editor_used_jetpack":null,"_elementor_edit_mode":null,"_elementor_template_type":null,"_wp_page_template":"default","_elementor_page_settings":null,"_elementor_data":null,"_elementor_page_assets":[],"_elementor_version":null,"_elementor_pro_version":null,"_elementor_elements_default_values":null,"_elementor_css":null,"_elementor_source":null,"_elementor_conditions":null,"_wpml_location_migration_done":null,"_elementor_controls_usage":null,"_elementor_screenshot_failed":null,"_elementor_screenshot":null,"_elementor_popup_display_settings":null,"_yoast_wpseo_primary_category":null,"_wp_old_date":null,"_elementor_template_widget_type":null,"_icl_lang_duplicate_of":null,"_yoast_wpseo_metadesc":"Quando se fala em JavaScript no navegador, existem 3 conceitos a serem bem compreendidos: DOM selection, Event Handling e AJAX.","_yoast_wpseo_title":"Modern Javascript in the Browser | Le Wagon","contenu_de_larticle":"
<ul id=\"cities\"> \n <li class=\"europe\">Paris<\/li> \n <li class=\"europe\">London<\/li>\n <li class=\"europe\">Berlin<\/li>\n <li class=\"asia\">Shanghai<\/li>\n <li class=\"america\">Montreal<\/li>\n<\/ul><\/pre>\n\n
\n<\/div>\n\n A maneira mais f\u00e1cil para selecionar um elemento no DOM \u00e9 usando seu id:\n<\/div>\n\n
\n<\/div>\nconst list = document.getElementById(\"cities\");<\/pre>\n\n
Mas esta n\u00e3o \u00e9 a \u00fanica maneira, podemos usar tamb\u00e9m um seletor CSS: \n<\/div>\n\n const list = document.querySelector(\"#cities\");\n<\/div>\n\n Cada um destes m\u00e9todos ir\u00e1 obrigatoriamente retornar um e apenas um elemento. Garantido! Mas e se voc\u00ea quiser selecionar todos os elementos da classe \"europe\" dentro da lista? Para fazer isso voc\u00ea vai precisar de um seletor CSS um pouquinho mais complexo:\n
\n
\n<\/div>\nconst europeanCities = document.querySelectorAll(\"#cities .europe\");\neuropeanCities.forEach((city) => { \n city.classList.add('highlight');\n});<\/pre>\n\n
\n<\/div>\n\n No c\u00f3digo acima, o comando querySelectorAll \n sempre<\/strong> ir\u00e1 retornar uma \n NodeList<\/strong><\/a> (que pode conter apenas um elemento). Em seguida voc\u00ea chama o m\u00e9todo forEach nesta lista. (usamos aqui uma \n ES6 arrow function<\/a> quem tem \n amplo suporte<\/a>). \n<\/div>\n\n
\n<\/div>\n\n Para conseguir percorrer o DOM a partir de um dado elemento, veja \n parentElement<\/a>, \n children<\/a> e \n nextElementSibling<\/a>. \u00c9 uma grande \u00e1rvore geneal\u00f3gica!\n<\/div>\n\n
\n
\n<\/div>\n2 - Binding and handling Events<\/h2>\n
\n
\n<\/div>\n\n O browser \u00e9 uma interface gr\u00e1fica (ou em ingl\u00eas, Graphical User Interface \u2013 GUI). Isso quer dizer que um usu\u00e1rio ir\u00e1 interagir com ele e voc\u00ea n\u00e3o pode prever que a\u00e7\u00f5es este usu\u00e1rio vai tomar. Ele vai clicar no bot\u00e3o A primeiro? Ou vai fazer scroll pra baixo e clicar em um link? Ou passar o mouse acima de uma imagem? \n<\/div>\n\n
\n<\/div>\n\n Quando a gente v\u00ea um website, o broser gera muitos eventos. Cada vez que voc\u00ea \"scrolla\" um pixel para baixo no seu trackpad ou mouse, um \n scroll<\/a> event \u00e9 disparado. Teste voc\u00ea mesmo! Abra o console de seu navegador (usando o inspector) e digite esta linha de JavaScript (e depois d\u00ea Enter): \n<\/div>\n\n
\n<\/div>\n\n document.addEventListener('scroll', () => console.log(document.body.scrollTop));\n<\/div>\n\n
\n<\/div>\n\n E agora... d\u00ea um scoll!! E a\u00ed? Viu? Cada evento logado representa um pixel \"scrollado\" para cima ou para baixo, desde que a p\u00e1gina foi carregada. \n<\/div>\n\n
\n<\/div>\n\n Imagine agora o c\u00f3digo HTML abaixo:\n<\/div>\n\n
\n<\/div>\n<button id=\"openModal\"><\/button><\/pre>\n\n
\n<\/div>\n\n Voc\u00ea pode adicionar um \n callback<\/strong> ao evento de click deste bot\u00e3o com o seguinte c\u00f3digo JavaScript:\n<\/div>\n\n
\n<\/div>\nconst button = document.getElementById('openModal');\nbutton.addEventListener(\"click\", (event) => { \n console.log(event.target); \/\/ `event.target` \u00e9 o elemento onde o usu\u00e1rio clicou\n alert(\"You clicked me!\"); \n});<\/pre>\n\n
\n<\/div>\n\n Voc\u00ea pode ler mais sobre \n addEventListener<\/a> na documenta\u00e7\u00e3o MDN \n<\/div>\n