WT Unit-3
WT Unit-3
"A scripting language is a type of programming language which does not require explicit
compilation step, and it is designed for a runtime system to automate the execution of
tasks.
All scripting languages are programming languages. The scripting language is basically a
language where instructions are written for a run time environment. They do not require the
compilation step and are rather interpreted.
Scripting languages are types of programming languages where the instructions are written
for a run-time environment, to bring new functions to applications, and integrate or
communicate complex systems and other programming languages.
A scripting language is used to write scripts. These contain a series of commands that are
interpreted one by one at runtime.
Nowadays, scripts are generally associated with web development where they are widely
used to make dynamic web applications. Scripting languages can be divided into two
categories:
Server-side scripting languages create the scripts that run on the server and hence
minimize the workload of a browser. The functionality of your website is written in
those scripting languages. The most commonly used server-side scripting languages
are Perl, Ruby, Python, PHP, etc.
Client-side scripting languages create the scripts that run on the client side (i.e. your
browser). These are sent from the server by server-side scripts. Some good examples
are JavaScript, jQuery, CSS etc.
Scripting languages support "script," which is small program written for a specific runtime
environment. These are interpreted at runtime rather than compiled. It means, to convert the
source code to machine code, scripting languages use an interpreter, not the compiler. As
scripting language is not compiled so as we write something meaningful, we can run it
immediately.
he scripting language refers to dynamic high-level, general-purpose interpreted languages
such as Python, Perl, etc. Thus, a scripting language can automate different environments
such as application softwares, webpages, text editors, operating system shells, computer
games, etc.
While all scripting languages are programming languages, not all programming
languages are scripting languages.
A scripting language is a programming language that executes tasks within a special run-time
environment by an interpreter instead of a compiler. They are usually short, fast, and
interpreted from source code or bytecode.
Such environments include software applications, web pages, and even embedded systems in
operating system shells and games. Most modern structures support these languages, which
gives them a wide support while also being developed through an open-source process.
Using a scripting language is preferable depending on your goals and environment. As they
are a series of commands executed with no need for a compiler, they are cross-platform and
do not require special software to be installed in order to run — except for a web
browser, of course.
There are two main types: server-side and client-side. They differ on where the code is run
from, which affects not only the actual languages chosen but also the performance and their
capabilities.
Below, you will learn more about each of these types of scripting languages and some
examples.
They are often used to create dynamic websites and platforms, handle user queries, and
generate and provide data and others. A famous example of server-side scripting is the use
of PHP in WordPress.
Scripting Laguages
Scripting languages are like programming languages that allow us to write programs in form
of script. These scripts are interpreted not compiled and executed line by line.
Two types of Scripting languages:
4)It Sends requests to the server and Retrieval 4)It processes the user input and Displays
of data from Server the requested pages.
5)Does not need interaction with the server. 5)Requires server interaction.
6)Cannot connect to the databases on the web 6) Connect to the databases that is on web
server. server.
7)Response from a client-side script is faster 7)Response from a server-side script is
because the scripts are processed on the local slower because the scripts are processed
computer remotely.
8)Client side scripting can’t access the file 8)Server side scripting can access the file
system that resides at the web server. system residing at the web server.
Dynamic Typing
Functional Style
Platform Independent
Prototype-based
Interpreted Language
Async Processing
Interpreter Centered
Handling Events
Features Of JavaScript
JavaScript language consists of several different features. Some of the general JavaScript
features are as follows –
JavaScript is very useful while using forms. It has the capability to validate user input for
errors and also saves time. If the user leaves a required field empty or the information is
incorrect, JavaScript checks for them before sending the data over to the server.
Since JavaScript is a client-side technology, it can perform basic calculations on the browser.
The browser does not need to ask server time for every task. This is especially helpful when a
user needs to perform these calculations repeatedly. In these cases, connecting to the server
would take a lot more time than performing the actual calculations.
3. Greater Control
JavaScript provides greater control to the browser rather than being completely dependent on
the web servers. JavaScript provides various browsers with additional functionalities that help
reduce server load and network traffic.
4. Platform Independent
Since browsers interpret JavaScript, it solves the problem of compilation and compatibility.
Thus it can run on Windows, Macintosh, and other Netscape-supported systems. Also, it is
possible to embed them in any other script like HTML that keeps JavaScript into use.
5. Handling Dates and Time
Unlike other programming languages, JavaScript has built-in functions to determine the date
and time. Thus it is very easy to code only by using methods like .getDate().
6. Generating HTML Content
JavaScript has very handy features to dynamically generate HTML content for the web. It
allows us to add text, links, images, tables, etc after an event occurrence (eg – mouse click).
7. Detecting the User’s Browser and OS
JavaScript is very capable in the detection of the user’s browser and OS information. Though
JavaScript runs on every platform, there may occur a situation where we need the user’s
browser before processing. This can be helpful for writing code that results in different
outputs in different browsers.
Do you know How to Declare and Initialize a JavaScript Variable?
Modern JavaScript Features
If we dive into some more recently added features of JavaScript that makes it unique from
other programming languages. There are a lot more modern features of JavaScript invented
after some general features. Some of them are as follows –
1. Let/Const
JavaScript has introduced the keywords ‘let’ and ‘const’ that are available to replace ‘var’.
Unlike ‘var’, they are important due to their blocked scope i.e we can only access them in the
block we defined them in. Whereas ‘var’, even if we initialize it inside a function, we can
access it outside of the function.
2. Arrow Functions
These functions are very useful in simplifying the syntax and tamp down the lines of codes
for the web page or web application. Since these are light-weight in syntax, they can be very
easily used in anonymous functions in JavaScript.
3. Template Literal
This is a common feature in other programming languages that allows you to save variables
directly into strings. This proves to be an important tool for developers as it permits them to
focus more on the development of the application rather than spending the time on syntax.
Though array functions are not necessary for any programming language, they do simplify
things for the developer. This also compacts the code and makes it much easier to understand.
A regular array and an associative array, JavaScript supports them both. While a regular array
contains integer values for its index, indexes can be strings for an associative array.
5. Default Parameters
This JavaScript feature helps to avoid collapsing the whole code for a simple mistake. It is
very useful when the developer needs to check the working of a function without any
parameters.
6. Property Shorthand
Built-in methods like .get() are available for the developer’s use. These methods help avoid
writing the same code every time and cut back on various lines of code. These inborn
methods are really supportive of cutting back the developing time and cost.
Features of JavaScript
1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it
is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather
than using classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS,
etc.
8. It provides good control to the users over the web browsers.
<html>
<head>
<script>
function fun(a,b)
{
document.write("value of a: " +a);
document.write("<br>");
document.write("value of b: " +b);
}
</script>
</head>
<body>
<input type="button" onclick="fun(3,5)" value="click"/>
</body>
</html>
<html>
<head>
<script>
function fun()
{
document.write("welcome");
}
</script>
</head>
<body>
<input type="button" onclick="fun()" value="click"/>
</body>
</html>
<html>
<head>
<script>
function add(a,b)
{
document.write(a+b);
}
</script>
</head>
<body>
<input type="button" onclick="add(5,5)" value="click"/>
</body>
</html>
<html>
<head>
<script>
function fun(a,b)
{
alert(a+b);
}
</script>
</head>
<body>
<input type="button" onclick="fun(5,5)" value="click"/>
</body>
</html>
<html>
<head>
<script>
function fun(a,b)
{
return(a+b);
}
document.write(fun(23,5));
</script>
</head>
<body>
<p> funcrions with return value</p>
</body>
</html>
<html>
<body>
<p> funcrions with return value</p>
<script>
function fun(a,b)
{
return(a+b);
}
document.write(fun(23,5));
</script>
</body>
</html>
<html>
<body>
<p> funcrions with return value</p>
<script>
function fact(n)
{
if(n==0)
return(1);
else
return(n*fact(n-1));
}
document.write(fact(5));
</script>
</body>
</html>
<html>
<body>
<p> funcrions with return value</p>
<script>
function fact(n)
{
if(n==0)
return(1);
else
return(n*fact(n-1));
}
var a=Number(prompt('enter a number'));
// var a=parseInt(prompt('enter a number')); also used
document.write("factorial:" + fact(a));
</script>
</body>
</html>
Arrays:
<html>
<body>
<script>
arr=[1,2,3,4,5,6,7];
for(i = 0; i < arr.length; i++)
{
document.write(arr[i] + "<br>");
}
</script>
</body>
</html>
<html>
<body>
<script>
arr=Array(1,2,3,4,5);
for(i = 0; i < arr.length; i++)
{
document.write(arr[i] + "<br>");
}
</script>
</body>
</html>
<html>
<body>
<script>
arr=Array("mohan","Hani","Rihan");
for(i = 0; i < arr.length; i++)
{
document.write(arr[i] + "<br>");
}
</script>
</body>
</html>
<html>
<body>
<p id="mn"></p>
<script>
arr=Array("mohan","Hani","Rihan");
for(i = 0; i < arr.length; i++)
{
document.getElementById("mn").innerHTML=arr;
}
</script>
</body>
</html>
Example-2:
<html>
<body>
<script>
arr1 = ["ABCd", 24, 18000];
arr2 = ["EFGd", 30, 30000];
arr3 = ["IJKd", 28, 41000];
arr4 = ["EFGd", 31, 28000];
arr5 = ["EFGd", 29, 35000];
salary = [arr1, arr2, arr3, arr4, arr5];
for(i = 0; i < salary.length; i++)
{
document.write(salary[i] + "<br>");
}
</script>
</body>
</html>
<html>
<body>
<h2>JavaScript Math.PI</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.PI;
</script>
</body>
</html>
Example
Math.E // returns Euler's number
Math.PI // returns PI
Math.SQRT2 // returns the square root of 2
Math.SQRT1_2 // returns the square root of 1/2
Math.LN2 // returns the natural logarithm of 2
Math.LN10 // returns the natural logarithm of 10
Math.LOG2E // returns base 2 logarithm of E
Math.LOG10E // returns base 10 logarithm of E
Math Methods
The syntax for Math any methods is : Math.method(number)
Number to Integer
There are 4 common methods to round a number to an integer:
<html>
<body>
<script>
document.write(Math.floor(19.6) + "<br>");
document.write(Math.ceil(19.6) + "<br>");
document.write(Math.round(19.6) + "<br>");
document.write(Math.trunc(19.6) + "<br>");
</script>
</body>
</html>
<html>
<body>
<script>
document.write(Math.max(3,1,23,45) + "<br>");
document.write(Math.min(3,1,23,45) + "<br>");
document.write(Math.sqrt(81) + "<br>");
document.write(Math.pow(3,3) + "<br>");
document.write(Math.abs(-1) + "<br>");
document.write(Math.sin(45) + "<br>");
document.write(Math.cos(45) + "<br>");
document.write(Math.tan(45) + "<br>");
</script>
</body>
</html>
Constructor
You can use 4 variant of Date constructor to create date object.
1. Date()
2. Date(milliseconds)
3. Date(dateString)
4. Date(year, month, day, hours, minutes, seconds, milliseconds)
Methods Description
getDate() It returns the integer value between 1 and 31 that represents the day for the specified
date on the basis of local time.
getDay() It returns the integer value between 0 and 6 that represents the day of the week on
the basis of local time.
getFullYear() It returns the integer value that represents the year on the basis of local time.
getHours() It returns the integer value between 0 and 23 that represents the hours on the basis of
local time.
getMilliseconds() It returns the integer value between 0 and 999 that represents the milliseconds on the
basis of local time.
getMinutes() It returns the integer value between 0 and 59 that represents the minutes on the basis
of local time.
getMonth() It returns the integer value between 0 and 11 that represents the month on the basis
of local time.
getSeconds() It returns the integer value between 0 and 60 that represents the seconds on the basis
of local time.
setDate() It sets the day value for the specified date on the basis of local time.
setDay() It sets the particular day of the week on the basis of local time.
setFullYears() It sets the year value for the specified date on the basis of local time.
setHours() It sets the hour value for the specified date on the basis of local time.
setMilliseconds() It sets the millisecond value for the specified date on the basis of local time.
setMinutes() It sets the minute value for the specified date on the basis of local time.
setMonth() It sets the month value for the specified date on the basis of local time.
setSeconds() It sets the second value for the specified date on the basis of local time.
toDateString() It returns the date portion of a Date object.
toJSON() It returns a string representing the Date object. It also serializes the Date object
during JSON serialization.
<html>
<body>
<script>
obj=new Date();
document.write(Date() + "<br>");
document.write(obj.getDate() + "<br>");
document.write(obj.getMonth()+1 + "<br>");
document.write(obj.getFullYear() + "<br>");
document.write(obj.getDay() + "<br>");
document.write(obj.getHours() + "<br>");
document.write(obj.getMinutes() + "<br>");
document.write(obj.getSeconds() + "<br>");
document.write(obj.getMilliseconds() + "<br>");
</script>
</body>
</html>
JavaScript String
The JavaScript string is an object that represents a sequence of characters.
1. By string literal
2. By string object (using new keyword)
1) By string literal
The string literal is created using double quotes. The syntax of creating string using
string literal is given below:
charCodeAt() It provides the Unicode value of a character present at the specified index.
indexOf() It provides the position of a char value present in the given string.
lastIndexOf() It provides the position of a char value present in the given string by searching a
character from the last position.
search() It searches a specified regular expression in a given string and returns its position
if a match occurs.
match() It searches a specified regular expression in a given string and returns that regular
expression if a match occurs.
substr() It is used to fetch the part of the given string on the basis of the specified starting
position and length.
substring() It is used to fetch the part of the given string on the basis of the specified index.
slice() It is used to fetch the part of the given string. It allows us to assign positive as well
negative index.
toLocaleLowerCase() It converts the given string into lowercase letter on the basis of host?s current
locale.
toLocaleUpperCase( It converts the given string into uppercase letter on the basis of host?s current
) locale.
trim() It trims the white space from the left and right side of the string.
<html>
<body>
<script>
s1 = "JAVA SCRIPT IS NOT JAVA ";
s2=new String("mohan");
document.write(s1 + "<br>");
document.write(s2 + "<br>");
document.write(s1.charAt(2) + "<br>");
document.write(s1.concat(s2) + "<br>");
document.write(s2.substr(2,2) + "<br>");
document.write(s1.toLowerCase() + "<br>");
document.write(s2.toUpperCase() + "<br>");
document.write(s1.indexOf('JAVA') + "<br>");
document.write(s1.lastIndexOf('JAVA') + "<br>");
</script>
</body>
</html>
By the help of Number() constructor, you can create number object in JavaScript. For
example:
Methods Description
toExponential() It returns the string that represents exponential notation of the given number.
toFixed() It returns the string that represents a number with exact digits after a decimal point.
JavaScript Boolean
JavaScript Boolean is an object that represents value in two states: true or false. You
can create the JavaScript Boolean object by Boolean() constructor as given below.
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. Thus, 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.
Mouse events:
mouseover onmouseover When the cursor of the mouse comes over the element
mousedown onmousedown When the mouse button is pressed over the element
Mouseup onmouseup When the mouse button is released over the element
Keydown & Keyup onkeydown & onkeyup When the user press and then release the key
Form events:
Window/Document events
d
Resize When the visitor resizes the window of the browser
onresize
Click event:
<html>
<body>
<script>
function fun()
{
alert("click event");
}
</script>
<input type="button" onClick="fun()" value="click"/>
</body>
</html>
Mouseover event:
<html>
<body>
<script>
function fun()
{
alert("mouseover event");
}
</script>
<input type="button" onmouseover="fun()" value="keep cursor over me"/>
<script>
function fun1()
{
document.getElementById("mn").src = "Flower.jpg";
}
function fun2()
{
document.getElementById("mn").src = "Flower2.jpg";
</script>
</body>
</html>
Focus Event:
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="mn" onfocus="fun()"/>
<script>
function fun()
{
document.getElementById("mn").style.background="red";
}
</script>
</body>
</html>
KeyDown event:
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="mn" onkeydown="fun()"/>
<script>
function fun()
{
document.getElementById("mn");
alert("key pressed");
}
</script>
</body>
</html>
Onload event:
<html>
<head> Javascript Events</head>
<body onload="alert('page Loaded SUCCESSFULLY')">
<script>
document.write("<br>Page loaded successfully");
</script>
</body>
</html>
Form handling:
<HTML>
<SCRIPT>
function FUN(form)
{
var TestVar = form.inputbox.value;
alert ("You typed: " + TestVar);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM >
<INPUT TYPE="text" NAME="inputbox" ><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="FUN(this.form)">
</FORM>
</BODY>
</HTML>
<html>
<body>
<script>
function validateform()
{
var name=document.myform.name.value;
var password=document.myform.password.value;
Form Validfation2:
<html>
<body>
<script>
function validateform()
{
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name=="")
{
alert("Name can't be blank");
return false;
}
else if(password.length<6)
{
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="fv.html" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>
fv.html:
<html>
<body>
<h1>form sumitted successfully</h1>
</body>
</html>
<HTML>
<SCRIPT>
function FUN(form)
{
var TestVar = form.inputbox.value;
alert ("You typed: " + TestVar);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM >
<INPUT TYPE="text" NAME="inputbox" ><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="FUN(this.form)">
</FORM>
</BODY>
</HTML>
<html>
<body>
<script>
function matchpass()
{
var firstpassword=document.f1.password1.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword)
{
return true;
}
else
{
alert("password must be same!");
return false;
}
}
</script>
Reg,html:
<html>
<body>
<h1>You are a valid user.</h1>
<h2>Thank you for visiting our site</h2>
</body>
</html>