View
156
Download
0
Category
Tags:
Preview:
DESCRIPTION
Talk given to PennApps participants on how to use Javascript and jQuery.
Citation preview
Introduction to Javascript and jQuery
Kathy Zhou
Tech TalkPennApps Fall 2014
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
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
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
This talk assumes you know:- basic HTML + CSS- basic programming (CIS110 or CIS120)
Kathy Zhou, PennApps Fall 2014 Tech Talk
Kathy Zhou, PennApps Fall 2014 Tech Talk
Basics of Javascript
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
Kathy Zhou, PennApps Fall 2014 Tech Talk
What you can do in Javascript
- integers, floats, strings- lists- hash tables/dictionaries- for-loops
Kathy Zhou, PennApps Fall 2014 Tech Talk
What you can do in Javascript
- creating a function: line 21- calling a function: line 26
Kathy Zhou, PennApps Fall 2014 Tech Talk
What is the DOM?
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.)
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
Kathy Zhou, PennApps Fall 2014 Tech Talk
ex. adding an element to the page
Kathy Zhou, PennApps Fall 2014 Tech Talk
Event handlers
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
Kathy Zhou, PennApps Fall 2014 Tech Talk
ex. event handler for clicking on the <body>
Kathy Zhou, PennApps Fall 2014 Tech Talk
Basics of jQuery
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
Kathy Zhou, PennApps Fall 2014 Tech Talk
most important feature of jQuery (to you): easier manipulation of
the DOM
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
Kathy Zhou, PennApps Fall 2014 Tech Talk
ex. creating an event handler
Kathy Zhou, PennApps Fall 2014 Tech Talk
protip: anything you want immediately executed, wrap in the jQuery document-ready construct
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 () {...});
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
Kathy Zhou, PennApps Fall 2014 Tech Talk
demo time!
Kathy Zhou, PennApps Fall 2014 Tech Talk
autocomplete search bar
Google →
our demo →
Kathy Zhou, PennApps Fall 2014 Tech Talk
download and extract files: https://github.com/KathyZ/talks/archive/master.zip
Kathy Zhou, PennApps Fall 2014 Tech Talk
go into “pennappsf214Javascript” folderdouble-click on ‘index.html’
Kathy Zhou, PennApps Fall 2014 Tech Talk
*demo-ing*
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
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
thank you and happy hacking!
← hit me up@kaffkaff
Kathy Zhou, PennApps Fall 2014 Tech Talk
Recommended