Java Script

Primero deseo dar mi mas sincero agradecimiento a la Academia de Software Libre,  adscrita al Ministerio del Poder Popular para la Ciencia, Tecnología e Innovación,  por haberme permitido efectuar el Curso de Java script y de igual forma deseo agradecer a mi Profesor y amigo Ing. Noel Alexander Marchan, por todos sus conocimientos impartidos.

Curso impartido por el Profesor Noel Alexander Marchan

Lo que a continuación les presento, corresponde a un conjunto de elementos de programación que considero todos deben conocer, para efectuar o llevar a cabo todo un conjunto de validaciones sobre nuestros programas en PHP, pero tomando en cuenta que las mismas se van a efectuar del lado del cliente y no del lado del servidor.

Consideraciones Teóricas iniciales:

JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.

Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.

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 Internet Explorer 3. JScript era una copia de JavaScript al que le cambiaron el nombre para evitar problemas legales.

Utilidad de JavaScript

Fácil de Implementar

Compatibilidad con Exploradores / Navegadores

Gramatica de JavaScript

Si conoce algún otro lenguaje de programación ya estará familiarizado con el uso de variables, operadores, declaraciones… Lo que se resume en la tabla siguiente son los elementos principales de la gramática de JavaScript. Cada uno de los elementos se verá en detalle a lo largo del manual.

Nota importante: JavaScript es sensible a mayúsculas y minúsculas, todos los elementos de JavaScript deben referenciarse cómo se definieron, no es lo mismo “Salto” que “salto”.

Variables

Etiquetas que se refieren a un valor cambiante.

Operadores            

Pueden usarse para calcular o comparar valores.

Ejemplo: pueden sumarse dos valores, pueden compararse dos valores…

Expresiones           

 

Cualquier combinación de variables, operadores, y declaraciones que evalúan a algún resultado.

Ejemplo: intTotal=100; intTotal > 100

Sentencias 

Una sentencia puede incluir cualquier elemento de la grámatica de JavaScript. Las sentencias de JavaScript pueden tomar la forma de condicional, bucle, o manipulaciones del objeto. La forma correcta para separarlas es por punto y coma, esto sólo es obligatorio si las declaraciones múltiples residen en la misma línea. Aunque es recomedable que se acostumbre a terminar cada instrucción con un punto y coma, se ahorrará problemas.

Objetos 

Estructura “contenedora” de valores, procedimientos y funciones, cada valor refleja una propiedad individual de ese objeto.

Funciones y Métodos

Una función de JavaScript es bastante similar a un” procedimiento” o” subprograma” en otro lenguaje de programación. Una función es un conjunto que realizan alguna acción. Puede aceptar los valores entrantes (los parámetros), y puede devolver un valor saliente. Un método simplemente es una función contenida en un objeto.

Como hacemos comentarios, en nuestros programas en Java Script

 

A continuación empezaremos ya en este capítulo a estudiar uno de los elementos más simples de los que se compone un lenguaje de programación, aunque no por ello son los menos importantes, estamos hablando de los comentarios.

Los comentarios en el código permiten insertar obervaciones del autor del código para describir las distintas partes del programa. El interprete JavaScript los ignora y posee por ello una sintaxis particular.

Se distinguen los comentarios en una sola línea, precedidos por la barra oblicua doble // y los comentarios en varias líneas delimitados por los símbolos /* y por */. Por ejemplo:

// esto es un comentario /* esto es un comentario de varias líneas con una longitud cualquiera */

Identificadores

Conocer cual es la sintaxis de los identificadores y cuales son las palabras reservadas son aspectos de necesario conocimiento antes de empezar a escribir un programa en un lenguaje de programación determinado.

Identificadores en JavaScript.

Los identificadores de un lenguaje son la ristra de caracteres que le asignamos a los nombres de variables, constantes, funciones, objetos, etc…, que nosotros definimos en dicho lenguaje, estos son necesarios para poder invocar a dichos elementos en lugares posteriores a su definición.

Los identificadores deben seguir las siguientes reglas:

El identificador debe empezar por una letra o por el caracter ‘_’.

Los caracteres siguientes, además de letras o el caracter ‘_’, pueden ser cifras.

Recordar que le uso de mayúsculas o minúsculas no es importante porque JavaScript no diferencia de los nombres de mayúsculas o minúsculas en los identificadores.

Veamos algunos ejemplos de nombres de variables:

Num_linea

aux1

_exit

Palabras Reservadas

Dentro de JavaScript nos encontramos con las siguientes palabras reservadas (las cuales no podremos usar como nombre de variables):

abstract          boolean          break byte

case   catch   char    class

const   continue         deault             do

double            else     extends          false

final     finally float     for

function          goto    int        implements

input    in         instanceof      interface

long     native new     null

package        private            protected       public

return short   static   super

switch             synchronized             this      throw

throws            transient         true     try

var       val       while   with

 

Primeros Pasos en JavaScript

Es importante que tenga presente que java scrip está embebido en el código HTML, tal como lo puede observar en el siguiente ejemplo:

Hola mis apreciados alumnos y alumnas

<html>

<head>

<title>Pagina 1</title>

<script type=”text/javascript”>

<!– 

document.write(“Hola mis apreciados alumnos y alumnas”);

//–>

</script>

</head>

<body>

</body>

</html>

 

Variables

Las variables en Javascript están definidas por su valor, es decir, si estas contiene números son numéricas, si contiene textos son carácter, si contienen fechas son date, Sólo hace falta declararlas con la palabra reservada VAR

Por ejemplo

Function hola(){

Var cantidad=5;

document.write(“números de veces ”+cantidad);

}

Las variables locales sólo son visibles o existen dentro de una función en cambio las globales pueden ser vistas dentro de cualquier parte del código siempre y cuando haya sido declarada al principio.

Operadores Aritméticos

Los operadores aritméticos sirven para realizar operaciones matemáticas siendo estos los siguientes:

Suma: resultado=a+b;

Resta: resultado=a-b;

Multiplicación: resultado=a*b;

división: resultado=a/b;

Para incrementar un valor se usa

resultado= resultado+1;

resultado++;

Para decrementar un valor se usa

resultado= resultado-1;

resultado–;

Operadores Relacionales

Los operadores relacionales se usan para hacer comparaciones lógicas entre variables de diferentes valores, siendo estos los siguientes:

Menor que <

Mayor que >

Menor o Igual =<

Mayor o Igual >=

Igual ==

Diferente de !=

Operadores de Asignación

El operador de asignación es usado para colocarle valor a una variable, siempre estando esta del lado izquierdo seguido del símbolo igual y después el valor que se le quiere asignar del lado derecho:

Asignación =

Operador Concatenación

El operador de concatenación es utilizado para unir cadenas de caracteres, este operador es el símbolo plus o suma como comunmente se le conoce, también este operador es el usado igualmente para sumar, por lo que se dice que el mismo esta sobre cargado, con la finalidad que el mismo cumpla las dos funciones:

Concatenación +

Operadores Lógicos

Los operadores lógicos se usados para realizar evaluaciones de variables no en el sentido de su valor en si, es decir, cuanto valen, sino en si son verdaderas o falsas, siendo estos los siguientes:

And  &&

Or ||

Not !

Ciclos Repetitivos

Var c=0;

while(c<=100){

document.write(“el valor de c es:” + c);

C++;

}

Var i, z;

for(i=0;i<=z;i++){

document.write(“el valor de i es:” + i);

}

Ciclo Condicional

Var a=10;

if(a>5){

document.write(“el valor es mayor de 10”);

}else{

document.write(“el valor mucho menor de 10”);

}

Var a=10;

switch(a){

Case 10:

document.write(“el valor es 10”);

break;

Case 20:

document.write(“el valor es 20”);

Break;

Case 30:

document.write(“el valor es 30”);

Break;

Default:

document.write(“el valor no es ni 10 no 20 ni 30”);

}

Alert

alert(“Hola Reciban mis aprecios”);

Prompt

Var mensaje;

mensaje=prompt(“ingrese su nombre:”);

alert(“Hola apreciado (a) ” + mensaje);

confirm

Var mensaje;

if(confirm(“usted quiere aprender javascript”)){

document.write(“si quiero”);

}else{

document.write(“no ni loco”);

}

Eventos en JavaScript

En JavaScript, la interacción con el usuario se consigue mediante la captura de los eventos que éste produce. Un evento es una acción del usuario ante la cual puede realizarse algún proceso (por ejemplo, el cambio del valor de un formulario, o la pulsación de un enlace).

Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos.

Los comandos que están integrados en el código fuente html de la página web y ejecutan una función o un comando en determinadas acciones se denomina controladores de eventos

Los controladores de eventos comienzan con la palabra on…

Los controladores de eventos permiten trabajar con javascript de un modo más flexible y excitante, el evento puede ser el hecho de hacer click en un botón, pasar el puntero del ratón encima de un gráfico o al cargar un documento

onLoad

Es un evento que se activa al cargar la página, específicamente en la etiqueta body del código html de la página web.

<body onLoad=”javascript:alert(‘la pagina se esta cargando’)”>

Aplica sobre Image, Layer, window

onUnload

Es la pareja del load y se activa cuando se cierra la página web .

<body onUnload=”javascript:alert(‘la pagina se esta descargando’)”>

Aplica sobre window

onMouseOver

El controlador onMouseOver es sin lugar a dudas el más empleado, se utiliza en el interior de una etiqueta enlace y se activa cuando el ratón pasa por encima de la zona de un enlace

<img src=’dibujo.jpg’ onMouseOver=”javascript:alert(‘imagen’)”>

<h1 onMouseOver=”javascript:alert(‘titulo’)”>esto es un titulo</h1>

<a href=”pagina” onMouseOver=”javascript:alert(‘titulo’)”>

<a href=”pagina” onMouseOver=”javascript:alert(‘enlace’)”><img src=’dibujo’/></a>

Aplica sobre Layer, Link

onMouseOut

OnMouseOut es la pareja de onMouseOver, aparece escrito un texto en la línea de estado, éste deberá también debera desaparecer cuando el ratón salga de la zona del enlace

<a href=”pagina2.html” onMouseOver=”window.status=’vamos para la dos’” onMouseOut=”window.status=””>

Aplica sobre Layer, Link

onFocus

Significa “pasar el cursor sobre este elemento” este controlador de eventos se utiliza en los campos de entrada compuestos por una o varías líneas

<input type=”text” onFocus=”javaScript:alert(‘campo de texto de una sola línea’)”>

<textarea rows=”2” cols=”2” onFocus=”javaScript:alert(‘campo de texto de varías lineas’)”>

<select onFocus”javaScript:alert(‘campo de seleccion’)”>

Aplica sobre Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window

onBlur

Es la pareja del onFocus este controlador de eventos se aplica en los mismos elementos, es decir, en los campos de entrada que tiene una o varías líneas y las listas de selección

Se activa cuando el elemento pierde el foco, es decir, desde el momento en que se hace click en otro elemento con el ratón, su aplicación corresponde a la del evento onFocus

<input type=”text” onBlur=”javascript:alert(“ha salido de un campo de texto de una sola línea’)”>

<textarea rows=”2” cols=”2” onBlur=”javascript:alert(“ha salido de un campo de texto de varías lineas’)”>

<select onBlur”javascript:alert(‘ha salido de un campo de seleccion’)”>

Aplica sobre Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window

onChange

Este controlador de eventos se desencadena de la misma forma que onBlur, es decir, tan pronto como se sale de un campo de entrada, (siempre y cuando se haya modificado el valor del campo), en lo que concierne a las listas de selección este evento se desencadena por si mismo cuando modifica un valor

<input type=”text” onChange=”javascript:alert(“ha modificado un campo de texto de una sola línea’)”>

<textarea rows=”2” cols=”2” onBlur=”javascript:alert(“ha modificado un campo un texto de varías lineas’)”>

<select onBlur”javascript:alert(‘ha modificado un campo de seleccion’)”>

Aplica sobre FileUpload, Select, Text, Textarea

onClick

OnClick se activa cuando se hace un click en un elemento del formulario, puede tratarse de un botón o casilla de verificación, pero podría tratarse también de un botón para enviar, del botón para borrar o de un botón personalizado

<input type=”button” value=”aceptar” onClick=”javascript:alert(‘sa ha pisado un boton’)”>

Aplica sobre Button, document, Checkbox, Link, Radio, Reset, Submit

onDblclick

OnClick se activa cuando se hace un doble click en un elemento del formulario, puede tratarse de un botón o casilla de verificación, pero podría tratarse también de un botón para enviar, del botón para borrar o de un botón personalizado

<input type=”button” value=”aceptar” onClick=”javascript:alert(‘sa ha pisado un boton’)”>

Aplica sobre document, Link

onSubmit

Este controlador de eventos se utiliza al enviar un formulario, por lo tanto también tiene la misma función que el evento onClick del botón de envío

<input type=”submit” value=”enviar” onClick=”javascript:alert(‘sa ha pisado el boton enviar’)”>

Se puede modificar para que quede así

<input type=”submit” value=”enviar”>

Luego en la etiqueta form debe agregarse el siguiente complemento

<form onSubmit=”javascript:alert(‘se ha enviado el formulario’)”>

Aplica sobre Form

onReset

Este controlador de eventos se usa al limpiar los campos de un formulario

Se puede modificar para que quede así

<input type=”reset” value=”limpiar”>

Luego en la etiqueta form debe agregarse el siguiente complemento

<form onReset=”javascript:alert(‘se ha limpiado el formulario’)”>

Aplica sobre Form

onAbort

El usuario interrumpe la carga de una imagen

Aplica sobre Image

onDragDrop

El usuario arrastra y suelta un objeto en la ventana

Aplica sobre window

onError

La carga de un documento o imagen produce un error

Aplica sobre Image, window

onKeyDown

El usuario pulsa una tecla

Aplica sobre document, Image, Link, Textarea

onKeyPress

El usuario mantiene pulsada una tecla

Aplica sobre document, Image, Link, Textarea

onKeyUp

El usuario libera una tecla

Aplica sobre document, Image, Link, Textarea

onMouseDown

El usuario pulsa un botón del ratón

Aplica sobre Button, document, Link

onMouseMove

El usuario mueve el puntero

Aplica sobre Ninguno (debe asociarse a uno)

onMouseUp

El usuario libera un botón del ratón

Aplica sobre Button, document, Link

onMove

Se mueve una ventana o un marco

Aplica sobre window

onResize

Se cambia el tamaño de una ventana o marco

Aplica sobre window

onSelect

Se selecciona el texto del campo texto o área de texto de un formulario

Aplica sobre Text, Textarea

 

Funciones en JavaScript

Las funciones hacen del javascript sea más flexible, hasta ahora todos los programas tiene un error estético todos los programas empiezan cuando se carga el documento HTML y además cuando se ejecuta un controlador de eventos de los vistos anterior mente no se puede ejecutar más de una acción a la vez, por eso cuando se desea realizar varías acciones a la vez se debe definir una función

Siempre se debe usar la palabra clave function un espacio precede el nombre de la función seguida de 2 paréntesis uno que abre y otro que cierra, dentro de estos van los argumentos que la función recibe en caso de ser necesario

Por ejemplo

Function salida(parametro1, parametro2){

Luego el cuerpo de la función va encerrado dentro de llaves la que abre va después del paréntesis que cierra los argumentos o parámetros, van los comandos de la función lo que se conoce como el cuerpo de la misma

Finalmente esta la llave que cierra el cuerpo de la función

Function salida(parametro1, parametro2){

Comando1

comando2

……

……

}

Funciones sin parámetros

<html>

<head><title>Pagina con funcion</title>

<script language=”JavScript”>

<!–

Function hola(){

Var salida;

salida=”Hola soy Docente Universitario”;

alert(salida);

}

//–>

</script></head>

<body onLoad=”hola()”>

</body>

</html>

Funciones con parametros

<html>

<head><title>Pagina con funcion</title>

<script language=”JavScript”>

<!–

Function hola(mensaje){

alert(“Hola amigo: ”+mensaje);

}

//–>

</script></head>

<body onLoad=”hola(‘manolita’)”>

</body>

</html>

 

Comprobar si un campo no esta vació

if(document.forms[0].txtcedula.value==””){

alert(“ERROR: la cedula esta en blanco”)

document.forms[0].txtcedula.focus();

return false();

}

Validar si un campo es numérico

if(isNaN(document.forms[0].txtcedula.value)){

alert(“ERROR: El Campo cedula es Numerico”);

document.forms[0].txtcedula.focus();

return false();

}

Validar que la Cédula no sea Mayor de 8 Cifras

if(document.forms[0].txtcedula.value.length>8){

alert(“ERROR: El Campo cedula no Puede ser mayor de 8 Digitos”);

document.forms[0].txtcedula.focus();

return false();

}

Validar que la Cédula no sea Mayor de 8 Cifras

var letras=”QWERTYUIOPASDFGHJKLÑZXCVBNMÁÉÍÓÚqwertyuiopasdfghjklñzxcvbnmáéíóú “;

var texto=document.forms[0].txtnombre.value;

var bandera=true;

for(i=0; i<texto.length; i++){

ch=texto.charAt(i);

for(j=0;j<letras.length;j++){

if(ch==letras.charAt(j)){

break;

}

if(j==letras.length-1){

bandera=false;

break;

}

}

}

if(!bandera){

alert(“ERROR: El campo nombre solo debe llevar letras”);

document.forms[0].txtnombre.focus();

return false();

}

Validar Fechas

var Fecha= new String(document.forms[0].txtfecha.value) ;var RealFecha= new Date();

var Ano= new String(Fecha.substring(Fecha.lastIndexOf(“-“)+1,Fecha.length)) ;
var Mes= new String(Fecha.sEnviarubstring(Fecha.indexOf(“-“)+1,Fecha.lastIndexOf(“-“)));
var Dia= new String(Fecha.substring(0,Fecha.indexOf(“-“)));

//alert(“anno” + Ano);

if (isNaN(Ano) || Ano.length<4 || parseFloat(Ano)<1900){
alert(‘Anno inválido’)
return false
}

if (isNaN(Mes) || parseFloat(Mes)<1 || parseFloat(Mes)>12){
alert(‘Mes inválido’)
return false
}

if (isNaN(Dia) || parseInt(Dia, 10)<1 || parseInt(Dia, 10)>31){
alert(‘Día inválido’)
return false
}
if (Mes==4 || Mes==6 || Mes==9 || Mes==11 || Mes==2) {
if (Mes==2 && Dia > 28 || Dia>30) {
alert(‘Día inválido’)
return false
}
}

document.forms[0].txtfecha.value=Ano+”/”+Mes+”/”+Dia;

Validar que se pulse un radio button

if(document.forms[0].txtsexo[0].checked==false && document.forms[0].txtsexo[1].checked==false){

alert(“ERROR: Debe Seleccionar un Sexo”);

return false();

Validar un correo electrónico

Código JavaScript:

<script>

function validarEmail(valor) {

if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(valor)){

alert(“La dirección de email ” + valor + ” es correcta.”)

return (true)

} else {

alert(“La dirección de email es incorrecta.”);

return (false);

}

}

</script>

Código HTML:

<form>

<input type=”text” name=”email” size=”50″>

<input type=”button” value=”Validar e-mail” onClick=”validarEmail(this.form.email.value);”>

</form>

Validar que se pulse por lo menos un radio button

bandera=0;

for(i=0;i<document.forms[0].pasatiempo1.length;i++){

if(document.forms[0].pasatiempo1[i].checked==true){

bandera=1;

}

}

if(bandera==0){

alert(“ERROR: Debe Seleccionar por lo menos un Pasatiempo”);

return false();

}}

Validar que se seleccione un item de una lista desplegable

bandera=0;

for(i=0;i<document.forms[0].txtciudad.options.length;i++){

if(document.forms[0].txtciudad.options[i].selected){

bandera=1;

}

}

if(bandera==0){

alert(“ERROR: Debe Seleccionar por lo menos una ciudad”);

return false();

}

Recuperar datos de un Formulario

Para recuperar los datos del formulario sólo hace falta con recorrer los objetos y en la mayoría de ellos se lee la propiedad value si son text, o textarea, checked si son radio button o checkbox y si son listas solo hace falta saber si están selected

Para leer un text

su cedula es: “+document.forms[0].txtcedula.value+”\n”;

Para leer un Radio Button

if(document.forms[0].txtsexo[0].checked==true){

m=m+” Masculino\n”;

}else{

m=m+” Femenino\n”;

}

Para leer y recorrer unos checkbox

for(i=0;i<document.forms[0].pasatiempo1.length;i++){

if(document.forms[0].pasatiempo1[i].checked){

m=m+document.forms[0].pasatiempo1[i].value + “\n”;

}

}

Para leer y recorrer una lista

for(i=0;i<document.forms[0].txtciudad.length;i++){

if(document.forms[0].txtciudad.options[i].selected==true){

m=m+document.forms[0].txtciudad.options[i].value+”\n”;

}

}

Para leer una lista desplegable

for(i=0;i<document.forms[0].txtciudad.length;i++){

if(document.forms[0].txtciudad.options[i].selected==true){

m=m+document.forms[0].txtciudad.options[i].value+”\n”;

}

}

Objetos en JavaScript

Javascript tiene predefinidos varios objetos por defecto y estos pueden instanciarse para luego mediante el objeto poder acceder a los métodos y propiedades de los mismos los más usados son:

Match

String

Date

Array

Screen

Document

Window

Http

Objeto Math

Este objeto se utiliza para poder realizar cálculos en nuestros scripts. Tiene la peculiaridad de que sus propiedades no pueden modificarse, sólo consultarse. Estas propiedades son constantes matemáticas de uso frecuente en algunas tareas, por ello es lógico que sólo pueda consultarse su valor pero no modificarlo.

Sus Propiedades Son

* E. Número ‘e’, base de los logaritmos naturales (neperianos).

* LN2. Logaritmo neperiano de 2.

* LN10. Logaritmo neperiano de 10.

* LOG2E. Logaritmo en base 2 de e.

* LOG10E. Logaritmo en base 10 de e.

* PI. Número PI.

* SQRT1_2. Raíz cuadrada de 1/2.

* SQRT2. Raíz cuadrada de 2.

Sus Métodos Son

 

* abs(numero). Función valor absoluto.

* acos(numero). Función arcocoseno. Devuelve un valor cuyas unidades son radianes o NaN. ‘numero’ debe pertenecer al rango [-1,1], en otro caso devuelve NaN.

* asin(numero). Función arcoseno. Devuelve un valor cuyas unidades son radianes o NaN. ‘numero’ debe pertenecer al rango [-1,1], en otro caso devuelve NaN.

* atan(numero). Función arcotangente. Devuelve un valor cuyas unidades son radianes o NaN.

* atan2(x,y). Devuelve el ángulo formado por el vector de coordenadas (x,y) con respecto al eje OX.

* ceil(numero). Devuelve el entero obtenido de redondear ‘numero’ “por arriba”.

* cos(numero). Devuelve el coseno de ‘numero’ (que debe estar en radianes) o NaN.

* exp(numero). Devuelve el valor enumero.

* floor(numero). Devuelve el entero obtenido de redondear ‘numero’ “por abajo”.

* log(numero). Devuelve el logaritmo neperiano de ‘numero’.

* max(x,y). Devuelve el máximo de ‘x’ e ‘y’.

* min(x,y). Devuelve el mínimo de ‘x’ e ‘y’.

* pow(base,exp). Devuelve el valor baseexp.

* random(). Devuelve un número pseudoaleatorio entre 0 y 1.

* round(numero). Redondea ‘numero’ al entero más cercano.

* sin(numero). Devuelve el seno de ‘numero’ (que debe estar en radianes) o NaN.

* sqrt(numero). Devuelve la raíz cuadrada de número.

* tan(numero). Devuelve la tangente de ‘numero’ (que debe estar en radianes) o NaN.

Objeto Math Ejemplo

Function cifraaleatoria(){

Var aleatorio;

aleatorio=Math.random()*(6-1)+1;

aleatorio=Math.round(aleatorio);

Alert(“la cifra es ”+aleatorio);

}

Se llama desde un botón con un evento onClick=”cifraaleatoria()”

Objeto String

Este objeto nos permite hacer diversas manipulaciones con las cadenas, para que trabajar con ellas sea más sencillo. Cuando asignamos una cadena a una variable, JS está creando un objeto de tipo String que es el que nos permite hacer las manipulaciones.

Propiedades

length. Valor numérico que nos indica la longitud en caracteres de la cadena dada.

prototype. Nos permite asignar nuevas propiedades al objeto String.

Métodos

 

anchor(nombre). Crea un enlace asignando al atributo NAME el valor de ‘nombre’. Este nombre debe estar entre comillas ” ”

big(). Muestra la cadena de caracteres con una fuente grande.

blink(). Muestra la cadena de texto con un efecto intermitente.

charAt(indice). Devuelve el carácter situado en la posición especificada por ‘indice’.

fixed(). Muestra la cadena de caracteres con una fuente proporcional.

fontcolor(color). Cambia el color con el que se muestra la cadena. La variable color debe ser especificada entre comillas: ” “, o bien siguiendo el estilo de HTML, es decir “#RRGGBB” donde RR, GG, BB son los valores en hexadecimal para los colores rojo, verde y azul, o bien puede ponerse un identificador válido de color entre comillas. Algunos de estos identificadores son “red”, “blue”, “yellow”, “purple”, “darkgray”, “olive”, “salmon”, “black”, “white”, …

fontsize(tamaño). Cambia el tamaño con el que se muestra la cadena. Los tamaños válidos son de 1 (más pequeño) a 7 (más grande). indexOf(cadena_buscada,indice) Devuelve la posición de la primera ocurrencia de ‘cadena_buscada’ dentro de la cadena actual, a partir de la posición dada por ‘indice’. Este último argumento es opcional y, si se omite, la busqueda comienza por el primer carácter de la cadena.

italics(). Muestra la cadena en cursiva.

lastIndexOf(cadena_buscada,indice). Devuelve la posición de la última ocurrencia de ‘cadena_buscada’ dentro de la cadena actual, a partir de la posición dada por ‘indice’, y buscando hacia atrás. Este último argumento es opcional y, si se omite, la busqueda comienza por el último carácter de la cadena.

link(URL). Convierte la cadena en un vínculo asignando al atributo HREF el valor de URL.

small(). Muestra la cadena con una fuente pequeña.

split(separador). Parte la cadena en un array de caracteres. Si el carácter separador no se encuentra, devuelve un array con un sólo elemento que coincide con la cadena original. A partir de NS 3, IE 4 (JS 1.2).

strike(). Muestra la cadena de caracteres tachada.

sub(). Muestra la cadena con formato de subíndice.

substring(primer_Indice,segundo_Indice). Devuelve la subcadena que comienza en la posición ‘primer_Indice + 1’ y que finaliza en la posición ‘segundo_Indice’. Si ‘primer_Indice’ es mayor que ‘segundo_Indice’, empieza por ‘segundo_Indice + 1’ y termina en ‘primer_Indice’. Si hacemos las cuentas a partir de 0, entonces es la cadena que comienza en ‘primer_Indice’ y termina en ‘segundo_Indice – 1’ (o bien ‘segundo_Indice’ y ‘primer_Indice – 1’ si el primero es mayor que el segundo).

sup(). Muestra la cadena con formato de superíndice.

toLowerCase(). Devuelve la cadena en minúsculas.

toUpperCase(). Devuelve la cadena en minúsculas.

Objeto String Ejemplo

Function texto(){

Var palabra, m;

palabra=prompt(“introduzca una palabra”);

m=“su palabra tiene “+ palabra.length + “ caracteres “;

m=m “el tercer carácter es “+ palabra.charAt(2) + “ !“;

m=m “la palabra termina en “+ palabra.charAt(palabra.substring(0,2)) + “ !“;

m=m “su palabra a mayúsculas  “+ palabra.toLowerCase() + “ !“;

m=m “su palabra a minúsculas  “+ palabra.toUpperCase() + “ !“;

Alert(m);

}

Se llama desde un botón con un evento onClick=”navegador()”

Objeto Date

Este objeto nos va a permitir hacer manipulaciones con fechas: poner fechas, consultarlas… para ello, debemos saber lo siguiente: JS maneja fechas en milisegundos. Los meses de Enero a Diciembre vienen dados por un entero cuyo rango varía entre el 0 y el 11 (es decir, el mes 0 es Enero, el mes 1 es Febrero, y así sucesivamente), los días de la semana de Domingo a Sábado vienen dados por un entero cuyo rango varía entre 0 y 6 (el día 0 es el Domingo, el día 1 es el Lunes, …), los años se ponen tal cual, y las horas se especifican con el formato HH:MM:SS.

Podemos crear un objeto Date vacío, o podemos crealo dándole una fecha concreta. Si no le damos una fecha concreta, se creará con la fecha correspondiente al momento actual en el que se crea. Para crearlo dándole un valor, tenemos estas posibilidades:

var Mi_Fecha = new Date(año, mes);

var Mi_Fecha = new Date(año, mes, día);

var Mi_Fecha = new Date(año, mes, día, horas);

var Mi_Fecha = new Date(año, mes, día, horas, minutos);

var Mi_Fecha = new Date(año, mes, día, horas, minutos, segundos);

En día pondremos un número del 1 al máximo de días del mes que toque. Todos los valores que tenemos que pasar al constructor son enteros. Pasamos a continuación a estudiar los métodos de este objeto.

Métodos

* getDate(). Devuelve el día del mes actual como un entero entre 1 y 31.

* getDay(). Devuelve el día de la semana actual como un entero entre 0 y 6.

* getHours(). Devuelve la hora del día actual como un entero entre 0 y 23.

* getMinutes(). Devuelve los minutos de la hora actual como un entero entre 0 y 59.

* getMonth(). Devuelve el mes del año actual como un entero entre 0 y 11.

* getSeconds(). Devuelve los segundos del minuto actual como un entero entre 0 y 59.

* getTime(). Devuelve el tiempo transcurrido en milisegundos desde el 1 de enero de 1970 hasta el momento actual.

* getYear(). Devuelve el año actual como un entero.

* setDate(día_mes). Pone el día del mes actual en el objeto Date que estemos usando.

* setDay(día_semana). Pone el día de la semana actual en el objeto Date que estemos usando.

* setHours(horas). Pone la hora del día actual en el objeto Date que estemos usando.

* setMinutes(minutos). Pone los minutos de la hora actual en el objeto Date que estemos usando.

* setMonth(mes). Pone el mes del año actual en el objeto Date que estemos usando.

* setSeconds(segundos). Pone los segundos del minuto actual en el objeto Date que estemos usando.

* setTime(milisegundos). Pone la fecha que dista los milisegundos que le pasemos del 1 de enero de 1970 en el objeto Date que estemos usando.

* setYear(año). Pone el año actual en el objeto Date que estemos usando.

* toGMTString(). Devuelve una cadena que usa las convenciones de Internet con la zona horaria GMT.

 

Objeto Date Ejemplo

Function tiempo(){

Var hora;

Hora=new Date();

Alert(“la hora es: ”+hora.getHours()+ “ y los minutos son: “+ hora.getMinutes());

}

Se llama desde un botón con un evento onClick=”tiempo()”

Objeto Boolean

Este objeto nos permite crear booleanos, esto es, un tipo de dato que es cierto o falso, tomando los valores true o false. Podemos crear objetos de este tipo mediante su constructor. Veamos varios ejemplos:

a = new Boolean(); asigna a ‘a’ el valor ‘false’

a = new Boolean(0); asigna a ‘a’ el valor ‘false’

a = new Boolean(“”); asigna a ‘a’ el valor ‘false’

a = new Boolean(false); asigna a ‘a’ el valor ‘false’

a = new Boolean(numero_distinto_de_0); asigna a ‘a’ el valor ‘true’

a = new Boolean(true); asigna a ‘a’ el valor ‘true’

Objeto Number

Este objeto representa el tipo de dato número con el que JS trabaja. Podemos asignar a una variable un número, o podemos darle valor, mediante el constructor Number, de esta forma:

a = new Number(valor);, por ejemplo, a = new Number(3.2); da a a el valor 3.2. Si no pasamos algún valor al constructor, la variable se inicializará con el valor 0.

Propiedades

* MAX_VALUE. Valor máximo que se puede manejar con un tipo numérico

* MIN_VALUE. Valor mínimo que se puede manejar con un tipo numérico

* NaN. Representación de un dato que no es un número

* NEGATIVE_INFINITY. Representación del valor a partir del cual hay desbordamiento negativo (underflow)

* POSITIVE_INFINITY. Representación del valor a partir del cual hay desbordamiento positivo (overflow)

Para consultar estos valores, no podemos hacer:

a = new Number(); alert(a.MAX_VALUE);

porque JS nos dirá undefined, tenemos que hacerlo directamente sobre Number, es decir, tendremos que consultar los valores que hay en Number.MAX_VALUE, Number.MIN_VALUE, etc.

Objeto Screen

Function navegador(){

Var browser;

browser=navigator.appName;

switch(browser){

Case “Microsoft Internet Explorer”:

Alert(“Microsoft”);

Break;

Case “Netscape”:

Alert(“Netscape”);

Break;

Default:

Alert(“Ninguno de los anteriores”);

}

Se llama desde un botón con un evento onClick=”navegador()”

Objeto Array

Este objeto nos va a dar la facilidad de construir arrays cuyos elementos pueden contener cualquier tipo básico, y cuya longitud se modificará de forma dinámica siempre que añadamos un nuevo elemento (y, por tanto, no tendremos que preocuparnos de esa tarea). Para poder tener un objeto array, tendremos que crearlo con su constructor, por ejemplo, si escribimos:

a=new Array(15);

tendremos creada una variable a que contendrá 15 elementos, enumerados del 0 al 14. Para acceder a cada elemento individual usaremos la notación a[i], donde i variará entre 0 y N-1, siendo N el número de elementos que le pasamos al constructor.

También podemos inicializar el array a la vez que lo declaramos, pasando los valores que queramos directamente al constructor, por ejemplo:

a=new Array(21,”cadena”,true);

que nos muestra, además, que los elementos del array no tienen por qué ser del mismo tipo.

Por tanto: si ponemos un argumento al llamar al constructor, este será el número de elementos del array (y habrá que asignarles valores posteriormente), y si ponemos más de uno, será la forma de inicializar el array con tantos elementos como argumentos reciba el constructor.

Podríamos poner como mención especial de esto lo siguiente. Las inicializaciones que vemos a continuación:

a=new Array(“cadena”);

a=new Array(false);

Inicializan el array a, en el primer caso, con un elemento cuyo contenido es la cadena cadena, y en el segundo caso con un elemento cuyo contenido es false.

Lo comentado anteriormente sobre inicialización de arrays con varios valores, significa que si escribimos

a=new Array(2,3);

NO vamos a tener un array con 2 filas y 3 columnas, sino un array cuyo primer elemento será el 2 y cuyo segundo elemento será el 3. Entonces, ¿cómo creamos un array bidimensional? (un array bidimensional es una construcción bastante frecuente). Creando un array con las filas deseadas y, después, cada elemento del array se inicializará con un array con las columnas deseadas. Por ejemplo, si queremos crear un array con 4 filas y 7 columnas, bastará escribir:

a=new Array(4);

for(i=0;i<4;i++) a[i]=new Array(7);

para referenciar al elemento que ocupa la posición (i,j), escribiremos a[i][j];

Propiedades

* length. Esta propiedad nos dice en cada momento la longitud del array, es decir, cuántos elementos tiene.

* prototype. Nos permite asignar nuevas propiedades al objeto String.y

Métodos

 

* join(separador). Une los elementos de las cadenas de caracteres de cada elemento de un array en un string, separando cada cadena por el separador especificado.

* reverse(). Invierte el orden de los elementos del array.

* sort(). Ordena los elementos del array siguiendo el orden lexicográfico.

<!– Manual de JavaScript de WebEstilo.com –>

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>

</HEAD>

<BODY>

<script LANGUAGE=”JavaScript”>

<!–

var j=new Array(2),h=new Array(1), i=new Array(1,”Hola”,3);

var b=new Array(“Palabra”,”Letra”,”Amor”,”Color”,”Cariño”);

var c=new Array(“Otra cadena con palabras”);

var d=new Array(false);

j[0]=new Array(3);

j[1]=new Array(2);

j[0][0]=0; j[0][1]=1; j[0][2]=2;

j[1][0]=3; j[1][1]=4; j[1][2]=5;

document.write(c);

document.write(“<P>”+d+”<P>”);

document.write(“j[0][0]=”+j[0][0]+”; j[0][1]=”+j[0][1]+

“; j[0][2]=”+j[0][2]+”<BR>”);

document.write(“j[1][0]=”+j[1][0]+”; j[1][1]=”+j[1][1]+

“; j[1][2]=”+j[1][2]);

document.write(“<P>h= “+(h[0]=’Hola’)+”<P>”);

document.write(“i[0]=”+i[0]+”; i[1]=”+i[1]+”; i[2]=”+i[2]+”<P>”);

document.write(“Antes de ordenar: “+b.join(‘, ‘)+”<P>”);

document.write(“Ordenados: “+b.sort()+”<P>”);

document.write(“Ordenados en orden inverso: “+b.sort().reverse());

//–>

</script>

</BODY>

</HTML>

Otro ejemplo del Objeto Array

<html>

<head><title></title>

<script>

var miArray = new Array(3);

miArray[0] = 155;

miArray[1] = 4;

miArray[2] = 499;

for (i=0;i<3;i++){

document.write(“Posicion ” + i + ” del array: ” + miArray[i])

document.write(“<br>”)

}

</script>

</head>

<body>

</body>

</html>

A continuación les dispongo este ejemplo completo, para que puedan observar como podemos efectuar desde nuestros formularios las validaciones de cada uno de nuestros campos. Lo que debe hacer es copiar el siguiente código lo selecciona – lo copia y lo pega en el editor de su preferencia, luego lo guarda con la etensión (.php), si desea lo puede guardar bajo el nombre: valida_entrada.php. Recuerde que debe guardarlo en la carpeta donde usted va a ejecutar su programa, luego lo ejecuta colocando en browser de su preferencia: http://localhost/estudiando/valida_entrad.php,  estudiando es la carpeta que usted debe crear para guardar alli su programa, a continuación le muestro el paso a paso y la ejecución del programa:

1.- Seleccione copie y pegue este programa en su editor de preferencia:

<html>
<!–Programa para demostrar las validaciones usando Java Scrip –>
<!–MSc Angel Daniel Fuentes – IUTOMS –>
<head>
<title>Demostrando como se valida usando Java Scrip</title>
</head>

<body>

<script language=javascript>
function valida_envia_datos(){
//valido el nombre
if (document.fvalida.nombre.value.length==0){
alert(“Indique su nombre, este campo no lo puede dejar en blanco”)
document.fvalida.nombre.focus()
return 0;
}

//valido la edad. tiene que ser entero mayor que 18
edad = document.fvalida.edad.value
document.fvalida.edad.value=edad
if (edad==””){
alert(“Tiene que indicar su edad.”)
document.fvalida.edad.focus();
return 0;
}else{
if (edad<18){
alert(“Debe ser mayor de edad.”)
document.fvalida.edad.focus()
return 0;
}
}

//valido el Nivel Académico
if (document.fvalida.nivel.selectedIndex==0){
alert(“Debe seleccionar un Nivel de Estudio.”)
document.fvalida.nivel.focus()
return 0;
}

//Aquí se simula que se estan enviando los datos del formulario
alert(“Muchas gracias por practicar y enviar estos datos”);
document.fvalida.submit();
}
<!–Con la instrucción  /script> se cierra el scrip de java–>
</script>

<!–A continuación se comienza a programar el formulario –>

<form name=”fvalida”>
<table>
<tr>
<td>Nombre: </td>
<td><input type=”text” name=”nombre” size=”30″ maxlength=”100″></td>
</tr>
<tr>
<td>Edad: </td>
<td><input type=”text” name=”edad” size=”3″ maxlength=”2″></td>
</tr>
<tr>
<td>Nivel Acad&eacute;mico:</td>
<td>
<select name=nivel>
<option value=”Elegir”>Seleccione
<option value=”Bachiller”>Bachiller
<option value=”TSU”>T&eacute;cnico Superior Universitario
<option value=”Universitario”>Universitario
<option value=”Especializacion”>Especializaci&oacute;n
<option value=”Maestria”>Maestr&iacute;a
<option value=”Doctorado”>Doctorado
<option value=”Post Doctorado”>Post Doctorado
</select>
</td>
</tr>
<tr>
<td colspan=”2″ align=”center”><input type=”button” value=”Enviar” onClick=”valida_envia_datos()”></td>
</tr>
</table>
</form>
</body>
</html>

Si presenta algún problema con el programa, al momento de intentar ejecutarlo, verifique o actualice todas las instrucciones que poseen  comillas dobles, no modifique otra cosa, ya que el programa está probado y funciona perfectamente. (Veale la parte positiva, usted mismo logrará entender a profundidad el código, ya que al efectuar los ajustes va internalizando las sintaxis de las instrucciones).

2.- Guarde el programa. Si lo desea puede llamarle valida_entrada.php. Recuerde guardarlo en la ruta desu disco duro, donde luego lo va a ejecutar.

Si usted esta trabajando bajo software privativo (XAMPP) La ruta en su  computador sería:

C:\xampp\htdocs\estudiando\valida_entrada.php

Si usted esta trabajando bajo software privativo (WAMPP) La ruta en su  computador sería:

C:\wampp\www\estudiando\valida_entrada.php

Si usted esta trabajando bajo software libre (LINUX) La ruta en su  computador sería:

/var/www/estudiando/valida_entrada.php

3.- Ejecute su programa desde su browser preferido, colocando en la barra de dirección:

http://localhost/estudiando/valida_entrada.php

4.- Verifique paso a paso lo que el programa ejecuta, estudie o repase a profundidad lo explicado, practique, practique, practique y practique, notará que allí está el éxito:

A continuación le dispongo las pantallas del programa en ejecución, accione un clic sobre ellas, para que las pueda ver en grande:

programa valida_entradavalidando el nombre

validacion edad mayor a 18 añosseleccionando el nivel academicoContinue siempre adelente, mantenga  una perseverancia en todo lo que se dedica a efectuar, le deseo los mayores de los éxitos.

“Estoy convencido de que la mitad de lo que separa a los emprendedores exitosos de los que no triunfan es la perseverancia.” (Steve Jobs)

Anuncios

2 pensamientos en “Java Script”

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: