Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Javascript and jQuery PennApps Tech Talk, Fall 2014
Similar to Javascript and jQuery PennApps Tech Talk, Fall 2014 (20)
Recently uploaded
Recently uploaded (20)
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