API tools faq
paste
Advertisement
desdemona

realizacja aplikacji internetowych 17/10/14

desdemona
Oct 17th, 2014
556
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.40 KB | None | 0 0
raw download clone embed print report
  1. function Task(nazwa,poczatek,dlugosc,opis) {
  2.    
  3.     this.czyTrwa=function(data)
  4.     {
  5.         var lengthInDays =  new Date(0, 0,dlugosc, 0, 0,0, 0);
  6.         if(poczatek >= data && (poczatek+lengthInDays)<= data)
  7.         {
  8.             return True;
  9.         }
  10.         else
  11.         {
  12.             return False;
  13.         }
  14.     }
  15.    
  16.     this.opisZadania=function()
  17.     {
  18.         //dokument.Write(opis);
  19.         return opis;
  20.     }
  21. }
  22.  
  23. <html><head>
  24. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">    
  25. <link rel="stylesheet" href="qunit-1.15.0.css">
  26. </head>
  27. <body>
  28.  <div id="qunit"></div>
  29. <div id="qunit-fixture"></div>
  30. <script src="qunit-1.15.0.js"></script>
  31. <script src="Task.js"></script>
  32. <script>
  33. var task = new Task("superTask", new Date(2014, 9, 17, 10, 3, 4, 567),1,"Obiekt prosze zrealizowac z wykorzystaniem mechanizmu domkniecia.");
  34.  
  35. QUnit.test( "opis", function( assert ) {
  36. var value = "Obiekt prosze zrealizowac z wykorzystaniem mechanizmu domkniecia.";
  37. assert.equal( value, task.opisZadania(), "We expect value to be different");
  38. });
  39. </script>
  40.  
  41. <h1>RAI - Laboratorium z JavaScript/JQUERY</h1>
  42. <h3>Narzedzia i biblioteki</h3>
  43. <ul>
  44.     <li>Framework testowy <a href="http://qunitjs.com/">QUnit</a> lub <a href="http://jasmine.github.io/">jasmine </a></li>
  45.     <li><a href="http://jquery.com/">JQuery</a>, <a href="http://jqueryui.com/">JQuery UI</a>, <a href="http://getbootstrap.com/">Bootstrap</a></li>
  46.     <li>do pisania mozna uzywac dowolnego edytora - warte uwagi sa np <a href="http://notepad-plus-plus.org/">NotePad++</a> lub edytor wbudowany w VS</li>
  47.     <li>przydatne moze byc uzycie FireBug-a/Chrome developer tools</li>
  48.     <li>do hostowania zadania dotyczacego wolan ajaxowych w JQuery mozna uzyc dowonej technologii - dostarczony przyklad opiera sie na <a href="http://nodejs.org/">nodejs</a></li>
  49.     <li>do testowania selektorow JQuery mozna uzyc on-lineowego <a href="http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&amp;jqsel=p.intro,%23choose">testera1</a> lub <a href="http://sk.kapsi.fi/interactive-jquery-tester.html">testera2</a> </li>
  50. </ul>
  51.  
  52. <h2>Zadania:</h2>
  53. <h3>I.Mechanizmy Javascript</h3>
  54.     <ul>
  55.         <li>Zadania dotyczace JavaScriptu w miare mozliwosci prosze zrealizowac w formie testów jednostkowych (QUnit/Jasmine)</li>
  56.         <li>Definicje klas itd. powinny byc zawarte w oddzielnych plikach,
  57. najlepiej z wykorzystaniem samouruchamiajacych sie funkcji anonimowych</li>
  58.         <li>Po rozpakowaniu framework-a QUnit/Jasmine i uruchomieniu test
  59. runner-a prosze zapoznac sie ze skladnia testow a nastepnie zrealizowac
  60. ponizsze</li>
  61.     </ul>
  62. <ol>   
  63.     <li>
  64.     <h4>Przetestowac emulacje zmiennych prywatnych.</h4>
  65.         <p>Prosze zdefiniowac konstruktor "Task" z atrybutami
  66. nazwa,poczatek,dlugosc + funkcje wyswitlajaca opis zadania i druga
  67. pozwalajaca sprawdzic czy dla danego dnia zadanie jeszcze trwa. </p>
  68.         <p>Obiekt prosze zrealizowac z  wykorzystaniem mechanizmu domkniecia.</p>
  69.         <p>Testy powinny weryfikowac czy funkcje dzialaja poprawnie i proba odczytania nazwy i innych atrybutów z obiektu nie jest mozliwa</p>
  70.     </li>
  71.        
  72.     <li>
  73.     <h4>Przetestowac mechanizm prototypow.</h4>
  74.         <p>Prosze zdefiniowac konstruktor "Task" podobnie jak wczesniej ale umieszcajacc funcje w prototypie konstruktora. </p>
  75.         <p>Testy powinny weryfikowac czy funkcje dzialaja poprawnie</p>
  76.     </li>
  77.    
  78.     <li>
  79.     <h4>Przetestowac emulacje mechanizm dziedziczenia.</h4>
  80.         <p>Prosze zdefiniowac konstruktor "Koszt" wywiedziony z konstruktora
  81. Task. Nowy obiekt powinien miec zmieniona implementacje funcji
  82. drukujacej opis.</p>
  83.         <p>Nowy obiekt powinien wykorzystywac mechanizm emulacji dziedziczenia
  84.  z wykorzystaniem prototypow, tj. prototyp "Kosztu" stanowi obiekt
  85. utworzony przez "new Task" i w ym obiekcie zostaja otworzone .</p>
  86.         <p>Testy powinny weryfikowac czy funkcje w obiektach task dzialaja w zmieniony sposob i czy sa dostepna "odziedziczona" zawartosc.</p>
  87.     </li>
  88.        
  89. </ol>
  90. <h3>II.Selekcja i modyfikacja elementów przez JQuery.</h3>
  91.     <ul>
  92.         <li>Przydatna moze byc <a href="http://learn.jquery.com/">dokumentacja</a> do JQurey.</li>
  93.         <li>Prosze potraktowac niniejszy plik jako przykladowy plik. Po
  94. zapisaniu na dysku prosze dodac link do jquery (linkowanego lokalnie lub
  95.  z wykorzystaniem CDN <code>http://ajax.googleapis.com/ajax/libs/jquery/latest/jquery.js</code>
  96.  
  97.         i dodac nastepujaca funkcjonalnosc (w miare mozliwosci dla potrzeb
  98. tego zadania prosze uzyc istniejacej struktury, bez dodawania
  99. identyfikatorow itd). </li>
  100.         <li>Tam gdzie mowa o zmianie wygladu - wyglad powinien byc
  101. zdefiniowany przez styl. Style najlepiej umiescic w oddzielnym pliku lub
  102.  ew. w sekcji head</li>
  103.     </ul>
  104.     <ol>
  105.         <li>Prosze programowo dodac jakas animacje uruchamiana po zaladowaniu strony</li>
  106.         <li>Prosze programowo zaaplikowac zmiane wygladu odsylaczy, ale tylko w obrebie list</li>
  107.         <li>Prosze programow zaaplikowac zmiane wygladu sekcji h2/h3/h4</li>
  108.         <li>Prosze programowo zaaplikowac zmiane wygladu  parzystych/nieoparzystych lini w niniejszym wyliczeniu</li>
  109.         <li>Prosze programowo dodac zwijanie i rozwijanie (po kliknieciu w naglowek h3) tresci poszczegolnych zadan </li>
  110.         <li>Prosze programowo pogrubic slowo "Prosze" w ninejszym wyliczeniu</li>
  111.         <li>Dla zwinietych zadan prosze zapewnic wyswietlanie tooltipa po najechaniu myszka z trescia kliknij zeby rozwinac</li>
  112.         <li>Do tooltipa z poprzedniego punktu prosze dodac tresc zadania ew.
  113. jej poczatek(w momencie pokazywania tooltipa tresc jest oczywiscie
  114. ukryta)</li>
  115.     </ol>
  116.  
  117. <h3>III.Uzycie plug-inow JQuery UI</h3>
  118.     <p>Dla potrzeb  zadania nalezy wykorzystac tresc xzawarta na niniejszej
  119.  stronie (mozna równiez uzyc wersji po zaaplikowaniu bootstrap-a).</p>
  120.     <ol>
  121.         <li>Prosze uzyc pluginu <a href="http://jqueryui.com/accordion/">accordion</a> do organizacji zadan na niniejszej stronie </li>
  122.         <li>Prosze uzyc pluginu <a href="http://jqueryui.com/tabs/">tab</a> do organizacji zadan na niniejszej stronie </li>
  123.         <li>Prosze uzyc pluginu <a href="http://jqueryui.com/menu/">menu</a> do organizacji zadan na niniejszej stronie </li>
  124.     </ol>
  125.  
  126. <h3>IV.Uzycie ajax-a</h3>
  127.     <p>Jako serwera dla potrzeb tego zadania mozna uzyc dowolnej platformy. Proste rozwiazanie moze stanowic nodejs.</p>
  128.     <ul>
  129.         <li>Aby uzyc tego podejscia nlezy sciagnac pakiet z <a href="http://nodejs.org/download/">nodejs</a>.</li>
  130.         <li>Definicja b. prostego przykladowego serwera (program w javascript, ktory zapewni podstawowa funkcjonalnosc: <a href="http://www.pg.gda.pl/%7Emanus/RAI/lab1server.js">lab1server.js</a>. Mozna ja uruchomic przez node lab1server.js.</li>
  131.         <li>Serwer dziala na localhost:8888, pliki html/js sa serwowane z
  132. wskazanego katalogu (FileDirectory) + prosty serwis restowy woloany
  133. przez GET localhost:8888/ocena lub PUT localhost:8888/ocena/x gdzie x
  134. =1|2|3|4|5. Dla uproszczenia czesci serwerowej serwis restowy zwraca
  135. wyniki jako tekst (a nie json). </li>
  136.         <li>Konieczne moze byc doinstalowanie pakietow "path", "html", "fs". Mozna to zrobic poleceniemi <code>NPM install path</code>, <code>NPM install html</code>, <code>NPM install fs</code>.</li>
  137.         <li>Oczywiscie serwer mozna do woli modyfikowac np. w celu uzycia JSON-a itd.</li>
  138.     </ul>
  139.     <p>Prosze:</p>
  140.     <ol>
  141.         <li>Dodac programowo pod kazdym zadaniem h3 (ponizej tresci) na
  142. niniejszej stronie opis "Ocena 1 2 3 4 5" tak by liczby reagowaly na
  143. kliniecie.</li>
  144.         <li>Po klinieciu na jedna z ocen element "Ocena 1 2 3 4 5" powinien byc zastepowany napisem "oceniono na " + wybrana ocena</li>
  145.         <li>Na dole strony powinien byc prezentowany wynik w formie "Wynik " +
  146.  usredniona ocena. Na tym etapie nie jest wymagane odwolywanie sie do
  147. serwera itd. </li>
  148.         <li>Umiescic niniejsza strone jak statyczny zasób w serwisie wykonanym w dowolnej technologii. </li>
  149.         <li>Kod odpowiedzialny za wybor oceny (w poprzednim zadaniu) nalezy
  150. zmodyfikowac tak by w momencie wybrania oceny wykonywany byl ajaxowy
  151. call do serwera przesylajacy wybrana liczbe na serwer.</li>
  152.         <li>Wynik prezentowany na dole strony rowniez pobierany powinien byc z
  153.  serwera albo uaktualniany jako wynik wolania Ajax-owego (do wyboru). </li>
  154.         <li>Dla uproszczenia rozwiazania nie jest wymagane uwzglednienie ze
  155. strone moze byc otwarta wielokrotnie (przez róznych uzytkowników i w
  156. roznych przegladarkach). </li>
  157.     </ol>
  158.  
  159. <h3>V.Uzycie Bootstrap-a</h3>
  160.     <p>Prosze przygotowac nowy layout niniejszej strony (w oddzielnym pliku
  161.  itd, wolno zmienic strukture itp), (oczywiscie poprzednie zadania z JQ
  162. nie musza dzialac na nowej strukturze) z uzyciem <a href="http://getbootstrap.com/"> Bootstrap-a</a></p>
  163.  
  164. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!