How to execute javascript within drupal for a specific field on a specific page? The Initil question
I have a input field which should activate a function on the onfocus javascript event on a field on the user page. 

Step 1 
Add code to a custom module:

(function ($) {
  $(document).ready(totalname(){
    document.getElementById("fullname").style.background = "yellow";
  });
})(jQuery);


The currently HTML is:

&lt;input type="text" id="fullname"&gt;&lt;br&gt;


And it should become like this:

&lt;input type="text" id="fullname" onfocus="totalname()"&gt;&lt;br&gt;


How to get the onfocus=... inside the input element?
Is the custom code ok?

Addition to this question.

Thxs you so much for all the comments. Based on that I learned i few things more so I now understand what the real question should be.

To understand how I can executed javascript code in a certain field on a certain page in drupal. 

I assumed this was needed by a callback but this is not encoured according to @Jimmy so I'm trying to understand the way it should be according to drupal standards. Also I was suprised that no change in HTML was needed as @Adrian gave an example. I could not get it run because of the typo :-( So in mean time I made another solution.

The  script is basicly just a real time concatination of first, middle and last name into a fullname field.

(function ($) {
  $(document).ready(function(){

        function setFullName() {
            var nameParts = [document.getElementById("edit-field-voornaam-und-0-value").value,  
                             document.getElementById("edit-field-tussenvoegsel-und-0-value").value, 
                             document.getElementById("edit-field-achternaam-und-0-value").value],
                name = nameParts.join(" ").trim();

            document.getElementById("edit-field-naam-und-0-value").value = name;
        }

        var fields = [document.getElementById('edit-field-voornaam-und-0-value'), 
                      document.getElementById('edit-field-tussenvoegsel-und-0-value'), 
                      document.getElementById('edit-field-achternaam-und-0-value')];

        for (var i = 0; i &lt; fields.length; i++) {
            fields[i].addEventListener("keyup", setFullName);
        }


  });
})(jQuery);


So this is working and I put it in a custom module. 

I still do not understand how I should be if I rewrite the code following the example of @adrian as this code is still executed on every page and not a specific page.

Thank you for learning !! and not using the correct words. I'm not native english ...
Your jQuery:

//Making a focus over the element
(function ($) {
    $('#fullname').blur(function() {
        $(this).removeClass("color");
      })
      .focus(function() {
        $(this).addClass("color");
      });
})(jQuery);


Your HTML:

&lt;input type="text" id="fullname"&gt;&lt;br&gt;


Your CSS:

.color {
  background-color : yellow;
}


EDIT:
To attach the js code to your page you can use #attached in a renderable array (this is the recommended way). I think that you should read: How to add jQuery UI libraries to a page.