How to create website using Javascript?
JavaScript is a programming language commonly used to create website. It was developed to add dynamic and interactive implementation to websites. Like server-side scripting languages JavaScript code can be inserted anywhere within the HTML tag to create a website.
JavaScript is a high-level, dynamic, object-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production.
JavaScript is used to create website interactive and provide online applications, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine.
As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative (including object-oriented and prototype-based) programming styles.
It has an API for working with text, arrays, dates, regular expressions, and basic manipulation of the DOM, but does not include any I/O, such as networking, storage, or graphics facilities, relying for these upon the host environment in which it is embedded.
Initially only implemented client-side in web browsers, JavaScript engines are now embedded in many other types of host software, including server-side in web servers and databases, and in non-web programs such as word processors and PDF software, and in runtime environments that make JavaScript available for writing mobile and desktop applications, including desktop widgets.
Although there are strong outward similarities between JavaScript and Java, including language name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.
As with most scripting languages, JavaScript is associated with each value, rather than just with each expression. For example, a variable that is at one time bound to a number may later be re-bound to a string. JavaScript supports various ways to test the type of an object.
JavaScript is almost entirely object-based. In JavaScript, an object is an associative array, augmented with a prototype (see below); each string key provides the name for an object property, and there are two syntactical ways to specify such a name: dot notation (obj.a = 100) and bracket notation (obj['a'] = 100).
A property may be added, rebound, or deleted at run-time. Most properties of an object (and any property that belongs to an object's prototype inheritance chain) can be enumerated using a loop.
JavaScript has a small number of built-in objects, including Function and Date Time.
Learn Javascript Step by Step Online Free
Conditional (Ternary) Operator
See the example bellow :-
The application will accept two input values from the user and return the largest value using Conditional (Ternary) Operator of JavaScript
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h3
{
margin-top:100px;
width:50%;
}
</style>
</head>
<body style="background-color:aquamarine;">
<center><h2 style="width:400px; margin-top:100px; background-color:green; color:#ffffff; line-height:40px; border-radius:20px; border:2px solid #333333;">Find the larger of two numbers</h2></center>
<script>
var a = parseInt( prompt("Enter a Number", "") );
var b = parseInt( prompt("Enter a Number", "") );
document.write("<center>")
document.write("<h3>")
document.write((a>b)?("You have entered " + a + " first, so your first number is greater than your second number " + b):("You have entered " + b + " after entering " + a + " as the first number, so your second number " + b + " is greater than your first number " + a));
document.write("</h3>")
document.write("</center>")
</script>
</body>
</html>
Show
Learn Javascript Step by Step Online Free
See the example bellow :-
The application will accept two input values from the user and check, if the first value is divisible by the second value using Conditional (Ternary) Operator of JavaScript
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h3
{
margin-top:100px;
width:50%;
}
</style>
</head>
<body style="background-color:aquamarine;">
<center><h2 style="width:600px; margin-top:100px; background-color:green; color:#ffffff; line-height:40px; border-radius:20px; border:2px solid #333333;">Is the first number is divisible by the second number</h2></center>
<script>
var a = parseInt(prompt("Enter a Number", ""));
var b = parseInt(prompt("Enter a Number", ""));
document.write("<center>")
document.write("<h3>")
document.write(((a%b)==0)?("You have entered " + a + " first, so your first number is divisible by your second number " + b):("You have entered " + a + " first, so your first number is not divisible by your second number " + b));
document.write("</h3>")
document.write("</center>")
</script>
</body>
</html>
Show
Learn Javascript Step by Step Online Free
See the example bellow :-
The application will accept input value from the user and check, if the value is between 40 and 80 using Conditional (Ternary) Operator of JavaScript
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h3
{
margin-top:100px;
width:50%;
}
</style>
</head>
<body style="background-color:aquamarine;">
<center><h2 style="width:500px; margin-top:100px; background-color:green; color:#ffffff; line-height:40px; border-radius:20px; border:2px solid #333333;">Is the number between 40 to 80</h2></center>
<script>
var a = parseInt(prompt("Enter a Number", ""));
document.write("<center>")
document.write("<h3>")
document.write(((a>=40)&&(a<=80))?("You have entered " + a + " and " + a + " is between 40 to 80"):("You have entered " + a + " and " + a + " is not between 40 to 80"));
document.write("</h3>")
document.write("</center>")
</script>
</body>
</html>
Show
Learn Javascript Step by Step Online Free
Conditional If...Else Statements
As we know there are two types of conditional statements one is Switch Case and the other is If...Else
See the example bellow :-
The application will accept three input values from the user and find the largest of three numbers using Conditional If...Else statement of JavaScript
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h3
{
margin-top:100px;
width:40%;
}
</style>
</head>
<body style="background-color:aquamarine;">
<center><h2 style="width:500px; margin-top:100px; background-color:green; color:#ffffff; line-height:40px; border-radius:20px; border:2px solid #333333;">Find the largest of three numbers</h2></center>
<script>
var a = parseInt(prompt("Enter a Number", ""));
var b = parseInt(prompt("Enter a Number", ""));
var c = parseInt(prompt("Enter a Number", ""));
document.write("<center>")
document.write("<h3>")
if (a > b && a > c)
{
document.write("The first number that you have entered is " + a + " which is the largest of three numbers " + a + ", " + b + " and " + c)
}
else if (b > a && b > c)
{
document.write("The second number that you have entered is " + b + " which is the largest of three numbers " + a + ", " + b + " and " + c)
}
else
{
document.write("The third number that you have entered is " + c + " which is the largest of three numbers " + a + ", " + b + " and " + c)
}
document.write("</h3>")
document.write("</center>")
</script>
</body>
</html>
Show
Javascript Tutorial for Beginners Step by Step
JavaScript Functions
See the example bellow :-
The application will accept two input values from the user and then compare those values
<html>
<head>
<title>Java Script Calculation</title>
<style>
body
{
background-color: #ff99cc;
}
div
{
width:300px;
margin-top:100px;
padding:20px;
background-color: #ffffff;
}
select
{
width:60px;
height:32px;
}
#text
{
padding-left:20px;
height:32px;
}
button
{
height:32px;
}
</style>
</head>
<body>
<center>
<div>
<center><h3>Java Script</h3></center>
<label><b>Enter Name</b></label>
<input id="text" type="text" placeholder="Enter your Name" required="required">
<br><br>
<select id="a">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<select id="b">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<center><h5 id="c">Message</h5></center>
<button onclick="add()">ADD</button>
<button onclick="sub()">SUB</button>
<button onclick="mul()">MUL</button>
<button onclick="div()">DIV</button>
<br><br>
<center><button onclick="largest()">Largest Number</button></center>
<br><br>
<center><button onclick="divisible()">Divisible Number</button></center>
<br><br>
<center><button onclick="between()">Between 10 to 20</button></center>
</div>
</center>
<script>
function add()
{
var w = document.getElementById("text").value;
var x = parseInt(document.getElementById("a").value);
var y = parseInt(document.getElementById("b").value);
z = x + y;
document.getElementById("c").innerHTML = "Hello " + w + " " + z + " is the result of addition of the two numbers";
}
function sub()
{
var w = document.getElementById("text").value;
var x = parseInt(document.getElementById("a").value);
var y = parseInt(document.getElementById("b").value);
z = x - y;
document.getElementById("c").innerHTML = "Hello " + w + " " + z + " is the result after substracting the second number from the first number";
}
function mul()
{
var w = document.getElementById("text").value;
var x = parseInt(document.getElementById("a").value);
var y = parseInt(document.getElementById("b").value);
z = x * y;
document.getElementById("c").innerHTML = "Hello " + w + " " + z + " is the result of multiplying of the wto numbers";
}
function div()
{
var w = document.getElementById("text").value;
var x = parseInt(document.getElementById("a").value);
var y = parseInt(document.getElementById("b").value);
z = x / y;
document.getElementById("c").innerHTML = "Hello " + w + " " + z + " is the result after dividing the second from the first number";
}
function largest()
{
var w = document.getElementById("text").value;
var x = parseInt(document.getElementById("a").value);
var y = parseInt(document.getElementById("b").value);
var z = ((x > y)? ("Hello " + w + " your first number " + x + " is greater than your second number " + y):("Hello " + w + " your second number " + y + " is greater than your first number " + x));
document.getElementById("c").innerHTML = z;
}
function divisible()
{
var w = document.getElementById("text").value;
var x = parseInt(document.getElementById("a").value);
var y = parseInt(document.getElementById("b").value);
var z = (((x % y)==0)? ("Hello " + w + " your first number " + x + " is divisible by your second number " + y):("Hello " + w + " your first number " + y + " is not divisible by your second number " + x));
document.getElementById("c").innerHTML = z;
}
function between()
{
var w = document.getElementById("text").value;
var x = parseInt(document.getElementById("a").value);
var y = parseInt(document.getElementById("b").value);
var xy = x + y;
var z = ((xy >= 10 && xy <=20)? ("Hello " + w + " the sum of your two numbers " + xy + " is between 10 and 20"):("Hello " + w + " the sum of your two numbers " + xy + " is not between 10 and 20"));
document.getElementById("c").innerHTML = z;
}
</script>
</body>
</html>
Show
Close
Javascript Tutorial for Beginners Step by Step
JavaScript setInterval()
See the example bellow :-
The application will set a image slider by using setInterval() method
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#outer-bar
{
width:500px;
height:10px;
background-color:#999999;
border-radius:20px;
}
#inner-bar
{
background-color:#333333;
height:10px;
position:absolute;
border-radius:20px;
}
button
{
border-radius:20px;
border:none;
background-color:#333333;
color:#ffffff;
padding:4px;
}
</style>
</head>
<body style="background-color:aquamarine;">
<center><h1>JavaScript Loading Bar</h1></center>
<center>
<div id="div" style="width:1000px; height:300px; border:10px solid black;">
<h5 style="border:2px solid #ffffff; border-radius:10px; background-color:#0033ff; padding:4px; color:#ffffff; position:absolute; margin-left:30px;" id="date">Date: 0/0/0</h5>
<h5 style="border:2px solid #ffffff; border-radius:10px; background-color:#0033ff; padding:4px; color:#ffffff; position:absolute; margin-left:150px;" id="time2">Time: 0:0:0</h5>
<img id="img" style="width:940px; height:240px; margin-top:30px;" src="http://website.gyaann.com/a3.jpg" alt="no img">
</div>
</center>
<h5 id="time1"></h5>
<center><div id="outer-bar"><div id="inner-bar"></div></div></center>
<center><h5 id="show">0%</h5></center>
<center><button onclick="start()">Action</button></center>
<script>
function start()
{
var timer1 = setInterval(datetime1, 10);
function datetime1()
{
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth() + 1;
var year = dt.getFullYear();
document.getElementById("date").innerHTML = "Date: " + month + "/" + day + "/" + year;
}
var timer2 = setInterval(datetime2, 10);
function datetime2()
{
var dt = new Date();
var time = dt.toLocaleTimeString();
document.getElementById("time2").innerHTML = "Time: " + time;
}
var wid = 0;
var timer3 = setInterval(go1, 20);
function go1()
{
if (wid == 500)
{
clearInterval(timer3);
}
else
{
wid++;
document.getElementById("inner-bar").style.width = wid + 1;
}
}
var i = 1;
var timer4 = setInterval(go2, 100);
function go2()
{
if (i == 100)
{
clearInterval(timer4);
}
else
{
i++;
document.getElementById("show").innerHTML = i + "%";
}
if (i <= 5)
{
document.getElementById("div").style.backgroundColor = "red";
document.getElementById("div").style.borderColor = "blue";
document.getElementById("img").src = "http://website.gyaann.com/a4.jpg";
}
else if (i <= 10)
{
document.getElementById("div").style.backgroundColor = "blue";
document.getElementById("div").style.borderColor = "red";
}
else if (i <= 15)
{
document.getElementById("div").style.backgroundColor = "green";
document.getElementById("div").style.borderColor = "blue";
}
else if (i <= 20)
{
document.getElementById("div").style.backgroundColor = "pink";
document.getElementById("div").style.borderColor = "green";
}
else if (i <= 25)
{
document.getElementById("div").style.backgroundColor = "violet";
document.getElementById("div").style.borderColor = "blue";
document.getElementById("img").src = "http://website.gyaann.com/a5.jpg";
}
else if (i <= 30)
{
document.getElementById("div").style.backgroundColor = "red";
document.getElementById("div").style.borderColor = "green";
}
else if (i <= 35)
{
document.getElementById("div").style.backgroundColor = "blue";
document.getElementById("div").style.borderColor = "violet";
}
else if (i <= 40)
{
document.getElementById("div").style.backgroundColor = "green";
document.getElementById("div").style.borderColor = "red";
}
else if (i <= 45)
{
document.getElementById("div").style.backgroundColor = "pink";
document.getElementById("div").style.borderColor = "green";
document.getElementById("img").src = "http://website.gyaann.com/a6.jpg";
}
else if (i <= 50)
{
document.getElementById("div").style.backgroundColor = "red";
document.getElementById("div").style.borderColor = "pink";
}
else if (i <= 55)
{
document.getElementById("div").style.backgroundColor = "blue";
document.getElementById("div").style.borderColor = "red";
}
else if (i <= 60)
{
document.getElementById("div").style.backgroundColor = "green";
document.getElementById("div").style.borderColor = "blue";
}
else if (i <= 65)
{
document.getElementById("div").style.backgroundColor = "pink";
document.getElementById("div").style.borderColor = "green";
document.getElementById("img").src = "http://website.gyaann.com/a7.jpg";
}
else if (i <= 70)
{
document.getElementById("div").style.backgroundColor = "violet";
document.getElementById("div").style.borderColor = "pink";
}
else if (i <= 75)
{
document.getElementById("div").style.backgroundColor = "red";
document.getElementById("div").style.borderColor = "violet";
}
else if (i <= 80)
{
document.getElementById("div").style.backgroundColor = "blue";
document.getElementById("div").style.borderColor = "green";
}
else if (i <= 85)
{
document.getElementById("div").style.backgroundColor = "green";
document.getElementById("div").style.borderColor = "red";
document.getElementById("img").src = "http://website.gyaann.com/a8.jpg";
}
else if (i <= 90)
{
document.getElementById("div").style.backgroundColor = "pink";
document.getElementById("div").style.borderColor = "violet";
}
else if (i <= 95)
{
document.getElementById("div").style.backgroundColor = "red";
document.getElementById("div").style.borderColor = "blue";
}
else
{
document.getElementById("div").style.backgroundColor = "violet";
document.getElementById("div").style.borderColor = "green";
}
}
}
</script>
</body>
</html>
Show
Close
Javascript Tutorial for Beginners Step by Step
See the example bellow :-
The application will set Date and Time using setInterval method
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<center>
<h1>Time Program</h1>
<h4 id="date">Time String</h4>
<h4 id="time1">Time String</h4>
<h3>Extracting value of Hour, Minute and Second</h3>
<h5 id="hour"></h5>
<h5 id="mins"></h5>
<h5 id="secs"></h5>
<h3>Local Time String Method</h3>
<h4 id="time2">Time String</h4>
</center>
<script>
var timer1 = setInterval(datetime1, 10);
//The above (getFullYear(); getMinutes(); getSeconds();) will return same as toLocaleTimeString();
function datetime1()
{
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth() + 1;
var year = dt.getFullYear();
var hour = dt.getHours();
var mins = dt.getMinutes();
var secs = dt.getSeconds();
document.getElementById("date").innerHTML = "Date: " + month + "/" + day + "/" + year;
document.getElementById("time1").innerHTML = "Time: " + hour + ":" + mins + ":" + secs;
document.getElementById("hour").innerHTML = "Hour: " + hour;
document.getElementById("mins").innerHTML = "Minutes: " + mins;
document.getElementById("secs").innerHTML = "Seconds: " + secs;
}
var timer2 = setInterval(datetime2, 10);
function datetime2()
{
var dt = new Date();
var time = dt.toLocaleTimeString();
document.getElementById("time2").innerHTML = "Time: " + time;
}
</script>
</body>
</html>
Show
Close
Javascript Tutorial for Beginners Step by Step
For Loop Method
See the example bellow :-
The application will create a multiplication table using For Loop with user interactive value
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div
{
margin-top:100px;
width:800px;
}
label
{
margin-right:20px;
}
</style>
</head>
<body>
<center>
<div>
<center><h2>For Loop</h2></center>
<label>Enter Full Name</label><input id="fullname" type="text" required="required">
<br><br>
<label>Initial Value</label>
<select id="initial">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<label>Maximum Value</label>
<select id="maximum">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<label>Increment Value</label>
<select id="increment">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<label>Table Of</label>
<select id="table">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<br><br>
<center><h5 id="message">Message</h5></center>
<center><button onclick="go()">Action</button></center>
</div>
<script>
function go()
{
var fullname = document.getElementById("fullname").value;
var initial = parseInt(document.getElementById("initial").value);
var maximum = parseInt(document.getElementById("maximum").value);
var increment = parseInt(document.getElementById("increment").value);
var table = parseInt(document.getElementById("table").value);
document.write("<center><h4>" + "Counter counting in ascending order" + "</h4></center>");
for(i = initial; i<maximum; i=i+increment)
{
document.write("<center><h5>" + "Hello " + fullname + " this is counter number " + i + " and (" + i + " x " + table + " = " + i * table + ")</h5></center>");
}
}
</script>
</center>
</body>
</html>
Show
Close
Javascript Tutorial for Beginners Step by Step
See the example bellow :-
The application will create a For Loop with user interactive value and return the last value of counter
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div
{
margin-top:100px;
width:800px;
}
label
{
margin-right:20px;
}
</style>
</head>
<body>
<center>
<div>
<center><h2>For Loop</h2></center>
<label>Enter Full Name</label><input id="fullname" type="text" required="required">
<br><br>
<label>Initial Value</label>
<select id="initial">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<label>Maximum Value</label>
<select id="maximum">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<label>Increment Value</label>
<select id="increment">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<center><h4 id="message">Message</h4></center>
<center><button onclick="go()">Action</button></center>
</div>
<script>
function go()
{
var fullname = document.getElementById("fullname").value;
var initial = parseInt(document.getElementById("initial").value);
var maximum = parseInt(document.getElementById("maximum").value);
var increment = parseInt(document.getElementById("increment").value);
for(i = initial; i<maximum; i=i+increment)
{
document.getElementById("message").innerHTML = "Hello " + fullname + " the last value of counter is " + i;
}
}
</script>
</center>
</body>
</html>
Show
Close
Javascript Tutorial for Beginners Step by Step
See the example bellow :-
The application will create a Descending For Loop multiplication table with user interactive value
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div
{
margin-top:100px;
width:800px;
}
label
{
margin-right:20px;
}
</style>
</head>
<body>
<center>
<div>
<center><h2>Descending For Loop</h2></center>
<label>Enter Full Name</label><input id="fullname" type="text" required="required">
<br><br>
<center><h3>Initial value must me more than minimum value</h3></center>
<label>Initial Value</label>
<select id="initial">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<label>Minimum Value</label>
<select id="minimum">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<label>Decrement Value</label>
<select id="decrement">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<label>Table Of</label>
<select id="table">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<br><br>
<center><h5 id="message">Message</h5></center>
<center><button onclick="go()">Action</button></center>
</div>
<script>
function go()
{
var fullname = document.getElementById("fullname").value;
var initial = parseInt(document.getElementById("initial").value);
var minimum = parseInt(document.getElementById("minimum").value);
var decrement = parseInt(document.getElementById("decrement").value);
var table = parseInt(document.getElementById("table").value);
document.write("<center><h4>" + "Counter counting in descending order" + "</h4></center>");
for(i = initial; i>minimum; i=i-decrement)
{
document.write("<center><h5>" + "Hello " + fullname + " this is counter number " + i + " and (" + i + " x " + table + " = " + i * table + ")</h5></center>");
}
}
</script>
</center>
</body>
</html>
Show
Close
Javascript Tutorial for Beginners Step by Step
See the example bellow :-
The application will create a Descending For Loop with user interactive value and return the last value of counter
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div
{
margin-top:100px;
width:800px;
}
label
{
margin-right:20px;
}
</style>
</head>
<body>
<center>
<div>
<center><h2>Descending For Loop</h2></center>
<label>Enter Full Name</label><input id="fullname" type="text" required="required">
<br><br>
<center><h3>Initial value must me more than minimum value</h3></center>
<label>Initial Value</label>
<select id="initial">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<label>Minimum Value</label>
<select id="minimum">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<label>Decrement Value</label>
<select id="decrement">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<center><h5 id="message">Message</h5></center>
<center><button onclick="go()">Action</button></center>
</div>
<script>
function go()
{
var fullname = document.getElementById("fullname").value;
var initial = parseInt(document.getElementById("initial").value);
var minimum = parseInt(document.getElementById("minimum").value);
var decrement = parseInt(document.getElementById("decrement").value);
for(i = initial; i>minimum; i=i-decrement)
{
document.getElementById("message").innerHTML = "Hello " + fullname + " the last value of counter is " + i + " before stopping";
}
}
</script>
</center>
</body>
</html>
Show
Close
Javascript Tutorial for Beginners Step by Step
For Loop Create Table
See the example bellow :-
The application will accept value and create a table structure
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div
{
margin-top:100px;
width:800px;
}
label
{
margin-right:20px;
}
</style>
</head>
<body>
<center>
<div>
<center><h2>For Loop Table</h2></center>
<label>Enter Full Name</label><input id="fullname" type="text" required="required">
<br><br>
<label>Initial Value</label>
<select id="initial">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<label>Maximum Value</label>
<select id="maximum">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<label>Increment Value</label>
<select id="increment">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<br><br>
<center><h5 id="message">Message</h5></center>
<center><button onclick="go()">Action</button></center>
</div>
<script>
function go()
{
var fullname = document.getElementById("fullname").value;
var initial = parseInt(document.getElementById("initial").value);
var maximum = parseInt(document.getElementById("maximum").value);
var increment = parseInt(document.getElementById("increment").value);
document.write('<center><h1 style="margin-top:20px;">For Loop Table</h1></center>')
document.write('<center><table style="background-color:#0033ff">')
for(i = initial; i<maximum; i=i+increment)
{
document.write('<tr>');
for(ii = initial; ii<maximum; ii=ii+increment)
{
document.write('<td style="padding:6px; background-color:aqua; color:#0033ff;">' + "Hello " + fullname + " " + i + " Row and " + ii + " Colum" + '</td>');
}
document.write('</tr>');
}
document.write('</table></center>')
}
</script>
</center>
</body>
</html>
Show
Close
Javascript Tutorial for Beginners Step by Step
While Loop
See the example bellow :-
The application will accept value from user and return the printed name in ascending or descending order depending on the user input value
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
name = prompt("Enter your name","");
i = prompt("Put a number","");
if (i < 10)
{
while(i<10)
{
document.write("<center><h4><span style='background-color:green; padding:6px; color:#ffffff;'>" + name + "</span>" + "<span style='background-color:#0033ff; padding:6px; color:#ffffff;'> this is line number </span><span style='background-color:red; padding:6px; color:#ffffff;'>" + i + "</span></h4></center>");
i++; // update expression
}
}
else
{
while(i>10)
{
document.write("<center><h4><span style='background-color:green; padding:6px; color:#ffffff;'>" + name + "</span>" + "<span style='background-color:#0033ff; padding:6px; color:#ffffff;'> this is line number </span><span style='background-color:red; padding:6px; color:#ffffff;'>" + i + "</span></h4></center>");
i--; // update expression
}
}
</script>
</body>
</html>
Show
Javascript Tutorial for Beginners Step by Step
See the example bellow :-
The application will accept value from user and return the reverse value
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
name = prompt("Enter your name","");
i = prompt("Put a number","");
var rev =0;
document.write("<center><h3 style='width:300px; border-radius:20px; background-color:green; padding:6px; color:#ffffff;'>Original Number was : " + i + "</h3></center>");
while(i!=0)
{
d = i%10;
rev = (rev*10)+d;
i=parseInt(i/10); // update expression
document.write("<center><h4><span style='border-radius:20px 0px 0px 20px; background-color:green; padding:6px; color:#ffffff;'>" + name + "</span><span style='border-radius:0px 20px 20px 0px; background-color:blue; padding:6px; color:#ffffff;'> and reversing value is : " + rev + "</span></h4></center>");
}
document.write("<center><h3 style='width:300px; border-radius:20px; background-color:green; padding:6px; color:#ffffff;'>Reverse Number is : " + rev + "</h3></center>");
</script>
</body>
</html>
Show
Learn Javascript Step by Step Online Free
Do While Loop
See the example bellow :-
The application will accept value from user and continue accepting input value unless user gives No as input value
The Do While loop is different as it will execute before checking, so if the condition return false then also it will execute at least for once
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
var y = -1;
do
{
x = prompt("Do you want to continue say Yes or No","");
y++;
}
while(x != 'No');
document.write("<center><h4 style='margin-top:100px; width:300px; background-color:green; color:#ffffff; padding:6px;'>You have pressed continue for " + y + " times</h4></center>");
</script>
</body>
</html>
Show
Learn Javascript Step by Step Online Free
IndexOf Method
See the example bellow :-
The application will accept string value from user and if the user give number then it will will return a alert message
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
n = prompt("Enter your name","");
var p0 = n.indexOf("0");
var p1 = n.indexOf("1");
var p2 = n.indexOf("2");
var p3 = n.indexOf("3");
var p4 = n.indexOf("4");
var p5 = n.indexOf("5");
var p6 = n.indexOf("6");
var p7 = n.indexOf("7");
var p8 = n.indexOf("8");
var p9 = n.indexOf("9");
var p = p0 + p1 + p2 + p3 + p4 + p5 + p6 + p7 + p8 + p9;
if (p != -10)
{
alert("Name must not contain number");
}
else
{
document.write("<center><h4 style='margin-top:200px; border-radius:20px; border:4px solid black; width:300px; background-color:green; color:#ffffff; padding:6px;'>Hello " + n + "</h4></center>");
}
</script>
</body>
</html>
Show
Learn Javascript Step by Step Online Free
Switch Case Break
See the example bellow :-
The application will accept string value from user and will do calculation according to the user query
<html>
<head>
<title>Java Script Calculation</title>
<style>
body
{
background-color: #ff99cc;
}
div
{
width:300px;
margin-top:100px;
padding:20px;
background-color: #ffffff;
}
select
{
width:40px;
height:32px;
}
#c
{
width:100px;
height:32px;
}
#text
{
padding-left:20px;
height:32px;
}
button
{
height:32px;
}
</style>
</head>
<body>
<center>
<div>
<center><h3>Java Script</h3></center>
<label><b>Enter Name</b></label>
<input id="text" type="text" placeholder="Enter your Name" required="required">
<br><br>
<select id="a">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<select id="b">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<select id="c">
<option>Addition</option>
<option>Subtraction</option>
<option>Multiplication</option>
<option>Division</option>
<option>Verify (>)NO</option>
<option>Divisible</option>
<option>Between (10-20)</option>
<option>Loading Bar</option>
</select>
<center><h5 id="d">Message</h5></center>
<center><h5 id="show">0%</h5></center>
<button onclick="calc()">Action</button>
</div>
</center>
<br><br>
<center>
<div id="outer-div" style="margin:0px; padding:0px; width:200px; height:10px; background-color:#999999; border-radius:20px;">
<div id="inner-div" style="width:0px; margin:0px; padding:0px; background-color:#333333; height:10px; position:absolute; border-radius:20px;">
</div>
</div>
<h4 id="date">Date :</h4>
<h4 id="time">Time :</h4>
<h4 id="run">0%</h4>
</center>
<script>
function calc()
{
var text = document.getElementById('text').value;
var a = parseInt( document.getElementById('a').value);
var b = parseInt( document.getElementById('b').value);
var c = document.getElementById('c').value;
switch(c)
{
case 'Addition':
document.getElementById('d').innerHTML = a + b;
break;
case 'Subtraction':
document.getElementById('d').innerHTML = a - b;
break;
case 'Multiplication':
document.getElementById('d').innerHTML = a * b;
break;
case 'Division':
document.getElementById('d').innerHTML = a / b;
break;
case 'Verify (>)NO':
var z = ((a > b)? ("Hello " + text + " your first number " + a + " is greater than your second number " + b):("Hello " + text + " your second number " + b + " is greater than your first number " + a));
document.getElementById('d').innerHTML = z;
break;
case 'Divisible':
var z = (((a % b)==0)? ("Hello " + text + " your first number " + a + " is divisible by your second number " + b):("Hello " + text + " your first number " + b + " is not divisible by your second number " + a));
document.getElementById('d').innerHTML = z;
break;
case 'Between (10-20)':
var ab = a + b;
var z = ((ab >= 10 && ab <=20)? ("Hello " + text + " the sum of your two numbers " + ab + " is between 10 and 20"):("Hello " + text + " the sum of your two numbers " + ab + " is not between 10 and 20"));
document.getElementById("d").innerHTML = z;
break;
case 'Loading Bar':
var timer1 = setInterval(datetime1, 10);
function datetime1()
{
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth() + 1;
var year = dt.getFullYear();
document.getElementById("date").innerHTML = "Date: " + month + "/" + day + "/" + year;
}
var timer2 = setInterval(datetime2, 10);
function datetime2()
{
var dt = new Date();
var time = dt.toLocaleTimeString();
document.getElementById("time").innerHTML = "Time: " + time;
}
var wid = 0;
var timer3 = setInterval(loading, 10);
function loading()
{
if (wid == 200)
{
clearInterval(timer3);
}
else
{
wid++;
document.getElementById("inner-div").style.width = wid + 1;
}
}
var i = 1;
var timer4 = setInterval(loading2, 20);
function loading2()
{
if (i == 100)
{
clearInterval(timer4);
}
else
{
i++;
document.getElementById("run").innerHTML = i + "%";
}
if (i <= 5)
{
document.getElementById("inner-div").style.backgroundColor = "#000000";
}
else if (i <= 10)
{
document.getElementById("inner-div").style.backgroundColor = "#333333";
}
else if (i <= 15)
{
document.getElementById("inner-div").style.backgroundColor = "#000000";
}
else if (i <= 20)
{
document.getElementById("inner-div").style.backgroundColor = "#333333";
}
else if (i <= 25)
{
document.getElementById("inner-div").style.backgroundColor = "#000000";
}
else if (i <= 30)
{
document.getElementById("inner-div").style.backgroundColor = "#333333";
}
else if (i <= 35)
{
document.getElementById("inner-div").style.backgroundColor = "#000000";
}
else if (i <= 40)
{
document.getElementById("inner-div").style.backgroundColor = "#333333";
}
else if (i <= 45)
{
document.getElementById("inner-div").style.backgroundColor = "#000000";
}
else if (i <= 50)
{
document.getElementById("inner-div").style.backgroundColor = "#333333";
}
else if (i <= 55)
{
document.getElementById("inner-div").style.backgroundColor = "#000000";
}
else if (i <= 60)
{
document.getElementById("inner-div").style.backgroundColor = "#333333";
}
else if (i <= 65)
{
document.getElementById("inner-div").style.backgroundColor = "#000000";
}
else if (i <= 70)
{
document.getElementById("inner-div").style.backgroundColor = "#333333";
}
else if (i <= 75)
{
document.getElementById("inner-div").style.backgroundColor = "#000000";
}
else if (i <= 80)
{
document.getElementById("inner-div").style.backgroundColor = "#333333";
}
else if (i <= 85)
{
document.getElementById("inner-div").style.backgroundColor = "#000000";
}
else if (i <= 90)
{
document.getElementById("inner-div").style.backgroundColor = "#333333";
}
else if (i <= 95)
{
document.getElementById("inner-div").style.backgroundColor = "#000000";
}
else
{
document.getElementById("inner-div").style.backgroundColor = "#333333";
}
}
break;
}
}
</script>
</body>
</html>
Show
Close
Learn Javascript Step by Step Online Free
String Length and Position
See the example bellow :-
The program will count the length of the user name and then it will print the name vertically
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color:pink">
<center>
<div style="margin-top:100px; width:800px;">
<center><h2>For Loop</h2></center>
<label style="margin-right:20px">Enter Full Name</label>
<input id="fullname" type="text" required="required"><br><br>
<center><button onclick="go()">Action</button></center>
</div>
</center>
<script>
function go()
{
var fullname = document.getElementById("fullname").value;
document.write("<center><h3>JavaScript String Length and Position</h3></center>");
for(i = 0; i<fullname.length; i++)
{
document.write("<center><h4 style='width:20px; border-radius:40px; border:2px solid green; background-color:skyblue; color:green; padding:6px;'>" + fullname.substr(i, 1) + "</h4></center>");
}
}
</script>
</body>
</html>
Show
Close
How to use JavaScript, why and what is Javascript?
JavaScript function is a set of code written to perform a specific task.
JavaScript function use to run when it is called.
JavaScript function is defined with the function keyword, it followed by a name and by parentheses().
JavaScript Function names can contain digits, dollar, underscores, and letters signs (same rules as variables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, parameter3, parameter4 ...)
The code to be run, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3)
{
code to be run
}
Function Invocation:
The code inside the function will run when something (calls) the function:
When a user clicks a button
When it is (called) from JavaScript code
Automatically (self called)
Function Return
When JavaScript return the statement, the function will stop running.
Functions often compute a return value and the return value is returned back to the caller:
<html>
<head>
<title>How to use JavaScript Function</title>
</head>
<body>
<h1>JavaScript Functions</h1>
<h2>This will perform a calculation and returns the result:</h2>
<center><b><h1 id="function"></h1></b></center>
<script>
function thisfunction(a, b, c, d)
{
return (a + b) - (c + d);
}
document.getElementById("function").innerHTML = thisfunction(3, 4, 5, 6);
</script>
</body>
</html>
This example calls a function which performs a calculation and returns the result: -4
JavaScript Window print() Method
<html>
<head>
<title>How to use JavaScript Function</title>
</head>
<body>
<p>Click The Button To Print The Current Page</p>
<button onclick="window.print()">PRINT</button>
</body>
</html>
The example will print the current window content
We need to use the window.open() function to create a new window, See the example bellow :-
<html>
<head>
<title>How to use JavaScript Function</title>
</head>
<body>
<p>Click The Button To Open A New Window</p>
<button onclick="newwindow()">Window</button>
<button onclick="selfwindow()">Window</button>
<button onclick="msgwindow()">Window</button>
<script>
function newwindow()
{
var MyNewWindow = window.open("http://website.gyaann.com/", "_blank", "width=200, height=240");
MyNewWindow.moveTo(1200, 800);
}
function selfwindow()
{
var MyNewWindow = window.open("", "_self");
MyNewWindow.document.write("<center><h3>Current window is replaced by new window</h3></center>");
}
function msgwindow()
{
var MyNewWindow = window.open("http://website.gyaann.com/", "_blank", "width=400, height=240");
MyNewWindow.document.write("<h3>I am 400px wide and 240px tall</h3>");
}
</script>
</body>
</html>
How to use JavaScript Event Programming?
With JavaScript code, HTML allows event handling attributes, to work with HTML elements.
An HTML event can be both what the browser does and also something when the user does.
Here are some examples of HTML events:
An HTML web page has finished loading
An HTML input field was changed
An HTML button was clicked
JavaScript allow you run code when events are detected.
HTML allows event handling attributes along with JavaScript code, to work with HTML elements.<element event="some JavaScript">
Event handlers can be used to filter and verify the user inputs, user actions and also the browser actions:
Here are some examples of filter and verification which JavaScript Event Handler does:
Things which will be repeat every time when the page loads
Things which must be done when the page will closed
Action which need be performed when the users click the specific button
Content that required to be verified when the users input data
And many other task...
function name(parameter1, parameter2, parameter3)
{
code to be run
}
Programmers can use different methods to let JavaScript work with events:
JavaScript code can be run directly by HTML event attributes
JavaScript functions can be call by HTML event attributes
User can assign their own event handling functions to HTML elements
User can prevent default function from being sent by validating through event handler
And many others.....
<html>
<head>
<title>How to use JavaScript Event Handler</title>
</head>
<body>
<button onclick="this.innerHTML=Date()">Get Time</button>
</body>
</html>
In the above example the user when click the button, the event function will return the current date and time on the action button
<html>
<head>
<title>How to use JavaScript Event Handler</title>
</head>
<body>
<center><h1 id="date"><b>Click the button to display the date</b></h1></center>
<button onclick="displayDatetime()">Get Time</button>
<script>
function displayDatetime()
{
document.getElementById("date").innerHTML = Date();
}
</script>
</body>
</html>
In the above example when the user click the button, the event function will return the current date and replace the Statement on the browser with the current date and time
How to use JavaScript Variables?
JavaScript variables are nothing but the containers for storing data values which are required for execution of a function.
The example of variables in JavaScript Program are a, b, c and d. For example:
var a = 2;
var b = 4;
var c = 5;
var d = 15;
From the above example you can say that
a stores the value 2
b stores the value 4
c stores the value 5
d stores the value 15
In this example x1, x2, x3, total and average are variables:
var x1 = 2;
var x2 = 4;
var x3 = 6;
var total = x1 + x2 + x3;
var average = total/3;
Let us execute the above calculation
<html>
<head>
<title>How to use JavaScript Variable</title>
</head>
<body>
<center><b><h1 id="calculate-total">Click the button to calculate total</h1></b></center>
<center><b><h1 id="calculate-average">Click the button to calculate average</h1></b></center>
<script>
var x1 = 2;
var x2 = 4;
var x3 = 6;
total = x1 + x2 + x3;
average = total / 3
document.getElementById("calculate-total").innerHTML = "The total is: " + total;
document.getElementById("calculate-average").innerHTML = "The average is: " + average;
</script>
</body>
</html>
The above example will add three variables and calculate the average of those and return that in two statements on the browser
The total of three variables is 12
The average of three variables is 4
JavaScript variables can hold numbers like 5 and text values like "Bittu".
In JavaScript program, text values are called text strings and numbers are called numeric variables.
JavaScript Strings are written inside double or single quotes and JavaScript Numbers are written without quotes in a program.
If you keep a number inside quotes then it will treat as a text string value.
The example of all string variables, see bellow:
var firstperson = "Bittu";
var secondperson = "Rahul";
var thirdperson = "5963";
<html>
<head>
<title>How to use JavaScript String Variables</title>
</head>
<body>
<center><b><h1 id="SetPerson">Click the button to set person</h1></b></center>
<button onclick="Set1()">Set First</button>
<button onclick="Set2()">Set Second</button>
<button onclick="Set3()">Set Third</button>
<script>
var firstperson = "Bittu";
var secondperson = "Rahul";
var thirdperson = "5963";
function Set1()
{
document.getElementById("SetPerson").innerHTML = firstperson;
}
function Set2()
{
document.getElementById("SetPerson").innerHTML = secondperson;
}
function Set3()
{
document.getElementById("SetPerson").innerHTML = thirdperson;
}
</script>
</body>
</html>
In the above example when the user click any of the three buttons then separate persons will be set according to the variables declared in the program
How to use JavaScript Array?
An array is a special variable, which can hold more than one value at a time.
An array can hold many values under a single name, and you can access the values by referring to an index number.
In computer science, an array data structure, or simply an array, is a data structure consisting of a collection of elements, each identified by at least one array index or key.
In programming, a series of objects all of which are the same size and type. Each object in an array is called an array element. For example, you could have an array of integers or an array of characters or an array of anything that has a defined data type.
A storage array, also called a disk array, is a data storage system that is used for block-based, file-based or object storage. An array is an aggregate data structure that is designed to store a group of objects of the same or different types. Arrays can hold primitives as well as references.
Access the Elements of an Array
You refer to an array element by referring to the index number.
This statement modifies the first element in cars:
var car = ["ABC", "AGF", "BMW"];
cars[0] = "ABC";
cars[1] = "AGF";
cars[2] = "BMW";
This statement accesses the value of the first element in cars:
var name = cars[2];
The name of the car will assign to BMW
var cloth = ["Shirt", "Pant", "Under garment"];
var mygarment = cloth;
The result of mygarment will be Shirt, Pant, Under garment
<html>
<head>
<title>How to use JavaScript Array</title>
</head>
<body>
<center><b><h1 id="array">Cycle in the store</h1></b></center>
<script>
var Cycle = ["Harqulies", " Hero", " Janggo"];
document.getElementById("array").innerHTML = "The cycles are: " + Cycle;
</script>
</body>
</html>
In the above example the result will be:- The cycles are: Harqulies, Hero, Jangg
<html>
<head>
<title>How to use JavaScript Array</title>
</head>
<body>
<center><b><h1 id="temperature">Click the button to see temperature</h1></b></center>
<button onclick="Set1()">Set Monday</button>
<button onclick="Set2()">Set Tuesday</button>
<button onclick="Set3()">Set Wednesday</button>
<button onclick="Set4()">Set Thursday</button>
<button onclick="Set5()">Set Friday</button>
<button onclick="Set6()">Set Saturday</button>
<button onclick="Set7()">Set Sunday</button>
<script>
var Weakday = ["39 Degree", "31 Degree", "42 Degree", "28 Degree", "36 Degree", "40 Degree", "44 Degree"];
function Set1()
{
var Day = Weakday[0];
document.getElementById("temperature").innerHTML = Day;
}
function Set2()
{
var Day = Weakday[1];
document.getElementById("temperature").innerHTML = Day;
}
function Set3()
{
var Day = Weakday[2];
document.getElementById("temperature").innerHTML = Day;
}
function Set4()
{
var Day = Weakday[3];
document.getElementById("temperature").innerHTML = Day;
}
function Set5()
{
var Day = Weakday[4];
document.getElementById("temperature").innerHTML = Day;
}
function Set6()
{
var Day = Weakday[5];
document.getElementById("temperature").innerHTML = Day;
}
function Set7()
{
var Day = Weakday[6];
document.getElementById("temperature").innerHTML = Day;
}
</script>
</body>
</html>
In the above example the result will be according to the value of the array position, that will be generate by on-click event
How to use JavaScript String Methods?
String methods help you to work with JavaScript string length and position
The length of a string is found in the built in property length
JavaScript string simply stores a series of characters like "Bittu" or "Something else"
JavaScript string can be any text inside quotes. You can use single or double quotes
Example: var Cyclename = "Bonta YRT3"; and var Cyclename = 'Bonta BD34';
Finding a String in a String
The indexOf() method returns the position of the first occurrence of a specified text in a string
Example:
var str = "Please address where address occurs!";
var pos = str.indexOf("address");
The indexOf() method returns the position of the first occurrence of a specified text "address": and Return Result 7
<html>
<head><title>How to use JavaScript String Methods</title></head>
<body>
<h2>JavaScript String Methods</h2>
<p> The indexOf() method returns the position of the first occurrence of a specified text:</p>
<p id="here"></p>
<script>
var str = "Please address where address occurs!";
var pos = str.indexOf("address");
document.getElementById("here").innerHTML = pos;
</script>
</body>
</html>
The lastIndexOf() method returns the index of the last occurrence of a specified text in a string for example see below
var str = "Please address where address occurs!";
var pos = str.lastIndexOf("address");
The lastIndexOf() method returns the position of the last occurrence of a specified text "address": and Return Result 21
<html>
<head><title>How to use JavaScript String Methods</title></head>
<body>
<h2>JavaScript String Methods</h2>
<p> The lastIndexOf() method returns the position of the last occurrence of a specified text:</p>
<p id="here"></p>
<script>
var str = "Please address where address occurs!";
var pos = str.lastIndexOf("address");
document.getElementById("here").innerHTML = pos;
</script>
</body>
</html>
If the text is not found then both the indexOf() and the lastIndexOf() methods return -1
See the example bellow:- The search() method searches a string for a specified value and returns the position of the match
var str = "Please address where address occurs!";
var pos = search.indexOf("address");
<html>
<head><title>How to use JavaScript String Methods</title></head>
<body>
<h2>JavaScript String Methods</h2>
<p>The search() method returns the position of the first occurrence of a specified text in a string</p>
<p id="here"></p>
<script>
var str = "Please address where 'address' locate!";
var pos = str.search("address");
document.getElementById("here").innerHTML = pos;
</script>
</body>
</html>
The two methods, indexOf() and search(), are equal
They accept the same parameters and return the same value
But there are some differences that The indexOf() method cannot take a second start position argument whereas The search() method can take much more powerful search values.
For Example see below
There are 3 methods for extracting a part of a string:
slice(start, end)
substring(start, end)
substr(start, length)
What is The slice() Method?
slice() extracts a part of a string and returns the extracted part in a new string and The method takes 2 parameters, the starting index position and the ending index position of a string. See the example below:
var str = "Dog, Cat, Man";
var show = str.slice(5, 8);
The result of show will be:Cat
In the example slices out a portion of a string from position 5 to position 8
<html>
<head><title>How to use JavaScript String Methods</title></head>
<body>
<h2>JavaScript String Methods</h2>
<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="here"></p>
<script>
var str = "Dog, Cat, Man";
var show = str.slice(5,8);
document.getElementById("here").innerHTML = show;
</script>
</body>
</html>
See the example below:
var str = "Dog, Cat, Man";
var show = str.slice(-8, -5);
The result of show will be:Cat
In the above example slices out a portion of a string from position -8 to position -5, where the string length will start counting from end of that string.
<html>
<head><title>How to use JavaScript String Methods</title></head>
<body>
<h2>JavaScript String Methods</h2>
<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="here"></p>
<script>
var str = "Dog, Cat, Man";
var show = str.slice(-8,-5);
document.getElementById("here").innerHTML = show;
</script>
</body>
</html>
What is The substring() Method?
The substring() Method:- This method is similar to slice() method but the only difference is that substring() cannot accept negative indexes. See below for example:
var str = "Dog, Cat, Man";
var show = str.substring(5, 8);
The result of show will be:Cat
In the example substring out a portion of a string from position 5 to position 8
<html>
<head><title>How to use JavaScript String Methods</title></head>
<body>
<h2>JavaScript String Methods</h2>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="here"></p>
<script>
var str = "Dog, Cat, Man";
var show = str.substring(5,8);
document.getElementById("here").innerHTML = show;
</script>
</body>
</html>
What is The substr() Method?
The substr() Method:- This method is also similar to slice() method but the only difference is that the second parameter specifies the length of the extracted part. See below for example:
var str = "Dog, Cat, Man";
var show = str.substr(5, 3);
The result of show will be:Cat
If the first parameter is negative, the position counts from the end of the string and the second parameter can not be negative because it defines the length, so in the example the string will start count from the length of 5 and it will count three character from that position and return the result Cat.
<html>
<head><title>How to use JavaScript String Methods</title></head>
<body>
<h2>JavaScript String Methods</h2>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="here"></p>
<script>
var str = "Dog, Cat, Man";
var show = str.substr(5,3);
document.getElementById("here").innerHTML = show;
</script>
</body>
</html>
How to use JavaScript Date and Time?
JavaScript date can be written as a string, see below
1st January 2020 12:00:00 GMT+0530 (India Standard Time)
The JavaScript Date object lets you work with dates (years, months, days, hours, minutes, seconds, and milliseconds)
In this example, we use a script to display dates inside a HTML tag element and program will call it with id="here":
<html>
<head><title>How to use JavaScript Date and Time</title></head>
<body>
<h1 id="here"></h1>
<script>
document.getElementById("here").innerHTML = Date();
</script>
</body>
</html>
How to create a Date Object
Date consists of a year, a month, a day, an hour, a minute, a second and also milliseconds. Therefore we can use all those in our application, let us see now
JavaScript Date objects are created with the new Date() constructor and There are 4 ways of initiating a Date in our JavaScript project
Those are:
new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
By using JavaScript new Date() creates a new date object with the current date and time in our application
<html>
<head><title>How to use JavaScript Date and Time</title></head>
<body>
<h1 id="here"></h1>
<script>
var datetime = new Date();
document.getElementById("here").innerHTML = datetime;
</script>
</body>
</html>
See the example by using JavaScript new Date(milliseconds)
JavaScript dates are calculated in milliseconds from 01 January, 1970 00:00:00 Universal Time (UTC). One day contains 86,400,000 millisecond.
<html>
<head><title>How to use JavaScript Date and Time</title></head>
<body>
<h1 id="here"></h1>
<script>
var datetime = new Date(5415789542);
document.getElementById("here").innerHTML = datetime;
</script>
</body>
</html>
See the example by using JavaScript new Date(dateString)
<html>
<head><title>How to use JavaScript Date and Time</title></head>
<body>
<h1 id="here"></h1>
<script>
var datetime = new Date("January 01, 2020 12:12:12");
document.getElementById("here").innerHTML = datetime;
</script>
</body>
</html>
See the example by using JavaScript new Date(year, month, day, hours, minutes, seconds)
<html>
<head><title>How to use JavaScript Date and Time</title></head>
<body>
<h1 id="here"></h1>
<script>
var datetime = new Date(2017, 07, 15, 14, 45, 23);
document.getElementById("here").innerHTML = datetime;
</script>
</body>
</html>
How to use JavaScript Condition?
Conditions are used to perform different task based on different validation.
When we write programs you want to validate different tasks for different reasons then we can use conditional statements in programs to do this.
In JavaScript we have the following conditional statements
We use if to specify a program to be executed, if a specified condition is true
We use else to specify a program to be executed, if the same condition is false
We use else if to specify a new condition to test, if the first condition is false
We use switch to specify many alternative programs to be executed
See the example below:
<html>
<head><title>How to use JavaScript Conditional Statements</title></head>
<body>
<center><h1 id="here"></h1></center>
<script>
var time = new Date().getSeconds();
if (time > 50 && time < 60)
{
document.getElementById("here").innerHTML = "Hello I am fast!";
}
else if (time > 40 && time < 50)
{
document.getElementById("here").innerHTML = "Please let me go!";
}
else if (time > 30 && time < 40)
{
document.getElementById("here").innerHTML = "You keep your mouth shut!";
}
else if (time > 20 && time < 30)
{
document.getElementById("here").innerHTML = "Try it slow!";
}
else if (time > 10 && time < 20)
{
document.getElementById("here").innerHTML = "Hit him hard!";
}
else
{
document.getElementById("here").innerHTML = "Get lost from here!";
}
</script>
</body>
</html>
Switch expression is evaluated once and its expression is compared with the values of each case.
<html>
<body>
<center><h1 id="here"></h1></center>
<script>
var month;
switch (new Date().getMonth())
{
case 0:
month = "January";
break;
case 1:
month = "February";
break;
case 2:
month = "March";
break;
case 3:
month = "April";
break;
case 4:
month = "May";
break;
case 5:
month = "June";
break;
case 6:
month = "July";
break;
case 7:
month = "August";
break;
case 8:
month = "September";
break;
case 9:
month = "October";
break;
case 10:
month = "November";
break;
case 11:
month = "December";
}
document.getElementById("here").innerHTML = "This is " + month + " Month";
</script>
</body>
</html>
How to use JavaScript Loop Programming?
Loops are very useful, if you want to run the same set of code over and over again, each time with a different set of values
An HTML event can be both what the browser does and also something when the user does.
There are different Kinds of Loops
JavaScript allow you run code when events are detected.
Java Script for loops:- through a block of code a number of times
Java Script for/in loops:- loops through the properties of an object
Java Script while loops:- loops through a block of code while a specified condition is true
Java Script do/while loops:- also loops through a block of code while a specified condition is true
The for loop is often the tool you will use when you want to create a loop
<html>
<head><title>How to use JavaScript Loop Statements</title></head>
<body>
<h1 id="here"></h1>
<script>
var text = "";
var i;
for (i = 1; i < 101; i++)
{
text += "The count is " + i + "<br>";
}
document.getElementById("here").innerHTML = text;
</script>
</body>
</html>
From the example above, you can learn that statement 1 sets a variable before the loop starts (var i = 1), statement 2 defines the condition for the loop to run (i must be less than 101) and statement 3 increases a value (i++) each time the code block in the loop has been executed.
Here is the example for the For/In Loop bellow
<html>
<head><title>How to use JavaScript For/In Loop Statements</title></head>
<body>
<h2>JavaScript For/In Loop</h2>
<h1 id="here">
<script>
var text = "";
var me = {Name:"I am Bishagit Mukherjee",
Subject:"I am an expert to handle Web Technology",
Hobby:"I love Cricket",
Class:"I read in Class 12"};
var a;
for (a in me)
{
text += me[a] + "<br>";
}
document.getElementById("here").innerHTML = text;
</script>
</body>
</html>
How to use JavaScript Boolean?
The JavaScript Boolean represents one of two values after its process of validation: either true or false
We may need sometimes the response in two words, it is either true or false, either yes or no and either on or off
JavaScript has a Boolean data type. It can only take the values true or false
YES / NO
ON / OFF
TRUE / FALSE
<html>
<head><title>How to use JavaScript Boolean Statements</title></head>
<body>
<center><h1>Is the statement true (910 > 909):</h1></center>
<center><button onclick="myFunction()">Try it</button></center>
<center><h1 id="here"></h1></center>
<script>
function myFunction()
{
document.getElementById("here").innerHTML = Boolean(910 > 909);
}
</script>
</body>
</html>
In the above example the JavaScript Boolean will return the value true because the 910 is greater than 909, so the JavaScript Boolean method has found the validation correct.
<html>
<head><title>How to use JavaScript Boolean Statements</title></head>
<body>
<center><h1>Is the statement true (god != god):</h1></center>
<center><button onclick="myFunction()">Try it</button></center>
<center><h1 id="here"></h1></center>
<script>
function myFunction()
{
document.getElementById("here").innerHTML = Boolean("god" != "god");
}
</script>
</body>
</html>
In the above example the JavaScript Boolean will return the value false because the god is equal to god but the statement in the program was god is not equal to god, so the JavaScript Boolean method has found the validation incorrect.
<html>
<body>
<center><h1 id="here"></h1></center>
<script>
var a = 2;
var b = 8;
var c = 7;
var d = 1;
var e = 9;
var f = 3;
var x = b + c;
var y = a + d + e + f;
document.getElementById("here").innerHTML = (x==y);
</script>
</body>
</html>
In the above example the value of x and y are same therefore the JavaScript Boolean return true
This example bellow will show that Booleans and Objects cannot be safely compared
<html>
<head><title>Booleans and objects cannot be safely compared</title></head>
<body>
<center><h2>We must not create booleans as objects because Booleans and objects cannot be safely compared in your program</h2></center>
<center><h1>In this program a==b</h1><h1 id="here"></h1></center>
<center><h1>And b==c</h1><h1 id="here2"></h1></center>
<center><h1>But a==c</h1><h1 id="here3"></h1></center>
<script>
var a = new Boolean(true);
var b = true;
var c = new Boolean(b);
document.getElementById("here").innerHTML = (a==b);
document.getElementById("here2").innerHTML = (b==c);
document.getElementById("here3").innerHTML = (a==c);
</script>
</body>
</html>
