Hellooooo.. How about if we start our next lesson with Java Script.. It's just easy-breezy buddyzzz.. Here i'll attach my code and the sample output.. Do try it..
EXAMPLE 1 Basic
<html><head><title> JAVA SCRIPT</title></head>
<body>
<h1> Welcome to SMMTC </h1>
This is HTML section....
</body>
</html>
<script type="text/javascript">
window.alert("welcome to JavaScript!");
</script>
EXAMPLE 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Java Script2</title>
function showText() {
window.alert("welcome to JavaScript!"); }
</script>
</head>
<body>
<h1> Welcome to SMMTC </h1>
This is HTML section....
</body>
</html>
<script type="text/javascript">
<html><head><title> </title>
</head>
<body onload="showText();">
</body>
</html>
EXAMPLE 3 Create tab
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<html><head><title> JAVA SCRIPT Tab</title>
<h1> Welcome to SMMTC </h1></head>
<body>
Example of JavaScript....
</body>
</html>
<script type="text/javascript">
function showHide(show, hide) { document.getElementById(show).style.display="block"; document.getElementById(hide).style.display="none"; }</script>
<p id="tab1">
Tab 1 - Welcome to STIV3013
</p>
<p id="tab2" style="display: none;">
Tab 2 - WWW Programming
</p>
<input type="button" value="Tab 1"
onclick="showHide('tab1','tab2');" />
<input type="button" value="Tab 2"
onclick="showHide('tab2','tab1');" />
</body>
</html>
EXAMPLE 4 Displaying Dates
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p>This is a js tutorial on how to display date... <br /> </p>
<p id="demo">Display the result here.</p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
</body>
</html>
EXAMPLE 5 JavaScript Array Sort
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h2>JavaScript Array Sort... <br /> </h2>
<p>Click the button to sort the array alphabetically and numerally </p>
<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction1() {
points.sort();
document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
EXAMPLE 6 How To Create a Responsive Form
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page_post.php"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
EXAMPLE 1 Basic
<html><head><title> JAVA SCRIPT</title></head>
<body>
<h1> Welcome to SMMTC </h1>
This is HTML section....</body>
</html>
<script type="text/javascript">
window.alert("welcome to JavaScript!");
</script>
EXAMPLE 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Java Script2</title>
function showText() {
window.alert("welcome to JavaScript!"); }
</script>
</head>
<body>
<h1> Welcome to SMMTC </h1>
This is HTML section....
</body>
</html>
<script type="text/javascript">
<html><head><title> </title>
</head>
<body onload="showText();">
</body>
</html>
EXAMPLE 3 Create tab
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<html><head><title> JAVA SCRIPT Tab</title>
<h1> Welcome to SMMTC </h1></head>
<body>
Example of JavaScript....
</body>
</html>
<script type="text/javascript">
function showHide(show, hide) { document.getElementById(show).style.display="block"; document.getElementById(hide).style.display="none"; }</script>
<p id="tab1">
Tab 1 - Welcome to STIV3013</p>
<p id="tab2" style="display: none;">
Tab 2 - WWW Programming
</p>
<input type="button" value="Tab 1"
onclick="showHide('tab1','tab2');" />
<input type="button" value="Tab 2"
onclick="showHide('tab2','tab1');" />
</body>
</html>
EXAMPLE 4 Displaying Dates
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head><body>
<p>This is a js tutorial on how to display date... <br /> </p>
<p id="demo">Display the result here.</p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
</body>
</html>
EXAMPLE 5 JavaScript Array Sort
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h2>JavaScript Array Sort... <br /> </h2>
<p>Click the button to sort the array alphabetically and numerally </p>
<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p><script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction1() {
points.sort();
document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
EXAMPLE 6 How To Create a Responsive Form
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page_post.php"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
EXAMPLE 7 JavaScript Function Syntax
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="ExternalJS1.js" ></script>
</head>
<body onload="sayHello();">
This is an external JS tutorial
</body>
</html>
// JavaScript Document
function sayHello() {
alert("Hello World")
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="ExternalJS1.js" ></script>
</head>
<body onload="sayHello();">
This is an external JS tutorial
</body>
</html>
// JavaScript Document
function sayHello() {
alert("Hello World")
}
**Check out https://www.w3schools.com/ for more exercises on Java Scripts...............😌💻😌
**Thank you guys, see you soon..
Comments
Post a Comment