Descarga la hoja de trucos HTML definitiva<\/a><\/p> Hay dos formas de insertar JavaScript en HTML y hacer que funcionen juntos. Echemos un vistazo a algunas de las formas en que podemos conectar JavaScript con HTML.<\/p> La primera forma de insertar JavaScript en HTML es directa. Puedes hacerlo utilizando la etiqueta <script> <\/script><\/strong> que debe envolver todo el código JavaScript que escribas. Se puede agregar el código JavaScript:<\/p> Dependiendo de dónde agregues el código JavaScript en tu archivo HTML, la carga será diferente. <\/p> Por lo general se recomienda agregarlo en la sección <head><\/strong> para que permanezca separado del contenido de tu archivo HTML. Pero colocarlo dentro de <body><\/strong> puede ayudar a mejorar la velocidad de carga, ya que el contenido del sitio web se cargará más rápido, y solo después de eso se procesará el JavaScript.<\/p> Para este ejemplo, echemos un vistazo al siguiente archivo HTML que debe mostrar la hora actual:<\/p> En este momento, el código anterior no contiene JavaScript y, por lo tanto, no puede mostrar la hora. Podemos agregar el siguiente código para asegurarnos de que muestre la hora correcta:<\/p> Envolveremos este código entre <script><\/strong> y <\/script><\/strong> y lo colocaremos en la cabecera (head) del código HTML para garantizar que cada vez que se cargue la página, se genere una alerta que muestre la hora actual al usuario. Así es como se verá el archivo HTML después de agregar el código:<\/p> Si quieres mostrar la hora dentro del cuerpo (body) de la página, deberás incluir la script dentro de las etiquetas <body> de la página HTML. Así es como se verá el código cuando lo hagas:<\/p> Así es como se vería el resultado final:<\/p> A veces, insertar JavaScript en HTML directamente no parece ser la mejor opción. Sobre todo porque algunos scripts de JS deben utilizarse en varias páginas, por lo tanto, es mejor mantener el código JavaScript en archivos separados. <\/p> Es por esto que la forma más aceptable de incluir JavaScript en HTML es importando archivos externos.<\/p> Se puede hacer referencia a estos archivos desde adentro de los documentos HTML, al igual que hacemos referencia a los documentos CSS. Algunos de los beneficios de agregar código JavaScript en archivos separados son:<\/p> Podemos hacer referencia al archivo JavaScript desde HTML así:<\/p> El contenido del archivo myscript.js será:<\/p> ¡Importante!<\/strong> Aquí se asume que el archivo myscript.js<\/strong> se encuentra en el mismo<\/strong> directorio que el archivo HTML.<\/p> JavaScript potencia tu aplicación al ayudarte a validar los datos ingresados por el usuario en el lado del cliente. Uno de los datos del usuario más importantes que a menudo necesitan validación son las direcciones de correo electrónico. <\/p> Esta función de JavaScript puede ayudarte a validar la dirección de correo electrónico ingresada antes de enviarla al servidor:<\/p> Para adjuntar esta función a una entrada de formulario, puedes usar el siguiente código:<\/p> Este es el resultado que obtendrías después de combinar todos los ingredientes en un archivo HTML: Y si la validación es incorrecta, el resultado será diferente:<\/p> ¡Felicitaciones! Has aprendido a insertar JavaScript en HTML con algunos ejemplos básicos.<\/p> JavaScript primero fue conocido como LiveScript. Pero como Java<\/a> era un lenguaje muy popular, Netscape decidió cambiarle el nombre a JavaScript. Su primera aparición se remonta a 1995 dentro de Netscape 2.0. Estas son algunas de las principales ventajas de usar JavaScript:<\/p> Es un hecho bien conocido que si quieres optimizar el rendimiento de un sitio web, la mejor manera es reducir la comunicación con el servidor. <\/p> JavaScript ayuda en este sentido al validar la información que ingresa el usuario en el lado del cliente. Solo envía solicitudes al servidor después de ejecutar las comprobaciones de validación iniciales. Como resultado, el uso de recursos y la cantidad de solicitudes al servidor se reduce significativamente.<\/p> Al usar JavaScript, puedes crear interfaces interactivas del lado del cliente. Por ejemplo, agregar controles deslizantes, presentaciones de diapositivas, efectos al poner el cursor sobre objetos, funciones de arrastrar y soltar, etc.<\/p> Al usar JavaScript, puedes asegurarte de que los usuarios obtengan una respuesta inmediata. Por ejemplo, imaginemos que un usuario ha rellenado un formulario y ha dejado un campo vacío. <\/p> Sin la validación de JavaScript, tendrán que esperar a que la página se vuelva a cargar solo para darse cuenta de que dejaron un campo vacío. Sin embargo, con JavaScript, serán alertados al instante.<\/p> JavaScript es un lenguaje interpretado, lo que significa que el código escrito se descifra línea por línea. En caso de que aparezcan errores, obtendrás el número de línea exacto donde se encuentra el problema.<\/p> En este artículo hablamos sobre las dos formas de incluir JavaScript en el código HTML y, cuando lo entiendas aún mejor, las posibilidades de hacer grandes cosas con ellos dos son infinitas. <\/p> JavaScript se puede usar en combinación con HTML para dar forma a aplicaciones web modernas que sean intuitivas, interactivas y fáciles de usar.<\/p> Al usar la validación simple del lado del cliente, se reduce el tráfico del servidor y mejora la eficiencia general del sitio web.<\/p> Esperamos que esta guía te haya sido de utilidad. Si tienes algún comentario o pregunta sobre cómo incluir JavaScript en HTML, escríbela en la sección de abajo. ¡Buena suerte!<\/p>\n","protected":false},"excerpt":{"rendered":" Si quieres mostrar contenido estático como, por ejemplo, un conjunto de imágenes, entonces HTML puede hacer el trabajo por ti. Sin embargo, las páginas estáticas se están convirtiendo en cosa del pasado. La mayor parte del contenido actual es interactivo e incluye vistosas presentaciones de diapositivas, formularios y menús. Estos elementos mejoran la experiencia del […]<\/p>\nCómo insertar JavaScript en HTML<\/h2>
Agregar JavaScript directamente a un archivo HTML<\/h3>
\n
<!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>
var time = new Date();\nconsole.log(time.getHours() + \":\" + time.getMinutes() + \":\" + time.getSeconds());<\/pre>
<!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>
<!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>
![\"Ejemplo](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2018\/04\/insertar-javascript-en-html-1.png\")
<\/figure><\/div>Agregar código JavaScript a un archivo separado<\/h3>
\n
<!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>
let d = new Date();\ndocument.body.innerHTML = \"<h1>Time right now is: \" + d.getHours() + \":\" + d.getMinutes() + \":\" + d.getSeconds()<\/h1>\"<\/pre>
Ejemplo de JavaScript para validar una dirección de correo electrónico<\/h2>
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><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>
<\/p>![\"Ejemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/04\/insertar-javascript-en-html-2.png\/public\")
<\/figure><\/div>![\"Ejemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/04\/insertar-javascript-en-html-3.png\/public\")
<\/figure><\/div>Ventajas de JavaScript<\/h2>
Interacción mínima con el servidor<\/h3>
Interfaces más completas y fáciles de usar<\/h3>
Retroalimentación inmediata para el usuario<\/h3>
Fácil depuración<\/h3>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/public\")
<\/a><\/figure>Conclusión<\/h2>