Scribd
Upload
109 views44 pages

Programs

The document contains examples of JavaScript programming concepts including functions, variables, conditionals, and objects. 1) It shows how to define and call functions, pass arguments, and set the value of 'this'. 2) Variables are demonstrated with local and global scope. 3) Conditional logic like if/else statements and switch are provided. 4) Working with objects and their properties is illustrated. The examples help explain basic to advanced JavaScript concepts.

Uploaded by

Ichat Byonic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
109 views44 pages

Programs

The document contains examples of JavaScript programming concepts including functions, variables, conditionals, and objects. 1) It shows how to define and call functions, pass arguments, and set the value of 'this'. 2) Variables are demonstrated with local and global scope. 3) Conditional logic like if/else statements and switch are provided. 4) Working with objects and their properties is illustrated. The examples help explain basic to advanced JavaScript concepts.

Uploaded by

Ichat Byonic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 44

*Programs*

#advanced

1.call

//Calls (executes) a function and sets its this to the provided value, arguments can be passed as they are.

var firstName=

name:"Thomas",

sayHello:function(name)

console.log(name+" "+this.name);

var lastName=

name:"Edison"

firstName.sayHello.call(lastName,"Thomas");

// call ([thisObj, [arg1[, arg2[, [, argN]]]]])

// thisObj [Optional] : The object to be used as the current object.


// arg1, arg2, argN : Optional. A list of arguments to be passed to the method.

2.closure

// A closure is an inner function that has access to the outer (enclosing) function’s variables—scope
chain.

//The closure has three scope chains (its own scope,outer function’s variables,global variables).

function showName(firstName,lastName)

var nameIntro="Your name is :";

// this inner function has access to the outer function's variables, including the parameter.

function makeFullName()

return nameIntro+firstName+" "+lastName;

return makeFullName();

showName("michael","action");

3.global scope

// A global variable has global scope means all scripts and functions on a web page can access it.

var Name="Michel";
getName();

//Here, getName using 'Name' variable is declared in global scope.

function getName()

console.log("My name is "+Name);

4.bind

// If we assign a method that uses “this” to a variable, then “this” will have value of the global data array,
and not the data array of the user object.

//solution is bind() method.

// Example showing binding some parameters

var sum=function(a, b)

return a + b;

};

var add5=sum.bind(null, 5);

console.log(add5(10));

5.local variabel

//Variables declared within a JavaScript function, become LOCAL to the function.


//In following example,'Name' is a LOCAL variable.

function writeName()

var Name = "Michel";

console.log("I am " + Name);

writeName();

6.objects

// A JavaScript object is an unordered collection of variables called named values.

var person = {

firstname : "Bob",

lastname : "Marley",

age : 50

};

console.log("Your name is "+person.firstname+" "+person.lastname+".Age is "+person.age);

7.this

//this keyword gets the value of the object that invokes the function where this is used.

var person={

firstName:"Harry",

lastName:"Edison",

fullName:function()

{
console.log(this.firstName + " " + this.lastName);

console.log(person.firstName + " " + person.lastName);

person.fullName();

8.this in global scope

var firstName = "Harry",

lastName = "Edison";

function showFullName ()

//"this" inside this function will have the value of the window object

console.log (this.firstName + " " + this.lastName);

var person =

firstName :"Mary",

lastName :"Thomas",

showFullName : function ()
{

//"this" on the line below refers to the person object, because

//the showFullName function will be invoked by person object.

console.log (this.firstName + " " + this.lastName);

showFullName (); // Harry Edison

window.showFullName (); // Harry Edison

person.showFullName (); // Mary Thomas

#basic

1.calling function

<!DOCTYPE html>

<html>

<body>

<h1>Calling a function</h1>

<p id="myPar">I am a paragraph.</p>

<div id="myDiv">I am a div.</div>

<p>

<button type="button" onclick="myFunction()">Change</button>


</p>

<script>

function myFunction() {

document.getElementById("myPar").innerHTML = "Hello";

document.getElementById("myDiv").innerHTML = "How are you?";

</script>

<p>When you click on "Change", the two elements will change.</p>

</body>

</html>

2.apply

// The apply() method allows to borrow functions /switch the context and set the this value in function
invocation.

// It allows an object to use another object's.method for its own designs.

var person=

firstName :"Harry",

lastName :"Edison",

showFullName :function()

//The "context"

console.log(this.firstName + " " + this.lastName);


}

};

//when we invoke showFullName() on the person object, the context becomes person object.

person.showFullName(); //Harry Edison

//another object

var anotherPerson=

firstName :"Mary",

lastName :"Thomas"

};

//By using apply() method, "this" gets the value of whichever object invokes the "this" function

person.showFullName.apply(anotherPerson);//Mary Thomas

//So the context is now anotherPerson

3.change html elements

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Change HTML</h1>

<p id="demo">This is a para.</p>


<script>

document.getElementById("demo").innerHTML = "Changed Para.";

</script>

</body>

</html>

4.hello world

<html>

<body>

<script>

document.write("Hello World");

</script>

</body>

</html>

5.Multiline commens

<!DOCTYPE html>

<html>

<body>

<h1 id="myHeader"></h1>
<p id="myPara"></p>

<script>

/*

document.getElementById("myHeader").innerHTML = "Welcome to JavaScript";

document.getElementById("myPara").innerHTML = "This is a paragraph.";

*/

</script>

<p>

<strong>Note:</strong> The comments are not executed.

</p>

</body>

</html>

6.singleline commens

<!DOCTYPE html>

<html>

<body>

<h1 id="myHeader"></h1>

<p id="myPara"></p>
<script>

// Write to a heading:

document.getElementById("myHeader").innerHTML = "Welcome to JavaScript";

// Write to a paragraph:

document.getElementById("myPara").innerHTML = "This is a paragraph.";

</script>

<p>

<strong>Note:</strong> The comments are not executed.

</p>

</body>

</html>

7.using a variable

<!DOCTYPE html>

<html>

<body>

<script>

var firstname;

firstname = "Goku";

document.write(firstname);
document.write("<br>");

firstname = "Krillin";

document.write(firstname);

</script>

<p>The script above declares a variable, assigns a value to it,

displays the value, changes the value, and displays the value again.</p>

</body>

</html>

8.writting to the document

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Example</h1>

<script>

document.write("<p>This is a paragraph</p>");

</script>

</body>

</html>
#conditional

1.if else example

<!DOCTYPE html>

<html>

<body>

<p>

If time is less than 16 it will show "Have a nice day".

<br />

else it will show "Good night".

</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>

function myFunction() {

var x = "";

var time = new Date().getHours();

if (time < 16) {


x = "Have a nice day";

} else {

x = "Good night";

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

2.if example

<!DOCTYPE html>

<html>

<body>

<p>

Click the button to get a "Have a nice day" greeting if the time is

less than 21:00.

<br />

If the time is greater than 21:00 the greeting

will not be displayed.


</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>

function myFunction() {

var x = "";

var time = new Date().getHours();

if (time < 21) {

x = "Have a nice day";

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>
3.switch statement

<!DOCTYPE html>

<html>

<body>

<p>Click the button to display what day it is today.</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>

function myFunction() {

var x;

var d = new Date().getDay();

switch (d) {

case 0:

x = "Today is Sunday";

break;

case 1:

x = "Today is Monday";

break;

case 2:
x = "Today is Tuesday";

break;

case 3:

x = "Today is Wednesday";

break;

case 4:

x = "Today is Thursday";

break;

case 5:

x = "Today is Friday";

break;

case 6:

x = "Today is Saturday";

break;

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

#error handling

1.oneerror event example


<!DOCTYPE html>

<html>

<head>

<script>

onerror = handleErr;

var txt = "";

function handleErr(msg, url, l) {

txt = "There was an error on this page.\n\n";

txt += "Error: " + msg + "\n";

txt += "URL: " + url + "\n";

txt += "Line: " + l + "\n\n";

txt += "Click OK to continue.\n\n";

alert(txt);

return true;

function message() {

alertMe("Welcome guest!");

}
</script>

</head>

<body>

<input type="button" value="View message" onclick="message()" />

</body>

</html>

2.try catch example

<!DOCTYPE html>

<html>

<head>

<script>

var txt = "";

function message() {

try {

alertMe("Welcome guest!");

} catch (err) {

txt = "There was an error on this page.\n\n";

txt += "Error description: " + err.message + "\n\n";


txt += "Click OK to continue.\n\n";

alert(txt);

</script>

</head>

<body>

<input type="button" value="View message" onclick="message()" />

</body>

</html>

3.try catch with confirm box

<!DOCTYPE html>

<html>

<head>

<script>

var txt = "";

function message() {

try {

adddlert("Welcome guest!");
} catch (err) {

txt = "There was an error on this page.\n\n";

txt += "Click OK to continue viewing this page,\n";

txt += "or Cancel to return to the home page.\n\n";

if (!confirm(txt)) {

//action on confirm

</script>

</head>

<body>

<input type="button" value="View message" onclick="message()" />

</body>

</html>

#function

1.function that returns velue

<!DOCTYPE html>

<html>
<head>

<script>

function myFunction() {

return ("Hello world!");

</script>

</head>

<body>

<script>

document.write(myFunction())

</script>

</body>

</html>

2.function with argument and return velue

<!DOCTYPE html>

<html>

<body>

<p>This example calls a function which performs a calculation, and

returns the result:</p>


<p id="demo"></p>

<script>

function myFunction(a, b) {

return a * b;

document.getElementById("demo").innerHTML = myFunction(4, 5);

</script>

</body>

</html>

3.function with one argument

<!DOCTYPE html>

<html>

<head>

<script>

function myfunction(txt) {

alert(txt);

</script>
</head>

<body>

<form>

<input type="button" onclick="myfunction('Good Morning!')"

value="It's Morning"> <input type="button"

onclick="myfunction('Good Evening!')" value="It's Evening">

</form>

<p>When you click on one of the buttons, a function will be called.

The function will alert the argument that is passed to it.</p>

</body>

</html>

4.function with two argument

<!DOCTYPE html>

<html>

<body>

<p>Click the button to call a function with arguments</p>

<button onclick="myFunction('Goku','Saiyan')">Click me</button>

<script>

function myFunction(name, job) {


alert("Welcome " + name + ", the " + job + "!!");

</script>

</body>

</html>

#loop

1.break statement

<!DOCTYPE html>

<html>

<body>

<p>Click the button to do a loop with a break.</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>

function myFunction() {

var x = "", i = 0;

for (i = 0; i < 10; i++) {


if (i == 3) {

break;

x = x + "number = " + i + "<br>";

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

2.continue statement

<!DOCTYPE html>

<html>

<body>

<p>Click the button to do a loop which will skip the step where i =

3.</p>

<button onclick="myFunction()">Click me</button>


<p id="demo"></p>

<script>

function myFunction() {

var x = "", i = 0;

for (i = 0; i < 10; i++) {

if (i == 3) {

continue;

x = x + "number = " + i + "<br>";

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

3.do while loop


<!DOCTYPE html>

<html>

<body>

<p>

Click the button to loop through a block of as long as <em>i</em> is

less than 5.

</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>

function myFunction() {

var x = "", i = 0;

do {

x = x + "number = " + i + "<br>";

i++;

} while (i < 5)

document.getElementById("demo").innerHTML = x;

}
</script>

</body>

</html>

4.for in loop/enhanced for loop

<!DOCTYPE html>

<html>

<body>

<p id="demo"></p>

<script>

var txt = "";

var person = {

fname : "John",

lname : "Doe",

age : 20

};

for ( var x in person) {

txt = txt + " " + person[x];

}
document.getElementById("demo").innerHTML = txt;

</script>

</body>

</html>

5.for loop with array

<!DOCTYPE html>

<html>

<body>

<script>

fruits = [ "Apple", "Mango", "Banana", "Grapes" ];

for (var i = 0; i < fruits.length; i++) {

document.write(fruits[i] + "<br>");

</script>

</body>

</html>

6.looping through html headers

<!DOCTYPE html>

<html>

<body>
<p>Click the button to loop from 1 to 6, to make HTML headings.</p>

<button onclick="myFunction()">Click me</button>

<div id="demo"></div>

<script>

function myFunction() {

var x = "", i;

for (i = 1; i <= 6; i++) {

x = x + "<h" + i + ">Heading " + i + "</h" + i + ">";

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

7.simple for loop

<!DOCTYPE html>

<html>
<body>

<p id="demo"></p>

<script>

var x = "";

for (var i = 0; i < 5; i++) {

x = x + "number = " + i + "<br>";

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

8.while loop

<!DOCTYPE html>

<html>

<body>

<p id="demo"></p>
<script>

var x = "", i = 0;

while (i < 5) {

x = x + "number = " + i + "<br>";

i++;

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

#numbers

1.fibonnaci

<html>

<body>

<script type="text/javascript">

var a = 0, b = 1, c = 0;

document.write("Fibonacci Series<br/>");

while (b <= 20) {


document.write(c);

document.write("<br/>");

c = a + b;

a = b;

b = c;

</script>

</body>

</html>

2.leap year

<html>

<body>

Enter Year: <input type="number" id="year"/> <br><br>

<input type="button" onclick="leapYear()" value="Check"/> <br><br>

Result : <h3 id="res"> </h3>

<script>

function leapYear()

{
var yr=document.getElementById('year').value;

x = (yr % 100 === 0) ? (yr % 400 === 0) : (yr % 4 === 0);

if(x==true)

document.getElementById('res').innerHTML="Leap Year";

else{

document.getElementById('res').innerHTML="Not a Leap Year";

</script>

</body>

</html>

3.palindrome

<html>

<body>

<script type="text/javascript">

function Palindrome() {

var revStr = "";

var str = document.getElementById("str").value;

var i = str.length;
for (var j = i; j >= 0; j--) {

revStr = revStr + str.charAt(j);

if (str == "") {

alert("Please Enter a number or some text");

else if (str == revStr) {

alert(str + " is Palindrome");

} else {

alert(str + " is not a Palindrome");

</script>

<form>
Enter a String/Number: <input type="text" id="str" name="string" /><br />

<input type="button" value="Check" onclick="Palindrome();" />

</form>

</body>

</html>

4.prime number

function Prime(max)

var temp = [], i, j, primes = [];

for (i = 2; i <= max; ++i)

if (!temp[i])

// i has not been marked -- it is prime

primes.push(i);

for (j = i << 1; j <= max; j += i)

temp[j] = true;

return primes;

}
Prime(50);

5.random numbers

//Math.floor(Math.random() * end_number) + start_number

Math.floor(Math.random() * 10) + 1

6.swap numbers with two variables only

<html>

<body>

<script>

a=10;

b=15;

document.write("Values before swipe :<br>");

document.write("a="+a+" and b="+b+"<br>");

//------Method 1 Using add and subtract -----

a=a+b;

b=a-b;

a=a-b;

document.write("---- Using Method 1 ----<br>");

document.write("a="+a+" and b="+b+"<br>");


//------Method 2 Using XOR operation------

a=10;

b=15;

a=a^b;

b=a^b;

a=a^b;

document.write("---- Using Method 2 ----<br>");

document.write("a="+a+" and b="+b+"<br>");

//-----Method 3 Using Multiplication and division----

a=10;

b=15;

a=a*b;

b=a/b;

a=a/b;

document.write("---- Using Method 3 ----<br>");

document.write("a="+a+" and b="+b+"<br>");

//-----Method 4 Using formula a=b-a+(b=a) -----

/*

Working of Formula :
Browser first evaluates (b=a) expression based on BODMAS rule

then b-a expression

So a=15-10+(10)=15 and b=10

*/

a=10;

b=15;

a=b-a+(b=a) ;

document.write("---- Using Method 4 ----<br>");

document.write("a="+a+" and b="+b+"<br>");

</script>

</body>

</html>

#popup

1.alert example

<!DOCTYPE html>

<html>

<body>

<p>Click the button to display an alert box.</p>


<button onclick="myFunction()">Click me</button>

<script>

function myFunction() {

alert("I am an alert box!");

</script>

</body>

</html>

2.alert with line breaks

<!DOCTYPE html>

<html>

<body>

<p>Click the button to demonstrate line-breaks in a popup box.</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>

function myFunction() {
alert("Hello\nHow are you?");

</script>

</body>

</html>

3.confirm example

<!DOCTYPE html>

<html>

<body>

<p>Click the button to display a confirm box.</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>

function myFunction() {

var x;

var r = confirm("Press a button!");


if (r == true) {

x = "You pressed OK!";

} else {

x = "You pressed Cancel!";

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

4.promt example

<!DOCTYPE html>

<html>

<body>

<p>Click the button to demonstrate the prompt box.</p>

<button onclick="myFunction()">Click me</button>


<p id="demo"></p>

<script>

function myFunction() {

var x;

var person = prompt("Please enter your name", "BatMan");

if (person != null) {

x = "Hello " + person + "! How are you today?";

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

You might also like