Web Technologies

JS Basics
 Summary of Today’s Lecture
• Conditional Statements
• Switch Statements
• Loops
• Functions
• Arrow Functions (ES6)
• Default Parameter Values (ES6)
• Rest Parameter (ES6)
• Spread Parameter (ES6)
• JavaScript Classes (ES6)
• Error Handling
• Template Literal (ES6)
• Comments
 Conditional statements
• Conditional statements are used to perform different actions based on
different conditions.
• In JavaScript we have the following conditional statements:
– Use if to specify a block of code to be executed, if a specified condition is
true
– Use else to specify a block of code to be executed, if the same condition is
false
– Use else if to specify a new condition to test, if the first condition is false
– Use switch to specify many alternative blocks of code to be executed
• if( true ) {
• // Do something.
• }
• Here is a simple example using the array
• var foo = [5, "five", "5"];
• if( foo[1] === "five" ) {
• alert("This is the word five, written in plain
English.");
• }
• In this case, the alert would fire because the foo variable with an index of
1 (the second in the list) is identical to “five”.
 Conditional statements
• Use the else statement to specify a block of code to be executed if
the condition is false.
• var test = "testing";
if( test == "testing" ) {
alert( "You haven't changed anything." );
} else {
alert( "You've changed something!" );
}
• Use the else if statement to specify a new condition if the first
condition is false.
• var greeting;
• var time = new Date().getHours();
• if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
 Switch Statement
• Use the switch statement to select one of many code blocks to be
executed.
• switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
This is how it works:
• The switch expression is evaluated
once.
• The value of the expression is compared
with the values of each case. • The getDay() method returns the
• If there is a match, the associated block weekday as a number between 0 and 6
• (Sunday=0, Monday=1, Tuesday=2 ..)
of code is executed. • This example uses the weekday
• If there is no match, the default code number to calculate the weekday
block is executed. name:
 Loops
• There are cases in which we’ll want to go through every item in an array
and do something with it.
• JavaScript supports different kinds of loops:
– for - loops through a block of code a number of times
– for/in - loops through the properties of an object (for x in person)
– while - loops through a block of code while a specified condition is true
– do/while - also loops through a block of code while a specified condition is
true.
• for method is one of the most popular. The basic structure of a for loop is
as follows:
– for(initialize the variable; test the condition; alter the value;)
– {
• // do something
– }
• Here is an example of a for loop in action.
– for( var i = 0; i <= 2; i++ ) {
• alert( i ); // This loop will trigger three alerts, reading
"0", "1“, and "2" respectively.
– }
 Loop over Array
• To “check each item in an array” we write a loop to do that for us?
– var items = ["foo", "bar", "baz"]; // First
we create an array.
– for( var i = 0; i < items.length; i++ ) {
• alert( items[i] ); // This will alert
each item in the array.
– }
• items.length
– Instead of using a number to limit the number of times the loop
runs, we’re using a property built right into JavaScript to
determine the “length” of our array, which is the number of
items it contains.
• items[i]
– We can use i variable inside of the loop to reference each index
of the array.
 Custom Functions
• A JavaScript function is a block of code designed to perform a
particular task.
• A function is a bit of code that doesn’t run until it is referenced or
called.
• A JavaScript function is defined with the function keyword,
followed by a name, followed by parentheses ().
• Function names can contain letters, digits, underscores, and dollar
signs (same rules as variables).
• Inside the function, the arguments (the parameters) behave as local
variables.
• When JavaScript reaches a return statement, the function will stop
executing.
 Arrow Function
• Arrow functions, introduced in ES6, provides a concise way to write
functions in JavaScript.
• They are anonymous functions and are roughly the equivalent of
lambda functions in python or blocks in Ruby.
• Arrow functions are defined using a new syntax, the fat arrow (=>)
notation.

If you have parameters, you pass them inside If you have only one parameter, you can
the parentheses: skip the parentheses as well:
Default Values for Function Parameters
• In ES6, you can specify default values to the function parameters.
• This means that if no arguments are provided to function when it is
called these default parameters values will be used.

Output
 The Rest Parameter
1. ES6 introduces rest parameter that allows us to pass an arbitrary
number of parameters to a function.
2. This is particularly helpful in situations when you want to pass
parameters to a function, but you have no idea how many you will need.
3. A rest parameter is specified by prefixing a named parameter with rest
operator (...) i.e. three dots.
4. Rest parameter can only be the last one in the list of parameters, and
there can only be one rest parameter.
 Spread Operator
• The spread operator, which is also denoted by (...), performs the
exact opposite function of the rest operator.
• The spread operator spreads out (i.e. splits up) an array and passes
the values into the specified function, as shown in the following
example:
 JavaScript Classes
• Classes were introduced in ES6, also known as ECMAScript2015, .
• A class is a type of function, but instead of using the keyword function to
initiate it, we use the keyword class, and the properties are assigned
inside a constructor() method.
• Use the keyword class to create a class, and always add the
constructor()method.
• The constructor method is called each time the class object is initialized.
 Class Inheritance
• The extends keyword is used to create a child class of another class
(parent). The child class inherits all the methods from another class.
• Inheritance is useful for code reusability: reuse properties and
methods of an existing class when you create a new class.

• super() method:
• The super() method refers to the par
class.
• By calling the super() method in the
constructor method, we call the pare
constructor method and gets access
parent's properties and methods.
 Javascript Errors
• When executing JavaScript code, different errors can occur.
• Errors can be coding errors made by the programmer, errors due to
wrong input, and other unforeseeable things.
• The try statement allows you to define a block of code to be tested
for errors while it is being executed.
• The catch statement allows you to define a block of code to be
executed, if an error occurs in the try block.
 Throw Statement
• The throw statement allows us to create a custom error.

Code Explanation:
• This example examines input. If the value is wrong, an exception (err) is
thrown.
• The exception (err) is caught by the catch statement and a custom error
message is displayed.
 Template Literals
• Template literals provide an easy and clean way create multi-line strings and
perform string interpolation. Now we can embed variables or expressions into a
string at any spot without any hassle.
• In computer programming, string interpolation (or variable substitution) is the
process of evaluating a string literal containing one or more placeholders, yielding
a result in which the placeholders are replaced with their corresponding values.
• Template literals are created using back-tick (` `) (grave accent) character instead of
the usual double or single quotes. Variables or expressions can be placed inside
the string using the ${...} syntax.
• An example without template literal is provided below:
 Template Literals Example
• The same example as has been shown in the previous slide is
provided using template literal approach
 Comments
• JavaScript comments can be used to explain JavaScript
code, and to make it more readable.
• Comments will be ignored at the time the script is
executed, so you can leave reminders and explanations
throughout your code.
• There are two methods of using comments.
– For single-line comments, use two slash characters (//) at the
beginning of the line.
• // This is a single-line comment.
– Multiple-line comments use the same syntax that you’ve seen in
CSS.
– Everything within the /* */ characters is ignored by the
browser.
• /* This is a multi-line comment.
– Anything between these sets of characters will be
– completely ignored when the script is executed.
• This form of comment needs to be closed. */
 Summary of Today’s Lecture
• Conditional Statements
• Switch Statements
• Loops
• Functions
• Arrow Functions (ES6)
• Default Parameter Values (ES6)
• Rest Parameter (ES6)
• Spread Parameter (ES6)
• JavaScript Classes (ES6)
• Error Handling
• Template Literal (ES6)
• Comments
 Resources
• Chapter 19 and Chapter 20 from Learning Web Design- A
Beginner’s Guide to HTML, CSS, Javascript and Web Graphics
By Jennifer Niederst Robbins (4th Edition)
• https://www.w3schools.com/js/js_array_sort.asp
• https://www.w3schools.com/js/js_best_practices.asp
• https://www.w3schools.com/js/js_errors.asp
• https://www.tutorialrepublic.com/javascript-
tutorial/javascript-es6-features.php