This document discusses JavaScript and its popularity. JavaScript is one of the core languages used to build dynamic web applications. It has enabled features like Google Maps that provide dynamic and interactive experiences to users. JavaScript's cross-platform compatibility allows developers to write code once that runs on different operating systems. It is also used for server-side programming with Node.js. Popular frameworks like React and Angular are built with JavaScript. Overall, JavaScript has become very popular due to its ability to create rich and engaging user interfaces across different platforms and devices.

1. Web System and Technologies
Lec-05
JavaScript Introduction
Alyia Amir
1

2. Most popular language
• JavaScript is one of the 3 languages all web developers must learn:
• HTML to define the content of web pages
• CSS to specify the layout of web pages
• 2023 continues JavaScript’s streak as its eleventh year in a row as the most commonly-
used programming language.
(https://survey.stackoverflow.co/2023/#technology)

3. Dynamic Web Applications
• enabling the development of dynamic web apps.
• Google Maps is one of the most well-known instances.
• This mapping service mainly relies on JavaScript to deliver dynamic
maps, real-time location updates, and route planning to users.

4. Why is JavaScript So Popular?
1. Dynamic Web Applications
• JavaScript has transformed the web by enabling the development of
dynamic web apps.
• Google Maps is one of the most well-known instances. This mapping
service mainly relies on JavaScript to deliver dynamic maps, real-time
location updates, and route planning to users.
• Users may easily drag and drop maps, zoom in and out, and get
instructions owing to JavaScript’s capabilities.

5. 2. Cross-Platform Compatibility
• Companies like Facebook use React Native,
a JavaScript framework, to create mobile apps for iOS and
Android platforms from a single codebase.
3.Node.js: Server-Side JavaScript
• Node.js is a server-side runtime environment that allows
developers to run JavaScript.
• This technique has been used by big corporations such as
Netflix. Netflix enhanced server speed, lowered response times,
and increased scalability using Node.js.
• As a consequence, millions of people throughout the world will
have a more enjoyable streaming experience.

6. 4. Rich User Interfaces
• JavaScript is the foundation for many modern user interfaces,
providing interactive and engaging experiences.
• Slack, a popular team collaboration application, powers its real-time
messaging and notifications with JavaScript.
• Users may talk, share data, and interact in real time because JavaScript
can update information without requiring page reloads.

7. 5. E-commerce: Shopify
Shopify, a renowned e-commerce platform, uses JavaScript to develop
flexible and customized online businesses.
• Product filtering, cart updates, and user account management are all
JavaScript-powered elements that add to a more user-friendly
shopping experience.
6. Animation and Gaming
• JavaScript is also a popular programming language for producing
animations and games within online applications.
• The game “2048” became popular and was created entirely in
JavaScript.

8. 7. APIs and Integration
• JavaScript is essential for linking web applications to external services and APIs.
• For example, Twitter uses JavaScript to allow developers to incorporate Twitter
features into their websites and applications.
• This level of integration increases user engagement and expands Twitter’s web
reach.
8. Frameworks and Libraries
• JavaScript has a thriving ecosystem of frameworks and libraries to help with
development.
• Among the most popular JavaScript frameworks are Angular, React, and Vue.js.
React is used by companies such as Airbnb to design user interfaces, assuring great
speed and maintainability at scale.

9. Until NOW
Basics of Web Framework
Structuring using HTML
Styling using CSS
Mobile-First
(Bootstrap & Media Queries)
Scripting
Client Side Server Side

10. Client-Side Scripting
• Client-side scripting is a process in which scripts are executed
by browsers without connecting the server.
• Its code written in HTML page or external file
• Enables web page to react based on user input/action

11. JavaScript
You can include JavaScript in your HTML in two ways:
1. JavaScript in <head> or <body>
2. Including it as a link to an external file
Placing scripts at the bottom of the <body> element improves the display
speed, because script interpretation slows down the display.

12. JavaScript in <body>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>

13. External JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>

14. External JavaScript Advantages
Placing scripts in external files has some advantages:
• It separates HTML and code
• It makes HTML and JavaScript easier to read and
maintain
• Cached JavaScript files can speed up page loads
• External scripts are practical when the same code is used in many
different web pages.

15. JavaScript
• Case sensitive language, all identifiers are case sensitive
• Each statement ends with semicolon “;”
• console.log(“Hello world”);
• console.log(‘Hello world’);

16. Getting output (4 ways)
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<script>
alert(5 + 6);
document.write(5+6);
console.log(5+6);
document.getElementById("demo").innerHTML = 5+6;
</script>
</body>
</html>

17. JavaScript Primative Data Types

18. JavaScript Types are Dynamic
<p id="demo"></p>
<script>
let x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String
document.getElementById("demo").innerHTML = x;
</script>
Output:
John

19. JavaScript Variables
Variables can be declared in 2 ways:
• Using let, scope is a block
let x = 5;
• Using const, scope is a block
const x = 5;
Only use let if you can't use const
• You cannot re-declare a variable declared with let or const. This will not work:
let carName = "Volvo";
let carName;
• It is not advisable to use var as you can redeclare variable by using var. For example:
var age = 3;
var age = 23;
var age = 65;
.

20. Rules for declaring variables
There are some rules while declaring a JavaScript variable:
• Strings are written with quotes. You can use single or double quotes:
• Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar
($ ) sign.
• After first letter we can use digits (0 to 9), for example value1.
• No space and punctuation characters

21. Javascript Variables
<body>
<p id="demo"></p>
<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!’;
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
Output:
3.14
John Doe
Yes I am!

22. NOTE
• All numbers in JavaScript are represented as floating-point values.
<p id="demo"></p>
<script>
let x = 3.14;
let y = 3;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
Output
3.14
3

23. Let has a block scope
{
let x = 2;
}
// x can NOT be used here

24. Redeclaring a Variable Using let
<body>
<p id="demo"></p>
<script>
let x = 10;
{
let x = 2;
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
Output
10

25. Redeclaring a Variable Using let
{
let x = 2;
let x = 3; // Not allowed
}

26. Const values must be assigned

27. <p id="demo"></p>
<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
Output:
John Doe
Concatenation +

28. Concatenation +
<p id="demo"></p>
<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
Output: 523

29. Concatenation +
<p id="demo"></p>
<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>
Output:55

30. ParseInt()
p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
parseInt("10") + "<br>" +
parseInt("10.00") + "<br>" +
parseInt("10.33") + "<br>" +
parseInt("34 45 66") + "<br>" +
parseInt(" 60 ") + "<br>" +
parseInt("40 years") + "<br>" +
parseInt("He was 40");
</script>
Output:
10
10
10
34
60
40
NaN

31. JavaScript - Objects
• Objects are variables too. But objects can contain many values.
• Object values are written as name : value pairs
• This code assigns many values to a variable named person
•
const person = {
firstName:"John",
lastName:"Doe“
};
• let person = {
firstName:"John",
lastName:"Doe“
};

32. Create a new object: Method 1
<script>
let person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"};
document.write(person.firstName + " is " + person.age + " years old.");</script>
</script>
Output
John is 50 years old.

33. Create a new object: Method 2
<script>
let student = new Object();
student.name = "Chris Hemsworth";
student.age = 21;
student.branch = "Computer Science";
document.write(student.name + " of the age " + student.age + " studies " + student.branch
+ ".");
</script>

34. Constant Object
You can NOT reassign a constant object
<p id="demo"></p>
<script>
try {
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};}
catch (err) {
document.getElementById("demo").innerHTML = err;}
</script>
Output
TypeError: Assignment to constant variable.

35. <script>
const person = {
firstName: "John",
lastName: "Doe",
age:50,
eyeColor: "blue“
};
const x = person;
x.age = 10;
document. write(person.firstName + " is " + person.age + " years old.“);
</script>
Output:
John is 10 years old.
Change value of an existing const Object

36. Add a new property to an existing const object
<script>
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"};
person.nationality = "English";
document.write(person.firstname + " is " + person.nationality + ".“);
</script>
Output:
John is English.

37. JavaScript – const Array object
You can NOT reassign a constant array
<body>
<p id="demo"></p>
<script>
try {
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
Output
TypeError: Assignment to constant variable.

38. JavaScript – Array object with let
<body>
<p id="demo"></p>
<script>
try {
let cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
Output

39. JavaScript – Array operations
There can be numerous operations on arrays
• “length” property determines number of elements in array
• “shift()” & “pop()” is used to remove an elements from first & last
position respectively
• “unshift()” & “push()” inserts/adds an element at first and last position
respectively
• Use “delete” operator to remove items based on index
• “splice()” is used to insert/delete elements based on index

40. length property
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
document.write(length);
</script>
Output: 4

41. shift() method
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
document.write(fruits);
</script>
Output:
Orange, Apple, Mango

42. Unshift() method
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon", "Pineapple");
document.write(fruits);
</script>
Output:
Lemon, Pineapple, Banana, Orange, Apple, Mango

43. Delete operator
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[2];
document.write(fruits);
</script>
Output:
Banana,Orange,,Mango

44. Splice() method
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
// At position 2, add 2 elements:
fruits.splice(2, 0, "Lemon", "Kiwi");
document.write(fruits);
</script>
Output:
Banana,Orange,Lemon,Kiwi,Apple,Mango

45. JavaScript – Array methods
• “concat()” is used to merge two arrays
• “sort()” in ascending order
• myChildren.sort();
• “reverse()” reverses the order, combining it with sort() will arrange the
array in descending order
• const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort()
fruits.reverse();

46. Concat() method
<script>
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const children = arr1.concat(arr2);
document.write(children);
</script>
Output:
Cecilie,Lone,Emil,Tobias,Linus

48. JavaScript - Functions
• A JavaScript function is a block of code designed to perform a
particular task.
• For example, a function can be called when an event occurs, like
when the user clicks a button.
• Defined with “function” keyword followed by [name] and parameters
• Unlike other languages, no need to specify parameter type
• Function may or may not return any value; no need to specify return
type

49. JavaScript - Functions
<body>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
let result = myFunction(4, 3);
document.write(result);
</script>
</body>
Output
12

50. JavaScript - Functions
<body>
<script>
function toCelsius(f) {
return (5/9) * (f-32); }
document.write(toCelsius(77));
</script>
</body>
Output
25

51. JavaScript
Statements

52. JavaScript – Loops
• for loop
• for/in loop
• while loop
• do-while loop
These loops work similar to other programming languages

53. JavaScript – (for loop)
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let len = cars.length;
let text = "";
for (let i = 0; i < len; i++)
{ text += cars[i] + "<br>"; }
document.write(text);
</script>
Output
BMW
Volvo
Saab
Ford

54. JavaScript – for/in loop
The JavaScript for in statement loops through the properties of an Object:
<script>
const person = {fname:"John", lname:"Doe", age:25};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
}
document.write(txt);
</script>
Output: John Doe 25

55. JavaScript – while loop
• The while loop loops through a block of code as long as a specified condition
is true.
<script>
let text = "";
let i = 0; output:
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
document.write(text);
</script>

56. JavaScript – do while loop
• The do while loop is a variant of the while loop.
• This loop will execute the code block once, before checking if the condition is
true, then it will repeat the loop as long as the condition is true.
<script>
let text = “”; let i = 0;
do {
text += "<br>The number is " + i;
i++;
}
while (i < 10);
document.write(text);
</script>
Output

57. JavaScript – Errors
Throw, and Try...Catch...Finally
• The try statement defines a code block to run (to try).
• The catch statement defines a code block to handle any error.
• The finally statement defines a code block to run regardless of the
result.
• The throw statement defines a custom error.
Output

58. • Example:
<script>
try {
adddlert("Welcome guest!"); }
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>

59. JavaScript – Errors
Output