Javascript and jQuery PennApps Tech Talk, Fall 2014

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


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


actual picture of you after this talkI promise

This talk assumes you know:- basic HTML + CSS- basic programming (CIS110 or CIS120)



Basics of Javascript


‘running’ a Javascript program

- a Javascript program is a script file- include it as a link in your HTML document, before the </body> tag


What you can do in Javascript

- integers, floats, strings- lists- hash tables/dictionaries- for-loops


What you can do in Javascript

- creating a function: line 21- calling a function: line 26


What is the DOM?


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.)


Javascript can manipulate the DOM

- Javascript can dynamically remove or append tags- can modify text on the page


ex. adding an element to the page


Event handlers


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


ex. event handler for clicking on the <body>


Basics of jQuery


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


most important feature of jQuery (to you): easier manipulation of

the DOM


ex. creating a pointer to an element on the page

note the CSS notation “.” to access classes“#” to access IDs


ex. creating an event handler


protip: anything you want immediately executed, wrap in the jQuery document-ready construct


protip: the method ensures the page loads completely before the scripts executeyou can also do $(document).ready(function () {...});


protip: don’t do anonymous function handlers!

always name your functions because it’s better for clarity and debugging


demo time!


autocomplete search bar

Google →

our demo →


download and extract files: https://github.com/KathyZ/talks/archive/master.zip

https://github.com/KathyZ/talks/archive/master.zip

https://github.com/KathyZ/talks/archive/master.zip


go into “pennappsf214Javascript” folderdouble-click on ‘index.html’


*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


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


http://jqueryui.com/

http://foundation.zurb.com/

https://developer.mozilla.org/en-US/docs/Web/JavaScript

https://developer.mozilla.org/en-US/docs/Web/JavaScript

http://api.jquery.com/

https://github.com/airbnb/javascript

thank you and happy hacking!

← hit me up@kaffkaff


Javascript and jQuery PennApps Tech Talk, Fall 2014

Software

Transcript of Javascript and jQuery PennApps Tech Talk, Fall 2014