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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 67
Visitas el mes pasado: 144
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
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>
<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 instrucción 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 escribir 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">
<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">
<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:
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.
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com