Girl Develop It

Introduction to JavaScript and jQuery

Class 1

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

About Your Instructor

Welcome!

Tell us about yourself.

  • Who are you?
  • What do you hope to get out of the class?
  • What is your favorite dinosaur?

Terms

Web design
The process of planning, structuring and creating a website
Web development
The process of programming dynamic web applications
Front end
The outwardly visible elements of a website or application
Back end
The inner workings and functionality of a website or application.

Terms: Clients and Servers

How your computer accesses websites

Client-side
The "front end"; what happens on the user's computer (includes JavaScript)
Server-side
The "back end"; what happens before a page reaches the client

Tools

Browser — The software that displays webpages
Chrome, Firefox, Internet Explorer, Safari, etc…
Development Toolkit — Helpful tools for learning and troubleshooting
Chrome Dev Tools, Firebug, Safari Web Inspector, IE Developer Tools
Text Editor — The software you write your code with
Sublime Text, Notepad++, Brackets, Komodo Edit, TextWrangler, etc…

History of JavaScript

  • Developed by Brendan Eich of Netscape in 1995 (in 10 days!). Originally called Mocha, 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
  • Standardized in 1997 as EMCAScript (ES6 finalized in 2015, but not fully supported)

History of JavaScript

  • "AJAX"—a way to communicate to servers, coined in 2005
  • jQuery—a super-popular JavaScript Library debuted 2006
  • Node.js—a way for JavaScript to perform server-side functions in 2010
  • Frameworks—since ~2010, a number of JavaScript frameworks have gained popularity

What does JavaScript do?

Statements/Script

Each line in JavaScript is an instruction or a script

When the browser reads it, it "executes the script"


console.log('Hello');

Try it out in your Developer Tools console!
(cmd+alt+j / ctrl+alt+j)

Variables

Variables hold content

Words, numbers, true/false, basically any kind of content

Declare a variable (Give it a name)


var bananas;

Initialize variable (Give it a value)


bananas = 5;

Variables

Declare and initialize at the same time!


var bananas = 5;

Change value of variable


bananas = 4;

(I ate a banana)

Data types

string—a group of characters in quotes


var fruit = "banana";

number—(well, a number)


var pi = 3.14;
var year = 2013;
var bananaTally = 200;

boolean—yes or no


var skyIsBlue = true;
var grassIsPink = false;

Data types

undefined—no value yet


var favoriteDinosaur;

null—a purposely empty value
(not the same as 0 or "")


var myTigersName = null;
In nerd speak, JavaScript variables are "loosely typed." You don't know the kind of value a variable will have until you assign it.

Naming rules

Begin with a letter, _, or $

Contain letters, numbers, _ and $


var hello;
var _hello;
var $hello;
var hello2;

Names are case sensitive


var hello;
var Hello;
var heLLO;

Expressions

Math-y expressions!


var bananas = 5;
var oranges = 2;
var fruit = bananas + oranges;
SymbolMeaning
+Addition
-Subtraction
*Multiplication
/Division
%Modulus
++Increment
--Decrement

Expressions

Word-y expressions!


var name = "Gloria";
var dinosaur = "Stegosaurus";
var sentence = "My dinosaur is a " + dinosaur + ". Its name is \"" + name + "\".";
SymbolMeaning
+Concatenation
/Escape

Let's Develop It

Create a new html file


<!DOCTYPE html>
<html>
	<head>
		<title>My Site!</title>
	</head>
	<body>
		My site!
	</body>
</html>

Let's Develop It

Create a new JavaScript file (a file that ends in .js)


console.log('Loaded my JavaScript file!');

Link it to your html file


<!DOCTYPE html>
<html>
	<head>
		<title>My Site!</title>
		<script src="javascript.js"></script>
	</head>
	<body>
		My site!
	</body>
</html>

Let's Develop It

Lifetime 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 in an alert (see below) like so: "You will need n to last you until your old age of n"

alert(answer);

The if statement

JavaScript can run through code based on conditions


if (condition here){
	// statement to execute
}
						

var bananas = 1;
if (bananas < 2){
	console.log("You should buy more bananas!")
}
Note: you can write comments that only you, not the browser reads 

// comment on one line
/* comment on 
	multiple lines
*/

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)

Logic

&& AND
|| OR
! NOT 

var bananas = 5;
var oranges = 2;
if (bananas > 3 && oranges > 3){
	console.log('Eat fruit!');
}
if (bananas < 2 || oranges < 2){
	console.log('Buy fruit!');
}
if (!(bananas >= 0)){
	console.log('How do you have negative bananas?');
}

If/Else Statement

You can use else to perform an alternative action if the "if" fails


var bananas = 5;
if (bananas > 3){
	console.log('Eat a banana!');
} else {
	console.log('Buy a banana!');
}

If/Else Statement

You can use else if to have multiple choices


var age = 20;
if (age >= 35) {
	console.log('You can vote AND hold any place in government!');
} else if (age >= 30) {
	console.log('You can vote AND run for the House OR Senate!');
} else if (age >= 25) {
	console.log('You can vote AND run for the House!');
} else if (age >= 18) {
	console.log('You can vote!');
} else {
	console.log('You have no voice in government (yet)!');
}

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!"

Functions

Functions are re-usable collections of statements

Declare a function 

function sayHi(){
	console.log('Hi!');
}
Call the function 

sayHi();

Arguments

Functions can take named arguments


function sayHi(name){
	console.log('Hi' + name + '!');
}
sayHi('Gloria, the dinosaur');
sayHi('Harold, the hippo');

var name = 'Pip, the mouse';
sayHi(name);

Arguments

Functions can take MULTIPLE named arguments


function addNumbers(num1, num2){
	var result = num1 + num2;
	console.log(result);
}

addNumbers(5, 6);

var number1 = 12;
var number2 = 15;
addNumbers(number1, number2);

Return values

Functions can return a value


function addNumbers(num1, num2){
	var result = num1 + num2;
	return result; //Anything after this line won't be read
}
var sum = addNumbers(5, 6);

Variable Scope

JavaScript variables have "function scope." They are visible in the function where they are defined.

A variable with "local" scope: 

function addNumbers(num1, num2){
	var result = num1 + num2;
	return result; //Anything after this line won't be read
}
var sum  = addNumbers(5, 6);
console.log(result); //will return undefined because result only exists inside the addNumbers function

Variable Scope

Variables that are defined outside of a function are in the "global scope," and are visible to your entire script.

A variable with "global" scope: 

var result;
function addNumbers(num1, num2){
	result = num1 + num2;
	return result; //Anything after this line won't be read
}
var sum  = addNumbers(5, 6);
console.log(result); //will return 11 because the variable was defined outside the function

Variable Scope

If a function argument or variable declared in a function has the same name as a globally-scoped variable, the function will not use the global variable.


var result;
var num1 = 1;
var num2 = 2;
function addNumbers(num1, num2){
	var result = num1 + num2;
	return result;
}
var sum  = addNumbers(5, 6);
console.log(result); //will return undefined because it was redeclared inside the function
console.log(sum); // will return 11 because addNumbers used the function arguments 5,6 not the global num1, num2

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 lifetime supply
 </button>

Bonus Problem 1

Modify your calculator to ask how old the user currently is, then use that value in your calculations.
Hint: use prompt()

Bonus Problem 2

What happens if the user hits "cancel" at the prompt or enters a string of text? Use if and else if statements to handle three unexpected inputs:

  • The user hit "cancel", so we shouldn't do any calculations or tell them anything.
  • The user entered an age less than zero or greater than oldAge.
  • The user entered something that can't be calculated.
    Hint: use isNaN(age) to check if age is a numeric value.

Questions?

?