Scribd
Upload
4 views20 pages

Internet Based Programming: Frontend Web Development

The document provides an overview of JavaScript operators, including arithmetic, assignment, comparison, and logical operators, as well as type casting and conditional statements. It includes examples of how to use these operators and statements in frontend web development. Additionally, it covers the creation and usage of arrays in JavaScript.

Uploaded by

Sümeyye Öztürk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views20 pages

Internet Based Programming: Frontend Web Development

The document provides an overview of JavaScript operators, including arithmetic, assignment, comparison, and logical operators, as well as type casting and conditional statements. It includes examples of how to use these operators and statements in frontend web development. Additionally, it covers the creation and usage of arrays in JavaScript.

Uploaded by

Sümeyye Öztürk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

04/27/2025

Internet Based Programming


Frontend web development: JS (operators: (JS arithmetic operators, assignment operators,
comparison operators, logical operators), type casting, conditional statements, arrays, array
methods (basic methods, search methods, sort methods), objects)

Asst. Prof. Dr. İnan KAZANCI


[email protected]

Frontend web development- JS: JavaScript Operators


• There are different types of JavaScript operators, some of them are listed
bellow:
Arithmetic Operators
Assignment Operators
Comparison Operators
String Operators
Logical Operators
Type Operators

04/27/2025 2

1
04/27/2025

Frontend web development- JS: JavaScript Operators: Arithmetic


Operators
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement

04/27/2025 3

Frontend web development- JS: JavaScript Operators: Arithmetic


Operators
<body>
<h2>JavaScript Arithmetic</h2>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let text = `x = ${x}, y = ${y} <hr>
x + y = ${x + y} <br>
x - y = ${x - y} <br>
x * y = ${x * y} <br>
x^2 = x**2 = ${x**2} <br>
x^2 = Math.pow(x,2)= ${Math.pow(x, 2)} <br>
x / y = ${x / y} <br>
x mod y = x % y = ${x % y} <br>
x++ = ${x++} <br>
-- x = ${--x}`
document.getElementById("demo").innerHTML = text;
</script>
</body>

04/27/2025 4

2
04/27/2025

Frontend web development- JS: JavaScript Operators: Assignment


Operators

Operator Example Same As


= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y

04/27/2025 5

Frontend web development- JS: JavaScript Operators: Comparison


Operators
Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to

04/27/2025 6

3
04/27/2025

Frontend web development- JS: JavaScript Operators: Logical


Operators

Operator Description
&& logical and
|| logical or
! logical no

04/27/2025 7

Frontend web development- JS: JavaScript Type Casting


<!DOCTYPE html>
• Converting Strings to Numbers: <html>
<body>
 Number() converts a variable (or a <h1>String to Numbers</h1>
value) into a number. A numeric <p id="demo"></p>
<script>
string (like "3.14") converts to a let x = "2";
number (like 3.14). let y = "3.5";
document.getElementById("demo").innerHTML =
 An empty string (like "") converts to 0. Number(x) + Number(y) +"<br>" +
 A non numeric string (like "BANU") Number(" ") + "<br>" +
Number("") + "<br>" +
converts to NaN (Not a Number). Number("BANU") + "<br>" +
 The unary + operator can be used to (+x + +y) + "<br>" +
(+"BANU" + +y) + "<br>";
convert a variable to a number. </script>
</body>
</html>

04/27/2025 8

4
04/27/2025

Frontend web development- JS: JavaScript Type Casting


<!DOCTYPE html>
• Converting Strings to Numbers: <html>
<body>
 Number() converts a variable (or a <h1>String to Numbers</h1>
value) into a number. A numeric <p id="demo"></p>
<script>
string (like "3.14") converts to a let x = "2";
number (like 3.14). let y = "3.5";
document.getElementById("demo").innerHTML =
 An empty string (like "") converts to 0. Number(x) + Number(y) +"<br>" +
 A non numeric string (like "BANU") Number(" ") + "<br>" +
Number("") + "<br>" +
converts to NaN (Not a Number). Number("BANU") + "<br>" +
 The unary + operator can be used to (+x + +y) + "<br>" +
(+"BANU" + +y) + "<br>";
convert a variable to a number. </script>
</body>
</html>

04/27/2025 9

Frontend web development- JS: JavaScript Type Casting

• Converting Numbers to Strings: <!DOCTYPE html>


<html>
 String() can convert numbers to strings. <body>
It can be used on any type of numbers, <p id="demo"></p>
<script>
literals, variables, or expressions. let x = 123;
 The method toString() does the same. document.getElementById("demo").innerHTML =
String(x) + "<br>" +
String("123") + "<br>" +
String(100 + 23) + "<br>" +
x.toString() + "<br>" +
(123).toString() + "<br>" +
(100 + 23).toString();
</script>
</body>
</html>

04/27/2025 10

5
04/27/2025

Frontend web development- JS: JavaScript Type Casting

• Converting Booleans to Numbers:


 The method Number() can also convert booleans to numbers.
 Number(false) // returns 0
 Number(true) // returns 1

• Converting Booleans to Strings:


 The method String() can convert booleans to strings.
 String(false) // returns "false“
 String(true) // returns "true"
 The method toString() does the same.
 false.toString() // returns "false"
true.toString() // returns "true"

04/27/2025 11

Frontend web development- JS: JavaScript 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.

04/27/2025 12

6
04/27/2025

Frontend web development- JS: JavaScript Conditional Statements

• The if Statement:
Syntax:
if (condition) {
// block of code to be executed if the condition is true
}

• The else Statement


Syntax:
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
}

04/27/2025 13

Frontend web development- JS: JavaScript Conditional Statements

• The if- else Statement:


<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if .. else</h2>
<p id="demo"></p>
<script>
const hour = new Date().getHours();
let greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>

04/27/2025 14

7
04/27/2025

Frontend web development- JS: JavaScript Conditional Statements

• The else if Statement:


Syntax:
if (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
}

04/27/2025 15

Frontend web development- JS: JavaScript Conditional Statements


• The else if Statement:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if .. else</h2>
<p id="demo"></p>
<script>
const time = new Date().getHours();
let 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>
</html>

04/27/2025 16

8
04/27/2025

Frontend web development- JS: JavaScript Conditional Statements

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Conditional Statements()</h2>
<div id="demo"></div>
<script>
let text;
if (Math.random() < 0.5) {
text = "<a href='https://www.bandirma.edu.tr/'>Visit BANU
Web Site</a>";
} else {
text = "<a href='https://mdbf.bandirma.edu.tr/tr/bil-
muh'>Visit Computer Engineering Web Site</a>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

04/27/2025 17

Frontend web development- JS: JavaScript Conditional Statements


• Nested if Statement:
<!DOCTYPE html> else if (country === "Turkiye")
<html> {
<body> if (student === true) {
<h2>JavaScript Nested if</h2> price -= discountAmount + 30;
<p id="demo"></p> } else {
<script> price -= discountAmount + 20;
let price = 100; }
let discount =Boolean(+window.prompt("Is }
there a disacount? Yes: 1 | No: 0")); else {
let discountAmount = 30; price -= 10;
let country = "Turkiye"; }
let student = true; document.getElementById("demo").innerHTML = price;
if (discount === true) </script>
{ </body>
price -= discountAmount; </html>
}

04/27/2025 18

9
04/27/2025

Frontend web development- JS: JavaScript Conditional Statements

Switch Statement: use the switch statement to select one of many code blocks to be executed.
Syntax:
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}

04/27/2025 19

Frontend web development- JS: JavaScript Conditional Statements

Switch Statement:
<!DOCTYPE html> case 3:
<html> day = "Wednesday";
<body> break;
<h2>JavaScript switch</h2> case 4:
<p id="demo"></p> day = "Thursday";
<script> break;
let day; case 5:
switch (new Date().getDay()) { day = "Friday";
case 0: break;
day = "Sunday"; case 6:
break; day = "Saturday";
case 1: }
day = "Monday"; document.getElementById("demo").innerHT
break; ML = "Today is " + day;
case 2: </script>
day = "Tuesday"; </body>
break; </html>

04/27/2025 20

10
04/27/2025

Frontend web development- JS: JavaScript Conditional Statements

• Switch Statement:
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
let 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>

04/27/2025 21

Frontend web development- JS: JavaScript Conditional Statements

• Notes on Switch Statement:


If you want different switch cases to use the same code:

<!DOCTYPE html> case 0:


<html> case 6:
<body> text = "It is Weekend";
<h2>JavaScript switch</h2> break;
<p id="demo"></p> default:
<script> text = "Looking forward to the
let text; Weekend";
switch (new Date().getDay()) { }
case 4: document.getElementById("demo").innerHTML =
case 5: text;
text = "Soon it is Weekend"; </script>
break; </body>
</html>

04/27/2025 22

11
04/27/2025

Frontend web development- JS: JavaScript Conditional Statements

• Notes on Switch Statement:


If multiple cases matches a case value, the first case is selected.
If no matching cases are found, the program continues to the default label.
If no default label is found, the program continues to the statement(s) after the
switch.
Switch cases use strict comparison (===). The values must be equal and of the
same type to match.

04/27/2025 23

Frontend web development- JS: JavaScript Arrays


• An array is a special variable, which can hold more than one value.
Creating an Array: Syntax
const array_name = [item1, item2, ...];

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
const cars = [];
<script>
cars[0] = "Saab";
const cars = ["Audi", "Volvo", "BMW"];
cars[1] = "Volvo";
document.getElementById("demo").innerHTML = cars;
cars[2] = "BMW";
</script>
</body>
</html>

04/27/2025 24

12
04/27/2025

Frontend web development- JS: JavaScript Arrays


• Notes:
Array indexes start with 0. [0] is the first element. [1] is the second element.
Arrays are a special type of objects. The typeof operator in JavaScript returns
"object" for arrays. But, JavaScript arrays are best described as arrays.
Arrays are special kinds of objects. Because of this, you can have variables of
different types in the same Array.
We can create multi dimensional array by including array inside array.

04/27/2025 25

Frontend web development- JS: JavaScript Arrays


<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo1"></p>
<p id="demo2"></p> Audi
<p id="demo3"></p>
<script> 1,Volvo,BMW
const cars = ["Audi", "Volvo", "BMW"];
document.getElementById("demo1").innerHTML = cars[0];
cars[0]= 1; 3
document.getElementById("demo2").innerHTML = cars;
const mda = [[1, 2], [3, 4], [5, 6]];
document.getElementById("demo3").innerHTML = mda[1][0];
</script>
</body>
</html>

04/27/2025 26

13
04/27/2025

Frontend web development- JS: JavaScript Arrays: Basic Methods

• Some array methods include:


length: returns the number of elements in an array.
toString(): converts an array to a string of (comma separated) array values.
join(): joins all array elements into a string. It behaves just like toString(), but in
addition you can specify the separator.
pop(): removes the last element of an array.
push(): adds a new element to an array (at the end).
shift(): removes the first array element and "shifts" all other elements to a lower
index.
unshift(): appends a new element to an array (at the beginning).
concat(): creates a new array by merging (concatenating) existing arrays.
flat(): concatenates multi dimensional array into one array.

04/27/2025 27

Frontend web development- JS: JavaScript Arrays: Basic Methods


<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("p1").innerHTML = fruits.length;
document.getElementById("p2").innerHTML = fruits.join(" | ");
fruits.push("Kiwi");
document.getElementById("p3").innerHTML = fruits;
fruits.shift();
document.getElementById("p4").innerHTML = fruits;
fruits.unshift("Lemon");
document.getElementById("p5").innerHTML = fruits;
</script>
</body>
</html>

04/27/2025 28

14
04/27/2025

Frontend web development- JS: JavaScript Arrays: Basic Methods

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="p1"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruits2 = ["Cherry", "Avocado"];
let fruits3 = ["Lime", "Coconut"];
let newfruits = fruits.concat(fruits2, fruits3);
document.getElementById("p1").innerHTML = newfruits;
</script>
</body>
</html>

04/27/2025 29

Frontend web development- JS: JavaScript Arrays: Basic Methods

splice(): can be used to add or remove items from an array.


Syntax:
splice(par1, par2, rest):
 par1 (required): the position where new
elements should be added.
 par2: how many elements should be removed. splice(par1):
 rest: the new elements to be added.  par1 (required): the
position where after which
(included) all elements will
splice(par1, par2):
be deleted.
 par1 (required): the position.
 par2: how many elements should be removed.

04/27/2025 30

15
04/27/2025

Frontend web development- JS: JavaScript Arrays: Basic Methods


<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("p1").innerHTML = fruits; Banana,Orange,Apple,Mango
fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("p2").innerHTML = fruits; Banana,Orange,Lemon,Kiwi,Apple,Mango

fruits.splice(1, 1); Banana,Lemon,Kiwi,Apple,Mango


document.getElementById("p3").innerHTML = fruits;
Banana,Lemon
fruits.splice(2);
document.getElementById("p4").innerHTML = fruits;
</script>
</body>
</html>
04/27/2025 31

Frontend web development- JS: JavaScript Arrays: Search Methods

• indexOf(): searches an array for an element value and returns its position.
indexOf(item, start):
 Item (Required): the item to search for.
 Start (Optional): where to start the search.

• indexOf() returns -1 if the item is not found.


• If the item is present more than once, it returns the position
of the first occurrence.

• includes(): to check if an element is present in an array (returns true or false)

04/27/2025 32

16
04/27/2025

Frontend web development- JS: JavaScript Arrays: Search Methods

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is
found in position " + position;
</script>
</body>
</html>

04/27/2025 33

Frontend web development- JS: JavaScript Arrays: Sort Methods

• sort(): sorts an array alphabetically in ascending order.


• reverse(): reverses the elements in an array.
• Note: by combining sort() and reverse(), you can sort an array in descending order
<!DOCTYPE html>
<html>
<body>
<p id="p1"></p>
<p id="p2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("p1").innerHTML = fruits;
fruits.sort();
document.getElementById("p2").innerHTML = fruits;
</script>
</body>
</html>

04/27/2025 34

17
04/27/2025

Frontend web development- JS: JavaScript Arrays: Sort Methods


<body>
<p id="p1"></p>
<p id="p2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("p1").innerHTML = fruits;
fruits.sort().reverse();
document.getElementById("p2").innerHTML = fruits;
</script>
</body>

<body>
<p id="p1"></p>
<p id="p2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango", 100, 20,]; Sorts alphabetically, in
document.getElementById("p1").innerHTML = fruits; (100, 20) pares since 1
fruits.sort(); is less than 2 it
document.getElementById("p2").innerHTML = fruits;
supposes 100 as a
</script>
</body>
string is less than 20

04/27/2025 35

Frontend web development- JS: JavaScript Arrays: Sort Methods


• Numeric Sort: the sort() function sorts values as strings. We can change this behavior by providing
a compare function.
<body>
<p id="demo1"></p>
<p id="demo2"></p> Ascending
<script>
const points = [40, 100, 1, 5, 25, 10]; order
document.getElementById("demo1").innerHTML = points;
points.sort(function (a, b) { return a - b });
document.getElementById("demo2").innerHTML = points;
</script>
</body>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = points;
points.sort(function (a, b) { return b - a }); Descending
document.getElementById("demo2").innerHTML = points; order
</script>
04/27/2025 36

18
04/27/2025

Frontend web development- JS: JavaScript Arrays: Sort Methods

• Numeric Sort: The Compare Function:


The compare function should return a negative, zero, or positive value, depending on the arguments.
When the sort() function compares two values, it sends the values to the compare function, and sorts the values
according to the returned (negative, zero, positive) value.
If the result is negative, a is sorted before b.
If the result is positive, b is sorted before a.
If the result is 0, no changes are done with the sort order of the two values.
 Example: sort(function (a, b) { return a - b }), lets suppose a = 40 and b = 100.
40 – 100 = -60 since the result is negative then it sorts a before b (the first passed argument in function (a, b) before
the second passed argument).
 Example: sort(function (a, b) { return b - a }), lets suppose a = 40 and b = 100.
100 – 40 = 60 since the result is positive then it sorts b before a (the second passed argument in function (a, b) before
the first passed argument).

04/27/2025 37

Frontend web development- JS: JavaScript Objects


• Objects are variables that can contain many values and methods.
Creating an Array: Syntax
const object_name = [name1:value, name2:value, ...];
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<p id="demo2"></p>
<script>
const car = { type: "Fiat", model: "500", color: "white" };
document.getElementById("demo").innerHTML = "The car type is " + car.type;
document.getElementById("demo2").innerHTML = "The car model is " + car["model"];
</script>
</body>
</html>

04/27/2025 38

19
04/27/2025

04/27/2025 39

20

You might also like