Clase7popu

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio
documento</title>
<script type="text/javascript">
function mifuncion(){alert();}
</script>
</head>
<body>
<p><button onclick="mifuncion();">soy un
boton</button></p>
</body>
</html>

Tipos de Variables
Números
Cadenas de caracteres
Booleanos
Objetos
Nulos
Indefinidas
No numérico

Numeros
Son datos numéricos que se asignan con el
número en cuestión
<script>
var numero = 33;
</script>

Ejemplo 1:
var numero = 5;
++numero;
alert(numero);
Ejemplo2:
var numero = 5;
numero = numero + 1;
alert(numero);

var numero = 5;
numero = numero - 1;
alert(numero);
Matemáticos
JavaScript permite realizar manipulaciones
matemáticas sobre el valor de las variables
numéricas. Los operadores definidos son: suma
(+), resta (-), multiplicación (*) y división (/)

var numero1 = 10;
var numero2 = 5;
resultado = numero1 / numero2;
// resultado = 2
resultado = 3 + numero1;
// resultado = 13
resultado = numero2 – 4;
// resultado = 1
resultado = numero1 * numero 2;
// resultado = 50

Cadenas de caracteres
Son datos de texto y deben estar delimitados
por comillas simples o dobles, pueden incluir
caracteres especiales cómo ' (comilla) "
(comilla doble), n (salto de línea), t
(tabulador)...
<script>
var cadena = "Hola mundo";
</script>

Booleanos
Son datos de bool, sus valores significan
verdadero (true) y falso (false).
<script>
var valor = true;
</script>

Objetos
<script>
var obj = new Image();
</script>

Nulos
Són datos vacios, se producen cuando se ha
definido u
<script>
var valorNulo = null;
</script> na variable como null para borrarla

Indefinidas
Són variables que ahún no han sido asignadas
con el operador de asignación (=).
<script>
var var1, var2, var3;
</script>

Arrays
Un array es una colección de variables, que
pueden ser todas del mismo tipo o cada una de
un tipo diferente.
Ejemplo sencillo: aplicación que necesita
manejar los días de la semana, se crear siete
variables :
var dia1 = "Lunes";
var dia2 = "Martes";
...
var dia7 = "Domingo";

Aunque el código anterior no es incorrecto, sí que es poco
eficiente y complica en exceso la programación
var dias = ["Lunes", "Martes", "Miércoles", "Jueves",
"Viernes", "Sábado", "Domingo"];
dias = new Array ('lunes', 'martes', 'miercoles', 'jueves', 'vi
ernes', 'sabado', 'domingo');
var diaSeleccionado = dias[0]; // lunes
var otroDia = dias[5]; // "Sábado"

Funciones útiles para cadenas de texto
• length, calcula la longitud de una cadena de
texto (el número de caracteres que la forman)
var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length;

• +, se emplea para concatenar varias cadenas
de texto
var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + mensaje2;

• Los espacios en blanco se pueden añadir al
final o al principio de las cadenas y también se
pueden indicar forma explícita:
var mensaje2 = "Mundo";
var mensaje = mensaje1 + " " + mensaje2;

• toUpperCase(), transforma todos los
caracteres de la cadena a sus
correspondientes caracteres en mayúsculas:
var mensaje2 = mensaje1.toUpperCase();
• toLowerCase(), transforma todos los
caracteres de la cadena a sus
correspondientes caracteres en minúsculas:

• charAt(posicion), obtiene el carácter que se
encuentra en la posición indicada:
var mensaje = "Hola";
var letraa = mensaje.charAt(0);
var letrab = mensaje.charAt(2);

• indexOf(caracter), calcula la posición en la que se
encuentra el carácter indicado dentro de la
cadena de texto. Si el carácter se incluye varias
veces dentro de la cadena de texto, se devuelve
su primera posición empezando a buscar desde la
izquierda. Si la cadena no contiene el carácter, la
función devuelve el valor -1
var mensaje = "Hola";
var posa = mensaje.indexOf('a');
var posb = mensaje.indexOf('b');

• substring(inicio, final), extrae una porción de
una cadena de texto. El segundo parámetro es
opcional. Si sólo se indica el
parámetro inicio, la función devuelve la parte
de la cadena original correspondiente desde
esa posición hasta el final:
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(2);
var porcion = mensaje.substring(5);

split(separador), convierte una cadena de texto
en un array de cadenas de texto. La función
parte la cadena de texto determinando sus
trozos a partir del carácter separador indicado:
var mensaje = "Hola Mundo, soy una cadena de
texto!";
var palabras = mensaje.split(" ");

Funciones útiles para arrays
length, calcula el número de elementos de un
array
var vocales = ["a", "e", "i", "o", "u"];
var numeroVocales = vocales.length;

Funciones
Cuando se desarrolla una aplicación compleja, es muy
habitual utilizar una y otra vez las mismas
instrucciones. Un script para una tienda de comercio
electrónico por ejemplo, tiene que calcular el precio
total de los productos varias veces, para añadir los
impuestos y los gastos de envío.
function nombre_funcion() {
...
}

• Las funciones más sencillas no necesitan ninguna
información para producir sus resultados. Sin
embargo, la mayoría de funciones de las
aplicaciones reales deben acceder al valor de
algunas variables para producir sus resultados.
• Las variables que necesitan las funciones se
llaman argumentos. Antes de que pueda
utilizarlos, la función debe indicar cuántos
argumentos necesita y cuál es el nombre de cada
argumento. Además, al invocar la función, se
deben incluir los valores que se le van a pasar a la
función. Los argumentos se indican dentro de los
paréntesis que van detrás del nombre de la
función y se separan con una coma (,).

function suma_y_muestra(primerNumero, segundoNumero) { ... }

function suma_y_muestra(primerNumero, segundoNumero) {
var resultado = primerNumero + segundoNumero;
alert("El resultado es " + resultado);
}

function calculaPrecioTotal(precio) {
var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) +
gastosEnvio;
}

Ámbito de las variables
El ámbito de una es la zona del programa en la
que se define la variable. JavaScript define dos
ámbitos para las variables: global y local.
function creaMensaje() {
var mensaje = “Mensaje de prueba”; }
creaMensaje();
alert(mensaje);

function creaMensaje() {
var mensaje = “Mensaje de prueba”;
alert(mensaje);
}
creaMensaje();

onload / onunload
• onload = script [CT]El evento onload ocurre
cuando el agente de usuario finaliza la carga de
una ventana o de todos los marcos de
un FRAMESET. Este atributo puede utilizarse con
los elementos BODY y FRAMESET
• onunload = script [CT]El evento onunload ocurre
cuando el agente de usuario elimina un
documento de una ventana o marco. Este
atributo puede utilizarse con los
elementos BODY yFRAMESET.

onclick / ondblclick
• onclick = script [CT]El evento onclick ocurre
cuando se hace clic con el dispositivo apuntador
sobre un elemento. Este atributo puede utilizarse
con la mayoría de los elementos
• ondblclick = script [CT]El evento ondblclick ocurre
cuando se hace doble clic con el dispositivo
apuntador sobre un elemento. Este atributo
puede utilizarse con la mayoría de los elementos.

onmousedown / onmouseup
• onmousedown = script [CT]El
evento onmousedown ocurre cuando el botón
del dispositivo apuntador se pulsa cuando está
encima de un elemento. Este atributo puede
utilizarse con la mayoría de los elementos
• onmouseup = script [CT]El
evento onmouseup ocurre cuando el botón del
dispositivo apuntador se suelta cuando está
encima de un elemento. Este atributo puede
utilizarse con la mayoría de los elementos.

onmouseover / onmousemove/
onmouseout
• onmouseover = script [CT]El
evento onmouseover ocurre cuando el dispositivo
apuntador se sitúa sobre un elemento. Este atributo
puede utilizarse con la mayoría de los elementos
• onmousemove = script [CT]El
evento onmousemove ocurre cuando el dispositivo
apuntador se mueve mientras está sobre un elemento.
Este atributo puede utilizarse con la mayoría de los
elementos.
• onmouseout = script [CT]El evento onmouseout ocurre
cuando el dispositivo apuntador se aparta de un
elemento. Este atributo puede utilizarse con la mayoría
de los elementos.

onfocus / onblur
• onfocus = script [CT]El evento onfocus ocurre cuando el
foco se dirige hacia un elemento, ya sea con el
dispositivo apuntador o por navegación con tabulador.
Este atributo puede utilizarse con los siguientes
elementos: A, AREA, LABEL, INPUT, SELECT, TEXTAREA y
BUTTON
• onblur = script [CT]El evento onblur ocurre cuando el
elemento pierde el foco ya sea con el dispositivo
apuntador o por navegación con tabulador. Puede
utilizarse con los mismos elementos que onfocus

onkeypress / onkeydown / onkeyup
• onkeypress ocurre cuando se pulsa y se suelta
una tecla encima de un elemento. Este atributo
• onkeydown = script [CT]El
evento onkeydown ocurre cuando se pulsa una
tecla encima de un elemento. Este atributo
• onkeyup = script [CT]El evento onkeyup ocurre
cuando una tecla se suelta encima de un
elemento. Este atributo puede utilizarse con la
mayoría de los elementos.

onsubmit / onreset
• onsubmit = script [CT] El evento onsubmit ocurre
cuando se envía un formulario. Sólo se aplica al
elemento FORM
• onreset = script [CT]El evento onreset ocurre
cuando se reinicializa un formulario. Sólo se
aplica al elemento FORM.

onselect / onchange
• onselect = script [CT]El evento onselect ocurre
cuando un usuario selecciona texto de un campo
de texto. Este atributo puede utilizarse con los
elementos INPUT y TEXTAREA
• onchange = script [CT]El evento onchange ocurre
cuando un control pierde el foco de entrada y su
valor ha sido modificado después de que el foco
se dirigió hacia él. Este atributo se aplica a los
siguientes elementos: INPUT, SELECT y TEXTAREA.

Clase7popu

Más contenido relacionado

La actualidad más candente (11)

Destacado (20)

Similar a Clase7popu (20)

Último (20)

Clase7popu