• Like
Drupal+javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Drupal+javascript

  • 1,216 views
Published

 

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,216
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Drupal, JavaScript és jQuery Nagy Péter [email_address]
  • 2. JavaScript
      • Könnyen használható kliens oldali nyelv
      • 3. Minden modern böngésző támogatja
      • 4. Gyengén típusos
      • 5. Objektumorientáltan programozható
      • 6. Eseményvezérelt
      • 7. Nagyon elterjedt
  • 8. JavaScript Drupalban
    • Sminkből
      • A smink .info fájlba tegyükbe scripts[] = myjs1.js scripts[] = myjs2.js ....
      • 9. Főleg desinghoz ajánlott így
    • Modulból
      • A Drupal API használatával
      • 10. drupal_add_js() - Egy adott laphoz
      • 11. hook_init() - Minden oldalhoz
  • 12. drupal_add_js()
    • drupal_add_js($data, $type, $scope, $defer, $cache, $preprocess);
      • $type – Az adat típusa
        • Core, module, theme – A szkript elérési útvonala
        • 13. Inline – JS forrás kód
        • 14. Setting – Egy tömb, ami beállításokat tartalmaz
          • Drupal JS object
      • $data – az adat attól függően, hogy milyen típusú
      • 15. $scope – pl.: footer vagy header vagy más sminkben definiált
        • Lehetőleg tegyük a footerbe
    • http://api.drupal.org/api/function/drupal_add_js/6
  • 16.
    • Könnyen használható JavaScript framework
    • 17. 2006-ban jelent meg, MIT és GNU kettős licensz
    • 18. Nyílt forráskódú
    • 19. Kicsi ~ 30k
    • 20. Moduláris, plugin-okkal könnyen bővíthető
    • 21. Elterjedt, rengeteg helyen használják
    • 22. Az Drupal 5-től kezdve a core része
    • 23. http://www.jquery.com
  • 24. JQuery alapok
    • $ a jQuery objektum rövidítése
    • 25. Kódunkat tegyük a következő blokkba:
      • $(document).ready(function(){ ..... });
      • 26. Így csak az oldal betöltődése után fog a kódunk lefutni
      • 27. A window.onload megfelelője
    • A legtöbb jQuery függvény az őt meghívó objektummal tér vissza -> ”chaining”
  • 28. jQuery szelektorok 1.
    • Szelektorok a HTML DOM elemeinek ”megtalálásához”
    • 29. A CSS szelektorok itt is működnek egészen a CSS3-ig
      • pl.: $('#logo'), $('div.wrapper'), $('a')
    • ” Függvények” a szelektorokhoz a különbőző szűrésekre
      • :not(), :first, :last, :first-child, :eq(), :checked
      • 30. pl.: $('.menu li:last') $('.menu li:not(.leaf)')
    • Ezekkel ekvivalens függvények: first(), not(), contains(), stb.
    • 31. pl.: $('.block').first();
  • 32. jQuery szelektorok 2.
    • Attribútumokat vizsgáló szelektorok
      • [name], [name=value], [name^=value], [name$=value], [name!=value]
    • A *-gal mindent ki lehet választani
    • 33. Több szelektor egyben:
      • $('sel1 + sel2'), $('sel1 ~ sel2')
      • 34. $('sel1, sel2, sel3')
      • 35. $('sel1 > sel2')
    • Minden szelektor egy vagy több jQuery objektummal tér vissza
  • 36. JQuery AJAX
    • Sokkal egyszerűbb, böngészőfüggetlen AJAX framework
    • 37. Nem kell használni az xmlHttpRequest objektumot
    • 38. Függvények: $.ajax(), $.post(), $.get()
    • 39. Példa AJAX kérésre:
      • $.post('barmi.php', {p: ”adat”}, function(redata){ $('#data-wrapper').html(redata); });
  • 40. AJAX Drupalban
    • A modulunk ajax callback-jeinek címét elmentjük a Drupal settings objektumba:
    • 41. jQuery-ből a következőképpen hívjuk:
    • 42. A meghívott függvény:
  • 43. jQuery UI
    • Egy jQuery library hogy ne csak jó legyen, hanem szép is.
    • 44. Egyszerűen használható
    • 45. ”Professzionális hatású”
    • 46. Könnyen témázható
    • 47. http://jqueryui.com
  • 48. Debug
    • Firebug
      • CSS szerkesztéshez
      • 49. Javascript debughoz
      • 50. Teljesítmény figyeléshez
      • 51. HTML struktúra ellenőrzéshez
    • Firebug for Drupal
      • SQL lekérdezések
      • 52. Debug üzenetek
      • 53. Node, user, views, form objektumok ellenőrzése
  • 54. Drupal 7 változások 1.
    • drupal_add_js()
      • Weight paraméter, hogy szabályozni tudjuk, a szkriptek betöltődésének sorrendjét
      • 55. Külső javascriptek használata:
        • drupal_add_js('http://example.com/example.js', 'external');
      • Fájlban lévő JS-eket hozzáadása:
        • drupal_add_js('mymodule/js/script.js', 'file');
  • 56.
    • Library-k
      • hook_library()
      • 57. drupal_add_library()
    • Névtér problémák
      • Sok library lehetséges
      • 58. Következéképpen írjuk a kódot:
        • (function ($) {
          • //Ide jön a kód
        • })
    Drupal 7 változások
  • 59. Köszönöm a figyelmet!