LEARN TO CODE – OPERATORS – Conditional Logic

View Github Repository Open presentation in a new window

jeseekia

See all presentation from jeseekia

LEARN TO CODE – OPERATORS – Conditional Logic

0 0

learn-to-code-javascript

Beginner workshop for learning to code using JavaScript given during Hack WSU May 2105 by Jeseekia Vaughn

On Github jeseekia / learn-to-code-javascript

LEARN TO CODE

INTRODUCTION

Jeseekia Vaughn

  • Mechanical Engineering Senior at Wayne State University
  • Frontend Developer
  • Girl Develop It, Detroit
  • @MetaDevGirl

OVERVIEW

  • What is programming
  • Setup
  • What is JavaScript
  • Variables
  • Data Types
  • Operators
  • Conditional Logic
  • Loops
  • Functions

WHAT IS PROGRAMMING?

The long def:

The process of taking an algorithm and encoding it into a notation, a programming language, so that it can be executed by a computer.

The short def:

Telling a really dumb item (your computer) what to do.

GETTING STARTED

TODAY:

Me You Computer Browser

AFTER TODAY:

Text editor: Sublime Text 2 Language: Depends on what you want to do

“Hello World”

HELLO WORLD

alert(“Hello World”);

console.log("Hello World");
alert("Hello World");

THE SECRET SOCIETY OF PROGRAMMING

THE TWO BIG SECRETS OF THE PROGRAMMING SOCIETY….

ANYONE CAN DO IT!

NOOB == VETERAN

NOW FOR THE GOOD STUFF!

LANGUAGE

JavaScript

JAVASCRIPT

JavaScript is the programming language for the web.

Whether you choose to pursue frontend or backend development, JavaScript is crucial to know

Provides the functionality or interactivity on most sites today

JAVASCRIPT

JavaScript was created by Brendan Eich back in 1995, over the course of 10 days.

It is now one of the most popular languages around.

JAVASCRIPT

  • is loosely typed
  • runs in browsers
  • is used on front end
  • is used on the back end
  • can be used to create games
  • is your friend

VARIABLES

Programming involves storing and manipulating data.

Programming would not be what it is today if we could not store our data.

CONTAINERS FOR DATA

Shoe box example. Clear plastic container. Box holds whatever you want to put in it. Have a box. Know you want to store shoes in box. Label box. Put shoes in the box.
						
						var myVariable = “Hello World”;
var myName = “Jeseekia”;
var myAge = 25;
myStudentStatus = true;

CONTAINERS FOR DATA

Initialization: Declare a variable. Declaration: Assign it a value. In that order (together or separately)

VARIABLES

var name = value;
var myVariable = “Hello World”;
var myName = “Jeseekia”;
var myAge = 25;
myStudentStatus = true;

DATA TYPES

NOT ALL DATA IS CREATED EQUAL

Number

Any number including floating point, negative, and scientific notation

var myNumber = 4;
var myNumber2 = 4e5;
var myNumber3 = -4.500;

Boolean

Either true or false.

var myBoolean = true;
var myBoolean2 = false;

String

A series of one or more characters.

var myString = "Jeseekia";
var myString2 = "@metadevgirl";
var myString3 = "jeseekia@gmail.com";

VARIABLE STATEMENT

var myStatement = myName + “is” + myAge + “years old.”;

Concatenation: joining character strings end to end.

LET'S CODE!!!!

JSFIDDLE.NET JavaScript console

  • Your mission: Write a top secret variable statement
  • Declare a variable: myName (string value)
  • Declare a variable: myAge (number value)
  • Create a variable statement: myStatement
  • Use the alert() function to call your statement

OPERATORS

ARITHMETIC OPERATORS

Addition + Subtraction - Multiplication * Division / Modulus % Increment ++ Decrement --

OPERATORS

COMPARISON OPERATORS

Equal to == Equal value and equal type === Not equal != Not equal value or not equal type !== Greater than > Less than < Greater than or equal to >= Less than or equal to <=

OPERATORS

LOGICAL OPERATORS

And && Or || Not !

Conditional Logic

Computers (or their programs) make decisions based on conditional logic. A program evaluates a Boolean Expression, or a condition and determines what it should do next.

IF STATEMENT

if (condition) {
	Statement
}

IF STATEMENT

j = 9;
if (j<3) {
	alert("J is less than 3.")
}

IF/ELSE IF/ELSE STATEMENT

if (condition1) {
	Statement1
} else if (condition2) {
	Statement2
} else {
	Statement3
}

IF/ELSE IF/ELSE STATEMENT

j = 9;
if (j<3) {
	Statement1
} else if (j=1) {
	Statement2
} else {
	Statement3
}

LET'S CODE!!!!

JSFIDDLE.NET JavaScript console

  • Your mission: Write a top secret if statement
  • Create a variable: age
  • Create an if statement
  • The statement should display the user's age if it is over 18.
  • Use the alert() function to display the age

LOOPS

When we want to execute a block of code more than once, we can use a loop. There are many types including:

  • For
  • While
  • Do While

FOR LOOPS

for ([initialization]; [condition]; [final statement]){
	  //DO SOMETHING
}

FOR LOOPS

for (i=0; i<4; i++){
console.log(i);
}

INFINITE LOOPS

DO NOT RUN THIS CODE

Infinite loops are loops that never evaluate to false and will continue looping indefinitely (until your browser/program crashes.)

for (i=0; i=4; i++){
	console.log(myStatement);
}

LET'S CODE!!!!

JSFIDDLE.NET JavaScript console

  • Your mission: Create a for loop
  • Modify the for loop
  • It should show the value of i
  • The loop should run 10 times
  • Use the console.log() function to display i

FUNCTIONS

function checkApples(numApples) {
 if (numApples === perfectNumber) {
	 alert(“You ate the perfect number of apples!”);
	 }
		 else if (numApples > perfectNumber) {
			 alert(“You ate way too many apples.”);
			 }
			 else {
			 	alert(“You didn’t eat enough apples.”);
}
				}

FUNCTIONS

checkApples();     //call the checkApples function
checkApples(4);    //call the checkApples for numApples=4

TOOLS OF THE TRADE

COMMON PRACTICES/TIPS/RESOURCES

Camel Case

thisIsCamelCasing

Indenting

Indenting is bulletpointing for code

Create outlined/readible code

For human ease

Commenting

// This is a JavaScript comment

Keep details for each section in code

Comments aren't read by computer/program

Pair Programming

JavaScript Resource

JavaScript reference on the Mozilla Developer Network

Developer Tools

Chrome: Developer Tools in menu

Stack Overflow

Ask questions or find answers

Learn online

Codecademy: free

Sign up for Codecademy

Treehouse: $25/month

Get 50% off first month for www.teamtreehouse.com

Mentoring

Get one!

CLASS SURVEY

Grand Circus Survey

CONTACT ME

JESEEKIA

@metadevgirl

jeseekia@gmail.com

www.metadevgirl.com

ABSTRACT

Programming is the key to telling one of the least intelligent items in the world (your computer) what to do and how. Contrary to popular belief, being a programmer doesn't mean years of grueling work. All you need to start are the basics and a language of choice. We will use JavaScript, a widespread language running in all browsers and most websites active today. JavaScript is a versatile language that is easy to get started in and doesn't require complicated setup to use. With JS we will learn the basics of programming including variables, data types, logic statements, functions, and simple best practices to get you started as a programmer.

Instructor Bio

Jeseekia Vaughn is a student in Wayne State University’s College of Engineering majoring in Mechanical Engineering. Jeseekia spends time outside of school doing freelance web development and teaching. Jeseekia is interested in combining mechanical system knowledge and mobile app development. She is looking forward to research experiences to serve as a bridge to Ph.D studies. To positively impact diversity in STEM fields, she recently served on the board of directors for the National Society of Black Engineers and is a Co-Organizer/Instructor with Girl Develop It Detroit. In her free time Jeseekia codes and is an avid gamer.

LEARN TO CODE