JSP, Tomcat, JDBC, Projects, Example, Program » JavaScript http://www.easywayserver.com/blog Just another WordPress weblog Sat, 04 Jun 2011 05:32:48 +0000 http://wordpress.org/?v=2.8 en hourly 1 How to use JavaScript in HTML page http://www.easywayserver.com/blog/how-to-use-javascript-in-html-page/ http://www.easywayserver.com/blog/how-to-use-javascript-in-html-page/#comments Thu, 16 Apr 2009 06:24:17 +0000 admin http://www.easywayserver.com/blog/?p=78

JavaScript is a dynamic programming language. It can use for dynamic content. JavaScript can use with html page inside <body> tag and inside of <script> tag in <head> tags.

JavaScript code can be written on separate JS file. This JS file can be included in html page. It is a good practice of programming to keep everything separate. In JavaScript, we can make functions and global code. Functions can be fired by explicit events. These events are onClick, onFocus, onBlur onMouseOver.

Important thing is JavaScript and HTML both execute at browser. Output will come at same time.

We are going to add JavaScript code. See how to use JavaScript in HTML page by example.

1. Where can add JavaScript

2. Run JavaScript code automatically

3. Display text string in JavaScript.

Where to add JavaScript

Head tags with code

<html>
<head>
<title>How to use JavaScript in HTML page </title>
<script>
function alertMe()
{
    alert("This is javascript code");
}
</script>

</head>

Include JS file

<html>
<head>
<title>Include JavaScript in HTML page </title>
<script src="include.js"></script>

</head>

Code in body tag

</head>

<body>
<script>
   var str="This is javascript variable";
   alert(str);
</script>
</body>
</html>

Run JavaScript code automatically

JavaScript code inside body tag run automatically 

<html>
<head>
<title>Run JavaScript code automatically</title>
</head>

<body>
<script>
   var str="This is javascript variable";
   alert(str);
</script>
</body>
</html>

Display text string in JavaScript

<html>
<head>
<title>Display JavaScript code</title>
</head>

<body>
<script>
   var str="This is javascript variable";
   document.write(str);
</script>
</body>
</html>
]]> http://www.easywayserver.com/blog/how-to-use-javascript-in-html-page/feed/ 1 How to Submit a Form Using JavaScript http://www.easywayserver.com/blog/how-to-submit-a-form-using-javascript/ http://www.easywayserver.com/blog/how-to-submit-a-form-using-javascript/#comments Mon, 13 Apr 2009 11:20:08 +0000 admin http://www.easywayserver.com/blog/?p=75

Form can be submitted by submit button. If you are looking to submit form with explicit function, JavaScript can help you in submitting form with submit function.

Before using submit function you need a form in webpage.

This javascript submit function can call by any event of html tag. This can be onclick of anchor tag, button tag.

Submit function

document.formName.submit();

Can call from any attribute

<a href=”javascript:goSubmit()” >Submit form </a >

Or can be

<input type=”button” name=”btn” value=”Submit” onClick=”goSubmit()”>

Full example code

<html>
<head>
<title>Submit form using javascript</title>
<script>
function goSubmit()
{
  document.frm.submit();
}
</script>
</head>

<body>
<form name="frm">
 <a href="javascript:goSubmit()">Submit form </a>
 <br>
 <input type="button" name="btn" value="Submit" onClick="goSubmit()">
</form>
</body>
</html>
]]> http://www.easywayserver.com/blog/how-to-submit-a-form-using-javascript/feed/ 1 Calling JavaScript href http://www.easywayserver.com/blog/calling-javascript-href/ http://www.easywayserver.com/blog/calling-javascript-href/#comments Mon, 13 Apr 2009 07:22:03 +0000 admin http://www.easywayserver.com/blog/?p=74

JavaScript function and code can be executed from href event of anchor tag. Instead of passing URL of page we can pass JavaScript function in href attribute. The page will not submit to any other page, if you are using JavaScript in href. We will show you how to use JavaScript in href and calling JavaScript in href.

It will remain an interactive input for user and user can do function according to their need. We don't need to make button or submit button to execute JavaScript functions. It is easier to do interact with user.

We have to add javascript: before calling function of JavaScript.

<a href=”javascript:callHref()” >Calling JavaScript Href </a >

Full example

<html>
<head>
<title>Calling JavaScript Href</title>
<script>
function callHref()
{
  alert("Function is called from Href");
}
</script>
</head>

<body>
<a href="javascript:callHref()">Calling JavaScript Href </a>
</body>
</html>

Demo

]]> http://www.easywayserver.com/blog/calling-javascript-href/feed/ 0 JavaScript – Get URL http://www.easywayserver.com/blog/javascript-get-url/ http://www.easywayserver.com/blog/javascript-get-url/#comments Fri, 10 Apr 2009 07:18:10 +0000 admin http://www.easywayserver.com/blog/?p=71

JavaScript can get full URL of webpage. Server side script is not required if you are looking for URL of browser. JavaScript have function to get full URL with location object.

window.location object return full path of webpage opened on web browser and manipulate with split function.

Location object returns with host name, port, protocol (http or https), file name and query string with variable name and value in escaped string.

URL string can further use for making new URL or modification of URL with split array and href of location object.

window.location

 

window.location.href

full example code

<html>
<head>
<title>Javascript get url</title>
</head>

<body>
<script>
document.write(document.location.href)
</script>
</body>
</html>

Demo

 
  
 

]]> http://www.easywayserver.com/blog/javascript-get-url/feed/ 0 JavaScript – Focus function http://www.easywayserver.com/blog/javascript-focus-function/ http://www.easywayserver.com/blog/javascript-focus-function/#comments Fri, 10 Apr 2009 05:47:38 +0000 admin http://www.easywayserver.com/blog/?p=70

Focus will keep object to ready for work. If you loose focus from object you cannot do work on that object. We can work on only active object. To activate object we need focus on that. JavaScript focus function solves our problem. Focus on text field keeps the cursor inside text field and we can start writing in the field.

If we want to select text and copy text, focus should be on that window. Window can be focused by focus function.

Focus function helps to focus on almost all input field (Select, password, radio button, checkbox) and user does not need to use mouse. Only keyword will do all input and submit the form.

document.formName.fieldName.focus();

 

window.focus();

Full example 

<html>
<head>
<title>Javascript focus</title>
<script>
function getFocus()
{
 document.frm.fieldName.focus();
}
</script>
</head>

<body>
<form name="frm">

 <input type="text" name="fieldName" />

</form>

<script>getFocus()</script>

</body>
</html>
]]> http://www.easywayserver.com/blog/javascript-focus-function/feed/ 0 Calling parent child function in frame http://www.easywayserver.com/blog/calling-parent-child-function-in-frame/ http://www.easywayserver.com/blog/calling-parent-child-function-in-frame/#comments Thu, 09 Apr 2009 06:14:29 +0000 admin http://www.easywayserver.com/blog/?p=68

Frame is partition of window into many windows. It is useful when we want to keep things separate from other windows. Frame helps us to include header or footer or menu navigator in left or right side.

Everything works fine if we don't have work with one frame to other frame. It is not possible that frame is not linked with other frames. So we need to interact with other frames with JavaScript function.

Every frame is parent or child of parent. Every frame has own id and frame name which differentiate one frame to other frames. We denote frame as child or parent. This makes it easy to access other frame from frame to frame.

Let's take an example we have three frames

one is left frame

second is top frame

third is main frame

left frame name=”leftFrame”

top frame name=”topFrame”

main frame name=”mainFrame”

We have a javascript function in child parent in main frame.

Syntax of calling frame function

parent.frameName.functionName()

We want to call this function from top frame.

parent.mainFrame.callFunctionMain();

If you want to call function of top frame from main frame

parent.topFrame.callIt();

full code example 

<html>
<head>
<title>Main Frame</title>
</head>

<frameset rows="*" cols="80,*" frameborder="yes" border="1">

  <frame src="left.html" name="leftFrame" id="leftFrame"  />

  <frameset rows="80,*" frameborder="yes" border="1" >
    <frame src="top.html" name="topFrame"  id="topFrame"  />
    <frame src="main.html" name="mainFrame" id="mainFrame"  />
  </frameset>

</frameset>
</html>

left.html

<html>
<head>
<title>left Frame</title>
</head>

<body>
This is left Frame
</body>
</html>

top.html

<html>
<head>
<title>top Frame</title>
<script>
function callIt()
{
  alert("This is function calling");
}

function callMainParent()
{
  parent.mainFrame.callMain();
}
</script>
</head>

<body>
This is top frame

 <a href="javascript:callMainParent()">Call main frame function</a>
</body>
</html>

main.html

<html>
<head>
<title>Main Frame</title>
<script>
function callParent()
{
 parent.topFrame.callIt();
}

function callMain()
{
alert("This is main frame function");
}

</script>
</head>

<body>
This is main frame

 <a href="javascript:callParent()">Call top frame function</a>
</body>
</html>

Demo

]]> http://www.easywayserver.com/blog/calling-parent-child-function-in-frame/feed/ 0 JavaScript – getElementsByTagName http://www.easywayserver.com/blog/javascript-getelementsbytagname/ http://www.easywayserver.com/blog/javascript-getelementsbytagname/#comments Wed, 08 Apr 2009 06:26:57 +0000 admin http://www.easywayserver.com/blog/?p=66

getElementsByTagName is used to get tag information in document.

This is in form of collection and array of tags. We can work with individual tag of HTML in webpage with getElementsByTagName method.

We will show you to how to use this method in webpage

We can get value inside of tag with particular single tag.

document.getElementsByTagName("p").item(0).innerHTML

This will pick first item tag of paragraph with numeric value and get innerHTML of this p tag.

document.getElementsByTagName("p").length

This will return the number of p tags in full document, if you are using 5 paragraph tags inside document. It will return 5.

document.getElementsByTagName("p").namedItem("pID")

This will work with individual element id, and get the property of element. We can get style property, font property

document.getElementsByTagName("p").namedItem("pID").style.background

 

document.getElementsByTagName("p").namedItem("pID").style.font

Full code example

<html>
<head>
<title>getElementsByTagName Javascript</title>
<script>
function getElementFtn()
{
 alert(document.getElementsByTagName("p").item(0).innerHTML)
}
</script>
</head>

<body>
<p>this is first tag</p>

<p>this is second</p>

<p id="pID">this is third tag</p>

<p>this is forth tag</p>

<p>this is fifth tag</p>

<a href="javascript:getElementFtn()">check this element</a>
</body>
</html>
]]> http://www.easywayserver.com/blog/javascript-getelementsbytagname/feed/ 0 JavaScript – Redirect http://www.easywayserver.com/blog/javascript-redirect/ http://www.easywayserver.com/blog/javascript-redirect/#comments Tue, 07 Apr 2009 09:03:37 +0000 admin http://www.easywayserver.com/blog/?p=62

If you want to redirect web page to another, javascript have simple function for it. Sometimes we need to redirect user to another web page to achieve our goal. We can do this in JavaScript by location function.

Just we need to call this function to redirect our page by firing events. This redirection will be client side and execute on user machine.

Redirecting page in JavaScript can be done by three functions

window.location ="http://www.yahoo.com";

 

window.location.href="http://www.yahoo.com";

 

window.location.replace("http://www.yahoo.com");

location.replace functions will not create entry in history, it just simply edit location with new location URL. This means you cannot go back if you use location replace function.

Full code in html

<html>
<head>
<title>Javascript redirect</title>
<script>
function redirectJS()
{
 //window.location="http://www.yahoo.com";
 // window.location.href="http://www.yahoo.com";
 window.location.replace("http://www.yahoo.com"); //not create entry in history
}
</script>
</head>

<body>
<a href="javascript:redirectJS()">Redirect in Javascript</a>
</body>
</html>

Demo

]]> http://www.easywayserver.com/blog/javascript-redirect/feed/ 0 JavaScript – Submit is not a function http://www.easywayserver.com/blog/javascript-%e2%80%93-submit-is-not-a-function/ http://www.easywayserver.com/blog/javascript-%e2%80%93-submit-is-not-a-function/#comments Mon, 06 Apr 2009 11:11:36 +0000 admin http://www.easywayserver.com/blog/?p=60

Sometimes we need to submit web form by JavaScript, and need to use submit function of JavaScript. Suddenly we get an error of “submit is not a function”, we could not understand. Everyone knows that submit is a function in JavaScript. Many of times we have used in web form.

You have to keep your mind cool and find out what is the real problem why submit is not working.

Most of the time when submit is not working because of confliction of two same name of submit property in web page.

We use submit button in input type and put same name in button as submit

Example of wrong button name

<input type="submit" name="submit" value="Submit" />

Correct button name

<input type="submit" name="goSubmit" value="Submit" />

Check above button name in your webpage. Is submit name is used in submit button, if yes. Both name function name and button name will conflict with each other.

Simple change button name with other name instead of using submit name. This will solve the error of submit is not a function.

Mostly we do code like this

<html>
<head>
<title>Javascript submit is not a function</title>
<script>
function goSubmit()
{
  document.frm.submit();
}
</script>
</head>

<body>
<form name="frm">
<a href="javascript:goSubmit()">Submit form Error if you use this</a>

<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>

Demo

]]> http://www.easywayserver.com/blog/javascript-%e2%80%93-submit-is-not-a-function/feed/ 1 JavaScript – close window http://www.easywayserver.com/blog/javascript-close-window/ http://www.easywayserver.com/blog/javascript-close-window/#comments Mon, 06 Apr 2009 07:27:15 +0000 admin http://www.easywayserver.com/blog/?p=58

JavaScript allow us to close window with inbuilt functions.

This is easier for user to close window with just pressing link or button. User doesn't have to go through browser file close option. This will work with pop up window of browser.

Javascript have function to close window

window.close()

self.close()

This function closes window which is opened.

The example of closing window is given where you can test how it works.

<html>
<head>
<title>Javascript close window</title>
</head>

<body>
<input type="button" name="btn" value="Close" onclick="window.close()" />
</body>
</html>

Demo

 
  
 

]]> http://www.easywayserver.com/blog/javascript-close-window/feed/ 0