Scribd
Upload
12 views

Module-5

Scripting Language

Uploaded by

Ramu Vankudoth
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views

Module-5

Scripting Language

Uploaded by

Ramu Vankudoth
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

MALLA REDDY ENGINEERING COLLEGE

(An UGC Autonomous Institution) Main Campus

Maisammaguda, Dhulapally(Post via Kompally), Secunderabad –


500100

Department of Computer Science & Engineering –Data Science

Subject: Web Technologies

Dr.Ramu Vankudoth
Assistant Professor
MODULE V Client side Scripting
Client-side scripting refers to the execution of scripts on the user's web browser rather than on a
web server. It is primarily used to create dynamic and interactive web pages, enhance user
experience, and reduce server load.

Key Features of Client-Side Scripting


1. Execution on Browser: The code runs directly on the client’s browser, making it faster for
immediate user interactions.
2. User Interactivity: Enables dynamic content updates, form validations, and animations
without requiring a page reload.
3. Reduced Server Load: By handling some tasks locally, it minimizes the need for frequent
server communication.
4. Enhanced Responsiveness: Allows real-time updates, making applications feel more
responsive to user actions.
What is JavaScript ?
1. JavaScript is a lightweight, interpreted, and dynamic programming language
primarily used for creating interactive and dynamic web content.
2. It is one of the core technologies of web development, alongside HTML and CSS.
3. JavaScript is supported by all major web browsers and runs directly on the client-
side (in the user's browser).
4. Client-Side Execution:
1. Runs directly in the web browser without the need for server-side compilation.
2. Enables faster interaction and immediate feedback for users.
Client-Side JavaScript

1. Client-side JavaScript is the most common form of the language.


2. The script should be included in or referenced by an HTML document for the code to be
interpreted by the browser.
3. It means that a web page need not be a static HTML, but can include programs that interact
with the user, control the browser, and dynamically create HTML content.
4. The JavaScript client-side mechanism provides many advantages over traditional
CGI server-side scripts. For example, you might use JavaScript to check if the user
has entered a valid e-mail address in a form field.
5. The JavaScript code is executed when the user submits the form, and only if all the
entries are valid, they would be submitted to the Web Server.
• JavaScript can be implemented using JavaScript statements that are placed
within the <script>... </script> HTML tags in a web page.
• You can place the <script> tags, containing your JavaScript, anywhere
within your web page, but it is normally recommended that you should
keep it within the <head> tags.
• The <script> tag alerts the browser program to start interpreting all the
text between these tags as a script. A simple syntax of your JavaScript will
appear as follows.
<script ...> <script language = "javascript" type =
JavaScript "text/javascript">
code JavaScript code
</script> </script>
<html>
<body>
<script language = "javascript" type = "text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
Javascript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language=“JavaScript”>
document.write(‘This is my first Javascript Page’);
</script>
</body>
</html>
Javascript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language=“JavaScript”>
document.write(‘<h1>This is my first Javascript Page</h1>’);
</script>
</body>
</html>
Javascript Statements
<html>
<head><title>My Page</title></head>
<body>
<p>
<a href=“myfile.html”>My Page</a>
<br>
<a href=“myfile.html” onMouseover=“window.alert(‘Hello’);”>
My Page </A>
</p>
</body></script></body>
</html>
Declaring variables

A JavaScript variable is simply a name of storage location. There


are two types of variables in JavaScript : local variable and global
variable.
There are some rules while declaring a JavaScript variable (also
known as identifiers).

1. Name must start with a letter (a to z or A to Z), underscore( _ ),


or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are
Correct JavaScript Example of JavaScript
variable
variables <html>
1.var x = 10; <body>
2.var _value=“Ramu"; <script>
Incorrect JavaScript variables
var x = 10;
1.var 123=30;
var y = 20;
2.var *aa=320;
var z=x+y;
document.write(z);
</script>
</body>
</html>
JavaScript local variable
A JavaScript local variable is declared inside block or function. It is
accessible within the function or block only.
Variables can be declared in different scopes

• Global Scope 1.<script>


• Local (Function) Scope 2.function abc(){
<script> 3.var x=10;//local variable
function addNumbers() {
var sum = 5 + 4; 4.}
} 5.</script>
<script>
Here, the sum variable is created inside the addNumbers() function.
Global Scope

• A variable declared outside any function or block has global scope.


• It can be accessed and modified anywhere in the program.
• Global variables are attached to the window object in browsers or the
global object in Node.js
<html>
<body>
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();

</script>
</body>
</html>
Functions
JavaScript functions are used to perform operations. We can call JavaScript function many
times to reuse the code.

To declare a function we have to use the reserved keyword "function", followed by its
name, and a set of arguments. Function Syntax
1. A JavaScript function is defined with the function keyword, followed by a name,
followed by parentheses ().
2. Function names can contain letters, digits, underscores, and dollar signs (same rules
as variables).
3. The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)

function name(parameter1, parameter2, parameter3)


{
// code to be executed
}
Advantage of JavaScript function

Functions are useful in organizing the different parts of a script into the several tasks
that must be completed. There are mainly two advantages of JavaScript functions.
1. Code reusability: We can call a function several times in a script to perform their
tasks so it saves coding.
2. Less coding: It makes our program compact. We don't need to write many lines of
code each time to perform a common task.

Rules for naming functions:


• It must be case sensitive.
• It must be start with alphabetical character (A-Z) or an underscore symbol.
• It cannot contain spaces.
<html><body>
<h1>JavaScript Functions</h1>
<p>Call a function which performs a calculation and returns the
result:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
let result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script></body></html>
Event handlers
JavaScript Events
• The change in the state of an object is known as an Event.
• In html, there are various events which represents that some activity is performed by
the user or by the browser.
• When javascript code is included in HTML, js react over these events and allow the
execution.
• This process of reacting over the events is called Event Handling. This is js handles
the HTML events via Event Handlers.
• For example, when a user clicks over the browser, add js code, which will execute
the task to be performed on the event.
Event Handler Uses:
• It can be used directly within HTML elements by adding special attributes to those
elements.
• They can also be used within the <script> tags or in external JavaScript files.
Some of the HTML events and their event handlers are:

Mouse events:
Event Performed Event Handler Description

click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over the element

mouseout onmouseout When the cursor of the mouse leaves an element

mousedown onmousedown When the mouse button is pressed over the element

mouseup onmouseup When the mouse button is released over the element

mousemove onmousemove When the mouse movement takes place.


Keyboard events:

Event Performed Event Handler Description


Keydown & Keyup onkeydown & onkeyup When the user press and then release the key

Form events:

Event Performed Event Handler Description


focus onfocus When the user focuses on an element
submit onsubmit When the user submits the form
blur onblur When the focus is away from a form element
When the user modifies or changes the value of
change onchange
a form element
Window/Document events

Event Performed Event Handler Description

load onload When the browser finishes the loading of the page

When the visitor leaves the current webpage, the browser


unload onunload unloads it

resize onresize When the visitor resizes the window of the browser

reset onreset When the window size is resized

scroll onscroll When the visitor scrolls a scrollable area


Form Validation
• It is important to validate the form submitted by the user because it can have
inappropriate values. So, validation is must to authenticate user.
• JavaScript provides facility to validate the form on the client-side so data
processing will be faster than server-side validation.
• Most of the web developers prefer JavaScript form validation.
• Through JavaScript, we can validate name, password, email, date, mobile numbers
and more fields.

Form Validation Example


• We are going to validate the name and password.
• The name can’t be empty and password can’t be less than 6 characters long.
• Here, we are validating the form on form submit.
• The user will not be forwarded to the next page until given values are correct.
email validation

We can validate the email by the help of JavaScript.


There are many criteria that need to be follow to validate the email id such as:
• email id must contain the @ and . character
• There must be at least one character before and after the @.
• There must be at least two characters after . (dot).
What is AJAX

• AJAX stands for Asynchronous JavaScript and XML, AJAX is not a programming
language or technology, but it is a combination of multiple web-related
technologies like HTML, XHTML, CSS, JavaScript, DOM, XML, XSLT and
XMLHttpRequest object.
• The AJAX model allows web developers to create web applications that are
able to interact with the user dynamically.
• It will also be able to quickly make a background call to web servers to retrieve
the required application data.
• AJAX applications are much more faster and responsive as compared to
traditional web applications.
How AJAX works?
• AJAX communicates with the server using XMLHttpRequest object.
• Let's try to understand the flow of ajax or how ajax works by the image displayed
below.
As you can see in the above example, XMLHttpRequest object plays a
important role.

• User sends a request from the UI and a javascript call goes to


XMLHttpRequest object.
• HTTP Request is sent to the server by XMLHttpRequest object.
• Server interacts with the database using JSP, PHP, Servlet, ASP.net etc.
• Data is retrieved.
• Server sends XML data or JSON data to the XMLHttpRequest callback
function.
• HTML and CSS data is displayed on the browser.
What is the role of the callback function in AJAX

• A callback function is called on completion of an AJAX request.


• We will define what to do with the response that is from the server in the
callback function.
• Therefore, the AJAX function is used to handle those responses that we will
get after sending the request.
• The callback function is used in two types in AJAX.
1. Anonymous
2. Named function
1. Anonymous: Steps for Using Callback as Anonymous Function.
• Create a new XMLHttpRequest.
• Use the open() method of XMLHttpRequest to specify the request.
• Use send() method of XMLHttpRequest to send the request to the server.
• Use onreadystatechange property of XMLHttpRequest() to use the
response.
• Call a callback function by attaching it with “onreadystatechange” as an
anonymous function with all the code that will be utilizing the response
that we got from server.

You might also like