The document provides an introduction to beginning JavaScript, covering key concepts like values, types, variables, operators, conditional statements, functions and more. It includes examples to illustrate each concept. The document is the notes for the first class of a Girl Develop It course on JavaScript. It aims to welcome students and establish some basic "rules" before getting into the technical topics.

1. BEGINNING JAVASCRIPT
CLASS 1Javascript ~ Girl Develop It ~

3. WELCOME!
Girl Develop It is here to provide affordable and
accessible programs to learn software through
mentorship and hands-on instruction.
Some "rules"
We are here for you!
Every question is important
Help each other
Have fun

4. WELCOME!
Tell us about yourself.
Who are you?
What do you hope to get out of the class?
What is your favorite dinosaur?

5. TERMS
Web design
The process of planning, structuring and creating a
website.
Web development
The process of programming dynamic web
applications. (JavaScript goes here!)
Front end
The outwardly visible elements of a website or
application. (JavaScript goes here, too!)
Back end
The inner workings and functionality of a website or
application. (Recently, JavaScript has started to
arrive here!)

6. CLIENTS AND SERVERS
How your computer accesses websites
JavaScript is "client side"
Your browser understands it!

7. TOOLS
Browser
Browser Developer Tools
Chrome, IE, and Safari Developer Tools
Firebug for Firefox
Opera Dragonfly
Text Editors
Eclipse JSDT - Windows and Mac
Aptana - Windows and Mac
Sublime Text - Windows and Mac
Notepad++ - Windows

8. HISTORY OF JAVASCRIPT
Developed by Brendan Eich of Netscape in 1995 (in
10 days!)
Originally called Mocha and then LiveScript
Java -- Actually, JavaScript has nothing to do with the
language Java. Java was just the cool kid in town at
the time.
Script -- Instructions that a computer can run one line
at a time

9. HISTORY OF JAVASCRIPT
1996 - Netscape 2 is released with JavaScript
support
1997 - First standardized version of JavaScript
2005 - AJAX is first coined. AJAX is used to
communicate with servers using JavaScript.
2006 - jQuery, a super-popular JavaScript library,
debuts.
2010 - Node.js debuts. This provided a way for
JavaScript to perform back end functions (although
not the first).
2012 - The spec for JavaScript is "nearly" finished.

10. WHAT DOES JAVASCRIPT DO?
Primary use is controlling the browser, manipulating
Web pages, and enhancing user interaction.
All sorts of awesomeness, including this slideshow!
Image Galleries and Lightboxes
Games and all sorts of Google Doodles
Interactions, like show/hide and accordians
Retrieving data from other websites (through
APIs)

11. VALUES, TYPES, AND VARIABLES
The fundamental building blocks of programming
languages are values, types, and variables.
A variable stores a value. The value is defined by a
type.

12. VALUES
Any piece of information that a computer program can
store or manipulate.
For example:
The sentence "Hello, world!"
The number 3.14
A set of numbers [3.14, 6.09, 9.0805]
A set of strings ["Welcome", "to", "JavaScript"]

13. VARIABLES
A storage location for a value used to perform
computations.
Declare a variable (give it a name)
Initialize variable (give it a value and a type)
Declare AND initialize at the same time!
Change value of variable
var bananas;
bananas = 5;
var bananas = 5;
bananas = 4; //I ate a banana.

14. COMMENTS
You can write comments that only you, not the browser,
reads
// comment on one line
/* comment on
multiple lines */

15. TYPES
The definition of the kinds of data a computer program
can store or manipulate.
JavaScript infers the type based on the data. This is
known as "loosely typed" in nerd speak.

16. TYPES
Primitives
Number - well, a number!
String - a collection of characters.
Boolean - a true or false value.
Array - a collection of values.
null - no valid value or purposely empty.
undefined - no value has been initialized or set yet.
Objects
Anything that isn't a primitive.

17. DATA TYPES
string -- a group of characters in quotes
number -- (well, a number)
boolean -- yes or no
var fruit = "banana";
var pi = 3.14;
var year = 2013;
var bananaTally = 200;
var skyIsBlue = true;
var grassIsPink = false;

18. DATA TYPES
undefined -- no value yet
null -- a purposely empty value (not the same as 0)
var favoriteDinosaur;
var myTigersName = null;

19. NAMING RULES
Begin with a letter, _, or $
Contain letters, numbers, _ and $
Names are case sensitive
var hello;
var _hello;
var $hello;
var hello2;
var hello;
var Hello;
var heLLO;

20. MATHEMATICAL EXPRESSIONS
Symbol Meaning
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
var bananas = 5;
var oranges = 2;
var fruit = bananas + oranges;

21. STRING EXPRESSIONS
var name = "Mitch";
var dinosaur = "Stegosaurus";
var sentence = "My dinosaur is a " + dinosaur + ". It's name is " + name + ".";

22. INCLUDING JAVASCRIPT
Inline - a script tag with code inside of it.
External - a script tag that points to another file.
<body>
<script>
</script>
</body>
var dinosaur = "Liopleurodon";
...
<body>
<script src="external.js"></script>
</body>

23. LET'S DEVELOP IT
Create a new HTML file
Create a new JavaScript file (.js extension) and include
it on the page.
<html>
<head>
<title>My Site!</title>
</head>
<body>
My site!
</body>
</html>
<head>
<title>My Site!</title>
<script src="calculator.js"></script>
</head>

24. LET'S DEVELOP IT
Life time supply calculator
Ever wonder how much a lifetime supply of your
favorite snack or drink is?
Store your age in a variable
Store your maximum age in a variable
Store an estimated amount per day in a variable
Calculate how many you would eat/drink for the rest
of your life.
Output the result into the page (see below) like so:
"You will need NN to last you until your old age of
NN"
document.write(answer);

25. LET'S ANSWER IT!
var age = 26;
var oldAge = 96;
var perDay = 2;
var days = (oldAge - age) * 365;
var total = perDay * days;
document.write("You will need $" + total + " to last you until the ripe old age of " + oldAge);

26. COMPARISONS
=== Equality
!== Inequality
> Greater than
>= Greater than or equal to
< Less than
<= Less than or equal to
Don't confuse = (assign a value)
with === (compare a value)
var name = "Mitch";
document.write(name === "Mitch"); //true

27. LOGIC
&& AND
|| OR
! NOT
var bananas = 5;
var oranges = 2;
document.write(bananas > 3 && oranges > 3); //false
document.write(bananas < 2 || oranges < 2); //false
document.write(bananas !== oranges); //true

28. THE IF STATEMENT
JavaScript can run through code based on conditions
if (condition here){
// statement to execute
}
var bananas = 1;
if (bananas < 2){
document.write("You should buy more bananas!");
}

29. IF/ELSE STATEMENT
You can use else to perform an alternative action if the
"if" fails
var bananas = 5;
if (bananas > 3){
document.write('Eat a banana!');
}
else {
document.write('Buy a banana!');
}

30. IF/ELSE STATEMENT
You can use else if to have multiple choices
var age = 20;
if (age >= 35) {
document.write('You can vote AND hold any place in government!');
}
else if (age >= 25) {
document.write('You can vote AND run for the Senate!');
}
else if (age >= 18) {
document.write('You can vote!');
}
else {
document.write('You have no voice in government (yet)!');
}

31. LET'S DEVELOP IT!
Add an if/else statement to our lifetime supply calculator
so that if the lifetime supply is greater than 40,000, you
say "Wow! That's a lot!" otherwise, say "You seem
pretty reasonable!"

32. LET'S ANSWER IT!
var age = 26;
var oldAge = 96;
var perDay = 2;
var days = (oldAge - age) * 356;
var total = perDay * days;
if(total > 40000){
document.write("You will need " + total + " to last you until the ripe old age of " + oldAge + ". Wow! That's
a lot!");
}
else{
document.write("You will need " + total + " to last you until the ripe old age of " + oldAge + ". You seem pr
etty reasonable");
}

33. FUNCTIONS
Functions are re-usable collections of statements
Declare a function
Call the function
function sayHi(){
document.write('Hi!');
}
sayHi();

34. ARGUMENTS
Functions can take named values known as arguments.
function sayHi(name){
console.log('Hi' + name + '!');
}
sayHi('Mitch, the dinosaur');
sayHi('Harold, the hippo');
var mouseName = 'Pip, the mouse';
sayHi(mouseName);

35. ARGUMENTS
Functions can take MULTIPLE named arguments
function addNumbers(num1, num2){
var result = num1 + num2;
document.write(result);
}
addNumbers(5, 6);
var number1 = 12;
var number2 = 30;
addNumbers(number1, number2);

36. RETURN VALUES
Functions can return a value to you (such as the result
of addition).
function addNumbers(num1, num2){
var result = num1 + num2;
return result; //Anything after this line won't be read
}
var meaningOfLife = addNumbers(12, 30);
document.write(meaningOfLife);

37. VARIABLE SCOPE
JavaScript have "function scope". That means the
variables are only accessible in the function where they
are defined.
A variable with "local" scope:
function addNumbers(num1, num2){
var result = num1 + num2;
return result;
}
var meaningOfLife = addNumbers(12, 30);
document.write(result);
//This will show as undefined because the result variable only exists inside the addNumbers function.

38. LET'S DEVELOP IT!
Wrap the lifetime supply calculator in a function called
calculate()
Add a button to the html that calls the function when it is
clicked
<button type="button" onclick="calculate()">
Calculate life time supply
</button>

39. LET'S ANSWER IT!
function calculate(){
var age = 26;
var oldAge = 96;
var perDay = 2;
var days = (oldAge - age) * 356;
var total = perDay * days;
if(total > 40000) {
document.write("You will need " + total + " to last you until the ripe old age of " + oldAge + ". Wow! That's
a lot!"); }
else {
document.write("You will need " + total + " to last you until the ripe old age of " + oldAge + ". You seem pr
etty reasonable"); }
}

40. QUESTIONS?

41. ?