Tutorial iniciación JavaScript (por N3xtdoor)
Javascript se emplea en una pagina web para dotarla de unas funcionalidades que el HTML no puede proporcionar por si mismo.
Por lo tanto el codigo Javascript debe integrarse en el documento HTML.
Esto se logra mediante el tag, <script> y </script>.
El tag <script> recibe, obligatoriamente el atributo language que permite determinar el lenguaje de script que vamos a emplear, porque existen varios lenguajes parecidos a JavasCript como el VBScript, por eso es necesario especificarle al navegador el lenguaje de script que debemos emplear.
Aqui un codigo para que vean como se tiene que incluir el codigo JavaScript:
<html>
<head>
<title>Empezando Javascript, para Inet.</title>
<script language="javascript>
<!--
//-->
</script>
</head>
<body>
</body>
</html>
Como ven, se emplea el tag <script language="javascript"> , y asi el navegador ya sabe lo q se esta empleando.
Dentro del script tenemos las lineas <!-- y //--> que corresponden a los indicadores de comentarios en html, se emplea para evitar que si el navegador no soporta javascript, se ignoren las lineas de codigo en este lenguaje y no se produzca un error. Hoy en dia no creo que exista un navegador que no soporte Javascript( si queda alguno estara en un museo) pero, por si acaso, ponemos estas lineas siempre.
Este codigo que acabamos de introducir no hace nada, no tiene ningun efecto ni muestra nada en la pantalla., no hay ninguna sentencia ni tampoco hay nada en la seccion <body> de la pagina.
Existe otro tag que podemos incorporar en nuestras paginas, se trata de <noscript> y </noscript>, que permite encerrar un codigo alternativo para en caso de que el navegador no soporte javascript.
Ejemplo del codigo:
<html>
<head>
<title>Ejemplo del tag <noscript></title>
<script language="javascript">
<!--
//-->
</script>
<noscript>
Su Navegador No Soporta scripts
<br>
Consiga uno nuevo.
</noscript>
</head>
<body>
</body>
</html>
Como ve en la parte resaltada del codigo entra los tags <noscript> y </noscript>, hemos incluido un mensaje para avisar al usuario que debe cambiar de navegador. Si su navegador soporta scripts(como espero) no se mostrara.
Como ven he introducido el codigo dentro de head, pero eso no importa, de hecho el script puede ir dentro de head o body, he incluso haber varios scripts.
------------------Nuestro primer Script------------------
<html>
<head>
<title>Nuestro primer Script</title>
<script language="javascript">
<!--
alert ("Nuestro primer script");
//-->
</script>
</head>
<body>
<b>nuestro 1 script</b>
</body>
</html>
Como ven, nos aparecera un aviso diciendonos Nuestro Primer Script, y despues se mostrara lo que pusimos en el cuerpo de la pagina, que sera lo que pusimos en negrita que es nuestro 1 script.
Nuestro 1 script incluye solamente una linea, la palabra reservada alert() es una funcion de javascript que genera el cuadro de aviso que hemos visto, y detiene la carga hasta que el usuariopulsa el boton que se incluye en dicho cuadro de aviso.
A diferencia de HTML, Javascript es case sensitive es decir sensibles al hecho que escribamos en mayusculas o minusculas.
Si pones adentro de la funcion alert las comillas, osea alert("hola") no se realizara ningun proceso con el argumento en este caso el argumento es hola. Pero si quitamos las comillas, osea alert(hola) ahi si se realizara algun proceso, esto lo entenderan mas adelante cando demos las variables y tipos de datos.
-----------Los comentarios------------
En Javascript existen dos maneras de incluir comentarios, se puede realizar con la dolbe barra (//), en este caso el navegador entendera que todo lo que hay en la linea fisica de codigo sede la doble barra hasta el final de la linea es un comentario y lo ignorara.
La segunda manera es con un (/*) y se cerrara con un (*/). Todo lo que haya entre mbas parejas de guarismos sera tenido por un comentario y el navegador no tratara de ejcutarlo tanto si es una sola linea fisica como son varias.
Ejemplo:
<html>
<head>
<title>Comentarios en html</title>
<head>
<script language="javascript">
<!--
/*aqui se empieza un comentario de varias lineas.
Todas ellas son ignoradas por el navegador.*/
alert("Comentarios");
//Otro comentario,
//-->
</script>
</head>
<body>
<b>comentario</b>
</body>
</html>
EN ese script empleo los dos tipos de comentarios.
Esto es lo basico, si no lo saben leanlo bien y aprendanselo.
------------------------------------------------
Proxima Clase, Variables y Tipos de DAtos.
(By N3xtdoor).
2 clase. Variables . (Javascript)
Que es una variable?
Una variable es la zonade la memoria del ordenador donde se guarda un dato y que se identifica con un nombre.
El dato que se almacena bajo ese nombre puede cambiar durante la ejecucion del codigo: por eso se llaman variables.
Para poder usar una variable es necesario,declararla.
En javascript existen dos maneras de declarar las variables: declaracion explicita, y declaracion implicita.
-----Declaracion Explicita-----
Para declarar una variable de forma explicita utilizamos la instruccion var, seguida del nombre de la variable, como en el siguiente codigo:
var v1;
Una vez que la variable ha sido declarada, se ha reservsdo en la memoria espacio para ella, pero todavia no tiene ningun valor.
Para poder usarla hay q darle un valor inicial , a esto se conoce como la inicializacion de una variable para darle valor depone el operador =.
ejemplo:
v1=10;
Veamos esto en un codigo abierto:
<html>
<head>
<title>Variables explicitas</title>
<script language="javascript">
<!--
var v1; //declaracion
v1=10; //inicializacion
alert (v1);
//-->
</script>
</head>
<body>
</body>
</html>
1 se declara que v1 es una variable, mediante var v1.
Despues se dice que la variable v1 vale 10.
y Despues utilizamos un alert diciendo que nos muestre la variable v1, que es igual a 10.
Ojo con esto, en la clase pasada osea en la 1 clase, dije que si ponemos el alert entre comillas no sufrira ningun proceso sino que se mostrara lo escrito entre parentesis, y sin las comillas si sufrira el mandato que le hemos dado, prueben en ese script anterior poniendo el alert, asi alert("v1"); para que vean que en pantalla les aparecerael v1, y no lo que vale la variable v1.
Tambien para tener menos trabajo, podemos declarar y inicializarlas variables en una sola linea,
por ejemplo asi,
var v1=10; ahi declaramos y inicializamos .
miren aca el script:
<html>
<head>
<title>Variables explicitas</title>
<script language="javascript">
<!--
var v1=10; //declaracion e inicializacion.
alert (v1);
//-->
</script>
</head>
<body>
</body>
</html>
Esto nos dara de resultado lo mismo que el script anterior.
Por solo resumimos un poco.
Tambien podemos declarar mas de una variable con solo poner una coma entre ellas,
ejemplo:
var v1, v2, v3; //Declaramos que v1 v2 y v3 son variables.
Ejemplo en codigo:
<html>
<head>
<title>mas variables declaradas</title>
<script language="javascript">
<!--
var v1, v2, v3; //Declaramos las tres variables.
v1=10;
v2=15;
v3=20;
alert(v1);
alert(v2);
alert(v3);
</script>
</head>
<body>
</body>
</html>
Nos mostro el valor de las 3 variables en pantalla, todo bien!.
Espero que las variables Explicitas hallan quedado claro, cualquier pregunta, ya saben.
-----Declaracion Implicita-----
Javascript nos permite realizar una declaracion implicita de las variables sin emplear la palabra var.
Simplemente por el hecho de inicializar la variable tiene un espacio en la memoria del ordenador.
Ejemplo:
<html>
<head>
<title>Variables explicitas</title>
<script language="javascript">
<!--
v1=10; //Solo iniciamos.
alert (v1);
//-->
</script>
</head>
<body>
</body>
</html>
Como ven, dio el mismo resultado que las explicitas.
Es lo mismo, pero para que la gente vea que usted tiene mas profesionalismo, xd, es mejor usar las explicitas,
para tener una mayor organizacion del script.
Notas que deben de tener en cuenta:
1.Los nombres de las variable sno deben empezar por un numero sino por una letra.
2.Podran contener numeros y letras y el guion bjo pero ningun otro signo.
3.no contendran las letras acentuadas, ni de ningun alfabeto local.
4.No pueden contener espacios en blanco.
5.Debemos recordar que Javascript distingue entre mayusculas y minusculas.
Tomen eso en cuenta, a lahora de formar variables.
----Tipos de variables, y Concatenacion----
Existen dos tipos de variables, las variables que llamamos cadena o literales,
son las que estan formadas por letras.
Y las variables numericas que como su nombre lo dice, estan formadas por numeros.
Ejemplo:
<html>
<head>
<title>Cadenas y numericas</title>
<script language="javascript">
<!--
var cadena="mi numero favorito es el ";
var numerica=8;
alert ("cadena" + numerica);
</script>
</head>
<body>
</body>
</html>
Como pueden notar, la variable cadena la deje con comillas por que eso no sufrira ningun proceso por es formada por letras.
En cambio la de numeros la pude sin comillas.
El resultado de esto es mi numero favorito es el 8, por hic concatenacion con la variable cadena y numerica.
La concatenacion se pueden realizar con el signo suma.
<html>
<head>
<title>Concatenacion</title>
<script language="javascript">
<!--
var red="Me gusta Java", blue="script", yellow;
yellow=red+blue;
alert (yellow);
</script>
</head>
<body>
</body>
</html>
En este ejemplo concatenamos la variable red y la blue, que es igual a la variable yellow,
osea yellow equivale a la suma de red y blue.
Tambien se puede concatenar una variable con un texto ,
ejemplo:
<html>
<head>
<title>Concatenacion</title>
<script language="javascript">
<!--
var red="Me gusta ";
alert (red + "el JAvascript");
</script>
</head>
<body>
</body>
</html>
Ahi concatenamos la variable con un texto, en este caso Javascript.
(Proxima Clase Tipos de datos).
-------------------------------
By N3xtdoor.
3 clase. Uso elemental de valores numericos. (Javascript)
Anteriormente hemos mencionado que la razon de ser de las variables numericas es poder realizar con ellas calculos aritmeticos.
Las posibiladades matematicas de Javascript son ampliisimas.
Empecemos por lo mas sencillo.
Suma.
La suma en JAvascript se lleva a cabo mediante el operador (+).
Veamos el siguiente script:
<html>
<head>
<title>suma</title>
<script language="javascript">
<!--
var primerSumando=10, segundoSumando=5, suma;
suma=primerSumando+segundoSumando;
alert (suma);
//-->
</script>
</head>
<body>
</body>
</html>
El resultado daria: 15.
De esta forma se lleva a cabo una suma simple en Javascript.
Podemos darle un poquito de mas clase con la concatenacion.(Algo que se lo deben saber porque lo di en la 2 clase).
<html>
<head><title>suma</title>
<script language="javascript">
<!--
var primerSumando=10, segundoSumando=5, suma;
suma=primerSumando+segundoSumando;
alert ("La suma de 10 y 5 es igual a " + suma);
//-->
</script>
</head>
<body>
</body>
</html>
Ahora sale con mas clase, jeje.
Da como resultado lo mismo que el script anterior a este.
Javascript nos proporciona otro operador para realizar una suma de una manera que podriamos llamarla"abreviada", especialmente
para los vagos. Se trata del signo (+=). Cuesta un poco familiarizarse con el, asi que empezemos desde ya!.
Presten atencion a ese script:
<html>
<head>
<title>Ense;ando Javascript</title>
<script language="javascript">
var variable_1=10, variable_2=5;
variable_1 += variable_2;
alert ("La suma de 10 y 20 es " + variable_1);
//-->
</script>
</head>
<body></body>
</html>
Este script dara el mismo resultado que el caso anterior.
Ejemplo:
variable_1 += variable_2;
es equivalente a:
variable_1= variable_1 + variable_2
Aunque con menos codigo escrito, es mas corto y mas sencillo y menos trabajos0.
Resta.
La resta se lleva a cabo mediante el signo (-), obvio...
Tambien facil, ejemplo:
<script language="javascript">
<!--
var minuendo=20, sustraendo=10, resta;
resta=minuendo-sustraendo;
alert (resta);
//-->
</script>
El resultado es un famoso 10..
Al igual que en la suma, la resta se puede llevar a ccabo de muchos operandos.
Por ejemplo en este caso la hare de 3 , y para eso necesitamos 3 variables.
<script language="javascript">
<!--
var first=50, second=100, tercerista=150, cuarto;
cuarto=tercerista-second-first;
alert(cuarto);
//-->
</script>
Resultado un 3men2 cero.
Tambien es valido lo mismo de la suma,
para los vagos, en la resta es est0,
variable_1 -= variable_2;
es equivalente a:
variable_1=variable_1-variable_2 .
Asi sera en casi todas las operaciones lo unico que variara xd, es el signo del operador.
Por ejemplo si es multiplicacion es *= , division /= .
Multiplicacion
<html>
<head>
<title>Ense;ando Javascript</title>
<script language="javascript">
var variable_1=10, variable_2=5, multiplicacion;
multiplicacion=variable_1*variable_2;
alert (multiplicacion);
//-->
</script>
</head>
<body></body>
</html>
Como ven se multiplica con el signo de asterisco (*).
Division
En Javascript y en la mayoria de los lenguajes se realiza con el signo de slash (/) .
<html>
<head>
<title>Ense;ando Javascript</title>
<script language="javascript">
var variable_1=10, variable_2=5, division;
division=variable_1/variable_2;
alert ("El resultado de la division de 10 y 5 es " + division);
//-->
</script>
</head>
<body></body>
</html>
En la division no siempre resultara un numero exacto.
Tambien hay operaciones con unidades...
<script language="javascript">
<!--
//Declaramos e inicializamos las variables de los operandos.
var sumando_1 = 6.3, sumando_2 = 7.2, suma, linea_1;
var minuendo = 4.7, sustraendo = 2.7, resta, linea_2;
var multiplicando = 2.88, multiplicador = 3.432, producto, linea_3;
var dividendo = 23.47, divisor = 8.36, cociente, linea_4;
//Calculamos los resultados.
suma = sumando_1 + sumando_2;
resta = minuendo - sustraendo;
producto = multiplicando * multiplicador;
cociente = dividendo / divisor;
//Preparamos los resultados para su presentacion.
linea_1 = "La suma de " + sumando_1 + " y " + sumando_2 + " resulta: " + suma;
linea_2 = "La reseta de " +minuendo + " y " + sustraendo + " resulta: " + resta;
linea_3 = "El producto de " + multiplicando + " y " + multiplicador + "resulta: " + producto;
linea_4 = "La division de " + dividendo + " y " + divisor + " resulta: " + cociente;
//Mostramos los resultadosSS
alert (linea_1 + "\n" + linea_2 + "\n" + linea_3 + "\n" + linea_4);
//-->
</script>
Ahi anda el peque;o script rola de lo mas bien...
Bueno, este es algo tambien basico del cual deberan aprender para las proximas clases..
Tarea: Hacer un script igual al ultimo, pero que opere numeros enteros, lo postean y voy poniendo quien lo tiene perfecto.
----------------------------
By N3xtdoor.
4clase, Datos Boleanos o Logicos, variables indefinidas o nulas(Javascript).
Datos Boleanos.
Los datos boleanos o logicos son variables que contienen un valor binario. Se llama asi porque solo puede tener dos posibles estados : verdadero(true en ingles), o falso (false en ingles).Las variables booleanas se declaran e inicializan de la misma fora que cualquier otra variable, con la diferencia de que solo pueden recibir uno de los valores mencionados.(true o false).
Observen este peque;o script q realize para que entendieran un poco mejor...:
<script language="javascript">
<!--
var boleana_1 = true, boleana_2 = false;
alert ("boleana_1 es " + boleana_1 + "\nboleana_2 es: " +boleana_2);
//-->
</script>
El aviso daria:
boleana_1 es: true
boleana_2 es: false
Creo que quedo ya claro esto, mas adelante explico para que nos servira todo esto, mientras tanto quiero que entiendan el concepto.
Variables Indefinidas y Nulas.
Despues de todo lo visto, seguramente ustedes han llegaos a la conclusion de que una variable es del tipo de valor que contiene.
Pero, de que tipo es una variable cuando acaba de ser declarada, pero aun no ha sido inicializada??.
Obeserven este script que aparece a continuacion:
<script language="javascript">
<!--
var dato;
alert ("dato es de tipo " + typeof(dato) + "\ndato_2 es de tipo " + typeof(dato_2));
//-->
</script>
Esta claro de que si no ha recibido ningun dato, no tiene ningun tipo.
Por eso en el aviso nos da dato es de tipo undefined
y dato_2 es de tipo undefinied (tambien).
Null (nulo)
Pero que tal si no queremos dejarla sin inicializar, y no lo queremos dejar ningun valor, entonces a la variable
le damos el valor de null (nulo).
<script language="javascript">
<!--
var dato;
dato = null;
alert ("dato es " + dato + " y es de tipo " + typeof(dato));
//-->
</script>
De resultado nos dara: dato es null y de tipo object .
Como ve la variable tiene el valor null es decir ningun valor, y es reconocida como tipo object. No se preocupen que es un objeto ahora, ni de porque la variable ha quedado como tal...
--------------
Proximas clases aprenderemos sobre la funcion typeof();
y la resignacion dinamica de variables.
By N3xtdoor.
5 clase.(Funcion typeof y reasignacion dinamica de variables(prompt)). (Javascript)
Buenas,
Funcion typeof()
Esta funcion nos permite determinar el tipo de dato que almacena una variable.
<script language="javascript">
<!--
var v1, v2;
v1 = "hslteam";
v2 = 500;
alert ("la variable 'v1' es de tipo " + typeof(v1) + "\nLa variable 'v2' es de tipo " + typeof(v2));
//-->
</script>
La funcion typeof() recibe como argumento el nombre dela variable que queremos comprobar y devuelve el tipo de dato que contiene. Asi veremos cuando se evalua la primera variable(v1), vemos que es de tipo string (cadena alfanumerica) y la segunda variable(v2) es de tipo number (valor numerico).
Quiero que se de cuenta una variable es de tipo numer siempre y cuando contenga un valor numerico, independientemente de que este sea entero fraccionario.
Reasignacion dinamica de las variables(prompt)
Miren el siguiente ejemplo:
<script language="javascript">
<!--
var nombre;
nombre = prompt ("Introduzca su nombre", "")
alert ("Ok. Su nombre es: " + nombre);
//-->
</script>
Lo que hacemos es asignarle el resultado de esta funcion a una variable.
En simple vista uno sabe ya, como funciona.
El segundo argumento de prompt es la respuesta por defecto que la podemos modificar,
por ejemplo en mi script anterior hable sobre los nombres, ahora hablare sobre pais.
Ejemplo:
<script language="javascript">
<!--
var pais;
pais = prompt ("Introduzca su pais", "Alemania")
alert ("Ok. Su nombre es: " + pais);
//-->
</script>
Al ejecutar el script vera en pantalla la funcion por defecto que es Alemania la cual le pusimos.
Esta fue una peque;a clase.. ando full con el tiempo.
Para la proxima le prometo algo mas largo.
Para la proxima( Parseint(), parsefloat(), condicionales.)
---------------------------------------
By N3xtdoor.
6 clase de Javascript. (funciones parseInt, parseFloat) y Condificonales(if....)
Funcion parseInt()
Existe otra funcion que nos permite convertir una cadena que contiene digitos a su correspondiente valor numerico. Se trata de parseInt(). Esta nunca puede dar un como resultado un numero fraccionario. Si la cadena tiene punto(.), lo que haya a la derecha del mismo se ignora, obteniendose un numero entero.
Observen el siguiente script:
<script language="javascript">
<!--
var v1 = "736.865";
v1 = parseInt (v1);
alert("El dato es " + v1 + " y es de tipo " + typeof(v1));
//-->
</script>
El resultado de esta seria:
El dato es 736 y es de tipo number
La funcion parseInt() admite un argumento adicional que nos permite determinar si la cadena que queremos convertir representa un numero en una base de numeracion distinta de la decimal ( que es la base por defecto).
Funcion parseFloat()
La funcion parseFloat convierte la cadena a su correspondiente valor numerico.
Ejemplo:
<script language="javascript">
<!--
var v1 = "736.832";
v1 = parseFloat (v1);
alert(" el dato es " + v1 + " y es de tipo " + typeof(v1));
//-->
</script>
Observen que como argumento esta funcion recibe la cadena o como en este casi la variable que contiene. Esta cadena se suele emplear cuando la cadena representa a un numero fraccionario, aunque tambien se puede emplear si se trata de un entero, tal como muestra el siguiente script:
<script language="javascript">
<!--
var v1 = "736";
v1 = parseFloat (v1);
alert(" el dato es " + v1 + " y es de tipo " + typeof(v1));
//-->
</script>
Condicionales
1.1 Definicion de condicionales.
Primeramente deben saber lo que es un condicional. Es una intruccion que evalua una o mas condiciones y, en virtud de que resulten verdaderas o falsas, ejecuta distintos bloques de codigo.
Es decir, se comprueba si una condicion se cumple.En caso afirmativo se ejecuta una determinada serie de instrucciones e en caso negativo no se ejecutan dichas instrucciones, o bien se ejecutan otras diferentes.
2.1 Condicional basico.
Un condicional basico, obedece a la necesidad mas simple: evaluar una unica condicion y determinar si esta es verdadera o falsa en el momento de dicha evaluacion.
Para mostrar el condicional simple cree un simple script que le pida al usuario su edad y le muestre un mensaje si es adulto( 18 a;os o mayor).
script:
<script language="javascript">
<!--
var edad;
edad = prompt ("Introduce tu edad (en numeros)", "18");
edad = parseInt (edad); //Recuerden que prompt() siempre genera una cadena literal.
if (edad > 17)
{
alert("Usted es adulto");
}
//-->
El script funciona perfecto.
Tomen nota de:
Como norma general, todas las lineas de codigo Javascript acaban con punto y coma (Guiñar, excepto aquellas que, a continuacion, abren una llave({).
3.1 Un condicional completo.
EN el script anterior hemos visto que, si el usuario introducia un valor mayor que 17 para la edad, se mostraba un aviso confirmando que era adulto. Si el valor era 17 o menor, no se mostraba este aviso.
ahora mejoraremos este aviso mostrando un aviso a los que son menores de edad.
Todo esto contamos con la palabra else ( en caso contrario ).
Script:
<script language="javascript">
<!--
var edad;
edad = prompt ("Introduzca su edad (en numeros)", "18");
edad = parseInt (edad);
if (edad > 17) // Se comprueba si es mayor de edad.
{
alert("Usted es adulto");
} else {
alert(" Usted es menor de edad tio.");
}
//-->
</script>
Ahora si ponemos un numero menos de 18, osea 17 o menos nos muestra el mensaje Usted es menor de edad.
4.1 Condicionales Multiples.
En muchas ocasiones un bloque condicional debe evaluar varias situaciones posibles.
Siguiendo en los ejemplos anteriores, supongamos que no solo queremos determinar si el usuario es mayor de edad o no, sino que, ademas si es adulto, queremos tambien determinar si ha alcanzado la edad de jubilacion. Para ello vamos a emplear lo que se conoce con los nombres de condicionales secuenciados o condicionales multiples.
Miren como empleo las nuevas funciones en el sgnte script:
<script language="javascript">
<!--
var edad;
edad = prompt ("Introduzca su edad (en numeros)", "18");
edad = parseInt (edad);
if (edad < 18)
{
alert ("Usted es menor de edad.");
} else if (edad<65) {
alert ("Usted es adulto");
} else {
alert ("Usted esta en edad de jubilacion");
}
//-->
</script>
En este caso utilizamos el operador menor que (<).
Primero se evalua si usted es mayor de edad, sino lo es se le aparece en pantalla:
Usted es menor de edad, si no es menor de edad, se coje la edad que usted puso y si esa edad es mayor de 65 se presenta en pantalla Usted es adulto, y tambien Usted esta en edad de jubilacion.
5.1 Operadores de Comparacion.
Estos se emplean para comparar un expresion con otra.
El operador Mayor que(>)
Se emplea como hemos visto anteriormente, para determina si la expresion que hay a la izquierda del mismo es mayor que la que hay a la derecha. Si lo es, la condicion se cumple como verdadera. Si no lo es ( si es igual o menor), la condicion no se cumple (es falsa).
El operador Menor que(<)
Realiza la mision opuesta al anterior. Se emplea para determinar si la expresion que hay q la izquierda del mismo es menor que la que hay a la derecha.
El operador Igual que (==)
Se emplea para determinar si la expresion que hay a la izquierda del mismo es igual que la que hay a la derecha.
El Operador no igual que(!=)
Se emplea para determinar si la expresion que hay a la izquierda del mismo es distinta a la que hay a la derecha.
El operador menor o igual que (<=)
Este operador se emplea cuanod lo que se necesita es determinar si la expresionque se encuentra a la izquierda del mismo es menor o igual de la que se halla a la derecha.
El operador Mayor o igual que(>=)
Se determina si la expresion que hay a la izquierda es menor o igual que la que hay en la derecha del operador.
bueno, aqui termina mi clase por hoy!.
En la proxima habras novedades.
By N3xtdoor!.
Guiñar
7 Clase de Javascript. (sentencia switch and Blucles).
Sentencia Switch
Existe un modo mejor de realizar comparaciones, mediante la sentencia switch (en ingles, conmutador).
Esta sentencia tiene la siguiente sintaxis general:
Switch (expresion)
{
case valor_1:
conjunto de sentencias si la expresion es igual a valor_1;
case valor_2:
conjunto de sentencia a ejecutar si la expresion es igual a valor_2;
....
....
....
case valor_n:
conjunto se sentencias a ejecutar si la expresion es igual al valor_n;
default:
conjunto de sentencias a ejecutar si el valor de la expresioon no es ninguno
de los que se han comprobado;
}
En esta sintaxis se aparecia el funcionamiento tan simple como efectivo.
Pero ahora veremos mas claro con este peque;o script que les hic:
<script language="javascript">
<!--
var numeroEnCifras, numeroEnLetras;
//Pedimos el numero al usuario.
numeroEnCifras = prompt ("Teclee un numero del 1 al 10 (en cifras).", "");
numeroEnCifras = parseInt (numeroEnCifras);
//Lo comparamos mediante un conmutator.
switch (numeroEnCifras)
{
case 1:
numeroEnLetras = "Uno";
break;
case 2:
numeroEnLetras = "Dos";
break;
case 3:
numeroEnLetras = "Tres";
case 4:
numeroEnLetras = "Cuatro";
break;
case 5:
numeroEnLetras = "Cinco";
break;
case 6:
numeroEnLetras = "Seis";
break;
case 7:
numeroEnLetras = "Siete";
break;
case 8:
numeroEnLetras = "Ocho";
break;
case 9:
numeroEnLetras = "Nueve";
break;
case 10:
numeroEnLetras = "Diez";
break;
default:
numeroEnLetras = "ERROR";
}
alert ("El numero es " + numeroEnLetras);
//-->
</script>
Fijense que tecleamos la palabra switch y, entre parentesis el nombre de la variable
que vamos a evaluar . A continuacion entre llaves va el resto del codigo. Cada uno de los valores posibles con que queremos comparar la variable va precedido de la palabra reservada case que podemos traducir al español como, en caso de que sea y terminamos esa linea con dos puntos (Sonrisa en lugar de punto y coma (Guiñar. Dentro de cada caso incluimos el conjunto de lineas de codigo que deben ejecutarse si la variable tiene el valor que hemos comprobado en ese caso.
Fijense que en todos los casos acaban con la sentencia break (romper).
Esto es asi para q, si uno de los casos resulta ser cierto, se salga de la ejecucion del switch y no se sigan verificando los demas.
Un caso especial es default (funcion por defecto). Aqui incluimos las sentencias que deben ejecutarse si ninguna de las comparaciones anteriores ha resultado cierta. Este caso en concreto no se termina con la palabra break, ya que no hay mas casos que comprobar.
1.1 Bucles (Definicion)
Los bucles constituyen a la segunda estructura de control de flujo. Se conoce como bucle el procedimiento por el cual la ejecucioonde un fragmento de codigo se repite, de forma controlada, un numero determinado o indeterminado de veces. Es decir un bucle encierra un conjunto de instrucciones, que se conocen con el nombre de cuerpo de bucle, y determina que estas se repitan segun lo halla hecho el programador.
2.1 Ejecutar un numero determinado de veces.(for)
Los bucles mas sencillos eventualmente son los que se ejecutan un numero determinado de veces.
Cuando queremos crear un bucle de este tipo, es necesario disponer de una variable, llamada genericamente variable de control, que se empleara para llevar xuenta de las veces que se repite el bucle.
Estos bucles se crean mediante la instruccion for.
Ahora dejare un ejemplo de un script que les pedira la edad a 4 usuarios para determinar si son adultos, incluiremos este proceso en un bucle que se repetira 4 veces..
Script:
<script language="javascript">
<!--
var cuenta, edad;
for (cuenta = 1; cuenta <= 4; cuenta ++)
{
edad = prompt ("Introduzca su edad (en cifras).", "18");
edad = parseInt (edad);
if (edad<18)
{
alert ("Usted es menor de edad.");
} else {
alert ("Es usted mayor de edad.");
}
}
//-->
</script>
Como ve se repite la consulta tantas veces coomo establece dicho bucle.
La clave de todo esta en la definicion del bucle.
Por cierto, cada vez que se repite lA ejecucion de un bucle se llama iteracion, ciclo de bucle , o, simplemente ciclo.
2.1 Ejecutar un numero indeterminado de veces.(while)
Primeramente miren su sintaxis:
while (condicion)
{
cuerpo del bucle
}
La condicion determina cuando se ejecuta el bucle o cuando se deja de ejecutar.
Este tipo de bucle se ejecuta mientras while la condicion cumpla.
Vamos a ver un codigo que hice que pide una clave y no deja continuar hasta que se introduzca la clave adecuada, en este codigo seria password la clave.
<script language="javascript">
<!--
var clave = "";
while (clave != "password")
{
clave = prompt ("Introduzca la clave correcta", "");
}
alert ("Ya era hora.");
//-->
</script>
Este script se ejecutara tantas veces hasta que el usuario ponga la verdadera clave en este caso,
password.
Bueno hasta hoy eso, en la otra clase seguire dando una extension de los bucles,
y entrare despues con el POO y el DOM.
By N3xtdoor
8 clase de Javascript. El POO (Programacion Orientada a Objetos).
1.0 Introduccion a lo que es el POO.
Todos los lenguajes modernos de programacion se basan en lo que se ha dado en llamar Programacion Orientada a Objetos (POO), y porsupuesto Jaavascript no es una excepcion.
Basicamente, la POO nos dice que toodo aquelloque podemos manejar es un objeto, es decir, la ventana, donde se carga una pagina web es un objeto, la pagina web en si es tambien un objeto. Dentro de la pagina web existen textos, imagenes, formularios, capas, tablas, botones, marcos.
Bueno, pues cada uno de ellos tambien es un objeto.
Los objetos tienen una entidad propia:
Las propiedades.Son las caracteristicas de un objeto en concreto. Por ejemplo una propiedad de una pagina seria su color de fondo.
Los metodos.Son funciones especificas que cada objeto puede llevar a cabo.
Por ejemplo, un metodo seria de una cadena de texto cambiar las letras que la forman a mayusculas.
Los eventos. Son sucesos que pueden llegar a producirse o no. Javascript reconoce cuando tiene lugar un evento y se puede programar una respuesta.
Por ejemplo, se puede detectar si el usuario apoya el puntero sobre una imagen, o si pulsa el boton derecho, o si aprieta o libera una tecla, etc.
Empezemos con el objeto document, y el metodo write().
Por ejemplo, vamos a empezar con algo sencillo.
Vamos a hacer una pagina que nos muestre un cuadro de viso como los que ya conocemos y que,
al pulsar el boton aceptar, se cambie el color del fondo.
Vamos a lograr esto mediante el objeto llamado document, que es, ni mas ni menos que el documento activo, es decir, la pagina que hay cargada en el navegador. Este objeto tiene una propiedad llamada bgColor, que representa al color del fondo. y ya tios, a partir de ahi le asignamos el color que en este caso, yo le asigne red (rojo),
Script:
<script language="javascript">
<!--
alert ("Pulse aqui para ver su pagina en rojo");
document.bgColor = "red";
//-->
</script>
Bien, este script no tiene nada del otro mundo, pero lo explicare,
primero hacemos q el usuario vea el mensaje con un alert que diga, Pulse aquipara ver su pagina en rojo, y como me supongo q habran leido la definicion de document y bgColor, le asignamos un valor q bgColor que sera, el color rojo, osea red en ingles.
write()
No estan ustedes hartos de un simple alert()Huh.
Bueno, yo si, me canso de que solo abra un mensajito y listo se termino.
bueno, empezemos con el metodo write, este recibe como argumento aquello que queramos escribir, en ese sentido el argumento se crea del mismo modo que se crea la funcion alert().
Ejemplo para aclararnos la mente:
<script language="javascript">
<!--
document.write ("Buenos dias, puerto rico son como las 12 y pico..xD.");
document.write ("HslTeam");
//-->
</script>
Bien, alfin, algo interesante!, ya vemos como el contenido no nos aparece en un mensaje y ya, sino en la pagina.
Por ejemplo, aca otro script:
<script language="javascript">
<!--
var control;
for (control = 1; control <=10; control++)
{
document.write (control + "<br>");
}
//-->
</script>
Vemos q tambn nos sirven las estructuras de control como el for, osea es algo simple, no se maten 3 horas, mirando algo tan simple..
Tambien se pueden incluir tags de HTML, ejemplo:
<script language="javascript">
<!--
document.write ("<b>Esto es negrita</b><br>");
document.write ("<i><u>Esto es cursiva</u></i><br>");
//-->
</script>
Observen que hemos utilizado algunos tags de HTML.
Pero una cosita, NO CONFUNDAN write con writeln,
es lo mismo que el anterior lo unico que incluye un espacio para separar del proximo q se escriba.
Ejemplo:
document.write ("Alfa");
document.write ("Omega");
//Ahora introducimos un salto de linea.
document.write ("<br>");
//Estas dos palabras apareceran separadas por un espacio.
document.writeln ("Alfa");
document.write ("Omega");
El espacio intermedio se debe a writeln(), como dije mas arriba.
2.1 Propiedad fgColor()
Ya que estabamos conociendoun poco el objeto document, y antes de pasar a otros asuntos, quiero ense;arles la propiedad fgColor (foreground color), permite darle un change al color del text0.
ejemplo>:
<script language="javascript">
<!--
document.write ("<h1>Texto con mi amigo Javascript</h1>");
alert ("Pulsq aqui para ver su pagina en rojo");
document.bgColor = "red";
document.fgColor = "purple";
//-->
</script>
Cuando le dan a aceptar, veran el color del fondo en rojo, y el color de las letras en morado.
3.1 El evento Onclick
Primeramente vean este script:
<html>
<head>
<title>
Página con Javascript.
</title>
<script language="javascript">
<!--
document.write ("<h1>Esto es texto escrito en la página.</h1>");
//-->
</script>
</head>
<body>
<button onClick = "document.bgColor='red';document.fgColor='skyblue' ;">
Pulse para cambiar los colores.
</button>
</body>
</html>
Bueno, como veremos , lo 1 que nos interesa ver, en la linea que aparece resaltada es la palabra onClick. Esto es un evento. Esto hace cuando cuando ponemos button onClick = "document.bgColor='red';document.fgColor='skyblue' ;">
Entonces, cuando hacemos click en Pulse para cambiar colores, hacemos que esta funcion que es el cambio de color de fondo a red, osea rojo se haga, y el cambio de color de texto tambien cambie a skyblue xd!.
Bueno, esto ya es loq dare por poo, claro q es mas largo el tema, pero me voy con el dom en la proxima clase.
Espero que lo hagan entendido,
By N3xtdoor.
9 Clase. El DOM del Javascript. Y( Eventos.)
En la clase anterior establecimos las bases del POO.
1.1 Que significa el DOM?
Dom significa Document Object Model (Modelo de Objetos de Documentos).
Vamos a establecer las bases del Dom de JavaScript .
2.1 Jerarquia de Objetos
Los objetos de Javascript estan organizados de manera que , a primera vista puede parecer un poco compleja, pero es sumamente eficiente. El aspecto del que vamos a ocuparnos por ahora es la jerarquia de dicha organizacion. En efecto, existen objetos de mayor nivel que otros, en funcion de su ambito. El objeto de mas alto nivel jerarquico que vamos a manejar en JavaScript es window. Este objeto representa a la ventana en la que esta abierto el navegador y cargada una pagina. Es el objeto mas importante que contiene a todos los demas. En efecto el objeto document representa como ya sabemos al documento activo (la paina que se este ejecutando en cada momento).Tecnicamente se dice que el objeto document es propiedad del objeto window. Como es tan alto el nivel, tecleen window.document.bgColor sera igual q document.bgColor.
No se preocupen si no entienden esto muy bien, ya se iran familiarizando.
3.1 Abreviando Codigos. (Funcion with()).
Cuando tenemos varias lineas que se refieren a un mismo objeto, podemos usar la funcion with para facilitarnos el trabajo.
Por ejemplo:
<html>
<head>
<title>
Página con Javascript.
</title>
<script language="javascript">
<!--
document.write ("<b>Esto es negrita.</b><br>");
document.write ("<i>Esto es cursiva.</i><br>");
document.write ("<u>Esto es subrayado.</u><br>");
document.write ("<h1>Esto es grande.</h1>");
document.write ("<h6>Esto es pequeño.</h6>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
document.write ("Esto es cualquier texto.<br>");
//-->
</script>
</head>
<body>
</body>
</html>
Tecnicamente no tiene ningun secreto, tan solo hemos incluido una serie de instrucciones que se refieren al objeto document. Cuando tenemos varias lineas de Codigo que se refieren a propiedades o metodos de un mismo objeto, podemos evitar escribir cada vez el nombre de dicho objeto usanto en su lugar la funcion with(), con el nombre del objeto entre el parentersis.
Miren este script, resumiendo lo anterior, con la funcion with:
<html>
<head>
<title>
Página con Javascript.
</title>
<script language="javascript">
<!--
with (document)
{
write ("<b>Esto es negrita.</b><br>");
write ("<i>Esto es cursiva.</i><br>");
write ("<u>Esto es subrayado.</u><br>");
write ("<h1>Esto es grande.</h1>");
write ("<h6>Esto es pequeño.</h6>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
write ("Esto es cualquier texto.<br>");
}
//-->
</script>
</head>
<body>
</body>
</html>
Ambos codigos hacen lo mismo y funcionan igualito. Sin embargo el 1 ocupa 1,64kb y el otro 1,54 no es grandiferencia pero a la hora de hacer un script masomenos grandesito nos pesa mucho menos y se nos tarda menos la pagina en cargar.
4.1 Eventos Fundamentales de JavaScript
El Evento onLoad
Este es un evento q se dispara cuando la pagin se ha cargado totalmente en el navegador del cliente.
ejemplo:
<html>
<head>
<title>
Página con Javascript.
</title>
</head>
<body onLoad = "alert ('La página ya se ha cargado');">
<h1>
Esta página es muy pequeña
<br>
Y no necesita este evento.
</h1>
</body>
</html>
Vea que se carga todo el contenido en este caso solo un par de lineas de textoy luego sale un cuadro de aviso, observe que asociamos el evento onLoad, al objeto document (el tag body para entendernos).
Este evento no tiene mucho uso para las paginas q pesan poco, pero para las paginas q pesan mucho, si.Porque tardarian mucho en cargarse..y estaria bien q el usuario supiera cuando se ha terminado de cargar la pagina.
El Evento onMouseOver
Este evento permite detectar cuando se apoya el puntero del raton sobre un objeto determinado de la pagina(texto, imagen...).
<html>
<head>
<title>
Página con Javascript.
</title>
</head>
<body>
<h1 onMouseOver = "alert ('El puntero se ha apoyado en el texto');">
Este texto detecta cuándo se apoya el puntero.
</h1>
<br><br><br><br>
<h1>
En cambio, este texto no detecta nada.
</h1>
</body>
</html>
Si apoya el puntero en la parte inferior, o en cualquiero otra parte de la pagina no sucede nada en especial, pero si apora sobre la linea de texto superior, se le muestra un cuadro de aviso.
Bien creo q esto quedo clarissa.
El evento onMouseOut
Este evento actua al contrario que el anterior detectanto cuando el puntero se separa del objeto al que esta asociado.
Exampl3:
<html>
<head>
<title>
Página con Javascript.
</title>
</head>
<body>
<h1 onMouseOut = "alert ('El puntero se ha quitado del texto');">
Este texto detecta cuándo se quita el puntero.
</h1>
<br><br><br><br>
<h1>
En cambio, este texto no detecta nada.
</h1>
</body>
</html>
El evento onUnload
Este evento se dispara cuando el usuario abandona la pagina que esta cargada en ese momento, tanto si va a otra pagina como si cierra el navegador. Se puede emplear, mm por ejemplo, un saludo diciendonos vuelve a visitarnos.
<html>
<head>
<title>
Página con Javascript.
</title>
</head>
<body onUnload = "alert ('Vuelva a visitarnos pronto.');">
<h1>
Cierre ahora el navegador.
</h1>
</body>
</html>
Esto ta bien facil..
By N3xtdoor
