Introduction to JavaScript for Those With Impostor Syndrome
Tags: javascript, newbie, beginners, webdev
Published: 2020-03-02 19:19:36

Before you begin, I want to assure you that JavaScript is a really simple language you will ever learn. With the basics I will be covering in the course of your learning, you will become an expert JavaScript programmer if you stick to these basics.

JavaSript is a high-level, client-side scripting language that runs on the browser (client). It has been standardized by the ECMAScript language specifications. It turns out is one language you have to learn if you wish to be great at web development.

## Setting up our Development Environment
For now, we need just two (2) basic tools to start writing JavaScript. Feel free to skip this part if you already have this tools setup on your computer.

1. Code Editor
2. Browser

For the Code Editor, I prefer to use *[VS Code](https://code.visualstudio.com/download)* but they are many out there you can try your hands on depending on your preference.

Also, I enjoying using *[Chrome](https://www.google.com/chrome)* for testing and debugging my JavaScript application. You can also try *[Firefox](https://www.mozilla.org/en-US/firefox/new)*, *[Microsoft Edge](https://www.microsoft.com/en-us/edge)*.

JavaScript is executed on your browser through a JavaScript Engine. On Chrome it is called **V8 Engine** which is also the engine of the popular Node.js you might have heard about, on Firefox it is known as **SpiderMonkey**, Microsoft Edge has **Chakra/Chakra Core** while Apple Safari engine is **JavaSCript Core**. Just keep this at the back of your mind that JavaScript runs via an engine on the browser.

### Things JavaScript can Do
- JavaScript can change HTML contents
- JavaScript can change HTML attributes
- JavaScript can change CSS styles
- JavaScript can hide/show HTML elements

We will see how these various operations are performed in the coming chapters.


### How to Start Using Javascript
JavaScript can be written through different methods. JavaScript can be written as simple as just using an HTML `script` tag or through an external Javascript file with a .js extension. First, let's take a look at the written Javascript with the HTML `script` tag.

 
    <script>
     console.log("Hello World");
    </script>
 
The Javascript `script` tag can be placed inside the `head` or the `body` HTML element.

    <!DOCTYPE html>
     <html>
      <head>
       <script>
         console.log("Javascript is Script tag is inside the head");
      </script>
      </head>
      <body>

       <h1>Javascript tutorial</h1>
       

      </body>
     </html>


It is recommended to place the `script` tag at the bottom part of the body tag.


     <!DOCTYPE html>
      <html>
       <body>

       

      <script>
        console.log("Javascript is Script tag is inside the body");
      </script>

      </body>
     </html>

The external method of writing Javascript is highly recommended. As you codebase grows you want to make sure you Javascript is not taking up space in your HTML document. It is advisable to separate your Javascript files. Below is an example of an external Javascript file named *app.js*


    function sumUp(a, b) {
      return a + b;
    }
    
    sumUp(20, 12);


### Outputting Javascript File
Javascript values can be outputted using different in-built functions readily available to you.

- document.write();
- window.alert();
- console.log();

document.write() is used to display data. It is majorly for testing purpose.

     <!DOCTYPE html>
      <html>
       <body>

       <h1>My first heading</h1>
       <p>My first paragraph.</p>

       <script>
         document.write("Learning Javascript");
       </script>

      </body>
     </html>


window.alert() is also used to display data. It pops up like an alert box.

    <!DOCTYPE html>
     <html>
     <body>

      <h1>My first heading</h1>
      <p>My first paragraph.</p>

    <script>
      window.alert("This creates an alert");
    </script>

    </body>
    </html>


console.log() is one of the most popularly used. It is very useful for debugging. To access the console data, you need to open up your developer tools on your browser to access the console.

     <!DOCTYPE html>
      <html>
      <body>

      <script>
        console.log("I love using the console");
      </script>

     </body>
     </html>


Clearly Javascript is simple. I am willing to answer any question you might have. You can follow me on *[Twitter](https://twitter.com/celebritydev)*
See you in the next chapter **Javascript Variables**