Skip to main content

Posts

Showing posts with the label Javascript

Javascript: Reserved words

Javascript: Reserved words In JavaScript, reserved words are a combination of keywords used for JavaScript and words that are reserved for use in future versions of JavaScript. You must be extremely careful not to use reserved words for the names of variables, functions, methods, or objects. The list of reserved words generally includes 59 different words, we also added a couple that the programmers are not sure about yet. The typical list of 59 reserved words is as follows.

Javascript - Page printing

Javascript - Page printing Many times you want to print the page or print any forms or informations. So this function is very helpful for all the web- programmers. The JavaScript print function window.print() will print the current web page when executed. You can call this function directly using onclick event as follows:

Javascript: Page redirection

Javascript: Page redirection Page redirection is very usefull technique for website development. If a user opens an x page then by using redirection method you can tell to open y page. But still users think they are viewing x page. This is very helpfull in the case when you move your domain name. And when some one enters the same url you can redirect to some other site without actually disturbing the visitors or any interuptions.

Javascript for Loop

The for loop is the most compact form of looping and includes the following three important parts: The loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins.  The test statement which will test if the given condition is true or not. If condition is true then code given inside the loop will be executed otherwise loop will come out.  The iteration statement where you can increase or decrease your counter.

Javascript While Loop

While programming, there might be situation that you need to execute a block of code for a given number of times, in these situation while loop can be used. The while loop executes code while a condition is true. Syntax: while (expression){    Statement(s) to be executed if expression is true }   Example: <!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>Siple Javascript conditions</title> </head> <body> <button onclick="myLoop()">Click Me</button> <script> function myLoop() { var count=0; while(count <=10) { document.write("Number: "+count+"<br/>");    count ++; } } </script> </body> </html>

JavaScript Switch Statement

Use the switch statement to select one of many blocks of code to be executed. Syntax switch(n) { case 1:   execute code block 1   break; case 2:   execute code block 2   break; default:   code to be executed if n is different from case 1 and 2 } Example: var day=new Date().getDay(); switch (day) { case 0:   x="Today it's Sunday";   break; case 1:   x="Today it's Monday";   break; case 2:   x="Today it's Tuesday";   break; case 3:   x="Today it's Wednesday";   break; case 4:   x="Today it's Thursday";   break; case 5:   x="Today it's Friday";   break; case 6:   x="Today it's Saturday";   break; }

Javascript conditional statement

When you need to make program to make decisions, conditional statements are used. In javascript we have following conditional statements:  if statement - use this statement to execute some code only if a specified condition is true if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false  if...else if....else statement (nesting of if else)- use this statement to select one of many blocks of code to be executed switch statement - use this statement to select one of many blocks of code to be executed If Statement: Executes the code if a specific code is true Syntax: if(condition) { code } Example: <!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=u...

Comparison and Logical Operators

Comparison and Logical operators are used to test for true or false. Comparison Operators  Comparison operators are used in logical statements to determine equality or difference between variables or values. Given that x=5, the table below explains the comparison operators: Operator Description Comparing Returns == is equal to x==8 false x==5 true === is exactly equal to (value and type) x==="5" false x===5 true != is not equal x!=8 true !== is not equal (neither value nor type) x!=="5" true x!==5 false > is greater than x>8 false < is less than x<8 true >= is greater than or equal to x>=8 false <= is less than or equal to x<=8 true Logical Operators Logical operators are used to determine the logic between variables or values. Given that x=6 and y=3 , the table below explains the logical operators: Operator Description Example ...

Javascript events

Javascript events Javascript is all about cool stuffs displayed in the website. So here we will learn how these cool stuffs happens in the website. This all are the ability of Javascript which increase the user interaction and flash like features. The building blocks of an interactive web page is the JavaScript event system. An event in JavaScript is something that happens with or on the webpage. A few example of events:     A mouse click     The webpage loading     Mousing over a hot spot on the webpage, also known as hovering     Selecting an input box in an HTML form     A keystroke For example: <html> <head> <script type="text/javascript"> <!-- function popup() {     alert("Wow!! I feel good.") } //--> </script> </head> <body> <input type="button" value="Click Me!" onclick="popup()"><br /> <a href="#" onmouseover="" onMouseout...

Javascript Array

Javascript Array An array is a variable that can store many variables within it. Many programmers have seen arrays in other languages, and they aren't that different in JavaScript. Creating a JavaScript Array Creating an array is slightly different from creating a normal variable. Because JavaScript has variables and properties associated with arrays, you have to use a special function to create a new array. This example shows how you would create a simple array, store values to it, and access these values. JavaScript Code: <script type="text/javascript"> <!-- var myArray = new Array(); myArray[0] = "Football"; myArray[1] = "Baseball"; myArray[2] = "Cricket"; document.write(myArray[0] + myArray[1] + myArray[2]); //--> </script> Output: FootballBaseballCricket JavaScript Array Sorting Imagine that you wanted to sort an array alphabetically before you wrote the array to the browser. Well, this code has already been written...

Javascript popup window

Javascript popup window is the small window which is created by javascript. The syntax for javascript popup window is given below: window.open(url, name, [windowFeatures]) where url: The url of the page to open in the new window. name: A name is the name of the window. windowFeatures: They are the parameters which determines the various features of window to be included in the popup window like status bar, address bar,width,height, etc. The table shows the features and the string tokens you use: status     The status bar at the bottom of the window. toolbar     The standard browser toolbar, with buttons such as Back and Forward. location     The Location entry field where you enter the URL. menubar     The menu bar of the window directories     The standard browser directory buttons, such as What’s New and What’s Cool resizable     Allow/Disallow the user to resize the window....

Javascript: alert box, prompt box and confirm box

Alert box: It displays an alert dialog with a text message and OK button Example: Code: <html> <head> <script type=”text/javascript”> function showAlert() {     alert(“Hey!! This is an alert box”); } </script> </head> <body> <input type=”button” onClick=”showAlert()” value=”Show” /> </body> </html> In above example, only the text Hey!! This is an alert box appears. Prompt Box: Prompt is used to allow a user to enter something, and do something with that value. Code: <html> <head> <script type=”text/javascript”> function showPrompt() {     var name=prompt(“Please enter your name”, “Awaken Nepal”);     if(name!=null && name!=”")     {     document.write(“Hello”+name+”! How are you?”);     } } </script> </head> <body> <input type=”button” onClick=”showPrompt()...

To show/hide any content using javascript

Code: <script language=”javascript”> function showContent() { var ele = document.getElementById(“toggleText”); var text = document.getElementById(“displayText”); if(ele.style.display == “block”) { ele.style.display = “none”; text.innerHTML = “show”; } else { ele.style.display = “block”; text.innerHTML = “hide”; } } </script> <a id=”displayText” href=”javascript:showContent();”>show</a> <== click Here <div id=”toggleText” style=”display: none”><h1>This is hidden content</h1></div> Output: Before link is clicked After link is clicked  

Building calculator using javascript function

Code: <script type=”text/javascript”> function add() { var first=parseInt(document.getElementById(‘first’).value); var second=parseInt(document.getElementById(‘second’).value); var third=document.getElementById(‘answer’); answer.value= first + second; } function subtract() { var first=parseInt(document.getElementById(‘first’).value); var second=parseInt(document.getElementById(‘second’).value); var third=document.getElementById(‘answer’); answer.value= first – second; } function multiply() { var first=parseInt(document.getElementById(‘first’).value); var second=parseInt(document.getElementById(‘second’).value); var third=document.getElementById(‘answer’); answer.value= first * second; } function divide() { var first=parseInt(document.getElementById(‘first’).value); var second=parseInt(document.getElementById(‘second’).value); var third=document.getElementById(‘answer’); answer.value= first / second; } </script> <table width=”250″ border=”...

Javascript Functions

Function is a block of codes that performs certain task. A function contains code that will be executed by an event or by a call to the function. You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external .js file). A function that does not execute when a page loads should be placed inside the head of your HTML document. Creating a function is really quite easy. All you have to do is tell the browser you’re making a function, give the function a name, and then write the JavaScript like normal. HTML & JavaScript Code: <html> <head> <script type=”text/javascript”> <!– function popup() { alert(“Hello World”) } //–> </script> </head> <body> <input type=”button” onclick=”popup()” value=”popup”> </body> </html> Display:

JavaScript Operators

JavaScript Arithmetic Operator Chart Operator English Example + Addition 2 + 4 - Subtraction 6 - 2 * Multiplication 5 * 3 / Division 15 / 3 % Modulus 43 % 10 Modulus % may be a new operation to you, but it's just a special way of saying "finding the remainder". When you perform a division like 15/3 you get 5, exactly. However, if you do 43/10 you get an answer with a decimal, 4.3. 10 goes into 40 four times and then there is a leftover. This leftover is what is returned by the modulus operator. 43 % 10 would equal 3. JavaScript Operator Example with Variables Performing operations on variables that contain values is very common and easy to do. Below is a simple script that performs all the basic arithmetic operations. HTML & JavaScript Code: <body> <script type="text/JavaScript"> <!-- var two = 2 var ten = 10 var linebreak = "<br />" document.write("two plus ten = ") var result = two + te...

JavaScript Variables and Arrays

JavaScript Variables Variables are used to hold data in memory. JavaScript variables are declared with the var keyword. var age; Multiple variables can be declared in a single step. var age, height, weight, gender; After a variable is declared, it can be assigned a value. age = 34; Variable declaration and assignment can be done in a single step. var age = 34; A Loosely-typed Language JavaScript is a loosely-typed language. This means that you do not specify the data type of a variable when declaring it. It also means that a single variable can hold different data types at different times and that JavaScript can change the variable type on the fly. For example, the age variable above is an integer. However, the variable strAge below would be a string (text) because of the quotes. var strAge = "34"; If you were to try to do a math function on strAge (e.g, multiply it by 4), JavaScript would dynamically change it to an integer. Although this is very conven...

JavaScript Basics

Javascript Syntax     JavaScript statements end with semi-colons.     JavaScript is case sensitive.     JavaScript has two forms of comments:   Single-line comments begin with a double slash (//).  Multi-line comments begin with "/*" and end with "*/". Syntax // This is a single-line comment /* This is a multi-line comment. */ Dot Notation In JavaScript, objects can be referenced using dot notation, starting with the highest-level object (i.e, window). Objects can be referred to by name or id or by their position on the page. For example, if there is a form on the page named "loginform", using dot notation you could refer to the form as follows: Syntax window.document.loginform Assuming that loginform is the first form on the page, you could also refer to this way: Syntax window.document.forms[0] A document can have multiple form elements as children. The number in the square brackets ([]) indicates ...