DEV Community

Cover image for JS 101 (1 - n)  Introduction
Valentiina VP
Valentiina VP

Posted on • Updated on

JS 101 (1 - n) Introduction

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

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>
 <body>
  <script>
    console.log('Hello reader!')
  </script>
 </body>
</html>
Enter fullscreen mode Exit fullscreen mode

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>
 <body>
  <script src="/path/file.js"></script>
 </body>
</html>
Enter fullscreen mode Exit fullscreen mode

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>
 <body>
  <script src="/path/file.js">
    //code here...
    console.log('ERROR!')
    //code here...
  </script>
 </body>
</html>
Enter fullscreen mode Exit fullscreen mode

✓ If you want to do it, it will have to be this way:

<html>
 <body>
  <script src="/path/file.js"></script>
  <script> 
   //code here...
   console.log('GOOD!')
   //code here...
  </script>
 </body>
</html>
Enter fullscreen mode Exit fullscreen mode

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.

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

//Is the same as:
console.log('Hello')
alert('World')
Enter fullscreen mode Exit fullscreen mode

But let's not be confused:

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

// ✗ Is not same as:
console.log('Hello') alert('World')
Enter fullscreen mode Exit fullscreen mode

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

⚠️ 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, 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 /* */.

//I am line comment

/*
 I am block comment.
 Use me for long comments.
 I will be very useful to you in the future.
*/
Enter fullscreen mode Exit fullscreen mode

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.
"use strict";

//Modern syntax...

let a = "ES6 new variable declaration";

function MyClass() {
 constructor();
};

Enter fullscreen mode Exit fullscreen mode

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.

var myName = 'Valentina';
var favoriteNum = 7;
Enter fullscreen mode Exit fullscreen mode

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

  • let: is the statement that most directly replacesvar. It is used to assign variables that can change during program execution.
  • const: used to assign constant variables, that is, they will not change.
let name = 'Laura';
const birthday = '8/18/1990'; //never change
Enter fullscreen mode Exit fullscreen mode

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.

//declaration
let name;
//initialization
name = 'Valentina';
//assignment
name = 'Jean';

//Declaration and initialization at same time
let name = 'Valentina';
Enter fullscreen mode Exit fullscreen mode

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

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
alert('Alert! This is Javascript!');
Enter fullscreen mode Exit fullscreen mode
  • 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
let prm = prompt('What is your favorite number?');
Enter fullscreen mode Exit fullscreen mode

Prompt allows a second argument, which would a default value. You can try it in the following link Basic Prompt 2

let prm = prompt('What is your favorite number?', 7);
Enter fullscreen mode Exit fullscreen mode
  • 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
let quiz = confirm('Do you love javascript?');
Enter fullscreen mode Exit fullscreen mode

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:

If you want to read about other topics:

Top comments (0)