{"id":424,"date":"2020-07-01T13:35:08","date_gmt":"2020-07-01T16:35:08","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=424"},"modified":"2022-12-09T08:38:38","modified_gmt":"2022-12-09T11:38:38","slug":"javascript-em-html","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/javascript-em-html\/","title":{"rendered":"JavaScript em HTML"},"content":{"rendered":"

JavaScript torna as p\u00e1ginas HTML mais din\u00e2micas e interativas.<\/p>\n

 <\/p>\n

Comece testando esse script<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<h1>My First JavaScript<\/h1>\r\n\r\n<button type=\"button\"\r\nonclick=\"document.getElementById('demo').innerHTML = Date()\">\r\nClick me to display Date and Time.<\/button>\r\n\r\n<p id=\"demo\"><\/p>\r\n\r\n<\/body>\r\n<\/html> \r\n<\/pre>\n


<\/center>\n
 <\/p>\n
A tag <script><\/code> HTML<\/strong><\/p>\n
A <script><\/code>tag HTML \u00e9 usada para definir um script do lado do cliente (JavaScript).<\/p>\n
O <script><\/code>elemento cont\u00e9m instru\u00e7\u00f5es de script ou aponta para um arquivo de script externo por meio do srcatributo<\/p>\n
Os usos comuns para JavaScript s\u00e3o manipula\u00e7\u00e3o de imagem, valida\u00e7\u00e3o de formul\u00e1rio e altera\u00e7\u00f5es din\u00e2micas de conte\u00fado.<\/p>\n
Para selecionar um elemento HTML, o JavaScript costuma usar o document.getElementById()m\u00e9todo.<\/p>\n
Este exemplo de JavaScript escreve “Ol\u00e1 JavaScript!” em um elemento HTML com id = “demo”:<\/p>\n
Aqui est\u00e3o alguns exemplos do que o JavaScript pode fazer:<\/p>\n
 <\/p>\n
Exemplo<\/strong>
\nJavaScript pode alterar o conte\u00fado:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<h1>My First JavaScript<\/h1>\r\n\r\n<p>JavaScript can change the content of an HTML element:<\/p>\r\n\r\n<button type=\"button\" onclick=\"myFunction()\">Click Me!<\/button>\r\n\r\n<p id=\"demo\">This is a demonstration.<\/p>\r\n\r\n<script>\r\nfunction myFunction() { \r\n  document.getElementById(\"demo\").innerHTML = \"Hello JavaScript!\";\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Cor de fundo<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<h1>My First JavaScript<\/h1>\r\n\r\n<p id=\"demo\">JavaScript can change the style of an HTML element.<\/p>\r\n\r\n<script>\r\nfunction myFunction() {\r\n  document.getElementById(\"demo\").style.fontSize = \"25px\"; \r\n  document.getElementById(\"demo\").style.color = \"red\";\r\n  document.getElementById(\"demo\").style.backgroundColor = \"yellow\";        \r\n}\r\n<\/script>\r\n\r\n<button type=\"button\" onclick=\"myFunction()\">Click Me!<\/button>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Olha esse exemplo de acender uma l\u00e2mpada.<\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<h1>My First JavaScript<\/h1>\r\n<p>Acenda a luz com javascript<\/p>\r\n\r\n<script>\r\nfunction light(sw) {\r\n  var pic;\r\n  if (sw == 0) {\r\n    pic = \"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/javascript-em-html-1.png\"\r\n  } else {\r\n    pic = \"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/javascript-em-html.png\"\r\n  }\r\n  document.getElementById('myImage').src = pic;\r\n}\r\n<\/script>\r\n\r\n<img id=\"myImage\" src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/javascript-em-html-1.png\" width=\"100\" height=\"180\">\r\n\r\n<p>\r\n<button type=\"button\" onclick=\"light(1)\">Light On<\/button>\r\n<button type=\"button\" onclick=\"light(0)\">Light Off<\/button>\r\n<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
A tag HTML <noscript><\/strong><\/p>\n
A <noscript><\/code>tag HTML define um conte\u00fado alternativo a ser exibido para usu\u00e1rios que desativaram scripts no navegador ou que n\u00e3o oferecem suporte a scripts:<\/p>\n
Exemplo<\/p>\n
<script><\/code>
\ndocument.getElementById(\"demo\").innerHTML = \"Hello JavaScript!\";<\/code>
\n<\/script><\/code>
\n<noscript>N\u00e3o suporta script<\/noscript><\/span><\/code><\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n