Javascript basic programs

JavaScript Basic programs
by
Satish Shende
satish.sixteen@gmail.com

Message Box
alert
window.alert("Welcome to my site!")
confirm
window.confirm("Are you sure you want to quit?")
prompt
window.prompt("please enter user name")

<html>
<head>
<title>
</title>
</head>
<body>
<script>
window.alert("Welcome to my site!")
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<<html><head>
<script>
var x=confirm("Are you sure you want to quit?")
if (!x)
window.location="http://www.vdfindia.org/"
</script>
</head>
<body>
Welcome to my website!.
</body></html>
</body>
</html>
Variable

Variables and Conditions
<script>
var x=window.confirm("Are you sure you want
to quit")
if (x)
window.alert("Thank you.")
else
window.alert("Good choice.")
</script>

<html><head>
<script>
var x=confirm("Are you sure you want to quit?")
if (!x)
window.location="http://www.yahoo.com"
</script>
</head>
<body>
Welcome to my website!.
</body></html>

Function
<html><head><title></title></head>
<body>
<script>
function test()
{
document.write("Hello can you see me?")
}
</script>
</body></html>

functions are not executed by themselves until
you call upon them.

<body>
<script>
function test()
{
document.write("Hello can you see me?")
}
test()
</script>
</body></html>
Call function

<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>

Event handler
What are event handlers?
execute JavaScript when
something happens, such as
• click or move your mouse over
a link,
• submit a form etc.

<body>
<script>
function ss()
{
alert("Thank you! For click")
}
</script>
<form>
<input type="button" value="Click here" onclick="ss()">
</form>
</body></html>

</head><body>
< script Language="JavaScript">
function checkLogin(x)
{
if ((x.id.value != "Sam")||(x.pass.value !="Sam123"))
{
alert("Invalid Login");
return false;
}
else
location="main.htm"
}
</script>
<form>
<p>UserID:<input type="text" name="id"></p>
<p>Password:<input type="password" name="pass"></p>
<p><input type="button" value="Login"
onClick="checkLogin(this.form)"></p>
</form>
</body></html>

<html><head><title>show
date</title></head>
<body>
<script language="javascript">
var x= new date();
document.write (x);
</script>
</body></html>
Date

<html><head><title>show
date</title></head>
<body>
<script language="javascript">
var bantime= new date()
var ss=bantime.gethours()
if (ss<=20)
document.write("<img src='http://www.world-trail.com/wp-
content/uploads/2015/08/world_trail_logo.png'>")
else
document.write("<img
src='https://static01.nyt.com/images/2016/05/03/world/what-in-
the-world/witw-promo/witw-promo-thumblarge.jpg'>")
</script>
</body></html>

Window To open a window, simply use the method
"window.open()":
<html><head><title>new
window</title></head>
<body>
<form>
<input type="button" value="click
here to see"
onclick="window.open('https://w
ww.youtube.com/?gl=in')">
</form>
</body></html>

<html><head><title>new
window</title></head>
<body>
<form>
<input type="button" value="click here to see"
onclick="window.open('page2.htm','win1','widt
h=200,height=200,menubar')">
</form>
</body></html>
script to control the size of the window

Show Date
(using HTML + Javascript)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Show date</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"> </script>
</head>
<body onload = "showDate()">
<button onmouseout = "clearDate()" onmouseover="showDate()">Show
Date
</button>
<h1 id="time"></h1>
</html>
HTML

function showDate(){
var time = document.getElementById("time");
time.innerHTML = Date();
}
function clearDate(){
var time = document.getElementById("time");
time.innerHTML = '';
}
Javascript

Increase font size
(using HTML + Javascript)

<div class="text_area" id="demo_4">
<p>Happy Birthday</p>
<button onclick=myfunctionThree();>Press
here</button>
</div>
function myfunctionThree()
{
document.getElementById
("demo_4").style.fontSize
= "30px";
}
HTML
JavaScript

Display an image
(using HTML + CSS + Javascript)

#demo_6{
display:none;
}
.one {
border: 1px solid blue;
padding: 15px;
margin: 5px }
css
function myfunctionFive()
{
document.getElementById
("demo_6").style.display = "block";
}
javascript

img {
border-radius: 8px;
}
css
img {
border-radius: 50%;
}
img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}

Javascript basic programs

More Related Content

What's hot (20)

Similar to Javascript basic programs (20)

More from Digital Shende (20)

Recently uploaded (20)

Javascript basic programs