class: center, middle, inverse # Llenguatges de marques ### Json .footnote[Mateu Yábar] --- # Json - _Javascript object notation_ - Llenguatge de marques extensible - Llenguatge descriptiu o semàntic --- # Usos del Json - Llenguatge més usat per la transmissió de dades entre ordinadors - Ja fa uns anys que ha guanyant molt de pes respecte el XML --- # Valor - Text (entre cometes) ``` "Pere Martí" ``` - Número (pot ser decimal o enter) ``` 29.24 ``` - Booleà ``` true ``` - null ``` null ``` --- # Objecte ``` {"atribut": valor, "atribut2": valor2 ...} ``` ``` {"nom": "Pere Martí", "edat": 29, "adult": true} ``` --- # Arrays ``` [valor1, valor2, valor3] ``` ``` ["groc", "verd", "vermell"] ``` --- # Format - Els espais i salts de linia no són relevants. - Els dos json seguents són equivalents ``` { "nom": "Pere Martí", "adreça": { "carrer": "Av Diagonal", "numero": 23, "ciutat": "Barcelona" } } ``` ``` {"nom": "Pere Martí", "adreça": {"carrer": "Av Diagonal", "numero": 23, "ciutat": "Barcelona"}} ``` --- # Exemples Objecte amb un objecte ``` { "nom": "Pere Martí", "adreça": { "carrer": "Av Diagonal", "numero": 23, "ciutat": "Barcelona" }} ``` --- # Exemples Array d'objectes ``` [ {"nom": "Pere Martí", "edat": 25}, {"nom": "Alba Puig", "edat": 66} ] ``` --- # Exemples ``` { "estudiants":[ {"nom": "Pere Martí", "edat": 25}, {"nom": "Alba Puig", "edat": 66} ], "professors":[ {"nom": "Carla Martí", "edat": 39}, {"nom": "Ona Roca", "edat": 21} ] } ``` --- class: long_code # Exercicis .long_text[ - Fes un json que guardi la següent informació (un json per cada ítem) - L'alumne Joan Garcia, nascut el 24 de febrer de 2001, nascut a Barcelona. - El llistat d'establiments següents. El Bar Pasqual es un bar de tapes a l'avinguda diagonal 232 propietat de Joan Alcover. El restaurant Meravelles es un restaurant de menú a Meridiana 111 propietat de Maria Pasqual. El restaurant racó de l'Avia és un restaurant de menú a Av Roma 221 propietat de Alba Puig. - Llistat d'obres d'art d'un museu: Blau sobre blanc és un quadre abstracte de Pere Àguila del 2014 fer a l'oli. Gris obscur és un quadre abstracte de Pere Àguila del 2010 fet a aquarel·la. Camí llarg és una escultura de Marta Lambert del 1981 de marbre.] --- # Exercicis 2 Fes un json que guardi les següents cites de personalitats. - Alba Casamitjana, diu a Parets del Vallès "M'encanta el Pans&Company". - Joana Puig, diu a Mollet "Si x>y, y>z i z<q, es q>x". --- # Exercici 3 Crea un document json que contingui la mateixa informació que el següent xml .long_text[```xml <widget> <debug>on</debug> <window title="Sample Konfabulator Widget"> <name>main_window</name> <width>500</width> <height>500</height> </window> <image src="Images/Sun.png" name="sun1"> <hOffset>250</hOffset> <vOffset>250</vOffset> <alignment>center</alignment> </image> <text data="Click Here" size="36" style="bold"> <name>text1</name> <hOffset>250</hOffset> <vOffset>100</vOffset> <alignment>center</alignment> <onMouseUp> sun1.opacity = (sun1.opacity / 100) * 90; </onMouseUp> </text> </widget> ```] --- # Exercici 4 El següent json ens dona informació del bicing de barcelona http://wservice.viabicing.cat/v2/stations Indica: - El carrer on hi ha la estació amb id 33 - Quantes bicicletes hi ha acualment a l'estació a Girona 68? --- # Exercici 5 - Crea un json que guardi informació de receptes de cuina - Com a mínim hi ha d'haver dues receptes - Com a mínim hi ha d'haver 4 nivells d'etiquetes