JScript & ClientSideScripting

Introduction to JavaScript
Scripting languages
A scripting language is a type of programming
language that's designed for integrating and
communicating with other programming languages.
They are typically used for automating tasks that could
be time-consuming or complex if done manually.
Examples:
• - Form validation
• - Dynamic content updates
• - Animations
Introduction to JavaScript
• A lightweight, interpreted, cross-platform, and Case
sensitive.
• Developed by Brendan Eich in 1995.
Features:
• dynamic webpage, handle date and time, perform
form validation, no compiler needed.
• - High compatibility with HTML and CSS.
Applications:
• - Web Development, smart watches, machine
learning, Game Development, etc.
What can JavaScript Do?
1. JavaScript can dynamically modify HTML
pages.
2. JavaScript can validate user input.
3. JavaScript can be used to create cookies.
4. JavaScript is a fully-featured programming
language, etc.
Client-Side JavaScript Frameworks
1. React.js
2. Angular
3. Vue.js
4. Svelte
5. Ember.js
Server-Side JavaScript Frameworks
1. Node.js
2. Express.js
3. Next.js
4. NestJS
5. Meteor
Inserting JavaScript in HTML
JavaScript can be integrated into HTML in two
primary ways: Internal JavaScript and
External JavaScript.
Internal JavaScript
Internal JavaScript is embedded directly within
the HTML document using the <script> tag. The
script is typically placed in the <head> or at the
end of the <body> section.
Syntax
<script >
//javascript code
</script>
External JavaScript
External JavaScript involves linking a
separate .js file to the HTML document. This
approach is preferred for maintaining a clean and
organized structure, especially for large projects.
Syntax
<script src="script.js">
</script>
Built-in Functions
• alert()
• confirm()
• console.log()
• document.write()
• prompt()
alert()
Purpose: Displays an alert dialog with a
specified message and an ok button.
Example
alert(“hello everyone!”)
confirm()
Purpose: displays a dialog with a specified
message, along with Ok and Cancel buttons.
Confirm(“do you want to proceed?”)
Console.log()
Purpose: outputs a message to the web console.
It is used primarily for debugging purposes.
Syntax
console.log(message);
Example
Console.log(“this is a debug message”);
document.write()
Writes a string of text to the document stream. It
can be used to add content to the webpage
directly.
Example
Document.write(“java script”);
prompt()
Purpose: displays a dialog box that prompts the user
to input some text. It returns the input value if the
user clicks OK, or null if the user clicks Cancel.
Example
let userInput = prompt("Please enter your name:",
"Guest");
console.log("User input: " + userInput);
Variables in JavaScript
Variables are containers for storing data values.
They provide a way to label and access data in
memory.
Types of Variables declarations
1. var
2. let
3. const
var
• Introduced in ES5(ECMAScript) and earlier.
• Function- scoped or globally scoped.
• Can be updated and re-declared.
Syntax, var variableName;
var message = "Hello, World!";
var x;
x=10;
let
• Introduced in ES6.
• Block-scoped: Accessible only within the {}
block where it is defined.
• Can be updated but not re-declared in the same
scope.
Syntax let variableName;
let count = 5;
count = 10; // Allowed
console.log(count); // Output: 10
const
• Introduced in ES6.
• Block-scoped like let.
• Cannot be re-assigned or re-declared.
• Must be initialized during declaration.
Syntax, const variableName=value;
Example
Const PI=3.14;
Scope of Variables
• Global Scope: Accessible throughout the
program.
• Local Scope: Declared inside a function or
block.
• Block Scope: Specific to {} blocks when using
let or const.
Rules for Variable Names
• Letters, digits, underscores, and $ sign
allowed.
• Must begin with a-z, A-Z,$,_.
• JavaScript reserved words cannot be used as a
variable name.
• Hemant and Hemant different variable(case
sensitive).
Operator
An operator is a symbol that tells the compiler
which arithmetic or logical operation to be
performed between the respective operands.
Types of operators
1. Arithmetic
2. Logical
3. Assignment
4. Comparison
Arithmetic Operators
Operator Example
+ (Addition) Ex: x+y
- (Subtraction) Ex: x-y
* (Multiplication) Ex: x*y
/(Division) Ex: x/y
% (Modulus) Ex: x%y
++ (Increment) Ex: x++
-- (Decrement) Ex: x--
Comparison Operators
Operator Example
== (Equal) Ex: (A==B)
!= (Not Equal) Ex: (A!=B)
>(Greater than) Ex: (A>B)
< (Less than) Ex: (A<B)
>= (Greater than or Equal to) Ex: (A>=B)
<= (Less than or Equal to) Ex: (A<=B)
Logical Operators
Operator Example
&& (Logical AND) Ex: (A && B)
|| (Logical OR) Ex: (A || B)
<condition> ? <true>: <false> Ex: 7>5 ? “yes”:”no”
If 7 is greater than 5, yes will be

printed else no will be printed
Assignment Operators
Operator Example
= (Simple Assignment) Ex: x=10
+= (Add and Assignment) Ex: x+=b
-= (Subtract and Assignment) Ex: x-=c
*= (Multiply and Assignment) Ex: x*=y
/= (Divide and Assignment) Ex: x/=y
%= (Modules and Assignment) Ex: a%=b
Functions
• Functions are groups of code which is used
more often.
• It leads programming to code reusability and
clean code.
Type of Functions
1. Pre-defined
2. User defined
Pre defined
Such functions are defined at the time of making
of any language.
User defined
Such function are defined by users according to
their needs.
Syntax
function <functioname>(){
// function body
}
Function <functionName>(a,b)
{
// function body
}
DOM(document object model)
When a web page is loaded, the browser creates
a document object model of the page.
1. The Document Object Model (DOM) is a
programming interface for web documents. It
represents the structure of a web page as a tree of
objects, allowing developers to access, modify,
and interact with the content, structure, and
styling of the webpage dynamically.
2. The DOM is a hierarchical representation of a
webpage where every element (e.g., tags.,
attributes, text) is represented as a node.
3. It is platform and language-independent but
commonly manipulated using JavaScript in web
development.
Accessing the DOM with JavaScript
Selecting Elements
• getElementById(): select an element by its ID.
• getElementsByClassName(): selects all elements
with a specific class.
• getElementsByTagName(): selects all elements
with a specific tag name.
• querySlector(): selects the first element matching a
CSS selector.
• querySelectorAll(): selects all elements matching a
CSS selector.
getElementById()
Syntax
const element =
document.getElementById("myId");
getElementsByClassName()
Syntax
const elements =
document.getElementsByClassName("myClass"
);
getElementsByTagName()
Syntax
const elements =
document.getElementsByTagName("p");
querySlector()
Syntax
const element =
document.querySelector(".myClass");
querySelectorAll()
Syntax
const elements =
document.querySelectorAll("div");
Modify Elements
const element = document.getElementById("myId");
element.textContent = "New Content";
element.innerHTML = "<strong>Bold Content</strong>";

JavaScript Events
JavaScript Events are actions or
occurrences that happen in the browser. They
can be triggered by various user interactions or
by the browser itself.
Common events include mouse clicks, keyboard
presses, page loads, and form submissions.
Event handlers are JavaScript functions that
respond to these events, allowing developers to
create interactive web applications.
Syntax
<htmlElement EventType=“Action to be
performed”>
Common JavaScript Events
Event Attribute Description
onclick Triggered when an element is clicked.
onmouseover Fired when the mouse pointer moves over an element.
onmouseout Occurs when the mouse pointer leaves an element.
onkeydown Fired when a key is pressed down.
onkeyup Fired when a key is released.
onchange Triggered when the value of an input element changes.
onload Occurs when a page has finished loading.
onsubmit Fired when a form is submitted.
onfocus Occurs when an element gets focus.
onblur Fired when an element loses focus.

AJAX
AJAX (Asynchronous JavaScript and XML)
is a web development technique used to create
fast and dynamic web applications. It allows a
webpage to update asynchronously by
exchanging small amounts of data with a server
in the background, without the need to reload the
entire page.
Key Features of AJAX
1. It is a combination of technologies: HTML,
CSS, JavaScript, XML/JSON, and the
XMLHttpRequest object.
2. It improves the user experience by making

web pages are more responsive and
interactive.
Simple AJAX Applications
1. Fetching and Displaying Data from a Server
2. Submitting a Form Without Reloading
3. Autocomplete Search Box
4. Real-time Weather Information etc.
Form validation
<html>
<head>
<title>java script</title>
</head>
<body>
<form onclick="formdata();">
UserId: <input type="text" id="i1"><br>
Contact: <input type="text" id="i2"><br>
Password: <input type="password" id="i3"><br>
Confirm passwrd: <input type="password" id="i4"><br>
<input type="submit" value="submit your form">
</form>
</body>
<script>
function formdata(){
let a=document.getElementById("i1").value;
let b=document.getElementById("i2").value;
let c=document.getElementById("i3").value;
let d=document.getElementById("i4").value;
if(a==""||b==""||c==""||d=="")
{
alert("all fields are mendatory")
}
}
</script>
</html>

JScript & ClientSideScripting

Uploaded by

JScript & ClientSideScripting

Uploaded by

Introduction to JavaScript

If 7 is greater than 5, yes will be

element.innerHTML = "<strong>Bold Content</strong>";

onclick Triggered when an element is clicked.

onmouseover Fired when the mouse pointer moves over an element.

onmouseout Occurs when the mouse pointer leaves an element.

onkeydown Fired when a key is pressed down.

onkeyup Fired when a key is released.

onchange Triggered when the value of an input element changes.

onload Occurs when a page has finished loading.

onsubmit Fired when a form is submitted.

onfocus Occurs when an element gets focus.

onblur Fired when an element loses focus.

2. It improves the user experience by making

You might also like