[web] Combining two Javascript Functions

One option is something like this:

<!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>Javascript Practice</title>
</head>
<body>

First name: <input type="text" id="fname" value="First Name" />


Last name: <input type="text" id="lname" value="Last Name" />

<script type="text/javascript">
function blurHandler(element, defaultValue)
{
if(element.value == '')
{
element.value = defaultValue;
}
}

function focusHandler(element, defaultValue)
{
if(element.value == defaultValue)
{
element.value = '';
}
}

function inputHelper(elementId)
{
var element = document.getElementById(elementId);
var defaultValue = element.value;
element.onblur = function() { blurHandler(element, defaultValue); }
element.onfocus = function() { focusHandler(element, defaultValue); }
}

inputHelper('fname');
inputHelper('lname');
</script>
</body>
</html>

I'm not fantastic at Javascript but I think that this, or something close to it, would work.

Thank you so much, the code works perfectly when placed in the body right after the "input fields". I would like to ask, how could i convert that code so it can execute when I place it instead in the "header"? I ask that because I would like to keep all my Javascript code's either in the header or in an external filesheet, so i could separate my HTML code from my Javascript code, just like I do with my CSS code which I have it placed in an external filesheet, thanks I really appreciated the help.

For example:

Instead of placing the Javascript Function in the "body" right after the "input fields"...


<body>

First name: <input type="text" id="fname" value="First Name" />


Last name: <input type="text" id="lname" value="Last Name" />

<script type="text/javascript">
function blurHandler(element, defaultValue)
{
if(element.value == '')
{
element.value = defaultValue;
}
}

function focusHandler(element, defaultValue)
{
if(element.value == defaultValue)
{
element.value = '';
}
}

function inputHelper(elementId)
{
var element = document.getElementById(elementId);
var defaultValue = element.value;
element.onblur = function() { blurHandler(element, defaultValue); }
element.onfocus = function() { focusHandler(element, defaultValue); }
}

inputHelper('fname');
inputHelper('lname');
</script>
</body>


And placing it instead here in the "header", cause I have noticed that the Javascript code only executes when placed in front of the "input fields", but doesn't execute when I place it in the "header".


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Practice</title>

<!--placing the Javascript code here in the header.-->

</head>


Move the

Move the

Just to give the reasoning behind markadrake's answer, read this. Note that one recommendation is to move Javascript to the end of the page, and another is to externalise it.

The only practical reason to move scripts at the end of a page is to ensure all prior DOM elements are downloaded to the browser. However, even though browsers allow it, script tags are supposed to go in the header region. The tags onload event fires after all DOM elements are loaded which ensures the same effect and you can keep a proper, clean mark up document.

Just to give the reasoning behind markadrake's answer, read this. Note that one recommendation is to move Javascript to the end of the page, and another is to externalise it.

You can accomplish the same speed up effect by inserting a small payload of javascript in the header and using onload to dynamically inject javascript into a page. That way, only the markup is initially downloaded and then once the browser has the "page" then to go fetch the scripts for said page. That's essentially what that recommendation means.

We are all recommending the same thing here ;) just 2 ways of doing it. But I'm glad we all agree! I wonder how formula is doing though.

Eh, I lean more toward standards compliance when it comes to web stuff. Sticking

Thank you guys for the help, I have been using the method of putting all my Javascript codes in the "header" and/or in an external Javascript file and placing the onload tag on my body to call up my code before the page finishes loading. I have also started looking at and starting using JQuery and from what I am seeing, it seems to be a lot more simpler than regular Javascript. I find it really simple to create, add, and call functions with less code than using Javascript. A question I have is if JQuery is the exact same thing as Javascript, as in it has all the same functionalities and power of Javascript but written in a slightly different and easier format to understand and implement?

Just like C# (and Java, from what I have read online) was created to be a simpler, yet powerful programming language with an easier learning code, as an alternative to learning C/C++, but having the problem of high memory usage (I dont quite completly understand what that means, but from what i read, I believe it stands for being alot "slower" to execute/load code than C/C++). If that is the case, does JQuery have the same problem as C#? Last thing I want is for my web pages to load up a lot slower than if I use Javascript instead.

I really appreciate you guys helping me out. I have decided to get in to Javascript, PHP, and MySQL since I am in the process of creating a simple Web Application that I have planned out (I have documented the few features that I am trying to implement). This application I have started designing and developing is just for personal learning/training purposes to increase my understanding and skills of Dynamic and Server Side Coding (Javascript, PHP, and MySQL).

I am proficient in using (from 1 to 5, 5 being the best) Photoshop (5), Illustrator (4), FireWorks (5, I use it constantly in combination with Photoshop to create my design and project mock-up works, I personally think that its the best program out there to create mock up (conceptual) looks for projects you will like to create/design lol), Dreamweaver (4), HTML (4) and CSS (4). I am familiar in Flash (3), and well learning Javascript (recently, so a simple 1 or 0 lol), same goes for PHP and MySQL. I have been using the O'Reilly books and w3schools to learn what I know and sort of understand so far. But thank again guys for showing me how to combine two functions, w3schools and the O'Reilly books that I have read so far don't teach you that, less functions = less code, meaning a cleaner and more organized markup. The article you posted "rip-off" it really clarified a lot of information, one of the best articles out there for web developers lol, Thanks. (BTW I apologize for writing so much )

jQuery is written in Javascript - it is a library. It will of course use a little more memory, but shouldn't cause you problems. The main thing to remember is that it is a trade off. If you don't use jQuery you'll have to write a lot more code yourself, and the chances of bugs in that code is a lot higher. It is a very common library, so I don't think there is much cause for concern.

If you are a beginner any performance issues you have will almost certainly be on the server side. One of the most common mistakes would be making poor use of the database - not properly denormalising data, not using indices correctly and doing database work (searching and sorting) in the application layer.

In short, don't worry about get. Get your application to work first, then you can worry about getting it to work fast enough. Premature optimisation is the root of all evil.