Welcome

Intro to JavaScript

Who am I?

Daniel Yuschick

UI Developer
HTML, CSS, JavaScript
SVG, Design, Animation & Accessibility
Horror buff
Metalhead
Drummer
Dog owner
Lover of waffles

JavaScript

What is it?

Has almost nothing to do with Java
Lives in the browser
Intended to add functionality & interaction
Is changing what it means to be Front-End
Current version 5
Version 6 (ES6) is in the process of rolling out

JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.

getting started

Web Console:

The Web Console shows you information about the currently loaded Web page, and also includes a command line that you can use to execute JavaScript expressions in the current page.

getting started

How to open the web console.

Chrome:

F12 (pc)

Command+Option+J (mac)

getting started

Scratch JS - A Chrome Dev Tools extension that allows you to write and execute blocks of JavaScript right in the console.

Add Extension

digging into

Values & Operators

Numbers

Strings

Booleans

Objects

Functions

Undefined

Numbers

Numbers are represented as, well, simple numbers in JavaScript.

3 x 10  = 300

Numbers

Performing arithmetic requires the use of Operators.

3 + 5 = 8
7 - 3 = 4
2 * 4 = 8
9 / 3 = 3
3 % 3 = 0

+ - * / %

Examples

((5 * 3) + (7 - 1)) / 3 = ???

Try

Numbers

NaN (Not a Number)

0 / 0 = NaN

NaN is returned when an equation doesn't yield a precise, meaningful result. If NaN is returned, first verify that all the values being used in the equation are of the Number value type.

Strings

Strings are used to represent text and are written by enclosing their content in single or double quotes.

'Mike, I found the chocolate pudding!'

'Always lying saying she's out.' = ???

Try

Strings

Some strings require special characters, such as quotes or new lines. These can be achieved by escaping the characters with a backslash.

'Always lying saying she\'s out.' = ???

Try

'Found it!\n I knew she was hiding it.' = ???

Strings

Strings can be built using the + operator in what's called Concatenation.

"We never would've upset you " +
"if we knew you had superpowers." = ???

Try

Boolean

Boolean values return True or False depending on a condition.

11 > 9 = true
10 - 3 == 0 = false
"String" == "String" = true
11 >= 15 = false
"Eleven" != "eleven" = true

Examples

Comparisons

Use comparisons to return boolean values.

==  (equal to)
!=  (not equal to)
=== (equal value and type)
!== (not equal value or type)
<   (less than)
>   (great than)
<=  (less than or equal to)
>=  (greater than or equal to)

Logical Operators

Logical operators serve as translations for 'And', 'Or', and 'Not' to return Boolean values.

&&  (and)
||  (or)
!   (not)

3 > 1 && 10 < 20 = true
10 == 9 || 11 != 'Eleven' = true 
!true = false

Examples

Adding Power

Variables & Functions

Terminology

Expression

An expression produces a value and can be written wherever a value is expected. The Values examples in the last section would be considered expressions.

Statements

Roughly, a statement performs an action. Loops and if statements are examples of statements. A program is basically a sequence of statements. Statements typically end with a semicolon.

"This string value is an expression"

"This is a (useless) statement.";

Getting Set Up

<!DOCTYPE HTML>
<html>
<head>
    <title>JavaScript Practice</title>
</head>
<body>

<script>
    // Our scripts go here
</script>

</body>
</html>

variables

var name = 'Will';
var num1 = 20;
var num2 = 5;
var num3 = num1 * num2; // 100
var tbd;

To catch and hold values, JavaScript provides Variables.

var name = 'Will',
    num1 = 20,
    num2 = 5,
    num3 = num1 * num2, // 100
    tbd;

Shorthand

variables

Variables follow a set of naming rules.

Names can be any non-reserved word like var or new
They can include numbers
But must begin with a letter
Names can't include spaces or punctuation
Except $ and _

var theName = 'Will';
var catch22 = 22;
var city_name = 'Muncie';

var the.name = 'Will';
var 22catch = 22;
var city name = 'Muncie';

Correct

Incorrect

variables

Variable values are flexible and can be altered freely.

var puddingCount = 0;
console.log(puddingCount); // 0

puddingCount = 30;
console.log(puddingCount); // 30

variables

Variable values are flexible and can be altered freely.

Try

Create a variable and assign it a value.

Alter its value then log it in the console.

Conditionals

Often times the execution of statements is dependent upon a condition; a Boolean value returned from an expression.

Conditional execution is written with If Statements.

var foundWill = false;
if (foundWill) {
    console.log('Welcome home, kid.');
} else {
    console.log('Keep looking!');
}

Conditionals

If Statements can execute their own expressions.

var foundWill = false;
if (typeof foundWill == 'boolean') {
    console.log('foundWill is a Boolean');
} else {
    console.log('foundWill is not a boolean.');
}

Conditionals

If Statements can execute their own expressions.

var foundWill = 'Not yet';
if (typeof foundWill == 'boolean') {
   console.log('foundWill is a Boolean');
} else {
   console.log('foundWill is a '+ typeof foundWill +'.');
}

foundWill is a string.

Result

Conditionals

If Statements can execute their own expressions.

var color = 'red',
    num = 10;
if (color == 'red' && num <= 10) {
    console.log('Both conditions are met.');
} else {
    console.log('One or both conditions were not met.');
}

Conditionals

Try

Create two variables, num1 and num2, that store different numbers.

Write an if statement that compares the two values and logs the following message in the console:

[num1] is greater than [num2]

else

[num2] is greater than [num1]

Conditionals

var num1 = 11,
    num2 = 10;
if (num1 > num2) {
    console.log(num1 +' is greater than '+ num2);
} else {

    console.log(num2 +' is greater than '+ num1);
}

11 is greater than 10

Result

That feeling when your script runs correctly.

Conditionals

var num1 = 11,
    num2 = 11;
if (num1 > num2) {
    console.log(num1 +' is greater than '+ num2);
} else {

    console.log(num2 +' is greater than '+ num1);
}

11 is greater than 11

Result

Conditionals

If Statements can be extended for various conditions using else if.

var num1 = 11,
    num2 = 11;
if (num1 > num2) {
    console.log(num1 +' is greater than '+ num2);
} else if (num1 == num2) {
    console.log(num1 +' is equal to '+ num2);
} else {

    console.log(num2 +' is greater than '+ num1);
}

11 is equal to 11

Result

Conditionals

If Statements can be extended for various conditions using else if.

var num1 = 9;
if (num1 < 100) {
    console.log(num1 +' is medium.');
} else if (num1 < 10) {
    console.log(num1 +' is small.');
} else {

    console.log(num1 +' is large.');
}

9 is medium.

Result

Loops

JavaScript loops are used to repeatedly run a block of code - until a certain condition is met. When developers talk about iteration or iterating over, say, an array, it is the same as looping.

Loop Types

Do
For
While

Loops

For example, say you wanted to log every number from 1-10.

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
...

For Loops

For example, say you wanted to log every number from 1-10.

for (var i = 1; i <= 10; i++) {
    console.log(i);
}

For Loops

For example, say you wanted to log every number from 1-10.

for (var i=1; i <= 10; i++) {
    console.log(i);
}

1
2
3
4
5...

Result

All Together Now

Let's combine variables, arithmetic, conditions, and loops in a common exercise called FizzBuzz.

Loop 1 through 100

If the number is divisible by 3 log 'Fizz'

If the number is divisible by 5 log 'Buzz'

If the number is divisible by both log 'FizzBuzz'

Else just log the number

All Together Now

for (var i=1; i <= 100; i++) {
    








}

All Together Now

for (var i=1; i <= 100; i++) {
    if (i % 3 == 0) {
        console.log('Fizz');
    } else {
        console.log(i);
    }




}

All Together Now

for (var i=1; i <= 100; i++) {
    if (i % 3 == 0) {
        console.log('Fizz');
    } else if (i % 5 == 0) {
        console.log('Buzz');
    } else {
        console.log(i);
    }


}

All Together Now

for (var i=1; i <= 100; i++) {
    if (i % 3 == 0) {
        console.log('Fizz');
    } else if (i % 5 == 0) {
        console.log('Buzz');
    } else if (i % 3 == 0 && i % 5 == 0) { 
        console.log('FizzBuzz');
    } else {
        console.log(i);
    }
}

All Together Now

for (var i=1; i <= 100; i++) {
    if (i % 15 == 0) {
        console.log('FizzBuzz');
    } else if (i % 3 == 0) {
        console.log('Fizz');
    } else if (i % 5 == 0) {
        console.log('Buzz');
    } else {
        console.log(i);
    }
}

All Together Now

1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz

Final Thoughts

JavaScript and Learning It

Final Thoughts

Don't be afraid to break stuff!

Questions?

JavaScript or Stranger Things

Thank You

Guest Lecture - Intro to JavaScript

By yuschick

Guest Lecture - Intro to JavaScript

Performing a guest lecture on a brief Intro to JavaScript. This presentation is themed after the tremendous Netflix series Stranger Things.

1,155

Welcome

Who am I?

Daniel Yuschick

JavaScript

getting started

getting started

getting started

digging into

Numbers

Strings

Booleans

Objects

Functions

Undefined

Numbers

Numbers

Numbers

Strings

Strings

Strings

Strings

Boolean

Comparisons

Logical Operators

Adding Power

Terminology

Getting Set Up

variables

variables

variables

variables

Conditionals

Conditionals

Conditionals

Conditionals

Conditionals

Conditionals

Conditionals

Conditionals

Conditionals

Conditionals

Loops

Loops

For Loops

For Loops

All Together Now

All Together Now

All Together Now

All Together Now

All Together Now

All Together Now

All Together Now

Final Thoughts

Final Thoughts

Questions?

Thank You

Guest Lecture - Intro to JavaScript

More from yuschick