JavaScript guide 2020 Learn JavaScript

Get courses - https://www.udemy.com/user/lars51/
JavaScript
Powers the web

Quick introduction to Course and JavaScript
● JavaScript Language Fundamentals
● Explore the course
● Tools and resources used in the course
● How to setup and prepare to write JavaScript

Tools needed
You probably already have all you need to write and run JavaScript
In the course I use brackets.io a free open source text editor.
http://brackets.io/
Also use Chrome as the browser utilizing the devTools.
https://developers.google.com/web/tools/chrome-devtools/

Resources to reference JavaScript
Modern JavaScript focused means that we do cover current
syntax as well as foundational code.
Resources and content will be references within the lessons
particaularly content from MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript
Code converter to older versions http://babeljs.io/
Syntax compatibility table
http://kangax.github.io/compat-table/es6/
No frameworks or JavaScript libraries you can do it all with
regular vanilla JavaScript.

Lesson Challenge
Setup you working development environment and get ready to write some
code.
You can use online editors like as well to try the code and run it.
https://codepen.io/
I’m using Brackets which is a free code editor available at
http://brackets.io/

More about JavaScript
● What JavaScript is
● How coding works
● Code example
● Tools to write JavaScript - Browser Console
● Write some code JavaScript

History Brief
● Originally called LiveScript - in 1995
● Originally made by NetScape to provide interaction and more functionality in the browser
● Renamed to JavaScript December 1995
● JavaScript compared to Java - only in name similar.

Versions ECMAScript
ECMAScript is the standardized format of JavaScript. You will see JavaScript
referred to as different version of ecmascript or ES.
ES Version Official name
1 ECMAScript 1 (1997)
4 ECMAScript 4 Never released.
5.1 ECMAScript 5.1 (2011)
6 ECMAScript 2015 *** this is where it gets confusing
7 ECMAScript 2016
8 ECMAScript 2017
9 ECMAScript 2018

Introduction - Why JavaScript
JavaScript is everywhere - all your favorite and also the ones you don’t
like use JavaScript. Makes content come to life - allows for interaction with
content and makes things happen.
Dynamic programming language that, when applied to an HTML document,
can provide dynamic interactivity on websites.
- Used in all browsers
- Most popular language
- Website and web apps - JavaScript RULES

What is code - What is JavaScript
Set of instructions for what you want to happen.
Example : When a new person comes to your website, ask their name.
Show a welcome message with their name.

The code for example
<div>What is your name ?
<input type="text">
<button>Send</button>
</div>
<script>
document.querySelector("button").addEventListener("click", function
() {
document.querySelector("div").textContent = "Hello, " +
document.querySelector("input").value;
})
</script>
** Notice the repetition of syntax

Chrome Browser Console
The developer 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. Open try
it.
● Will be used throughout the course.
● Test debug - output content from our code
● Most browsers - you can write and execute javascript from
your browser

Open Dev Tools on Chrome
When you want to work with the DOM or CSS, right-click an element on the page and select Inspect to jump into the Elements
panel. Or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
When you want to see logged messages or run JavaScript, press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux,
Chrome OS) to jump straight into the Console panel.

Try Console console.log
Outputs a message to the Web Console.
Try it: console.log(“Hello”);
console.log prints the element in an HTML-like tree
TIP : When you reload it goes away
Try it: console.dir(document);
*more about the document Object (DOM) later
console.dir prints the element in a JSON-like tree
TIP : Undefined means nothing got returned and
function expect a return within the console.

More Console Output
Numbers blue in the console
Strings are black
console.log("Hello World")
console.dir(document)
console.table({first:"test",val:9});
console.error("Hello World")
TIP clear() or press clear button to clear without refresh

Lesson Challenge
Open browser console
Type console.log(“Hello World”);
Type more than one line
var a = “Hello”;
console.log(a);

More about JavaScript
● Create index.html and app.js file
● Write some code JavaScript
● Run the file in your browser

Alert
The Window.alert() method displays an alert dialog with the optional
specified content and an OK button.
window.alert("Hello world!");
alert("Hello world!");
TIP : You don’t need to include the window object as it is
assumed
window.alert(message);

Code Snippet
var myName = "Laurence";
var myCourse = "JavaScript";
console.log(myName);
alert("welcome");
var myAge = 40;
console.log(myAge);

Try in the console then in the index.html file
Write an alert in your browser.
Try it in your browser console.
alert(“hello”);
Say hello to visitors
TIP Double quotes and single quotes
computer doesn’t care, the standard is style
that is commonly used. Double for strings.

The language - syntax
How does the browser know what to do????
alert(“hello”);
Function - alert() - more about this in the later lessons
Message - “hello”
End of statement - ;
TIP: A semicolon is not necessary after a statement
if it is written on its own line. But if more than one
statement on a line is desired, then they must be
separated by semicolons. It is considered best
practice, however, to always write a semicolon after
a statement, even when it is not strictly needed.

Add JavaScript to website html file
Inside html file or linked to script file
<script src=”code.js”></script>
<script>
///
</script>
TIP : Alert stops the code
execution, if in top does not
output the content until the
button is clicked. Place
JavaScript at the bottom so
the rest of the code can
render.

Run your index.html file in the browser
Getting started with JavaScript is easy: all you need is a modern Web
browser.
Create index html file and open it in a browser
Add JavaScript

Comments in Code JavaScript
● How values are used and assigned
● What variables are
● Var

Comments and Whitespace
Comments // for single line
/* for multiple line comments */
Comments in JavaScript
TIP : whitespace is ignored in JavaScript, you can use
it for writing code that is more readable and
understandable

Code Snippet
var myCourse = "JavaScript";
alert("welcome");
var myAge = 40; // Shhh I don't give my real age
console.log(myAge);
/*
You can write a bunch of stuff here and nothing will be rendered out.
Secret for web developers.
*/

Lesson Challenge
console.log(“Hello World”);
Type more than one line
var a = “Hello”; console.log(a);
Add some comments and an alert.
Create an index.html file run the code , add a js file run
the code. Add javascript to your webpage both in the
script tags and as a linked file. Use alert. Create a
welcome message.

Declarations Variables JavaScript
● How values are used and assigned
● What variables are
● var

Why use Variables?
Symbolize the values within your applications
Example
“I really really enjoy working with JavaScript”
var message = “I really really enjoy working with JavaScript”;
message = “Look I can change this value”;
Assign a value to your variables with = sign

Declare your Variables
The var statement declares a variable, optionally initializing it
to a value.
var x = 1;
console.log(x);
x = 2; - update value
console.log(x);

Lesson Challenge
Declare a variable that holds a welcome message. Change
the welcome message to a NEW message. Output it in the
console.
Declare a variable that holds your name, change it to your
friends name and output it into the console.

Code Snippet
//console.log(a);
var a = "Hello World";
console.log(a);
a = "Welcome Back";
console.log(a);
myName = "John";

Variables Let and Const with ES6
● Boolean data type
● Let
● Const
● Code Block with condition

Condition Check
Variables can have another data type boolean
Boolean can be either true or false;
Like a switch, commonly used for conditions
if(true){
/// Runs this code only if the check comes back as true
}

Code Snippet
var message;
console.log(message);
message = null;
var myLight = false;
console.log(myLight);
myLight = true;
if (myLight) {
console.log(myLight);
}
var score1, score2, score3, score4;
var a = "Hello”;
var b = 10;
var c = false;
console.log(a);

Variable Types
var - Declares a variable, optionally initializing it to a value.
let - Declares a block-scoped, local variable, optionally
initializing it to a value. Blocks of code are indicated by {}
const - Declares a block-scoped, read-only named constant.
Cannot be changed.

Variables ES6
let a = “Hello World”; - initialize variables within the scope
const a = “Hello World”; - initialize variables within the scope
cannot be changed
More on scope later in the course!

Variables - let
new keyword to declare variables: let
‘let’ is similar to var but has scope. Only accessible within the block of code that it is defined. let restricts access to the
variable to the nearest enclosing block.
Example
let message = “I really really enjoy working with JavaScript”;
message = “Look I can change this value”;

Code Snippet
let myMessage = "Welcome";
if(true){
let myMessage = "New one";
console.log(myMessage);
}
console.log(myMessage);

Code Snippet
var message;
message = null;
if (myLight) {
let message1 = "Hello";
}
console.log(message1);

Variables - const
new keyword to declare variables: const
‘const’ is similar to var but has scope. Only accessible
within the block of code that it is defined. Also for values
that are not going to be changed and are fixed with a
read-only reference to a value.
const message = “I really really enjoy working with
JavaScript”;
message = “Oh no not going to work”;
-

Variables
Const rules
- const cannot be reassigned a value
- const variable value is immutable
- const cannot be redeclared
- const requires an initializer
TIP : variables must be declared before you use them.
-

Code Snippet
let counter1 = 5;
counter1++;
console.log(counter1);
const counter2 = 10;
counter2++;
console.log(counter2);

Lesson Challenge
Declare a variable called message with let. Check to see if
it exists and if it does update the value. Output the variable
value to the console.

Code Snippet
let message = "Welcome";
if (message) {
message = "Updated Message";
}

Data Types Variable setup
● Null
● Undefined
● Declare multiple variables
● CamelCase
● Variable naming rules

Variables declaring null vs undefined
var a; - initialize as undefined
A variable declared using the var or let statement with no assigned
value specified has the value of undefined.
Undefined data type
var test;
console.log(test);

Declare multiple variables in one statement
Comma separate to declare multiple variables.
var a,b,c,d;

TIP camelCase
camel case is more readable
var userfirstname = “Laurence”;
Or
var userFirstName = “Laurence”;

Variable naming
must start with a letter, underscore (_), or dollar sign ($).
Subsequent can be letters of digits. Upper or lower case. No
spaces
no limit to the length of the variable name.
variable names are case sensitive
Cannot use reserved words.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Ref
erence/Lexical_grammar#Keywords

Lesson Challenge
Create some variables update values and output them in the console.
Also use the code block checking for a true value to output a console
message as a secret message. Then change to false and check again
see the different output.

Code Snippet
const test = true;
let message = "Welcome to JavaScript";
let moreStuff;
if(test){
moreStuff = "Yes the content is there";
let inBlock = "This is a secret";
console.log(inBlock);
}
console.log(moreStuff);

JavaScript prompt
● How to get user input as variable
● Prompt function

Prompt
The Window.prompt() displays a dialog with an optional message prompting
the user to input some text.
let userName =window.prompt("What is your Name?");
TIP : You don’t need to include the window object as it is
assumed
result = window.prompt(message, default);

Lesson Challenge
Add a value to a variable using prompt
Create a variable with a welcome message add the new input from the
prompt to the string using + between the variables.
Output the result in the console.

Code Snippet
let userName = prompt("What is your name?");
let message = "Welcome to my site, ";
console.log(message + userName);

JavaScript Template literal
● How to use quotes
● Backticks for templates
● Variables within strings
● Double and single quotes

Challenge #1 - Template literals
Use prompt to ask the user’s name
Create a template show message.
Output the value in the console.
https://developer.mozilla.org/en-US/docs/Web/API/Wind
ow/prompt
https://developer.mozilla.org/en-US/docs/Web/JavaScrip
t/Reference/Template_literals

Challenge #1 Code
<script>
let userName = prompt("What is your name?");
let message = `Welcome ${userName}`;
</script>

Data Types
● Data Types combining variables together
● + and strings vs numbers
● Type conversion
● Type coercion

Data Types of ECMAScript standard
var a = true; // true of false = Boolean
var b = 100; // can be written with or without
decimal point = Number
var c = ‘Hello World’; // can be inside single or
double quotes = String
var d = null; // It is explicitly nothing. = Null
var e; // has no value but is declared = Undefined
var f = Symbol("value"); // represents a unique
identifier. = Symbol (new in ECMAScript 2015). A
data type whose instances are unique and
immutable.
and Object everything else :)

type conversion
let temp;
temp = 10;
temp = String(10);
temp = String([1,2,3,4])
temp = (100).toString();
temp = Number(‘10’);
temp = Number(true);
temp = Number([1,2,3,4]) //NaN not a number
console.log(temp);

type coercion
when the type is converted by JavaScript
let temp;
temp = 10;
temp = temp + 5;
temp = temp + “five”;
console.log(temp);

Fun with Types
“Hello” + “world”
“5” + 5
“10” - 5
TIP JavaScript quirk - dynamic types changes the type
“Hello” - “world” = NaN
Convert data type with Number() or String()

Lesson Challenge
Create a string
Convert to different data types
Get data type of variable
Output data type to console

Lesson Challenge Code
<script>
let myNum = "5";
myNum = Number(myNum);
console.log(myNum);
console.log(typeof myNum);
</script>

Lesson Challenge
Fix this code to output 15 not 510
let a = "5";
let b = "10";
console.log(a+b);

JavaScript Operators
● How to use operators
● What are the available operators
● Order of Arithmetic operators

Arithmetic operators do the math
Arithmetic operators take numerical values (either literals or
variables) as their operands and return a single numerical
value. The standard arithmetic operators are addition (+),
subtraction (-), multiplication (*), and division (/). standard
arithmetic operations (+, -, * /),
erence/Operators/Arithmetic_Operators

Operator precedence - The order of things
Operator precedence determines the way in which operators are
parsed with respect to each other.
Operators with higher precedence become the operands of
operators with lower precedence.
Multiplication Division Addition Subtraction
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen
ce/Operators/Operator_Precedence

Modulus
Remainder (%) Binary operator. Returns the integer remainder
of dividing the two operands. 12 % 5 returns 2.

JavaScript Operators
● Comparison operators
● Assignment operators

Operators with arithmetic and Assignments
Math operators + - * /
Increment ++ --
Assignment operators
= += =+ *= /=

Assignment Operators
Operators can be used to assign values and perform
calculations. An assignment operator assigns a value to its left
operand based on the value of its right operand.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refere
nce/Operators/Assignment_Operators

Shorthand = += =+ *= /= ++ --
Meaning and shorthand
-= += =+ *= /= ++ --

Assignment Operators multiple variables
You can assign values to more variables
within one statement.

Lesson Challenge
What will the output of the total be for this code
let firstNum = 5;
let secondNum = 10;
firstNum++;
secondNum--;
let total = firstNum + secondNum;
console.log(total);
total = 500 + 100 / 5 + total;
console.log(total);
Try some operators for yourself combine and guess the output

Challenge #2 - Miles to Kilometers Converter
Use prompt to ask the number of miles
Convert miles to Kilometers (* 1.60934)
Create a template to output the message.
Output the prompt value in the console.
*Bonus if you convert to number

Challenge #2 Code
<script>
let numMiles = prompt("How many Miles?");
let kiloConverter = numMiles * 1.60934;
kiloConverter = Number(kiloConverter);
console.log(kiloConverter);
let message = `${numMiles} Miles is ${kiloConverter}`;
</script>

More JavaScript Operators
● Booleans
● Comparison operators
● Truthy values
● Falsy values

Conditional operators and Comparisons
Evaluation of content whether it’s true or false.

Operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expre
ssions_and_Operators
Comparison Operators - used to check equal == greater than > less
than < returns Boolean value
Logical Operators - used to combine and compare

Truthy or Falsy
Falsy values
false
undefined
null
0
NaN
the empty string ("")

Truthy
Falsy values
True
Has value
1

Lesson Challenge
Check if a number exists and also check if it is greater than 50. Show a
message in the console.

JavaScript Conditions
● If statement
● else

Comparison Operators

Lesson Challenge
Use prompt to get a number from the user.
Check if the prompt value equals number 5 check without data type and
then check with the data type.

● If statement
● else if
● else

If else statement
The if statement executes a statement if a specified condition is
truthy. If the condition is falsy, another statement can be executed.
if (condition_1) {
statement_1;
} else if (condition_2) {
statement_2;
} else if (condition_n) {
statement_n;
} else {
statement_last;
}

The if statement executes a statement if a
specified condition is truthy. If the condition is
falsy, another statement can be executed.

Lesson Challenge
Check if a number is greater than 10 output message accordingly.
Also have a condition that if it is equal to output a message.

● Short ternary operator

Ternary Operator
The conditional (ternary) operator is the only JavaScript operator that
takes three operands. This operator is frequently used as a shortcut for
the if statement.
condition ? val1 : val2
var status = (age >= 18) ? 'adult' : 'minor';

Lesson Challenge
Check if variable value is odd or even use modulus to determine the
output.

● Multiple conditions
● Logical operators

Logical Operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

Lesson Challenge
Ask the users age via a prompt
Check if they are of age to enter 18+
Show message to allow or deny depending on the age using ternary
operator.
Set a membership boolean value and add second check to ensure the
user is a member and output a message to them if they are or are not
allowing or denying entry.

Challenge #3 - Hello Greeter
Set a default time 24 hour clock
Create a message to be output according to the time.
Example Good Morning
Output the message in the console.

Challenge #3 Code
<script>
let myTime = 22;
let output;
if(myTime < 11){ output = "Good Morning";}
else if(myTime >= 11 && myTime <= 17){ output = "Good
AfterNoon";}
else if(myTime > 17 && myTime < 23){ output = "Good Evening";}
else {output= "I'm Sleeping";}
console.log("time is "+myTime);
console.log(output);
</script>

● Switch statement

JavaScript Switch
The switch statement evaluates an expression,
matching the expression's value to a case clause,
and executes statements associated with that case,
as well as statements in cases that follow the
matching case.
https://developer.mozilla.org/en-US/docs/Web/JavaS
cript/Reference/Statements/switch

Switch example
switch (expression) {
case label_1:
statements_1
[break;]
case label_2:
statements_2
[break;]
...
default:
statements_def
[break;]
}

Lesson Challenge
Select a response depending on the name of the person in a variable
called person.

JavaScript Functions
● What are functions and how to use them
● Create functions

Functions
● Functions are blocks of reusable code - a set of statements that
performs a task or calculates a value.
● One of the fundamental building blocks in JavaScript.
● To use a function, you must define it somewhere in the scope from
which you wish to call it.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

Functions
function name(parameters) {
// code to be executed
}

Lesson Challenge
#1 Create a function to output a message from a variable into the console.
Invoke the function 3 times every time increasing the value of a global
variable that counts the number of times the function runs.
#2 Create a function to output into the console the results of adding 10 to
a number that is passed into the function.

Code Snippet
let output = "Hello World";
let counter = 0;
welcome(output);
welcome(output);
welcome(output);
function welcome(message) {
counter++;
let temp = counter + " times run";
console.log(temp);
}
let myNum = 50;
addTen(myNum);
function addTen(num) {
let temp = Number(num);
console.log(temp + 10);
}

● Parameters
● Multiple arguments
● Default argument value

Functions
Function parameters inside the parentheses () in the function
definition.
Function arguments values received by the function when it is
invoked.
function name(parameter1,parameter2,parameter3) {
// code to be executed
}

Function Default Arguments
Pass values into function to be used within the code.
Default parameters use ternary operator or condition.
Default function parameters allow named parameters to be
initialized with default values if no value or undefined is passed.

Lesson Challenge
Using your knowledge from earlier lessons create 3 different ways to set a
default value if a function is missing an argument value.
They should all produce the same output.

Code Snippet
adder1(10);
adder1(10, 50);
adder2(10);
adder2(10, 50);
adder3(10);
adder3(10, 50);
function adder1(numOne, numTwo = 5) {
console.log("number 1 " + numOne);
console.log("number 2 " + numTwo);
}
function adder2(numOne, numTwo) {
numTwo = numTwo || 5;
}
function adder3(numOne, numTwo) {
numTwo = typeof numTwo !== 'undefined' ? numTwo : 5;
}

● Return value

What functions need
Functions have 3 parts
1. Input - data that is sent into the function
2. Code - block of code that is run by the function
3. Output - value that is returned by the function

Return value of add or multiply
Create a quick math function that will take two numbers
and return the value.
function multiply(x, y) { return x * y;
} // there is no semicolon here

Lesson Challenge
Create a function that multiplies to values and returns the result.
Use this statement to output the result
console.log(multiplier(num1, num2));

● Execute from HTML elements

Functions as attributes
onclick="message()" in element
Runs the block of code in the function. There is a much better way to do this when you use the DOM but for now try
this.

Lesson Challenge
Create 3 buttons that will each update a different global variable. Output
the current values of each variable in the console.
<button type="button" onclick="message1()">Click 1</button>

JavaScript declaration vs expression
● Function expression
● Function declaration

How to create a function
// Function declaration
function test(num) {
return num;
}
// Function expression
var test = function (num) {
return num;
};

What’s the difference, hoisting…..
TIP : function declarations are hoisted to the top of the code by
the browser before any code is executed. If you need to call a
function before it’s declared, then, of course, use function
declarations.
test1(5); // will not work not hoisted
var test1 = function (num) {
return num;
};
test2(5); // will work
function test2(num) {
return num;
}

Lesson Challenge
Create two functions one as Function declaration and the other as
Function expression. They can both add a value to a number. They both
should work the same way.
console.log(test1(5));

JavaScript Function scope
● Global Scope values
● Local scope

Functions and Scope
Global vs. Local Variables

JavaScript function recursion
● Create a quick loop of content
● Function within itself

Recursion
A function can refer to and call itself.
function loop(x) {
if (x >= 10) return;
console.log(x);
loop(x + 1); // the recursive call
}
loop(0);

Lesson Challenge
Create a function that asks for a guess from the user. Use the guess
value to compare to see if the user guessed correctly let them know if
correct or incorrect. Call the function again until the guess is correct.
Bonus : using a ternary operator provide suggestion for the next guess
when the user is wrong.

JavaScript IIFE
● What are IIFE
● How IIFE work

IIFE functions
An IIFE (Immediately Invoked Function Expression) is a
JavaScript function that runs as soon as it is defined. (function ()
{ statements })(); It is a design pattern which is also known as a
Self-Executing Anonymous Function and contains two major
parts.

Code Snippet
(function () {
console.log('Welcome IIFE');
})();
(function () {
let firstName = "Laurence"; // can't access outside
})();
let result = (function () {
let firstName = "Laurence";
return firstName;
})();
console.log(result);
(function (firstName) {
console.log("My Name is " + firstName);
})("Laurence");

Lesson Challenge
Use an anonymous IIFE to output your name in the console.

JavaScript new ES6 Arrow format
● How to shorthand functions

Arrow functions
An arrow function expression (previously, and now
incorrectly known as fat arrow function) has a shorter syntax
compared to function expressions and lexically binds the
this value. Arrow functions are always anonymous.
https://babeljs.io/repl

Arrow functions
1. Declare variable - name of function to invoke it
2. Define body within {}
Default parameters

Lesson Challenge
Convert one of the earlier functions used in the course to arrow function format.
let test2 = (num) => num + 5;
var addFive1 = function addFive1(num) {
return num + 2;
};
let addFive2 = (num) => num + 2;
console.log(addFive1(14));

JavaScript Objects and Arrays
● How objects work
● What are arrays
● How to output the value of an object or array
● Using let and const with objects

JavaScript Objects
Contain more values in a single variable.
The values are written as name:value pairs
Property : Property Value
Property doesn’t need quotes same naming rules as variables.
Objects can contain functions which are referred to as methods when
inside an object.

Code Snippet
const car = {
color : 'red',
year:2010,
make:'Corvette',
brand:'Chevrolet',
price:50000
};

Objects
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/
Basics
Get property values.
const person = {age:25};
person.age - Dot notation
person['age'] - Bracket notation - more dynamic can use
variables to hold the property name.

Code Snippet
let a = 1;
const test = {
a1:"test 1",
a2:"test 2"
}
function tester(){
console.log(test['a'+a]);
a++;
}

Lesson Challenge
Favorite Things Object
Select something, your computer, car, house, friend and describe them as
a JavaScript object. What are their properties and what are those values?
Add to the values with dot notation and bracket notation. Output to
console.

JavaScript Object Method
● How objects work
● What are arrays
● How to output the value of an object or array
● Using let and const with objects

Object Methods
You can run functions within objects.
const person = {};
person.first = "Laurence";
person.last = "Svekis";
person.message = function () {
return 'hello ' + person.first;
}
person.age = 30;
person.alive = true;
console.log(person.message());

Lesson Challenge
Make a car that has methods to do things, setup as an object.
Add methods to turn on and drive.
Output console messages for the actions

JavaScript functions to create Objects
● Functions can be used to construct Objects

Functions to create Objects
function Car(miles,company,color,price){
this.color=color;
this.miles=miles;
this.price=price;
this.company=company;
}
const myCar1 = new Car(100,"Honda","Pink",60000);
const myCar2 = new Car(500,"Ford","Yellow",30000);

Lesson Challenge
Make some objects using functions to return the values.

JavaScript Objects and Arrays
● Memory reference Objects and Arrays
● Can be written as const as they reference data

Reference Types
Objects
Array
const lessons = [‘first’,’second’];
Object Literal
const myInfo = {first:’Laurence’,last:’Svekis’}
Accessed from memory as the value - reference to the
value

Objects and Arrays
const obj = {“one”:1,”two”:2} - you can change values but not
assign the object value
const array = [1,2,3,4,5]; - you can reassign but not redeclare the
array value
TIP Const indicates that it should not change.

JavaScript Arrays
● What are arrays and how to use them

Arrays
JavaScript arrays are used to store multiple values in a single
variable similar to objects
const shopping = ['bread', 'milk', 'cheese', 'hummus',
'noodles'];
console.log(shopping);
const theList = ['Laurence', 'Svekis', true, 35, null,
undefined, {test:'one',score:55},['one','two']];

Get the values
You access an array element by referring to the index number. 0
based index values start at 0.
theList[3];
arrayName[indexValue];

Lesson Challenge
Create an array with different data types, return the values of those data
types.
Get the values into the console of the below array.
const theList = ['Laurence', 'Svekis', true, 35, null, undefined, {
test: 'one'
, score: 55
}, ['one', 'two']];

JavaScript Array are Powerful
● Array memory reference
● Array Length
● Check if its an array
● Get indexOf array item
● Add and remove items from array Methods
● Splice remove from array at index value

Arrays and Array methods
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Lesson Challenge
Update your array using various methods
Transform the array below.
const theList = ['Laurence', 'Svekis', true, 35, null, undefined,
{test: 'one', score: 55}, ['one', 'two']];
into
['make me first, 35, null, undefined, { test: 'one'
, score: 55 }, ['one', 'two']];

Code Snippet
const theList = ['Laurence', 'Svekis', true, 35, null, undefined, {
test: 'one'
, score: 55
}, ['one', 'two']];
theList.length;
Array.isArray(theList);
theList[1] = "hello World";
theList.indexOf('Laurence');
theList.push("new one push");
theList.pop();
theList.shift();
theList.unshift("make me first");
theList.splice(1, 2);

JavaScript Arrays even more
● Sort arrays
● Reverse arrays
● Concat array together
● Find in array
● indexOf

Array Methods
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refere
nce/Global_Objects/Array

Code Snippet
const myArray = ["a", "hello", 4, 8, 2, "world", "javascript", "course",
99, 1];
const myArray2 = [5, 12, 8, 130, 44];
console.log(myArray);
myArray.sort();
myArray.reverse();
console.log(myArray.indexOf(50));
if (myArray.indexOf(50) === -1) {
console.log("not found");
}
let newArray = myArray.concat(myArray2);
console.log(newArray);
let found = myArray2.find(function (element) {
return element > 10;
});
console.log(found);

Array find
The find() method returns the value of the first element in the
array that satisfies the provided testing function. Otherwise
undefined is returned.
erence/Global_Objects/Array/find
const numArray = [77, 44, 2, 162, 18, 244, 71];
const over100 = numArray.find(function (el) {
console.log(el);
return el > 100;
});

Lesson Challenge
1. Transform your array with different methods.
2. Try to combine two arrays
3. Search an array with numbers return the value that matches the
find.
const numArray = [77, 44, 2, 162, 18, 244, 71];
const over100 = numArray.find(function (el) {
console.log(el);
return el > 100;
});
console.log(over100);
const myArray = ["a", "hello", 4, 8, 2, "world", "javascript", "course", 99, 1];
const myArray2 = [5, 12, 8, 130, 44];
let newArray = myArray.concat(myArray2);
console.log(newArray);

JavaScript filter
● Array filter

Array Filter
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Lesson Challenge
Use filter to create a new array with numbers greater than 75.
Output it into the console.
const numArray = [77, 44, 2, 162, 18, 244, 71];
let result = numArray.filter(function (numArray) {
return numArray > 75;
});
console.log(result);

JavaScript Loops and iteration
● For loop
● Do While Loop
● While Loop
● Break and continue in loop

JavaScript Loops
For loop - most common for iterations
Do Loop -
While Loop - will run at least once
TIP : Avoid infinite loops. Make sure the
condition in a loop eventually becomes false;
otherwise, the loop will never terminate. The
statements in the following while loop execute
forever because the condition never becomes
false:

Code Snippet
for (let counter = 0; counter < 5; counter++) {
console.log('For Loop Count at ' + counter);
}
let x = 0;
while (x < 5) {
x++;
console.log('While Loop Count at ' + x);
}
let i = 0;
do {
i += 1;
console.log('Do While Loop Count at ' + i);
} while (i < 5);
let y = 10;
while (y < 5) { //will run once even if condition is not true
y++;
console.log('While Loop Count at ' + y);
}
let z = 10;
do { //will not run if not met
z++;
console.log('Do While Loop Count at ' + z);
} while (z < 5);

JavaScript Loop Break
break statement
Use the break statement to terminate a loop, switch, or in
conjunction with a labeled statement.
for (let w = 0; w < 100; w++) {
console.log(w);
if (w === 5) {
console.log("BREAK");
break;
}
console.log(w);
}

JavaScript Loop Continue
The continue statement can be used to restart a while,
do-while, for, or label statement. TIP : not best practice for
testing
for (let w = 0; w < 10; w++) {
if (w === 3) {
console.log("CONTINUE");
continue;
}
console.log(w);
}
for (let w = 0; w < 10; w++) {
if (w != 3) {
console.log(w);
}
else {
console.log("CONTINUE");
}
}

Lesson Challenge
Create a loop output a counter using all 3 different iteration options.
for (let counter = 0; counter < 5; counter++) {
console.log('For Loop Count at ' + counter);
}
let x = 0;
while (x < 5) {
x++;
console.log('While Loop Count at ' + x);
}
let i = 0;
do {
i += 1;
console.log('Do While Loop Count at ' + i);
} while (i < 5);

Challenge #4 - Loops Array builder
Create an array that contains objects created
dynamically using a loop.
Output the content into the console so it looks like the
example on the right.
Use filter to create a new array with only the items that
have a value of true.

Challenge #3 Code
const myWork = [];
for(let x=1;x<10;x++){
let stat = x%2 ? true : false;
let temp = {name:`Lesson ${x}`,status:stat};
myWork.push(temp);
}
console.log(myWork);
const getTrue = myWork.filter(function (el) {
return el.status
})
console.log(getTrue);

JavaScript Loops and iteration
● Loop Array objects forEach
● Loop Object contents for in

forEach looping array contents
The forEach() method executes a provided function once for each array
element.
const array1 = ['a', 'b', 'c'];
for (let w = 0; w < array1.length; w++) {
console.log(array1[w]);
}
array1.forEach(function (element, index, array) {
console.log(element);
});
for(el in array1){
console.log(el);
}

For in looping object contents
The for...in statement iterates over all non-Symbol, enumerable properties
of an object.
let string1 = "";
const obj = {
a: 1
, b: 2
, c: 3
};
for (let property in obj) {
console.log(property);
string1 += obj[property];
}
console.log(string1);

Lesson Challenge
Output the contents of an array in the console showing each item and
index.
Output the contents of an object in the console showing each value and
property.
const obj = {a: 1, b: 2 , c: 3};
for (let property in obj) {
console.log(property, obj[property]);
}
const array1 = ['a', 'b', 'c'];
for (let w = 0; w < array1.length; w++) {
console.log(w,array1[w]);
}
for(el in array1){
console.log(el, array1[el]);
}
array1.forEach(function (element, index, array) {
console.log(index,element);
});

JavaScript Map
● Using map method in JavaScript

forEach looping array contents
The map() method creates a new array with the results of calling a
provided function on every element in the calling array.
var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

Lesson Challenge
Build a new array of values from existing that have all the numbers
multiplied by 50
Use Map to return values of array items that are objects using the
previous array of lessons
const numArray = [77, 44, 2, 162, 18, 244, 71];
let mapArray = numArray.map(function (x) {
return x * 50;
});
console.log(mapArray);

JavaScript Math
● Generate Random Numbers
● Rounding up
● Rounding down
● Rounding

Math floor and ceil
The Math.floor() function returns the largest
integer less than or equal to a given number.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/
Global_Objects/Math/floor
The Math.ceil() function returns the smallest
integer greater than or equal to a given number.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/
Global_Objects/Math/ceil
console.log(Math.floor(5.95));
// expected output: 5
console.log(Math.floor(5.05));
console.log(Math.floor(5));
console.log(Math.floor(-5.05));
// expected output: -6
console.log(Math.ceil(.95));
console.log(Math.ceil(4));
console.log(Math.ceil(7.004));
console.log(Math.ceil(-7.004));
// expected output: -7

Math Random
Let you generate a random value. A floating-point,
pseudo-random number between 0 (inclusive) and 1
(exclusive).
https://developer.mozilla.org/en-US/docs/Web/JavaScript/R
eference/Global_Objects/Math/random
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
//The maximum is exclusive and the minimum is inclusive
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
console.log(getRandomInt(3));
// expected output: 0, 1 or 2
console.log(getRandomInt(1));
console.log(Math.random());
// expected output: a number between 0 and 1

Lesson Challenge
Recursion Random Number Exclude
Generate 50 random numbers from 1 to 20 excluding from a list.
10, 15, 7, 1, 4, 2, 5
Output the results into the console.

Code Snippet
const excludeNumbers = [10, 15, 7, 1, 4, 2, 5];
function generateRandom(min, max) {
let num = Math.floor(Math.random() * (max - min + 1)) + min;
return excludeNumbers.includes(num) ? generateRandom(min, max) : num;
}
for (let x = 0; x < 20; x++) {
let min = 1;
let max = 15;
let num = generateRandom(min, max);
console.log(num);
}

JavaScript on Web Page
1. Create index.html page
2. Add JavaScript within html page
3. Link to JavaScript file within HTML page
4. Try the code
<!doctype html>
<html>
<head>
<title>JavaScript Page</title>
</head>
<body>
<p id="idOne"></p>
<script>
document.write('Hello World');
console.log('hello');
const x = 'Hello';
document.getElementById("idOne").innerHTML = x;
</script>
<script src="script.js"></script>
</body>
</html>

JavaScript Console Log
The Console method log() outputs a message to the web
console. The message may be a single string (with optional
substitution values), or it may be any one or more
JavaScript objects.
https://developer.mozilla.org/en-US/docs/Web/API/Console
/log
1. Get textContent of Element
2. Console log messages
3. Console log values
<!doctype html>
<html>
<head>
</head>
<body>
<p id="idOne">Hello World</p>
<script>
var myvar = document.getElementById('idOne').textContent;
console.log(myvar, "Logged!");
console.info(myvar, "Logged!");
console.warn(myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");
console.log('%c I see smurfs!', 'color: green; font-weight: bold;');
console.log('%c I see the sky!', 'background: blue; font-weight: bold;');
</script>
</body>
</html>

JavaScript Document Object
The Document interface represents any web page loaded
in the browser and serves as an entry point into the web
page's content, which is the DOM tree. The DOM tree
includes elements such as <body> and <table>, among
many others. It provides functionality globally to the
document
https://developer.mozilla.org/en-US/docs/Web/API/Docume
nt
1. Select the document body - update page contents
2. View the document and body in the console using dir
and log.
<!doctype html>
<html>
<head>
</head>
<body>
<script>
document.body.innerHTML = "New webPage content";
console.log(document.body);
console.dir(document.body);
console.dir(document);
</script>
</body>
</html>

JavaScript WEBSITE DOM
Selecting the elements on the page is the first step before
manipulating the element. There are a number of ways to
make element selections.
1. Create a website with a number of elements you can
use the website code posted on the right →
2. Update the script files select the element with id
header and update the textContent
<!DOCTYPE html><html><head> <title>JavaScript DOM</title></head><body> <nav role="navigation" class="navbar
navbar-default"> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse"
data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#"
class="navbar-brand">Home Page</a> </div> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul
class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a
href="#">Contact</a></li> </ul> </div> </nav> <div class="container"> <h1 id="header">Welcome to My Website</h1>
<div id="topSection" class="row"> <p><span class="second">A</span> This is my website which <span
class="first">can</span> change!</p> <p><span class="second">B</span> Are you going to see what <a
href="http://www.google.com?s=JSAJAX">Everything</a> happens when the word <span class="first">can</span>
changes?</p> <p><span class="second">C</span> Elements can <a href="http://www.google.com?s=JS">Just
JS</a> change and you <span class="first">can</span> select them by Class, ID and other methods.</p> <div
class="first"><span class="second">D</span> This is a Div with the class that is the same as the spans</div> </div>
<div id="outPut" class="row"> <p id="outputContent" class="outputClass"> This is where the content will change!!!
<span class="first">span</span> <span class="first">This is just a new div</span></p> </div> <div class="row"> <p>
Buttons</p> <button id="btnA">Button A</button> <button id="btnB">Button B</button> <button id="btnC">Button
C</button> </div> <div class="row"> <p> Lists</p> <ul> <li id="listA" class="listClass">List A</li> <li id="listB"
class="listClass">List B</li> <li id="listC" class="listClass">List C</li> <li id="listD" class="listClass">List D</li> <li
id="listE" class="listClass">List E</li> </ul> </div> <div class="row"> <p> Form</p> <form> Name : <input
name="firstName" type="text" id="firstName" value="firstName value"> <br> Email : <input name="email" type="email"
id="email"> <br> <input name="submitButton" type="submit" id="submitButton"> </form> </div> <div class="row"> <p>
Images Links</p> <p>We had to place some links to <a href="http://www.discoveryvip.com"> websites </a> </p> <p>
Update this code to improve on the site experience. This is just a second <span class="second">span</span> <span
class="second">This is another new div</span> In this section we added some images</p> <p> <img id="myImage"
src="https://via.placeholder.com/150" alt="temp image"> </p> </div> <div id="footer" class="row"> <div> Copyright ©
discoveryvip.com </div> </div> </div> <script src="script.js"></script></body></html>
const header = document.getElementById('header');
console.log(header);
header.textContent = 'New header Content';

JavaScript Selecting by TAG
The Element.getElementsByTagName() method returns a
live HTMLCollection of elements with the given tag
name. All descendants of the specified element are
searched, but not the element itself. The returned list is
live, which means it updates itself with the DOM tree
automatically. Therefore, there is no need to call
Element.getElementsByTagName() with the same element
and arguments repeatedly if the DOM changes in between
calls.
1. Select the element in different ways
2. Update the textContent
const el1 = document.querySelector('h1');
el1.textContent = 'First H1 on Page';
console.log(el1);
const el2 = document.getElementsByTagName('h1'); // return HTMLcollection
el2.textContent = 'First H1 by Tag';
console.log(el2);
el2[0].textContent = 'First H1 by Tag';
console.log(el2[0]);

JavaScript QUERYSELECTOR
The Document method querySelector() returns the first
Element within the document that matches the
specified selector, or group of selectors. If no matches
are found, null is returned.
nt/querySelector
1. Select by tag
2. Select by class .
3. Select by id #
const el1 = document.querySelector('h1');
el1.textContent = 'First H1 on Page';
const el2 = document.querySelector('.second');
el2.textContent = 'First element with class of second';
const el3 = document.querySelector('#btnA');
el3.textContent = 'Element with matching id';

JavaScript QUERYSELECTORALL
The Document method querySelectorAll() returns a static
(not live) NodeList representing a list of the document's
elements that match the specified group of selectors.
nt/querySelectorAll
1. Select by tag
2. Select by class .
3. Loop elements from nodelist
const els1 = document.querySelectorAll('p');
console.log(els1);
const els2 = document.querySelectorAll('p .second');
console.log(els2);
const els3 = document.querySelectorAll("div .first"); /// css selector
console.log(els3);
for (var i = 0; i < els3.length; i++) {
console.log(els3[i]);
els3[i].innerHTML = els3[i].textContent + ' <b>' + i + '</b>';
}

JavaScript QUERYSELECTORALL
You can use CSS type selectors to pinpoint the elements,
including selecting by attributes and more.
Also Select only elements from the parent.
1. Select all the have href linking to JS in the URL.
2. Use the parent selection element as the object to
select from.
const myValues = document.querySelectorAll("a[href*="JS"]");
for (var i = 0; i < myValues.length; i++) {
console.log(myValues[i].innerHTML);
myValues[i].textContent = "THIS IS CHANGED " + i;
myValues[i].href = "http://www.google.com?s=CHANGED";
}
const container = document.querySelector("ul.nav");
console.log(container);
const matches = container.querySelectorAll("li.active ");
console.log(matches);
console.log(matches[0]);

JavaScript Update Attributes
Select all the images and update height and title.
1. Selection of page images
2. Update attributes
const myImgs = document.getElementsByTagName("img");
for (var i = 0; i < myImgs.length; i++) {
myImgs[i].height = 20;
myImgs[i].title = myImgs[i].alt;
}

JavaScript childNodes Children
List out children and childnodes from selected element.
View node types.
https://developer.mozilla.org/en-US/docs/Web/API/Node/no
deType
1. Select children and childnodes of same element.
2. Note nodeType of each
3. Get data of selected element
const uList = document.getElementsByTagName('ul')[1];
console.log(uList);
console.log(uList.childNodes);
console.log(uList.children);
for (var i = 0; i < uList.children.length; i++) {
console.log(uList.children[i]);
console.log(uList.children[i].nodeType);
}
for (var i = 0; i < uList.childNodes.length; i++) {
console.log(uList.childNodes[i]);
console.log(uList.childNodes[i].nodeType);
}
const myDiv = document.querySelectorAll('li');
console.log(myDiv);
for (var i = 0; i < myDiv.length; i++) {
console.log(myDiv[i].firstChild.data);
}
var dList = document.getElementsByTagName('div')[3];
console.log(dList);
console.log(dList.childNodes[1]);
console.log(dList.childNodes[1].childNodes[1]);

JavaScript ELEMENT STYLE UPDATE
The HTMLElement.style property is used to get as well as
set the inline style of an element.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLEl
ement/style
1. Select an element
2. Update its style
const headerElement = document.getElementById("header");
headerElement.innerHTML = 'This is my new Header';
headerElement.style.color = 'blue';
headerElement.style.backgroundColor = "yellow";
headerElement.style.fontFamily = 'Cambria, "Hoefler Text", "Liberation Serif", Times,
"Times New Roman", serif';
headerElement.style.border = '5px solid black';

JavaScript Multiple ELEMENT STYLE UPDATE
The HTMLElement.style property is used to get as well as
set the inline style of an element.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLEl
ement/style
1. Select an elements
2. Update their style
const rowElement = document.getElementsByClassName("row");
for (var i = 0 ; i < rowElement.length; i++) {
rowElement[i].style.textAlign = "center";
rowElement[i].style.color = 'blue';
rowElement[i].style.backgroundColor = "red";
rowElement[i].style.fontFamily = 'Cambria, "Hoefler Text", "Liberation Serif", Times,
"Times New Roman", serif';
rowElement[i].style.border = '1px solid black';
}

JavaScript Add Class to Element
Create a class with some styling. The className
property of the Element interface gets and sets the
value of the class attribute of the specified
element. The Element.classList is a read-only
property that returns a live DOMTokenList
collection of the class attributes of the element.
https://developer.mozilla.org/en-US/docs/Web/API/
Element/className
Element/classList
<style>
.newStyle {
color: #F8373B;
background-color: #FAFFCE;
text-align: center;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New
Roman", serif;
}
.red{ color:red; }
.blue{ color:blue; }
</style>
const rowElement = document.querySelectorAll(".row");
for (var i = 0; i < rowElement.length; i++) {
rowElement[i].className += " newStyle";
}
rowElement.forEach(function (el, index) {
console.log(el);
console.log(index);
el.classList.add('red');
el.classList.toggle('blue');
el.classList.remove('row');
})

JavaScript SetAttribute
Sets the value of an attribute on the specified
element. If the attribute already exists, the value is
updated; otherwise a new attribute is added with
the specified name and value.
To get the current value of an attribute, use
getAttribute(); to remove an attribute, call
removeAttribute().
Element/setAttribute
const btn= document.querySelector('button');
btn.setAttribute('id','myButton');
console.log(btn.id);

JavaScript createElement Add New Element
In an HTML document, the document.createElement()
method creates the HTML element specified by tagName,
or an HTMLUnknownElement if tagName isn't recognized.
nt/createElement
const ul = document.querySelector('.row ul');
const li = document.createElement("li");
li.appendChild(document.createTextNode("List F"));
li.setAttribute("id","listF");
li.classList.add("red");
console.log(li);
ul.appendChild(li);

JavaScript Append and ++
The Node.appendChild() method adds a node to the end of
the list of children of a specified parent node.
https://developer.mozilla.org/en-US/docs/Web/API/Node/ap
pendChild
const vals = [200, 400, 500];
const main = document.querySelector('.container');
vals.forEach(function (v) {
let html = '<img src="https://via.placeholder.com/' + v + 'x100/0000ff"><br>';
main.innerHTML += html;
main.prepend(html);
})
vals.forEach(function (v) {
let img = document.createElement('img');
img.src = 'https://via.placeholder.com/' + v + 'x100/00ff00';
main.appendChild(img);
main.prepend(img); // same object can only be in one place!!!
})

JavaScript addEventListener
The EventTarget method addEventListener() sets up a
function that will be called whenever the specified event is
delivered to the target.
https://developer.mozilla.org/en-US/docs/Web/API/EventTa
rget/addEventListener
const myButton = document.getElementById("btnA");
const myOutput = document.querySelector('.container');
const btnClick = function () {
myOutput.textContent = "You clicked the first button!";
};
myButton.addEventListener("click", btnClick);

JavaScript addEventListener
useCapture = true
The handler is set on the capturing phase. Events
will get to it before getting to its children.
useCapture = false.- default
The handler is set on the bubbling phase. Events
will get to it after getting to its children.
const myBtns = document.querySelectorAll('button');
let cnt = 0;
for (var i = 0; i < myBtns.length; i++) {
myBtns[i].addEventListener('click', btnClick, false);
}
function btnClick(e) {
cnt++;
console.log(e);
console.log(this);
console.log(e.target);
e.target.style.backgroundColor = 'red';
this.textContent = "You clicked this button <" + cnt + ">";
};

JavaScript MOUSEMOVE
Select the element to apply event listener on. Use mouse
move and get the position.
const header = document.querySelector('#header');
const mouseMover = function (e) {
console.log(e);
console.log(e.x);
header.textContent = "x is at " + e.x + " y is at " + e.y;
};
myOutput.addEventListener("mousemove", mouseMover);

JavaScript MOUSEMOVE on Image Do something
Make some images. Detect mouse movements on
images.
1. Create number of images dynamically
2. Select all page images
3. Add event listeners to all images for mouse
over and mouse out
4. Update output element background with
image background color.
const num = 10;
const output = document.createElement('div');
output.setAttribute('class', 'red');
output.style.fontSize = '3em';
output.textContent = "welcome";
document.body.prepend(output);
for (let x = 0; x < num; x++) {
let img = document.createElement('img');
let clr = Math.random().toString(16).substr(-6);
img.src = 'https://via.placeholder.com/100x100/' + clr;
myOutput.prepend(img);
}
const myImages = document.querySelectorAll('img');
myImages.forEach(function (el) {
el.addEventListener("mousemove", mouseMover);
el.addEventListener("mouseleave", mouseMoverOut);
})
function mouseMover(e) {
output.textContent = "You are over the image!!! " + this.src.substr(-6);;
output.style.backgroundColor = '#' + this.src.substr(-6);
};
function mouseMoverOut(e) {
output.textContent = "You moved off the image " + this.src.substr(-6);;
output.style.backgroundColor = "white";
};

JavaScript FORM VALUES
The Event interface's preventDefault() method tells the user
agent that if the event does not get explicitly handled, its
default action should not be taken as it normally would be.
https://developer.mozilla.org/en-US/docs/Web/API/Event/pr
eventDefault
1. Select the value from a form
2. Prevent default on form submit
const myOutput = document.getElementById("header");
const myButton = document.getElementById("submitButton");
const btnClick = function (e) {
e.preventDefault();
let messageOut;
let name = document.getElementById("firstName").value;
let email = document.getElementById("email").value;
if (name) {
messageOut = "Hello " + name;
}
else {
messageOut = "Mysterious person I wonder why you don't add your name.";
}
myOutput.textContent = messageOut;
};
myButton.addEventListener("click", btnClick);

JavaScript a link stopper
Use preventdefault to stop all links from being
clickable on the page.
1. Select all hyperlinks
2. Add preventdefault
const links = document.querySelectorAll('a');
links.forEach(function(el){
el.addEventListener('click',function(e){
e.preventDefault()
console.log(e);
console.log('clicked');
console.log(this.getAttribute('href'));
})
})

JavaScript WINDOW OBJECT
The Window interface represents a window
containing a DOM document; the document
property points to the DOM document loaded in
that window.
Window
1. Open new window
console.log(window);
///Window Object Properties
console.log(window.screen.height);
console.log(window.scrollX);
console.log(window.history.length);
console.log(window.location);
console.log(window.navigator.userAgent);
///Window Object Methods
window.open("", "", "width=100, height=100");
window.resizeTo(250, 250);
setInterval(function(){ console.log("This message will show every 5 seconds"); }, 5000);

JavaScript Annoying Blinker
Select all the buttons on the page that will stop the text
blinking colors.
1. Create interval that updates main element
background and color
2. Add eventlisteners to all buttons on the page
3. Click button stop the blinking
let blinky;
const myButton = document.getElementById("submitButton");
const btns = document.querySelectorAll('button');
btns.forEach(function (el) {
el.addEventListener("click", stopChangeText);
})
blinky = setInterval(changeText, 100);
function changeText() {
myOutput.style.color = myOutput.style.color == "red" ? "black" : "red";
myOutput.style.backgroundColor = '#' + Math.random().toString(16).substr(-6);
}
function stopChangeText(e) {
e.preventDefault();
clearInterval(blinky);
}

JavaScript ANIMATIONS :)
The window.requestAnimationFrame() method tells the
browser that you wish to perform an animation and
requests that the browser call a specified function to update
an animation before the next repaint.
1. Create an element
2. Animate it
3. Add event listener to toggle direction
let stopper = false;let dir = 1;
const mover = document.createElement('div');
mover.style.position = 'absolute';mover.style.left = '10px';mover.style.top =
'100px';mover.style.backgroundColor = 'red';mover.style.padding =
'20px';mover.textContent = 'catch me';mover.style.color = 'white';
mover.addEventListener('click', animateMe);
myOutput.appendChild(mover);
let animator = window.requestAnimationFrame(render);
function animateMe(e) {
if (stopper) {
animator = window.requestAnimationFrame(render);
stopper = false;
console.log(dir);
dir *= -1;
}
else {
window.cancelAnimationFrame(animator);
stopper = true;
}
}
function render() {
let pos = mover.offsetLeft;
console.log(pos);
mover.style.left = (pos + dir) + "px";
animator = window.requestAnimationFrame(render);
}

Courses https://www.udemy.com/user/lars51/
Thank you for your support
If you have any questions or comments please let me
know. I’m always happy to hear from you!!!
Find out more about my courses at http://discoveryvip.com/
Course instructor : Laurence Svekis -
providing online training to over
500,000 students across hundreds of
courses and many platforms.

JavaScript guide 2020 Learn JavaScript

More Related Content

What's hot (20)

Similar to JavaScript guide 2020 Learn JavaScript (20)

More from Laurence Svekis ✔ (20)

Recently uploaded (20)

JavaScript guide 2020 Learn JavaScript