Javascript: Setting up the PC environment

This entry is part 1 of 27 in the series Javascript Tutorial

Javascript is a client side scripting language.

You only need a web server and a browser to run it in your own PC.

  1. First download Apache web server from this link, a Windows version of Apache.
  2. Install it to your PC.
  3. In your start menu, look for Apache server and click on start to start Apache server.
  4. In the task menu, look for an Icon with a green arrow.  Right click on it and click on Open Apache Monitor.
  5. apache
  6. From here, you can see that Apache is started.
  7. In the browser address box, type localhost.
  8. localhost
  9. A message will be shown saying that Apache server is properly installed.

 

Javascript: A good editor is needed

This entry is part 2 of 27 in the series Javascript Tutorial

Many Javascript related sites will tell you that you only need a notepad to write Javascript.

However, if you are new to coding Javascript or learning any other programming language, I would like to suggest that you invest in a good Javascript editor.

The main reason is that as a new developer, you will need an editor that supports Intellisense.

Intellisense is a context-aware code completion feature in the editor that speeds up the process of coding applications.

I have been using WebStorm Javascript editor and you can download a copy of it and try it out for a month.

webstorm

 

Javascript: Using Netbeans

This entry is part 3 of 27 in the series Javascript Tutorial

If you are not ready to purchase a copy of Webstorms from Jetbrains, you can always use Netbeans.

Netbeans has been supporting HTML5 development since version 7.2.

1.  The first thing that you need to do is to download the bundle that support HTML5/Javascript.  Try to download the all bundle version instead.

2.  If you are using Chrome, you need also to download a Netbeans connector.

3.  Netbeans connector provides integration between Netbeans IDE and Google Chrome browser.

4.

netbeansconnector

5. From Chrome, navigate to the link above and click on Add to Chrome.

6. Since you are having a full bundle version, it should support HTML5/Javascript.

7.  Launch Chrome

8.  html51

9.  As shown in the screenshot above, click on HTML5 and HTML5 Application.  Click on Next.

10. After clicking next, you should see the screenshot below.

html52

11.  Simply click on Next.

12.

html53

13.  In the step to select site template, click on No Site Template.

14.  Next, you might not need jQuery now but let’s add jQuery to it.

15.

html55

 

16.  A template with the following screenshot will be created.

17.  html56

 

18.  Now click on the green arrow button to run it.

html57

19.  The Chrome browser will be loaded as shown in the following screenshot.

20.

html58

Javascript: First example

This entry is part 4 of 27 in the series Javascript Tutorial

We will work on our first example.

<!DOCTYPE html>
<html>
    <head>
        <title>First Program</title>        
    </head>
    <body>
        <h1>First JavaScript Program</h1>
        <p>Click the button to change the sentence</p>
        <p id="first">First Program</p>
        <button type="button" onclick="myFunction()">Try it</button>
        <script>
            function myFunction() {
                document.getElementById("first").innerHTML = "This is my first Javascript program";
            }
        </script>
    </body>
</html>

button

Using Webstorm editor, grab the code above and paste it into index.html.

Save the file index.html into htdocs directory inside Apache.  For my case, it is d:\Apache2.2\htdocs.

first

The htdocs directory is actually the Apache default web directory.

Now open the chrome browser and type into the URL box localhost.

first1

Javascript: First example explanations

This entry is part 5 of 27 in the series Javascript Tutorial

<!DOCTYPE html>
<html>
 <body>
 <h1>First JavaScript Program</h1>
 <p>Click the button to change the sentence</p>
 <p id="first">First Program</p>
 <button type="button" onclick="myFunction()">Try it</button>
 <script>
       function myFunction() {
       document.getElementById("first").innerHTML = "This is my first 
                Javascript program";
 }
 </script>
 </body>
</html>

button

In this example, we first look at this line:

<p id="first">First Program</p>

<p> is a HTML element denoting paragraph and it is using id=”first” to identify this paragraph.

To change the text “First Program” in this paragraph, let’s look at this:

 <script>
       function myFunction() {
       document.getElementById("first").innerHTML = "This is my first 
                Javascript program";
 }
 </script>

The

document.getElementById("first").innerHTML = "This is my first 
                Javascript program";

will change the text inside the paragraph to the new text.