[Programació web] PAC 1

Estudis d’Informàtica, Multimèdia i Telecomunicacions

Grau de multimèdia Programació web Jordi Llonch Esteve

Per a dubtes i aclariments sobre l’enunciat, adreceu-vos al consultor responsable de la vostra aula.

Cal lliurar la solució en un fitxer doc. Adjunteu el fitxer a un missatge adreçat a la bústia Lliurament i registre d’AC.

El nom del fitxer ha de ser CognomsNom_PW_PAC1 amb l’extensió .doc.

Consulteu la data de lliurament al calendari. PAC1 Teòrica 1.- Explica cadascun dels components del sistema d'adreçament URL. Una URL està formada per:

protocol://servidor[:port][/camí][?consultes][#fragment_de_pàgina] Protocol: És el format en què s’intercanvien les dades entre el navegador del client i el servidor. Alguns de coneguts són:

http: accés al Web https: accés segur al Web ftp: transmissió d’arxius file: execució d’arxius locals telnet: execució d’aplicacions de manera remota mailto: enviament de correus electrònics mitjançant el protocol SMTP imap: accés a la bústia de correu pop: accés a la bústia de correu news: intercanvi de llistes de notícies gopher: organització jeràrquica de llistes d’arxius im: intercanvi de missatges instantanis sip: enviament de veu a través d’IP (VoIP)

Servidor: És el nom de domini o IP de la màquina de destí. Està format per dues o tres parts: el nom de servidor i el domini i/o subdomini:

Nom de servidor: nom o IP de la màquina de destí. Per exemple, uoc, google, etc. Domini: lletres finals del domini que apareixen precedides per un punt. Ja sigui,

.com, .net, .cat, etc. Subdomini: nom que precedeix el domini. S’utilitza en cas de voler disposar de

vàries pàgines relacionades en un sol domini. Per exemple, bloc.domini.com i fòrum.domini.com.

Port: És el número que s’utilitza per controlar l’usuari al servidor. N’hi ha alguns d’específics per a certes operacions i d’altres que es poden modificar per part de l’usuari. Alguns dels que ja estan establerts són: El 80 per http, el 443 per https, el 21 i 21 per ftp i el 23 per telnet. Camí: Indica la ruta que s’ha de seguir per localitzar l’objecte sol·licitat. Pot estar format per un objecte en el directori arrel o pot ser que aquest estigui ubicat dins d’una carpeta ubicada dins d’una altra carpeta. En aquest cas, el camí estarà format per la ruta de carpetes que hi ha entre el directori arrel i l’objecte en qüestió. Aquestes carpetes se separaran entre sí pel símbol “/” fins arribar a l’objecte. Si no escrivim cap camí i només escrivim el nom del servidor, en una pàgina Web, el servidor buscarà l’arxiu predeterminat de pàgina d’inici, que sol ser l’“index.html” o l’“index.php”, a no ser que l’haguem canviat. En cas de no tenir cap pàgina d’inici predeterminada, es mostrarà una llista de carpetes amb els seus corresponents arxius. La part final del camí és un objecte, ja sigui un document html, php o qualsevol tipus d’arxiu. Els navegadors actuals poden mostrar una gran quantitat de fitxers i en cas de què el navegador no sigui capaç de reproduir-ne algun, es descarregarà al disc dur per ser visualitzat mitjançant el programa necessari. Consultes: Són els paràmetres que s’envien des del navegador a un servidor per a fer funcionar una aplicació web o programa allotjat al servidor. Quan s’accedeix a una pàgina web utilitzant una consulta, el servidor inicialitza el programa enviant la consulta al programa en si. Comencen pel caràcter “?”. Fragment de pàgina: És un accés directe a una part específica d’una pàgina en el moment en que aquesta es carrega. El navegador s’encarrega de buscar-lo. S’utilitza el marcador “anchor” per a definir cada fragment que es vulgui crear. Comença pel caràcter “#”.

2.- Es possible retornar més d'un valor mitjançant una funció? Posar-ne exemples Per definició una funció pot retornar des de zero fins a més d’un valor. En cas de no retornar cap valor, retornarà el valor “undefined”. D’altra banda, en cas de voler retornar-ne un o més podem fer-ho mitjançant funcions condicionals o iteratives, com les dels següents exemples: Aquesta funció serveix per saber si és el matí o la tarda introduint l’hora que sigui:

function dia(hora){ if (hora >= 12) { return “tarda”;

} else {

return “matí”; }

} Aquesta funció serveix per imprimir la taula de multiplicar de qualsevol número:

function taula_de_multiplicar (numero){ for (var i = 0; i < 11; i++){

return numero “ * ” + i + “ = ” + i * numero + “<br/>”;

} }

3.-Explica els principals avantatges i inconvenients d'incrustar o vincular el codi Javascript a una pàgina web Igual que s’ha explicat en altres assignatures com “Programació” o “Llenguatges i estàndards web”, els codis com el Javascript poden incrustar-se en una mateixa pàgina Web o vincular-se mitjançant arxius externs (.js). Els avantatges i inconvenients de cada mètode són:

Incrustar

Avantatges

Per aplicacions en pàgines Web petites i senzilles permet accedir al codi ràpidament editant directament el document HTML de la mateixa pàgina Web.

Inconvenients

El codi està visible sempre, així que en cas que vulguem ocultar-lo no serà possible. Per aplicacions en pàgines Web més grans en dificulta el manteniment i actualització, ja que el codi està escrit enmig del document HTML. Això també dificulta la lectura i la localització eficient del que es busca.

Vincular Avantatges

Permet ocultar el codi inicialment. En cas que l’usuari sigui una mica expert, el podrà visualitzar, però no està completament visible com en cas d’incrustar-ho. Per aplicacions en pàgines Web amb molt de codi en facilita el manteniment i actualització, ja que aquest se situa en un sol document separat de la pàgina Web.

Inconvenients Podria ser poc útil en cas de necessitar només una o dues línies de codi, ja que en aquest cas seria més eficient incrustar.

4- Quines són les principals diferències entre els llenguatges de marques (markup languages) i els llenguatges de programació? Es poden barrejar en algun moment a les pàgines web? Tal com diu als apunts: “un llenguatge de marques té com a objectiu definir el contingut o l’estructura d’un document, però no el format o l’aparença.” Els llenguatges de marques no són llenguatges de programació, ja que no existeixen les funcions ni les variables, característiques pròpies de qualsevol llenguatge de programació. És a dir, un llenguatge de marques és una forma de codificar un document mitjançant marques o etiquetes que afegeixen informació addicional sobre el disseny i l’estructura del text. Antigament, el marcat s’emprava en la indústria editorial. Aquest estava format pels símbols de puntuació i d’estil, com poden ser els dos punts, els interrogants, els sagnats, les majúscules, etc. Els llenguatges de programació s’escriuen mitjançant instruccions que han de ser interpretades per una màquina o compilador, cosa que no és necessària en els llenguatges de marques, ja que enlloc d’instruccions hi ha etiquetes i aquestes són interpretades pel propi navegador. Normalment una pàgina web està escrita íntegrament en llenguatges de marques, com l’HMTL, però és molt comú trobar-hi fragments de llenguatges de programació, com ara el Javascript o el PHP. Això es fa perquè tant un tipus de llenguatge com l’altre estan limitats per les seves característiques i, a vegades, es necessita que una pàgina Web realitzi accions que només serien possibles mesclant aquests dos tipus de llenguatges. Com s’ha comentat en la pregunta anterior hi ha dues formes d’afegir un llenguatge de programació com el Javascript en una pàgina Web, incrustant o vinculant.

Pràctica 1.- Programar una funció que rebi 3 paràmetres: mínim, màxim, i nombre de decimals. La funció ha de generar un nombre aleatori entre el mínim i el màxim amb el nombre de decimals indicat. Preparar una pàgina html que permeti cridar-la tantes vegades com es vulgui i no repeteixi mai els nombres generats. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-utf-8"> <title>PAC 1: Pràctica 1</title> <script type="text/javascript"> <!-- var nombres=new Array(); function aleatori(min, max, decimals) { min = Number(min); max = Number(max); decimals = Number(decimals); if(min >= max) { alert("El número màxim ha de ser més gran que el número mínim"); } else { var bool=true; var resultat = Math.random() * (max - min) + min; while (bool == true) { resultat = resultat.toFixed(decimals); bool = existeix(resultat); } document.formulari.resultat.value = resultat; } } function existeix(resultat2) { for (var i=0; i<nombres.length; i++) { if(nombres[i]==resultat2) { return true; } else { nombres.push(resultat2); }

} return false; } //--> </script> </head> <body> <h3>1-Programar una funció que rebi 3 paràmetres: mínim, màxim, i nombre de decimals. La funció ha de generar un nombre aleatori entre el mínim i el màxim amb el nombre de decimals indicat. Preparar una pàgina html que permeti cridar-la tantes vegades com es vulgui i no repeteixi mai els nombres generats.</h3> <form name=formulari> Número mínim: <input name=un type=text size=6><br/> Número màxim: <input name=dos type=text size=6><br/> Núm. decimals: <input name=tres type=text size=6><br/> <input type=button value="Genera nombre aleatori" onclick="aleatori(un.value,dos.value,tres.value)"><br/> Resultat: <input name=resultat readonly type=text size=18> </form> </body> </html> 2- Escriu un script que demani el nombre de paràmetres d'una funció, desprès demani un valor per cada paràmetre, cridi la funció, i mostri la seva suma. Nota: La dificultat de l'exercici està en passar a una funció un nombre no constant de paràmetres. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-utf-8"> <title>PAC 1: Pràctica 2</title> <script type="text/javascript">  </script> </head> <body> <h3>2- Escriu un script que demani el nombre de paràmetres d'una funció, desprès demani un valor per cada paràmetre, cridi la funció, i mostri la

seva suma. Nota: La dificultat de l'exercici està en passar a una funció un nombre no constant de paràmetres.</h3> <script type="text/javascript">  </script> </body> </html>

3.- Programar una funció recursiva que retorni cert o fals si una paraula és palíndroma. Explicar l’algorisme utilitzat i dibuixar la pila de les crides per una paraula de 5 lletres. <!DOCTYPE html PUBLIC "-//W3 C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-utf-8"> <title>PAC 1: Pràctica 3</title> <script type="text/javascript">  </script> </head> <body> <h3>3.- Programar una funció recursiva que retorni cert o fals si una paraula és palíndroma. Explicar l’algorisme utilitzat i dibuixar la pila de les crides per una paraula de 5 lletres.</h3> <input type="button" onclick="entradadades()" value="Introduir

dades" /> </body> </html> Per a verificar si una paraula és o no un palíndrom he emprat un botó que crida la funció entradades(), que s’encarrega de crear les variables que s’utilitzaran al programa.

Mitjançant un “prompt” es crea la variable “paraula”. La variable “limEsq” és el primer valor de la variable “paraula”, és a dir, 0. La variable “limDret” és l’últim valor de la variable “paraula”, és a dir, la longitud

d’aquesta menys 1, ja que la primera posició es comptabilitza com a 0. La variable “resultat” servirà per emmagatzemar si la funció espalindroma(paraula,

limEsq, limDret) és certa o no. La funció espalindroma(paraula, limEsq, limDret) farà les següents comprovacions:

En cas que “limEsq” sigui més gran que “limDret”, la paraula comprovada serà un palíndrom, així que retornarà cert.

En cas que “limEsq” no sigui més gran que “limDret”, es realitzarà la següent comprovació:

o Si el primer caràcter de la variable “paraula” és el mateix que l’últim, es cridarà novament la funció espalindroma(paraula, limEsq, limDret). Es farà tantes vegades fins que els caràcters no siguin iguals.

o En el cas de que els caràcters no siguin iguals, es retornarà “fals”. Si la variable “resultat” és certa, s’obrirà una finestra que comunicarà que la paraula introduïda per l’usuari és un palíndrom. Si no ho és, es comunicarà que no és un palíndrom. Pila de crides per la paraula “RADAR”: Suposant que:

RADAR limEsq = 0 limDret= 5 if 0 > 5 fals if “R” = “R”:

if 0+1 > 5-1 fals if “A” = “A”:

if 1+1 > 4-1 fals if “D” = “D”:

if 2+1 > 3-1 cert return true.

[Programació web] PAC 1

Documents

Transcript of [Programació web] PAC 1