1800 419 9397
Job Oriented Training
Tutorial On Writing The First JavaScript Program
JavaScript is the engine which usually drives the internet. Each and every of our favorite websites usually uses JavaScript in one way or other. Right from checking input to creating alerts and animations, Javascript has various uses on the web page.
It is very important to learn JavaScript to be a front end web developer. It is certainly one of the easiest languages to pick up making it perfect for beginners to start their programming journey. Here is a tutorial teaching you Javascript fundamentals and how to write your first Javascript Program.
Rules of Javascript
Before getting started with Javascript programs, there are certain rules of Javascript one needs to be aware of:
- Javascript is case-sensitive. Because of this please be careful as an error may occur to those who are weak to Javascript. The word Pants and pants are surely completely different.
- There is not concern about white spaces. Usually, white space includes tabs, line breaks within the code. Javascript does ignore white space. The exception is when you are writing a text which you want JavaScript to print on the screen. In this case, the white space will show up in the end result. Well, the best practice as concerned about the white space in the code is to build enough space so that the code is easy to read and consistent to use.
- Check for reserved words. JavaScript usually has a list of words which have special meaning right to the language. That is the reason, be aware of some words like function, while, break or others with special meanings.
- Make use of semicolons as JavaScript likes it. JavaScript code is usually made of statements which are similar to sentences. They are fundamental building blocks of JavaScript programs in the same way sentences are building blocks of paragraphs. The statement usually ends with a semicolon. And if the semicolon is not used at the end of the statement then JavaScript will put it there. If the semicolon is not put at the end of the statement then Javascript will put it there.
Using JavaScript in HTML event attribute
There are several attributes which are designed for triggering JavaScript when anything happens in the web browser or the user does anything. Here is an example of the HTML button with an event attribute which will respond to mouse click events. Like for “Click Here”
<button id="bigButton" onclick="alert('Hello World!');">Click Here</button>
So when the user clicks on button created by this HTML element then a poo up will appear with the words “Hello World!”
Here are some commonly used HTML Event Attributes
| Attribute | Description |
|---|---|
| onload | Runs the script after the pages finishes loading |
| onfocus | Runs the script when the element gets focus (such as when a text box is active) |
| onblur | Runs the script when the element loses focus (such as when the user clicks a new text box in a form) |
| onchange | Runs the script when the value of an element is changed |
| onselect | Runs the script when text has been submitted |
| onsubmit | Runs the script when a form has been submitted |
| onkeydown | Runs the script when a user is pressing a key |
| onkeypress | Runs the script when a user presses a key |
| onkeyup | Runs the script when a user releases a key |
| onclick | Runs the script when a user mouse clicks an element |
| ondrag | Runs the script when an element is dragged |
| ondrop | Runs the script when a dragged element is being dropped |
| onmouseover | Runs the script when a user moves a mouse pointer over an element |
Examples of Javascript in a script element
<!DOCTYPE html>
<html>
<head>
<title>Hello, HTML!</title>
<script>
function countToTen(){
var count = 0;
while (count < 10) {
count++;
document.getElementById("theCount").innerHTML +=count + "<br>";
}
}
Code-Line Before Listing Code </script>
</head>
<body onload="countToTen();">
<h1>Let's Count to 10 with JavaScript!</h1>
<p id="theCount"></p>
</body>
</html>
Limitations of JavaScript in <script> elements
When you are embedding JavaScript into a script element, there are certainly some limitations. The most important limitation is that script are usually embedded in such a way that they can be used only within web pages when they are made live.
In simple words, if you put JavaScript right into script element, then you need to copy and paste the element exactly right into every page where they exist. With some websites, there are many hundreds of web pages so think about the difficulty.
How to include External JavaScript Files
The most popular way for including JavaScript in HTML documents is with the use of SRC attribute of the script element. Very like JavaScript works between tags, script elements with SRC works the same ways except if src attribute is used then JavaScript is loaded right into the HTML document from a separate file. Here is an example.
<script src="myScript.js"></script>
Now take the case, one had to separate file by the name myScript.js, then one would reside right in the same folder as the HTML document. The benefits of using external JavaScript are
- Keeps the HTML files less cluttered and neater
- Make the whole process easier as one place needs to be changed when there us requirement to fix a bug or any minor changes.
We will continue with our Java tutorials in our edition as there are lots to discuss Javascript as it is certainly not easy to master. Keep with us to know about various next update about Java.
Also Read,
