Scribd
Cargar
55 vistas

Tema 3 - JavaScript

Este documento introduce JavaScript como un lenguaje de scripting para crear programas que realizan acciones dinámicas en páginas web. Explica que JavaScript se ejecuta en el navegador del cliente, se puede usar para cambiar contenido HTML y validar formularios. También define variables, tipos de datos, y métodos para mostrar datos y obtener entrada del usuario.

Cargado por

Víctor Colomo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
55 vistas

Tema 3 - JavaScript

Este documento introduce JavaScript como un lenguaje de scripting para crear programas que realizan acciones dinámicas en páginas web. Explica que JavaScript se ejecuta en el navegador del cliente, se puede usar para cambiar contenido HTML y validar formularios. También define variables, tipos de datos, y métodos para mostrar datos y obtener entrada del usuario.

Cargado por

Víctor Colomo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

Introducción a _JavaScript

Introducción
Los lenguajes de script son lenguajes de programación que sirven para crear programas
que realizan acciones dentro de una página web, como por ejemplo cambiar
dinámicamente el contenido de un documento, modificar el comportamiento normal del
navegador, validar formularios, realizar pequeños trucos visuales, etc.
Los scripts se ejecutan en el navegador del cliente al cargar la página o cuando
sucede algo especial, como puede ser pulsar sobre un enlace.
Nota: cómo los scripts no se ejecutan en la máquina en la que están alojados (el servidor)
por lo que no podrán realizar algunas operaciones como manejar bases de datos del
servidor.
El lenguaje de script que se utiliza en HTML es JavaScript.
JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con el nombre
de Mocha, fue renombrado posteriormente a LiveScript, para finalmente quedar
como JavaScript.
Aunque está pensado para la web Javascript se puede también ejecutar en otros soportes
como documentos PDF y aplicaciones de escritorio (widgets).
JavaScript se diseñó con una sintaxis similar al lenguaje de programación C, aunque
adopta nombres y convenciones del lenguaje de programación Java. Sin embargo Java y
JavaScript no están relacionados y tienen semánticas y propósitos diferentes.
Es un lenguaje interpretado, lo que quiere decir que no requiere compilación, son los
navegadores los que se encargan de interpretar el código.

Inserción de código JavaScript


Para insertar código javascript en un documento HTML lo podemos hacer mediante la
etiqueta:

<script type="text/javascript" src="[URL]"></script>

En el atributo src incluimos la dirección en la que está el fichero con el código Javascript.


La otra opción para utilizar Javascript es insertar el código en el fichero HTML, utilizando la
etiqueta:

<script type="text/javascript">
<!--
// aquí irá el código
// -->
<script>

Hola Mundo en Javascript


Tradicionalmente, el primer programa que se ejecuta cuando se está aprendiendo un
lenguaje de programación es un “hola mundo”. Para hacerlo en Javascript abrimos un
editor de texto e introducimos:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Hola mundo en JavaScript en el propio documento</title>
<script type="text/javascript">
alert("¡Hola mundo!");
</script>
</head>
 
<body>
<p>Un párrafo de texto.</p>
</body>
</html>

Para que la página XHTML resultante sea válida, es necesario añadir el atributo type a la


etiqueta <script>. Los valores que se incluyen en el atributo type están estandarizados y
para el caso de JavaScript, el valor correcto es text/javascript.
La línea <meta http-equiv=“Content-Type” content=“text/html; charset=utf-
8” /> indicamos al navegador el tipo de documento que es nuestra página y la
codificación de caracteres utilizada en el mismo.
En el ejemplo, significaría que es un documento texto-html y que usa un juego de
caracteres UTF-8 . Esta información es útil para que el navegador de nuestros visitantes
sepa que juego de caracteres debe emplear.
Al cargarlo en el navegador aparece una ventana de texto con el mensaje:

Definir JavaScript en un archivo externo


Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que
los documentos XHTML enlazan mediante la etiqueta <script>. Se pueden crear todos los
archivos JavaScript que sean necesarios y cada documento XHTML puede enlazar tantos
archivos JavaScript como necesite.
Ejemplo:Documento XHTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de código JavaScript en el propio documento</title>
 
<script type="text/javascript" src="js/codigo.js"></script>
</head>
 
<body>
<p>Un párrafo de texto.</p>
</body>
</html>

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.
Creamos la subcarpeta js en el directorio en el que está nuestro documento en html y
dentro cremos el fichero de texto codigo.js en el que insertamos:

alert("Un mensaje de prueba");

Obtendríamos el mismo resultado del documento anterior.


Variables
Una variable es un depósito donde se almacena valor. Consta de un nombre y pertenece a
un tipo de datos (númerico, cadena de caracteres, etc.).

Tipos de variable:

Una variable puede almacenar:

Valores Enteros (100, 260, etc.)


Valores Reales (1.24, 2.90, 5.00, etc.)
Cadenas de caracteres ("Juan", "Compras", "Listado", etc.)
Valores lógicos (true,false)

Las variables son nombres que ponemos a los lugares donde almacenamos la


información. En JavaScript, deben comenzar por una letra o un subrayado (_), pudiendo
haber además dígitos numéricos entre los demás caracteres. Una variable no puede tener
el mismo nombre de una palabra clave del lenguaje.
Una variable se declara anteponiéndole la palabra clave var. Ejemplo:

var dia;

Se pueden declarar varias variables en una misma línea:

var dia, mes, anio;

A una variable se la puede definir e inmediatamente inicializarla con un valor:

var edad=20;

O en su defecto en dos pasos:

var edad;
edad=20;

Generando HTML con javascript


Para mostrar el contenido de una variable en una página utilizamos el objeto
document y llamamos a la función write.
En el siguiente ejemplo definimos una serie de variables y las mostramos en la página:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
 
<body>
 
<script type="text/javascript">
var nombre='Juan';
var edad=10;
var altura=1.92;
var casado=false;
document.write(nombre);
document.write('<br>');
document.write(edad);
document.write('<br>');
document.write(altura);
document.write('<br>');
document.write(casado);
</script>
 
</body>
</html>

Cuando imprimimos una variable, no la debemos disponer entre simples comillas (en caso
de hacer esto, aparecerá el nombre de la variable y no su contenido)
Los valores de las variables que almacenan nombres (es decir, son cadenas de
caracteres) deben ir encerradas entre comillas simples. Los valores de las variables
enteras (en este ejemplo la variable edad) y reales no deben ir encerradas entre comillas.
Cada instrucción finaliza con un punto y coma ';'.
Las variables de tipo boolean pueden almacenar solo dos valores: true o false. El
resultado al visualizar la página debe ser 4 líneas similares a éstas:

Juan
10
1.92
false

Es decir que se muestran los contenidos de las 4 variables y un salto de línea después de
cada una.
Una variable adopta un tipo de datos determinado cuando le asignamos un valor:

var edad=10;

Es de tipo entera ya que le asignamos un valor entero.

var nombre='juan';

Es de tipo cadena.
Para mostrar el contenido de una variable en una página debemos utilizar la función
'write' que pertenece al objeto document.
Recordemos que el lenguaje JavaScript es sensible a mayúsculas y minúsculas y no
será lo mismo si tecleamos:
document.write(nombre);

que

Document.Write(nombre);

Esto es porque no existe el objeto 'Document' sino el objeto 'document' (con d minúscula),
lo mismo no existe la función 'Write' sino 'write', este es un error muy común cuando
comenzamos a programar en JavaScript.

Entrada de datos por teclado


Para la entrada de datos por teclado tenemos la función prompt. Cada vez que
necesitamos ingresar un dato con esta función, aparece una ventana donde cargamos el
valor. Hay otras formas más sofisticadas para la entrada de datos en una página HTML,
pero para el aprendizaje de los conceptos básicos de JavaScript nos resultará más práctica
esta función. Para ver su funcionamiento analicemos este ejemplo:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
 
<script type="text/javascript">
var nombre;
var edad;
nombre=prompt('Ingrese su nombre:','');
edad=prompt('Ingrese su edad:','');
document.write('Hola ');
document.write(nombre);
document.write(' asi que tienes ');
document.write(edad);
document.write(' años');
</script>
 
</body>
</html>

La sintaxis de la función prompt es:

variable_que_almacena_dato=prompt('mensaje a mostrar en la ventana', 'valor


inicial a mostrar en el cuadro de texto');

La función prompt tiene dos parámetros: uno es el mensaje y el otro el valor incial a
mostrar dentro de la caja de texto.

También podría gustarte