Scribd
Upload
20 views72 pages

Javascript 1 24102024 094110am

Uploaded by

Areeba Hasan
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
20 views72 pages

Javascript 1 24102024 094110am

Uploaded by

Areeba Hasan
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/ 72

Lecture 05

Basics of JavaScript

1
INTRODUCTION
▷ A scripting language developed by
Netscape to enable Web authors to design
interactive sites.
▷ They can be written right in the HTML and
execute automatically as the page loads.
▷ A lightweight programming language that
runs in a Web browser(client-side).
▷ The programs in this language are
called scripts.
▷ Supports event-driven programming
▷ JavaScript code must be inserted between
<script> and </script> tags
HTML CSS JavaScript

markup language style sheet language programming language


conten presentatio
behavior
t n
What can it be used for?
1. Interactivity and Dynamic Behavior:
JavaScript allows web pages to respond to
user interactions such as clicks, key presses,
and mouse movements. This makes the web
experience more engaging and interactive.
For example, buttons that trigger actions,
form validation, dynamic content updates,
and animations are all handled by
JavaScript.Example: Updating part of a
webpage without reloading the whole page
(AJAX requests).Creating sliders, pop-up
dialogs, and interactive forms.
4
What can it be used for?
▷ 2. Client-Side Scripting: JavaScript runs directly in the browser
(client-side), which reduces the need for constant communication
with the server. This leads to faster response times and less
server load for many tasks, improving the overall performance of
web applications.

▷ 3. Versatility: JavaScript can be used for front-end and back-end


development. While it traditionally handled front-end tasks (what
the user sees and interacts with), frameworks like Node.js enable
JavaScript to be used on the server-side as well, making it a full-
stack development language. Example:Using Node.js for building
scalable network applications. Front-end frameworks like React,
Vue, and Angular for creating complex web interfaces.
What can it be used for?

▷ 4 . Event Handling:
JavaScript provides event-driven
programming, allowing the web page to
react to user events (e.g., button clicks,
form submissions, scrolling) and execute
code in response.
Example:
▷ Displaying error messages when a form
is submitted without required fields.
Case Sensitivity
▷ HTML is not case sensitive. The following
mean the same to the browser:
○ <HTML> -- <html>
○ <Html> -- <htMl>
▷ JavaScript is case sensitive. Only the first of
the following will result in the desired function
– the rest will generate an error or some other
undesirable event:
○ onMouseClick -- OnMouseClick
○ onmouseclick -- ONMOUSECLICK

alert(“hello world”);
Alert(“hello world”);

7
Example Code
<html>
<head>
<title>A First Program in JavaScript</title>
</head>
<body>
<script>
document.writeln("<h1>Welcome to
JavaScript Programming!</h1>" );
</script>
</body>
</html>
Ways to Output Data in
JavaScript

JavaScript can "display" data in different ways:


▷ Writing into an HTML element (innerHTML)
document.getElementById("demo").innerHTML
= 5 + 6;
▷ Writing into the HTML output
(document.write())
document.write (5 + 6);
▷ Writing into an alert box (window.alert()).
window.alert(5 + 6);
▷ Writing into the browser console
(console.log()).
Adding JavaScript to HTML
▷ In the HTML page itself:
<html>
<head>
<body>
<script>
// JavaScript code
</script></body>
</head>

▷ As a file, linked from the HTML page:


<head>
<script language=“javascript” src=“script.js”>
</script>
</head>
10
JavaScript Variables

11
12
JavaScript DataTypes:

▷ JavaScript has 8 Datatypes


▷ String
Number
Bigint
Boolean
Undefined
Null
Symbol
Object
13
The Object Datatype

▷ The object data type can contain


both built-in objects, and user
defined objects:

▷ Built-in object types can be:


objects, arrays, dates, maps, sets,
intarrays, floatarrays, promises, and
more.
14
15
The Object Datatype

16
17
Empty Value is also called Null Value
A JavaScript function is defined with the function keyword, followed by a name,
followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same
rules as variables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
Function parameters are listed inside the parentheses () in the function definition.
Function arguments are the values received by the function when it is invoked.
Inside the function, the arguments (the parameters) behave as local variables.
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};

// This is allowed:
person.age = 10; // Changing a property of the object

// This is NOT allowed:


const person = { firstName: "Jane" }; // Error! Cannot reassign the object
OR
Displaying Object Properties by
Name
Operators
JavaScript supports most of the traditional operators,
which are grouped depending on their functionality, as
follows:
▷ Arithmetic operators (+ , - , * , / ,%)
▷ Assignment operator (=)
▷ Relational operator( < ,> , <= , > =,== )
▷ Logical Operators (|| , &&, !)
▷ increment/decrement operator (-- ,++)
▷ Concatenation operator (+)
Read more about them here and here.

58
Control Statements
▷ Selection statements :
The selection statements (if-else and if-then-else)
are similar to those programming languages.

59
60
The switch statement
It is similar as other programming
languages.

61
Loop Statements
While loop :
While (control expression) {statements}

▷ For loop :
For(initial expr ; control expr ; increment)
{ //statements}
do { //statements } while (control
expression)

62
Screen output and
Keyboard input
▷ JavaScript represents the HTML document with
the document object.
▷ The window in which the browser displays an
html document is represent with window
object.
▷ The window object includes two properties the
window and document properties.
▷ The document object have several properties
and methods.

63
64
Window Object
▷ The window object represents an open
window in a browser.
▷ The window object is supported by all
browsers
▷ Global variables are properties of the window
object.
▷ Global functions are methods of the window
object.

65
Window object Methods

66
Window object Methods

67
Window object Properties

68
Window Object Properties

69
Popup Boxes
▷ Alert Box
window.alert(“Hello Every body!!");

▷ Confirm Box
window.confirm("Press a button");

▷ Prompt Box
window.prompt(“Your name","")

70
Some Additional Info:
72

You might also like