Gmultimdia

rau

JAVASCRIPT: ESTRUCTURES BSIQUES

Jaume Villarreal Quintana

PAC1

programaci web

PROGRAMACI WEB

PAC1

Descriu el principal s que es donen als operadors lgics. Per a cadascun dells inclou un exemple ds.
Els operadors lgics, tamb anomentats operadors booleans per basarse en llgrebara de Boole, sn operadors dels quals tan sols sen pot obtenir dos possibles resultats: true o false. NOT - ! Operador unari, tan sols es pot aplicar a un nic operand. Sutilitza per canviar el valor de cert a fals. Exemple Declarem la variable play amb el valor true: var play=true. En un moment donat del desenvolupament de lalgorisme volem que una estructura condicional valori si en algun moment el valor de la variable sha modificat. Per fer-ho farem: if(!play){...}.

AND - && Operador que, a diferncia de NOT, es pot aplicar a dos operands o ms. La seva funci es basa en comprovar que totes les comparacions que cont sn certes. En cas contrari retornar false. Exemple Volem controlar el flux dun algorisme amb una estructura condicional. Aquesta estructura noms permetr executar les sentncies que cont si es compleixen dues condicions. Per fer-ho caldr emprar un operador AND: if(x==1 && y<=5){...}.
-2Grau en Multimdia

PROGRAMACI WEB

PAC1

OR - || Operador que, de manera anloga a AND, es pot aplicar a dos operands o ms. La seva funci es basa en comprovar que alguna de les comparacions que cont sn certes. En cas que totes siguin falses retornar false. Exemple Volem controlar el flux dun algorisme amb una estructura condicional. Aquesta estructura permetr executar si una de les dues sentncies que cont s certa. Per fer-ho caldr emprar un operador OR: if(x==1 || y<=5){...}.

-3Grau en Multimdia

PROGRAMACI WEB

PAC1

JavaScript t disponible dues estructures de control condicionals. Cadascuna daquestes t unes propietats que les fan ms apropiades per a distintes necessitats. Explica aquestes caracterstiques amb un exemple ds de cadascuna.

Estructures condicionals IF
Les estructures condicionals controlades per un IF avaluen una condici donada per poder realitzar lacci que t adjudicada. Les seves possibilitats sn mplies ja que alhora que cont una acci en cas que es compleixi la condici, tamb permet establir accions en el cas en qu aquestes condicions no es compleixin. Aix saconsegueix amb lestructura IF...ELSE. En aquest sentit, lestructura permet introduir ms condicionals en lhipottic cas que el primer condicional es compleixi, fet que permet avaluar parts de lalgorisme de manera descendent, arribant a lacci establerta noms si es compleixen una sria de condicions encadenades. Aix saconsegueix amb lestructura IF...ELSE IF...ELSE. EXEMPLE
var num = document.getElementById(numInput).value; var play = true; if(play){ if(num>=5 && num<=1){ if(num==1){ alert(NECESSITA MILLORAR); } else if(num==2){ alert(NECESSITA AJUDA); } else if(num==3){ alert(ACCEPTABLE);

-4Grau en Multimdia

PROGRAMACI WEB

PAC1

} else if(num==4){ alert(B); } else if(num==5){ alert(MOLT B); } play=false; } else{ alert(Recarrega la pgina i introdueix una altra nota.); }

Estructures condicionals SWITCH

Les estructures condicionals controlades amb SWITCH permeten avaluar una variable amb una srie de valors, de manera que tan sols sexecutaran les sentncies contingudes en el valor que sigui coincident amb la variable establerta com a condici. Els diferents valors que cont lestructura es declaren amb CASE i saturen amb BREAK un cop han estat executades. Aix assegura la resta de sentncies contingudes en lestructura no sexecutaran. La sintaxi bsica s la segent:
switch (variable){ case valor1 {...} break; case valor2 {...} break; ...................................... case valorN {...} break; }

-5Grau en Multimdia

PROGRAMACI WEB

PAC1

EXEMPLE
var num = document.getElementById(numInput).value; switch (num){ case 1{ alert(NECESSITA MILLORAR); } break; case 2{ alert(NECESSITA AJUDA); } break; case 3{ alert(ACCEPTABLE); } break; case 4{ alert(B); } break; case 5{ alert(MOLT B); } break; }

-6Grau en Multimdia

PROGRAMACI WEB

PAC1

La sentncia with pot ajudar a simplificar el codi JavaScript en certes estructures. Identifica amb dos exemples diferents aquesta possibilitat.
Tal i com es descriu en lenunciat, la sentncia with permet agrupar una srie de sentncies que facin referncia a un mateix objecte, fet que permet simplificar el codi. EXEMPLES Volem adjudicar a un objecte tota una srie despecificacions destil. Enlloc dassignar-los de manera individual els assignem tots alhora emprant with.
with(document.getElementById(inputForm).style){ width: 20em; border: 1px solid #999; margin: 1em auto; padding: .5em ; font-size: .85em; background-color: #F2F2F2; }

Volem adjudicar text de manera dinmica a un objecte alhora que el fem visible.
with(document.getElementById(inputForm)){ style.visibility=visible; innerHTML=El contenidor ara s visible; }

-7Grau en Multimdia

PROGRAMACI WEB

PAC1

Respon cert o fals a les segents afirmacions sobre les funcions en el llenguatge JavaScript.
Una funci pot tenir varis parmetres distints. Una funci pot tenir varis valors de retorn. CERT FALS

Una funci pot contenir diverses setncies de retorn, per noms retornar un valor, tal i com es pot observar en el segent exemple: function nombreMenor(n1,n2){ if(num1<num2){ return true; else{ return false; } }

Els parmetres duna funci son variables globals.

FALS

Els parmetres duna funci sn dades dentrada que la funci requerir per realitzar i executar les sentncies que cont.

Una funci local emprar variables globals per ser cridada.

FALS

Lmbit ds duna funci local es limita a lmbit de la funci que el cont, contrriament al que passa amb una funci global.

-8Grau en Multimdia

PROGRAMACI WEB

PAC1

Escriu un algorisme en JavaScript que donat un nmero dentrada, retorni els nombres primers menors al passat com a parmetre dentrada.
<html> <head> <title>PW: PAC1-ex.5</title> <link rel=stylesheet href=estils_PAC_01_PW.css type=text/css media=screen /> <script> var mainArray = new Array(); var play=true; function mainFunction(numInput){ var num = parseInt(numInput.value); var counter=0; var text = Els nombres primers ms petits que + num + sn: +<br/>+ 2 3 ; var textB = Els nombre primer ms petits que + num + s: +<br/>+ 2; if(play){ if(num==1){ alert(Cal introduir un nombre igual i ms gran que \2\.); } else if(num==2){ alert(El 2 no t cap nombre primer ms petit.); }else if(num==3){ play=false; with(document.getElementById(caixaText)){ style.visibility=visible; innerHTML=textB; }

-9Grau en Multimdia

PROGRAMACI WEB

PAC1

}else if(num==4 || num==5){ play=false; with(document.getElementById(caixaText)){ style.visibility=visible; innerHTML=text; } } else{ play=false; for(i=5; i<num; i++){ var squareRoot=Math.floor(Math.sqrt(i)); for(j=2;j<=squareRoot;j++){ var modul = i%j; if(modul==0){ counter++; } } if(counter==0){ mainArray.push(i); } counter=0; } for(i=0; i<mainArray.length; i++){ text+= +mainArray[i]+; } with(document.getElementById(caixaText)){ style.visibility=visible; innerHTML=text; } } } else{ alert(Refresca la pgina per comenar de nou.); } } </script> </head>

- 10 Grau en Multimdia

PROGRAMACI WEB

PAC1

<body> <div id=contenidor> <img src=images/top.png alt=Programaci Web /> <div class=caixaExterior> <p>Donat un nmero dentrada, crea un algoritme que retorni els nombres primers menors al passat com a parmetre dentrada.</p> <form onsubmit=mainFunction(entradaForm); return false;> <input id=entradaForm type=text name=nombreIntrodut required> <input id=submitForm type=submit value=Troba els nombres primers> </form> <img style=position:absolute; right:45%; top:8; src=images/isotip_UOC_web.jpg alt=UOC - Universitat Oberta de Catalunya /> <div id=caixaText></div> </div> </div> </body> </html>

- 11 Grau en Multimdia

PROGRAMACI WEB

PAC1

Desenvolupeu una funci recursiva que retorni cert o fals si una paraula s palndroma (la paraula sintroduir mitjanant un prompt). Heu dexplicar lalgorisme utilitzat i dibuixar la pila de les crides per una paraula de 5 lletres.
Per desenvolupar aquest algorisme sha creat la funci Palndrom amb els parmetres (cadena, posLeft, posRight), on: cadena recull la cadena de text introduda a la finestra modal; posLeft s un valor numric que marcar la posici inicial; posRigth s un valor numric que marcar la posici final. ALGORISME
<script> function Palindrom(cadena, posLeft, posRight){ /*=========================== La primera sentncia estableix un criteri condicional que controla el final de la funci, evitant que sexecuti de manera indefinida. En aquest moment comprova la primera condici: cada cop que la funci es crida a ella mateixa incrementa el valor posicional de lesquerra i decrementa el de la dreta. Si el valor de posLeft s ms gran que el valor de posRight sha recorregut de manera recursiva i satisfactria tota la cadena i la funci finalitza. ===========================*/ if(posLeft>=posRight){ return true; } /*=========================== Si la primera condici no es compleix accedim a un altre condicional. Si el valor de la cadena a posLeft s igual que el valor de la cadena a posRight la funci es crida a ella mateixa variant el valor dels parmetres numrics. Daquesta manera torna a iniciar el procs. Si aquesta condici no es compleix la paraula no s un palndrom i retorna false.===========================*/ else{ if(cadena[posLeft]==cadena[posRight]){ return Palindrom(cadena, posLeft+1, posRight-1); } else{ return false; } }

} </script>

- 12 Grau en Multimdia

PROGRAMACI WEB

PAC1

PILA DE CRIDES PER A LA PARAULA RADAR

if(posLeft>=posRight){return true;}

Comprova que el valor posicional de lesquerra sigui ms gran o igual que el de la dreta. En aquest cas els parmetres contenen els valors 0 i 4 respectivament. No es compleix la condici.
else{ if(cadena[posLeft]==cadena[posRight]){ return Palindrom(cadena, posLeft+1, posRight-1); } else{ return false; } }

Comprova que el valor inicial de cadena[0] sigui igual que el valor de cadena[4]. En aquest cas el valor inicial de la cadena s R i el valor final de la cadena s R. Com que la condici es compleix la funci es crida a si mateixa modificant els valors dels parmetres, que passen de ser 0 i 4 a ser 1 i 3.
if(posLeft>=posRight){return true;}

Comprova que el valor posicional de lesquerra sigui ms gran o igual que el de la dreta. En aquest pas els parmetres contenen els valors 1 i 3 respectivament. No es compleix la condici.

- 13 Grau en Multimdia

PROGRAMACI WEB

PAC1

else{ if(cadena[posLeft]==cadena[posRight]){ return Palindrom(cadena, posLeft+1, posRight-1); } else{ return false; } }

Comprova que el valor inicial de cadena[1] sigui igual que el valor de cadena[3]. En aquest cas el valor inicial de la cadena s A i el valor final de la cadena s A. Com que la condici es compleix la funci es crida a si mateixa modificant els valors dels parmetres, qua passen de ser 1 i 3 a ser 2 i 2.
if(posLeft>=posRight){return true;}

Comprova que el valor posicional de lesquerra sigui ms gran o igual que el de la dreta. En aquest pas els parmetres contenen els valors 2 i 2 respectivament. Ara es compleix la condici i la funci retorna true, doncs la paraula RADAR s un palndrom.
** Cal aclarir en aquest punt que la comparaci del condicional tamb hauria pogut ser (posLeft>posrRight), tot i que en aquest cas la funci shauria executat una vegada ms. Aix passa perqu les paraules amb una quantitat senar de lletres tindran sempre una lletra central que no ser necessari comparar. Aix es pot optimitzar el rendiment de la funci.

- 14 Grau en Multimdia