CateringWebDinamica

Palacios Sucre y Sal

PROYECTO FINAL
- DWEC

Enric Gil Gallen

Introducción
La base del proyecto es una Web para un servicio de catering “Palacios Sucre y Sal” en la
cual le se le añadirán Script Ajax y Jquery para mejorar su usabilidad y hacerla mas
dinámica.
1º Script:
Codigo:
Fuente:
JavaScript
1º Script:
Comprueba si es la 1º vez que un usuario entra y le aparece un alert con un código de
descuento.
Este Script me pareció una gran idea para fidelizar clientes alapar que para darle un toque
distinguido a la web.
Codigo:
< script language = " JavaScript " type = " text / javascript " >
readCookie ( ) ;
función readCookie ( ) {
si ( documento . galletas == " " ) {
writeCookie ( ) ;
alertMessage ( ) ;
} else {
var the_cookie = documento . galleta ;
the_cookie = unescape ( the_cookie ) ;
the_cookie_split = the_cookie . división ( " ; " );
for ( loop = 0 ; loop < the_cookie_split . length ; loop ++ ) {
the_cookie_split [ loop ] ;
var part_of_split =
part_of_split . indexOf ( " nfti_date " )
var find_name =
if ( find_name ! = - 1 ) {
break ;
} // Cerrar si
} // Cerrar para
si ( find_name == - 1 ) {
writeCookie ( ) ;
alerta ( " Bienvenido - Alguien tu primera visita aquí tiene este codigo
de 5% de descunto. " )
} else {
alerta ( " Este texto comprueba que funciona. " ) ;
}
}
}
< / script >
Fuente: http://www.efectosjavascript.com/ultimavisita.html
2ºScript
Este Script es una cuenta atrás, la cual esta aplicada para gestionar ofertas temporales. La
función del Script es hacer pensar a los clientes que es algo especial para que realicen una
compra inmediata.
Codigo:
< script >
var no = 5 ; // número de nieve
var speed = 15 ; // un número más pequeño mueve la nieve más rápido
var snowflake = img1 ;
var ns4up = ( documento . capas ) ? 1 : 0 ; // navegador sniffer
var ie4up = ( document . all ) ? 1 : 0 ;
var dx , xp, yp ; // coordinar y variables de posición
var am , STX , pocilga ; // variables de amplitud y paso
var i , doc_width = 400 , doc_height = 500 ;
if ( ns4up ) {
doc_width = self . innerWidth ;
doc_height = auto . Altura interior ;
} else if ( ie4up ) {
doc_width= 500 ;
doc_height = 500 ;
}
dx = new Array ( ) ;
xp = new Array ( ) ;
yp = new Array ( ) ;
am = new Array ( ) ;
stx = new Array ( ) ;
sty = new Array ( ) ;
para ( i = 0 ;yo < no ; ++ i ) {
dx [ i ] = 0 ; // establecer las variables de coordenadas
xp [ i ] = Math . random ( ) * ( doc_width - 50 ) ; // establecer las variables de posición
yp [ i ] = Math . random ( ) * doc_height ;
am [ i ] = Matemáticas .aleatorio ( ) * 20 ; // establece las variables de amplitud
stx [ i ] = 0.02 + Math . random ( ) / 10 ; // establecer las variables de paso
sty [ i ] = 0.7 + Math . aleatorio ( ) ; // establece las variables de paso
if ( ns4up ) { // establece capas
if ( i == 0 ) {
document .write ( " <nombre de la capa = " punto " + i + " " izquierda = " 15 " " ) ;
documento . write ( " top = " 15 " visibility = " mostrar " > <img src = " " ); document.write
(snowflake + " " border = " 0 " > </ layer> " ) ; } else {
documento . escribir (
" <nombre de la capa = " punto " + i + " " izquierda = " 15 " " ) ;
(snowflake + " " border = " 0 " > </ layer> " ) ;
i == 0 ) {
documento . write ( " <div id = " dot " + i + " " style = " POSITION : " );
document.write ( " absolute ; Z - INDEX : " + i + " ; VISIBILIDAD : " );
document.write ( " visible ; SUPERIOR : 15px ; IZQUIERDA : 15px ; "> <img src = " " );
document.write (copo de nieve + " " border = " 0 " > </ div> " ) ;
} demás {
documento . escribir ( " <div id = " dot " + i + " " style = " POSICIÓN : " );
document.write ( " absolute ; Z - INDEX : " + i + " ;
document.write ( " visible ; TOP : 15px ; IZQUIERDA : 15px ; " > <img src = " " );
document.write (snowflake + " " border = " 0 " > </ div> " ) ;
}
}
}
función snowNS ( ) { // Función de animación principal de Netscape
para ( i = 0 ; i < no ; ++ i ) { // iterar para cada punto
yp [ i ] + = sty [ i ] ;
if ( yp [ i ] > doc_height - 50 ) {
xp [ i ] = Matemáticas . random ( ) * ( doc_width - am [ i ] - 30 ) ;
yp [ i ] = 0 ;
stx [ i ] = 0.02 + Matemáticas . random ( ) / 10 ;
sty [ i ] = 0.7 + Matemáticas . aleatorio ( ) ;
}
dx [ i ] + = stx [ i ] ;
documento . capas [ " punto "+ i ] . top = yp [ i ] ;
documento . capas [ " punto " + i ] . left = xp [ i ] + am [ i ] * Matemáticas . sin ( dx [ i ] ) ;
}
setTimeout ( " snowNS () " , velocidad ) ;
}
funciónsnowIE ( ) { // Función de animación principal IE
yp [ i ] + = sty [ i ] ;
xp [ i ] = Matemáticas . aleatorio ( ) * (doc_width - am [ i ] - 30 ) ;
yp [ i ] = 0 ;
doc_width = document . cuerpo . clientWidth ;
doc_height =documento . cuerpo . clienteAltura ;
}
dx [ i ] + = stx [ i ] ;
documento . todo [ " punto " + i ] . estilo . pixelTop = yp [ i ] ;
documento . todo [ " punto " + i ] . estilo . pixelLeft = xp [ i] + am [ i ] * Matemáticas . sin ( dx
[i]);
}
setTimeout ( " snowIE () " , velocidad ) ;
}
if ( ns4up ) {
snowNS ( ) ;
snowIE ( ) ;
}
< / script >< script >
var no = 5 ; // número de nieve
var speed = 15 ; // un número más pequeño mueve la nieve más rápido
var snowflake = img1 ;
var ns4up = ( documento . capas ) ? 1 : 0 ; // navegador sniffer
var ie4up = ( document . all ) ? 1 : 0 ;
var dx , xp, yp ; // coordinar y variables de posición
var am , STX , pocilga ; // variables de amplitud y paso
var i , doc_width = 400 , doc_height = 500 ;
if ( ns4up ) {
doc_width= 500 ;
doc_height = 500 ;
}
dx = new Array ( ) ;
xp = new Array ( ) ;
yp = new Array ( ) ;
am = new Array ( ) ;
stx = new Array ( ) ;
sty = new Array ( ) ;
para ( i = 0 ;yo < no ; ++ i ) {
dx [ i ] = 0 ; // establecer las variables de coordenadas
xp [ i ] = Math . random ( ) * ( doc_width - 50 ) ; // establecer las variables de posición
yp [ i ] = Math . random ( ) * doc_height ;
am [ i ] = Matemáticas .aleatorio ( ) * 20 ; // establece las variables de amplitud
stx [ i ] = 0.02 + Math . random ( ) / 10 ; / / establecer las variables de paso
sty [ i ] = 0.7 + Math . aleatorio ( ) ; / / establece las variables de paso
if ( ns4up ) { // establece capas
if ( i == 0 ) {
document .write ( " <nombre de la capa = " punto " + i + " " izquierda = " 15 " " ) ;
(snowflake + " " border = " 0 " > </ layer> " ) ; } else {
documento . escribir (
" <nombre de la capa = " punto " + i + " " izquierda = " 15 " " ) ;
(snowflake + " " border = " 0 " > </ layer> " ) ;
i == 0 ) {
documento . write ( " <div id = " dot " + i + " " style = " POSITION : " );
document.write ( " absolute ; Z - INDEX : " + i + " ; VISIBILIDAD : " );
document.write ( " visible ; SUPERIOR : 15px ; IZQUIERDA : 15px ; "> <img src = " " );
document.write (copo de nieve + " " border = " 0 " > </ div> " ) ;
} demás {
documento . escribir ( " <div id = " dot " + i + " " style = " POSICIÓN : " );
document.write ( " absolute ; Z - INDEX : " + i + " ;
document.write ( " visible ; TOP : 15px ; IZQUIERDA : 15px ; " > <img src = " " );
document.write (snowflake + " " border = " 0 " > </ div> " ) ;
}
}
}
función snowNS ( ) { // Función de animación principal de Netscape
yp [ i ] + = sty [ i ] ;
xp [ i ] = Matemáticas . random ( ) * ( doc_width - am [ i ] - 30 ) ;
yp [ i ] = 0 ;
}
dx [ i ] + = stx [ i ] ;
documento . capas [ " punto "+ i ] . top = yp [ i ] ;
documento . capas [ " punto " + i ] . left = xp [ i ] + am [ i ] * Matemáticas . sin ( dx [ i ] ) ;
}
setTimeout ( " snowNS () " , velocidad ) ;
}
funciónsnowIE ( ) { // Función de animación principal IE
yp [ i ] + = sty [ i ] ;
xp [ i ] = Matemáticas . aleatorio ( ) * (doc_width - am [ i ] - 30 ) ;
yp [ i ] = 0 ;
doc_width = document . cuerpo . clientWidth ;
doc_height =documento . cuerpo . clienteAltura ;
}
dx [ i ] + = stx [ i ] ;
documento . todo [ " punto " + i ] . estilo . pixelTop = yp [ i ] ;
documento . todo [ " punto " + i ] . estilo . pixelLeft = xp [ i] + am [ i ] * Matemáticas . sin ( dx [
i ] ) ;
}
setTimeout ( " snowIE () " , velocidad ) ;
}
if ( ns4up ) {
snowNS ( ) ;
snowIE ( ) ;
}
< / script >
Fuente:https://www.lawebdelprogramador.com/codigo/JavaScript/1430-Cuenta-atras-
hasta-una-fecha.html
3º Script
Este Script es un calendario en cual puedes introducir una fecha y te muestra un calendario
con los días que está abierto y cerrado.
Codigo:
var A_TCALCONF = {
' cssprefix ' : ' tcal ' ,
' months ' : [ ' Enero ' , ' Febrero ' , ' Marzo ' , ' Abril ' , ' Mayo ' , ' Junio ' , ' Julio ' ,
'Augost ' , ' Septimbre ' , ' Octobre ' , ' Novembre ' , ' Diciembre ' ] ,
'entre semana ' : [ ' Do ' , ' Lu ' , ' Ma ' , ' Mi ' , ' Ju ' , ' Vi ' , ' Sa ' ] ,
' longwdays ' : [ ''Domingo ' , ' Lunes ' , ' Martes ' , ' Miercoles ' , ' Jueves ' , ' Viernes '
, ' Sábado ' ] ,
' yearscroll ' : cierto , / / muestra el año de desplazamiento
' weekstart ' : 0 , // primer día de semana: 0-Su o 1-Mo
'año anterior ' : ' Año anterior ' ,
'nextyear ' : ' Próximo año ' ,
' precedente ' : ' Mes anterior ' ,
' próximo mes ' : ' Próximo mes ' ,
' formato ' : ' m / d / Y ' //' dm-Y ', Ym-d', 'l, F jS Y'
};
var A_TCALTOKENS = [
// Una representación numérico completo de un año, 4 dígitos
{ ' t ' : ' Y ' , ' R ' : ' 19 \\ d
{2} | 20 \\ d {2} ' , ' p ' : function ( d_date , n_value ) {
d_date . setFullYear ( Number ( n_value ) ) ; devolver d_date ; }, ' g ' : function ( d_date ) {
var n_year = d_date . getFullYear ( ) ; d evolver n_year ; } } ,
// Representación numérica de un mes, con ceros a la izquierda
{ ' t ' : ' m ' , ' r ' : ' 0? [1-9] | 1 [0-2] ' , ' p ' : function ( d_date ,n_value ) { d_date .
setMonth ( Number ( n_value ) - 1 ) ; devolver d_date ; } , ' g ' : function ( d_date ) { var
n_month = d_date . getMonth ( ) + 1 ; return ( n_month < 10 ? ' 0 ' : ' ' ) +n_month } } ,
// Una representación textual completa de un mes, como enero o marzo
{ ' t ' : ' F ' , ' r ' : A_TCALCONF . m eses . join ( ' | ' ) , ' p ' : function ( d_date ,
s_value ) { for ( var m = 0 ; m < 12 ; m++ ) if ( A_TCALCONF . months [ m ] == s_value ) {
d_date . setMonth ( m ) ; devolver d_date ; } } , ' g ' : function ( d_date ) { return
A_TCALCONF . meses [ d_date . getMonth ( ) ] ; } } ,
// Día del mes, 2 dígitos con ceros a la izquierda
{ ' t ' : ' d ' , ' r ' : ' 0? [1-9] | [12] [0-9] | 3 [01] ' , ' p ' : function ( d_date , n_value ) {
d_date . setDate ( Number ( n_value ) ) ; if ( d_date . getDate ( ) ! = n_value ) d_date
.setDate ( 0 ) ; return d_date } , ' g ' : f unction ( d_date ) { var n_date = d_date . getDate ( )
; return ( n_date < 10 ? ' 0 ' : ' ' ) + n_date ; } } ,
// Día del mes sin ceros a la izquierda
{ ' t ' : 'j ' , ' r ' : ' 0? [1-9] | [12] [0-9] | 3 [01] ' , ' p ' : function ( d_date , n_value ) {
d_date . setDate ( Number ( n_value ) ) ; if ( d_date . getDate ( ) ! = n_value ) d_date .
setDate ( 0 ) ; return d_date } , ' g ' : function ( d_date ) { var n_date = d_date . getDate ( )
; return n_date ; } } ,
// Una representación textual completa del día de la semana
{ ' t ' : ' l ' , ' r ' : A_TCALCONF . L ongwdays . join ( ' | ' ) , ' p ': function ( d_date ,
s_value ) { return d_date } , ' g ' : function ( d_date ) { return A_TCALCONF . longwdays [
d_date . getDay ( ) ] ; } } ,
// sufijo ordinal en inglés para el día del mes, 2 caracteres
{ ' t ' : ' S ' , ' r ' : 'st | nd | rd | th ' , ' p ' : function ( d_date , s_value ) { return d_date }
, ' g ' : function ( d_date ) { n_date = d_date . getDate ( ) ; if ( n_date % 10 == 1 && n_date !
= 11 ) return ' st ' ; si (n_date % 10 = = 2 && n_date ! = 12 ) return ' nd ' ; if ( n_date % 10
== 3 && n_date ! = 13 ) return ' rd ' ; devolver ' th ' ; } }
] ;
función f_tcalGetHTML ( d_date ) {
var e_input = f_tcalGetInputs ( verdadero ) ;

if ( ! e_input ) return ;
var s_pfx = A_TCALCONF . cssprefix ,

s_format = A_TCALCONF . formato ;
// hoy de configuración o cliente fecha

var d_today = f_tcalParseDate ( A_TCALCONF . Hoy , A_TCALCONF . Formato ) ;
if ( ! d_today )
d_today = f_tcalResetTime ( n
ew Date ( ) ) ;
// fecha seleccionada de entrada o configuración o hoy

var d_selected = f_tcalParseDate ( e_input . value , s_format ) ;
if ( ! d_selected )
d_selected = f_tcalParseDate ( A_TCALCONF . selected , A_TCALCONF .
format ) ;
if ( ! d_selected )
d_selected = new Date ( d_today ) ;
// muestra el calendario para la fecha pasada o seleccionada

d_date = d_date ? f_tcalResetTime ( d_date ) : new Date ( d_selected ) ;
var d_firstDay = new Date ( d_date ) ;

d_firstDay . setDate ( 1 ) ;
d_firstDay . setDate ( 1 - ( 7 + d_firstDay . getDay ( ) - A_TCALCONF . weekstart )
% 7 ) ;
var a_class , s_html = ' <table id = " ' + s_pfx + ' Controls"> <tbody> <tr> '
+ ( A_TCALCONF . yearscroll ? ' <td id = " ' + s_pfx + ' PrevYear" ' +
f_tcalRelDate ( d_date) , - 1 , ' y ' ) + ' título = " ' + A_TCALCONF .prevyear + '"> </ td> ' : ' ' )
+ ' <td id =" ' + s_pfx + ' PrevMonth " ' + f_tcalRelDate ( d_date , - 1 ) + ' title
=" ' + A_TCALCONF . prevmonth + ' "> </ td> <th> '
+ A_TCALCONF . months [ d_date . getMonth ( ) ] + ' ' getFullYear ( )
+ ' </ th> <td id = " ' + s_pfx + ' NextMonth" ' + f_tcalRelDate ( d_date , 1 ) + '
title = " ' + A_TCALCONF . nextmonth + ' "> </ td> '
+ ( A_TCALCONF . Yearscroll ? ' < Td id = " ' + s_pfx + ' NextYear" ' +
f_tcalRelDate ( d_date, 1 , ' y ' ) + ' título = " ' + A_TCALCONF . Nextyear + ' "> </ td> ' : ' ' )
+ ' </ tr> </ tbody> </ table> <table id = " ' + s_pfx + ' Grid'> <tbody> <tr> ' ;
// imprime los títulos de los días laborables

para ( var i = 0 ; i < 7 ; i ++ )
s_html + = ' <th> ' + A_TCALCONF . días laborables [ ( A_TCALCONF .
weekstart + i ) % 7 ] + ' </ th> ' ;
s_html + = ' </ tr> ' ;
// imprime la tabla de calendario

var n_date , n_month , d_current = new Date ( d_firstDay ) ;
while ( d_current . getMonth ( ) == d_date . getMonth ( ) ||
d_current . getMonth ( ) == d_firstDay . getMonth ( ) ) {
s_html + = ' <tr> ' ;

for ( var n_wday = 0 ; n_wday < 7 ; n_wday ++ ) {
a_class = [ ] ;
n_date = d_current . getDate ( ) ;
n_month = d_current . getMonth ( ) ;
if ( d_current . getMonth ( ) ! = d_date . getMonth ( ) )

a_class [ a_class . length ] = s_pfx + ' OtherMonth ' ;
if ( d_actual . g
etDay ( ) == 0 || d_actualidad . getDay ( ) == 6 )
a_class [ a_class . longitud ] =s_pfx + ' Fin de s emana ' ;
if ( d_actual . v alueOf ( ) == d_today . valueOf ( ) )
a_class [ a_class . longitud ] = s_pfx + ' Hoy ' ;
if ( d_current . valueOf ( ) == d_selected . valueOf ( ) )
a_class [ a_class . longitud] = s_pfx + ' Seleccionado ' ;
s_html + = ' <td ' + f_tcalRelDate ( d_current ) + ( a_class . length ? '
class = " ' + a_class . join ( ' ' ) + ' "> ' : ' > ' ) + n_date + ' </ td> ' ;
d_actual . setDate ( ++ n_date ) ; }
s_html
+ = ' </ tr> ' ;
}
s_html + = ' </ tbody> </ table> ' ;
devuelve s_html ;
}
función f_tcalRelDate ( d_date , d_diff , s_units ) {
var s_units = ( s_units == ' y ' ? ' FullYear ' : ' Mes ' ) ;
var d_result = new Date ( d_date ) ;
if ( d_diff ) {
d_result [ ' set ' + s_units ] ( d_date [ ' get ' + s_units ] ( ) + d_diff) ;
if ( d_result . getDate ( ) ! = d_date . getDate ( ) )
d_result . s etDate ( 0 ) ;
}
return ' onclick = "f_tcalUpdate ( ' + d_result . valueOf ( ) + ( d_diff ? ' , 1 ' : ' ' ) + ' )" '
;
}
función f_tcalResetTime ( d_date ) {

d_date . setMilliseconds ( 0 ) ;
d_date . setSeconds ( 0 ) ;
d_date . setMinutes ( 0 ) ;
d_date . setHours ( 12 ) ;
devolver d_date ;
}
// cierra el calendario y devuelve todas las entradas a la

función de estado predeterminada f_tcalCancel ( ) {
var s_pfx = A_TCALCONF . cssprefix ;

var e_cal = documento . getElementById ( s_pfx ) ;
if ( e_cal )
e_cal . estilo . visibility = ' ' ;
var a_inputs = f_tcalGetInputs ( ) ;
for ( var n = 0 ; n < a_inputs . length ; n++ )
f_tcalRemoveClass ( a_inputs [ n ] , s_pfx + ' Active ' ) ;
}
función f_tcalUpdate ( n_date , b_keepOpen ) {
var e_input = f_tcalGetInputs ( verdadero ) ;

if ( ! e_input ) return ;
d_date = new Date ( n_date ) ;

if ( b_keepOpen ) {
if ( ! e_cal || e_cal . style . visibility ! = ' visible ' ) return ;
e_cal . innerHTML = f_tcalGetHTML ( d_date , e_input ) ;
}
else {
e_input . valor =f_tcalGenerateDate ( d_date , A_TCALCONF . format ) ;
f_tcalCancel ( ) ;
}
}
función f_tcalOnClick ( ) {
// ver si ya se ha abierto
var s_activeClass = s_pfx + ' Activo ' ;
var b_close = f_tcalHasClass ( this , s_activeClass ) ;
// cerrar todos los números

f_tcalCancel ( ) ;
if ( b_close ) return ;
// obtener la posición de la entrada

f_tcalAddClass ( this , s_activeClass ) ;
var n_left = f_getPosition ( this , ' Left ' ) ,

n_top = f_getPosition ( t his , ' Top ' ) + esto . offsetAltura ;

if ( ! e_cal ) {
e_cal = documento . createElement ( ' div ' ) ;
e_cal . onselectstart = function ( ) { return false } ;
e_cal . id = s_pfx ;
documento . getElementsByTagName ( "cuerpo " ) . elemento ( 0 ) .
appendChild ( e_cal ) ;
}
e_cal . innerHTML = f_tcalGetHTML ( nula ) ;
e_cal . estilo . top = n_top + ' px ' ;
e_cal . estilo . izquierda = ( n_left + esto . offsetWidth - e_cal . offsetWidth) + ' px ' ;
e_cal . estilo . visibility = ' visible ' ;
}
función f_tcalParseDate ( s_date , s_format ) {

if ( ! s_date ) return ;
var s_char , s_regexp = ' ^ ' , a_tokens = { } , a_options , n_token = 0 ;
for ( var n = 0 ; n < s_format . length ; n ++ ) {
s_char = s_format . charAt ( n ) ;
if ( A_TCALTOKENS_IDX [ s_char ] ) {
a_tokens [ s_char ] = ++ n_token ;
s_regexp + = ' ( ' + A_TCALTOKENS_IDX [ s_char ] [ ' r ' ] + ' ) ' ;
}
else if ( s_char == ' ' )
s_regexp + = ' \\ s ' ; else
s_regexp + = ( s_char . m atch (
/ [ \ w \ d ] / ) ? ' ' : ' \\ ' ) + s_char ;
}
var r_date = new RegExp ( s_regexp + ' $ ' ) ;
if ( ! s_date . match ( r_date ) ) return ;
var s_val , d_date = f_tcalResetTime ( new Date ( ) ) ;

d_date . setDate ( 1 ) ;
for ( n = 0 ; n < A_TCALTOKENS . length ; n ++ ) {

s_char = A_TCALTOKENS [ n ] [ ' t ' ] ;
if ( ! a_tokens [ s_char ] )
continue ;
s_val = RegExp [ ' $ ' + a_tokens [ s_char ] ] ;
d_date =A_TCALTOKENS [ n ] [ ' p ' ] ( d_date , s_val ) ;
}
devolver d_date ;
}
function f_tcalGenerateDate ( d_date , s_format ) {
var s_char , s_date = ' ' ;

for ( var n = 0 ; n < s_format . length ; n ++ ) {
s_char = s_format . charAt ( n ) ;
s_date + = A_TCALTOKENS_IDX [ s_char ] ? A_TCALTOKENS_IDX [
s_char ] [ ' g ' ] ( d_date ) : s_char ;
}
return s_date ;
}
función f_tcalGetInputs ( b_active ) {
var a_inputs = documento . g etElementsByTagName ( ' input ' ) ,

e_input , s_rel , a_result = [ ] ;
para ( n = 0 ; n < a_inputs . length ; n ++ ) {
e_input = a_inputs [ n ] ;

if ( ! e_input . tipo || e_input . type ! = ' texto ' )
continuar ;
if ( ! f_tcalHasClass ( e_input , ' tcal ' ) )

continue ;
if ( b_active && f_tcalHasClass ( e_input , A_TCALCONF . cssprefix + ' Active
' ) )
devuelve e_input ;
a_result [ a_result . longitud ] = e_input ;

}
return b_active ? null : a_result ;
}
function f_tcalHasClass ( e_elem , s_class ) {

var s_classes = e_elem . className ;
if ( ! s_classes )
devuelve falso ;
var a_classes = s_classes . división ( ' ' ) ; for ( var n = 0 ; n < a_classes . length ;
n ++ ) if (
a_classes [ n ] == s_class )

return true ;
volver falsa ;
}
función f_tcalAddClass ( e_elem , s_class ) {

if ( f_tcalHasClass ( e_elem , s_class ) )
return ;

e_elem . className = ( s_classes ? s_classes + ' ' : ' ' ) + s_class ; }
function f_tcalRemoveClass ( e_elem , s_class ) {

if ( ! s_classes || s_classes . indexOf ( s_class ) == - 1 )
return false ;
var a_classes = s_classes . split ( ' ' ) ,

a_newClasses = [ ] ;
for ( var n = 0 ; n < a_classes . length ; n ++ ) {

if ( a_classes [ n ] == s_class )
continue ;
a_newClasses [ a_newClasses . length ] = a_classes [ n ] ;
}
e_elem . className = a_newClasses . join ( ' ' ) ;
devolver verdadero ;
}
función f_getPosition ( e_elemRef , s_coord ) {
var n_pos = 0 , n_offset ,
e_elem = e_elemRef ;
while ( e_elem ) {

n_offset = e_elem [ " offset " + s_coord ] ;
n_pos + = n_offset ;
e_elem = e_elem . offsetParent ;
}
e_elem = e_elemRef ;

while ( e_elem ! = document . body ) {
n_offset = e_elem [ " scroll " + s_coord ] ;
if ( n_offset && e_elem . style . overflow == ' scroll ' )
n_pos - = n_offset ;
e_elem = e_elem . parentNode ;
}
devolver n_pos ;
}
función f_tcalInit ( ) {
if ( ! document . getElementsByTagName )

return ;
var e_input , a_inputs = f_tcalGetInputs ( ) ;

for ( var n = 0 ; n < a_inputs . length ; n ++ ) {
e_input = a_inputs [ n ] ;
e_input . onclick = f_tcalOnClick ;
f_tcalAddClass ( e_input , A_TCALCONF . cssprefix + ' Entrada ') ;
}
ventana . A_TCALTOKENS_IDX = { } ;
for ( n = 0 ; n < A_TCALTOKENS . length ; n ++ )
A_TCALTOKENS_IDX [ A_TCALTOKENS [ n ] [ ' t ' ] ] = A_TCALTOKENS [ n
] ;
}
función f_tcalAddOnload ( f_func ) {

if ( document . addEventListener ) {
ventana . addEventListener ( ' load ' , f_func , false ) ;
}
else if ( ventana . attachEvent ) {
ventana . attachEvent ( ' onload ' , f_func ) ;
}
else {
varf_onLoad = ventana . onload ;
if ( typeof window . onload ! = ' function ' ) {
ventana . onload = f_func ;
}
else {
ventana . onload = function ( ) {
f_onLoad ( ) ;
f_func ( ) ;
}
}
}
}
f_tcalAddOnload ( f_tcalInit ) ;
Fuente:
http://www.ajaxshake.com/es/JS/237901/selector-de-fechas-javascript-no-intrusivo-que-utiliz
a-mootools-mootools-datepicker.html
4º Script
Este Script es una validación de un formulario estándar de sugerencias y contactos, la cual
se asegura que no puedas poner mal es correo, que ningún campo este vació ni con
demasiados caracteres.
Codigo:
ventana . onload = function ( ) {
// Foco en el nombre:
documento . formas [ 0 ] . elementos [ 0 ] . focus ( ) ;
//document.getElementById("nombre "). focus ();
función limitacion ( elEvento , cantidad ) {
var evento = ventana . evento || elEvento ;
var campo = documento . getElementById ( " observaciones " ) ;
if ( campo . value . length > = cantidad && evento . charCode ! = 0 ) {
alerta ( " La observación no puede ser superior a 150 caracteres " ) ;
volver falsa ;
}
else {
}
función validacion ( ) {
var error = false ;
valornombre = documento . getElementById ( " nombre " ) . valor ;
valortfno = documento . getElementById ( " telefono " ) . valor ;
regex_tfno = new RegExp ( " ^ [0-9] {9} $ " ) ;
if ( valornombre == null || valornombre . length == 0 || / ^ \ s + $ / . test ( valornombre
) ) {
alerta ( " Campo nombre vac o " ) ;
error = verdadero ;
}
if ( ! ( regex_tfno . test ( valortfno ) ) ) {
alerta ( " Formato inv lido de tel .fono. Ha de constar netamente de nueve n meros
" ) ;
error = verdadero ;
}
if ( error ) {
volver falsa ;
}
else {
}
Fuente: Los ejercicios de clase.
AJAX
El Ajax te pasa un txt el cual tendremos la oferta de la semana. Es una forma de dar a
conocer nuevos productos o de deshacerse rápido de alimentos antes de su fecha de
caducidad.
Codigo:
< script type = " text / javascript " >
var XMLHttpRequestObject = false ;
if ( ventana . XMLHttpRequest ) {

XMLHttpRequestObject = new XMLHttpRequest ( ) ;
}
else if ( ventana . A
ctiveXObject ) {
XMLHttpRequestObject = new ActiveXObject ( " Microsoft.XMLHTTP " ) ;
}
función sacardatos ( datos , idDiv ) {

if ( XMLHttpRequestObject ) {
var objeto = documento . getElementById ( idDiv ) ;
XMLHttpRequestObject . a brir ( " GET " , datos ) ;
XMLHttpRequestObject . o nreadystatechange = function ( ) {
if ( XMLHttpRequestObject . readyState)== 4 &&
XMLHttpRequestObject . e stado == 200 ) {
objeto . innerHTML = XMLHttpRequestObject .
responseText ;
}
}
XMLHttpRequestObject . e nviar ( nulo ) ;
}
}
< / script >
Fuente: Los ejercicios de clase.
JQUERY
1º Libre
El Jquery es un enlace el cual al clicar te descargas una tabla de alérgenos del producto por
$_axjax. Su función principal es dar un toque de profesionalidad y seguridad a todos los que
visualice los productos.
Codigo:
< script >
$ ( función ( ) {
función downloadLink ( id ) {
var res = $ . ajax ( ajaxOptions ) ;
var ajaxOptions = {
url : ' http://httpbin.org/status/ ' + id
} ;
función en AjaxDone ( datos ) {
ubicación . href = ' http:

//localhost/proyecto/alergenos.pdf ' ;
}
función en AjaxFail ( ) {

alerta ( ' Error en la descarga ' ) ;
}
res
. hecho (en AjaxDone )
. fallar (en AjaxFail )
;
}
function onDownloadLinkClick ( e ) {

e . preventDefault ( ) ;
var $ this = $ ( t his ) ;
var id = $ this . datos ( ' id ' ) ;
downloadLink ( id ) ;
}
$ ( ' .download-link ' ) . on ( ' click ' , onDownloadLinkClick ) ;

} ) ;
< / script >
Fuente: https://es.stackoverflow.com/questions/46951/descargar-un-archivo-con-javascript
2ºEfecto
El efecto es una transición para podes descargar la tabla de alérgenos, la cual está como
escondida detrás con un link.
Codigo:
< script >
$ ( ' # card-grid ' ) . flip ( { trigger : ' hover ' } ) ;
< / script >
< style >
. foto {
ancho : 400px ; altura : 300px ;
}
< / style >
< style >
. contenedor1 {
altura : 400px ;
}
< / style >
Fuente: https://www.youtube.com/watch?v=TYcDrgwHqWc
3ºWidget
El Widget es un ordenador para la forma de entrega de los pedidos.
Codigo:
< style >
#sortable { list - style - type : none ; margen : 0 auto ; relleno : 0 ; ancho : 60 % ; }
Li #sortable { margen : 0 3px 3px 3px ; relleno : 0. 4em ; relleno - izquierda : 1. 5em ;
fuente - tamaño : 1.4em ; }
#sortable li span { margin - left : - 1. 3em ; }
< / style >
$ ( function ( ) {
$ ( " #sortable " ) . sortable ( ) ;
$ ( " #sortable " ) . disableSelection ( ) ;
} ) ;
< / script >
Fuente: https://jqueryui.com/sortable/

CateringWebDinamica

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CateringWebDinamica

Cargado por

Copyright:

Formatos disponibles

Palacios Sucre y Sal

función​ f_tcalGetHTML ​(​ d_date ​) {​

var​ e_input ​=​ f_tcalGetInputs ​( ​verdadero ​) ​;

var​ s_pfx ​=​ A_TCALCONF ​. ​cssprefix ​,

// hoy de configuración o cliente fecha

// fecha seleccionada de entrada o configuración o hoy

// muestra el calendario para la fecha pasada o seleccionada

var​ d_firstDay ​= ​new ​Date ​(​ d_date ​) ​;

// imprime los títulos de los días laborables

// imprime la tabla de calendario

s_html ​+ = ​' ​<tr> ​' ​;

if ​(​ d_current ​. ​getMonth ​( ) ! =​ d_date ​. ​getMonth ​( ) )

función​ f_tcalRelDate ​(​ d_date ​,​ d_diff ​,​ s_units ​) ​{

función​ f_tcalResetTime ​(​ d_date ​) ​{

// cierra el calendario y devuelve todas las entradas a la

var​ s_pfx ​=​ A_TCALCONF ​. ​cssprefix ​;

var​ e_input ​=​ f_tcalGetInputs ​( ​verdadero ​) ​;

d_date ​= ​new ​Date ​(​ n_date )​ ​;

// cerrar todos los números

// obtener la posición de la entrada

var​ n_left ​=​ f_getPosition ​( ​this ​, '​ ​Left ​' ​) ,

var​ e_cal ​=​ documento ​. ​getElementById ​(​ s_pfx ​) ​;

función​ f_tcalParseDate ​(​ s_date ​,​ s_format ​) ​{

var​ s_val ​,​ d_date ​=​ f_tcalResetTime ​( ​new ​Date ​( ) ) ​;

for ​(​ n ​= ​0 ​;​ n ​<​ A_TCALTOKENS ​. ​length ​;​ n ​++ ) ​{

function​ f_tcalGenerateDate ​(​ d_date ​,​ s_format ​) ​{

var​ s_char ​,​ s_date ​= ​' ' ​;

función​ f_tcalGetInputs ​(​ b_active ​) {​

var​ a_inputs ​=​ documento ​. g ​ etElementsByTagName ​( ​' ​input ​' ​) ,

para ​(​ n ​= ​0 ​;​ n ​<​ a_inputs ​. ​length ​;​ n ​++ ) ​{

e_input ​=​ a_inputs ​[​ n ​] ;​

if ​( !​ f_tcalHasClass ​(​ e_input ​, '​ ​tcal ​' ​) )

a_result ​[​ a_result ​. ​longitud ​] =​ e_input ​;

function​ f_tcalHasClass ​(​ e_elem ​,​ s_class ​) ​{

a_classes ​[​ n ​] ==​ s_class ​)

función​ f_tcalAddClass ​(​ e_elem ​,​ s_class ​) ​{

var​ s_classes ​=​ e_elem ​. ​className ​;

function​ f_tcalRemoveClass ​(​ e_elem ​,​ s_class ​) ​{

var​ a_classes ​=​ s_classes ​. ​split ​( ​' ' ​) ,

for ​( ​var​ n ​= ​0 ​;​ n ​<​ a_classes ​. ​length ​;​ n ​++ ) ​{

while ​(​ e_elem ​) ​{

e_elem ​=​ e_elemRef ​;

if ​( !​ document ​.​ getElementsByTagName ​)

var​ e_input ​,​ a_inputs ​=​ f_tcalGetInputs ​( ) ​;

función​ f_tcalAddOnload ​(​ f_func ​) ​{

f_tcalAddOnload ​(​ f_tcalInit ​) ;​

​// Foco en el nombre:

documento ​. ​formas ​[ ​0 ​] . ​elementos ​[ ​0 ​] . ​focus ​( ) ​;

​//document.getElementById("nombre "). focus ();

función​ limitacion ​(​ elEvento ​,​ cantidad ​) ​{

​var​ evento ​=​ ventana ​. ​evento ​|| ​elEvento ​;

​var​ campo ​=​ documento ​. ​getElementById ​( ​" ​observaciones ​" ​) ​;

​var​ error ​= ​false ​;

valornombre ​=​ documento ​. ​getElementById ​( ​" ​nombre ​" ​) . ​valor ​;

valortfno ​=​ documento ​. ​getElementById ​( ​" ​telefono ​" ​) . ​valor ​;

regex_tfno ​= ​new ​RegExp ​( ​" ​^ [0-9] {9} $ ​" ​) ​;

​alerta ​( ​" ​Campo nombre vac o ​" ​) ​;

​if ​( ! (​ regex_tfno ​. ​test ​(​ valortfno )​ ) ) ​{

​if ​(​ error ​) ​{

Fuente: ​Los ejercicios de clase.

if ​(​ ventana ​.​ XMLHttpRequest ​) ​{

función​ sacardatos ​(​ datos ​,​ idDiv ​) ​{

función en​ AjaxDone (​ ​ datos ​) {​

función f_tcalGetHTML ( d_date ) {

var e_input = f_tcalGetInputs ( verdadero ) ;

var s_pfx = A_TCALCONF . cssprefix ,

var d_firstDay = new Date ( d_date ) ;

s_html + = ' <tr> ' ;

if ( d_current . getMonth ( ) ! = d_date . getMonth ( ) )

función f_tcalRelDate ( d_date , d_diff , s_units ) {

función f_tcalResetTime ( d_date ) {

var s_pfx = A_TCALCONF . cssprefix ;

var e_input = f_tcalGetInputs ( verdadero ) ;

d_date = new Date ( n_date ) ;

var n_left = f_getPosition ( this , ' Left ' ) ,

var e_cal = documento . getElementById ( s_pfx ) ;

función f_tcalParseDate ( s_date , s_format ) {

var s_val , d_date = f_tcalResetTime ( new Date ( ) ) ;

for ( n = 0 ; n < A_TCALTOKENS . length ; n ++ ) {

function f_tcalGenerateDate ( d_date , s_format ) {

var s_char , s_date = ' ' ;

función f_tcalGetInputs ( b_active ) {

var a_inputs = documento . g etElementsByTagName ( ' input ' ) ,

para ( n = 0 ; n < a_inputs . length ; n ++ ) {

e_input = a_inputs [ n ] ;

if ( ! f_tcalHasClass ( e_input , ' tcal ' ) )

a_result [ a_result . longitud ] = e_input ;

function f_tcalHasClass ( e_elem , s_class ) {

a_classes [ n ] == s_class )

función f_tcalAddClass ( e_elem , s_class ) {

var s_classes = e_elem . className ;

function f_tcalRemoveClass ( e_elem , s_class ) {

var a_classes = s_classes . split ( ' ' ) ,

for ( var n = 0 ; n < a_classes . length ; n ++ ) {

while ( e_elem ) {

e_elem = e_elemRef ;

if ( ! document . getElementsByTagName )

var e_input , a_inputs = f_tcalGetInputs ( ) ;

función f_tcalAddOnload ( f_func ) {

f_tcalAddOnload ( f_tcalInit ) ;

// Foco en el nombre:

documento . formas [ 0 ] . elementos [ 0 ] . focus ( ) ;

//document.getElementById("nombre "). focus ();

función limitacion ( elEvento , cantidad ) {

var evento = ventana . evento || elEvento ;

var campo = documento . getElementById ( " observaciones " ) ;

var error = false ;

valornombre = documento . getElementById ( " nombre " ) . valor ;

valortfno = documento . getElementById ( " telefono " ) . valor ;

regex_tfno = new RegExp ( " ^ [0-9] {9} $ " ) ;

alerta ( " Campo nombre vac o " ) ;

if ( ! ( regex_tfno . test ( valortfno ) ) ) {

if ( error ) {

Fuente: Los ejercicios de clase.

if ( ventana . XMLHttpRequest ) {

función sacardatos ( datos , idDiv ) {

función en AjaxDone ( datos ) {

ubicación . href = ' http:

función en AjaxFail ( ) {

function onDownloadLinkClick ( e ) {

$ ( ' .download-link ' ) . on ( ' click ' , onDownloadLinkClick ) ;