API tools faq
paste
Advertisement
B-Matt

Balkan Coders: Messenger

B-Matt
Jul 23rd, 2015
462
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.90 KB | None | 0 0
raw download clone embed print report
  1. Dobar dan Vam želi Balkan Coders ekipa! Danas Vam donosimo prvi tutorijal koji obuhvaća HTML, CSS i jQuery. Dugo smo razmišljali što bismo mogli napraviti za Vas, ali eto jedan jednostavan a opet zabavan tutorijal!
  2. U ovome tutorijalu fokus je na jQuery jeziku i podrazumjeva se da znate osnove HTMLa i CSSa. Ukoliko ne znate osnove HTMLa ili CSSa onda ovdje jako dobre reference imate na www.w3schools.com.
  3.  
  4. U ovome tutorijalu ću koristiti (programi i biblioteke):
  5. - Bilo koji tekstualni editor npr. Notepad++, Adobe Dreamweaver i slični,
  6. - Internet preglednik npr. Google Chrome, Mozilla Firefox, Internet Explorer,
  7. - jQuery JavaScript biblioteku (<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>).
  8.  
  9. Također ćemo koristiti sljedeće funkcije:
  10. - .focus() (detaljnije: http://www.w3schools.com/jquery/event_focus.asp) - Funkcija se javlja kada kliknemo na textarea-u ili input tag (HTML tagovi) i oni dođu u fokus;
  11. - .focusout() (detaljnije: http://www.w3schools.com/jquery/event_focusout.asp) - Funkcija se javlja kada se makne fokus s textarea-e ili input taga (HTML tagovi);
  12. - .keyup() (detaljnije: http://www.w3schools.com/jquery/event_keyup.asp) - Funkcija se javlja kada korisnik nešto tipka ona se javlja SVAKIM pritiskom na tipku;
  13. - .click() (detaljnije: http://www.w3schools.com/jquery/event_click.asp) - Funkcija se javlja kada kliknemo odabrani dio web stranice.
  14.  
  15. Ovdje ćete naučiti:
  16. - Što je to jQuery i zašto se koristi,
  17. - Kako deklarirati varijablu u JavaScriptu/jQueryu,
  18. - Kako interaktivno kreirati nove elemente unutar web stranice,
  19. - Kako brojati znakove unutar unosa.
  20.  
  21. Za početak krećemo s kreiranjem web stranice. Koristiti ćemo svega 4 HTML elementa koji će nam pomoći pri ostvarenju našeg cilja. Ponavljam ovdje nećemo objašnjavati što svaki element radi i za što služi za to imate W3 schools.
  22.  
  23. -------------------------------
  24. <!DOCTYPE html>
  25. <html>
  26. <head>
  27. <meta charset="UTF-8">
  28. <title>Balkan Coders - Messages</title>
  29. <link rel="stylesheet" href="style.css"> <!-- Uključujemo style.css -->
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Pozivamo jQuery biblioteku -->
  31. <script src="script.js"></script> <!-- Uključujemo script.js -->
  32. </head>
  33. <body>
  34. <div id="message-container">
  35. <ul></ul>
  36. <div style="position:absolute;bottom:0;right:0;left:0;">
  37. <textarea rows="5" cols="45" maxlength="500">Unesite tekst...</textarea><br>
  38. <div style="width:auto;display:inline;">
  39. <p class="message-counter">Preostalo znakova: 500</p>
  40. <input type="submit" value="Unesi" id="message-submit" disabled="disabled">
  41. </div>
  42. </div>
  43. </div>
  44. </body>
  45. </html>
  46. -------------------------------
  47.  
  48. Unutar head elementa smo deklarirali da naša web stranica koristi UTF-8 znakove, njen naslov, pozvali style.css i script.js datoteke. Označili smo liniju u kojoj smo pozvali jQuery.
  49. jQuery je zapravo JavaScript biblioteka koja omogućuje laku uporabu JavaScript programskog jezika. Ona omogućuje manipulaciju DOM-om (Document Object Model), dodaje dosta animacija i efekata, te mnogo drugih stvari.
  50. Kada smo napravili jednostavnu stranicu idemo joj dodati malo živosti i boja! Tu nastupa naš novi dokument pod nazivom style.css kojeg smo uključili u našu stranicu unutar head taga.
  51.  
  52. -------------------------------
  53. /*
  54. Author: Balkan Coders (B-Matt)
  55. Created: 22.07.2015.
  56. */
  57.  
  58. /*
  59. BEGIN
  60. */
  61. textarea {
  62. border: 1px solid #DADADA;
  63. background-color: #fff;
  64. color: #86898E;
  65. border-radius: 8px;
  66. padding-left: 10px;
  67. padding-top: 8px;
  68. }
  69.  
  70. #message-container {
  71. position: relative;
  72. margin: 0 auto;
  73. width: 350px;
  74. height: 825px;
  75. }
  76.  
  77. #message-submit {
  78. float: right;
  79. border: none;
  80. background-color: #22B2FF;
  81. color: #fff;
  82. padding: 10px;
  83. border-radius: 15%;
  84. cursor: pointer;
  85. margin-top: 8px;
  86. margin-right: 18px;
  87. }
  88.  
  89. #message-submit:hover {
  90. background-color: #178AC7;
  91. }
  92.  
  93. .message-counter {
  94. float: left;
  95. margin-left: 15px;
  96. text-transform: uppercase;
  97. font: 15px calibri, sans-serif;
  98. color: #86898E;
  99. }
  100.  
  101. #message-container ul {
  102. position: relative;
  103. width: 100%;
  104. height: 100%;
  105. margin: 0;
  106. padding: 0;
  107. top: 25px;
  108. }
  109.  
  110. #message-container li {
  111. list-style: none;
  112. padding: 18px;
  113. background-color: #F9F9F9;
  114. color: #86898E;
  115. font: 16px calibri, sans-serif;
  116. border-bottom-right-radius: 30px;
  117. border-top-right-radius: 30px;
  118. border: 1px solid #BDBDBD;
  119. margin-bottom: 30px;
  120. }
  121.  
  122. #message-avatar {
  123. position: relative;
  124. width: 45px;
  125. height: 45px;
  126. background-color: #F9F9F9;
  127. border-radius: 100%;
  128. border: 2px solid #fff;
  129. box-shadow: 0px 0px 2px;
  130. left: -40px;
  131. margin-top: -44px;
  132. }
  133.  
  134. #message-avatar p {
  135. color: #B1B1B1;
  136. text-align: center;
  137. margin: 0;
  138. padding: 0;
  139. line-height: 1.30;
  140. font-size: 35px;
  141. }
  142. -------------------------------
  143.  
  144. Ovo su jednostavne stvari kojima smo dodali živosti i boje unutar naše stranice. CSS je programski jezik koji služi za uređivanje web stranica u smislu dodavanja boja ili nekih drugih efekata.
  145. Zasada imamo jedan prostor za tekst, nekakav brojač riječi i gumb za unos koji se nalaze jako jako dolje. Zašto to? Pa planiramo naše unose u prostor za tekst prikazati iznad toga prostora kao nekakav inbox!
  146. Kako unesete znakove i kliknete plavi gumb za unos stranica će interaktivno dodati list element iznad prostora za unos.
  147. Radi urednosti u našoj index.html datoteci koristimo datoteku script.js u kojoj ćemo pisati naš jQuery kod. Pa krenimo s prvim unosem našeg koda!
  148.  
  149. -------------------------------
  150. $(document).ready(function() {
  151. // Global vars
  152. var submitOn = 0;
  153. -------------------------------
  154.  
  155. Ovdje smo odredili da se sve unutar "$(document).ready(function() {" poziva kada se cijela stranica odnosno index.hml loada do kraja. Kada stranica bude spremna za uporabu onda možemo koristiti ostatak koda.
  156. Tu smo također deklarirali globalnu varijablu koja se onda može koristiti bilo gdje. Ona se u jQueryu deklarira isto kao u JavaScriptu s keywordom "var" i onda imenom varijable i zadanom vrijednosti (ako ne napišete onda se pretpostavlja da je ta vrijednost 0!).
  157.  
  158. -------------------------------
  159. // Functions
  160. $("textarea").focus(function() {
  161. if( $("textarea").val() == "Unesite tekst..." )
  162. $("textarea").val("");
  163. });
  164. -------------------------------
  165. HINT: .val() je funkcija koja manipulira s tekstom unutar nekoga elementa. Ukoliko se koristi .val() onda će ispisati tekst unutar određena elementa ili ako koristite navodnike onda će upisati to unutar navodnika kao novi tekst!
  166.  
  167. Ovaj kod će se izvesti kada korisnik klikne na bilo koju textareu na stranici i dovede ju u fokus (kada je kliknete i ona svijetlo plava boja bude njezin rub). Eh sada mogli smo napisati kod koji će brisati tekst unutar textarea-e bez obzira dali je to napisano ili nešto što je korisnik pisao.
  168. Stoga smo odlučili produljiti naš kod za još jednu liniju i dodati sigurnosnu provjeru "if( $("textarea").val() == "Unesite tekst..." )" koja će provjeravati dali je korisnik upisao nešto ili je to uobičajeni tekst. Ako je uobičajeni tekst onda ga brišemo s sljedećim kodom: "$("textarea").val("");" ili ga ostavljamo ako je to korisnikov unos.
  169.  
  170. -------------------------------
  171. $("textarea").focusout(function() {
  172. if( $("textarea").val().length < 1 ) {
  173. $("textarea").val("Unesite tekst...");
  174. $("#message-submit").attr('disabled', true);
  175. submitOn = 0;
  176. }
  177. });
  178. -------------------------------
  179. HINT #1: Pozivanjem funkcije .length nakon funkcije .val() dobijamo ispis broja znakova unutar unesenog teksta odnosno teksta unutar odabrana elementa (u ovome slučaju textarea-e).
  180. HINT #2: Funckija .attr() služi za dodavanje ili brisanje atributa unutar nekog HTML elementa. To mogu biti biti id, class, href ili bilo što se piše unutar "<>"!
  181.  
  182. Ovaj kod se javlja kada se makne fokus s textarea-e (korisnik klikne sa strane ili klikne nešto drugo). Provjeriti ćemo dali je išta upisano (veličina teksta unutar zadana elementa je manja od 1 ili 0), te upisati u textarea-u tekst: "Upišite tekst...".
  183. Nakon toga zabranjujemo korisniku da klikne gumb za unos teksta jer on nije unesen i stavljamo varijablu "submitOn" na 0 (jer ako je 1 onda korisnik može unijeti tekst).
  184.  
  185. -------------------------------
  186. $("textarea").keyup(function() {
  187. var inputLen = 500 - $("textarea").val().length;
  188. if( !submitOn ) {
  189. $("#message-submit").attr('disabled', false);
  190. submitOn = 1;
  191. }
  192. $(".message-counter").html("Preostalo znakova: " + inputLen);
  193. });
  194. -------------------------------
  195. HINT: Funkcija .html daje ili stavlja vrijednosti unutar zadanog HTML elementa. U ovome slučaju DIV elementa klase "message-counter".
  196.  
  197. Sljedeći kod se izvršava kada korisnik koristi tipkovnicu. Ako korisnik koristi tipke na tipkovnici onda sigurno i unosi tekst unutar textarea-e? :)
  198. Deklarirali smo lokalnu varijablu "inputLen" u kojoj spremamo rezultat oduzimanja vrijadnosti unesenog teksta od 500 jer prikazujemo koliko je znakova OSTALO za unos. Kada unesete 500 znakova onda Vam HTML zabranjuje daljnji unos (to smo stavili unutar atributa textarea taga).
  199. Ukoliko je globalna varijabla "submitOn" negativna odnosno korisnik ne može unijeti tekst onda se taj atribut mijenja na gumbu za unos i dopušta se unos teksta na stranicu. Također globalnu varijablu stavljamo na 1 što znači da je korisnik nešto unio.
  200. Nakon toga ispisujemo koliko je znakova preostalo u našoj poruci. Brojač kreće od 500 do 0.
  201.  
  202. -------------------------------
  203. $("#message-submit").click(function() {
  204. if( $("textarea").val().length < 50 ) {
  205. if( $("#message-container ul").children().length > 4 )
  206. $("#message-container ul").find("li:first").remove();
  207. } else {
  208. if( $("#message-container ul").children().length > 3 )
  209. $("#message-container ul").find("li:first").remove();
  210. }
  211. $("#message-container ul").append('<li><div id="message-avatar"><p>B</p></div><p style="padding-left: 20px;margin: 0;word-wrap: break-word;width: 95%;">' + $("textarea").val() + '</p></li>');
  212. $("textarea").val("Unesite tekst...");
  213. $("#message-submit").attr('disabled', true);
  214. submitOn = 0;
  215. $(".message-counter").html("Preostalo znakova: 500");
  216. });
  217. });
  218. -------------------------------
  219. HINT #1: .children() je funkcija koja nam daje child objekt našeg <ul> taga. To bi bili <li> tagovi koje interaktivno unosimo.
  220. HINT #2: .find() je funkcija koja "traži" zadani objekt unutar zadanog taga. Unutar koda koji je prikazan gore tražimo prvi <li> tag da ga obrišemo s funkcijom .remove().
  221.  
  222. Gore uneseni kod nam zapravo prikazuje uneseni tekst na web stranicu, ali prije toga imamo dosta "sigurnosnih provjera" (ovdje ne mislim na pravu sigurnost nego na provjere da se ne događaju bugovi).
  223. Unutar prvog if statementa provjeravamo dali je uneseni tekst manji od 50 znakova, ako je onda provjeravamo koliko je prikazano poruka i koja je prva. Ako je prikazano više od 4 poruka onda se prva briše i prikazuje se zadnja unesena poruka.
  224. Ako je uneseni tekst veći od 50 znakova onda se gleda dali je već prikazano 3+ poruka onda se briše prva poruka i prikazuje se zadnja unesena poruka.
  225.  
  226. ----
  227. TEST: Pokušajte komentirati ove "sigurnosne provjere" i provjerite što će se dogoditi ako unesete 5-6 velikih poruka.
  228. ----
  229.  
  230. Nakon ovih provjera imamo interaktivni prikaz na web stranici. Funkcija .append() kreira HTML objekt unutar već zadanog HTML objekta. U ovome našem slučaju dodajemo novi <li> tag unutar <ul> taga.
  231. Nakon što prikažemo poruku onda brišemo uneseni tekst iz textarea-e, te zabranjujemo unos teksta korisniku i resetiramo brojač znakova na 500.
  232.  
  233. ZA ONE KOJI ŽELE ZNATI VIŠE:
  234. Pokušajte s korištenjem .attr() funkcije i računanjem veličine poruke mijenjati dužinu (height) web stranice tako da ne morate koristiti slider da se spusite dolje.
  235.  
  236. DEMO: https://jsfiddle.net/bmatt535/0ceryo41/embedded/result/
  237. Gas Station Locator: https://gas-locator.com
  238.  
  239. Posjetite nas: https://www.facebook.com/bacoders
  240. Balkan Coders, B-Matt
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!