Introduction to JavaScript for Those With Impostor Syndrome

#javascript #newbie #beginners #webdev

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.

Code Editor
Browser

For the Code Editor, I prefer to use VS Code but they are many out there you can try your hands on depending on your preference.

Also, I enjoying using Chrome for testing and debugging my JavaScript application. You can also try Firefox, Microsoft 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
See you in the next chapter Javascript Variables