Scribd
Upload
4 views10 pages

Assignment:: 1: 1) .Write A Program To Embed Javascript Into HTML

The document contains a series of assignments demonstrating various JavaScript functionalities embedded in HTML, including alerts, conditional statements, loops, string functions, event handling, form validation, and date objects. Each assignment provides code examples illustrating the concepts. The document serves as a practical guide for learning JavaScript programming within a web context.

Uploaded by

abhimain1137
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views10 pages

Assignment:: 1: 1) .Write A Program To Embed Javascript Into HTML

The document contains a series of assignments demonstrating various JavaScript functionalities embedded in HTML, including alerts, conditional statements, loops, string functions, event handling, form validation, and date objects. Each assignment provides code examples illustrating the concepts. The document serves as a practical guide for learning JavaScript programming within a web context.

Uploaded by

abhimain1137
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Assignment :: 1

1).Write a program to embed JavaScript into HTML.


<html>
<head>
<title>Javascript:Good Morning All Of U</title>
<script type="javascript">
alert("Good Morning All Of U");
</script>
</head>
<body>
<p>This Message Only Display A Message Box.</p>
</body>
</html>

Assignment :: 2
2).Write a JavaScript code to demonstrate Conditional Statements.
<html>

<body>

<script language="javascript">

var result,n;
result=parseInt(prompt("Enter A Number"));

if(result >=35)

document.write("Pass");

else

document.write("Fail");

</script>

</body>

</html>

Assignment :: 3
3).Write a JavaScript code to Demonstrate Looping Statements.
 For Loop
<html>
<body>
<script language="javascript">
var i;
for(i=1;i<=10;i++)
{
document.write(i+"<br>");
}
</script>
</body>
</html>

 While Loop
<html>
<body>
<script language="javascript">
var i;
i=1;
while(i<=10)
{
document.write(i+"<br>");
i=i+1;
}
</script>
</body>
</html>

Assignment :: 4
4).Write JavaScript code to demonstrate Different String Function.
<html>
<body>
<script language="javascript">
var x="INDIA";
document.write(x.charAt(2));
document.write("\n"+x.charCodeAt(3));
var a="Hello";
var b="Friends";
document.write("\n"+a.concat(b));
var c="green";
document.write("\n"+c.replace("een","ay"));
document.write("\n"+x.toLowerCase());
document.write("\n"+c.toUpperCase());
document.write("\n"+x.indexOf('D'));
document.write("\n"+x.lastIndexOf("I"));
document.write("\n"+a.slice(0,3));
</script>
</body>
</html>

Assignment :: 5
5).Write JavaScript code to demonstrate onblur,onfocus,onload,onsubmit.
 Onblur & Onfocus Event
<html> </script>
<body> </body>
<h1>HTML DOM Events</h1> </html>
<h2>The onfocus and blur  Onsubmit Event
Events</h2>
<html>
<p>When you enter the input field,a
function sets <body>

the background color to yellow.</p> <p>Assign an "Onsubmit" event to a


form element</p>
<p>When you leave the input field,a
function sets the <p>when you submit the form, a
function is triggered which
background color to red</p>
alerts some text.</p>
Enter your name::<input type="text"
id="myInput" <form action="/action_page.php"
onsubmit="myFunction()">
onfocus="focusFunction()"
onblur="blurFunction()"> Enter name::<input
type="text" name="fname">
<script language="javascript">
<input type="submit"
function focusFunction() value="submit">
{ </form>
<script language="javascript">

document.getElementById("myInput").style.b function myFunction()


ackground="yellow";
{
}
alert("The Form Was
function blurFunction() Submitted");

{ }
</script>
</body>
document.getElementById("myInput").style.b
ackground="red"; </html>
}

Assignment :: 6
6).Write
<html>
JavaScript code to demonstrate onkeypress,
{
onmouseove ,onmouseout.
<body> alert("This is JavaTpoint");
//onkeypress
<h1>HTML DOM Events</h1> }

<h2>The onkeypress Event</h2> //-->

<p>A function is triggered when the user is </script>


pressing a key in the input field.</p>
<p onmouseover="mouseoverevent()"> Keep
<input type="text" cursor over me</p>
onkeypress="myFunction()">
</body>
<script>
</html>
function myFunction() {
// onmouseout
alert("You pressed a key inside the input
<html>
field");
<head>
}
<script>
</script>
<!--
</body>
function sayHello() {
</html>
alert("Mouse Out")
// onmouseover
}
<html>
//-->
<head>
</script>
<h1> Javascript Events </h1>
</head>
</head>
<body>
<body>
<p onmouseout = "sayHello()">This is demo
<script language="Javascript"
text for mouseover event.</p>
type="text/Javascript">
</body>
<!--
</html>
function mouseoverevent()

Assignment :: 7
7).Write a programto perform addition of two numbers using web form.
<html>
<head>
<script>
function add()
{
var numOne, numTwo, sum;
numOne = parseInt(document.getElementById("first").value);
numTwo = parseInt(document.getElementById("second").value);
sum = numOne + numTwo;
document.getElementById("answer").value = sum;
}
</script>
</head>
<body>
<p>Enter the First Number: <input id="first"></p>
<p>Enter the Second Number: <input id="second"></p>
<button onclick="add()">Add</button>
<p>Sum = <input id="answer"></p>
</body>
</html>

Assignment :: 8
8).Create a HTML page to demonstrate Date object using web form.
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>Create a new date object with the current date and time:</p>
<p id="demo"></p>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

Assignment :: 9
9).Write a Javascript code to demonstrate use of Dialog Box.
//Alert Dialog Box <script type="text/javascript">
<html> function show() {
<head> alert("It is an Alert dialog box");
} }
</script> </script> </head>
</head> <body> <center>
<body> <h1>Hello World :) :)</h1>
<center> <h2>Welcome to javaTpoint</h2>
<h1>Hello World :) :)</h1> <p>Click the following button </p>
<h2>Welcome to javaTpoint</h2> <input type="button" value="Click Me"
onclick="show();" />
<p>Click the following button </p>
</center> </body> </html>
<input type="button" value="Click Me"
onclick="show();" /> // Prompt Dialog Box
</center> <html> <head>
</body> <script type="text/javascript">
</html> function show() {
// Confirm Dialog Box var value = prompt("Enter your Name : ",
"Enter your name");
<html>
document.write("Your Name is : " + value);
<head>
}
<script type="text/javascript">
</script> </head>
function show() {
<body> <center>
var con = confirm ("It is a Confirm dialog
box"); <h1>Hello World :) :)</h1>
if(con == true) { <h2>Welcome to javaTpoint</h2>
document.write ("User Want to continue"); <p>Click the following button </p>
} <input type="button" value="Click Me"
onclick="show();" />
else {
</center>
document.write ("User does not want to
continue"); </body>
} </html>

Assignment :: 10
10).Write a Javascript to apply form validation-not null,number,string.
//Number Validation var
num=document.myform.num.value;
<script>
if (isNaN(num)) {
function validate(){
document.getElementById("numloc" validateForm()" method="post"
).innerHTML="Enter Numeric value required>
only";
Name: <input type="text"
return false; name="fname">

} else { <input type="submit"


value="Submit">
return true;
</form> </body> </html>
}
// String Validation
}
<script>
</script>
function validateform(){
<form name="myform"
onsubmit="return validate()" > var
name=document.myform.name.valu
Number: <input type="text" e;
name="num"><span
id="numloc"></span><br/> var
password=document.myform.passw
<input type="submit" ord.value;
value="submit">
if (name==null || name==""){
</form>
alert("Name can't be blank");
// null Validation
return false;
<html> <head> <script>
}else if(password.length<6){
function validateForm() {
alert("Password must be at least 6
var x = document.forms["myForm"] characters long.");
["fname"].value;
return false;
if (x == "" || x == null) {
}
alert("Name must be filled out");
}
return false;
</script> <body>
}
<form name="myform"
} method="post" action="abc.jsp"
</script> </head><body> onsubmit="return valid

<h2>JavaScript validation for empty ateform()" >


input field</h2> Name: <input type="text"
<p>Try to submit the form without name="name"><br/>
entering any text.</p> Password: <input type="password"
<form name="myForm" name="password"><br/>
action="/action_page.php" <input type="submit"
onsubmit="return value="register">

</form>

You might also like