Scribd
Upload
45 views15 pages

Lecture 15

This document provides an overview of JavaScript concepts including conditional statements, loops, functions, and ES6 features. It discusses if/else statements, switch statements, for, while and do-while loops. It also covers functions, arrow functions, template literals. Examples are given for each concept to demonstrate syntax and usage. References for further reading on JavaScript and ES6 features are provided at the end.

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
45 views15 pages

Lecture 15

This document provides an overview of JavaScript concepts including conditional statements, loops, functions, and ES6 features. It discusses if/else statements, switch statements, for, while and do-while loops. It also covers functions, arrow functions, template literals. Examples are given for each concept to demonstrate syntax and usage. References for further reading on JavaScript and ES6 features are provided at the end.

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Web Technologies

JavaScript
Today’s Lecture
• JavaScript
– Conditional Statements
– Loops
– Functions and ES6 Features
Conditional Statements
Conditional statements are used to perform different actions based on
different conditions.
• if
– It specify a block of code to be executed, if a specified condition is true.
– Syntax
if (condition)
{ // block of code to be executed, if condition is true }
– Example: display "Good day!" greeting, if hour is less than 18:
<body>
date get Methods:
<h2>JavaScript if</h2> getFullYear()
<p>Display "Good day!" if the hour is less than 18:00:</p> getMonth()
<p id="demo">Good Evening!</p> getDate()
<script> getDay()
if (new Date().getHours() < 18) { getHours()
document.getElementById("demo").innerHTML = "Good day!"; getMinutes()
} getSeconds()
getMilliseconds()
</script>
getTime()
</body>
Conditional Statements
• else
– It specify a block of code to be executed, if same condition is false.
– Syntax
if (condition)
{ // block of code to be executed, if condition is true }
else
{ // block of code to be executed, if condition is false }
– Example: display "Good morning" greeting if hour is less than 10,
<body>otherwise display "Have a good day" greeting:
<h2>JavaScript else</h2>
<p>A time-based greeting:</p>
<p id="demo"></p>
<script>
const hour = new Date().getHours();
var greeting;
if (hour < 10)
{ greeting = "Good morning"; }
else { greeting = "Have a good day"; }
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
Conditional Statements
• else if
– It specify a new condition to test, if the first condition is false.
– Syntax
if (condition1)
{ // block of code to be executed, if condition1 is true }
else if (condition2)
{ // block of code to be executed, if condition1 is false and condition2 is true }
else
{ // block of code to be executed, if condition1 is false and condition2 is false }
– Example: if time is less than 10, display "Good morning" greeting, if not but time is
less than 20, display "Good day" greeting, otherwise display "Good evening":
<body><h2>JavaScript else if</h2><p>A time-based greeting:</p>
<p id="demo"></p><script>
const time = new Date().getHours();
var greeting;
if (time < 10)
{ greeting = "Good morning"; }
else if (time < 20)
{ greeting = “Good day"; }
else { greeting = “Good evening"; }
document.getElementById("demo").innerHTML = greeting;
</script></body>
Conditional Statements
• switch
– It specify many alternative blocks of code to be executed.
– It’s used to perform different actions based on different
conditions.
– If there is a match, associated block of code is executed.
– If there is no match, default code block is executed.
– Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
Conditional Statements
• switch
Example: use weekday number to calculate weekday name:
<body><h3>JavaScript switch</h3><p id="demo"></p><script>
var day;
switch (new Date().getDay()) {
case 0: day = "Sunday";
break;
case 1: day = "Monday";
break;
case 2: day = "Tuesday";
break;
case 3: day = "Wednesday";
break;
case 4: day = "Thursday";
break;
case 5: day = "Friday";
break;
case 6: day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script></body>
Loops
Loops are used to repeat a specific block of code over and over.
• for
– It through a block of code number of times.
for (expression 1; expression 2; expression 3)
{ // code block to be executed }
• while
– while loops lets iterate the block of code as long as the specified
condition is true.
while (condition)
{ // code block to be executed }
• do-while
– In do-while loop, the condition is checked after executing the loop.
do
{ // code block to be executed }
while (condition);
Functions and ES6 Features
• Function
o It’s a block of code designed to perform a particular task.
o It’s defined with function keyword, followed by a name, and
parentheses ().
o Function names can contain letters, digits, underscores, and
dollar signs.
o Example
function myFunction(a, b)
{return a * b;}
Functions and ES6 Features
• Arrow Functions
o Introduced in ES6 (2015).
o It allows us to write shorter function syntax.

Before Arrow After Arrow


<body> <body>
<p id="demo"></p> <p id="demo"></p>
<script> <script>
var hello = ""; var hello = "";
hello = function() { hello = () => {
return "Hello World!"; return "Hello World!";
} }
document.getElementById("demo") document.getElementById("demo")
.innerHTML = hello(); .innerHTML = hello();
</script> </script>
</body> </body>
Functions and ES6 Features
• Arrow Functions
o If function has only one statement, and statement return a
value, we can remove curly brackets {} and return keyword:

o If we have parameters, pass them inside the parentheses:

o If we have only one parameter, we can skip () parentheses as


well:
Functions and ES6 Features
• Template Literals
– It provide an easy and clean way to create multi-line strings.
– It use back-ticks (` `) (grave accent) rather than quotes (“”) to
define a string.
• We can use single and double quotes inside a string with
them.
<body>
<h3>JavaScript Template Literals</h3>
<p>Template literals use back-ticks (``) to define a string:</p>
<p id="demo"></p>
<script>
var text = `"Hello" 'world...'`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
Functions and ES6 Features
• Template Literals
<body>
<h3>JavaScript Template Literals</h3>
<p>Template literals allows multiline strings:</p>
<p id="demo"></p>
<script>
var text =
`The quick
brown fox
jumps over
the lazy dog`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
Summary of Today’s Lecture
• JavaScript
– Conditional Statements
– Loops
– Functions and ES6 Features
References
• 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)
• Chapter 8 from Web Programming with HTML5, CSS, and
JavaScript By John Dean, Jones and Bartlett Learning 2018
• https://www.tutorialrepublic.com/javascript-tutorial/javascript-es6
-features.php
• https://www.w3schools.com/js/js_arrow_function.asp

You might also like