LAB 13: arrays, switch and conditions



Lab-13Module:Web ProgrammingLevel:UG2Programme:Software EngineeringTime:1.30 hourStudent Name_________________________________ID_______________Date: 14 November 2017 Topic: arrays, switch and conditionsLAB 13: arrays, switch and conditionsTheoretical backgroundThe?Array?object lets you store multiple values in a single variable. It stores a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.SyntaxUse the following syntax to create an?Array?object ?var fruits = new Array( "apple", "orange", "mango" );The?Array?parameter is a list of strings or integers. When you specify a single numeric parameter with the Array constructor, you specify the initial length of the array. The maximum length allowed for an array is 4,294,967,295.You can create array by simply assigning values as follows ?var fruits = [ "apple", "orange", "mango" ];Practical Part JavaScript arrays are used to store multiple values in a single variable.HTML FILE<!DOCTYPE html><html><body><h2>JavaScript Arrays</h2><p id="demo"></p><script>var cars = ["Saab", "Volvo", "BMW"];document.getElementById("demo").innerHTML = cars;</script></body></html>What is an Array?An array is a special variable, which can hold more than one value at a time.If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:var?car1 =?"Saab";var?car2 =?"Volvo";var?car3 =?"BMW";However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?The solution is an array!An array can hold many values under a single name, and you can access the values by referring to an index number.Creating an ArrayUsing an array literal is the easiest way to create a JavaScript Array.Syntax:var?array_name?= [item1,?item2, ...];???????ExampleHTML FILE<!DOCTYPE html><html><body><h2>JavaScript Arrays</h2><p id="demo"></p><script>var cars = ["Saab", "Volvo", "BMW"];document.getElementById("demo").innerHTML = cars;</script></body></html>Spaces and line breaks are not important. A declaration can span multiple lines:HTML FILE<!DOCTYPE html><html><body><h2>JavaScript Arrays</h2><p id="demo"></p><script>var cars = [ "Saab", "Volvo", "BMW"];document.getElementById("demo").innerHTML = cars;</script></body></html>Access the Elements of an ArrayYou refer to an array element by referring to the?index number.This statement accesses the value of the first element in cars:var?name = cars[0];This statement modifies the first element in cars:cars[0] =?"Opel";ExampleHTML FILE<!DOCTYPE html><html><body><h2>JavaScript Arrays</h2><p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p><p id="demo"></p><script>var cars = ["Saab", "Volvo", "BMW"];document.getElementById("demo").innerHTML = cars[0];</script></body></html>[0] is the first element in an array. [1] is the second. Array indexes start with 0.Access the Full ArrayWith JavaScript, the full array can be accessed by referring to the array name:HTML FILE<!DOCTYPE html><html><body><h2>JavaScript Arrays</h2><p id="demo"></p><script>var cars = ["Saab", "Volvo", "BMW"];document.getElementById("demo").innerHTML = cars;</script></body></html>Looping Array ElementsThe best way to loop through an array, is using a "for" loop:HTML FILE<!DOCTYPE html><html><body><h2>JavaScript Arrays</h2><p>The best way to loop through an array is using a standard for loop:</p><p id="demo"></p><script>var fruits, text, fLen, i;fruits = ["Banana", "Orange", "Apple", "Mango"];fLen = fruits.length;text = "<ul>";for (i = 0; i < fLen; i++) { text += "<li>" + fruits[i] + "</li>";}text += "</ul>";document.getElementById("demo").innerHTML = text;</script></body></html>Adding Array ElementsThe easiest way to add a new element to an array is using the push method:HTML FILE<!DOCTYPE html><html><body><h2>JavaScript Arrays</h2><p>The push method appends a new element to an array.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits;function myFunction() { fruits.push("Lemon"); document.getElementById("demo").innerHTML = fruits;}</script></body></html>JavaScript?Switch?StatementThe switch statement is used to perform different actions based on different conditions.The JavaScript Switch StatementUse the switch statement to select one of many blocks of code to be executed.Syntaxswitch(expression) {??? case?n:??????? code block??????? break;??? case?n:??????? 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.If there is a match, the associated block of code is executed.ExampleThe getDay() method returns the weekday as a number between 0 and 6.(Sunday=0, Monday=1, Tuesday=2 ..)This example uses the weekday number to calculate the weekday name:HTML FILE<!DOCTYPE html><html><body><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></html>The break KeywordWhen JavaScript reaches a?break?keyword, it breaks out of the switch block.This will stop the execution of more code and case testing inside the block.When a match is found, and the job is done, it's time for a break. There is no need for more testing.A break can save a lot of execution time because it "ignores" the execution of all the rest of the code in the switch block.It is not necessary to break the last case in a switch block. The block breaks (ends) there anyway.The default KeywordThe?default?keyword specifies the code to run if there is no case match:ExampleThe getDay() method returns the weekday as a number between 0 and 6.If today is neither Saturday (6) nor Sunday (0), write a default message:HTML FILE<html><body><p id="demo"></p><script>var text;switch (new Date().getDay()) { case 6: text = "Today is Saturday"; break; case 0: text = "Today is Sunday"; break; default: text = "Looking forward to the Weekend";}document.getElementById("demo").innerHTML = text;</script></body></html>JavaScript?If...Else?StatementsConditional statements are used to perform different actions based on different conditions.Conditional StatementsVery often when you write code, you want to perform different actions for different decisions.You can use conditional statements in your code to do this.In JavaScript we have the following conditional statements:Use?if?to specify a block of code to be executed, if a specified condition is trueUse?else?to specify a block of code to be executed, if the same condition is falseUse?else if?to specify a new condition to test, if the first condition is falseUse?switch?to specify many alternative blocks of code to be executedThe if StatementUse the?if?statement to specify a block of JavaScript code to be executed if a condition is true.Syntaxif (condition) {??? block of code to be executed if the condition is true}Note that?if?is in lowercase letters. Uppercase letters (If or IF) will generate a JavaScript error.ExampleMake a "Good day" greeting if the hour is less than 18:00:HTML FILE<!DOCTYPE html><html><body><p>Display "Good day!" if the hour is less than 18:00:</p><p id="demo">Good Evening!</p><script>if (new Date().getHours() < 18) { document.getElementById("demo").innerHTML = "Good day!";}</script></body></html>The else StatementUse the?else?statement to specify a block of code to be executed if the condition is false.if (condition) {??? block of code to be executed if the condition is true} else {???? block of code to be executed if the condition is false}ExampleIf the hour is less than 18, create a "Good day" greeting, otherwise "Good evening":HTML FILE<!DOCTYPE html><html><body><p>Click the button to display a time-based greeting:</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { var hour = new Date().getHours(); var greeting; if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; } document.getElementById("demo").innerHTML = greeting;}</script></body></html>The else if?StatementUse the?else if?statement to specify a new condition if the first condition is false.Syntaxif (condition1) {??? block of code to be executed if condition1 is true} else if (condition2) {??? block of code to be executed if the condition1 is false and condition2 is true} else {??? block of code to be executed if the condition1 is false and condition2 is false}ExampleIf time is less than 10:00, create a "Good morning" greeting, if not, but time is less than 20:00, create a "Good day" greeting, otherwise a "Good evening":HTML FILE<!DOCTYPE html><html><body><p>Click the button to get a time-based greeting:</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { var greeting; var time = new Date().getHours(); if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; }document.getElementById("demo").innerHTML = greeting;}</script></body></html> ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download

To fulfill the demand for quickly locating and searching documents.

It is intelligent file search solution for home and business.

Literature Lottery

Related download
Related searches

©2024 5y1.org, Inc. All rights reserved.