Learn Advanced JavaScript Features

If you are a budding web developer, you will need to learn advanced JavaScript features, such as changing the functionality of elements as you interact with them, and passing functions into other functions. In other words, as interacting with the web page evolves, the functionality has to evolve with it.

Breakdown the following JavaScript / jQuery to grasp this concept:

$(“#title”).click(function() {
$(“#title”).html(“Hello”);
$(“#title”).off(“.click”);
});

  • $(“#title”) grabs the element you want to work with.
  • .click changes the onclick function. This allows you to change the interactivity of onclick as your page evolves.
  • (function() passes in an anonymous function. It does not need to have a name, nor does it need arguments.

$(“#title”).html(“Hello”);
$(“#title”).off(“.click”);

  • The code above is what you see inside the curly brackets. These are the arguments of .click. This type of programming would seem very odd to someone with a background in Java, but this is an example of how JavaScript is different from Java.}); These last three pieces of syntax close the function, end the .click arguments, and end the line.

You can put this code in the context of an HTML page as follows:

<head>
<script src=”http://code.jquery.com/jquery-1.11.3.min.js”></script>
</head>

<body>
<h1 id =”title” onclick=”sayGoodbye();”>
Hello
</h1>
</body>

<script type=”text/javascript”>
function sayGoodbye() {
$(“#title”).html(“Goodbye”);
$(“#title”).click(function() {
$(“#title”).html(“Hello”);
$(“#title”).off(“click”);
});
};
</script>

So now, rather than just being able to change the text from ‘Hello’ to ‘Goodbye’, you can keep clicking on the <h1> element to switch back and forth.

While this is a simple example, it gives a nice demonstration of how the interactivity of a page can change, as the user does different things.

If you want a PHP developer job, then JavaScript would be a nice to tool to add to your skill set. It will empower you to build pages that are interactive for the user.

Leave a Reply

Your email address will not be published. Required fields are marked *