!
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="[Link]
[Link]">
<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;
[Link]("btn4").onclick=function(){
x =[Link]([Link]()*256);
y =[Link]([Link]()*256);
z =[Link]([Link]()*256);
myColor ='rgb('+ x +','+ y +','+ z +')';
[Link]("my1").[Link]= myColor;
[Link]("btn3").onmouseleave=function(){
[Link]('my2').[Link] = 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="[Link]
[Link]">
<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){
//[Link]("Hello" + ' ' + firstname + '!');
*/
//greeting('Bakhsh Al Baloshi');
function sum(a,b){
return a*b;
var x = sum(5,11);
//[Link](x);
function swap(id1,id2){
var y =[Link](id1).innerHTML;
var z =[Link](id2).innerHTML;
[Link](id2).innerHTML= y;
[Link](id1).innerHTML= z;
};
var mycar = {
make: 'Samsung Glaxy Note',
color: 'White',
modle: 'Glaxy',
warranty: 24,
name: 'Glaxy'
[Link](mycar);
delete [Link];
[Link](mycar);
[Link] = "plus";
</script>
</body>
</html>
/******** creating Object with new ********/
<script>
var myCar = new Object();
[Link] = "Honda";
[Link] = "red";
[Link] = "100";
[Link](myCar);
delete [Link];
[Link](myCar);
[Link] = "2021";
[Link](myCar);
</script>
/************************************************/
<script>
function car(make,modle,year,color,warranty){
[Link] = make;
[Link] = modle;
[Link] = year;
[Link] = color;
[Link] = warranty;
[Link] = function(x){
[Link] += x;
var myCar = new car("Toyota","corrola",2021,"red",12);
[Link](myCar);
[Link](24);
[Link](myCar);
[Link] = "like new";
[Link]([Link]);
var mySonCar = new car ("Honda","Accord",2022,"White", 24);
[Link](mySonCar);
[Link] = "New";
[Link](myCar);
var shoppingList = ["Fruits","Eggs","Milk"];
function showResult(x){
[Link]("myList").innerHTML+= "<br />" +x;
showResult(shoppingList);
showResult(shoppingList[0]);
showResult(shoppingList[2]);
shoppingList[1] = "Orange";
showResult(shoppingList);
[Link](1,1);
showResult(shoppingList);
[Link](1,0,"Laptop","Sugar");
showResult(shoppingList);
[Link]();
showResult(shoppingList);
[Link]();
showResult(shoppingList);
var myString = "What is your name ?";
var myArray = [Link](' ',);//two spaces inside parenthesis
showResult(myArray);
</script>
/************************* If Else Statement *********/
<script>
var speed =30;
if(speed > 70){
[Link]("You are Going too Fast !");
else if (speed < 40){
[Link]("You are going too slow !");
else {
[Link]("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 = [Link]("speed").value;
if(speed > 70){
[Link]("You are Going too Fast !");
else if (speed < 40){
[Link]("You are going too slow !");
else {
[Link]("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 = [Link]("speed").value;
if(speed > 70){
[Link]("You are Going too Fast !");
else if (speed < 40){
[Link]("You are going too slow !");
else {
[Link]("Your speed is fine ");
function checkSeason(){
var x = [Link]("season").[Link]();
switch(x){
case "summer":
[Link](" It is Summer ");
break;
case "winter":
[Link](" It is Winter ! ");
break;
case "fall":
[Link](" It is Fall ! ");
break;
case "atumm":
[Link](" It is Atumm ! ");
break;
default:
[Link]("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 = [Link]("speed").value;
if(speed > 70){
[Link]("You are Going too Fast !");
else if (speed < 40){
[Link]("You are going too slow !");
else {
[Link]("Your speed is fine ");
function checkSeason(){
var x = [Link]("season").[Link]();
switch(x){
case "summer":
[Link](" It is Summer ");
break;
case "winter":
[Link](" It is Winter ! ");
break;
case "fall":
[Link](" It is Fall ! ");
break;
case "atumm":
[Link](" It is Atumm ! ");
break;
default:
[Link]("I do not recognize this !");
}
for(i= 0; i < 6; i++){
[Link]("myfor").innerHTML += "<br />"+ i;
for(i= 7; i> 0; i--){
[Link]("for").innerHTML += "<br />" + [Link](i,2);
var shoppingList = ["Milk", "eggs","Mango"];
for(i =0;i<[Link]; i++){
[Link]("New1").innerHTML += "<br />" + shoppingList[i];
var numberList = [1, 2, 3];
for(i= 0; i<[Link]; i++){
numberList[i] += 10;
[Link]("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 = [Link]("speed").value;
if(speed > 70){
[Link]("You are Going too Fast !");
else if (speed < 40){
[Link]("You are going too slow !");
else {
[Link]("Your speed is fine ");
function checkSeason(){
var x = [Link]("season").[Link]();
switch(x){
case "summer":
[Link](" It is Summer ");
break;
case "winter":
[Link](" It is Winter ! ");
break;
case "fall":
[Link](" It is Fall ! ");
break;
case "atumm":
[Link](" It is Atumm ! ");
break;
default:
[Link]("I do not recognize this !");
var i = 0;
while(i < 5){
[Link]("myWhile").innerHTML += "<br />" + i;
i++;
function startGame(){
var balance = 1000;
var itemsBought = 0;
while(balance > 0){
var itemPrice = [Link]([Link]()*100);
if(itemPrice <= balance){
itemsBought += 1;
balance -= itemPrice;
[Link]("myWhile").innerHTML += "<P> Purcahse Amount : $" + itemPrice+ " " +
"New Balance : $" + balance + "</p> ";
}
}
[Link]("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) .
[Link]([Link](pattern));
var str = "Millk";
var pattern = /l/g;// we can use her (i)Or (g).
[Link]([Link](pattern));
var str = "Millk";
var pattern = /l/g;// we can use her (i)Or (g).
[Link]([Link](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).
[Link]("string").innerHTML = str;
[Link]("pattern").innerHTML = pattern;
[Link]("search").innerHTML = [Link](pattern);
[Link]("match").innerHTML = [Link](pattern);
[Link]("test").innerHTML = [Link](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){
// [Link]("error").innerHTML = [Link];
//}
function check(){
var password = [Link]("password").value;
var password2 = [Link]("password2").value;
var errorMessage = [Link]("error");
var errorToThrow = "";
try{
if([Link]<6){
errorToThrow += "<br /> Your Password is too short !.";
if(/[A-Z]/[Link](password) == false){
errorToThrow += "<br /> Your Password Should Contain at least one Capital Letter. !.";
if(/\d/[Link](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){
[Link] = 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){
// [Link]("error").innerHTML = [Link];
//}
var counter = [Link]("counter");
var x = 0;
var myCounter = setInterval(function(){x++;[Link] = x},1000);
var delayedwelcomemessage = setTimeout(function(){[Link]("Welcome to our Page !")},3000);
</script>
</body>