Scribd
Upload
33 views

Assignment No 4 Java Script1

The document provides information about JavaScript including: - JavaScript is a front-end scripting language developed by Netscape for dynamic content. - It can be used to add interactivity and manipulate HTML elements and the DOM. - JavaScript syntax can be embedded in HTML using <script> tags or linked from external .js files. - Common uses include form validation, handling user events, AJAX calls, and dynamic content updates. - Variables, functions, conditional statements, and other programming constructs allow complex client-side logic.

Uploaded by

RAtna
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views

Assignment No 4 Java Script1

The document provides information about JavaScript including: - JavaScript is a front-end scripting language developed by Netscape for dynamic content. - It can be used to add interactivity and manipulate HTML elements and the DOM. - JavaScript syntax can be embedded in HTML using <script> tags or linked from external .js files. - Common uses include form validation, handling user events, AJAX calls, and dynamic content updates. - Variables, functions, conditional statements, and other programming constructs allow complex client-side logic.

Uploaded by

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

06/16/2021

JavaScript

Ratna Patil
By Ratna Patil
Note: The material to prepare this presentation has been taken from internet and are
generated only for students reference and not for commercial use. 1
JavaScript
• JavaScript is a front-end scripting language developed by

06/16/2021
Netscape for dynamic content
• Lightweight, but with limited capabilities

Ratna Patil
• Can be used as object-oriented language
• Client-side technology
• Embedded in your HTML page
• Interpreted by the Web browser
• Simple and flexible
• Powerful to manipulate the DOM
2
JavaScript Advantages
• JavaScript allows interactivity such as:

06/16/2021
• Implementing form validation
• React to user actions, e.g. handle keys

Ratna Patil
• Changing an image on moving mouse over it
• Sections of a page appearing and disappearing

• Content loading and changing dynamically


• Performing complex calculations
• Custom HTML controls, e.g. scrollable table 3

• Implementing AJAX functionality


What Can JavaScript Do?
• Can handle events
• Can read and write HTML elements

06/16/2021
• Can validate form data
• Can access / modify browser cookies

Ratna Patil
• Can detect the user’s browser and OS
• Can be used as object-oriented language
• Can handle exceptions
• Can perform asynchronous server calls (AJAX)

4
JavaScript Syntax
• JavaScript can be implemented using <script>... </script> HTML tags
in a web page.
• Place the <script> tags, within the <head> tags.

06/16/2021
• Syntax:

Ratna Patil
• <script language="javascript" type="text/javascript">
• JavaScript code
• </script>

5
JavaScript Syntax
• Example:
<html>
<body>

06/16/2021
<script >
document.write("Hello World!");

Ratna Patil
</script>
</body>
</html>

• Output
Hello World!

6
JavaScript Editor and Extension

Use Notepad to write the code

06/16/2021
Save the document using .html (if embedded

Ratna Patil
JavaScript)

Save document with .js (if external JavaScript)

Run the code in brower 7


JavaScript - Placement in
HTML File
• There is a flexibility given to include JavaScript code anywhere
in an HTML document.

06/16/2021
• However the most preferred ways to include JavaScript in an
HTML file are as follows −

Ratna Patil
• Script in <head>...</head> section.
• Script in <body>...</body> section.
• Script in <body>...</body> and <head>...</head> sections.
• Script in an external file and then include in
<head>...</head> section.
8
JavaScript in <head>...</head> section
<html>
<head>
<script >
function sayHello()

06/16/2021
{ alert("Hello World") }
</script>
</head>

Ratna Patil
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

• This code will produce the following results −

9
JavaScript in External File
• HTML File
<html>
<head>

06/16/2021
<script type="text/javascript" src="filename.js" >
</script>
</head>

Ratna Patil
<body> ....... </body>
</html>

• JavaScript File – filename.js


function sayHello()
{ alert("Hello World") }
10
Standard Popup Boxes
• Alert box with text and [OK] button
• Just a message shown in a dialog box:

06/16/2021
alert("Some text here");

• Confirmation box

Ratna Patil
• Contains text, [OK] button and [Cancel] button:
confirm("Are you sure?");

• Prompt box
• Contains text, input field with default value:

prompt ("enter amount", 10); 11


JavaScript Variables
<script type="text/javascript">
<!--

06/16/2021
var name = "Ali";
var money;

Ratna Patil
money = 2000.50;
//-->
</script>

12
Sum of Numbers – Example
sum-of-numbers.html
<html>

06/16/2021
<head>
<title>JavaScript Demo</title>
<script type="text/javascript">

Ratna Patil
function calcSum() {
value1 =
parseInt(document.mainForm.textBox1.value);
value2 =
parseInt(document.mainForm.textBox2.value);
sum = value1 + value2;
document.mainForm.textBoxSum.value = sum;
}
</script> 13
</head>
Sum of Numbers – Example (2)
sum-of-numbers.html (cont.)
<body>
<form name="mainForm">

06/16/2021
<input type="text" name="textBox1" /> <br/>
<input type="text" name="textBox2" /> <br/>
<input type="button" value="Process"

Ratna Patil
onclick="javascript: calcSum()" />
<input type="text" name="textBoxSum"
readonly="readonly"/>
</form>
</body>

</html>
14
HTML Form Validation using JS:
Regular Expression- helps in pattern matching

• . : Matches any single character except a new line

06/16/2021
• + : Matches the preceding character or repeated character.
• $ : Matches character at the end of the line.
• ^ : Matches the beginning of a line or string.

Ratna Patil
• - : Range indicator. [a-z, A-Z]
• [0-9] : It matches digital number from 0-9.
• [a-z] : It matches characters from lowercase ‘a’ to lowercase ‘z’.
• [A-Z] : It matches characters from uppercase ‘A’ to lowercase ‘Z’.
• w: Matches a word character and underscore. (a-z, A-Z, 0-9, _).
• W: Matches a non word character (%, #, @, !).
• {M, N} : Donates minimum M and maximum N value.
15
HTML Form Validation using JS:
Login Form
<html>
<head>
<script>

06/16/2021
function Login1(){
var a=document.f1.t1.value;
var b=document.f1.t2.value;

Ratna Patil
if(a == 'admin' && b == 'admin'){
alert("Login Successful");
window.location="EnquiryForm.html“ }
Else {
alert("Invalid Username or Password");
document.f1.t1.value='';
document.f1.t2.value='';
document.f1.t1.focus();
return false;}} 16
</script>
</head>
HTML Form Validation using JS:
Login Form
<body>
<form name="f1" >
<table border=1 align=center>

06/16/2021
<caption><h1> Login Form </h1></caption>
<tr> <td>User Name </td>
<td> <input type="text" name="t1" required></td></tr>

Ratna Patil
<tr><td> Password </td>
<td> <input type="Password" name="t2" required></td></tr>
<tr > <td colspan=2 align=center>
<input type="button" value="Login" onclick="return Login1()" ></td> </tr>
</table>
</form>
</body>
</html>
17
HTML Form Validation using JS:
Student Registration Form (Required Field and accepting characters only in Name text box and
digits only in Phone text box)

<html> <head>
<script>
function validateForm() {
if(document.myForm.name.value.match(/^[A-Za-z]+$/)) { }

06/16/2021
else {
alert("Please Characters only");
document.myForm.name.focus();

Ratna Patil
return false; }
if(document.myForm.phone.value.match(/^[0-9]+$/)) {
message = "<br>NAME:" + document.myForm.name.value;
message += "<br>ADDRESS: " + document.myForm.address.value;
message += "<br>GENDER: " + document.myForm.G.value ;
message += "<br>PHONE: " + document.myForm.phone.value ;
message += "<br>DOB: " + document.myForm.DOB.value ;
message += "<br>EMail-Id: " + document.myForm.email.value ;
document.write(message); }
else {
alert('Please input numeric characters only');
18
document.myForm.phone.focus();
return false; } }
</script> </head>
HTML Form Validation using JS:
Student Registration Form (Required Field and accepting characters only in Name text box and
digits only in Phone text box)

<body>
<form name="myForm" onsubmit="return validateForm()">
<table border=1 align=center>
<caption><h1> Enquiry Form </h1></caption>

06/16/2021
<tr><td>Name</td>
<td><input type="text" name="name" required></td></tr>
<tr><td>Phone No:</td>

Ratna Patil
<td><input type="text" name="phone" maxlength=10 required></td></tr>
<tr><td>Email</td>
<td><input type="Email" name="email" required></td></tr>
<tr><td>DOB</td>
<td><input type="date" name="DOB" required></td></tr>
<tr><td>Gender</td>
<td><input type="radio" name="G" value="Male" checked>Male
<input type="radio" name="G" value="Female" >Female</td></tr>
<tr><td>Address(Region)</td>
<td><select name="address">
<option> Nashik </option>
19
<option> Pune </option></select></td></tr>
<tr><td colspan=2 align=center><input type="submit" value="Submit"></td></tr>
</table></form></body></html>
References
• https://www.w3schools.com/js
• https://www.w3schools.com/js/js_htmldom.asp

06/16/2021
• https://www.slideshare.net/rakhithota/js-ppt
• https://www.tutorialspoint.com/javascript/javascript_quic

Ratna Patil
k_guide.htm

20

You might also like