Unlike my PHP and HTML tutorials this tutorial will be different.
Although I know JavaScript I don’t use it often because of a few reasons. So I’m using this „tutorial“ to
1. refresh my knowledge about JavaScript
and
2. teach you the one or the other useful thing.
Let’s begin
For this „tutorial“ you should have some basic understanding about HTML and CSS, later it could be useful to know PHP, but that’s some time later…
To use JavaScript in an HTML document you have 2 methods:
- Using an external JavaScript file.
- Having the JavaScript code right on the page.
Which method you use is up to you but at the end you need to use more or less same technique to include the JavaScript in the HTML page.
To embed a JavaScript you are using:
<script type="text/javascript" src="path/to/file"></script>
The above example is used when you have an external javascript file. Otherwise you will be using this code:
<script type="text/javascript">
<!--
...javascript code...
//-->
</script>
You place this HTML code either in the <head> or <body> part of the page, then you are ready to write your first Javascript script.
Hello World!
We want to write our first script and we want to execute it as soon as the page is loaded. The JavaScript event handler we need for this is onload() although we could also do it in a different way.
Our „hello world“ script will bring up an alert box with the message „Hello world!“:
<script type="text/javascript">
<!--
function hello_world()
{
alert("Hello world!");
}
//-->
</script>
Note: If you are using an external file, just take the javascript inside the html comments and put it into the external file.
We got our first function and now we need to call it somehow. As I said already, we will be using the onload() handler.
To make sure that the code works as intended, you have to put the code in the <head> part of your HTML page.
Now add onload="hello_world();" in the opening body tag. Save the page and load it in a browser.
To have a comparison, try my „Hello world“ alert.
The onload() handler is useful, but is often abused. I recommend you only use it when you have to. Same applies for the alert() message.
Better „Hello World!“
Depending on the amount of your JavaScript code, the page needs longer to load. If you put the code into the head, it will take some time before the visitors see any content of your page. It is recommended to put the JavaScript into the foot part of the body.
If you try it, you will see that onload() will not work, so we have to use a different approach:
<script type="text/javascript">
<!--
function hello_world()
{
alert("Hello world!");
}
window.onload = hello_world();
//-->
</script>
Now the script will be executed after everything on the page is loaded.
Wrap up and some hints
This is all I want to teach you for now. Have a look at w3school’s JavaScript Tutorial if you can’t wait to go on with learning JavaScript. Before you visit this page, please listen to my hints as these are based on my knowledge of coding nice, user-friendly websites:
- Never ever use JavaScript to open PopUps without informing the user before.
- Only use JavaScript if it increases the experience of the website.
- Try to avoid excessive use of JavaScript just because you can do that.
- Don’t use JavaScript to „link“ to another page. It can break the browser history and result in a bad experience of the user.
- Never ever use JavaScript to resize the browser window of the user
- When using JavaScript, make sure that those who disabled JavaScript won’t miss parts of the website someone with JavaScript enabled would be able to see.
I know, if you read this list you will most likely not know how to create the mentioned effects. I suggest you keep this list in mind when I continue with my tutorial because then I will show you some of those things you shouldn’t do just for the purpose of showing it.
I hope you enjoyed this introduction to my JavaScript tutorials. If you want to be informed on the publish of new tutorials, subscribe to my RSS Feed or sign up for the newsletter.