Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 146

Visitas el mes pasado: 178

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




1. Primeros pasos (III)

1.3 Insertar el código

javascript

Hay tres maneras de insertar el código javascript en la página, la primera es en el propio documento, la segunda mediante un archivo externo, y la tercera en los propios elementos html.


En el propio documento

Para incluir código Javascript en el propio documento lo haremos mediante la etiqueta <script .. > </script>. la etiqueta debe escribirse de la siguiente manera:

<script type="text/javascript">
... codigo javascript ...
</script>

Debemos poner siempre el atributo type="text/javascript" para indicar que lo que vamos a escribir dentro de la etiqueta es código javascript.

Al código encerrado dentro de la etiqueta se le llama script. Un script es un fragmento de código que está dentro de una etiqueta, o de un archivo, y que se ejecuta todo seguido. No importa si tiene una sola sentencia o miles de ellas siempre que forme un bloque que se ejecute todo seguido.

A continuación vemos un ejemplo de un script sencillo incorporado en el código HTML mediante la etiqueta script. Puedes seguir los ejemplos que pongamos copiandolos en tu editor de texto y así probarlos tu también.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Javascript en la página</title>
  <script type="text/javascript">
     alert("Este es mi primer script")
  </script>
</head>
<body>
  <p>El script ha abierto una ventana de alerta.</p>
</body>
</html>

En el siguiente enlace vemos como debe quedar la página del código anterior:

Enlace a ejemplo 1: Javascript en la página.


En color siena hemos destadado el texto del script. La instruccion alert("texto_a_mostrar") abre una ventana de alerta que muestra lo que hay dentro del paréntesis. Esta es una sentencia de las más sencillas.

La etiqueta script la hemos escrito aquí en la cabacera del documento. (dentro de la etiqueta head, esto suele ser lo habitual, pero también podemos escribirla en cualquier otra parte de la página, es decir en la etiqueta body. Por tanto las etiquetas script pùeden colocarse en cualquier parte de la página, aunque siempre que se pueda, es preferible colocarla en la cabecera.


Código en un archivo aparte

Podemos colocar el código javascript en un archivo aparte. El sistema es similar al empleado para colocar el código CSS en archivo aparte. es decir, en la cabecera (o también en alguna otra parte del documento) escribimos una etiqueta de enlace al archivo. Luego creamos ese archivo que contendrá el código javascript.

Para ello en primer lugar debemos colocar la etiqueta la cual sera la siguiente:

<script type="text/javascript" src="ruta_del_archivo"></script>

La etiqueta llevará el atributo y valor: type="text/javascript" y el atributo src= "...", cuyo valor será la ruta del archivo externo donde se encuentre el código javascript.

El archivo externo es también un archivo creado con el editor de textos, y contiene el código javascript. debe llevar la extensión .js. El archivo debe contener únicamente el código javascript, sin ningún tipo de código HTML o de otra clase.

Si ponemos el script del ejemplo anterior en un archivo aparte, el código de la página quedará así:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Javascript en la página</title>
  <script type="text/javascript" src="codigo1.js></script>
</head>
<body>
  <p>El script ha abierto una ventana de alerta.</p>
</body>
</html>

Luego deberemos crear un archivo llamado codigo1.js ubicado en la misma carpeta que el anterior, y cuyo contenido será el codigo javascript que queremos aplicar: El archivo tendría el siguiente contenido: 


alert("Este es mi primer script")

El resultado, es el mismo que en el ejemplo anterior, pero aquí tenemos la ventaja de poder aplicar el mismo código a varias páginas, para ello sólamente hay que enlazar cada una de las páginas al archivo javascript.


Código en los elementos HTML

También podemos pòner el código en los elementos HTML a los que va a afectar. Aunque no suele ser lo más habitual, ya que alarga el código HTML y se mezcla con el de javascript.

Veamos un ejemplo:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title>Javascript en el código HTML</title>
</head>
<body>
   <h1>Ejemplo de script en el elemento HTML</h1>
   <p onclick="alert('este sigue siendo mi primer script')">
      Para ver el script pulsa en este párrafo</p>
</body>
</html>

El ejemplo dará como resultado la siguiente página:

Javascript en el código HTML.


Aquí hemos añadido otro elemento al código, que es el atributo onclick. Este elemento aunque se añade como un atributo de una etiqueta en HTML, forma parte del código de javascript. Como veremos más adelante forma parte de los elementos llamados "eventos" , que sirven para leer un determinado código cuando el usuario provoca una acción concreta. En este caso el código se activa al pulsar con el ratón sobre el sitio indicado (en este caso la propia etiqueta).



Para acabar este primer tema veremos en la siguiente página algunas particularidades del lenguaje Javascript antes de empezar a programar.

Otros aspectos.



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com