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>
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>
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 thesrcattribute will ignore it.
✗ This will not work:
<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>
<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.
//This
console.log('Hello');
alert('World');
//Is the same as:
console.log('Hello')
alert('World')
But let's not be confused:
//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
⚠️ 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.
*/
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();
};
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;
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
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';
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.
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!');
-
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?');
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);
-
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?');
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)