JAVASCRIPT INTRO FOR BEGINNERS
Tags: javascript, webdev, beginners, tutorial
Published: 2023-06-30 17:01:30

## INTRODUCTION

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3odd5lad9v1ce48p4kwy.png)
Creating the front end of a web page requires using tools like Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript. JavaScript is a programming language that allows you to add interactivity and dynamic functionality to a web page. 

Front-end developers employ the popular programming language JavaScript to make webpages interactive. When an instruction is requested, Java Script instructs the computers what to perform and executes that command.

Consider an e-commerce site where the product you have chosen is immediately added to the cart when you click the add to cart button. JavaScript is carrying out this command.

An additional example of how JavaScript is used is in a smart home, where the instructions have been established so that when someone enters the house, the lights turn on, and when they depart, the lights turn out. The lights turn on as a result of instructions being delivered, which can be accomplished using JavaScript.

Are there other programming languages? Yes, they are but JavaScript is the main language used for the interactivity and dynamic functionality of a website.

Read this article on the [history and origin of JavaScript](https://www.springboard.com/blog/data-science/history-of-javascript/)

## Setting up the Development Environment:

The different options for running JavaScript code include: 

- using a web browser 

- using an Integrated Development Environment (IDE)

The following steps are required when using a web browser to run JavaScript code:
**Open a new tab on your browser**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a65k2meu8peley2fjxci.png)
**Right-click on the web page**

**Click on inspect**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4f6vbzzwznvronc6li1l.png)

**Click on the console**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxhfmdonj0e7gy70688z.png)

**Clear out the error message**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4z24z0msi6r1v2v9lsp.png)

**Type your code**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhgv98q32s01smdloko2.png)

**What is an IDE?**
An integrated development environment is a tool developers use to write, edit, and manage their code more efficiently. Examples of some of the IDEs are:
- [Visual Studio Code](https://code.visualstudio.com/)
- [Sublime Text](https://www.sublimetext.com/)

The following are the steps required to use Visual Studio Code to run JavaScript code:
1. Download Visual Studio Code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ojy98lslkdpmuv89m6t.png)
2. Install Visual Studio Code
3. Create a Folder inside the document folder on your computer
4. Open your VS Code.
To open your VS code do the following:
    
    a. Click on File

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgst6768x5ofpamlx0qh.png)
    b. Click on Open your folder

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77tthxkg2pc5tkic0isc.png)
    c. Click on the File icon to create a JavaScript file

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9noxxfj5r33b0ay2mk62.png)
    d. Type in the name of your file
    e. Install Quokka in your VS code
Note: 
Your file name must end with a .js extension.  e.g newTask.js
Read this article to learn more about [Quokka](https://fireflysemantics.medium.com/running-javascript-snippets-in-vscode-quokka-js-f8e88b42e947)

## Variables in JavaScript
Variables are containers used to store values. You can think of variables as a box that contains various items.

Items like books, clothes, kitchen utensils, and so on can be stored in a box. In JavaScript, these items are called values and they are of different data types.

Data is a collection of facts and information to be examined and used for decision-making. This data is categorized into:

- Numbers

- Strings

- Bigint

- Boolean

- Null

- Undefined

- Arrays

- Object

Consider this equation:
let X = 5. 
In JavaScript, this means that X is a container that holds 5. 

**Declaration of Variable**
JavaScript is case-sensitive so when declaring variables take note of your words.

The different keywords used when declaring variables are:
- Automatically

- let

- const

- var

e.g let firstName;

"Let" is the Keyword while "firstName" is the variable name.

**Assigning Values to variables**
The assignment operator (=) is used to assign values to the variable. Think of a woman who wants to relocate to another city; she could pack all her clothes in a red leather bag and kitchenware in a paper box. She chooses what each box should hold. Variables store different values as a result of the assignment operator. The variable remains empty if the assignment operator doesn't assign it any values.

Example 1:    let firstName = “Sandra”

**Naming variables**
There are different ways of naming variables and they include:

- Camel Case.

- Snake Case.

- Pascal Case.

**Camel Case**: This is the practice of writing where each word or abbreviation after the first word begins with a capital letter with no punctuation or spaces
Examples:

- let  firstName

- let  multipleUserName

- const  secondJourney

**Snake Case**: This is the practice of separating different words with an underscore. The words are written in lowercase.
Examples:

- var my_car

- const the_three_numbers

**Paschal Case**: This is the practice of writing the first letter of the words in uppercase. 
Examples are:

- let  UserAccount

- const FullName
Note: Do not try to use the different styles on the same project. Choose a style and stick with it.

## Arithmetic Operators in JavaScript
There are different types of operators in JavaScript but this article will focus only on arithmetic operators.

In JavaScript, the arithmetic operators used to perform operations on number data type:

**ARITHMETIC OPERATORS**    
     

-   (+ Addition)
    

-   (- Subtraction)
   

-   (* Multiplication)
   

-   (/ Division)
     

-   (% Modulus)

-   (** Exponential)
         
-   (++ Increment)
   
-   (-- Decrement)

**Examples:**
**Using (+) operator**
let x = 18;
let y = 30;
console.log(x + Y)
output: 48

**Using (-) operator**
let priceOfShirt = 400;
var priceOfTie = 150;
console.log(priceOfShirt - priceOfTie)
output: 250

**Using (*) operator**
var m = 40;
var n = 8;
console.log(m * n)
output: 320

**Using (/) operator**
const unitsOfBags = 200;
var priceOfBags = 5;
console.log(unitsOfBags / priceOfBags)
output: 40

**Using (%) operator**
let a = 50;
let b = 6;
console.log(a % b)
output: 2

**Using the exponential operator**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdu1r3bn42qq07ajsbsm.png)

## Conclusion
You have started the process of learning JavaScript by becoming familiar with these key ideas. To further develop your skills, keep in mind to practice writing code, look into alternative sources, and look for real-world applications.

As a constantly changing language, there is always more to learn about JavaScript. You will therefore be well on your road to becoming a JavaScript developer if you keep exploring and trying new things.