Avatar billede doughnut Nybegynder
24. februar 2014 - 15:37 Der er 9 kommentarer

Mangler hjælp til eksamensopgave i Javascript/HTML/CSS

Jeg er studerende og har fået stillet denne opgave og jeg synes den virker svær og har brug for hjælp til at lave den/komme i gang.
Jeg vælger ikke at bruge jQuery, og den JSON-fil jeg skal bruge ligger på en lukket hjemmeside, men den er vel ikke så vigtig.
Mit spørgsmål er, meget generelt, hvordan jeg skal gribe det hele an, men også hvordan jeg anvender denne JSON fil og hvordan min kode i javascript skal se ud.
Håber I kan hjælpe mig. Ethvert svar kan bruges :)
(Hvis svaret er godt vil jeg gerne give alle mine points (6255), men er ikke sikker på om det kan lade sig gøre dog, er ikke så aktiv herinde)

• Der skal laves en simuleret  musikafspiller i HTML/CSS og javascript/jQuery som kører i en 1 webbrowser på en enkelt hjemmeside (siglepage app). 


!

• Tag udgangspunkt i JSON-filen som findes på *slettet* og opbyg en passende model for et CD-objekt og et TRACK-objekt, således at en CD kan indeholde en mængde TRACKS


!

• Opret CD- og TRACK-objekter automatisk ud fra JSON-filen. JSON-filen skal ligge eksternt i projektet og må ikke sættes ind som en variabel i JavaScript.


!

• Det skal være muligt at vælge CD'er til afspilning, ud fra en liste af CD'er på siden, der viser hvilke CD'er der er til rådighed.


!

• Man skal kunne søge efter et bestemt track ud fra enten navnet på track'et eller ud fra kunstneren. En sådan søgning skal vise en liste med tracks der opfylder kriterierne, og herfra skal man kunne vælge hvilke der skal afspilles.


!

• Der skal vises en afspilningsliste, der viser de tracks der skal afspilles. Der skal kunne tilføjes både hele CD'er og enkelte tracks til listen. Det skal være muligt at rydde listen.


!

• Der skal opbygges en brugergrænseflade med knapper flg. knapper som man ville kunne finde på en musikafspiller:!

• Play - der starter en "afspilning  "!2

• Stop - der stopper en "afspilning"!

• Frem - der"afspiller" næste track fra listen!

• Tilbage - der "afspiller" forrige track fra listen!

• Shuffle - der blander afspilningslisten!

• Felt, der viser en liste over tracks der er sat til afspilning


!

• Al formatering skal ligge i en ekstern CSS-fil!

!

• Det er op til eksaminanden hvor og om der anvendes jQuery i projektet!

!


Simuleret betyder at der ikke skal afspilles egentlige musikfiler, men der skal blot vises titlen, fra 1 et TRACK-objekt i projektet, på skærmen. Musikafspilleren skal derfor heller ikke selv skifte track, dette gøres med frem/tilbage knapperne.
Avatar billede HBP2 Praktikant
24. februar 2014 - 19:54 #1
Hvis du vælger ikke at bruge jQuery eller moget lignende, så gøre du livet meget mere besværligt for dig selv. F.eks. kan JSON filen læses i jQuery med
  $.get(url, [], function(data) { ... }, 'json');
mens det taget adskillige linjer hvis du vil bruge det grimme XmlHttpRequest() kald i javascript.

Når du har ombestemt dig, så start med at finde ud af hvilke dialog bokse, ikoner og så videre der skal være, og lav HTMLen til dette.

Og til sidst - hvem i alverden har skrevet spørgsmålet? Det er fyldt med underlige tegn!
Avatar billede jakobdo Ekspert
24. februar 2014 - 21:12 #2
Jeg vil som HBP2 siger, klart anbefale jquery og så kig evt. på noget html5. Mener den har en "player" du kan bruge direkte. Og hvis ikke jeg husker helt forkert, har den også en playlist.
Avatar billede jakobdo Ekspert
24. februar 2014 - 21:13 #3
Fandt lige denne: http://jsfiddle.net/WsXX3/33/
Avatar billede keysersoze Guru
24. februar 2014 - 21:14 #4
Avatar billede jakobdo Ekspert
24. februar 2014 - 21:35 #5
#4 Fed side. :o)
Avatar billede doughnut Nybegynder
11. marts 2014 - 16:11 #6
Tak for svarene. Undskylder jeg svarer så sent...
Men hvordan benytter jeg jQuery og HTML5 med Eclipse? Skal jeg importere et jQuery-bibliotek til dette? Og mht. at bruge de de CD'er fra JSON, hvordan laver jeg et CD/TRACK-objekt som automatisk tager cd'erne og tracksne fra JSON?
Avatar billede keysersoze Guru
11. marts 2014 - 18:14 #7
Eclipse er ny information for os - er det dit eget valg eller?
Avatar billede HBP2 Praktikant
11. marts 2014 - 20:01 #8
Du kan vel sagtens bruge jQuery i Eclipse uden at gøre noget specielt, men så vil Eclipse bare ikke kende til hvilke funktioner der er i jQuery.
Du skal bare sørge for at loade jQuery biblioteket i HTMLen.

Du behøver ikke gøre så meget for at lave objekter ud fra JSONen - hvis JSON er organiseret rigtigt (dvs. hvis JSON indeholder associative arrays), så bliver det automatisk lavet om til objekter.
F.eks.: hvis du fra PHP (el. lign.) laver følgende:

$cds = array(
  0 => array("name" => "ABBAs Greatest",
            "artist" => "ABBA",
            "tracks" => array("Dancing Queen",
                              "Waterloo")),
  1 => array("name" => "Travelogue",
            "artist" => "Kashmir",
            "tracks" => array("Rose" ))
);
echo json_encode($cds);

og læser det fra Javascript med:

$.get('tracks.php', {}, function(cds) {
    // gør noget med dataene 
}, 'json');

så vil variablen cds indeholde et array af objekter, så du kan f.eks. bruge:

var cd0 = cds[0];
var name = cd0.name;
for (var trackno = 0; trackno < cd0.tracks.length; trackno++) {
  var track = cd0.tracks[trackno];

}
Avatar billede doughnut Nybegynder
16. marts 2014 - 21:31 #9
Okay nu har jeg fået min liste til at virke med JSON-filen, men mangler "bare" afspilningslisten. Jeg har lavet en rimelig ringe søgefunktion og den mangler at blive gjort færdig, men det jeg har ser sådan ud: http://omai.dk/Venners%20kode/Nikolaj%20Jenning%20Hansen/
Men nu forestiller jeg mig at jeg skal gøre sådan at jeg kan trykke på nogle cd'er/tracks, som vil åbne en "musikafspiller", hvor jeg kan tilføje/rydde sange og shuffle osv. Men jeg har ingen anelse om, hvordan jeg gør dette. nogle forslag? :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester