JS 101 (1 - n)  Introduction
Tags: codenewbie, javascript, beginners, webdev
Published: 2020-05-27 17:22:13

Through this series, we will try to explain in a simple way the fundamentals of Javascript.

<div class="table-wrapper-paragraph"><table>
<thead>
<tr>
<th><center> Content </center></th>
</tr>
</thead>
<tbody>
<tr>
<td><center><a href="https://dev.to/vplentinax/js-101-2-n-fundamentals-25l3"><strong>JS 101 (2-n)</strong> - Data types</a></center></td>
</tr>
<tr>
<td><center><a href="https://dev.to/vplentinax/js-101-3-n-fundamentals-553o"><strong>JS 101 (3-n)</strong> - Type Conversion</a></center></td>
</tr>
<tr>
<td><center><a href="https://dev.to/vplentinax/js-101-4-n-fundamentals-92"><strong>JS 101 (4-n)</strong> - Comparisons</a></center></td>
</tr>
</tbody>
</table></div>

## **JS and HTML**
When searching for a web page in our browser, it makes the request to the server where the web is hosted and shows it to us. This page that the browser shows us would be cold and static, if Javascript is not used in it. That is why we say that Javascript is a language that allows "animating" web pages.

For a `script` (piece of code) in JS to be run in the browser, it must be **embedded** in the HTML of our page, like this:

```html
<html>
 <body>
  <script>
    console.log('Hello reader!')
  </script>
 </body>
</html>
```
Or you can also create a **external** .js file and then give it's path inside the `src` attribute provided by the HTML `<script>` tag, like this:

```html
<html>
 <body>
  <script src="/path/file.js"></script>
 </body>
</html>
```

#### **Which is better to use?**
It depends of your script. If your script will contain **complex logic**, it's recommended that it be **external**,  **otherwise**, you can **embed** it in the **HTML** itself.

 > ⚠️ **Be careful**: If you choose use script externally, you will not be able to embed code inside the `<script>` tag, as the `src` attribute will ignore it.

✗ This will not work:

```html
<html>
 <body>
  <script src="/path/file.js">
    //code here...
    console.log('ERROR!')
    //code here...
  </script>
 </body>
</html>
```
✓ If you want to do it, it will have to be this way:

```html
<html>
 <body>
  <script src="/path/file.js"></script>
  <script> 
   //code here...
   console.log('GOOD!')
   //code here...
  </script>
 </body>
</html>
```
## **Code**
#### **Semicolon or not semicolon?**
Many memes have come out of the semicolon. And it is that its strict use in many programming languages meant that if it were forgotten, it could generate errors in the execution. Imagine 1000 lines of code, where your only mistake was forgetting a semicolon on line 500. It sounds simple, but finding that mistake could have been time consuming and very frustrating.

However, Javascript is a language that allows you to omit the semicolons at the end of the declarations, as long as there is a **line break** between them.

```javascript
//This
console.log('Hello');
alert('World');

//Is the same as:
console.log('Hello')
alert('World')
```
But let's not be confused:
```javascript
//This
console.log('Hello'); alert('World');

// ✗ Is not same as:
console.log('Hello') alert('World')
```
This omission is made possible by something called **automatic semicolon insertion**, which, at runtime, the language itself "adds" (not literally) the necessary semicolons. You can read more about this in [ECMAScript Specification](https://tc39.es/ecma262/#sec-automatic-semicolon-insertion)

> ⚠️ But this **doesn't happen in all cases**.Not using it can generate unexpected errors. For this reason, it's always recommended **to add the semicolon**, as a convention.

If for styling reasons you don't want to see it in your code, I advise you to add it and then use a **code formatter**, like [Prettier](https://prettier.io/), with which you can remove it correctly. 

#### **Comments**
Comments will allow you to add hints or clarifications to yourself or to other programmers who will use your code.

These can be of two types, **line** `//`, or **block** `/* */`.

```javascript
//I am line comment

/*
 I am block comment.
 Use me for long comments.
 I will be very useful to you in the future.
*/
```
## **Use strict**
It's used to indicate to the browser that you want to use modern Javascript. This happens because after the modifications made by ES5, the browsers stopped detecting the old features of the language, therefore, to avoid this, the new modern features were disabled by default so that the old ones kept working and, therefore They should be enabled when you want to use modern Javascript.

- Directive `"use strict"` must be added to the start of your code, otherwise it will not work.
- Once added, the browser will enter "modern mode" and **cannot be reversed**. So if you use any pre-ES5 function it won't run, and in some cases, it will generate errors.

```javascript
"use strict";

//Modern syntax...

let a = "ES6 new variable declaration";

function MyClass() {
 constructor();
};

```
Currently, this directive can be omitted, since, when using classes or modules in your code (features of modern javascript) this directive is "activated" automatically.

## **Variables**

A variable, in simple words, is a box where you keep things. Those things, in code, can be words, numbers, or more complex expressions. If you want the most complex form of explanation, we would have to talk about references or pointers, among other things, that don't correspond at a basic level. We'll talk about it later.

The *old way* of declaring variables was through the reserved word **var**.

```javascript
var myName = 'Valentina';
var favoriteNum = 7;
```

After the arrival of ES6, a new way of declaring variables was added, which are called **block scope variables**. Later we will specify why they were called like this and their differences with `var`, meanwhile, you can read this post in which I explain part of the topic [Javascript behind scenes](https://dev.to/vplentinax/javascript-behind-scenes-1d9)

- `let`: is the statement that most directly replaces` var`. It is used to assign variables that **can change** during program execution.
- `const`: used to assign constant variables, that is, they will **not change**.

```javascript
let name = 'Laura';
const birthday = '8/18/1990'; //never change
```
#### **How do you change the value of a variable?**
Before learning how to change the value of a variable, we must understand 3 concepts: declaration, initialization and assignment.

- `declaration`: create and name a variable, but without a value.
- `initialization:` You give an initial value to the variable.
- `assignment`: assign a new value to the existing variable.

Declaration and initialization can happen on the same time.
```javascript
//declaration
let name;
//initialization
name = 'Valentina';
//assignment
name = 'Jean';

//Declaration and initialization at same time
let name = 'Valentina';
```
As you may notice, assignment is synonymous with **changing** the value to an existing variable.

 > ⚠️ If you **try to change** the value to a variable declared as **const**, it will generate an error.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0yj4ujq908rsb2ui5w6y.png)

## **Interactions in the browser**
When we use JavaScript in the browser, we use the console to test our code. But many times we want to use more interactive messages. For this we are provided with `alert`,`prompt` and `confirm`. All of them generate a popup, but they work differently. Let's see it:

- `alert`: Allows the user to see an alert message, which will disappear once the user presses OK. You can try it in the following link [Basic Alert](https://run.plnkr.co/plunks/omw9rpdqj3KQyG71/)
```javascript
alert('Alert! This is Javascript!');
```
- `prompt`: It allows the user to enter data and then store it in a variable. You can try it in the following link [Basic Prompt](https://run.plnkr.co/plunks/3gTCWbtBIzh7gKpI/)
```javascript
let prm = prompt('What is your favorite number?');
```
Prompt allows a **second argument**, which would a default value. You can try it in the following link [Basic Prompt 2](https://run.plnkr.co/plunks/VtzCCFVBF8GZQZZv/)
```javascript
let prm = prompt('What is your favorite number?', 7);
```
- `confirm`: It allows you to ask a **question**, which can be answered by the user using the "confirm" or "cancel" button. If he presses confirm, it is taken as "true" (yes), if he presses cancel, it is taken as "false"(no). It also allows storing the response in a variable. You can try it in the following link [Basic Confirm](https://run.plnkr.co/plunks/KOE4U5iDrwFnQlJG/)
```javascript
let quiz = confirm('Do you love javascript?');
```
Wow! I think that was enough for today. In the next post we will be talking about data types in Javascript, conversions, operations, among others. Do not miss it! See you soon!

If you want to read more about Javascript:

- [Java vs Javascript] (https://dev.to/vplentinax/java-vs-javascript-4hbd)
- [Javascript behind scenes](https://dev.to/vplentinax/javascript-behind-scenes-1d9)

If you want to read about other topics:
- [Classification of computer languages ​​(I)](https://dev.to/vplentinax/computer-languages-i-24pb)
- [Software development models and methodologies (Part 1)] (https://dev.to/vplentinax/software-development-models-and-methodologies-part-1-1kl5)
- [Algorithm](https://dev.to/vplentinax/algorithm-1ao0)
- [Suggestion for developing web pages with HTML](https://dev.to/vplentinax/suggestion-for-developing-web-pages-with-html-3fam)