Sie sind auf Seite 1von 39

UNIVERSIDAD DON BOSCO

FACULTAD DE ESTUDIOS TECNOLGICOS


ESCUELA DE COMPUTACIN
Nombre de la Practica:
Lugar de Ejecucin:
CICLO: 01/2015
Tiempo Estimado:
Materia:
Docentes de prctica:

GUIA DE LABORATORIO #2
Estructuras de control - Sentencias condicionales y matrices
Centro de Cmputo
2 horas con 30 minutos
Lenguajes Interpretados en el Servidor
Ing. Ricardo Ernesto Elas G. / Ing. Miguel Eduardo Garcia O.

I. OBJETIVOS
En esta gua de prctica se espera que los estudiantes logren:
Adquirir amplio dominio en el uso de las sentencias condicionales if.
Utilizar correctamente todas las variantes de la sentencia if (if-else, if-else if-else, if anidados).
Tener conocimiento completo del funcionamiento y utilizacin de una sentencia switch.
Lograr la habilidad de manejar la caracterstica del efecto de cada en cascada de la sentencia switch.
Desarrolle la capacidad de utilizar eficazmente matrices para almacenar valores y acceder a sus valores en
los scripts PHP.
Sea capaz de utilizar estructuras de control repetitivas para trabajar con datos procedentes de una matriz
escalar o asociativa.
Adquiera el dominio de matrices unidimensionales y multidimensionales utilizando ciclos o lazos
repetitivos anidados.

II. INTRODUCCION TEORICA


Los primeros ejemplos de programacin que suelen utilizarse
estn compuestos por una serie de instrucciones que se ejecutan
de forma secuencial. A medida que se va a avanzando en un
curso uno cae en la cuenta que lo ms habitual es que los
problemas que se nos plantean casi nunca se pueden resolver
con una ejecucin secuencial. Es importante dominar y conocer
cierto tipo de instrucciones que permitan modificar el flujo de
ejecucin de las instrucciones. Estas instrucciones permitirn
controlar el flujo lgico en que se ejecutarn las instrucciones
dentro de un script. Especficamente, podremos utilizar
estructuras de control condicionales que nos permitirn bifurcar
el flujo del programa dependiendo de si una condicin se evala
como verdadera o falsa, o repetir un bloque de instrucciones un
nmero determinado de veces para realizar de forma ms
eficiente y elegante un proceso.
Las estructuras de control se dividen en sentencias condicionales, selectivas y repetitivas. Vamos a examinar
todos estos tipos de instrucciones durante este curso.

1 / 39

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

Sentencias condicionales
Las sentencias condicionales se pueden clasificar en dos grupos:
a) Sentencias condicionales if.
i. Sentencia if simple.
ii. Sentencia if-else.
iii. Sentencia if-elseif-else.
b) Sentencia selectiva swicht.
Sentencia if
La sentencia if permite evaluar una expresin condicional y decidir, en base al resultado, si se ejecuta o no un
bloque de cdigo. Si la evaluacin resulta verdadera (true) se ejecuta el bloque de instrucciones y si resulta
falsa (false) no se ejecuta.
PHP proporciona una estructura if que es similar a la de C:
Sintaxis bsica:
<?php
if(expresion) //sentencia;
?>
Sintaxis extendida:
<?php
if(expresion){
//bloque de sentencias;
}
?>
La sintaxis bsica muestra la construccin de una sentencia if cuando esta contiene una sola instruccin. La
sintaxis extendida muestra una sentencia if con varias instrucciones dentro del bloque que encierran las llaves
del if.
Como se describe en la seccin sobre expresiones, expresion se evala a su valor condicional (boolean). Si
expresion se evala como TRUE, PHP ejecutar la sentencia, y si se evala como FALSE, la ignorar y
continuar con la siguiente instruccin despus del if.
El siguiente ejemplo mostrara: $a es mayor que $b, si $a fuera mayor que $b. De no ser as no mostrara nada:
<?php
if($a > $b) print "$a es mayor que $b";
?>
A menudo, se desea tener ms de una sentencia ejecutada de forma condicional. Por supuesto, no hay
necesidad de encerrar cada sentencia con una clusula if. En vez de eso, se pueden agrupar varias sentencias
en un grupo de sentencias. Por ejemplo, este cdigo mostrara $a es mayor que \$b, si $a fuera mayor que $b,
y entonces asignara el valor de $a a $b:
<?php
if($a > $b) {
print "$a es mayor que $b";
$b = $a;
}
?>

Lenguajes Interpretados en el Servidor

Gua# 2: Estructuras de control - Sentencias condicionales y matrices


Las sentencias if se pueden anidar indefinidamente dentro de otras sentencias if o else, lo cual proporciona
una flexibilidad completa para ejecuciones condicionales en las diferentes partes de tu programa.
Sentencia if-else
Hay situaciones en las que se desea ejecutar una o varias sentencias si se cumple una cierta condicin, y
ejecutar un bloque de sentencias distintas si la condicin no se cumple. En estos casos es til la sentencia if
else. De esta forma se extiende una sentencia if para ejecutar una o varias sentencias en caso de que la
expresin en la sentencia if se evale como FALSE. Por ejemplo, el siguiente cdigo mostrara $a (su valor) es
impar si $a%2 resultara evaluado como 1 o $a es par si fuera evaluado
como 0. Note que solamente se pueden obtener esos valores como
resultado:
<?php
if($a % 2){
print "$a es impar";
}
else{
print "$a es par";
}
?>
La sentencia else se ejecuta solamente si la expresin if se evala como
FALSE.
Sentencia if-elseif-else
La sentencia elseif es una combinacin de if y else. Al igual que un else, extiende una sentencia if para
ejecutar una sentencia diferente en caso de que la expresin if original se evala como FALSE. No obstante, a
diferencia del else, ejecutar esa expresin alternativa solamente si la expresin condicional elseif se evala
como TRUE. Un bloque if puede contener mltiples elseif, pero nicamente un else. El bloque de
instrucciones bajo un elseif se ejecutar, nicamente si la condicin if y todas las instrucciones elseif anteriores
devuelven FALSE.
Por ejemplo, el siguiente cdigo mostrara a es mayor que b, a es igual a b o a es menor que b:
<?php
if($a > $b){
echo "$a
}
elseif($a ==
echo "$a
}
else{
echo "$a
}

es mayor que $b";


$b){
es igual que $b";
es mayor que $b";

?>
Puede haber varios elseif dentro de la misma sentencia if. La primera expresin elseif (si hay alguna) que se
evale como TRUE se ejecutara. En PHP, tambin se puede escribir 'else if' (con dos palabras) y el
comportamiento sera idntico al de un 'elseif' (una sola palabra).
La sentencia elseif se ejecuta slo si la expresin if precedente y cualquier otra expresin elseif precedente se
evalan como FALSE, y la expresin elseif actual se evala como TRUE.

Lenguajes Interpretados en el Servidor

Gua# 2: Estructuras de control - Sentencias condicionales y matrices


Sintaxis alternativa de la sentencia condicional
PHP ofrece una forma alternativa de construccin de una sentencia condicional. Esta forma alternativa
reemplaza el uso de la llave de apertura del bloque if por dos puntos (:) y la llave de cierre del bloque por la
sentencia endif.
Ejemplo:
<?php
if($num % 2 == 0):
echo $num . " es par";
else:
echo $num . " es impar";
?>

Operador condicional
En PHP se puede utilizar un operador ternario utilizado con frecuencia en el lenguaje C++. Este es el
operador "?:", o tambin llamado operador condicional. Este es un operador ternario que se utiliza para
simplificar la escritura de una sentencia condicional de tipo ifelse, cuando esta contiene nicamente una
sentencia en el bloque if y una sentencia en el bloque else.
La sintaxis de este operador es la siguiente:
(expresion_condicional) ? expresion1 : expresion2 ;
Debe tener en cuenta que si la expresin_condicional se evala como TRUE, se ejecutar expresion1
y si se evala FALSE, se ejecutar expresion2. Como las expresiones devuelven un valor, usted puede
perfectamente asignar la instruccin completa en una variable, como se muestra en el siguiente ejemplo:
$condicion = ($nota >= 6.0) ? "Aprobado" : "Reprobado" ;
Si la expresin condicional resulta verdadera la variable $condicion tendr el valor de "Aprobado", si se
evala como falsa, entonces el valor asignado a $condicion ser "Reprobado".
Sentencia switch
La sentencia switch es similar a una sentencia if con
varias instrucciones elseif. La diferencia est en que en
un if la condicin se evala tanto por la sentencia if
como por los elseif que esta contenga. En cambio, en un
switch, la condicin se evala solamente una vez, luego
el valor obtenido se compara con una serie de valores
de prueba predefinidos. Cada uno de estos valores se
presenta con una sentencia case dentro del switch.
Cuando uno de estos valores coincide con el evaluado
por la condicin se ejecuta el bloque de instrucciones
dentro de ese case de forma secuencial. En caso de que
ninguno de los valores de prueba coincida con el
devuelto por la condicin se ejecutar el bloque de
instrucciones bajo la sentencia default, si es que est
presente, si no lo est, entonces no se ejecutar ninguna
instruccin en el switch.
Nota: Tener en cuenta que al contrario que otros lenguajes de programacin, continue se aplica a switch y
funciona de manera similar a break. Si se tiene un switch dentro de un bucle y se quiere continuar con el paso
siguiente en el bucle externo, usar continue 2.

Lenguajes Interpretados en el Servidor

Gua# 2: Estructuras de control - Sentencias condicionales y matrices


Los siguientes dos ejemplos son dos modos distintos de escribir el mismo programa, uno usa una serie de
sentencias if, y el otro usa la sentencia switch:
Utilizando if:
<?php
if ($i == 0) {
echo "$i es igual a 0";
}
elseif ($i == 1) {
echo "$i es igual a 1";
}
elseif ($i == 2) {
echo "$i es igual 2";
}
?>
Utilizando switch:
<?php
switch ($i) {
case 0:
print "i equals 0";
break;
case 1:
print "i equals 1";
break;
case 2:
print "i equals 2";
break;
}
?>
Es importante entender cmo se ejecuta la sentencia switch para evitar errores. La sentencia switch se ejecuta
lnea por lnea (realmente, sentencia a sentencia). Al comienzo, no se ejecuta cdigo. Slo cuando se encuentra
una sentencia case con un valor que coincide con el valor obtenido en la evaluacin de la expresin switch,
PHP comienza a ejecutar las sentencias. PHP contina ejecutando las sentencias hasta el final del bloque
switch, o la primera vez que se encuentre una sentencia break. Si no se escribe una sentencia break al final de
una lista de sentencias case, PHP seguir ejecutando las sentencias del siguiente case. Por ejemplo:
<?php
switch ($i) {
case 0:
print "i es igual a 0";
case 1:
print "i es igual a 1";
case 2:
print "i es igual a 2";
}
?>
Aqu, si $i es igual a 0, PHP ejecutara todas las sentecias print! Si $i es igual a 1, PHP ejecutara las ltimas
dos sentencias print y slo si $i es igual a 2, se obtendra la conducta 'esperada' y solamente se mostrara 'i es
igual a 2'. As, es importante no olvidar las sentencias break (incluso aunque pueda querer evitar escribirlas
intencionadamente en ciertas circunstancias).
En una sentencia switch, la condicin se evala slo una vez y el resultado se compara a cada sentencia case.
En una sentencia elseif, la condicin se evala otra vez. Si tu condicin es ms complicada que una
comparacin simple y/o est en un bucle estrecho, un switch puede ser ms rpido.

Lenguajes Interpretados en el Servidor

Gua# 2: Estructuras de control - Sentencias condicionales y matrices


La lista de sentencias de un case puede tambin estar vaca, lo cual simplemente pasa el control a la lista de
sentencias del siguiente case.
<?php
switch ($i) {
case 0:
case 1:
case 2:
print "i es menor que 3, pero no negativo";
break;
case 3:
print "i es 3";
}
?>
Un caso especial es el default. Este "case" coincide con todo lo que no coincidan los otros case. Por ejemplo:
<?php
switch ($i) {
case 0:
print "i es igual a 0";
break;
case 1:
print "i es igual a 1";
break;
case 2:
print "i es igual a 2";
break;
default:
print "i no es igual a 0, 1 o 2";
}
?>
La expresin case puede ser cualquier expresin que se evale a un tipo simple, es decir, nmeros enteros o
de punto flotante y cadenas de texto. No se pueden usar aqu ni arrays ni objetos a menos que se conviertan a
un tipo simple.
break
break escapa de la estructuras de control iterante (bucle) actual for, while, o switch.
break acepta un parmetro opcional, el cual determina cuntas estructuras de control hay que escapar.

Sintaxis alternativa de la sentencia switch


Tambin la sentencia switch puede utilizarse con una sintaxis alternativa de dos puntos. La forma de
construir una sentencia switch con sintaxis alternativa, se muestra a continuacin:
<?php
switch($i):
case 0:
echo "$i es igual a 0";
break;
case 1:
echo "$i es igual a 1";
break;
case 2:
echo "$i es igual a 2";
break;
default:

Lenguajes Interpretados en el Servidor

Gua# 2: Estructuras de control - Sentencias condicionales y matrices


echo "$i no es igual a 0, 1 ni 2";
endswitch;
?>

Matrices en PHP
Una matriz o arreglo es un tipo de dato compuesto que permite almacenar bajo un mismo nombre un
conjunto de valores que pueden ser de tipos de datos diferentes. Cuando se define una matriz se hace de
forma similar a las variables escalares con la diferencia de que la asignacin de valores se debe realizar a cada
una de las posiciones del arreglo. Tambin se puede utilizar en lugar de la asignacin directa estructuras de
control como ciclos repetitivos o funciones para asignar varias posiciones de una vez, como veremos ms
adelante.

Clasificacin de las matrices


En PHP se pueden clasificar las matrices de dos formas:
a) Por el tipo de ndice que utilizan. Este ndice se utiliza para hacer referencia a un elemento especfico
del arreglo y,
b) Por el nmero de dimensiones de la matriz. Esto es, cuntos ndices son necesarios para hacer
referencia a un elemento especfico.
Tipos de matrices segn el tipo de ndice:
a) Matrices escalares
Tambin se les conoce como matrices enumeradas o indexadas, por el hecho que utilizan
nmeros enteros como ndices. En PHP el ndice para el primer elemento de un arreglo empieza
en cero y los siguientes elementos van aumentando en uno este valor de ndice, de modo que el
segundo elemento tiene ndice uno, el tercero ndice dos, etc.
Por ejemplo, se puede tener una matriz llamada $numeros con cinco elementos. Para asignar
un valor a cada uno de los elementos de este arreglo, habra que escribir:
$numeros[0] = 1;
$numeros[1] = 2;
$numeros[2] = 3;
$numeros[3] = 4;
$numeros[4] = 5;
Luego, si deseamos mandar a imprimir el tercer elemento de este arreglo, tendramos que escribir:
echo $numero[2];
Ahora bien, si lo que deseamos es imprimir todos los elementos de la matriz, la mejor solucin sera utilizar
una sentencia repetitiva como esta:
for($i=0; $i<count($numeros); $i++){
echo $numeros[$i] . "<br />\n";

Lenguajes Interpretados en el Servidor

Gua# 2: Estructuras de control - Sentencias condicionales y matrices


}

b) Matrices asociativas
Estas matrices tambin son conocidas como tablas hash. Se caracterizan por
utilizar una cadena de caracteres como ndice de la matriz. Lo normal es
utilizar una cadena que permita asociar fcilmente el ndice con el valor que
almacena el elemento.
Por ejemplo, se puede crear una matriz llamada $monedas con cuatro
elementos y asociar valores a cada uno de estos elementos de la siguiente
forma:
$monedas["El Salvador"] = "dlar";
$monedas["Guatemala"] = "quetzal";
$monedas["Costa Rica"] = "coln";
$monedas["Honduras"] = "lempira";
Si deseamos mandar a imprimir los valores de este arreglo, deberamos escribir:
echo $monedas["El Salvador"];
echo $monedas["Guatemala"];
echo $monedas["Costa Rica"];
echo $monedas["Honduras"];
O, haciendo uso de estructuras de control repetitivas, con la sentencia foreach:
foreach($monedas as $key => $value){
echo "Moneda de " . $key . ": " . $value . "<br />\n";
}
Tipos de matrices segn el nmero de dimensiones:
a) Matrices unidimensionales
Es una matriz que utiliza un nico ndice para hacer referencia a todos los elementos de la misma. Este ndice
puede ser escalar o asociativo.

b) Matrices multidimensionales
Es una matriz que necesita utilizar ms de un ndice para hacer referencia a un elemento especfico. De todas
las matrices multidimensionales, las ms utilizados son las de dos dimensiones. Los arreglos de tres o ms
dimensiones no se utilizan tanto debido a que son ms difciles de comprender y manejar.
El siguiente bloque de cdigo muestra la definicin de un arreglo multidimensional (con ndices asociativos) y
luego manda a imprimir en la ventana del navegador uno de sus elementos:
<?
$pais=array
(
"espana" =>array
(
"nombre"=>"Espaa",
"lengua"=>"Castellano",
"moneda"=>"Peseta"
),
"francia" =>array
(
"nombre"=>"Francia",
"lengua"=>"Francs",
"moneda"=>"Franco"
)

Lenguajes Interpretados en el Servidor

Gua# 2: Estructuras de control - Sentencias condicionales y matrices


);
echo $pais["espana"]["moneda"]; //Imprime en la ventana del navegador: "Peseta"
?>

Creacin de matrices en PHP


En PHP, las matrices o arreglos se pueden crear asignando los valores a los elementos directamente, tal y
como se ha hecho en los ejemplos anteriores, o se pueden utilizar funciones para ese propsito. Las funciones
que permiten crear arreglos en PHP son: array() y range().
La sintaxis de cada una de ellas se muestra a continuacin:
$arreglo = array($valor1, $valor2, , $valorn);
$matriz = range($valorinicial, $valorfinal, $desplazamiento);

La funcin array() se utiliza para crear una variable de tipo matriz y asignarle los valores que va a contener en
una sola instruccin. En tanto que, con range() se puede crear una matriz que comienza desde el
$valorinicial y termina con el $valorfinal.
Asignar los elementos de una matriz a variables escalares
PHP proporciona una funcin que permite asignar en una sola instruccin los elementos de una matriz a
variables escalares independientes. Esta funcin es list(), que posee como argumentos las variables escalares
en donde se almacenarn los valores almacenados en las posiciones del arreglo de forma ordenada. La
sintaxis de la funcin es la que se muestra a continuacin:
list ($variable1, $variable2, , $variablen) = $mi_array

Donde,
$mi_array, es la matriz o arreglo del que se extraern los elementos.
$variable1, $variable2, , $variablen, son las variables escalares independientes en las que
se asignarn los diferentes elementos de la matriz.
Funciones importantes para trabajar con matrices
El lenguaje PHP, brinda una cantidad considerable de funciones para facilitar el trabajo con matrices. A
continuacin se brinda informacin detallada de varias de ellas:
Funciones para recorrer una matriz
Cuando se trabaja con matrices, PHP ofrece una serie de funciones que permiten realizar de forma ms fcil y
conveniente esta tarea.
count(): Permite obtener el nmero de elementos que componen la matriz. Es muy til cuando se pretende
realizar un recorrido sobre una matriz utilizando ciclos for, while o do-while. Por ejemplo:
for($i=0; $i<count($matriz); $i++)
sizeof(): Tambin se utilize para obtener el nmero de elementos de una matriz. Por ejemplo:
for($i=0; $i<sizeof($matriz); $i++)
next(): Devuelve el valor del elemento siguiente al actual (si existe), avanzando el puntero interno una
posicin. En caso de que el elemento actual sea el ltimo de la matriz, devuelve false.
prev(): Devuelve el valor del elemento anterior al actual (si existe), retrocediendo el puntero interno una
posicin. En caso de que el elemento actual sea el primero, devuelve false.
current(): Devuelve el valor del elemento situado en la posicin actual del cursor. Si la matriz est vaca o no
hay ms elementos, la funcin devolver false.

Lenguajes Interpretados en el Servidor

Gua# 2: Estructuras de control - Sentencias condicionales y matrices


key(): Devuelve el ndice del elemento situado en la posicin actual del cursor. Si la matriz est vaca, o no
hay ms elementos, devuelve la constante NULL.
reset(): Sita el cursor interno de la matriz en el primer elemento de la misma y devuelve el valor de dicho
elemento. Si la matriz est vaca, la funcin devuelve el valor false.
end(): Avanza el cursor interno de la matriz hasta el ltimo elemento de la misma y devuelve el valor de
dicho elemento. Si la matriz est vaca devuelve false.
each(): Se usa para recorrer matrices (especialmente matrices asociativas), devolviendo simultneamente el
ndice y el valor asociado al ndice actual de un elemento. Adems, avanza el puntero interno de la matriz
hacia el siguiente elemento. Si el puntero interno apunta a la ltima posicin de la matriz, la funcin devuelve
false.
list(): Asigna una lista de variables en una sola operacin. Suele utilizarse en combinacin con la funcin
each().
OBSERVACIN: El argumento de todas las funciones anteriores es una matriz. A excepcin de la funcin
list().
Ejemplo:
$matriz = array("Primavera", "Verano", "Otoo", "Invierno");
do{
$index = key($matriz);
$value = current($matriz);
echo $index . ": " . $value . "<br>\n";
}while(next($matriz));

foreach
PHP4 y PHP5 incluyen la instruccin foreach, tal como Perl y algunos otros lenguajes. Esta instruccin
permite recorrer los elementos de una matriz de una forma sencilla. La instruccin permite obtener cada uno
de los valores almacenados en el arreglo y asignarlos automticamente en una variable para trabajar con ellos
dentro del bloque de instrucciones del foreach. Tambin es posible obtener el ndice si acaso, se ha utilizado
un matriz asociativa. Hay dos sintaxis; la segunda es una extensin menor, pero til de la primera:
foreach(expresion_array as $value) //sentencias;
foreach(expresion_array as $key => $value) //sentencias;
La primera forma recorre el array dado por expresion_array. En cada iteracin, el valor del elemento
actual se asigna a $value y el puntero interno del array se avanza en una unidad (as en la siguiente
iteracin, se estar apuntando de forma automtica el elemento siguiente).
La segunda manera hace lo mismo, salvo que la clave del elemento actual ser asignada a la variable $key en
cada iteracin.
Notas:
Cuando foreach comienza su primera ejecucin, el puntero interno a la lista (array) se reinicia
automticamente al primer elemento del array. Esto significa que no se necesita llamar a reset() antes de
un bucle foreach.
Hay que tener en cuanta que foreach trabaja con una copia de la lista (array) especificada y no la lista en si,
por ello el puntero de la lista no es modificado como en la construccin each.

Lenguajes Interpretados en el Servidor

10

Gua# 2: Estructuras de control - Sentencias condicionales y matrices


Algunos ejemplos ms para demostrar su uso:
<?php
/* foreach ejemplo 1: slo valor*/
$a = array(1, 2, 3, 17);
foreach($a as $v) {
print "Valor actual de \$a: $v.\n";
}
/* foreach ejemplo 2: valor (con clave impresa para ilustrar) */
$a = array(1, 2, 3, 17);
$i = 0; /* slo para propsitos demostrativos */
foreach($a as $v) {
print "\$a[$i] => $v.\n";
$i++;
}
/* foreach ejemplo 3:
$a = array(
"uno" => 1,
"dos" => 2,
"tres" => 3,
"diecisiete" => 17
);

clave y valor */

foreach($a as $k => $v) {


print "\$a[$k] => $v.\n";
}
/* foreach ejemplo 4: matriz multi-dimensional */
$a[0][0]
$a[0][1]
$a[1][0]
$a[1][1]

=
=
=
=

"a";
"b";
"y";
"z";

foreach($a as $v1) {
foreach ($v1 as $v2) {
print "$v2\n";
}
}
/* foreach ejemplo 5: matriz dinmica */
foreach(array(1, 2, 3, 4, 5) as $v) {
print "$v\n";
}
?>

III. MATERIALES Y EQUIPO


Para la realizacin de la gua de prctica se requerir lo siguiente:
No. Material
1
Gua de prctica #2: Estructuras de control Sentencias condicionales y matrices
2
Computadora con WampServer 2.5 instalado y funcionando correctamente
3
Editor Sublime Text 3, Eclipse PHP o DevPHP
4
Memoria USB o disco flexible

Lenguajes Interpretados en el Servidor

11

Cantidad
1
1
1
1

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

IV. PROCEDIMIENTO
Indicaciones: Asegrese de digitar el cdigo de los siguientes ejemplos que se presentan a continuacin.
Tenga en cuenta que ni Sublime Text, ni PHP Designer son compiladores; solamente son editores de cdigo
PHP, por lo tanto los errores de sintaxis los podr observar nicamente hasta que se ejecute el script al cargar
la pgina en el navegador de su preferencia.
Ejemplo 1: En este ejemplo se evaluar si un ao ingresado por un usuario a travs de un formulario resulta
ser bisiesto o no. Primero se crear el formulario html que se guardar como bisiesto.html y luego se crear el
script PHP que procesar el ao ingresado para determinar si resulta ser bisiesto o no.
Archivo 1: bisiesto.php
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ao bisiesto</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet" href="css/formstyle.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/bisiesto.css" />
<script type="text/javascript" src="js/validatedata.js"></script>
</head>
<body>
<img id="background" class="source-image" src="bg/butterflybg1280x800.jpg" alt="" />
<div class="wrapper">
<?php
if(!isset($_POST['enviar'])):
?>
<form action="<?= $_SERVER['PHP_SELF']; ?>" method="POST" name="frmdatos">
<h2 class="contact">Aos bisiestos</h2>
<span class="contact">
<label for="txtdato">Probar ao:</label>&nbsp;&nbsp;
</span>
<input type="text" name="year" id="year" value="" maxlength="20" placeholder="(Ingrese
el dato)" /><br />
<span id="numbersOnly">Ingrese nmeros enteros</span>
<input type="submit" name="enviar" id="enviar" value="Probar" />
</form>
<?php
else:
//Script que determina si un ao es bisiesto o no
$year = isset($_POST['year']) ? $_POST['year'] : 0;
if(($year%4 == 0 && $year%100 != 0) || $year%400 == 0):
echo "<p class=\"bisiesto\">";
echo "<span style=\"color:Green;font:bold 10pt 'Lucida Sans';\">El ao $year
es bisiesto</span><br />\n";
echo
"<span
style=\"color:Green;font:bold
10pt
'Lucida
Sans';\"><a
href=\"{$_SERVER['PHP_SELF']}\">Probar otro ao</a>";
echo "</p>";
else:
echo "<p class=\"bisiesto\">";
echo "<span style=\"color:FireBrick;font:bold 10pt 'Lucida Sans';\">El ao
$year no es bisiesto</span><br />\n";
echo
"<span
style=\"color:Green;font:bold
10pt
'Lucida
Sans';\"><a
href=\"{$_SERVER['PHP_SELF']}\">Probar otro ao</a>";
echo "</p>";
endif;
endif;

Lenguajes Interpretados en el Servidor

12

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

?>
</div>
</body>
</html>

Archivo 2: bisiesto.css
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%
}
body
margin-left:50px;
margin-right:50px;
overflow:hidden;
}

#background.source-image
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:-100;
}

p.bisiesto
background:#F8F16D;
}

#numbersOnly {
background: rgba(239,197,202,1);
background: -moz-linear-gradient(top, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%,
rgba(222,60,79,1) 51%, rgba(241,142,153,1) 100%);
background:
-webkit-gradient(left
top,
left
bottom,
color-stop(0%,
rgba(239,197,202,1)),
color-stop(50%,
rgba(210,75,90,1)),
color-stop(51%,
rgba(222,60,79,1)), color-stop(100%, rgba(241,142,153,1)));
background: -webkit-linear-gradient(top, rgba(239,197,202,1) 0%, rgba(210,75,90,1)
50%, rgba(222,60,79,1) 51%, rgba(241,142,153,1) 100%);
background: -o-linear-gradient(top, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%,
rgba(222,60,79,1) 51%, rgba(241,142,153,1) 100%);
background: -ms-linear-gradient(top, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%,
rgba(222,60,79,1) 51%, rgba(241,142,153,1) 100%);
color: #fff;
font: bold 1em 'BebasNeueRegular',Arial,Helvetica,'Liberation Sans';
padding: 4px 5px;
visibility:hidden;
}

Archivo 3: formstyle.css
* {
outline: none;
}
body, div, h1, form, fieldset, input, textarea {
margin: 0;
padding: 0;

Lenguajes Interpretados en el Servidor

13

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

border: 0;
outline: none;
}
html {
height: 100%;
}
html, body {
height: 100%;
}
body {
background: #A4EB90;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #A4EB90),
color-stop(1, #55963F)
);
background-image: -o-linear-gradient(bottom, #A4EB90 0%, #55963F 100%);
background-image: -moz-linear-gradient(bottom, #A4EB90 0%, #55963F 100%);
background-image: -webkit-linear-gradient(bottom, #A4EB90 0%, #55963F 100%);
background-image: -ms-linear-gradient(bottom, #A4EB90 0%, #55963F 100%);
background-image: linear-gradient(to bottom, #A4EB90 0%, #55963F 100%);
font-family: sans-serif;
}
.wrapper{
background:#CCC;
width:800px;
margin: 16px auto;
padding: 10px 30px;
}
h2.contact {
background: url(../img/validatedata.png) no-repeat -16px -50px;
color: #ff5400;
font-family: 'YanoneKaffeesatzRegular';
font-size: 66px;
height: 105px;
padding-left: 150px;
}
span.contact {
color: #4b4b4b;
font-family: 'BebasNeueRegular', Arial;
font-size: 24px;
line-height: 68px;
margin-bottom: 15px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
input[type="text"] {
width: 236px;
}
textarea {
width: 600px;
height: 275px;
}

Lenguajes Interpretados en el Servidor

14

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

label {
color: #ff5400;
}
input,
textarea,
select {
background-color: rgba(255, 255, 255, 0.4);
border: 5px solid rgba(122, 192, 0, 0.15);
padding: 10px;
font-family: 'YanoneKaffeesatzRegular', Arial;
color: #4b4b4b;
font-size: 24px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
margin-bottom: 15px;
margin-top: -10px;
}
input:focus,
textarea:focus,
select:focus {
background-color: rgba(255,255,255,1);
border: 5px solid #ff5400;
}
input[type="submit"] {
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #619702),
color-stop(0.62, #7ac000)
);
background: -moz-linear-gradient(
center bottom,
#619702 23%,
#7ac000 62%
);
border: none; cursor: pointer; color: #fff;
font-size: 24px;
background-color: #7ac000;
padding: 5px 36px 8px 36px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.6);
}
input[type="submit"]:hover {
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #c34000),
color-stop(0.62, #ff5400)
);
background: -moz-linear-gradient(

Lenguajes Interpretados en el Servidor

15

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

center bottom,
#c34000 23%,
#ff5400 62%
);
color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #ff5400;
}
input[type="submit"]:active {
top: 1px;
}

Archivo 4: fonts.css
@font-face {
font-family: 'YanoneKaffeesatzRegular';
src: url('../fonts/YanoneKaffeesatz-Regular-webfont.eot');
src:
url('fonts/YanoneKaffeesatz-Regular-webfont.eot?#iefix')
format('embeddedopentype'),
url('../fonts/YanoneKaffeesatz-Regular-webfont.woff') format('woff'),
url('../fonts/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'),
url('../fonts/YanoneKaffeesatz-Regular-webfont.svg#YanoneKaffeesatzRegular')
format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/BebasNeue-webfont.eot');
src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/BebasNeue-webfont.woff') format('woff'),
url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Archivo 5: validatedata.js
(function(){
//Agregar al manejador de evento load la funcin init())
if (window.addEventListener) window.addEventListener("load", init, false);
else if (window.attachEvent) window.attachEvent("onload", init);
// Buscar en el documento todos los elementos INPUT de tipo texto, ya que
// solamente en ellos se va a registrar un controlador de evento.
function init(){
var number = document.getElementById("year");
var resparea = document.getElementById("fact");
// Hacer un recorrido por todos los campos del formulario
if (number.addEventListener){
number.addEventListener("keypress", filter, false);
}
else {
// No utilizamos attachEvent porque no llama a la funcin de controlador
// con el valor correcto de la palabra clave this. En su lugar se invova
// con el manejador de evento onkeypress
number.onkeypress = filter;
}
}
// Este es el controlador keypress que filtra la entrada del usuario
function filter(event) {

Lenguajes Interpretados en el Servidor

16

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

// Obtener el objeto event y el cdigo de carcter de la tecla pulsada


// de forma compatible con todos los navegadores
var e = event || window.event;
// Objeto de evento de la tecla
var code = e.charCode || e.keyCode;
// tecla que se ha pulsado
//
if
if
if

Si se ha pulsado una tecla de funcin de cualquier tipo, no filtrarla


(e.charCode == 0) return true;
// Tecla de funcin (solo para Firefox)
(e.ctrlKey || e.altKey) return true; // Se mantienen presionadas Ctrl o Alt
(code < 32) return true;
// Carcter de Ctrl en tabla ASCII

// Dejar pasar teclas de retroceso (BackSpace), tabulacin (Tab), entrada (Enter)


y
// escape (Scape)
if (code==0 || code==8 || code==9 || code==13 || code==27) return true;
// Buscar la informacin de los caracteres vlidos para este campo de entrada
var allowed = "0123456789";
// Caracteres vlidos
var messageElement = document.getElementById("numbersOnly");
// Mensaja
ocultar/mostrar

// Convertir el cdigo de carcter a su carcter correspondiente


var c = String.fromCharCode(code);
// Comprobar si el carcter est dentro del conjunto de caracteres permitidos
if (allowed.indexOf(c) != -1) {
// Si c es un carcter legal, ocultar el mensaje, si es que existe.
if (messageElement) messageElement.style.visibility = "hidden";
return true; // Aceptar el carcter
}
else {
// Si c no est en el conjunto de caracteres permitidos, mostrar el mensaje
if (messageElement) messageElement.style.visibility = "visible";
// Y rechazar este evento keypress
if (e.preventDefault) e.preventDefault();
if (e.returnValue) e.returnValue = false;
return false;
}
}
})();

Ejemplo 2: Se desea calcular el salario o sueldo neto de algn empleado mediante el uso de un formulario de
ingreso de la informacin necesaria para realizar el clculo. El formulario debe solicitar el nombre del
empleado, su sueldo base y, si realiza horas extras, debe ingresarse el nmero de horas extras trabajadas y el
salario por hora extra a pagar. Al enviar los datos del formulario debe mostrarse de forma ordenada toda la
informacin en una boleta de pago, mostrando como dato final el sueldo neto o lquido a pagar, tomando en
cuenta las horas extras. En este formulario de ingreso se ha utilizado validacin en el cliente de la entrada de
datos en los campos de texto del formulario, haciendo uso de JavaScript no intrusivo (investigar sobre este
tema, si no est claro).
Archivo 1: salario.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Preferencia de restaurantes</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link type="text/css" rel="stylesheet" href="css/salario.css" media="screen" />
<script src="js/disabledtextfields.js"></script>
<script src="js/inputFilter.js"></script>

Lenguajes Interpretados en el Servidor

17

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

<script src="js/modernizr.custom.lis.js"></script>
</head>
<body>
<img id="background" class="source-image" src="bg/bgviolet.jpg" alt="" />
<header>
<h1>Salario empleado</h1>
</header>
<section>
<article>
<div id="empleado">
<form action="salario.php" method="POST" name="salario" id="salario">
<fieldset>
<legend>
<span>Clculo de salario</span>
</legend>
<ol>
<li>
<label>Nombre empleado:</label>
<input type="text" name="empleado" id="txtempleado" size="20" maxlength="50"
allowed="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
messageid="alfabeticchars" />
<span id="alfabeticchars">Solo acepta caracteres alfabticos</span>
</li>
<li>
<label>Sueldo base:</label>
<input type="text" name="sueldobase" id="sueldobase" size="12" maxlength="12"
allowed="0123456789." messageid="numbersonly" />
<span id="numbersonly">Solo acepta nmeros y punto decimal</span>
</li>
<li>
<label>Horas extras:</label>
<fieldset>
<ol>
<li>
<input type="checkbox" name="hextra" id="hextrasi" value="no" />
</li>
</ol>
</fieldset>
</li>
<li>
<label for="numhorasex">Nmero de horas:</label>
<input type="text" name="numhorasex" id="numhorasex" size="4" maxlength="2"
disabled="disabled" allowed="0123456789" messageid="integersonly" />
<span id="integersonly">Solo acepta nmeros enteros</span>
</li>
<li>
<label for="pagohextra">Pago hora extra:</label>
<input type="text" name="pagohextra" id="pagohextra" size="12" maxlength="6"
disabled="disabled" allowed="0123456789." messageid="othernumbersonly" />
<span id="othernumbersonly">Solo acepta nmeros y punto decimal</span>
</li>
<li>
<input type="submit" name="enviar" id="enviar" value="Enviar" class="button"
/>
<input type="reset" name="reset" id="reset" value="Restablecer" class="button"
/>
</li>
</ol>
</fieldset>
</form>
</div>
</article>
</section>

Lenguajes Interpretados en el Servidor

18

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

</body>
</html>

Archivo 2: salario.css
/* Archivo: salario.css */
* {
margin: 0;
padding: 0;
outline: none;
}
html, body {
height: 100%;
}
body
{
overflow:hidden;
}
h1

{
font:Bold 1.8em Arial,Helvetica,sans-serif;
text-align:center;
-moz-text-shadow: 4px 4px 3px rgba(150, 150, 150, 0.8);
-webkit-text-shadow: 4px 4px 3px rgba(150, 150, 150, 0.8);
-o-text-shadow: 4px 4px 3px rgba(150, 150, 150, 0.8);
-ms-text-shadow: 4px 4px 3px rgba(150, 150, 150, 0.8);
text-shadow: 4px 4px 3px rgba(150, 150, 150, 0.8);

}
#numbersonly,
#othernumbersonly,
#integersonly,
#alfabeticchars
{
font:Bold 0.8em Arial,Helvetica,sans-serif;
color:Gold;
background: -moz-linear-gradient(45deg, rgb(209,50,53) 30%, rgb(253,46,53) 81%);
background: -webkit-linear-gradient(45deg, rgb(209,50,53) 30%, rgb(253,46,53) 81%);
background: -o-linear-gradient(45deg, rgb(209,50,53) 30%, rgb(253,46,53) 81%);
background: -ms-linear-gradient(45deg, rgb(209,50,53) 30%, rgb(253,46,53) 81%);
background: linear-gradient(135deg, rgb(209,50,53) 30%, rgb(253,46,53) 81%);
background: rgb(209,50,53);
padding: 4px 3px;
visibility:hidden;
display:block;
}
#background.source-image
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index:-100;
}

#empleado
{
width:36%;
min-width:350px;
min-height:600px;
margin:0 auto;
}
/* Estilos para el formulario de ingreso de datos */

Lenguajes Interpretados en el Servidor

19

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

fieldset
{
background-color:#BFF9C3;
border-style:none;
border-top:1px solid #BFBAB0;
float:left;
clear:both;
margin:0 0 -1em 0;
padding:0 0 1em 0;
position:relative;
width:100%;
}
legend
{
color:#545351;
margin-left:1em;
padding:0;
font-weight:bold;
}
legend span {
font-size: 2em;
font-family:"Myriad Pro",Paladino,serif;
left:0.74em;
top:0;
margin-top: 0.3em;
position: absolute;
}
fieldset ol
{
list-style:none;
padding:3.5em 1em 0 1em;
}
fieldset li
{
clear:left;
float:left;
padding-bottom:1em;
width:100%;
}
fieldset .button
{
background-color:Indigo;
border:0 none #FFF;
color:Lavender;
float:none;
font:bold 0.8em Verdana,Helvetica,sans-serif;
height:30px;
margin-left:4em;
width:auto;
}
fieldset label
{
color:Indigo;
float:left;
font:Normal 0.8em Verdana,Helvetica,sans-serif;
margin-right:1em;
text-align:right;
width:12em;
}
fieldset fieldset {
background-color:transparent;
background-image:none;
border-style:none;
margin-bottom:-2.5em;
}
fieldset fieldset legend {
font-weight:normal;
margin-left:0;
}

Lenguajes Interpretados en el Servidor

20

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

fieldset fieldset ol {
margin:0 0 0 10em;
padding:0;
position:relative;
top:-1em;
}
fieldset fieldset label
float:none;
margin-right:auto;
width:auto;
}

/* Estilos para la boleta de pago */


div
{
margin:0 auto;
width:26%;
}
div h1
{
color:Green;
font:bold 1.4em Arial,Helvetica,sans-serif;
}
div .number
{
color:Indigo;
font-weight:bold;
text-align:right;
}
div table
{
width:100%;
}
div table th
{
background-color:#30E690;
font:bold 0.8em Arial,Helvetica,sans-serif;
}
div table td
{
background-color:#EDFA90;
font:bold 0.8em Arial,Helvetica,sans-serif;
}
/* Estilos para la creacin de un enlace de retorno al formulario */
#back
{
margin:0 auto;
width:26%;
}
#back p
{
background-color:ForestGreen;
color:White;
font:normal 0.9em "Lucida Sans",Arial,Helvetica,sans-serif;
text-align:center;
}
#back p a:link
{
color:Yellow;
text-decoration:none;
}
#back p a:visited {
color:Azure;
text-decoration:none;
}
#back p a:hover

Lenguajes Interpretados en el Servidor

21

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

color:Orange;
text-decoration:none;
}

Archivo 3: salario.php
<!DOCTYPE html>
<html lang="es">
<head>
<title>Calcular Salario</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/salario.css" media="screen" />
<script src="js/modernizr.custom.lis.js"></script>
</head>
<body>
<img id="background" class="source-image" src="bg/bgviolet.jpg" alt="" />
<header>
<h1>Detalle del salario</h1>
</header>
<section>
<article>
<?php
if(isset($_POST['enviar'])){
$empleado = isset($_POST['empleado']) ? $_POST['empleado'] : "";
$sueldobase = isset($_POST['sueldobase']) ? $_POST['sueldobase'] : "";
if(isset($_POST['hextra'])){
$horasextras = isset($_POST['numhorasex']) ? $_POST['numhorasex'] : "0";
$pagohextra = isset($_POST['pagohextra']) ? $_POST['pagohextra'] : "0";
$sueldohextras = $horasextras * $pagohextra;
}
else{
$horasextras = 0;
$sueldohextras = 0;
}
$sueldoneto = $sueldobase + $sueldohextras;
echo "<div><h1>Boleta de pago</h1><br>\n";
echo "<table>\n";
echo "<tr>\n<th colspan=\"2\">\nDetalle del pago\n</th>\n</tr>\n";
echo
"<tr>\n<td>\nEl
empleado
es:
\n</td>\n<td
class=\"number\">\n",$empleado,"\n</td>\n</tr>\n";
echo "<tr>\n<td>\nEl sueldo base es: \n</td>\n<td class=\"number\">\n\$ ",
$sueldobase, "\n</td>\n</tr>\n";
echo
"<tr>\n<td>\nLas
horas
extras
son:
\n</td>\n<td
class=\"number\">\n",$horasextras,"\n</td>\n</tr>\n";
echo "<tr>\n<td>\nEl pago por hora extra es: \n</td>\n<td class=\"number\">\n\$ ",
$sueldohextras, "\n</td>\n</tr>\n";
echo "<tr>\n<th>\nEl sueldo neto devengado es: \n</th>\n<th class=\"number\">\n\$
", $sueldoneto, "\n</th>\n</tr>\n";
echo "</table>\n</div>\n";
}
?>
<div id="back">
<p>
<a href="salario.html">Ingresar otro empleado</a>
</p>
</div>
</article>
</section>
</body>
</html>

Archivo 4: disabledtextfields.js
function disableTextBox(){

Lenguajes Interpretados en el Servidor

22

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

document.salario.hextra.onclick = function(){
document.salario.numhorasex.disabled = !document.salario.numhorasex.disabled;
document.salario.pagohextra.disabled = !document.salario.pagohextra.disabled;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
if(oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(disableTextBox);

Archivo 5: inputFilter.js
/***********************************************************************************
* InputFilter.js: Filtrado no intrusivo de pulsaciones de teclas para
*
*
elementos INPUT del formulario.
*
*
*
* Este mdulo hace una bsqueda por todo el documento de los campos
*
* <input type="text" /> de un formulario contenido en un documento web
*
* que contiene atributos no estndar denominados "allowed".
*
* Registra un controlador de evento onkeypress para que cualquiera de
*
* dichos elementos restrinja la entrada del usuario de forma que slo
*
* se puedan introducir los caracteres que aparezcan en el valor de ese atributo. *
* Si el elemento INPUT tambin tiene un atributo denominado "messageid",
*
* el valor de dicho atributo se lleva al id de otro elemento del documento.
*
* Si el usuario digita un carcter que no se permite, el elemento messageid
*
* se hace visible. Si el usuario digita un carcter permitido, el elemento
*
* messageid se oculta.
*
* Este elemento id de mensaje se ha diseado para indicar al usuario el por qu
*
* se ha rechazado una determinada pulsacin de tecla.
*
*
*
* Ac se muestra un ejemplo de cdigo HTML para utilizar este mdulo js.
*
*
Aceptar slo nmeros:
*
*
<input id="integer" type="text" allowed="0123456789" messageid="numbersonly"> *
*
<span id="numbersonly" style="visibility:hidden">Slo nmeros enteros</span> *
*
*
* En los navegadores como Internet Explorer, que no admiten addEventListener(),
*
* el controlador keypress registrado por este mdulo .js sobrescribe cualquier
*
* controlador keypress definido en el HTML.
*
**********************************************************************************/
(function() { // Todo el mdulo se encuentra dentro de una funcin annima
// Cuando el documento se haya cargado totalmente se llama a la funcin
init()
if (window.addEventListener) window.addEventListener("load", init, false);
else if (window.attachEvent) window.attachEvent("onload", init);
// Buscar en el documento todos los elementos INPUT de tipo texto, ya que
// solamente en ellos se va a registrar un controlador de evento.
function init() {
var inputtags = document.getElementsByTagName("input");
// Hacer un recorrido por todos los campos del formulario

Lenguajes Interpretados en el Servidor

23

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

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


var tag = inputtags[i];
// Solo se desean controlar los campos de texto, los dems tipos de campos
// se pasan por alto
if (tag.type != "text") continue;
var allowed = tag.getAttribute("allowed");
// Solo se afectarn los campos con el atributo no estndar aadido allowed
if (!allowed) continue;
//
//
//
if

Al llegar ac es porque estamos con un campo de texto con el atributo


allowed, si es as registrar en esta etiqueta nuestra funcin de control
de evento
(tag.addEventListener)
tag.addEventListener("keypress", filter, false);
else {
// No utilizamos attachEvent porque no llama a la funcin de controlador
// con el valor correcto de la palabra clave this. En su lugar se invova
// con el manejador de evento onkeypress
tag.onkeypress = filter;
}
}
}
// Este es el controlador keypress que filtra la entrada del usuario
function filter(event) {
// Obtener el objeto event y el cdigo de carcter de la tecla pulsada
// de forma compatible con todos los navegadores
var e = event || window.event;
// Objeto de evento de la tecla
var code = e.charCode || e.keyCode;
// tecla que se ha pulsado
//
if
if
if

Si se ha pulsado una tecla de funcin de cualquier tipo, no filtrarla


(e.charCode == 0) return true;
// Tecla de funcin (solo para Firefox)
(e.ctrlKey || e.altKey) return true; // Se mantienen presionadas Ctrl o Alt
(code < 32) return true;
// Carcter de Ctrl en tabla ASCII

// Dejar pasar teclas de retroceso (BackSpace), tabulacin (Tab), entrada (Enter),


// escape (Scape) y espacios en blanco (SpaceBar)
if (code==0 || code==8 || code==9 || code==13 || code==27 || code==32) return
true;
// Buscar la informacin de los caracteres vlidos para este campo de entrada
var allowed = this.getAttribute("allowed");
// Caracteres vlidos
var messageElement = null;
// Mensaja a ocultar/mostrar
var messageid = this.getAttribute("messageid"); // id del mensaje, si existe
if (messageid) // Si existe un id del mensaje, obtener el elemento
messageElement = document.getElementById(messageid);
// Convertir el cdigo de carcter a su carcter correspondiente
var c = String.fromCharCode(code);
// Comprobar si el carcter est dentro del conjunto de caracteres permitidos
if (allowed.indexOf(c) != -1) {
// Si c es un carcter legal, ocultar el mensaje, si es que existe.
if (messageElement) messageElement.style.visibility = "hidden";
return true; // Aceptar el carcter
}
else {
// Si c no est en el conjunto de caracteres permitidos, mostrar el mensaje
if (messageElement) messageElement.style.visibility = "visible";
// Y rechazar este evento keypress
if (e.preventDefault) e.preventDefault();
if (e.returnValue) e.returnValue = false;
return false;

Lenguajes Interpretados en el Servidor

24

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

}
}
})(); // Finalizar la funcin annima esperando ser invocada.

Ejemplo 3: En el siguiente ejemplo se ilustra cmo detectar el idioma en el cliente (navegador del usuario).
Para probar el ejemplo, ser necesario que cambie el idioma predeterminado del navegador, agregando un
nuevo idioma si es necesario y subindolo hasta el primer nivel para que este nuevo idioma sea el
predefinido. Pregunte al docente cmo hacer esto si acaso no lo sabe ud.
Archivo 1: idioma.php
<!DOCTYPE html>
<html lang="es">
<head>
<title>Detector de Lenguaje del Navegador</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" media="screen" href="css/idioma.css" />
<script type="text/javascript" src="js/modernizr.custom.lis.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h1>Idioma del navegador</h1>
</header>
<section>
<?php
//Antes de nada introducimos mensajes en forma de variables
$espanol = "Hola";
$ingles = "Hello";
$aleman = "Hallo";
$frances = "Bonjour";
$italiano = "Ciao";
$portugues = "Ol";
//Ahora leemos del navegador cul es su lengua oficial
$completo = $_SERVER["HTTP_ACCEPT_LANGUAGE"];
$idioma = substr($_SERVER["HTTP_ACCEPT_LANGUAGE"],0,2);
//$idioma=substr($HTTP_ACCEPT_LANGUAGE,0,2);
//Formulamos las posibilidades que se pueden dar
echo "<p>" . $completo . "<br>";
echo $idioma ."</p>\n";
if($idioma == "es"){
echo '<p class="msgOff" onmouseover="this.className=\'msgOn\'"
onmouseout="this.className=\'msgOff\'">';
printf ("El lenguaje que se est&aacute; utilizando en el navegador es el
Espa&ntilde;ol: %s </p>\n", $espanol);
}
elseif($idioma == "fr"){
echo '<p class="msgOff" onmouseover="this.className=\'msgOn\'"
onmouseout="this.className=\'msgOff\'">';
printf ("El lenguaje que se est&aacute; utilizando en el navegador es el
Franc&eacute;s: %s </p>\n", $frances);
}
elseif($idioma == "en"){
echo '<p class="msgOff" onmouseover="this.className=\'msgOn\'"
onmouseout="this.className=\'msgOff\'">';
printf ("El lenguaje que se est&aacute; utilizando en el navegador es el
Ingl&eacute;s: %s </p>\n", $ingles);
}
elseif($idioma == "de"){
echo '<p class="msgOff" onmouseover="this.className=\'msgOn\'"
onmouseout="this.className=\'msgOff\'">';
printf ("El lenguaje que se est&aacute; utilizando en el navegador es el

Lenguajes Interpretados en el Servidor

25

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

Alem&aacute;n: %s <br>", $aleman);


}
elseif($idioma == "it"){
echo '<p class="msgOff" onmouseover="this.className=\'msgOn\'"
onmouseout="this.className=\'msgOff\'">';
printf ("El lenguaje que se est&aacute; utilizando en el navegador es el
Ingl&eacute;s: %s </p>\n", $italiano);
}
elseif($idioma == "pt"){
echo '<p class="msgOff" onmouseover="this.className=\'msgOn\'"
onmouseout="this.className=\'msgOff\'">';
printf ("El lenguaje que se est&aacute; utilizando en el navegador es el
Alem&aacute;n: %s <br>", $portugues);
}
else{
echo '<p class="msgOff" onmouseover="this.className=\'msgOn\'"
onmouseout="this.className=\'msgOff\'">';
echo "El idioma del navegador es desconocido.<br></p>\n";
}
?>
</section>
</div>
</body>
</html>

Archivo 2: idioma.css
#wrapper
width:90%;
margin:0 auto;
}
h1

{
font:Bold 1.8em Arial,Helvetica,sans-serif;
text-align:center;

}
p

{
width:60%;
font:bold 14pt "Palatino Linotype","Book Antiqua",serif;
color:Purple;

}
.msgOff
{
color:Purple;
background-color:Orange;
border:5px outset Purple;
}
.msgOn
{
color:Orange;
background-color:Purple;
border:5px outset Orange;
}

Ejemplo 4: El siguiente script PHP muestra cmo utilizar la funcin date() para manipular la fecha y hora
del sistema. Debe notar que se est estableciendo a nivel de cdigo la zona horaria adecuada para la
ubicacin del pas. Se hace uso de la instruccin switch para asignar los valores del da, el mes y la hora del
sistema.
Archivo 1: fechahora.php
<!DOCTYPE html>

Lenguajes Interpretados en el Servidor

26

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

<html lang="es">
<head>
<title>Fecha y hora del Sistema</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="css/fechahora.css" />
<script type="text/javascript" src="js/modernizr.custom.lis.js"></script>
</head>
<body>
<?php
//Establecer la zona horaria para el servidor web, de modo que concuerde
//con la hora del pas donde se est ejecutando el script.
date_default_timezone_set("America/El_Salvador");
$dia=date("w");
switch($dia){
case 0: $dia="Domingo";break;
case 1: $dia="Lunes";break;
case 2: $dia="Martes";break;
case 3: $dia="Mircoles";break;
case 4: $dia="Jueves";break;
case 5: $dia="Viernes";break;
case 6: $dia="Sbado";break;
}
$mes=date("n");
switch($mes){
case 1: $mes="Enero";break;
case 2: $mes="Febrero";break;
case 3: $mes="Marzo";break;
case 4: $mes="Abril";break;
case 5: $mes="Mayo";break;
case 6: $mes="Junio";break;
case 7: $mes="Julio";break;
case 8: $mes="Agosto";break;
case 9: $mes="Septiembre";break;
case 10: $mes="Octubre";break;
case 11: $mes="Noviembre";break;
case 12: $mes="Diciembre";break;
}
$numero=date("j");
$anio=date("Y");
$hora = date("g:i a");
printf("<header>\n");
printf("\t<p class=\"fecha\">\n");
printf("Hoy es %s, %d de %s del %d \n</p>\n", $dia, $numero, $mes, $anio);
printf("</header>\n");
printf("<section>\n\t<article>\n");
printf("\t\t<p class=\"hora\">\n");
printf("\t\t\tSon las: %s \n\t\t</p>\n", $hora);
printf("\t</article>\n</section>\n");
?>
</body>
</html>

Archivo 2: fechahora.css
*

{
margin:0;
padding:0;

}
p.fecha
{
background-color:rgb(255,190,200);
border:5px Outset rgb(10,80,10);
color:rgb(130,60,20);

Lenguajes Interpretados en el Servidor

27

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

font-family:Georgia;
font-size:2em;
font-weight:bold;
margin:auto;
margin-top:12px;
text-align:center;
width:50%;
}
p.hora
{
color:#0F6030;
background-color:#FCFD90;
border:5px Ridge #0C6020;
font-family:Georgia;
font-size:1.5em;
font-weight:bold;
margin:auto;
margin-top:20px;
text-align:center;
width:35%;
}

Ejemplo 5: El siguiente ejemplo permite realizar una encuesta a los visitantes del sitio averiguando de qu
forma se han enterado del sitio. El sitio nicamente reporta el medio que el usuario ha seleccionado, no
realiza conteos. Esto ser posible hasta que veamos archivos o bases de datos.
Archivo1: encuesta.php
<!DOCTYPE html>
<html lang="es">
<head>
<title>Encuesta</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/encuesta.css" />
<script src="js/changeformats.js"></script>
<script src="js/modernizr.custom.lis.js"></script>
</head>
<body>
<header>
<h1 class="Off">
Favor responder la pregunta
</h1>
</header>
<section>
<article>
<?php
if(isset($_POST['enviar'])):
$contact = $_POST['contacto'];
switch($contact):
case 'client':
echo "<p>Cliente que visita constantemente el sitio.</p>";
break;
case 'television':
echo "<p>Cliente referido por anuncio televisivo.</p>";
break;
case 'phonebook':
echo "<p>Cliente referido mediante gua telefnica.</p>";
break;
case 'friend':
echo "<p>Cliente referido por amigos.</p>";
break;
//No parece necesario porque el ingreso es por medio de un campo select
default:

Lenguajes Interpretados en el Servidor

28

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

echo "<p>No se puede especificar cmo contact el cliente con nuestro


sitio web.</p>";
endswitch;
echo "<a href=\"". $_SERVER['PHP_SELF'] ."\">Volver al formulario</a>";
else:
?>
<form action="<? echo $_SERVER['PHP_SELF'] ?>" method="POST">
<table>
<tr>
<td>
<label for="opcion">Cmo contact el sitio: </label>
</td>
<td>
<select name="contacto" id="contacto">
<option value="client">Soy cliente frecuente</option>
<option value="television">Publicidad por televisin</option>
<option value="phonebook">Directorio telefnico</option>
<option value="friend">Por unos amigos</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="enviar" id="enviar" value="Enviar" />
</td>
</tr>
</table>
</form>
<?php
endif;
?>
</article>
</section>
</body>
</html>

Archivo 2: encuesta.css
* {
border: 0;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font-size: 16px;
background: rgb(110,133,255);
background: -moz-linear-gradient(30deg, rgb(110,133,255) 30%, rgb(237,241,163) 60%);
background: -webkit-linear-gradient(30deg, rgb(110,133,255) 30%, rgb(237,241,163)
60%);
background: -o-linear-gradient(30deg, rgb(110,133,255) 30%, rgb(237,241,163) 60%);
background: -ms-linear-gradient(30deg, rgb(110,133,255) 30%, rgb(237,241,163) 60%);
background: linear-gradient(120deg, rgb(110,133,255) 30%, rgb(237,241,163) 60%);
}
header h1 {
margin-top: 16px;
margin-bottom: 24px;
}

Lenguajes Interpretados en el Servidor

29

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

article p
{
color:Navy;
font:bold 1.2em "Calisto MT",Garamond,serif;
}
label
{
color:Navy;
font:bold 0.8em "Myriad Pro",Frutiger,"Lucida Sans",sans-serif;
}
.On

{
background-color:Yellow;
border:6px outset Navy;
color:Navy;
font:bold 2em "Arial Black",Helvetica,sans-serif;

}
.Off
{
background-color:Navy;
border:6px outset Yellow;
color:Yellow;
font:bold 2em "Arial Black",Helvetica,sans-serif;
}
#contacto
{
background-color:Yellow;
color:Navy;
font:bold 9pt Frutiger,"Lucida Sans",sans-serif;
}
#enviar
{
background-color:#33339C;
color:#FEFE20;
font:normal 0.8em Frutiger,sans-serif;
margin-top: 12px;
margin-bottom: 12px;
padding: 8px 0;
width:40%;
}
#enviar:hover
{
background-color:Navy;
color:Yellow;
font-weight:600;
}

Archivo 3: changeformats.js
function findHeaders(){
var headers, i;
headers = document.getElementsByTagName('h1');
for(i=0; i<headers.length; i++){
if(headers[i].className){
headers[i].onmouseover = function(){roll(this);}
headers[i].onmouseout = function(){roll(this);}
}
}
}
function roll(h){
if(h.className == 'On'){
h.className = 'Off';

Lenguajes Interpretados en el Servidor

30

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

}
else{
h.className = 'On';
}
}
window.onload = function(){
findHeaders();
}

Ejemplo 6: El siguiente ejemplo ilustra cmo utilizar el operador condicional para encontrar el mayor de
tres nmeros ingresados a travs de un formulario. Los campos de texto donde se ingresan los nmeros son
validados con JavaScript para que slo acepten valores enteros (de 0 a 9), mostrando un mensaje en caso de
querer introducir cualquier otro carcter que no sea numrico.
Archivo 1: compararnumeros.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Contador de palabras</title>
<meta charset="utf-8" />
<link href="http://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link rel="stylesheet" href="css/font.css" />
<link rel="stylesheet" href="css/formstyle.css" />
<script type="text/javascript" src="js/validar.js"></script>
<!-- Para las versiones anteriores del IE9 -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Contador de palabras</h1>
</header>
<section>
<article id="formarea">
<form name="frmpalabras" method="POST" action="compararnum.php">
<fieldset>
<label for="number1">Primer nmero:</label>
<input type="text" name="numero1" id="number1" placeholder="Primer nmero" /><br
/>
<span id="numbersOnly1">Ingrese nmeros enteros</span>
<label for="number2">Segundo nmero:</label>
<input type="text" name="numero2" id="number2" placeholder="Segundo nmero" /><br
/>
<span id="numbersOnly2">Ingrese nmeros enteros</span>
<label for="number3">Tercer nmero:</label>
<input type="text" name="numero3" id="number3" placeholder="Tercer nmero" /><br
/>
<span id="numbersOnly3">Ingrese nmeros enteros</span>
<input type="submit" name="conteo" id="count" value="Enviar" />
</fieldset>
</form>
</article>
</section>
</body>
</html>

Archivo 2: validar.js
(function(){

Lenguajes Interpretados en el Servidor

31

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

//Agregar al manejador de evento load la funcin init())


if (window.addEventListener) window.addEventListener("load", init, false);
else if (window.attachEvent) window.attachEvent("onload", init);
// Buscar en el documento todos los elementos INPUT de tipo texto, ya que
// solamente en ellos se va a registrar un controlador de evento.
function init(){
var number1 = document.getElementById("number1");
var number2 = document.getElementById("number2");
var number3 = document.getElementById("number3");
var resparea = document.getElementById("fact");
// Hacer un recorrido por todos los campos del formulario
if (number1.addEventListener){
number1.addEventListener("keypress", filter, false);
}
else {
// No utilizamos attachEvent porque no llama a la funcin de controlador
// con el valor correcto de la palabra clave this. En su lugar se invova
// con el manejador de evento onkeypress
number1.onkeypress = filter;
}
if (number2.addEventListener){
number2.addEventListener("keypress", filter, false);
}
else {
// No utilizamos attachEvent porque no llama a la funcin de controlador
// con el valor correcto de la palabra clave this. En su lugar se invova
// con el manejador de evento onkeypress
number2.onkeypress = filter;
}
if (number3.addEventListener){
number3.addEventListener("keypress", filter, false);
}
else {
// No utilizamos attachEvent porque no llama a la funcin de controlador
// con el valor correcto de la palabra clave this. En su lugar se invova
// con el manejador de evento onkeypress
number3.onkeypress = filter;
}
}
// Este es el controlador keypress que filtra la entrada del usuario
function filter(event) {
// Obtener el objeto event y el cdigo de carcter de la tecla pulsada
// de forma compatible con todos los navegadores
var e = event || window.event;
// Objeto de evento de la tecla
var code = e.charCode || e.keyCode;
// tecla que se ha pulsado
//
if
if
if

Si se ha pulsado una tecla de funcin de cualquier tipo, no filtrarla


(e.charCode == 0) return true;
// Tecla de funcin (solo para Firefox)
(e.ctrlKey || e.altKey) return true; // Se mantienen presionadas Ctrl o Alt
(code < 32) return true;
// Carcter de Ctrl en tabla ASCII

// Dejar pasar teclas de retroceso (BackSpace), tabulacin (Tab), entrada (Enter)


y
// escape (Scape)
if (code==0 || code==8 || code==9 || code==13 || code==27) return true;
// Buscar la informacin de los caracteres vlidos para este campo de entrada
var allowed1 = "0123456789";
// Caracteres vlidos
var messageElement1 = document.getElementById("numbersOnly1");
// Mensaja
ocultar/mostrar

Lenguajes Interpretados en el Servidor

32

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

var messageElement2
ocultar/mostrar
var messageElement3
ocultar/mostrar

document.getElementById("numbersOnly2");

//

Mensaja

document.getElementById("numbersOnly3");

//

Mensaja

// Convertir el cdigo de carcter a su carcter correspondiente


var c = String.fromCharCode(code);
// Comprobar si el carcter est dentro del conjunto de caracteres permitidos
if (allowed1.indexOf(c) != -1) {
// Si c es un carcter legal, ocultar el mensaje, si es que existe.
if (messageElement1) messageElement1.style.visibility = "hidden";
return true; // Aceptar el carcter
}
else {
// Si c no est en el conjunto de caracteres permitidos, mostrar el mensaje
if (messageElement1) messageElement1.style.visibility = "visible";
// Y rechazar este evento keypress
if (e.preventDefault) e.preventDefault();
if (e.returnValue) e.returnValue = false;
return false;
}
if (allowed2.indexOf(c) != -1) {
// Si c es un carcter legal, ocultar el mensaje, si es que existe.
if (messageElement2) messageElement2.style.visibility = "hidden";
return true; // Aceptar el carcter
}
else {
// Si c no est en el conjunto de caracteres permitidos, mostrar el mensaje
if (messageElement2) messageElement2.style.visibility = "visible";
// Y rechazar este evento keypress
if (e.preventDefault) e.preventDefault();
if (e.returnValue) e.returnValue = false;
return false;
}
if (allowed3.indexOf(c) != -1) {
// Si c es un carcter legal, ocultar el mensaje, si es que existe.
if (messageElement3) messageElement3.style.visibility = "hidden";
return true; // Aceptar el carcter
}
else {
// Si c no est en el conjunto de caracteres permitidos, mostrar el mensaje
if (messageElement3) messageElement3.style.visibility = "visible";
// Y rechazar este evento keypress
if (e.preventDefault) e.preventDefault();
if (e.returnValue) e.returnValue = false;
return false;
}
}
})();

Archivo 3: compararnum.php
<!DOCTYPE html>
<html lang="es">
<head>
<title>Contador de palabras</title>
<meta charset="utf-8" />
<link href="http://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link rel="stylesheet" href="css/font.css" />
<link rel="stylesheet" href="css/formstyle.css" />
</head>
<body>

Lenguajes Interpretados en el Servidor

33

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

<header>
<h1>
Resultados de la comparacin de <?php echo $num1 = isset($_POST['numero1']) ?
$_POST['numero1'] : 0; ?>,
<?php echo $num2 = isset($_POST['numero3']) ? $_POST['numero2'] : 0; ?> y
<?php echo $num3 = isset($_POST['numero3']) ? $_POST['numero3'] : 0; ?>
</h1>
</header>
<section>
<article>
<p class="msg">
<?php
$elmayor = ($num1 > $num2) ? $num1 : $num2;
$elmayor = ($elmayor > $num3) ? $elmayor : $num3;
printf("El nmero mayor es: %d", $elmayor);
?>
</p>
<article>
</section>
</body>
</html>

Archivo 4: formstyle.css
* {
border: 0;
margin: 0;
outline: none;
padding: 0;
}
html {
height: 100%;
}
body {
background: #1e2021; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e2021 1%, #4a4e54 50%, #0c0309 100%); /*
FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#1e2021),
color-stop(50%,#4a4e54), color-stop(100%,#0c0309)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1e2021 1%,#4a4e54 50%,#0c0309 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1e2021 1%,#4a4e54 50%,#0c0309 100%); /* Opera
11.10+ */
background: -ms-linear-gradient(-45deg, #1e2021 1%,#4a4e54 50%,#0c0309 100%); /* IE10+
*/
background: linear-gradient(135deg, #1e2021 1%,#4a4e54 50%,#0c0309 100%); /* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#1e2021',
endColorstr='#0c0309',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
font-family: 'LeagueGothicRegular',Arial,Helvetica,"Liberation Sans";
}
h1 {
font-size: 48px;
color: #9ab;
text-transform: uppercase;
text-align: center;
margin: 16px auto;
text-shadow: 1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,

Lenguajes Interpretados en el Servidor

34

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

5px 5px 0 #444,


6px 6px 0 #444; /* end of 4 level deep dark shadow */
/* CSS3 Transform Effect */
-webkit-transform: scale(1.2);
/* Safari & Chrome */
-moz-transform: scale(1.2);
/* Firefox */
-o-transform: scale(1.2);
/* Opera */
}
.msg {
background: #c9d0de; border: 1px solid #e1e1e1;
-moz-box-shadow: 0px 0px 8px #444;
-webkit-box-shadow: 0px 0px 8px #444;
box-shadow: 0px 0px 8px #444;
color:#201821;
font-family:Andika, Arial, sans-serif;
font-size:1.1em;
font-variant:small-caps;
letter-spacing:.1em;
margin: 20px auto;
padding: 20px 10px;
text-shadow: 0px 1px 0px #f2f2f2;
width: 430px;
}
#numbersOnly1,
#numbersOnly2,
#numbersOnly3 {
background: #febbbb; /* Old browsers */
background: -moz-linear-gradient(-45deg, #febbbb 0%, #fe9090 46%, #ff5c5c 100%); /*
FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#febbbb),
color-stop(46%,#fe9090), color-stop(100%,#ff5c5c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #febbbb 0%,#fe9090 46%,#ff5c5c 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #febbbb 0%,#fe9090 46%,#ff5c5c 100%); /* Opera
11.10+ */
background: -ms-linear-gradient(-45deg, #febbbb 0%,#fe9090 46%,#ff5c5c 100%); /* IE10+
*/
background: linear-gradient(135deg, #febbbb 0%,#fe9090 46%,#ff5c5c 100%); /* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#febbbb',
endColorstr='#ff5c5c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border:3px groove rgb(230,40,5);
-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
-o-border-radius: 12px 12px 12px 12px;
-ms-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
color:White;
font:Bold 8pt "LatoSemibold",Arial,Helvetica,sans-serif;
padding: 4px 5px;
visibility:hidden;
}
#formarea {
background: #c9d0de; border: 1px solid #e1e1e1;
-moz-box-shadow: 0px 0px 8px #444;
-webkit-box-shadow: 0px 0px 8px #444;
box-shadow: 0px 0px 8px #444;
margin: 20px auto;
padding: 20px 10px;
width: 430px;
}

Lenguajes Interpretados en el Servidor

35

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

label {
float: left;
clear: left;
margin: 11px 20px 0 0;
width: 100px;
text-align: right;
font-size: 16px;
color: #445668;
text-transform: uppercase;
text-shadow: 0px 1px 0px #f2f2f2;
}
input {
width: 260px;
height: 35px;
padding: 5px 20px 0px 20px;
margin: 0 0 20px 0;
background: #546a7f; /* Old browsers */
background: -moz-linear-gradient(-45deg, #546a7f 0%, #5e768f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#546a7f),
color-stop(100%,#5e768f)); /* Chrome,Safari4+ */
background:
-webkit-linear-gradient(-45deg,
#546a7f
0%,#5e768f
100%);
/*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #546a7f 0%,#5e768f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #546a7f 0%,#5e768f 100%); /* IE10+ */
background: linear-gradient(135deg, #546a7f 0%,#5e768f 100%); /* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#546a7f',
endColorstr='#5e768f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;
-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif;
font-size: 16px;
color: #f2f2f2;
text-transform: uppercase;
text-shadow: 0px -1px 0px #334f71;
}
input::-webkit-input-placeholder {
color: #a1b2c3;
text-shadow: 0px -1px 0px #38506b;
}
input:-moz-placeholder {
color: #a1b2c3;
text-shadow: 0px -1px 0px #38506b;
}
input[type=submit] {
border:2px groove #7c93ba;
/* forces the cursor to change to a hand when the button is hovered */
cursor:pointer;
padding: 5px 25px;
/* give the background a gradient - see cssdemos.tupence.co.uk/gradients.htm for more
info */
/* required for browsers that don't support gradients */
background-color:#6b6dbb;
background:
-webkit-gradient(linear,
left
top,
left
bottom,
from(#88add7),
to(#6b6dbb));

Lenguajes Interpretados en el Servidor

36

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

background: -webkit-linear-gradient(top, #88add7, #6b6dbb);


background: -moz-linear-gradient(top, #88add7, #6b6dbb);
background: -o-linear-gradient(top, #88add7, #6b6dbb);
background: linear-gradient(top, #88add7, #6b6dbb);
/* style to the text inside the button */
font-family:Andika, Arial, sans-serif;
color:#fff;
font-size:1.1em;
letter-spacing:.1em;
font-variant:small-caps;
/* give the corners a small curve */
-webkit-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
/*add a drop shadow to the button*/
-webkit-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
-moz-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
}
input[type=submit]:hover,
input[type=submit]:focus {
color:#edebda;
/* reduce the spread of the shadow to give a pushed effect */
-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
}
textarea {
width: 260px; height: 170px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0;
background: #546a7f; /* Old browsers */
background: -moz-linear-gradient(-45deg, #546a7f 0%, #5e768f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#546a7f),
color-stop(100%,#5e768f)); /* Chrome,Safari4+ */
background:
-webkit-linear-gradient(-45deg,
#546a7f
0%,#5e768f
100%);
/*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #546a7f 0%,#5e768f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #546a7f 0%,#5e768f 100%); /* IE10+ */
background: linear-gradient(135deg, #546a7f 0%,#5e768f 100%); /* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#546a7f',
endColorstr='#5e768f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;
-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif;
font-size: 16px;
color: #f2f2f2;
text-transform: uppercase;
text-shadow: 0px -1px 0px #334f71;
}
textarea::-webkit-input-placeholder {
color: #a1b2c3;
text-shadow: 0px -1px 0px #38506b;
}
textarea:-moz-placeholder {
color: #a1b2c3;
text-shadow: 0px -1px 0px #38506b;
}

Lenguajes Interpretados en el Servidor

37

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

input:focus,
textarea:focus {
background: #668099; /* Old browsers */
background: -moz-linear-gradient(-45deg, #668099 0%, #728eaa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#668099),
color-stop(100%,#728eaa)); /* Chrome,Safari4+ */
background:
-webkit-linear-gradient(-45deg,
#668099
0%,#728eaa
100%);
/*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #668099 0%,#728eaa 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #668099 0%,#728eaa 100%); /* IE10+ */
background: linear-gradient(135deg, #668099 0%,#728eaa 100%); /* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#668099',
endColorstr='#728eaa',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

Archivo 5: font.css
@font-face {
font-family: 'LeagueGothicRegular';
src: url('../fonts/League_Gothic.eot');
src: url('../fonts/League_Gothic.woff') format('woff'),
url('../fonts/League_Gothic.otf') format('opentype'),
url('../fonts/League_Gothic.svg#LeagueGothic') format('svg');
}

V. DISCUSION DE RESULTADOS
1.
2.

Cree un script que a partir de la edad calcule el nmero de das que este ha vivido, tome en cuenta los
aos bisiestos para obtener el clculo exacto de das.
Realice un script que le permita determinar si un carcter ingresado por el usuario a travs de un
formulario, es una vocal (mayscula, minscula o acentuada), una consonante (mayscula o minscula),
un nmero (del 0 al 9) o smbolos (.,;:()""''!?#$%&, etc). En caso de no ser ninguno de estos caracteres,
debe mostrar un mensaje que indique que "el carcter ingresado no se puede procesar".

VI. INVESTIGACION COMPLEMENTARIA


1.

El nmero de unidades valorativas que puede cursar un estudiante en cada ciclo es determinado de
acuerdo a su CUM:
i. Si el CUM del estudiante es mayor o igual que 7.5, podr cursar un mximo de 32 unidades
valorativas (UV),
ii. Si el CUM del estudiante es mayor o igual que 7.0, pero menor que 7.5, podr cursar un mximo de 24
unidades valorativas (UV).
iii. Si el CUM es mayor o igual que 6.0 y menor que 7.0, podr cursar un mximo de 20 unidades
valorativas.
iv. Si el CUM acumulado es menor que 6.0, podr cursar un mximo de 16 unidades valorativas.
Se pide que realice un formulario en donde se ingresen las notas de 5 materias que el estudiante ha
cursado durante el primer ciclo de estudios y a partir de estas calcular el CUM y en base al valor
obtenido indique el nmero de unidades valorativas que puede cursar el siguiente ciclo.
Puede crear un formulario como el siguiente:

Lenguajes Interpretados en el Servidor

38

Gua# 2: Estructuras de control - Sentencias condicionales y matrices

VII. BIBLIOGRAFIA

Gutirrez, Abraham / Bravo, Gins. PHP 5 a travs de ejemplos. Editorial Alfaomega RAMA. 1ra edicin.
Mxico. Junio 2005.
Gil Rubio, Francisco Javier/Villaverde, Santiago Alonso/Tejedor Cerbel, Jorge A. Creacin de sitios web
con PHP 5. Editorial McGraw-Hill. 1ra edicin. Madrid, Espaa, 2006.
Doyle, Matt. Fundamentos de PHP Prctico. Editorial Anaya Multimedia. 1. Edicin. Madrid, Espaa.
2010.
John Coggeshall. La Biblia de PHP 5. 1ra Edicin. Editorial Anaya Multimedia. Madrid Espaa.
http://www.php.net/manual/en

Lenguajes Interpretados en el Servidor

39

Das könnte Ihnen auch gefallen