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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Javascript basic programs

Similar to Javascript basic programs (20)

More from Digital Shende

More from Digital Shende (20)

Recently uploaded

Recently uploaded (20)

Javascript basic programs