Chapter 4

CHAPTER-3
Client-Side Scripting Language

Introduction
 JavaScript is the most popular scripting language in
the world.
 JavaScript is a dynamic computer programming
language.
 JavaScript is the language for the web, for HTML, for
servers, PCs, laptops, tablets, cell phones, and more.
 A scripting language is a lightweight programming
language.
 JavaScript code can be inserted into any HTML page,
and it can be executed by all types of web browsers.
 JavaScript is easy to learn.
Cont…
 Client-side JavaScript is the most common form of the
language.
 The script should be included in or referenced by an HTML
document for the code to be interpreted by the browser.
 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.
 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 used to trap user-initiated events such
as button clicks, link navigation, and other actions that
the user initiates explicitly or implicitly.
Cont…
 Advantages of JavaScript
 The merits of using JavaScript are :
 Less server interaction :
 You can validate user input before sending the page off to the
server.
 This saves server traffic, which means less load on your server.
 Immediate feedback to the visitors :
 They don't have to wait for a page reload to see if they have
forgotten to enter something.
 Increased interactivity :
 You can create interfaces that react when the user hovers over
them with a mouse or activates them via the keyboard.
 Richer interfaces − You can use JavaScript to include such items as
drag-and-drop components and sliders to give a Rich Interface to
your site visitors.
Cont…
 Limitations of JavaScript :We cannot treat JavaScript as a full-
fledged programming language. It lacks the following important
features −
 Client-side JavaScript does not allow the reading or writing of
files. This has been kept for security reason.
 JavaScript cannot be used for networking applications because
there is no such support available.
 JavaScript doesn't have any multithreading or multiprocessor
capabilities.
 JavaScript- syntax:
 JavaScript can be implemented using JavaScript statements that are
placed within the <script>... </script> HTML tags in a web page.
 The <script> tag alerts the browser program to start interpreting all the
text between these tags as a script
Cont…
 The script tag takes two important attributes :
 Language: This attribute specifies what scripting language you
are using. Typically, its value will be JavaScript.
 Type: This attribute is what is now recommended to indicate
the scripting language in use and its value should be set to
"text/JavaScript".
 So your JavaScript segment will look like −
 <script language="JavaScript" type="text/JavaScript">
JavaScript code
</script>
Cont…
 Example:
 <html>
 <body>
 <script language=“javaScript" type="text/javasScipt">
 
 </script>
 </body>
 </html>
Cont…
 The HTML DOM (Document Object Model) is the
official W3C standard for accessing HTML elements.
 It is very common to use JavaScript to manipulate the
DOM (to change the content of HTML elements).
 Example
 x = document.getElementById("demo");
//Find HTML element with id="demo“

 x.innerHTML = "Hello JavaScript";
//Change the content of HTML element

 document.getElementById() is one of the most commonly
used HTML DOM methods.
Cont…
You can also use JavaScript to:
 Delete HTML elements
 Create new HTML elements
 Copy HTML elements
 And more ...
 Where?
 You can write java script code either in heading part or body
part.
 Before writing java script code you have to open <script> tag
and close it at the end.
 You can place any number of scripts in an HTML document.
 And those can be both in <head> and <body>.
Cont…
 But it is recommended to keep all your java script code (in a single
page) together.
 Java script code can be found alone as external file saved with
extension file .js.
 If your code is found externally then you have to call (link) it with
the current page like:
 <script src="myScript.js"></script>
 You are not expected to use <script> on external java script code.
 Java script is case sensitive (lower and upper case letters have
different meaning)
 Java script code can be used either in head or body part.
 Use semicolon at the end of single line code.
Cont…
 Why do we need scripting language in our web pages?
 To create
 Dynamic
 Interactive and
 concrete web pages
 Creates pages dynamically .
 Interact with the user. It can do some processing of forms
and can validate user input when the user submits the
form.
 JavaScript Can Change HTML Content.
 One of many HTML methods is document.getElementById().
 Example:
document.getElementById("head1").innerHTML="Javascript";
Cont…
 JavaScript Can Change HTML Styles (CSS)
 Changing the style of an HTML element, is a variant of changing an
HTML attribute:
 Example:
document.getElementById("head2").style.fontSize="100px";
 JS comment
 JavaScript comments can be used to explain JavaScript code,
just like other language's comment, text under comment will
not be executed.
 So that it makes your code more readable and prevent
execution, when testing alternative code.
 Single line and multi line comment are used.
Cont…
 Single Line Comments
 Single line comments start with //. Any text starting with // up
to the end of the line will be ignored by JavaScript (will not be
executed).
 Multi-line Comments

Multi-line comments start with /* and end with */.
 Any text between /* and */ will be ignored by JavaScript.
<script>
 Example: //document.write("My Script");
document.write("Second line");
/*document.write("third line"); Output
document.write("fourth line");
*/
</script>
Cont…
From the above example:
 The first line is commented using single line comment.
 The third and fourth lines are commented using multi line
comment, which prevents all of them from being executed.
 So second line is the only to be displayed.
 To display output
 Java script can display output in different ways.
 "innerHTML“
 "document.write()" and
 "alert" are used to display output.
Cont…
 Example:-1
<script>
alert("Text with Box");
</script>
"alert" is used to display message or text on a message box.

Example-2
<script> Output
document.write("text on screen");
</script>
 "document.write()" is used to display text on your
browser.
Cont…
Example-3
<body>
<h1 id="try"></h1>
<script>
document.getElementById("try").innerHTML="Text in heading";
</script>
Output
</body>
 On the above code <h1> has no element and it has id with the
name "try".
 In the java script code, document.getElementById() is used to
access any HTML element with its id.
Cont…
 And we use the id "try" to access <h1>. innerHTML is used to
manage the content of tag with that id. And "text in heading" is
assigned for <h1> and it is displayed.
Example-4:
<body>
<h1 id="try">this is heading text</h1>
<script>
var x;
x=document.getElementById("try").innerHTML;
</script>
</body>
 In this case, x has value "this is heading text" because we assigned
the content of id called "try" to a variable x.
Cont…
 We can use java script
 When the body is loaded
 Example:
<html><head> <title></title>
<script type=“text/java Script”>

</script>
</head>
<body onload=“name()”>
</body></html>
Cont…
 Following user actions(Events)
 Example:
<html>
<head>
<script type="text/javaScript">

</script>
</head>
<body>
<form
<input type="submit" value="open window" onClick="openwindow()">
</form>
</body></html>
Form Validation : Example
 <html> <head> 
if(submitOk="false")
 <script type="text/javaScript">

{ return false;
function validate()
 {
}
 var u=document.getElementById("user").value; }
 var pw=document.getElementById("pass").value; </script>
var e=document.getElementById("email").value.indexOf("@"); </head>
 submitOk="true";
<body>
 if(u!="Ambo")

<form onsubmit="return validate()"
{

action="">
alert("Invalid user name");
 submitOk="false"; User:<input type="text" id="user"
 } size="20"><br>
if(pw!="well" || pw=="") PW: <input type="text" id="pass"
{
size="20"><br>
alert("invalid pass word");
Email:<input type="text" id="email"
submitOk="false";
size="20"><br>
}
if(e==-1){
<input type="submit"
 alert("Invalid email"); value="open">
submitOk="false"; </form>
 }
</body></html>
Example: Cont…
 <html>  <script>
 <head>  function try1()
 </head>  {
 <body>  var x=document.info.name.value;
 <form name=“info”>  if(x=="")
 <p> Name <input type="text"  alert("please enter value");
name="name"></p>

 }
<p> ID <input type="text"
name="id"></p>  </script>
 <p><input type="submit"  </body>
name="button" value="Go"
 </html>
onClick="try1()"></p>
 </form>
Open and Close Windows
 <html>
 <head>
 <script type=“text/javascript”>
 function open()
 {
 window.open(“Form1.html” );
 }
 </script>
 </head>
 <body>
 <form>
 <input type=“button” value=“open window” onClick=“open()”>
 </form>
 </body>
 </html>
Cont…
 Confirm Box: used if you want the user to verify or accept something.
 <html><head>
 
 </script></head>
 <body>
 <form>
 <input type="button" value="open window" onClick="confirwin()">
 </form></body></html>
Prompt Box:
 <html><head>
 
 </script></head>
 <body><form>
 <input type="button" value="open window" onClick="promwin()">
 </form></body></html>
Control Statements
 Switch statement: used to compare one value to many others
 <html><body>
 
 </script></body></html>
JavaScript Loops
 In programming, loop is used to do activities
repeatedly.
 While you interpret the real world to the computer,
activities which are done repeatedly will be managed
by the use of loop.
 It will help us to iterate things as long as we want them.
 for loop: has the following syntax:

 for (initiation; condition; increment/decrement)
{
the code block to be executed
}
Cont…
 Semicolon (;) is used to separate the three statements in

for loop.
 Initiation is used to tell the loop where to start from.
 Condition is checked always before loop's code is
executed. If condition is false, code won't be executed.
 Increment or decrement is used to increase or decrease
the initial value. Like x++ or x--
For loop Example
 Example: Write a java script code to print 1-10 numbers using for
loop?
 <html>
 <body>
 
 </script>
 </body>
 </html>
JavaScript While Loop
 The while loop - loops through a block of code as long as a
specified condition is true.
 while (condition)
{
code block to be executed
}
 When using while loop, initial value has to be set before the
while loop. And increment/decrement must be there within
the block code.
While loop Example
 Example: Write a java script code to print 1-10 numbers using while loop?
 <html>
 <body>
 
 </script>
 </body>
 </html>
The 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, and then it will repeat the loop as
long as the condition is true.
 do
{
code block to be executed
}
while (condition);
Do…While Loop Example
 Example: Write a java script code to print 1-10 numbers using do…
while loop?
 <html>
 <body>
 
 </script>
 </body>
 </html>
The Break and Continue Statement
 The Break Statement
 The break statement can be used to jump out of a
loop. The break statement breaks the loop and continues
executing the code after the loop (if any):
 The Continue Statement

 The continue statement breaks one iteration (in the
loop), if a specified condition occurs, and continues
with the next iteration in the loop.
Example: Break
 <html><body>
 <script type=“text/javaScript”>
 
Example: Continue
 <html><body>
 <script type=“text/javaScript”>
 
Check form input length
 It is used to automatically jump to the  <BODY>
next field when a field’s maximum length 
has been reached.
<form id="myform">
 UN:<input type="text" size="4"
 <HTML><HEAD><script type="text/javaScript"> tabIndex="1" maxLength="4"
 
 </script></HEAD>
 </HTML>
Java Script Objects
 Object-is real world/concrete representation of tangible/visible things.
 Object-has :
 Properties-attributes
 Method/function-behavior /action performed by the object
 String Objects
 <html>
 <body>
 
 </script>
 </body>
 </html>
Dynamically Creating Frames in JavaScript
 Dynamically creating frame means, creating the <frameset> and <frame> at
runtime using JavaScript. Till now, we have been creating <frameset> using
HTML. But now we will learn, How to create <frameset> at run time.
 <HTML>
 <script language="JavaScript">
 document.open();
 document.write("<frameset cols='50%,50%'>");
 document.write("<frame src='frame1.html' name='lp'>");
 document.write("<frame src='frame2.html' name='rp'>");
 document.write("</frameset>");
 document.close();
 </script>
 </HTML>
 Important thing that is worth mentioning here is that I have used single quotes
(‘’) instead of (“”) in all the tags.

Chapter 4

Uploaded by

Copyright:

Available Formats

Chapter 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 4

Uploaded by

Copyright:

Available Formats

CHAPTER-3

Client-Side Scripting Language

//Find HTML element with id="demo“

//Change the content of HTML element

"alert" is used to display message or text on a message box.

 for loop: has the following syntax:

 Semicolon (;) is used to separate the three statements in

 The Continue Statement

You might also like