Intro to JavaScript
What is it?
JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.
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.
How to open the web console.
Chrome:
F12 (pc)
Command+Option+J (mac)
Scratch JS - A Chrome Dev Tools extension that allows you to write and execute blocks of JavaScript right in the console.
Values & Operators
Numbers are represented as, well, simple numbers in JavaScript.
13 -27 19.84 3e2
3 x 10 = 300
2
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
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 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
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 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 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
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 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
Variables & Functions
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.";
<!DOCTYPE HTML> <html> <head> <title>JavaScript Practice</title> </head> <body> <script> // Our scripts go here </script> </body> </html>
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 follow a set of naming rules.
var theName = 'Will'; var catch22 = 22; var city_name = 'Muncie';
var the.name = 'Will'; var 22catch = 22; var city name = 'Muncie';
Correct
Incorrect
Variable values are flexible and can be altered freely.
var puddingCount = 0; console.log(puddingCount); // 0 puddingCount = 30; console.log(puddingCount); // 30
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.
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!'); }
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.'); }
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
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.'); }
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]
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.
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
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
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
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
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 example, say you wanted to log every number from 1-10.
for (var i = 1; i <= 10; i++) { console.log(i); }
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
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
for (var i=1; i <= 100; i++) { }
for (var i=1; i <= 100; i++) { if (i % 3 == 0) { console.log('Fizz'); } else { console.log(i); } }
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); } }
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); } }
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); } }
1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz
JavaScript and Learning It
Don't be afraid to break stuff!
JavaScript or Stranger Things