Entre as tags <body><\/b><\/li>\n<\/ul> Dependendo de onde você adicionar o código JavaScript no arquivo HTML, o carregamento é diferente. A prática recomendada é inseri-lo na seção <head><\/b>, pois ele ficará separado do conteúdo real do arquivo HTML.<\/p>
Mas saiba que, colocá-lo na seção <body> poderá melhorar a velocidade de carregamento, já que o conteúdo do site atual será carregado mais rapidamente, e somente então o JavaScript será analisado. Para este exemplo, vamos dar uma olhada no arquivo HTML abaixo, usado para mostrar o horário atual.<\/p>
<!DOCTYPE html>\n<html lang=\"en-US\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script>JAVASCRIPT IS USUALLY PLACED HERE<\/script>\n<title>Time right now is: <\/title>\n<\/head>\n<body>\n<script>JAVASCRIPT CAN ALSO GO HERE<\/script>\n<\/body>\n<\/html><\/pre>Neste formato, o código acima não tem JavaScript e, consequentemente, não pode mostrar a hora atual. Podemos adicionar o código abaixo para ter certeza de que a página irá mostrar a hora esperada correta.<\/p>
var time = new Date();\nconsole.log(time.getHours() + \":\" + time.getMinutes() + \":\" + time.getSeconds());<\/pre>Vamos colocar este código entre as tags <script><\/b> e <\/script><\/b> e colocá-lo no topo do código HTML para garantir que, quando a página carregar, um alerta é gerado e mostre a hora atual para o usuário. Abaixo você vê como o arquivo HTML deve ficar depois de inserir o código JavaScript nele:<\/p><!DOCTYPE html>\n<html lang=\"en-US\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Time right now is: <\/title>\n<script>\nvar time = new Date();\nconsole.log(time.getHours() + \":\" + time.getMinutes() + \":\" + time.getSeconds());\n<\/script>\n<\/head>\n<body>\n<\/body>\n<\/html><\/pre>Se você quiser mostrar a hora dentro do corpo da página, você precisa incluir o script dentro das tags <body> <\/b>do HTML da página. Abaixo você confere como o código deve ficar quando você fizer isso:<\/p><!DOCTYPE html>\n<html lang=\"en-US\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Time right now is: <\/title>\n<\/head>\n<body>\n<script>\nlet d = new Date();\ndocument.body.innerHTML = \"<h1>Time right now is: \" + d.getHours() + \":\" + d.getMinutes() + \":\" + d.getSeconds()\n\"<\/h1>\"\n<\/script>\n<\/body>\n<\/html><\/pre>E abaixo está o resultado final do que você deve ver na página:<\/span><\/p>\n
Como Adicionar JavaScript em um Arquivo Separado<\/h3> Às vezes, inserir JavaScript no HTML de forma direta pode não parecer o melhor jeito de ligar uma linguagem à outra. Isso porque porque alguns scripts JS precisam ser usados em múltiplas páginas e, por isso, é melhor manter o código JavaScript em arquivos separados.<\/p>
Por isso que um jeito mais aceitável de inserir JavaScript no HTML é pela importação externa de um arquivo. Esses arquivos podem ser referenciados de dentro de documentos HTML, assim como referenciamos documentos CSS.<\/p>
Alguns dos benefícios de adicionar um código JS em arquivos separados são:<\/p>
\nQuando o código HTML e o código JavaScript são separados, o princípio de design da separação de interesses é cumprido e torna tudo muito mais sustentável e reutilizável.<\/li>\n\n\n\n A leitura e a manutenção do código ficam muito mais fáceis de se fazer.<\/li>\n\n\n\n Arquivos JavaScript em cache melhoram o desempenho geral de um site ao diminuir o tempo que as páginas carregam.<\/li>\n<\/ul>Podemos referenciar um arquivo JavaScript dentro do HTML dessa forma abaixo:<\/p>
<!DOCTYPE html>\n<html lang=\"en-US\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Time right now:<\/title>\n<\/head>\n<body>\n<\/body>\n<script src=\"js\/myscript.js\"><\/script>\n<\/html><\/pre>Os conteúdos do arquivo myscript.js serão:<\/p>
et d = new Date();\ndocument.body.innerHTML = \"<h1>Time right now is: \" + d.getHours() + \":\" + d.getMinutes() + \":\" + d.getSeconds()<\/h1>\"<\/pre>\n\n\n
Importante!<\/strong> Aqui fica implícito que o arquivo myscript.js<\/strong> está presente no mesmo diretório<\/strong> que o arquivo HTML.<\/p><\/div>\n\n\n\n<\/p>Exemplo de JavaScript para Validar um Endereço de E-mail<\/h3> A linguagem JavaScript capacita a sua aplicação ajudando você a validar a entrada do usuário pelo cliente. Uma das entradas mais importantes feitas pelos usuários e que frequentemente precisam de validação é o endereço de e-mail.<\/p>
A função JavaScript abaixo pode ajudar você a validar um endereço de e-mail antes de enviá-lo para um servidor:<\/p>
function validateEmailAddress(email) {\nvar re = \/^(([^<>()[\\]\\\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$\/;\nreturn re.test(email);\n}\nfunction validate() {\n$(\"#result\").text(\"\");\nvar emailaddress = $(\"#email\").val();\nif (validateEmailAddress(emailaddress)) {\n$(\"#result\").text(emailaddress + \" is valid :)\");\n$(\"#result\").css(\"color\", \"green\");\n} else {\n$(\"#result\").text(emailaddress + \" is not correct, please retry:(\");\n$(\"#result\").css(\"color\", \"red\");\n}\nreturn false;\n}\n$(\"#validate\").bind(\"click\", validate);<\/pre>Para anexar essa função para uma entrada de formulário, você pode usar o código abaixo:<\/p>
<form>\n<p>Enter an email address:<\/p>\n<input id='email'>\n<button type='submit' id='validate'>Validate!<\/button>\n<\/form>\n<h2 id='result'><\/h2><\/pre>\n
Abaixo está o resultado que você obtém depois de combinar todos os ingredientes juntos em um arquivo HTML.<\/p>
\n
E se a validação for incorreta, o resultado será diferente:<\/p>
Conclusão<\/h2> Parabéns! Você aprendeu como inserir JavaScript no HTML com alguns exemplos básicos.<\/p>
Neste artigo, mostramos duas maneiras de adicionar JavaScript no HTML. E, uma vez que você se acostuma com as coisas, as possibilidades de fazer grandes coisas usando as duas linguagens de programação são ilimitadas.<\/p>
A JavaScript pode ser usada em combinação com o HTML para rodar aplicações modernas de internet que são intuitivas, interativas e amigáveis aos usuários. Por uma simples validação do cliente, ela reduz o tráfego do servidor e melhora a eficiẽncia geral de um site.<\/p>\n","protected":false},"excerpt":{"rendered":"
Neste tutorial, vamos mostrar para você como adicionar JavaScript no HTML. O começo deste guia vai ter uma curta introdução ao JavaScript, enquanto o restante do conteúdo vai focar em várias maneiras que ensinam você a como inserir JavaScript no HTML. Se você quer exibir no seu site um conteúdo estático como, por exemplo, um […]<\/p>\n
Read More…<\/a><\/p>\n","protected":false},"author":92,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Como adicionar JavaScript no HTML","rank_math_description":"Veja como \u00e9 f\u00e1cil adicionar c\u00f3digos JavaScript no HTML e tenha uma s\u00e9rie de vantagens no site que voc\u00ea desenvolver!","rank_math_focus_keyword":"JavaScript no HTML","footnotes":""},"categories":[4928],"tags":[4809,4793,5402,5268,5403],"class_list":["post-8921","post","type-post","status-publish","format-standard","hentry","category-html","tag-html","tag-javascript","tag-linguagem-de-programacao","tag-programacao","tag-scripts"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/add-javascript-to-html","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-adicionar-javascript-no-html","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/insertar-javascript-en-html","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-javascript-di-html","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/add-javascript-to-html","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/add-javascript-to-html","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/add-javascript-to-html","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/insertar-javascript-en-html\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/insertar-javascript-en-html\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/insertar-javascript-en-html\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-adicionar-javascript-no-html","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/add-javascript-to-html","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/add-javascript-to-html","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/add-javascript-to-html","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/add-javascript-to-html","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/8921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/92"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=8921"}],"version-history":[{"count":34,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/8921\/revisions"}],"predecessor-version":[{"id":38441,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/8921\/revisions\/38441"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=8921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=8921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=8921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/public\")
<\/a><\/figure>![\"exemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/f%C3%A1cil-depura%C3%A7%C3%A3o@4x-8.png\/public\")
<\/figure><\/div>![\"exemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/adicionar-javascript-no-html-1.png\/public\")
<\/figure><\/div>![\"validação](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/adicionar-javascript-no-html-2.png\/public\")
<\/figure><\/div>![\"validação](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/adicionar-javascript-no-html-3.png\/public\")
<\/figure><\/div>