Javascript and jQuery PennApps Tech Talk, Fall 2014
- 1. Introduction to Javascript and jQuery Kathy Zhou Tech Talk PennApps Fall 2014
- 2. Javascript programming language that runs in web browsers jQuery Javascript library for animations, effects, and making Javascript easy to use Kathy Zhou, PennApps Fall 2014 Tech Talk
- 3. What this talk WON’T do: - make you a Javascript expert in an hour (let’s be real, guys) - best to take CIS 197 or read Javascript: the Good Parts - explain all the weird nuances of the language - ‘null’ vs. ‘undefined’, ‘falsey’ values, you can look up - teach you functional programming - very important, I recommend studying Kathy Zhou, PennApps Fall 2014 Tech Talk
- 4. actual picture of you after this talk I promise What this talk WILL do: - make you a happy hacker - this is PennApps, after all - teach you the process of building a UI feature on your web app ^ most important!! - point you in the right direction for learning more advanced features of Javascript and jQuery Kathy Zhou, PennApps Fall 2014 Tech Talk
- 5. This talk assumes you know: - basic HTML + CSS - basic programming (CIS110 or CIS120) Kathy Zhou, PennApps Fall 2014 Tech Talk
- 6. Basics of Javascript Kathy Zhou, PennApps Fall 2014 Tech Talk
- 7. ‘running’ a Javascript program - a Javascript program is a script file - include it as a link in your HTML document, before the </body> tag Kathy Zhou, PennApps Fall 2014 Tech Talk
- 8. What you can do in Javascript - integers, floats, strings - lists - hash tables/dictionaries - for-loops Kathy Zhou, PennApps Fall 2014 Tech Talk
- 9. What you can do in Javascript - creating a function: line 21 - calling a function: line 26 Kathy Zhou, PennApps Fall 2014 Tech Talk
- 10. What is the DOM? Kathy Zhou, PennApps Fall 2014 Tech Talk
- 11. DOM: Document Object Model - every web page is represented as a tree structure - the root node is the <html> tag - child nodes are the nested tags in the document (<body>, <div>, <p>, etc.) Kathy Zhou, PennApps Fall 2014 Tech Talk
- 12. Javascript can manipulate the DOM - Javascript can dynamically remove or append tags - can modify text on the page Kathy Zhou, PennApps Fall 2014 Tech Talk
- 13. ex. adding an element to the page Kathy Zhou, PennApps Fall 2014 Tech Talk
- 14. Event handlers Kathy Zhou, PennApps Fall 2014 Tech Talk
- 15. What is an event handler? - the user interacts with the web page in different ways - clicking, typing, mouse-ing over elements, etc. - event handlers are functions that execute during particular user events on certain elements Kathy Zhou, PennApps Fall 2014 Tech Talk
- 16. ex. event handler for clicking on the <body> Kathy Zhou, PennApps Fall 2014 Tech Talk
- 17. Basics of jQuery Kathy Zhou, PennApps Fall 2014 Tech Talk
- 18. linking to the jQuery script file - lines 30-31: the proper way to link to jQuery - protip: remember to include it as the first link, and then include other javascript files after it Kathy Zhou, PennApps Fall 2014 Tech Talk
- 19. most important feature of jQuery (to you): easier manipulation of Kathy Zhou, PennApps Fall 2014 Tech Talk the DOM
- 20. ex. creating a pointer to an element on the page Kathy Zhou, PennApps Fall 2014 Tech Talk note the CSS notation “.” to access classes “#” to access IDs
- 21. ex. creating an event handler Kathy Zhou, PennApps Fall 2014 Tech Talk
- 22. protip: anything you want immediately executed, wrap in the jQuery document-ready construct Kathy Zhou, PennApps Fall 2014 Tech Talk
- 23. protip: the method ensures the page loads completely before the scripts execute you can also do $(document).ready(function () {...}); Kathy Zhou, PennApps Fall 2014 Tech Talk
- 24. protip: don’t do anonymous function handlers! always name your functions because it’s better for clarity and debugging Kathy Zhou, PennApps Fall 2014 Tech Talk
- 25. Kathy Zhou, PennApps Fall 2014 Tech Talk demo time!
- 26. autocomplete search bar Google → our demo → Kathy Zhou, PennApps Fall 2014 Tech Talk
- 27. download and extract files: https://github.com/KathyZ/talks/archive/master.zip Kathy Zhou, PennApps Fall 2014 Tech Talk
- 28. go into “pennappsf214Javascript” folder double-click on ‘index.html’ Kathy Zhou, PennApps Fall 2014 Tech Talk
- 29. Kathy Zhou, PennApps Fall 2014 Tech Talk *demo-ing*
- 30. workflow: steps to a UI feature 1. identify the user actions - does something happen when the user clicks? when the user presses the ‘enter’ button? 2. identify what visual aspects need to be there - consider which elements are added or removed, how they are modified, etc - also consider what CSS changes need to be made 3. implementation Kathy Zhou, PennApps Fall 2014 Tech Talk
- 31. more learning for PennApps weekend: jQuery UI: http://jqueryui.com/ Foundation by ZURB: http://foundation.zurb.com/ Mozilla’s Javascript Guide: https://developer.mozilla.org/en-US/docs/Web/JavaScript jQuery documentation: http://api.jquery.com/ Airbnb’s Javascript style guide (best practices): https://github.com/airbnb/javascript Stack Overflow Kathy Zhou, PennApps Fall 2014 Tech Talk
- 32. thank you and happy hacking! @kaffkaff ← hit me up Kathy Zhou, PennApps Fall 2014 Tech Talk