javascript and jquery pennapps tech talk, fall 2014
DESCRIPTION
Talk given to PennApps participants on how to use Javascript and jQuery.TRANSCRIPT
![Page 1: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/1.jpg)
Introduction to Javascript and jQuery
Kathy Zhou
Tech TalkPennApps Fall 2014
![Page 2: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/2.jpg)
Javascriptprogramming language that runs in web browsers
jQueryJavascript library for animations, effects, and making Javascript
easy to use
Kathy Zhou, PennApps Fall 2014 Tech Talk
![Page 3: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/3.jpg)
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
![Page 4: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/4.jpg)
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
actual picture of you after this talkI promise
![Page 5: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/5.jpg)
This talk assumes you know:- basic HTML + CSS- basic programming (CIS110 or CIS120)
Kathy Zhou, PennApps Fall 2014 Tech Talk
![Page 6: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/6.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
Basics of Javascript
![Page 7: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/7.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
‘running’ a Javascript program
- a Javascript program is a script file- include it as a link in your HTML document, before the </body> tag
![Page 8: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/8.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
What you can do in Javascript
- integers, floats, strings- lists- hash tables/dictionaries- for-loops
![Page 9: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/9.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
What you can do in Javascript
- creating a function: line 21- calling a function: line 26
![Page 10: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/10.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
What is the DOM?
![Page 11: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/11.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
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.)
![Page 12: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/12.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
Javascript can manipulate the DOM
- Javascript can dynamically remove or append tags- can modify text on the page
![Page 13: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/13.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
ex. adding an element to the page
![Page 14: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/14.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
Event handlers
![Page 15: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/15.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
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
![Page 16: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/16.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
ex. event handler for clicking on the <body>
![Page 17: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/17.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
Basics of jQuery
![Page 18: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/18.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
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
![Page 19: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/19.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
most important feature of jQuery (to you): easier manipulation of
the DOM
![Page 20: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/20.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
ex. creating a pointer to an element on the page
note the CSS notation “.” to access classes“#” to access IDs
![Page 21: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/21.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
ex. creating an event handler
![Page 22: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/22.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
protip: anything you want immediately executed, wrap in the jQuery document-ready construct
![Page 23: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/23.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
protip: the method ensures the page loads completely before the scripts executeyou can also do $(document).ready(function () {...});
![Page 24: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/24.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
protip: don’t do anonymous function handlers!
always name your functions because it’s better for clarity and debugging
![Page 25: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/25.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
demo time!
![Page 26: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/26.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
autocomplete search bar
Google →
our demo →
![Page 27: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/27.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
download and extract files: https://github.com/KathyZ/talks/archive/master.zip
![Page 28: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/28.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
go into “pennappsf214Javascript” folderdouble-click on ‘index.html’
![Page 29: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/29.jpg)
Kathy Zhou, PennApps Fall 2014 Tech Talk
*demo-ing*
![Page 30: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/30.jpg)
workflow: steps to a UI feature1. 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
![Page 31: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/31.jpg)
more learningfor 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
![Page 32: Javascript and jQuery PennApps Tech Talk, Fall 2014](https://reader034.vdocuments.net/reader034/viewer/2022052621/558546c7d8b42a5e018b530d/html5/thumbnails/32.jpg)
thank you and happy hacking!
← hit me up@kaffkaff
Kathy Zhou, PennApps Fall 2014 Tech Talk