Programming with JavaScript
Codecademy
Tim Miller - tim.miller@humboldt.edu
Introductions
Tim miller
I use computer programming to solve problems:
- build websites to share information
- create presentations on the Web - easy to use & share
- understand how programs work and how I can use them best
- The skills I've learned translate to other areas of my life and career
- bike mechanic, organization - trouble shooting
Introductions
Who are you?
What is your experience with:
- computer science?
- computer programming?
- using computers & technology?
What is your area of interest?
- how do you think computer programming can be applied?
Food & drinks
Please be careful
-
keep away from the computers
-
keep your hands clean
-
Let us know about any spills/messes
What is JavaScript?
- Not Java - these are unrelated programming languages
- JavaScript (JS) is used frequently in web sites to create dynamic features
- dynamic: allows the user to interact with the site
- JS uses intuitive syntax
- JS is easy to run on any computer
- browser
- notepad program
How do we use JavaScript?
- JavaScript can be run locally or within a website.
- local: save a file on your computer and display in a browser without having to publish on the Web
- JS can be used to alter webpages
- JS can be used to process user input
- forms
- JS can be used to create animations
- JS is often used to create slideshows
Today
Codecademy tutorial
- Create animation
- Learn and practice the basic concepts of computer programming
-
You will create an account
- 100% free with no obligations.
Collaboration
- Programs are written by groups of people
- Work with each other to solve problems - ask questions!
http://humboldt.edu
Let's begin!
How did it go?
What worked best?
What didn't work?
What did you learn?
What Do you still want to learn?
IDEAS
How can we use the things we learned today?
- Strings
- Variables
- Math
- Booleans
- Arrays
- If / Else logic statements
- Calling functions
- with & without parameters
IDEAS
How can we use the things we learned today?
var name = "";
var nameLength = name.length;
if (nameLength > 9) {
$('.name').css({'color':'blue'});
} else if (nameLength > 5) {
$('.name').css({'color':'red'});
} else {
$('.name').css({'color':'yellow'});
}What if:
var name = "Tim";
var name = "Alexander";
var name = "Evangelina";