CU01110E Archivos Extension Js Codigo Javascript Externo Referenciado

JavaScript externo en archivos de extensin js.
ARCHIVOS DE EXTENSIN
JS. INCLUIR JAVASCRIPT
EN WEBS
APRENDERAPROGRAMAR.COM
REFERENCIANDO UN
ARCHIVO EXTERNO CON
SRC (CU01110E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
Fecha revisin: 2029
Resumen: Entrega n10 del Tutorial bsico JavaScript desde cero.
Autor: Csar Krall
aprenderaprogramar.com, 2006-2029
JavaScript externo
e en arch
hivos de extenssin js.
JAVASCRIIPT EN ARCH
HIVOS JS
Hemos visto que poddemos incluirr JavaScript embebido dentro de una

u lnea dee HTML o deentro de la
cabecera del documeento HTML. Pero esto seer poco prctico cuanddo tengamoss muchas pginas web
que neceesiten usar las mismas funciones JaavaScript. V
Vamos a estar repitiend
do el cdigo
o en cada
pgina?
JAVASCRIIPT EXTERNO
O EN ARCHIV
VOS JS
De la misma forma qu ue el cdigo CSS puede estar

e conten
nido en archiivos externos con extenssin css, el
cdigo JavvaScript pueede independizarse del documento
d HTML introdducindolo een un archivoo de texto
nsin .js y que se invocar desde el c
con exten digo HTML de la forma que mostram mos a contin
nuacin:
<head>

<script type="text/ja
t avascript" src=="rutaDelArch
hivo1.js"></script>
t hivo2.js"></script>
avascript" src=="rutaDelArch
t hivo3.js"></script>
avascript" src=="rutaDelArch

</head>>
Podemos invocar un solo

s archivo, o dos, tres, cuatro tantos como resulten necessarios.
En el atributo src ten nemos que especificar

e no indicamos nada, se
laa ruta del arrchivo refereenciado (si n
sobreentiende que esst en el missmo directorrio que el do ocumento HTTML). Supongamos que un u archivo
externo con cdigo JaavaScript se llamara
l funcctions.js y esttuviera dentro de una caarpeta denom
minada jsf.
En ese casso escribiram
mos: src="/jssf/functions..js"
En generaal tener el c
digo JavaScrript en archivvos independdientes ser lo ms prcctico desde el
e punto de
vista del mantenimiento de un sitio web. Tendremos lass funciones agrupadas
a y ordenadas, pudiendo
ser invoccadas desdee cualquier parte de nuestra pgina web. Esto nos ahorrar tiiempo de
mantenim miento: si tenemos 200 documentoss html, no te endremos que hacer 20 00 modificaciones sino
nicamen nte modificarr el archivo o los archivos con las fun
nciones JavaSScript que ussamos en tod
do nuestro
sitio web..
aprenderraprogramar.co
om, 2006-2029
Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html:
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript" src="functions.js"></script>
</head>
<body onload="alert('Completada la carga de la pgina')">
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick="mostrarMensaje2()">Aqu otro prrafo de texto. JavaScript es un lenguaje utilizado para dotar
de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>
Crea un archivo de nombre functions.js (cralo con un editor de textos como el bloc de notas,
Notepad++ o cualquier otro) y escribe el siguiente cdigo:
function mostrarMensaje1(){
alert('Bienvenido al curso JavaScript de aprenderaprogramar.com');
}
function mostrarMensaje2(){
alert('Ha hecho click sobre el prrafo inferior');
}
El resultado esperado al cargar la pgina html ser el siguiente:
1) Nada ms cargarse la pgina aparecer una ventana informativa con el texto Completada la carga
de la pgina. Esto se debe a que hemos incluido JavaScript en lnea asociado a la etiqueta body. El
evento onload se produce cuando el elemento body se ha cargado completamente en el navegador. En
ese momento se dispara el cdigo JavaScript asociado.
2) Al hacer click sobre la imagen se muestra un mensaje (el mensaje 1), debido a que hemos indicado
que cuando se produzca el evento onclick sobre la imagen, debe ejecutarse la funcin
mostrarMensaje1(). Esta funcin no se encuentra dentro del documento html, pero el navegador ha
incorporado el cdigo JavaScript externo porque as se lo hemos indicado al indicar src =
functions.php. Por tanto el cdigo externo funciona como si fuera cdigo incluido en el propio
documento html.
3) Al hacer click sobre el prrafo inferior se mostrar otro mensaje (el mensaje 2), debido a que hemos
indicado que cuando se produzca el evento onclick sobre el segundo prrafo debe ejecutarse la funcin
mostrarMensaje2().
Nos podemos hacer algunas preguntas como:
Por qu tenemos una funcin definida en lnea y otras definidas en archivos externos?
En general ser ms interesante tener todo el cdigo organizado en un archivo externo en lugar de
tenerlo desperdigado en scripts dentro de html, cdigo en lnea, etc. No obstante, acostmbrate a
que por mltiples motivos te puedes encontrar con pginas web donde la organizacin del cdigo no
sea buena. El navegador aceptar el cdigo que se encuentre, tanto en lnea, como interno, como
externo. Como programadores deberemos intentar mantener el cdigo tan ordenado como sea posible.
Para ello es til usar archivos externos y agrupar las funciones de un mismo tipo dentro de carpetas y
archivos con nombres descriptivos. Por ejemplo si tenemos un reloj javascript, todas las funciones
asociadas al reloj pueden ir dentro de un archivo de nombre reloj.js. Si tenemos una calculadora con
diferentes funciones, podemos crear una carpeta calculadora y dentro de ella poner los archivos
calculosAritmeticos.js, calculosFinancieros.js y calculosCientificos.js por ejemplo.
No hay que incluir las etiquetas <script> </script> en el archivo js?

No, de hecho si lo hacemos el cdigo JavaScript es probable que no funcione al no ser capaz el
intrprete del navegador de entender su significado en ese contexto. En los archivos js se incluye cdigo
JavaScript nicamente. La etiqueta <script> </script> es cdigo html que se utiliza para delimitar el
cdigo JavaScript dentro de un documento html. Esas etiquetas no forman parte del lenguaje
JavaScript, por tanto no tiene sentido incluirlas en un documento JavaScript. Si el navegador encuentra
cosas extraas en un archivo js posiblemente ignore todo su contenido (con lo cual no ejecutar
ninguna funcin y no veremos resultado alguno).
Puedo ver el cdigo JavaScript si visualizo el cdigo fuente de la pgina web?

Depende. El cdigo JavaScript en lnea o interno forma parte del documento HTML, por tanto si
visualizas el cdigo fuente de la pgina s podrs verlo. En cambio el cdigo en archivos externos no
podrs verlo directamente dentro del cdigo HTML de la web, aunque s podrs ver el archivo al que se
referencia. Podrs acceder al cdigo JavaScript escribiendo la ruta correspondiente. Por ejemplo
file:///C:/EjemplosCursoJavaScript/functions.js podra ser una ruta en local (en nuestro ordenador) o
http://aprenderaprogramar.com/media/system/js/modal.js podra ser una ruta en una pgina web on-
line. De este modo podemos visualizar el cdigo JavaScript asociado a una pgina web.
Entonces me pueden copiar otras personas mi cdigo JavaScript (y yo copiarlo de otras webs)?
S. Ten en cuenta que JavaScript se ejecuta del lado del cliente, es decir, en el ordenador del usuario. Lo
mismo que el cdigo HTML y el cdigo CSS.
Puede robarse informacin del usario o introducir virus usando JavaScript?

En general no, ya que los navegadores y sistemas operativos incluyen medidas de seguridad que
impiden que a travs de cdigo JavaScript se pueda acceder al ordenador del usuario. No obstante,
siempre hay mentes perversas que buscan fallos de seguridad en los sistemas e intentan hacer cosas
de este tipo. Es muy difcil, pero a veces lo consiguen (y seguidamente son perseguidos por la polica).
Deshabilitar JavaScript puede ser una buena medida de seguridad?

Podra serlo, pero no tiene demasiado sentido. Es como no salir de casa para evitar que te roben.
Puedes hacerlo, pero te perderas todo lo que hay fuera de tu casa y nadie quiere vivir sin disfrutar de
lo que nos puede ofrecer la vida.
Es posible ejecutar cdigo JavaScript sin estar asociado a una respuesta a un evento?
S, escribe este cdigo en un archivo html y visualiza el resultado en tu navegador.
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
</head>
<body>
<div>
<p>Hola</p>
<script type="text/javascript">
alert('Estamos cargando los contenidos de la web...');
</script>
<p>Aqu estamos</p>
</div>
</body>
</html>
El resultado esperado es que se cargue en pantalla el texto Hola. A continuacin se ejecuta el cdigo
JavaScript que al no estar incluido dentro de una funcin se ejecuta directamente. El resultado es que
se detiene la carga de la pgina web y aparece una ventana con el mensaje Estamos cargando los
contenidos de la web. Una vez pulsamos aceptar, se terminar la carga de la pgina y aparecer el
texto Aqu estamos. En este caso hemos hecho cosas extraas (slo para ver un ejemplo de cosas
que te puedes encontrar!): hemos incluido un script fuera de las etiquetas <head> </head> y hemos
dado lugar a la ejecucin de un cdigo JavaScript secuencialmente con el progreso de la carga del html,
en lugar de dar lugar a su ejecucin en respuesta a un evento (que sera lo ms normal).
Prxima entrega: CU01111E
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

CU01110E Archivos Extension Js Codigo Javascript Externo Referenciado

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CU01110E Archivos Extension Js Codigo Javascript Externo Referenciado

Cargado por

Copyright:

Formatos disponibles

JavaScript externo en archivos de extensin js.

Fecha revisin: 2029

Resumen: Entrega n10 del Tutorial bsico JavaScript desde cero.

Autor: Csar Krall

Hemos visto que poddemos incluirr JavaScript embebido dentro de una

De la misma forma qu ue el cdigo CSS puede estar

Podemos invocar un solo

En el atributo src ten nemos que especificar

Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html:

El resultado esperado al cargar la pgina html ser el siguiente:

Nos podemos hacer algunas preguntas como:

No hay que incluir las etiquetas <script> </script> en el archivo js?

Puedo ver el cdigo JavaScript si visualizo el cdigo fuente de la pgina web?

Puede robarse informacin del usario o introducir virus usando JavaScript?

Deshabilitar JavaScript puede ser una buena medida de seguridad?

Prxima entrega: CU01111E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

También podría gustarte