Scribd
Cargar
27 vistas6 páginas

Introducción A La Programación JavaScrip

Este documento introduce los conceptos básicos de programación en JavaScript. Explica que JavaScript es un lenguaje de programación orientado a objetos utilizado principalmente en la web para aumentar la interacción y dinamismo de las páginas. Describe las reglas básicas de sintaxis de JavaScript, funciones, variables, sentencias de control como if/else y bucles while y for. También presenta ejemplos de código JavaScript para ilustrar estos conceptos.

Cargado por

Franz Ibañez
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 PDF, TXT o lee en línea desde Scribd
27 vistas6 páginas

Introducción A La Programación JavaScrip

Este documento introduce los conceptos básicos de programación en JavaScript. Explica que JavaScript es un lenguaje de programación orientado a objetos utilizado principalmente en la web para aumentar la interacción y dinamismo de las páginas. Describe las reglas básicas de sintaxis de JavaScript, funciones, variables, sentencias de control como if/else y bucles while y for. También presenta ejemplos de código JavaScript para ilustrar estos conceptos.

Cargado por

Franz Ibañez
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 PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Introducción a la programación.

JavaScript IES Almenara

Introducción a la programación

JavaScript
1º Bachillerato de ciencias
IES Almenara
(2007/2008)

Miguel Ángel Martín Ruiz [email protected]


Introducción a la programación. JavaScript IES Almenara

Qué es JavaScript?

JavaScript es un lenguaje de programación orientado a objetos y diseñado para la programación web.


Aunque también puede utilizarse para crear programas de servidor, habitualmente se emplea en el
cliente, para aumentar la interacción y el dinamismo de las páginas, permitiendo realizar cálculos,
comprobar formularios, seleccionar imágenes y añadir multitud de efectos.

JavaScript es una adaptación del lenguaje Java pero, aunque menos potente y robusto, mucho más
fácil de usar. De hecho, no hay que crear un programa independiente, sino simplemente escribir un
script1 dentro del código html de nuestra página.

Hay algunas reglas básicas que todo código JavaScript debe cumplir:

 Todo el código (sentencias) debe estar dentro de funciones.


 Las funciones se desarrollan entre las etiquetas <script> y </script>.
 Las etiquetas "<script>" deben colocarse entre las etiquetas <head> y </head>.
 Las etiquetas "<title>" no pueden estar colocadas entre las de "<script>".
 La llamada a la función se hace a través de un evento de un elemento del documento.
Eventos de JavaScript
EVENTO SE PRODUCE AL
onLoad Terminar de cargar una página o frame (entrar).
onUnLoad Descargar una página o frame (salir).
onAbort Abortar la carga de una página.
onError Producirse algún error en la carga de la página.
onMouseOver Pasar el ratón por encima de un enlace, area o frame.
onMouseOut Dejar de estar el ratón encima de un enlace, area o frame.
onMouseMove Mover el ratón por el documento.
onKeyUp Presionar una tecla.
onClick Hacer click con el ratón.
onResize Dimensionar la ventana del navegador.
onMove Mover la ventana del navegador.
onChange Modificar texto en un control de edición. Sucede al perder el
foco.
onSelect Seleccionar texto en un control de edición.
onFocus Situar el foco en un control.
onBlur Perder el foco un control.
onSubmit Enviar un formulario.
onReset Inicializar un formulario.

FUNCIONES:

Las funciones son un conjunto de sentencias (bloque de código) que especifica al


programa las operaciones a realizar. Son útiles para evitar la repetición de
líneas y modular el código. Para trabajar con ellas hay que desarrollarlas y
llamarlas cuando lo necesitemos. Opcionalmente, a la función se le pueden pasar
valores mediante uno o varios argumentos (variables o constantes2) dentro de los
paréntesis tras el nombre de la función y separados por comas.

function nombre_funcion([var1,var2,varN])
{
sentencia(s);
}

1
Se denomina script a un pequeño programa o trozo de programa insertado dentro de otro código, en este caso HTML.
2
Constante: valor fijo. Por ejemplo un número o un carácter.

Miguel Ángel Martín Ruiz [email protected]


Introducción a la programación. JavaScript IES Almenara

La llamada a la función se puede realizar desde un elemento o etiqueta del


documento:

<elemento evento=nombre_funcion([val1,val2,valN]);>

O bien, desde el interior de otra función:

nombre_funcion(valor1,valor2,valorN);

Ejemplo: Mostrar información en pantalla mediante una ventana desplegable.

<html>
<head>

<script>
function hola()
{
alert ("Hola");
}
function adios(){alert ("Adiós");}
</script>
<title> </title>
</head>

<body onLoad=hola(); onUnload=adios();>

</body>
</html>

VARIABLES:

Espacio de memoria con un nombre reservado para guardar información mientras la


página esté cargada. El primer paso para poder trabajar con variables es
declararlas, es decir darle nombre y ámbito. Para ello debemos tener en cuenta
que sólo son válidos los dígitos del 0 al 9, las letras del alfabeto (salvo la ñ)
y el guión bajo (_). No pueden contener espacios ni tildes por ejemplo. Además
hay distinción entre mayúsculas y minúsculas, el nombre no puede comenzar por un
dígito y debe ser único dentro del ámbito de la variable.

El ámbito de una variable define si la variable se podrá utilizar en cualquier


parte del documento (variable global). O si sólo se podrá utilizar dentro de una
función determinada (variable local). La declaración de las variables globales se
realiza dentro de las etiquetas "<script>" pero fuera de cualquier función. La
declaración de las variables locales se realiza dentro de la función donde se
utilice dicha variable.

La sintaxis para declarar una variable es igual en ambos casos, la única


diferencia es el lugar donde las declaramos. La siguiente línea nos muestra como
hacerlo:

var nombre_variable[=valor];

El tipo de variable es asignado automáticamente por JavaScript según el primer


valor que se guarde en la variable. Sólo existen tres tipos en JavaScript:
númerico (números reales o enteros), string (texto) y boolean (True o False).

En cuanto a la conversión de datos, en JavaScript es automática. Transforma los


datos de todas la variables en una expresión según el tipo de la primera variable.

Miguel Ángel Martín Ruiz [email protected]


Introducción a la programación. JavaScript IES Almenara

Esto da flexibilidad pero no es muy seguro y puede acarrear muchos problemas, por
lo que no es habitual en lenguajes más robustos como Java.

EJEMPLO:

vtexto ="12";
vnumero=10;
x=vtexto+vnumero; // daria como resultado 1210.
y=vnumero+vtexto; // daria como resultado 22.

Para evitar problemas en las conversiones de texto a número, se deben utilizar


funciones ya incorporadas en el lenguaje:

TIPO DE CONVERSION
De texto a número entero var_numerica =parseInt(var_texto);
De texto a decimal var_numerica =parseFloat(var_texto);

INTRODUCCIÓN DE DATOS. Caja de Texto:

Todo el trabajo con las cajas, esta basado en funciones y métodos ya implementadas
en JavaScript:

FUNCIÓN
variable=nombre_caja.value; Guarda el contenido de la caja
nombre_caja.value=valor o variable; Muestra en la caja el valor
nombre_caja.value=""; Limpia el contenido de la caja
nombre_caja.sefocus(); Envía el foco a la caja

<html>
<head>
<script>
function muestra()
{
var nombre=document.f.cnombre.value;
alert("Eres "+nombre);
cnombre.value=""; // tras cerrar la ventana, borra el contenido del cuadro de
texto
cnombre.focus(); // se sitúa el foco (el cursor) sobre
} // el cuadro de texto
</script>
</head>

<body>
<form name="f">
Nombre:<input type="text" name="cnombre" size="20">
</form>
<input type="button" value="Ver" onClick=muestra();>
</body>
</html>

SENTENCIAS DE CONTROL

Se utilizan para controlar la ejecución del programa o script en función de los


datos, de la situación y de la interacción del usuario.

If-else:

if (expresion-booleana)
{

Miguel Ángel Martín Ruiz [email protected]


Introducción a la programación. JavaScript IES Almenara

Sentencia(s);
{
[else]
{
Sentencia(s);
}

La cláusula else es opcional. La expresión puede ser de cualquier tipo e incluso


múltiple utilizando operadores lógicos. Otra opción posible es la utilización de
if anidados, es decir unos dentro de otros compartiendo la cláusula else. En el
caso de que sólo haya una sentencia se pueden omitir las llaves.

<html><head>
<script>
function ver()
{
var
edad=parseInt(document.f.txtedad.value);
if(edad<=26)
alert("Abono Joven. 119 euros");
else
{
if(edad>=65)
alert("Abono 3ª Edad. 89 euros");
else
alert("Abono normal. 187 euros");
}
}
</script>
<title>Pagina nueva 1</title>
</head>

<body>
Club Baloncesto MALAGA-UNICAJA. <br>
Temporada 05/06. Venta de abonos.<p>

Introduzca su edad para consultar el precio del abono:

<form name="f">
<input type="text" name="txtedad" size="3" onBlur = ver();>
</form>

</body>
</html>

Switch:

switch (expresión){
case constante1:
sentencia(s);
break;
case constante2:
sentencia(s);
break;
case constante3:
sentencia(s);
break;
case constanteN:
sentencia(s);

Miguel Ángel Martín Ruiz [email protected]


Introducción a la programación. JavaScript IES Almenara

break;
[default:]
sentencia(s);
}

El valor de la expresión se compara con cada una de las constantes de la sentencia


case, si coincide alguno, se ejecuta el código que le sigue, y cuando ejecuta
break sale de este bloque hasta salir del switch. Si ninguno coincide se realiza
el bloque default (opcinal), si no lo hay no se ejecuta nada.

En el caso que varias sentencias case realicen la misma ejecución se pueden


agrupar, utilizando una sola sentencia break. Evitamos de este modo duplicar
líneas de código.

While:

Ejecuta repetidamente el mismo bloque de código hasta que se cumpla una condición
de terminación. Hay cuatro partes en todos los bucles. Inicialización, cuerpo,
iteración y condición.

[inicialización;]
while(condicion[es])
{
cuerpo;
[iteración;]
}

Do..while:

Es lo mismo que en el caso anterior pero aquí como mínimo siempre se ejecutará el
cuerpo del bucle una vez, en el tipo de bucle anterior es posible que no se
ejecute ni una sola vez el contenido de este.

[inicialización;]
do{
cuerpo;
[iteración;]
}while(condición);

For:

Realiza las mismas operaciones que en los casos anteriores pero la sintaxis es una
forma compacta. Normalmente la condición para terminar es de tipo numérico. La
iteración puede ser cualquier expresión matemática valida. Si de los 3 términos
que necesita no se pone ninguno se convierte en un bucle infinito.

for (inicio;cond_fin;iteración)
{
sentencia(S);
}

Miguel Ángel Martín Ruiz [email protected]

También podría gustarte