JavaScript
("JS" for brief) is a full-fledged dynamic programming language that, when applied to an HTML document, can furnish dynamic interactivity on internet sites.
Hello World: Writing Your First JavaScript software:
“Hello World” is a staple of programming publications. The objective of this program is inconspicuous:** output the text “Hello World”. For the reason that of the simplicity of the message and syntax, it is normally the first application taught to newcomers**.
A side note on comments !
To write your comments on one line, we use '//'
- Any text between '//' and the end of the line is ignored by JavaScript and will not be seen by the user on the browser window. These are called single line comments.
- For writing comments on more than one line, we start with '/' and end with '/'.
- Any text between '/' and '/' will be ignored by JavaScript. These are called multi line comments where you can write on more than one line without creating a single line comment every time.
Writing “Hello World” a program in JavaScript, as we will learn, is peculiarly handy and requires not greater than 3 lines of code.
What will you need ?
All you want is:
- A text editor
- An internet browser
Getting started: creating the HTML Framework
We can first, create an easy HTML file the place we can include our JavaScript.
Open your text editor and form the next code into it:
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript Hello World</title>
</head>
<body>
<h1>JavaScript Hello World Example</h1>
</body>
</html>
- Store this file as test.Html (make certain to save lots of as “All files” if using Notepad). This file can now be opened by any browser say google chrome,
I hope this step is clear to everybody even without any prior experience of HTML or any programming whatsoever. This step gives a title "JavaScript Hello World" and in the body it says "JavaScript Hello World Example with an tag which is a header tag
. It will usually be the largest text that stands out on your webpage"
Adding the JavaScript Code:
We will now go ahead and write the JavaScript program.
- Add the next code after the
tag and save the file:
<script>
<alert(“Hello World!”)
<script>
That’s it! You’ve now efficiently created a JavaScript application.
Now use your web browser to open** test.html**. That is what you should see:
Easy, right?
All JavaScript code is written among tags. We use 'alert’ to create a function. The textual content to be displayed is written among quotes in brackets.
However what if we wanted to create a separate “Hello World!” function that we will call anytime?
We are able to do this as well using only some lines of code.
Creating a “hello world” JavaScript function:
Programming 101
A function is any block of code that can be any quantity of instances inside a program. Functions are extremely useful in programming seeing that you can create them as soon as, use them any number of times.
We created a “Hello World!” alert box in the above instance. Now we’ll create a function so that we can create the same alert box whenever we want.
Type within the following code into your text file:
<!DOCTYPE HTML>
<html>
<head>
<script>
function myFunction()
{
alert(“Hello World!”)
}
</script>
</head>
<body>
</body>
</html>
Save this as test2.html.
Instead of adding the script inside the , we added the script to the and created a function referred to as 'hello World’.
You could turn any piece of code into a feature by wrapping it in {} brackets and including “function functionName()” before that.
Now that we’ve created the function, we will call on it any quantity of times.
Add the following code anyywhere among the tags:
<p><button onclick="myFunction()">Create a Dialog Box!</button></p>
<p><button onclick="myFunction()">Create Another Dialog Box!</button></p>
Now open the test2.html file for your internet browser. You will see two buttons which when clicked say hello world!!
Click on either of the 2 buttons and also you’ll see the “Hello World!” dialog box pop up.
Congratulations! You’ve now successfully learnt your first Hello World in JavaScript !
For more such awesome tutorials, wait for updates from Osblog's JavaScript Corner !
Posted on Utopian.io - Rewarding Open Source Contributors