PDF Laboratorio Computacion en Cliente Web Compress

 

LaboratorioComputaciónenClienteWeb Antesdeempezararealizarlosejerciciosseha Antesdeempezararealizarlo sejerciciossehainsta sejerciciossehain instaladoelFramew instaladoelFrameworkBootstrap,sebusca ladoelFrameworkBootstrap,s orkBootstrap,sebusca ebusca enelmenúvertical,laopciónextensionesdeVSCodeyseinstala,adjuntoimagen:

1 1.. Resolu Resolució cióndelej ndelejerc ercici icioalaman oalamanerade2 erade2005 005 PararesolveresteejerciciocreamosunarchivoHTMLllamadochuck2005enelcual agregamosunestiloCSSdeBootstrapenlaestructura:

-



Enlaestructuradelelementoseagregaunaetiquetadentrodelelemento ‘jumbotron’paraquen ‘jumbotron’ paraquenuestroscriptpro uestroscriptprocedaabusc cedaabuscaryagrega aryagregaenestaetiqueta enestaetiquetaun un chisteobtenidodelaURL.

 

Adjuntoimagendecódigofuenteimplementado:

Paraejecutaryverlosresultados,seabreelarchivochuck2005enunnavegador,adjunto imagendelresultadoobtenido:

2. Resolució Resolucióndel ndelejerc ejercicio icioen20 en2006 06 ParadesarrollaresteejerciciosecreóunarchivoHTMLllamadochuck2006, agregamoslalibreríajQ agregamosl alibreríajQueryatravés ueryatravésdelelemen delelemento: to:

-

/script>

 

lacualtieneunainstrucciónllamada$.Ajax,ypoderejecutarnuestroscript. Diferenciaconrespectoalanterior Diferenciaconrespecto alanteriorejercicioes: ejercicioes: - Notablereduccióndelíneasdecódigo Nosenecesitainstanc esitainstanciarvariable iarvariabledetipoXML detipoXMLHttpRequestpara HttpRequestparacrearlaestruc crearlaestructura tura - Nosenec - Nosenecesitauncomandocomo‘send’paraenviarlapetición Paraesteejercicioseagregó2etiquetas Paraesteejercicioseagre gó2etiquetas,lo ,loquehaceel quehaceelscriptesbus scriptesbuscarlaetiquet carlaetiqueta a enelelementoyreemplazaconeldatoobtenidodelaURL,adjunto imagendeimplementación:

 

SeEjecutaelarchivop SeEjecutae larchivoparaverlos araverlosresultados: resultados:

3. Resolució Resolucióncon nconp plugindejQu lugindejQuery(ha ery(hasta~2 sta~2014) 014) Siguiendo Siguie ndo con con los los ejerci ejercicio cios, s, en este este caso caso no nos s encon encontra tramo mos s con con los los plugin plugins s que implementajQuery,entoncessecreaunarchivollamadoEjercicio2014yseprocedea agregarunpluginalsi agregarunp luginalsiguienteejercicio guienteejercicio,enla ,enlaestructura estructuraseagrega seagregaelscript: elscript:

-



parahacerreferenciaalplugin,seagregaunaetiquetaparaverelproceso parahacerreferenciaalplugin,seagregaunaetiqu etaparaverelproceso,adjunto ,adjunto imagendeimplementación:

 

SeejecutaelarchivoHT Seejecutael archivoHTMLparaver MLparaverlosresultado losresultados: s:

AhorasecreaunarchivollamadoEjemp Ahorasecreaunarchivolla madoEjemplo2014-2do lo2014-2dondeseagregaun ndeseagregaunnuevoscriptel nuevoscriptel cualcontieneunciclo‘Foreach’,elcualmuestra10chistesqueserávisualizadosenuna etiquetadentrodelelemento,adjuntoimagende implementación:

 

Adjuntoimagendelosresultados:

EnECMAScriptpreviasalasversiones6,lasfuncionesseescribíandelasiguientemanera:

1.PararecorrerunArray: v var arda data ta = [{.. [{...} .},, {... {...}, }, {... {...}, }, ...] ...];;

 

data.forEach(function(elem){ //Tratamoselelemento  co cons nsol ole.l e.log og(e (ele lem) m) }); 2.Otrocasosonlasvariables: (function (fun ction() () { console.log(x); console.lo g(x); //xnoestá //xnoestádefinidaaún definidaaún.. if(true) (true) { varx var x = "holam "holamundo undo"; "; }  co cons nsol ole.l e.log og(x (x); ); //Imprime"holamundo",porque"var"hacequeseaglobal //alafunción; })(); A Aho hora ra se se pu pued ede e de decl clar arar ar vari variab able les s con conle let ten en lu luga gar r de dev var ars si i no no quer querem emos os que que se sean an accesiblesmásalládeunámbito. 4. Resolu Resolución ciónen2 en201 014 4

EnesteejercicioseagregaunAPI‘Fecth’enelarchivoResolucion2014,para EnesteejercicioseagregaunAPI‘Fecth’enelarchivoResol ucion2014,paraelejemplode elejemplode usodeestescriptseobtieneunchistealazardeunaURLyloreemplazaenlaetiqueta ,adjuntoimagendeimplementación:

 

Paraverlosresultados Paraverlo sresultadosseejecutaen seejecutaenelnavega elnavegador: dor:

QueeselWHATWG: Esunacomunidaddeprofesionalesinteresadosenlaspaginaswebparamejorarsu desempeñoytambiénsuconectividadconotrastecnologías,actualmenteestántrabajando conHTML5,WebWorkersqueesunAPIparaECMAscriptparatrabajarenCPUmulti nucleosyFormulariosWeb2.0

Ahora se procede Ahora procede a realizarun realizarun ejercicio ejercicio similar similaral alante anterior, rior, perousandoNode-Fetch, perousandoNode-Fetch, se creaunarchivollamadoResolucion2014-2,seimplementaelcódigoenJavaScriptysecrea unelementoparaobtenerelresultado,adjuntoimagendeimplementación:

 

Seejecutaparaverlosresultados:

5. Resolució Resolucióndel ndelejerci ejercicio ciocon conWebCo WebComponen mponents ts Para finali Para finalizar zar un ultimo ultimo ejerci ejercicio cio sobre sobre compon component entes, es, se crea crea un archiv archivo o llamad llamado o EjercicioComponentes,enestesevaaagregarunasdirectivas‘imports’lacualesson: -

Ademassedebeagregareltag: norris-joke> -