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’);
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
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.
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
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();
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
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
