Shiva Bhusal
Shiva's Blog

Follow

Shiva's Blog

Follow
Part 1 - Javascript For Completely Beginners

Part 1 - Javascript For Completely Beginners

Programming for Dummies | Introduction To Terminologies

Shiva Bhusal's photo
Shiva Bhusal
·Nov 1, 2020·

6 min read

Play this article

Table of contents

What is Programming?

Programming is a process of writing instructions in a sequence so that the computer can fetch and execute them. We use programming languages to design and build software. In a web application, designing and building webpages can be done with a combination of different languages like CSS, Javascript, and HTML. In this blog, I will specifically talk about Javascript.

In the context of a webpage, HTML represents the skeleton whereas CSS represents Skin/Muscles and Javascript puts life in it.

What is JavaScript?

JavaScript is a programming language that gives a soul to a webpage which makes our webpages alive. for eg:-A dead the body is a webpage when we add JS in it a dead body will be alive & starts walking and talking.

What is JavaScript Engine & how it works?

A JavaScript engine is a program that runs JS code. The engine reads the script then converts the script to the machine language because the computer only understands machine code. The V8 engine is supported in Chrome and Opera likewise, SpiderMonkey for Firefox whereas, SquirrelFish for Safari, etc.

What is a Code Editor and which one is the best to use?

In my opinion, a code editor is a supporting tool for every programming language where we can write our codes for building software. There are different code editors but we(programmers) use them as per our taste. I mean to say that someone finds 'Sublime Text' so easy to use whereas some say 'Visual Studio Code' is the best though the purpose of using a text editor is the same. If we are beginners, I suggest Visual Studio Code because I find some extra features than other editors but it depends upon your preference.

What does Developer Tool mean?

The developer tool is a set of tools that is available in a browser where we can test our codes, see errors, and also examine variables. We can inspect and debug the pages HTML, CSS, and JavaScript of any website that is currently open.
An example of a developer tool is Console. If you are learning JavaScript means you must be familiar with Console.

Javascript Basic Structure

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    // We can use a <script> tag to add JavaScript code to a page.
    <script>
      alert( 'Hello, world!' );
    </script
    <p>...After the script.</p
  </body>
</html>

How to attach files, external files, inside <script> tag?

Script files are attached to HTML with the src attribute:

<script src="file.js"></script>

External Script files are attached to HTML with the src attribute:

<script src="/path/to/script.js"></script>

We can give a full URL as well. For instance:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js"></script>

A single <script> tag can’t have both the src attribute and code inside.

<script src="file.js">
  alert(1); // the content is ignored, because src is set
</script>

How to put comments in Java Script?

Comments are ignored by the engine. If we want to make clear about our codes to users we do comments. We can comment in two ways. If we have to comment in one line we give two forward slashes i.e // whereas If we have to give comments in multiline we start with a forward slash and an asterisk /* and end with an asterisk and a forward slash */.

For example,

//This is single line comment.//
/*
  This is multiline comment.
  This is second line.
  */

How to write code?

Codes are written in many statements separated by semicolons.

For example,

/* Two alerts Hello and world. Firstly,
computer will alert Hello and then will alert world.*/

alert('Hello'); alert('World');

Usually, statements are written on separate lines to make the code more readable:

// In Js semicolon can be omitted but I want always to insert semicolon at line breaks.

alert('Hello');
alert('World');

Is "use strict" that important you should care about?

"use strict" is the modern way of using JavaScript code and it is placed at the top of a script file. Modern js supports advanced language Structure, which enables the use strict automatically.

What is a Variable?

The variable is a pointer where we store data and assign value to it. We declare Variable to store data by using the var, let, or const keywords. Always declare a let for a variable declaration to run your codes at the local scope. let is a modern way of declaring variables whereas var is an old way. Variable names must contain only numbers, only letters, or the symbols $ and _. Variable naming must be meaningful. In the above diagram, the variable is pointing to data 1 and data 2.

Simple Example:


let message;  //declaring a variable with the name "message"

message = 'Hello'; // store the

alert(message); // shows the variable content

We can also declare multiple variables in one line as in the example below:


let user = 'John', age = 25, message = 'Hello';

What is a Constant?

The constant is also like a variable but the difference is, a constant cannot be assigned another value once defined. This is why the same constant name cannot point to Data 2 once it's pointed to Data 1. Some constants are named using capital letters and underscore to make a difference.

For instance:

To declare a constant (unchanging) variable, use const instead of let:


const myBirthday = '19.03.1980'; //declaring constant variable

myBirthday = '01.02.2000'; // error, can't reassign the constant value!

const COLOR_RED = "#F00"; //uppercase constant

let color = COLOR_RED;
alert(color); //#F00 will be the output

What are Data-Types?

In simple concept, Data types are Number, String, Boolean, Null, Undefined, BigInt.

For example:

  • Numbers mean 123 or 14.34; Eg: let n = 123;

  • String means quotes: double quotes, single quotes, backticks; let name = "John";

  • Boolean means two values: true and false; let isGreater = 3 > 1; result comes true

  • Null represents "empty" or "unknown value" let age = null; means age is unknown.

  • Undefined is like null but it's not mean empty. It means variable is declared but not assigned, then it's value is undefined. let age; shows undefined on alert.

  • Bigint means big integer value. Example 10n. The "n" at the end means it's a BigInt. const bigInt = 1234567892345567788n;

What do alert and confirm mean?

Alert shows a message. Confirm shows a message and waits for the user to press "OK" or "Cancel". It returns true for OK and false for Cancel.

Summary

In my experience, it's not that hard to understand the basic terminologies in Javascript. See you in the next chapter.

 
Share this