Cómo insertar JavaScript en HTML

Escrito por kevin lee | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo insertar JavaScript en HTML
HTML and JavaScript power the World Wide Web. (www laptop image by Photoeyes from Fotolia.com)

Una página HTML sin JavaScript es como un televisor sin mando. Ambos muestran contenido, pero no puedes hacer mucho con él. JavaScript es un lenguaje de programación que permite a los desarrolladores añadir efectos visuales a las páginas web y hacerlas más interactivas. La simplicidad de JavaScript lo convierte en una herramienta de desarrollo ideal para los programadores web novatos. Añade JavaScript a tu página web insertándolo directamente en el HTML de la página o incluyendo una referencia a un archivo externo de JavaScript.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Haz clic en "Inicio" y escribe "Notepad". Pulsa "Intro". Se abrirá Notepad. Añade este texto al archivo: <script src="ExternalJavaScript.js" type="text/javascript"></script>

  2. 2

    Pulsa "CTRL + S" para abrir la ventana "Guardar como". Navega a la carpeta "Escritorio" y haz clic en "Nueva carpeta" en la parte superior de la ventana. Escribe "Test_HTML_JavaScript1" para darle un nombre a la carpeta.

  3. 3

    Haz doble clic en la carpeta para abrirla. Escribe "ExternalJavaScript.js" en el cuadro de texto "Nombre del archivo", y haz clic en "Guardar". Notepad lo guardará como un archivo JavaScript en la carpeta "Test_HTML_JavaScript1".

  4. 4

    Añade el siguiente código al documento: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript Test</title> </head> <body> <h1> Test Adding JavaScript to HTML </h1> </body> </html> Esto creará un documento HTML que contiene una cabecera.

  5. 5

    Añade este texto detrás de la etiqueta "<title>": <script src="ExternalJavaScript.js" type="text/javascript"></script> Esta sentencia añadirá una referencia a un archivo externo de JavaScript. Un navegador ejecutará el código del archivo cuando la página web se cargue.

  6. 6

    Añade este bloque de código después del código anterior: <script type="text/javascript"> var x = 1; var y = 2; var sum = x + y; var message = "The sum of X and Y is " + sum; alert(message); </script> Esto crea un bloque en la misma línea de tu código JavaScript. El código añade dos números y muestra la suma cuando se carga en el navegador.

  7. 7

    Haz clic en "Archivo", selecciona "Guardar como" para abrir la ventana "Guardar como". Escribe "Test_HTML_JavaScript.html" en el cuadro de texto "Nombre de archivo", y haz clic en "Guardar". Notepad guardará el archivo como un documento HTML en la misma carpeta que el archivo externo JavaScript.

  8. 8

    Navega a tu escritorio, y busca la carpeta "Test_HTML_JavaScript1". Haz doble clic sobre ella para abrirla.

  9. 9

    Haz doble clic sobre "Test_HTML_JavaScript.html". Tu navegador se abrirá y mostrará un mensaje advirtiéndote sobre el archivo externo JavaScript, y otro mensaje que advertirá sobre el código JavaScript de la línea.

Consejos y advertencias

  • Añade tantos enlaces externos a JavaScript como necesites. Cada enlace externo crea una llamada a un servidor web. Es recomendable añadir pocos enlaces externos para minimizar el tiempo de carga de la página. También puedes colocar un bloque en la línea "" en cualquier sitio de la sección "" de un documento HTML. Sin embargo, la mayoría de los desarrolladores lo colocan en la sección "" del documento.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles