Introducción

Introducción
- De todos los servicios que ofrece INTERNET, no cabe duda de que el más popular es la WWW (World Wide
Web).
La WWW no es más que millones de páginas en formato electrónico, con los contenidos y temáticas más diversas
a las que podemos acceder gracias a un Computadora(Tablet, Movil) + modem + browser (navegador).
- Una página WEB no es más que un fichero de texto (ASCII), escrito en formato HTML (Hyper Text Markup
Language = lenguaje etiquetado de hipertexto).
- El HTML es un lenguaje basado en pares de tags (etiquetas abiertas o cerradas). Un tag es un código entre <>,
si es de apertura o un código entre </ > si es de cierre.
Los browsers (navegadores de Internet), son capaces de traducir estas etiquetas (tags) de forma que presentan
visualmente la página.
- Estructura de un fichero HTML
Básicamente consta de cuatro pares de etiquetas:
<HTML>
<HEAD>
<TITLE>Nuestra primera página</TITLE>
</HEAD>
<BODY>
..........................
.......................... Esto es lo que visualizará nuestra pagina
..........................
</BODY>
</HTML>
El par <HTML> y </HTML> Determina que sea el archivo del código de HTML
El par <HEAD> y </HEAD> Determina la cabecera del archivo HTML, que puede contener un título.
El par <TITLE> y </TITLE> Encierra el “título”: frase de texto que aparecerá en el marco del navegador (primera
línea), al ejecutar archivo HTML
El par <BODY> y </BODY> Encierra el contenido de la página html, es decir lo que se visualizará en el
navegador.
Los navegadores (browsers) más conocidos son:
 Google Chrome
 Safari
 Netscape Comunicator
 Microsoft Internet Explorer
Escribe el siguiente código en el bloc de Notas y para abrir la aplicación sigue estas indicaciones:
 Haz clic con el botón del lado derecho del raton en el Boton de inicio de Windows
 Buscar
 Escribe Bloc de Notas
 Y haz clic a la aplicación
Graba el archivo anterior con el nombre PROG001.HTML en Tu Carpeta Unidad1
Sitúate en Tu Carpeta y haz un doble click en PROG001.HTML De esta forma, se ejecuta el navegador de tu
computadora y se “carga” la página PROG001.HTML
Un programa en JavaScript se integra en una página Web (entre el código HTML) y es el navegador el que lo
interpreta (ejecuta). Es decir el JavaScript es un lenguaje interpretado, no compilado (no se genera ningún tipo de
archivo objeto o exe).
- Para programar en JavaScript sólo necesitamos un editor de texto (utilizaremos el Bloc de Notas del Windows)
y un navegador (utilizaremos el Google Chrome o FireFox) para ejecutarlo.
¿Qué es JavaScript?
JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.
Unapáginawebdinámicaesaquellaqueincorporaefectoscomotextoqueapareceydesaparece, animaciones, acciones
que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los
programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar
directamente en cualquier navegador sin necesidad de procesos intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de programación Java.
Legalmente, JavaScript es una marca registrada de la empresa Sun Microsystems, como se puede ver en
http://www.sun.com/suntrademarks/.
Breve historia
A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo hacían con módems a una
velocidad máxima de 28.8 kbps. En esa época, empezaban a desarrollarse las primeras aplicaciones web y por
tanto, las páginas web comenzaban a incluir formularios complejos.
Con unas aplicaciones web cada vez más complejas y una velocidad de navegación tan lenta, surgió la necesidad
de un lenguaje de programación que se ejecutara en el navegador del usuario. De esta forma, si el usuario no
rellenaba correctamente un formulario, no se le hacía esperar mucho tiempo hasta que el servidor volviera a
mostrar el formulario indicando los errores existentes.
Brendan Eich, un programador que trabajaba en Netscape, pensó que podría solucionar este problema
adaptando otras tecnologías existentes (como ScriptEase) al navegador Netscape Navigator 2.0, que iba a
lanzarse en 1995. Inicialmente, Eich denominó a su lenguaje LiveScript.
Posteriormente, Netscape firmó una alianza con Sun Microsystems para el desarrollo del nuevo lenguaje de
programación. Además, justo antes del lanzamiento Netscape decidió cambiar el nombre por el de JavaScript. La
razón del cambio de nombre fue exclusivamente por marketing, ya que Java era la palabra de moda en el mundo
informático y de Internet de la época.
La primera versión de JavaScript fue un completo éxito y Netscape Navigator 3.0 ya incorporaba la siguiente
versión del lenguaje, la versión 1.1. Al mismo tiempo, Microsoft lanzó JScript con su navegador InternetExplorer3.
JScript era una copia de JavaScript al que le cambiaron el nombre para evitar problemas legales.
Cómo incluir JavaScript en documentos HTML
La integración de JavaScript y XHTML es muy flexible, ya que existen al menos tres formas para incluir código
JavaScript en las páginas web.
1.- Incluir JavaScript en el mismo documento HTML
El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte del documento. Aunque
es correcto incluir cualquier bloque de código en cualquier zona de la página, se recomienda definir el código
JavaScript dentro de la cabecera del documento (dentro de la etiqueta<head>):
Graba el archivo anterior con el nombre PROG002.HTML en Tu Carpeta Unidad1 y ejecútalo como en el paso
anterior.
Estudio del Prog002.html:
Un programa “JavaScript” no es más que una secuencia de órdenes, que deben terminar en punto y coma, entre
los tags: <SCRIPT type=”text/javascript”> y </SCRIPT>.
En nuestro Prog002.html, hemos incluido el programa en la cabecera (HEAD) de la página, pero podríamos
colocarlo en cualquier parte del fichero html. Nuestro primer programa JavaScript contiene una única sentencia:
alert(“Un mensaje de prueba”); Que “abre” una ventana con el mensaje que tenemos entre comillas.
Al hacer clic en el [Aceptar] de la ventana ―alert, se acaba el programa JavaScript (se encuentra el tag
</SCRIPT>) y continua ejecutándose la página HTML.
2.- Definir JavaScript en un archivo externo
Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que los documentos
HTML enlazan mediante la etiqueta <script>.
Se pueden crear todos los archivos JavaScript que sean necesarios y cada documento HTML puede enlazar
tantos archivos JavaScript como necesite.
Ejemplo:
Crear el Archivo con el nombre de: codigo.js mediante el bloc de notas

alert("Un mensaje de prueba");
Se genera el segundo documento de HTML:

Graba el archivo anterior con el nombre PROG003.HTML en Tu Carpeta Unidad1 y ejecútalo.
Además del atributo type, este método requiere definir el atributo src, que es el que indica la URL correspondiente
al archivo JavaScript que se quiere enlazar. Cada etiqueta <script> solamente puede enlazar un único archivo,
pero en una misma página se pueden incluir tantas etiquetas<script>como sean necesarias.
Los archivos de tipo JavaScript son documentos normales de texto con la extensión .js, que se pueden crear con
cualquier editor de texto como Bloc de Notas, Wordpad, EmEditor, UltraEdit, Vi, etc.
La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el código HTML de la página,
que se puede reutilizar el mismo código JavaScript en todas las páginas del sitio web y que cualquier modificación
realizada en el archivo JavaScript se ve reflejada inmediatamente en todas las páginas HTML que lo enlazan.
3.- Incluir JavaScript en los elementos XHTML
Este último método es el menos utilizado, ya que consiste en incluir trozos de JavaScript dentro del código HTML
de la página:
Graba el archivo anterior con el nombre PROG004.HTML en Tu Carpeta Unidad1 y ejecútalo.
El mayor inconveniente de este método es que desluce innecesariamente el código HTML de la página y complica
el mantenimiento del código JavaScript. En general, este método sólo se utiliza para definir algunos eventos y en
algunos otros casos especiales, como se verá más adelante.
Uso de la declaración de variables VAR, la palabra reservada PROMPT y ALERT
Utilizando el “Bloc de Notas” escribe el siguiente programa:

Grábalo en Tu Carpeta con el nombre Prog005.html
Ejecútalo varias veces, observando detenidamente lo que sucede.
- Estudio del Prog005.html
1º) Primera y última línea: <HTML> y </HTML>
Es decir: página html mínima que necesitamos para incluir un programa JavaScript.
2º) Segunda y penúltima líneas: <SCRIPT LANGUAGE=.....> y </SCRIPT>, es decir programa en JavaScript
3º) Primera sentencia del programa: // PROG002.HTM Única línea del programa que no es necesario acabarla con
punto y coma. Todas las líneas que empiezan por // son comentarios para el programador, es decir no forman
parte del programa, dicho de otra forma: el navegador si encuentra una línea que empieza por //, la salta.
4º) var nom; Definimos una variable de nombre nom
5º) nom = prompt(“Escribe tu nombre”,”Paco”); Aparece un recuadro con un mensaje y un campo donde podemos
escribir algo; el mensaje corresponde a lo que escribimos en el primer argumento de la función prompt, encerrado
entre comillas.
El segundo argumento del prompt contiene el valor que aparece por defecto en el campo del cuadro de diálogo.
El valor del prompt es nom, es decir lo que nosotros escribamos en el cuadro será el valor que tomará la variable
nom.
Si no escribimos nada y hacemos click en [Aceptar], el prompt, es decir la variable nom tomará el valor de Paco,
porque es el valor que aparece por defecto.
6º) alert("Mucho gusto "+nom); Aparece un cuadro con el mensaje "Mucho gusto" y a continuación el valor de la
variable "nom", que será lo que hemos escrito en el primer cuadro que nos ha aparecido.
En definitiva: - La función prompt nos permite introducir "valores", dichos valores se han de guardar en
variables, que previamente hemos de declarar con la palabra reservada "var" - La función "alert" muestra
mensajes y/o valores de variables.
Utilizando el "Bloc de Notas del Windows" escribe el siguiente programa:
Grábalo en TuCarpeta con el nombre Prog006.html
- Ejecútalo varias veces. Sería conveniente utilizar números enteros y también decimales (5.72, 0.531: observa
que has de utilizar el punto decimal inglés).
- Si has ejecutado el programa una vez, para volverlo a ejecutar, no es necesario que "cierres" el navegador, basta
que Actualices, pulsando la tecla [F5]
- Es importante que tengas claro este programa: Declaramos dos variables (var), que necesitamos para introducir
la base y la altura del rectángulo, a través de dos "prompts": base= prompt...... altura= prompt.....
Por último necesitamos dos "alerts" que nos muestre el resultado del programa, que es simplemente el producto
base * altura
- El único elemento nuevo que aparece en el Prog006.html es: /*Programa que sirve para calcular el área de un
rectángulo */
Todo lo que aparece escrito entre /* y */ no es más que un comentario para el programador, igual que pasaba
con las líneas que empezaban por // La diferencia entre // y /* */ está en que esta última forma de incluir un
comentario, nos permite colocarlo de forma que ocupe más de una línea.

Introducción

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

Introducción

Cargado por

Copyright:

Formatos disponibles

Introducción

- Estructura de un fichero HTML

Básicamente consta de cuatro pares de etiquetas:

Los navegadores (browsers) más conocidos son:

Cómo incluir JavaScript en documentos HTML

1.- Incluir JavaScript en el mismo documento HTML

Estudio del Prog002.html:

2.- Definir JavaScript en un archivo externo

Crear el Archivo con el nombre de: codigo.js mediante el bloc de notas

Se genera el segundo documento de HTML:

Estudio del Prog003.html:

3.- Incluir JavaScript en los elementos XHTML

Graba el archivo anterior con el nombre PROG004.HTML en Tu Carpeta Unidad1 y ejecútalo.

Estudio del Prog004.html:

Uso de la declaración de variables VAR, la palabra reservada PROMPT y ALERT

Utilizando el “Bloc de Notas” escribe el siguiente programa:

Ejecútalo varias veces, observando detenidamente lo que sucede.

- Estudio del Prog005.html

1º) Primera y última línea: <HTML> y </HTML>

4º) var nom; Definimos una variable de nombre nom

Utilizando el "Bloc de Notas del Windows" escribe el siguiente programa:

Grábalo en TuCarpeta con el nombre Prog006.html

También podría gustarte