!
DOCTYPE html>
<html>
<head>
<meta-charset="utf-8">
<title>Buttons </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<style>
#my1 {
width:100px;
height:300px;
background-color:green;
color:white;
font-size: 20px;
text-align: center;
#my2 {
width:auto;
height:200px;
background-color:teal;
color:white;
font-size: 28px;
text-align: center;
padding:10px;
</style>
</head>
<body>
<p> Javascript </p>
<button onclick ="alert('How can help you')"> Click Me </button>
<button id="btn2"> Please Click Me </button>
<div id="my1">
<p> This is a new content .</p>
</div>
<hr />
<div id="my2">
<p> This is a new content .</p>
<button id="btn3"> Click To Change the Content </button>
<button id="btn4"> Click To Change the Content </button>
<script type="text/javascript">
var color ="rgb(70,170,220)";
var x, y, z, myColor;
document.getElementById("btn4").onclick=function(){
x =Math.round(Math.random()*256);
y =Math.round(Math.random()*256);
z =Math.round(Math.random()*256);
myColor ='rgb('+ x +','+ y +','+ z +')';
document.getElementById("my1").style.backgroundColor= myColor;
document.getElementById("btn3").onmouseleave=function(){
document.getElementById('my2').style.backgroundColor = color;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta-charset="utf-8">
<title>Buttons </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<style>
#my1 {
width:100px;
height:300px;
background-color:green;
color:white;
font-size: 20px;
text-align: center;
#my2 {
width:auto;
height:200px;
background-color:teal;
color:white;
font-size: 28px;
text-align: center;
padding:10px;
</style>
</head>
<body>
<p> Javascript </p>
<button onclick ="alert('How can help you')"> Click Me </button>
<button id="btn2"> Please Click Me </button>
<div id="my1">
<p> This is a new content aaaa.</p>
</div>
<hr />
<div id="my2">
<p> This is a new content bbbbbbb .</p>
<button id="btn3" onclick="swap('my2','my1')"> Click To Change the Content </button>
<button id="btn4" onclick ="swap('my1,'my2')"> Click To Change the Content </button>
<script type="text/javascript">
/*
//function greeting(firstname){
//window.alert("Hello" + ' ' + firstname + '!');
*/
//greeting('Bakhsh Al Baloshi');
function sum(a,b){
return a*b;
var x = sum(5,11);
//window.alert(x);
function swap(id1,id2){
var y =document.getElementById(id1).innerHTML;
var z =document.getElementById(id2).innerHTML;
document.getElementById(id2).innerHTML= y;
document.getElementById(id1).innerHTML= z;
};
var mycar = {
make: 'Samsung Glaxy Note',
color: 'White',
modle: 'Glaxy',
warranty: 24,
name: 'Glaxy'
window.console.log(mycar);
delete mycar.modle;
window.console.log(mycar);
mycar.modle = "plus";
</script>
</body>
</html>
/******** creating Object with new ********/
<script>
var myCar = new Object();
myCar.make = "Honda";
myCar.color = "red";
myCar.price = "100";
window.console.log(myCar);
delete myCar.color;
window.console.log(myCar);
myCar.year = "2021";
window.console.log(myCar);
</script>
/************************************************/
<script>
function car(make,modle,year,color,warranty){
this.make = make;
this.modle = modle;
this.year = year;
this.color = color;
this.warranty = warranty;
this.extandWarranty = function(x){
this.warranty += x;
var myCar = new car("Toyota","corrola",2021,"red",12);
window.console.log(myCar);
myCar.extandWarranty(24);
window.console.log(myCar);
myCar.condition = "like new";
window.console.log(myCar.condition);
var mySonCar = new car ("Honda","Accord",2022,"White", 24);
window.console.log(mySonCar);
car.prototype.condition = "New";
window.console.log(myCar);
var shoppingList = ["Fruits","Eggs","Milk"];
function showResult(x){
document.getElementById("myList").innerHTML+= "<br />" +x;
showResult(shoppingList);
showResult(shoppingList[0]);
showResult(shoppingList[2]);
shoppingList[1] = "Orange";
showResult(shoppingList);
shoppingList.splice(1,1);
showResult(shoppingList);
shoppingList.splice(1,0,"Laptop","Sugar");
showResult(shoppingList);
shoppingList.sort();
showResult(shoppingList);
shoppingList.reverse();
showResult(shoppingList);
var myString = "What is your name ?";
var myArray = myString.split(' ',);//two spaces inside parenthesis
showResult(myArray);
</script>
/************************* If Else Statement *********/
<script>
var speed =30;
if(speed > 70){
window.alert("You are Going too Fast !");
else if (speed < 40){
window.alert("You are going too slow !");
else {
window.alert("Your speed is fine ");
</script>
//////////////// MotorWay Speed Check ///////////////////////
<body>
<p> Motorway Speed <input id ="speed" type ="number" />
<button onclick="checkSpeed()"> Check </button>
</p>
</p>
<script>
function checkSpeed(){
var speed = document.getElementById("speed").value;
if(speed > 70){
window.alert("You are Going too Fast !");
else if (speed < 40){
window.alert("You are going too slow !");
else {
window.alert("Your speed is fine ");
</script>
</body>
</html>
/////////////////////////////////////// Switch Case Statement /////////////////////////////
<p> Motorway Speed <input id ="speed" type ="number" />
<button onclick="checkSpeed()"> Check </button>
</p>
<br />
<p> Check Season <input id ="season" />
<button onclick="checkSeason()"> Submit </button>
</p>
</p>
<script>
function checkSpeed(){
var speed = document.getElementById("speed").value;
if(speed > 70){
window.alert("You are Going too Fast !");
else if (speed < 40){
window.alert("You are going too slow !");
else {
window.alert("Your speed is fine ");
function checkSeason(){
var x = document.getElementById("season").value.toLowerCase();
switch(x){
case "summer":
window.alert(" It is Summer ");
break;
case "winter":
window.alert(" It is Winter ! ");
break;
case "fall":
window.alert(" It is Fall ! ");
break;
case "atumm":
window.alert(" It is Atumm ! ");
break;
default:
window.alert("I do not recognize this !");
</script>
</body>
</html>
/////////////////// JavaScript //////////////////////////
<p> Motorway Speed <input id ="speed" type ="number" />
<button onclick="checkSpeed()"> Check </button>
</p>
<br />
<p> Check Season <input id ="season" />
<button onclick="checkSeason()"> Submit </button>
</p>
</p>
<p id="myfor">For Loop
</p>
<p id="for"> New</p>
<p id="New1"> New1</p>
<script>
function checkSpeed(){
var speed = document.getElementById("speed").value;
if(speed > 70){
window.alert("You are Going too Fast !");
else if (speed < 40){
window.alert("You are going too slow !");
else {
window.alert("Your speed is fine ");
function checkSeason(){
var x = document.getElementById("season").value.toLowerCase();
switch(x){
case "summer":
window.alert(" It is Summer ");
break;
case "winter":
window.alert(" It is Winter ! ");
break;
case "fall":
window.alert(" It is Fall ! ");
break;
case "atumm":
window.alert(" It is Atumm ! ");
break;
default:
window.alert("I do not recognize this !");
}
for(i= 0; i < 6; i++){
document.getElementById("myfor").innerHTML += "<br />"+ i;
for(i= 7; i> 0; i--){
document.getElementById("for").innerHTML += "<br />" + Math.pow(i,2);
var shoppingList = ["Milk", "eggs","Mango"];
for(i =0;i<shoppingList.length; i++){
document.getElementById("New1").innerHTML += "<br />" + shoppingList[i];
var numberList = [1, 2, 3];
for(i= 0; i<numberList.length; i++){
numberList[i] += 10;
document.getElementById("New1").innerHTML += "<br />" + numberList;
</script>
</body>
</html>
//////////////////////////// While LOOP //////////////////////
<p> Motorway Speed <input id ="speed" type ="number" />
<button onclick="checkSpeed()"> Check </button>
</p>
<br />
<p> Check Season <input id ="season" />
<button onclick="checkSeason()"> Submit </button>
</p>
</p>
<p id="myWhile">While Loop
</p>
<button onclick="startGame()"> Start</button>
<script>
function checkSpeed(){
var speed = document.getElementById("speed").value;
if(speed > 70){
window.alert("You are Going too Fast !");
else if (speed < 40){
window.alert("You are going too slow !");
else {
window.alert("Your speed is fine ");
function checkSeason(){
var x = document.getElementById("season").value.toLowerCase();
switch(x){
case "summer":
window.alert(" It is Summer ");
break;
case "winter":
window.alert(" It is Winter ! ");
break;
case "fall":
window.alert(" It is Fall ! ");
break;
case "atumm":
window.alert(" It is Atumm ! ");
break;
default:
window.alert("I do not recognize this !");
var i = 0;
while(i < 5){
document.getElementById("myWhile").innerHTML += "<br />" + i;
i++;
function startGame(){
var balance = 1000;
var itemsBought = 0;
while(balance > 0){
var itemPrice = Math.floor(Math.random()*100);
if(itemPrice <= balance){
itemsBought += 1;
balance -= itemPrice;
document.getElementById("myWhile").innerHTML += "<P> Purcahse Amount : $" + itemPrice+ " " +
"New Balance : $" + balance + "</p> ";
}
}
document.getElementById("myWhile").innerHTML += "<P> You have Bought : " + itemsBought + "items.
</p>";
</script>
</body>
</html>
///////////// Regular expression (RegEx) /////////////////////
var str = "Milk";
var pattern = /l/g; // we can use here (i) OR (g) .
window.alert(str.search(pattern));
var str = "Millk";
var pattern = /l/g;// we can use her (i)Or (g).
window.alert(str.match(pattern));
var str = "Millk";
var pattern = /l/g;// we can use her (i)Or (g).
window.alert(pattern.test(str)); // return Boolean true
<p>String : <span id="string"> </span> </p>
<p>Pattern: <span id="pattern"> </span></p>
<p> Result(Search) : <span id="search"> </span></p>
<p> Result(Match) : <span id="match"> </span></p>
<p> Result(test) : <span id="test"></span></p>
<script>
var str = "Millk \n123456 7890%";
//var pattern = /^M/g;// check for Uppercase M.
//var pattern = /\s/g;
//var pattern = /[4-8]/g;// Check for number from 4 to 8.
//var pattern = /\d{10}/g;// Check for 10 digits.
var pattern = /\n/g;// line break Or new line.
//var pattern = /^b/g;
//var pattern = /\S/g;
//var pattern = /\W/g;
//var pattern = /\w/g;
//var pattern = /\d/g;
//var pattern = /[^ilk]/g;
//var pattern = /[a-z]/g;//check for lowercaase a to z.
//var pattern = new RegExp("l","g");
//var pattern = /l/i; // we can use her (i)Or (g).
document.getElementById("string").innerHTML = str;
document.getElementById("pattern").innerHTML = pattern;
document.getElementById("search").innerHTML = str.search(pattern);
document.getElementById("match").innerHTML = str.match(pattern);
document.getElementById("test").innerHTML = pattern.test(str);
</script>
</body>
</html>
/////////////////// Password Matching and Error Handling /////////////////////
<p> Your Password Should Contain one Capital letter and one number.</p>
<p>Enter Your Password :<br /> <input id="password" type="password"> </p>
<p> Re-Enter Your Password : <br /> <input id="password2" type="password"> </p>
<button onclick="check()"> Submit</button>
<p id="error"> </p>
<script>
//try{
// sum(4,7);
//}
//catch(err){
// document.getElementById("error").innerHTML = err.message;
//}
function check(){
var password = document.getElementById("password").value;
var password2 = document.getElementById("password2").value;
var errorMessage = document.getElementById("error");
var errorToThrow = "";
try{
if(password.length<6){
errorToThrow += "<br /> Your Password is too short !.";
if(/[A-Z]/g.test(password) == false){
errorToThrow += "<br /> Your Password Should Contain at least one Capital Letter. !.";
if(/\d/g.test(password) == false){
errorToThrow += "<br /> Your Password Should Contain at least one number!";
if(password != password2){
errorToThrow += "<br /> Your Password Should Match";
throw errorToThrow;
catch(err){
errorMessage.innerHTML = err;
</script>
</body>
</html>
//////////////////// Counter ////////////////////////
<p id="counter"> 0</p>
<button onclick="clearInterval(myCounter)"> Stop Counting</button>
<br />
<button onclick="clearTimeout(delayedwelcomemessage)"> Avoid Welcome Message</button>
<script>
//try{
// sum(4,7);
//}
//catch(err){
// document.getElementById("error").innerHTML = err.message;
//}
var counter = document.getElementById("counter");
var x = 0;
var myCounter = setInterval(function(){x++;counter.innerHTML = x},1000);
var delayedwelcomemessage = setTimeout(function(){window.alert("Welcome to our Page !")},3000);
</script>
</body>
