Scribd
Upload
43 views

Website Code

The document contains code for various JavaScript concepts including buttons, functions, objects, conditionals, loops, and prototypes. It defines functions to check speed and season, creates objects to represent cars, and includes examples of if/else, switch, for, while loops. JavaScript code is used to manipulate elements on the page and add/update content.

Uploaded by

shaista
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views

Website Code

The document contains code for various JavaScript concepts including buttons, functions, objects, conditionals, loops, and prototypes. It defines functions to check speed and season, creates objects to represent cars, and includes examples of if/else, switch, for, while loops. JavaScript code is used to manipulate elements on the page and add/update content.

Uploaded by

shaista
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

!

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>

You might also like