To create an html file to implement alert box, confirm box, dialog box using javascript.

Source Code:

<!DOCTYPE html>
<html>
<head>
<title>JS3</title>
</head>
<body>
<p>Click the button!!</p>
<button onclick="alert_box()">This is an Alert Box</button>
<p>Click the button!!</p>
<button onclick="dialog_box()">This is an Dialog Box</button>
<p id="demodialog"></p>
<p>Click the button!!</p>
<button onclick="confirm_box()">This is an Confirm Box</button>
<p id="democonfirm"></p>
<hr>
   <a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a>
   <br>
   <a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">Department Of Information Technology</a>
   <br>
   <a href="E:\documents\IM LAB\html\js2\js2.html"><-Last Practical</a>&nbsp;&nbsp;&nbsp;&nbsp;
   <a href="E:\documents\IM LAB\html\js4\js4.html">Next Practical-></a>
   <br>
<script>
function alert_box()
{
alert("ALERT!");
}

function dialog_box()
{
var person = prompt("Please enter your name", "Sanjampreet Singh");
if (person != null)
{
 document.getElementById("demodialog").innerHTML ="Hello "+person+"! How are you today?";
}
}

function confirm_box()
{
var x;
if(confirm("Press a button!")==true)
{
x="Pressed OK!";
}
else
{
x="Pressed Cancel!";
}
document.getElementById("democonfirm").innerHTML = x;
}
</script>
</body>
</html>

Output:


Include the following source Code in Document Environment in your LaTeX File

LaTeX Source:

\documentclass[12pt]{article}
\usepackage{graphicx}
\usepackage{wrapfig}
\usepackage{multicol}
\usepackage{caption}
\usepackage{subcaption}
\usepackage{transparent}
\usepackage{multirow}
\usepackage{eso-pic}
\usepackage[utf8]{inputenc}
\usepackage{color}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newcommand\BackgroundIm{
\put(0,0){
\parbox[b][\paperheight]{\paperwidth}{
\vfill
\centering
{\transparent{0.05} \includegraphics[height=\paperheight,width=\paperwidth,
keepaspectratio]{gne}
\vfill
}}}}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{document}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\AddToShipoutPicture{\BackgroundIm}
\newpage
\section{\emph{To create an html file to implement alert box, confirm box, dialog box using javascript.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>JS3</title>
</head>
<body>
<p>Click the button!!</p>
<button onclick="alert_box()">This is an Alert Box</button>
<p>Click the button!!</p>
<button onclick="dialog_box()">This is an Dialog Box</button>
<p id="demodialog"></p>
<p>Click the button!!</p>
<button onclick="confirm_box()">This is an Confirm Box</button>
<p id="democonfirm"></p><hr>
<a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js2\js2.html"><-Last Practical</a>&nbsp;
<a href="E:\documents\IM LAB\html\js4\js4.html">Next Practical-></a><br>
<script>
function alert_box() {
alert("ALERT!");}
function dialog_box() {
var person=prompt("Please enter your name","Sanjampreet Singh");
if (person != null) {
document.getElementById("demodialog").innerHTML =
"Hello " + person + "! How are you today?";}}
function confirm_box() {
var x;
if (confirm("Press a button!") == true) {
x = "Pressed OK!";
} else {
x = "Pressed Cancel!";}
document.getElementById("democonfirm").innerHTML = x;}
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.7]{js3}
\caption{Output Of HTML page with Js}
\end{figure}
\end{document}

Output:


Comments

Post a Comment

Popular posts from this blog

To implement the various components of HTML5 Canvas

Image
 Canvas Line   Source Code: <!DOCTYPE html> <html> <head>     <title>Canvas Line</title> </head> <body> <canvas id="Line" width="200" height="100" style="border:1px"> </canvas> <script type="text/javascript">     var c= document.getElementById('Line');     var ctx=c.getContext("2d");     ctx.beginPath();     ctx.moveTo(0,0);     ctx.lineTo(200,100);     ctx.stroke(); </script> </body> </html > Output: Canvas Circle Source Code: <!DOCTYPE html> <html> <head>     <title>Canvas Circle</title> </head> <body> <canvas id="Circle" width="200" height="100" style="border:1px"> </canvas> <script type="text/javascript">     var c= document.getElementById('Circle');     var ctx=c.g...
Read More »

Program to illustrate the concept of templates.

Image
#include<iostream> using namespace std; template <class t> void display(t x) { cout<<"Displaying function of template : "<<x<<endl; } void display(int x) { cout<<"Explicit Display function : "<<x<<endl; } int main() { display(200); display(12.05); display('a'); cout<<"\n/*\nName-Sanjampreet Singh\nRoll Number-1507967\n*/"; } Output:
Read More »

Program to illustrate the order of execution of constructors and destructors in inheritance.

Image
#include<iostream> using namespace std; class Base {   public:   Base ( )   {     cout << "Inside Base constructor" << endl;   }   ~Base ( )   {     cout << "Inside Base destructor" << endl;   } }; class Derived : public Base {   public:     Derived  ( )   {     cout << "Inside Derived constructor" << endl;   }   ~Derived ( )   {     cout << "Inside Derived destructor" << endl;   } }; int main( ) {   Derived x;   x.~Derived();   cout<<"/*\nName-Sanjampreet Singh\nRoll Number-1507967\n*/"; } Output:
Read More »