<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Valentiina VP</title>
    <description>The latest articles on DEV Community by Valentiina VP (@vplentinax).</description>
    <link>https://dev.to/vplentinax</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F214333%2F2c277664-7e87-4565-bc6b-549c046cc14c.png</url>
      <title>DEV Community: Valentiina VP</title>
      <link>https://dev.to/vplentinax</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/vplentinax"/>
    <language>en</language>
    <item>
      <title>Te invito a mi canal de youtube</title>
      <dc:creator>Valentiina VP</dc:creator>
      <pubDate>Thu, 04 Mar 2021 22:05:32 +0000</pubDate>
      <link>https://dev.to/vplentinax/te-invito-a-mi-canal-de-youtube-54m</link>
      <guid>https://dev.to/vplentinax/te-invito-a-mi-canal-de-youtube-54m</guid>
      <description>&lt;p&gt;Si tu idioma nativo es el español y deseas aprender sobre programación, te invito a mi &lt;a href="https://www.youtube.com/channel/UCbgKl85-V3F1MXw9Qep2RvA"&gt;canal de Youtube&lt;/a&gt; donde comparto contenido en &lt;strong&gt;Español&lt;/strong&gt; sobre este maravilloso mundo.&lt;/p&gt;

&lt;p&gt;Aquí estaré añadiendo los enlaces a los vídeos que voy subiendo, ¡por si deseas aprender connmigo!&lt;/p&gt;

&lt;p&gt;Mañana 5 de Marzo comenzaré la misma serie que estoy llevando aquí en DEV: "Javascript 101", en español, así que suscríbete para que no te la pierdas. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=aSXxPpVFr6Q"&gt;¿Qué es un algoritmo?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=woQpVgbIlRY&amp;amp;t=25s"&gt;Los lenguajes de programación&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Redes Sociales&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://twitter.com/vplentinax"&gt;Twitter&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.instagram.com/vplentinax/"&gt;Instagram&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.youtube.com/channel/UCbgKl85-V3F1MXw9Qep2RvA"&gt;Youtube&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>codenewbie</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>JS 101 (4 - n) Comparisons</title>
      <dc:creator>Valentiina VP</dc:creator>
      <pubDate>Wed, 13 Jan 2021 17:58:07 +0000</pubDate>
      <link>https://dev.to/vplentinax/js-101-4-n-fundamentals-92</link>
      <guid>https://dev.to/vplentinax/js-101-4-n-fundamentals-92</guid>
      <description>&lt;p&gt;&lt;strong&gt;Hello everyone&lt;/strong&gt; &lt;br&gt;
Today we will talk about comparison operations in javascript. Remember this is the 4th article related to the &lt;em&gt;Javascript 101 Fundamentals&lt;/em&gt; series, you can find all the related articles in this table.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;center&gt; Content &lt;/center&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/js-101-i-n-fundamentals-3cg5"&gt;&lt;strong&gt;JS 101 (1-n)&lt;/strong&gt; - Introduction&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/js-101-2-n-fundamentals-25l3"&gt;&lt;strong&gt;JS 101 (2-n)&lt;/strong&gt; - Data types&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/js-101-3-n-fundamentals-553o"&gt;&lt;strong&gt;JS 101 (3-n)&lt;/strong&gt; - Type conversion &lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Comparisons&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;As in mathematics, in javascript there are comparison operations that allow us to better manage the logic and flow of our algorithms to obtain the appropriate solution and develop our systems. These operations are represented as follows.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;strong&gt;Name&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Symbol&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Greater than&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;&lt;code&gt;&amp;gt;&lt;/code&gt;&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;a &lt;strong&gt;&amp;gt;&lt;/strong&gt; b&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Greater or equals than&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;&lt;code&gt;&amp;gt;=&lt;/code&gt;&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;a &lt;strong&gt;&amp;gt;=&lt;/strong&gt; b&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Less than&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;&lt;/code&gt;&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;a &lt;strong&gt;&amp;lt;&lt;/strong&gt; b&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Less or equals than&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;=&lt;/code&gt;&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;a &lt;strong&gt;&amp;lt;=&lt;/strong&gt; b&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Equals to&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;&lt;code&gt;==&lt;/code&gt;&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;a &lt;strong&gt;==&lt;/strong&gt; b&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Equals to &lt;em&gt;(use stric)&lt;/em&gt;
&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;&lt;code&gt;===&lt;/code&gt;&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;a &lt;strong&gt;===&lt;/strong&gt; b&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;No equals to&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;&lt;code&gt;!=&lt;/code&gt;&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;a &lt;strong&gt;!=&lt;/strong&gt; b&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;No equals to &lt;em&gt;(use stric)&lt;/em&gt;
&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;&lt;code&gt;!==&lt;/code&gt;&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;a &lt;strong&gt;!==&lt;/strong&gt; b&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The responses to these comparisons will always be Boolean: &lt;strong&gt;true&lt;/strong&gt; or &lt;strong&gt;false&lt;/strong&gt;. We are going to see some practical examples and understand some peculiarities of these operations.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;String comparison&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The comparison between strings is done character by character. We must always keep in mind that this comparison is not based on the location of a letter in the alphabet, but is based on the &lt;strong&gt;UNICODE system&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FHqnRHbY%2Fstringss.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FHqnRHbY%2Fstringss.png" alt="stringss"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We are going to see the algorithm that allows us to solve these operations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FvBKQHdb%2Fstringex.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FvBKQHdb%2Fstringex.png" alt="stringex"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As I said earlier, the comparison is done character by character. In these first two examples, we only had one character. But the algorithm changes a bit if it is more characters:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1.&lt;/strong&gt; 1. We translate the first two characters of both strings to UNICOD&lt;br&gt;
&lt;strong&gt;2.&lt;/strong&gt; If they are the same, we continue with the following characters and return to step one. This repeats for all characters until one greater / less than the other is found, at which point, it stops.&lt;br&gt;
&lt;strong&gt;3.&lt;/strong&gt; The string with more characters will always be greater &lt;em&gt;(how is the case in example 4)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FBKPjSH6%2Fstring3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FBKPjSH6%2Fstring3.png" alt="string3"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Comparison between different types&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;In these operations, Javascript automatically &lt;strong&gt;converts all operands to numbers&lt;/strong&gt;. Remember how type conversions work by reading my previous post in this series: &lt;a href="https://dev.to/vplentinax/js-101-3-n-fundamentals-553o"&gt;Type Conversion&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2F0fVgMCq%2Fstring5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2F0fVgMCq%2Fstring5.png" alt="string5"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;p&gt; &lt;/p&gt;


&lt;blockquote&gt;
&lt;p&gt;⚠️ &lt;strong&gt;&lt;code&gt;Undefined&lt;/code&gt;&lt;/strong&gt; cannot be compared with another value because always will return &lt;code&gt;false&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Strict comparison&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The difference between a simple(&lt;strong&gt;&lt;code&gt;==&lt;/code&gt;&lt;/strong&gt;/&lt;strong&gt;&lt;code&gt;!=&lt;/code&gt;&lt;/strong&gt;)  and a strict(&lt;strong&gt;&lt;code&gt;===&lt;/code&gt;&lt;/strong&gt;/&lt;strong&gt;&lt;code&gt;!==&lt;/code&gt;&lt;/strong&gt;) comparison is that the &lt;strong&gt;simple&lt;/strong&gt; comparison does not differentiate between data types as it &lt;strong&gt;converts all&lt;/strong&gt; of them &lt;strong&gt;to numbers&lt;/strong&gt;. The &lt;strong&gt;strict&lt;/strong&gt; comparison &lt;strong&gt;does not do any conversion&lt;/strong&gt; so it differentiates between different types of data.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;A special situation&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FBtqwnDH%2Fstrig6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FBtqwnDH%2Fstrig6.png" alt="strig6"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are times that &lt;code&gt;==&lt;/code&gt; handles peculiar Javascript data in a special way. This is the case of &lt;code&gt;null&lt;/code&gt; and&lt;code&gt;undefined&lt;/code&gt;. We said that &lt;code&gt;==&lt;/code&gt; converts all data into numbers, if this were the case in these two types, &lt;code&gt;null&lt;/code&gt; would be &lt;code&gt;0&lt;/code&gt; and &lt;code&gt;undefined&lt;/code&gt; be &lt;code&gt;NaN&lt;/code&gt;, which should be false when comparing. On this occasion, &lt;code&gt;==&lt;/code&gt; gives them a sense of equality more of meaning than of type, since both data have a sense of 'empty' or 'nothing', and in this case, if they are equal. Therefore, the result is &lt;code&gt;true&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;As we also said, &lt;code&gt;===&lt;/code&gt; does not any conversion, and performs a comparison of both type and value, and in this case, &lt;code&gt;null&lt;/code&gt; is a &lt;code&gt;object&lt;/code&gt;, as we saw in the previous post &lt;a href="https://dev.to/vplentinax/js-101-2-n-fundamentals-25l3"&gt;Data types&lt;/a&gt; and &lt;code&gt;undefined&lt;/code&gt; is a &lt;code&gt;undefined&lt;/code&gt; type, therefore, when comparing them with the strict comparer the result is &lt;code&gt;false&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;For these reasons, it is recommended to use the strict version of the comparisons for greater precision, if necessary.&lt;/p&gt;

&lt;p&gt;I hope you found this article interesting and useful. See you soon!&lt;/p&gt;

&lt;p&gt;If you want to read more about Javascript:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/java-vs-javascript-4hbd"&gt;Java vs Javascript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/javascript-behind-scenes-1d9"&gt;Javascript behind scenes&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you want to read about other topics:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/computer-languages-i-24pb"&gt;Classification of computer languages ​​(I)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/software-development-models-and-methodologies-part-1-1kl5"&gt;Software development models and methodologies (Part 1)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/algorithm-1ao0"&gt;Algorithm&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/suggestion-for-developing-web-pages-with-html-3fam"&gt;Suggestion for developing web pages with HTML&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Follow me!&lt;br&gt;
&lt;a href="https://www.instagram.com/vplentinax/" rel="noopener noreferrer"&gt;Instagram&lt;/a&gt;&lt;br&gt;
&lt;a href="https://twitter.com/vplentinax" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>codenewbie</category>
      <category>webdev</category>
    </item>
    <item>
      <title>JS 101 (3 - n) Type Conversion
</title>
      <dc:creator>Valentiina VP</dc:creator>
      <pubDate>Sat, 09 Jan 2021 22:08:20 +0000</pubDate>
      <link>https://dev.to/vplentinax/js-101-3-n-fundamentals-553o</link>
      <guid>https://dev.to/vplentinax/js-101-3-n-fundamentals-553o</guid>
      <description>&lt;p&gt;&lt;strong&gt;I wish all readers a happy new year!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I'll pick up the series I started last year and today we'll talk about type conversion. If you want to read the first episodes of this series, here is this table of contents.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;center&gt; Content &lt;/center&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/js-101-i-n-fundamentals-3cg5"&gt;&lt;strong&gt;JS 101 (1-n)&lt;/strong&gt; - Introduction&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/js-101-2-n-fundamentals-25l3"&gt;&lt;strong&gt;JS 101 (2-n)&lt;/strong&gt; - Data types&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/js-101-4-n-fundamentals-92"&gt;&lt;strong&gt;JS 101 (4-n)&lt;/strong&gt; - Comparision&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;In the previous post we learned about the types of data that we can find in this programming language.&lt;/p&gt;

&lt;p&gt;In many cases, we will need to handle a specific type of data that perhaps, in its first instance, was declared as another type of data. These situations mainly occur when the data that our users enter into our system is handled. To control these situations, both in javascript and in many other languages, there is what is known as "type conversion".&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Type Conversion&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;This conversion operation is quite simple in this language. The Javascript interpreter automatically converts the data to the data specified in its declaration.&lt;/p&gt;

&lt;p&gt;For example, adding double/single quotes will interpret the content as a string type. If they are numbers as a numeric type. But sometimes, we will need to do an explicit conversion. Let's see how we can do it.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;To String&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;To convert a data into a String, you just need to use the &lt;code&gt;String (value)&lt;/code&gt; function. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZFdwc32_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/Y35SHfh/string.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZFdwc32_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/Y35SHfh/string.png" alt="string" width="706" height="624"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;To Number&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;There are several ways to convert data to number, including the &lt;code&gt;Number(value)&lt;/code&gt; function, the &lt;code&gt;parseInt(value, base)&lt;/code&gt; function, the &lt;code&gt;parseFloat(value)&lt;/code&gt; function and the unary operator &lt;code&gt;+&lt;/code&gt;. In this post we will see the conversion using the &lt;code&gt;Number(value)&lt;/code&gt; function and we will talk about the others in another occasion.&lt;/p&gt;

&lt;h4&gt;
  
  
  String to Number
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SGB1h18f--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/gRTy9Q1/num1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SGB1h18f--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/gRTy9Q1/num1.png" alt="num1" width="880" height="653"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Boolean to Number
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--r5C6gIZI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/vBTDwYt/num2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--r5C6gIZI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/vBTDwYt/num2.png" alt="num2" width="620" height="516"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Undefined and null
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZWCu4kTJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/JQFxf0T/num3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZWCu4kTJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/JQFxf0T/num3.png" alt="num3" width="706" height="552"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Mathematical operations and expressions
&lt;/h4&gt;

&lt;p&gt;On this occasion, the javascript interpreter converts the numerical strings into mathematical operations directly into numbers, solving the operations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--k6QOqrBo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/RPPXPv7/operations1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--k6QOqrBo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/RPPXPv7/operations1.png" alt="operations1" width="880" height="793"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But the same does not happen with addition when mixing strings and numbers.&lt;/p&gt;

&lt;h4&gt;
  
  
  Addition, concatenation, or unary operator
&lt;/h4&gt;

&lt;p&gt;The symbol &lt;code&gt;+&lt;/code&gt; can mean three things in the programming world, two of them can be an &lt;strong&gt;addition operation&lt;/strong&gt; or &lt;strong&gt;a concatenation operation&lt;/strong&gt;. In a conversion to Number using the &lt;code&gt;Number(value)&lt;/code&gt; function, it works as &lt;strong&gt;concatenation&lt;/strong&gt; if at least one of the operators is a string of numeric value.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7JTZRYq8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/qrYFWyf/oper2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7JTZRYq8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/qrYFWyf/oper2.png" alt="oper2" width="706" height="588"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;However, this same symbol is a &lt;strong&gt;unary operator&lt;/strong&gt;, which used, as its name indicates, with a single operands, and located on the left side, works as an abbreviation for the &lt;code&gt;Number(value)&lt;/code&gt; function, since it also converts to numbers . Let's look at an example.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--zEOPB-Gj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/swfKXTG/unary.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zEOPB-Gj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/swfKXTG/unary.png" alt="unary" width="806" height="876"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There is a possibility that the result in both ways is different. In this table they shared on &lt;a href="https://i.stack.imgur.com/QNMfI.png"&gt;StackOverflow&lt;/a&gt; you can compare both ways.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;To Boolean&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;To convert a data into a Boolean, you just need to use the &lt;code&gt;Boolean(value)&lt;/code&gt; function. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fGErUPjR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/VC9qYLv/bool.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fGErUPjR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/VC9qYLv/bool.png" alt="bool" width="880" height="954"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As we can see, the conversion operation is not difficult, and its rules are easy to remember.&lt;/p&gt;

&lt;p&gt;I hope you liked this post. Don't miss the next one. See you soon!&lt;/p&gt;

&lt;p&gt;If you want to read more about Javascript:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/java-vs-javascript-4hbd"&gt;Java vs Javascript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/javascript-behind-scenes-1d9"&gt;Javascript behind scenes&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you want to read about other topics:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/computer-languages-i-24pb"&gt;Classification of computer languages ​​(I)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/software-development-models-and-methodologies-part-1-1kl5"&gt;Software development models and methodologies (Part 1)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/algorithm-1ao0"&gt;Algorithm&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/suggestion-for-developing-web-pages-with-html-3fam"&gt;Suggestion for developing web pages with HTML&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Follow me!&lt;br&gt;
&lt;a href="https://www.instagram.com/vplentinax/"&gt;Instagram&lt;/a&gt;&lt;br&gt;
&lt;a href="https://twitter.com/vplentinax"&gt;Twitter&lt;/a&gt;&lt;/p&gt;

</description>
      <category>codenewbie</category>
      <category>beginners</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>JS 101 (2 - n) Data Types</title>
      <dc:creator>Valentiina VP</dc:creator>
      <pubDate>Sun, 02 Aug 2020 18:12:58 +0000</pubDate>
      <link>https://dev.to/vplentinax/js-101-2-n-fundamentals-25l3</link>
      <guid>https://dev.to/vplentinax/js-101-2-n-fundamentals-25l3</guid>
      <description>&lt;p&gt;&lt;strong&gt;Welcome back!&lt;/strong&gt;&lt;br&gt;
I invite you to read the first post of this series &lt;strong&gt;JS 101 - Fundamentals&lt;/strong&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;center&gt; Content &lt;/center&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/js-101-i-n-fundamentals-3cg5"&gt;&lt;strong&gt;JS 101 (1-n)&lt;/strong&gt; - Introduction&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/js-101-3-n-fundamentals-553o"&gt;&lt;strong&gt;JS 101 (3-n)&lt;/strong&gt; - Type Conversion&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/js-101-4-n-fundamentals-92"&gt;&lt;strong&gt;JS 101 (4-n)&lt;/strong&gt; - Comparisons&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Let’s continue our learning about this language. Today we’re going to talk about:&lt;/p&gt;
&lt;h2&gt;
  
  
  &lt;strong&gt;Data types&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Programming languages ​​handle something known as &lt;em&gt;strong typing&lt;/em&gt;, &lt;em&gt;weak typing&lt;/em&gt;, &lt;em&gt;dynamic typing&lt;/em&gt;, or &lt;em&gt;static typing&lt;/em&gt;.&lt;br&gt;&lt;br&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Characteristics of strongly typed languages:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;You must &lt;strong&gt;explicitly specify the data type&lt;/strong&gt; of a variable.&lt;/li&gt;
&lt;li&gt;You &lt;strong&gt;can not change&lt;/strong&gt; the data type after that variable. Doing so will generate errors.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The data types may vary depending on the language. For example, in Java, there are various types of numeric data, depending on the bit size of that number, or whether it is decimal or integer...&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Characteristics of weakly typed languages:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;There is &lt;strong&gt;no&lt;/strong&gt; need to specify the data type of a variable.&lt;/li&gt;
&lt;li&gt;You &lt;strong&gt;can change&lt;/strong&gt; the data type of that variable at any time.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Many times strong typing is confused with static typing or weak typing with dynamic typing, but in reality, they are different concepts.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Characteristics of static typed languages:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The typing &lt;strong&gt;check is done during compilation&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;If there is a data typing error, the program does not run and throws an error.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Characteristics of dynamic typed languages:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The typing &lt;strong&gt;check is done during execution&lt;/strong&gt; instead of compilation.&lt;/li&gt;
&lt;li&gt;If there is a data type error, the program will run as far as the error is found. 

&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  &lt;strong&gt;What data type does Javascript handle?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Javascript is of the &lt;strong&gt;weak and dynamic typed&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Javascript data types are not bound to any variables. Therefore, the internal interpreter during execution understands what type of data contains a variable and how it should handle it automatically.&lt;/p&gt;

&lt;p&gt;Let's look at the differences between a strong and statically typed language, and Javascript: &lt;br&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight java"&gt;&lt;code&gt;&lt;span class="c1"&gt;//Code in Java: Strongly and static typed&lt;/span&gt;
&lt;span class="nc"&gt;String&lt;/span&gt; &lt;span class="n"&gt;hello&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"Hello World!"&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;123&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kt"&gt;boolean&lt;/span&gt; &lt;span class="n"&gt;isJavaCode&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;//If you try to change any value for other type, generates an error...&lt;/span&gt;
&lt;span class="n"&gt;hello&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;123&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;//ERROR: incompatible types: int cannot be converted to String...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//Code in Javascript: Weakly and dynamic typed...&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;hello&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;123&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;isJavaCode&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;//If you try to change any value for other type, NO generates an error...&lt;/span&gt;
&lt;span class="nx"&gt;hello&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;123&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// OK&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;h3&gt;
  
  
  &lt;strong&gt;Data types in Javascript&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The data types handled by the Javascript interpreter are classified into &lt;strong&gt;Primitives&lt;/strong&gt; and &lt;strong&gt;Objects&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Primitives&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Numerics
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Number&lt;/code&gt;: It is applied to both integer and float point (decimal) numeric values.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There are also the so-called &lt;strong&gt;special numerical values&lt;/strong&gt;, these are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;infinity&lt;/code&gt;: Represents the mathematical infinity (∞). It is greater than any other number.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;NaN&lt;/code&gt;:(Not a Number) Represents a calculation error.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;123&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;//number&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;division&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="c1"&gt;// infinity&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;nanNum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sqrt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//NaN&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;BigInt&lt;/code&gt;: It is a data type recently added to the language, and in simple words, it is used to specify very very large integers. It is identified by adding an &lt;em&gt;n&lt;/em&gt; to the end of the number:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//The "n" at the end indicates that it's a BigInt...&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;bigNum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1471581264892135468476313&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;




&lt;p&gt; &lt;/p&gt;


&lt;blockquote&gt;
&lt;p&gt;👍 Mathematical operations in Javascript do not generate errors (execution will not stop if there are calculation errors), if there is an error you will simply get: NaN.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  Characters, words, and sentences
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;String&lt;/code&gt;: can be words or a simple letter. They must be in quotation marks. In javascript you can use 3 types of quotes:&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;em&gt;Simple&lt;/em&gt; and &lt;em&gt;Double&lt;/em&gt;: They are both the same. You can use one or the other. Never mixed (' string ").&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Backticks&lt;/em&gt;: They are quotation marks with &lt;em&gt;extended functionality&lt;/em&gt;, which allow adding variables or expressions within the same string, using &lt;strong&gt;${  }&lt;/strong&gt;. It also allows us to suppress the concatenation (+) as it detects the spaces between words.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//Simple (' ')&lt;/span&gt;
&lt;span class="c1"&gt;//Double (" ")&lt;/span&gt;
&lt;span class="c1"&gt;//Backticks (` `)&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;mySimple&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myDouble&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;World!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myBacktick&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;mySimple&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;myDouble&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; :Concatenation is not required here, can use others variables and join words`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// Concatenation example without using backticks&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;helloWorld&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;mySimple&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt; &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;myDouble&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt; :Concatenation is required here to join words or variables and to create spaces...&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  True or False
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Boolean&lt;/code&gt;: It has only two values: &lt;em&gt;true&lt;/em&gt; or &lt;em&gt;false&lt;/em&gt;. Mostly used to store values ​​like "yes-true", "no-false". It's also the way conditional expressions are evaluated in conditional control structures.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;8&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;18&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;isAdult&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;18&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
 &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
 &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]}&lt;/span&gt;&lt;span class="s2"&gt; &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;isAdult&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;])}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; 
  &lt;span class="c1"&gt;//Return&lt;/span&gt;
  &lt;span class="c1"&gt;// 8: false, 10: false, 18: true&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Strange or peculiar
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Null&lt;/code&gt;: Is a value that indicates that the variable is empty, or that it is value is unknown.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//Explicitly declared. Indicates that the value is unknown at this time...&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myVariable&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myVariable&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// null&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Undefined&lt;/code&gt;: Indicates that the value of a variable has not been defined.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//Declare variable without initializing.&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myVariable&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myVariable&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// undefined&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;




&lt;p&gt; &lt;/p&gt;


&lt;blockquote&gt;
&lt;p&gt;❗ You can read more about &lt;em&gt;null&lt;/em&gt; and &lt;em&gt;undefined&lt;/em&gt; here: &lt;a href="https://medium.com/@stephenthecurt/a-brief-history-of-null-and-undefined-in-javascript-c283caab662e"&gt;null / undefined&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;


&lt;p&gt; &lt;/p&gt;


&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Symbol&lt;/code&gt;: It was added to the primitive data list in ECMAScript 2015. It's a different or peculiar data type. Lets you create unique identifiers. The values ​​of the Symbol are kept private and for internal use, that is, its values can only be accessed by reference. It's usually used for debugging or to identify the keys (properties) of an object and avoid overwriting it. Later we will go deeper into this data type.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//Create a symbol&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Symbol&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="c1"&gt;//Symbols are unique&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;id2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Symbol&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;isIdentique&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;id2&lt;/span&gt; 
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isIdentique&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// False&lt;/span&gt;

&lt;span class="cm"&gt;/*You can add descriptions to 
identify them if you want you 
to have many symbols in your code, 
but it does not alter the result*/&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;id3&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Symbol&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;My symbol 3&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Object&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Objects allow you to store collections of data or code structures that are more complex than primitive data. In simple words, an object is a value in memory that is accessed through an identifier. Its literal representation is by means of the key (property) / value pair. There are different types of objects, but these we will see later.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//Literal representation&lt;/span&gt;
&lt;span class="c1"&gt;// obj = {key:value}&lt;/span&gt;
&lt;span class="c1"&gt;// Each pair key/value is separated by a comma, except the last one&lt;/span&gt;
&lt;span class="c1"&gt;// It can store anything, including functions&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myObject&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Valentina&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
 &lt;span class="na"&gt;brothers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
 &lt;span class="na"&gt;isHasPets&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
 &lt;span class="na"&gt;helloWorld&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
 &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Accessing the data = obj.key&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myObject&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;//Valentina&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myObject&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;brothers&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;//2&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myObject&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;isHasPets&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;//true&lt;/span&gt;
&lt;span class="nx"&gt;myObject&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;helloWorld&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;  &lt;span class="c1"&gt;//Hello World!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;




&lt;p&gt; &lt;/p&gt;


&lt;blockquote&gt;
&lt;p&gt;❗ &lt;strong&gt;Difference between primitives and objects&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Primitives&lt;/strong&gt; are unique values. They do not contain their own methods. (Only through wrapper objects - we'll see later)&lt;br&gt;
&lt;strong&gt;Objects&lt;/strong&gt; store more complex data collections and structures contain methods of their own.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;p&gt; &lt;/p&gt;


&lt;p&gt;With this general coverage, you already know in a simple way the different types of data that exist in Javascript...&lt;/p&gt;

&lt;p&gt;... But, as we said in the beginning, this data is not specified when declaring the variables, so how can we know exactly what type of data the Javascript interpreter is identifying? Well, for this exist "typeOf".&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;typeOf&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;It allows us to know what type of data is the value of a variable, returning: string, object, boolean, undefined, etc.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// You can use it as:&lt;/span&gt;

&lt;span class="c1"&gt;// an operator: typeof variable&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;//boolean&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="p"&gt;{};&lt;/span&gt;  &lt;span class="c1"&gt;//object&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;//string&lt;/span&gt;

&lt;span class="c1"&gt;// a function: typeof(variable)&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;123&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//number&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;




&lt;p&gt; &lt;/p&gt;


&lt;blockquote&gt;
&lt;p&gt;⚠️ When tested with a variable of type null, it will return that it is an object, this is a language error because as we have seen, null belongs to primitive data types.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;p&gt; &lt;/p&gt;


&lt;p&gt;If it comes from strongly typed languages, maybe you can better understand &lt;strong&gt;TypeScript&lt;/strong&gt;, which we can say is the strongly-typed version of Javascript, although it is much more than that and we will be dealing with it later.&lt;/p&gt;

&lt;p&gt;With this, we can finish this post. I hope you have learned a lot, do not miss the next chapter of this series. See you soon!&lt;/p&gt;


&lt;p&gt; &lt;/p&gt;
&lt;p&gt;&lt;br&gt;
Other posts:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/javascript-behind-scenes-1d9"&gt;Javascript behind scenes&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/java-vs-javascript-4hbd"&gt;Java vs Javascript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/algorithm-1ao0"&gt;Algorithm&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javascript</category>
      <category>codenewbie</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>JS 101 (1 - n)  Introduction</title>
      <dc:creator>Valentiina VP</dc:creator>
      <pubDate>Wed, 27 May 2020 17:22:13 +0000</pubDate>
      <link>https://dev.to/vplentinax/js-101-i-n-fundamentals-3cg5</link>
      <guid>https://dev.to/vplentinax/js-101-i-n-fundamentals-3cg5</guid>
      <description>&lt;p&gt;Through this series, we will try to explain in a simple way the fundamentals of Javascript.&lt;/p&gt;

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

&lt;h2&gt;
  
  
  &lt;strong&gt;JS and HTML&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;For a &lt;code&gt;script&lt;/code&gt; (piece of code) in JS to be run in the browser, it must be &lt;strong&gt;embedded&lt;/strong&gt; in the HTML of our page, like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
 &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;script&amp;gt;&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello reader!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
 &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or you can also create a &lt;strong&gt;external&lt;/strong&gt; .js file and then give it's path inside the &lt;code&gt;src&lt;/code&gt; attribute provided by the HTML &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tag, like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
 &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/path/file.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
 &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;strong&gt;Which is better to use?&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;It depends of your script. If your script will contain &lt;strong&gt;complex logic&lt;/strong&gt;, it's recommended that it be &lt;strong&gt;external&lt;/strong&gt;,  &lt;strong&gt;otherwise&lt;/strong&gt;, you can &lt;strong&gt;embed&lt;/strong&gt; it in the &lt;strong&gt;HTML&lt;/strong&gt; itself.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⚠️ &lt;strong&gt;Be careful&lt;/strong&gt;: If you choose use script externally, you will not be able to embed code inside the &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tag, as the &lt;code&gt;src&lt;/code&gt; attribute will ignore it.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;✗ This will not work:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
 &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/path/file.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="c1"&gt;//code here...&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ERROR!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="c1"&gt;//code here...&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
 &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;✓ If you want to do it, it will have to be this way:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
 &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/path/file.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;script&amp;gt;&lt;/span&gt; 
   &lt;span class="c1"&gt;//code here...&lt;/span&gt;
   &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;GOOD!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
   &lt;span class="c1"&gt;//code here...&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
 &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Code&lt;/strong&gt;
&lt;/h2&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Semicolon or not semicolon?&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;However, Javascript is a language that allows you to omit the semicolons at the end of the declarations, as long as there is a &lt;strong&gt;line break&lt;/strong&gt; between them.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//This&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;//Is the same as:&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But let's not be confused:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//This&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// ✗ Is not same as:&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This omission is made possible by something called &lt;strong&gt;automatic semicolon insertion&lt;/strong&gt;, which, at runtime, the language itself "adds" (not literally) the necessary semicolons. You can read more about this in &lt;a href="https://tc39.es/ecma262/#sec-automatic-semicolon-insertion" rel="noopener noreferrer"&gt;ECMAScript Specification&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⚠️ But this &lt;strong&gt;doesn't happen in all cases&lt;/strong&gt;.Not using it can generate unexpected errors. For this reason, it's always recommended &lt;strong&gt;to add the semicolon&lt;/strong&gt;, as a convention.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If for styling reasons you don't want to see it in your code, I advise you to add it and then use a &lt;strong&gt;code formatter&lt;/strong&gt;, like &lt;a href="https://prettier.io/" rel="noopener noreferrer"&gt;Prettier&lt;/a&gt;, with which you can remove it correctly. &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Comments&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Comments will allow you to add hints or clarifications to yourself or to other programmers who will use your code.&lt;/p&gt;

&lt;p&gt;These can be of two types, &lt;strong&gt;line&lt;/strong&gt; &lt;code&gt;//&lt;/code&gt;, or &lt;strong&gt;block&lt;/strong&gt; &lt;code&gt;/* */&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//I am line comment&lt;/span&gt;

&lt;span class="cm"&gt;/*
 I am block comment.
 Use me for long comments.
 I will be very useful to you in the future.
*/&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Use strict&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;use strict&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;//Modern syntax...&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ES6 new variable declaration&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;MyClass&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Currently, this directive can be omitted, since, when using classes or modules in your code (features of modern javascript) this directive is "activated" automatically.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Variables&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;The &lt;em&gt;old way&lt;/em&gt; of declaring variables was through the reserved word &lt;strong&gt;var&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;myName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Valentina&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;favoriteNum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After the arrival of ES6, a new way of declaring variables was added, which are called &lt;strong&gt;block scope variables&lt;/strong&gt;. Later we will specify why they were called like this and their differences with &lt;code&gt;var&lt;/code&gt;, meanwhile, you can read this post in which I explain part of the topic &lt;a href="https://dev.to/vplentinax/javascript-behind-scenes-1d9"&gt;Javascript behind scenes&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;let&lt;/code&gt;: is the statement that most directly replaces&lt;code&gt;var&lt;/code&gt;. It is used to assign variables that &lt;strong&gt;can change&lt;/strong&gt; during program execution.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;const&lt;/code&gt;: used to assign constant variables, that is, they will &lt;strong&gt;not change&lt;/strong&gt;.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Laura&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;birthday&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;8/18/1990&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;//never change&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;strong&gt;How do you change the value of a variable?&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Before learning how to change the value of a variable, we must understand 3 concepts: declaration, initialization and assignment.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;declaration&lt;/code&gt;: create and name a variable, but without a value.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;initialization:&lt;/code&gt; You give an initial value to the variable.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;assignment&lt;/code&gt;: assign a new value to the existing variable.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Declaration and initialization can happen on the same time.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//declaration&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;//initialization&lt;/span&gt;
&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Valentina&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;//assignment&lt;/span&gt;
&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Jean&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;//Declaration and initialization at same time&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Valentina&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you may notice, assignment is synonymous with &lt;strong&gt;changing&lt;/strong&gt; the value to an existing variable.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⚠️ If you &lt;strong&gt;try to change&lt;/strong&gt; the value to a variable declared as &lt;strong&gt;const&lt;/strong&gt;, it will generate an error.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F0yj4ujq908rsb2ui5w6y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F0yj4ujq908rsb2ui5w6y.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Interactions in the browser&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;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 &lt;code&gt;alert&lt;/code&gt;,&lt;code&gt;prompt&lt;/code&gt; and &lt;code&gt;confirm&lt;/code&gt;. All of them generate a popup, but they work differently. Let's see it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;alert&lt;/code&gt;: Allows the user to see an alert message, which will disappear once the user presses OK. You can try it in the following link &lt;a href="https://run.plnkr.co/plunks/omw9rpdqj3KQyG71/" rel="noopener noreferrer"&gt;Basic Alert&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Alert! This is Javascript!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;prompt&lt;/code&gt;: It allows the user to enter data and then store it in a variable. You can try it in the following link &lt;a href="https://run.plnkr.co/plunks/3gTCWbtBIzh7gKpI/" rel="noopener noreferrer"&gt;Basic Prompt&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;prm&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;What is your favorite number?&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Prompt allows a &lt;strong&gt;second argument&lt;/strong&gt;, which would a default value. You can try it in the following link &lt;a href="https://run.plnkr.co/plunks/VtzCCFVBF8GZQZZv/" rel="noopener noreferrer"&gt;Basic Prompt 2&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;prm&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;What is your favorite number?&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;confirm&lt;/code&gt;: It allows you to ask a &lt;strong&gt;question&lt;/strong&gt;, 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 &lt;a href="https://run.plnkr.co/plunks/KOE4U5iDrwFnQlJG/" rel="noopener noreferrer"&gt;Basic Confirm&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;quiz&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;confirm&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Do you love javascript?&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;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!&lt;/p&gt;

&lt;p&gt;If you want to read more about Javascript:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/java-vs-javascript-4hbd"&gt;Java vs Javascript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/javascript-behind-scenes-1d9"&gt;Javascript behind scenes&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you want to read about other topics:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/computer-languages-i-24pb"&gt;Classification of computer languages ​​(I)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/software-development-models-and-methodologies-part-1-1kl5"&gt;Software development models and methodologies (Part 1)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/algorithm-1ao0"&gt;Algorithm&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/suggestion-for-developing-web-pages-with-html-3fam"&gt;Suggestion for developing web pages with HTML&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>codenewbie</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Types of tests - Software Testing (II)</title>
      <dc:creator>Valentiina VP</dc:creator>
      <pubDate>Sat, 23 May 2020 17:14:18 +0000</pubDate>
      <link>https://dev.to/vplentinax/types-of-tests-software-testing-ii-50g8</link>
      <guid>https://dev.to/vplentinax/types-of-tests-software-testing-ii-50g8</guid>
      <description>&lt;p&gt;Continuing with our &lt;strong&gt;Software Testing&lt;/strong&gt; series, today we will take a short tour of the different types of tests that our code can perform. Here you can see the posts of this series:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;center&gt; Content &lt;/center&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/introduction-to-software-testing-2ga5"&gt;&lt;strong&gt;Introduction&lt;/strong&gt;&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;strong&gt;Unit tests (very soon)&lt;/strong&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Unit Tests&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;They are &lt;strong&gt;functional tests&lt;/strong&gt; that allow the detection of problems in an individual module. It focuses its activity on exercising the logic of the module following the structure of the code (&lt;strong&gt;white-box technique&lt;/strong&gt;) and the functions that the module must perform attending to the inputs and outputs (&lt;strong&gt;black-box technique&lt;/strong&gt;).&lt;/p&gt;

&lt;p&gt;The percentage of code tested by unit testing is called &lt;strong&gt;software coverage&lt;/strong&gt;. In the next post we will be delving more into unit tests.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Integration Tests&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;They are &lt;strong&gt;functional tests&lt;/strong&gt; that allow to detect problems between related modules and previously individually tested by unit tests. They take into account the assembly mechanisms of fixed modules in the program structure, that is, the interfaces between the components of the software architecture.&lt;/p&gt;

&lt;p&gt;There are different types of integration tests depending on the &lt;strong&gt;order of integration&lt;/strong&gt;. The order of integration chosen affects various factors, such as: the way of preparing cases, the necessary tools, the order of coding and testing the modules, the cost of debugging, and the cost of preparing the cases. The fundamental types of integration are as follows:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Incremental integration:&lt;/strong&gt; the following module to be tested is combined with the set of modules that have already been tested. There are two fundamental types:

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Ascending (Bottom-up)&lt;/strong&gt;: it begins with the node modules in hierarchical tree.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Descending (Top-down)&lt;/strong&gt;: it begins with the root module.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Non-incremental integration&lt;/strong&gt;: Each module is tested separately and then all are integrated at once and the entire program is tested. It is also called &lt;em&gt;Big-Bang&lt;/em&gt; because the number of modules grows instantaneously.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Ascending Incremental Integration&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The characteristics of bottom-up integration are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You can work with the &lt;strong&gt;modules individually or combine&lt;/strong&gt; the low-level modules in groups that perform some specific function in order to reduce the number of integration steps.&lt;/li&gt;
&lt;li&gt;A &lt;strong&gt;driver module&lt;/strong&gt; is written for each group, which is a module written to allow simulating the call to the modules, entering test data through the input parameters, and collecting the results through the output parameters.&lt;/li&gt;
&lt;li&gt;Each group is &lt;strong&gt;tested with its driver module&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Driver modules are removed&lt;/strong&gt; from each group and replaced by higher level modules in the hierarchy.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For example, the stages of integration would be 6 in the case of having the following modules.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--o6x7Ej2s--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fojcvggc5lxdkwvuki3z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--o6x7Ej2s--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fojcvggc5lxdkwvuki3z.png" alt="Alt Text" width="582" height="324"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Stage 1, 2 and 3: Unit tests of E, C and F are carried out. The driver modules are represented with a dashed border in the following graph.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VhDt-Xat--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/92vhpf9clpc4chak8ryr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VhDt-Xat--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/92vhpf9clpc4chak8ryr.png" alt="Alt Text" width="637" height="221"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Stage 4 and 5: On the one hand, the B unit test and the B-E integration (or interface) test are carried out simultaneously, and on the other hand, the D unit test and the D-F interface, simultaneously. The modules already tested in previous stages are represented with a thick border in the following graphic.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---c1NSWWv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2ii0w6lhji7k596dddvp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---c1NSWWv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2ii0w6lhji7k596dddvp.png" alt="Alt Text" width="545" height="345"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Stage 6: Module A is incorporated and the complete program is tested, which does not require a driver module, since all the input and output management code for the program is present.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--R3aG_lWC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/1xus0znhk2hppu7b7dh4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--R3aG_lWC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/1xus0znhk2hppu7b7dh4.png" alt="Alt Text" width="582" height="337"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Descending Incremental Integration&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The top-down incremental integration begins with the main module (higher level or root module) and gradually incorporates subordinate modules. There is no general rule for determining subordinate modules that should be incorporated first. As a recommendation, critical parts and input / output modules should be incorporated as soon as possible. There are two fundamental orders of downward integration:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;First in depth:&lt;/strong&gt; branches of the modular tree are completed. In the example above, the sequence of modules would be A-B-E-C-D-F&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;First in width:&lt;/strong&gt; horizontal levels of modular hierarchy are being completed. In the example above, the sequence of modules would be A-B-C-D-E-F.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The characteristics of the top-down integration are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The root module is the first to be tested and &lt;strong&gt;simulators modules (stubs)&lt;/strong&gt; are written, to simulate the presence of absent subordinates, who will be called by the root module.&lt;/li&gt;
&lt;li&gt;Once the root module has been tested, one of the stub module is replaced by the corresponding module in the chosen order, and new stub module are incorporated to collect the calls of the last incorporated one.&lt;/li&gt;
&lt;li&gt;The detailed process for the root module is repeated, that is to say, the corresponding tests are executed each time a new module is incorporated and at the end of each test, a stub module is replaced by its corresponding real one. It is a good idea to repeat some test cases from previous runs to ensure that no new defects were introduced.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Coding subordinate stubs modules is more complicated than creating drivers modules. The stubs modules must simulate that they take control of the call and that they do something with the parameters passed to them.&lt;/p&gt;

&lt;p&gt;For example, using the same module design as in bottom-up integration, and using the &lt;strong&gt;first order in depth&lt;/strong&gt;, 6 stages would be necessary.&lt;/p&gt;

&lt;p&gt;Stage 1: Unit test of A is performed. The stubs modules are represented with a dashed border in the following graph: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ltANokPv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2jjugyw7yyljvxqx1avm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ltANokPv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2jjugyw7yyljvxqx1avm.png" alt="Alt Text" width="825" height="318"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Stages 2 and 3: The unit test of B and the integration (or interface) test A-B are carried out simultaneously, and then the unit test of E and the interface B-E are carried out simultaneously. The modules tested in previous stages are represented with a thick border in the following graph.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xam5j3RA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/p8x482u3z0fqgczpz7q2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xam5j3RA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/p8x482u3z0fqgczpz7q2.png" alt="Alt Text" width="880" height="241"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Stage 4: Test of module C and interface A-C is carried out simultaneously.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DyVQIkHa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/15avbds6qxcmp668fmfz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DyVQIkHa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/15avbds6qxcmp668fmfz.png" alt="Alt Text" width="857" height="484"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Steps 5 and 6: The unit test of module D and the A-D interface is performed simultaneously and then the unit test of module F and the D-F interface, leaving all the integration tested.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MmSoCVAr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/hw2v77injwfzy8surhy3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MmSoCVAr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/hw2v77injwfzy8surhy3.png" alt="Alt Text" width="880" height="237"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Non-Incremental Integration&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Non-incremental integration is the only case where unit testing and integration are &lt;strong&gt;completely separate&lt;/strong&gt;. The characteristics of non-incremental integration are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Each module requires to be tested:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;From a driver module that transmits the test data to the module and displays the results of the test cases.&lt;/li&gt;
&lt;li&gt;The stubs modules necessary to simulate the function of each module that are subordinate to the module that we are going to test.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xrG9kzTu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/o5w6m3vhlj2e1zbt8vd3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xrG9kzTu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/o5w6m3vhlj2e1zbt8vd3.png" alt="Alt Text" width="839" height="490"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;After testing each module separately, they are all assembled at once to form the complete program.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Comparison between integration types&lt;/strong&gt;
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;&lt;center&gt;Advantages of non-incremental integration&lt;/center&gt;&lt;/th&gt;
    &lt;th&gt;&lt;center&gt;Advantages of incremental integration&lt;/center&gt;&lt;/th&gt;
  &lt;/tr&gt;
    &lt;td&gt;It requires less machine time for testing as the combination of modules is tested in one go.&lt;/td&gt;
    &lt;td&gt;It requires less work, since fewer drivers and stubs modules are written.&lt;/td&gt;
  
  &lt;tr&gt;
    &lt;td&gt;There are more opportunities to test modules in parallel.&lt;/td&gt;
    &lt;td&gt;Defects and errors in the interfaces are detected earlier, as you begin to test the connections between the previous modules.&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;Debugging is much easier, since detecting the symptoms of a defect in one step of the integration, it is very likely to be attributed to the last built-in module.&lt;/td&gt;
  &lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;The program is examined in more detail, as each interface is checked.&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;&lt;center&gt;Ascending Incremental Integration&lt;/center&gt;&lt;/th&gt;
    &lt;th&gt;&lt;center&gt;Descending Incremental Integration&lt;/center&gt;&lt;/th&gt;
  &lt;/tr&gt;
    &lt;td&gt;It is advantageous when there are defects at lower levels of the program.&lt;/td&gt;
    &lt;td&gt;It is advantageous when there are failures in the upper levels of the program&lt;/td&gt;
  
  &lt;tr&gt;
    &lt;td&gt;Entries are easier to create&lt;/td&gt;
    &lt;td&gt;Before incorporating I / O, it is difficult to represent cases and the inputs can be difficult to create. After incorporating I / O functions, the representation of cases is easy.&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;The program, as an entity, does not exist until incorporating the last module.&lt;/td&gt;
    &lt;td&gt;Before incorporating the last module, you can see the previous structure of the program.&lt;/td&gt;
  &lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;Drivers modules are required. Drivers modules are easy to create.&lt;/td&gt;
    &lt;td&gt;Requires stubs modules. Stubs modules are not easy to create.&lt;/td&gt;
  &lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;It is easier to see the test results.&lt;/td&gt;
    &lt;td&gt;Difficult to see results.&lt;/td&gt;
  &lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;It induces to delay the completion of the test of some modules.&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The selection of an integration strategy depends on the characteristics of the software and sometimes on the project planning.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;System or implantation tests&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;They are &lt;strong&gt;non-functional tests&lt;/strong&gt; that verify that the complete system meets the functional requirements and specified technicians, and that it relates correctly to other systems. Ademais incorporates other tests such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Overload or stress tests:&lt;/strong&gt; They allow evaluating the behavior of the system when subjecting it to a limit situation such as excessive demand for requests, use of the maximum amount of memory, working with little memory, having many users performing the same operation at the same time, use the maximum volume of data.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Compatibility tests:&lt;/strong&gt; They allow you to test the system in different environments, media or operating systems and see if there are any errors in appearance or operation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data access and security tests:&lt;/strong&gt; They allow to test how the system responds to external attacks such as unauthorized breaches or camouflage of malicious code in a data entry.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Recovery and fault tolerance tests:&lt;/strong&gt; They allow to cause external anomalies such as electrical, device, external software or communication failures, and to see that the system recovers without data loss and without integrity failures and the time it takes to do so. &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Validation or acceptance tests&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;They are &lt;strong&gt;non-functional tests&lt;/strong&gt; that are used to check if the final product conforms to the initial requirements of the software and is based on the actions visible to the user and on the outputs of the software that the user can recognize.&lt;/p&gt;

&lt;p&gt;There may be alpha tests and / or beta tests:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Alpha:&lt;/strong&gt; Associated with contracted software. They are performed by the client in a controlled environment under the supervision of the company that develops the software. The software developer will take note of possible errors and usage problems.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Beta:&lt;/strong&gt; Associated with software of general interest. They are performed by trusted users in their real work environment without direct control of the software company. The user will report the results of the tests.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Validation or acceptance tests&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;They are tests that are performed to avoid side effects. They are applied every time a change is made in the software to verify that unwanted behavior or errors do not appear in other modules or parts of the software.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Strategy for the application of tests in the classic life cycle&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The application strategy and test planning aim to integrate test case design into a series of well-coordinated steps, by creating different test levels with different objectives. In general, the test strategy follows the steps shown in the following image during the software life cycle:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QkYiL1pS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/160ofqtky9oqr5rq64xh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QkYiL1pS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/160ofqtky9oqr5rq64xh.png" alt="Alt Text" width="880" height="451"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Documentation of test design&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The documentation of the tests is necessary for a good organization of the tests, as well as to ensure their reuse. Documentation of test execution is essential for effectiveness in detecting and correcting defects, as well as recording results of test execution. The documents generated for each execution are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Test history:&lt;/strong&gt; documents the relevant events that occurred during the execution of the tests.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Incident Report:&lt;/strong&gt; documents each incident that occurred in the test and that requires further investigation.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As we have seen, there are many types of tests that will allow us to correct errors and will make our software a better product. Do not miss the next post dedicated exclusively to unit testing. See you soon!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>codenewbie</category>
      <category>software</category>
      <category>testing</category>
    </item>
    <item>
      <title>Introduction - Software Testing (I)</title>
      <dc:creator>Valentiina VP</dc:creator>
      <pubDate>Sat, 09 May 2020 19:26:12 +0000</pubDate>
      <link>https://dev.to/vplentinax/introduction-to-software-testing-2ga5</link>
      <guid>https://dev.to/vplentinax/introduction-to-software-testing-2ga5</guid>
      <description>&lt;p&gt;Hi again, everybody. During a series of posts, we will be talking about software testing. And in order to address this topic, we will start by talking about two concepts that surround: &lt;strong&gt;quality&lt;/strong&gt; and &lt;strong&gt;standards&lt;/strong&gt;. Here you can see the posts of this series:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;center&gt; Content &lt;/center&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/types-of-tests-software-testing-ii-50g8"&gt;&lt;strong&gt;Types of tests&lt;/strong&gt;&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;strong&gt;Unit tests (very soon)&lt;/strong&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Software quality&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Software quality is the &lt;strong&gt;degree&lt;/strong&gt; to which the software meets the functional requirements established with the client, with explicitly documented development standards and with the characteristics expected of any professionally developed software. &lt;/p&gt;

&lt;p&gt;We can deduced that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If the software does not meet the initial requirements, it will not be of quality.&lt;/li&gt;
&lt;li&gt;Development standards guide how to make the software, so if the software does not meet these standards, it will not be of quality.&lt;/li&gt;
&lt;li&gt;If the software has major errors, or is not easy to use or is difficult to maintain, it will not be of quality.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Determining quality is very complicated&lt;/strong&gt; due to the nature of the software, since it is not a tangible element like other industrial products, but it must be free of errors, allow measurements and validate the development process.&lt;/p&gt;

&lt;p&gt;Throughout the software development process, periodic verifications are performed that should allow:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Verify that the product is being built correctly.&lt;/li&gt;
&lt;li&gt;Validate that the correct product is being built, that is, the one that the user really wants.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Certification standards&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Standardization is the process of preparing, disseminating, applying, and improving the rules that are used in different scientific, industrial, or economic activities to order and improve them.&lt;/p&gt;

&lt;p&gt;Standardization allows:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Simplify&lt;/strong&gt;, that is, reduce the models to be left with only the most necessary ones.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Unify&lt;/strong&gt; to allow exchange at the international level.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Specify&lt;/strong&gt; to avoid identification errors by creating clear and precise language.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Certification is the action carried out by a recognized entity, independent of the interested parties, through which it is established that an organization, product, process or service complies with the requirements established in the standards or technical specifications. It leads the company to differentiate itself from the rest and activates the market by demonstrating that it follows quality standards. Applying for a certification is voluntary, costs incurred and must be renewed periodically. The best known organizations that we can mention are:&lt;/p&gt;

&lt;h4&gt;
  
  
  ISO
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;International Organization for Standardization&lt;/strong&gt; is a non-government agency responsible for promoting the development of international standards for manufacturing, commerce and communication for all industries except electrical and electronics. Its main function is to seek the standardization of product and security standards for companies or organizations internationally. The standards it produces are &lt;strong&gt;called ISO standards&lt;/strong&gt;. The ISO 9000 family of standards are the most widely used in the software industry.&lt;/p&gt;

&lt;h4&gt;
  
  
  IEC
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;International Electrotechnical Commission&lt;/strong&gt; is a standardization organization in the field of electrical, electronic, and related technologies. Numerous standards are developed in conjunction with ISO and are called ISO / IEC standards. For example, ISO / IEC 90003:2014 provides guidance to organizations and companies on the application of ISO 9001:2008 for the acquisition, supply, development, operation and maintenance of software and related support services.&lt;/p&gt;

&lt;h4&gt;
  
  
  IEEE
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;Institute of Electrical and Electronics Engineers&lt;/strong&gt; is a  worldwide professional technical association associated with standardization, among others. Currently is the largest international non-profit association made up of professionals in new technologies, such as electrical engineers, electronic engineers, computer engineers, biomedical engineers, television engineers. communication and mechatronics engineers. According to the same IEEE, it's job is to promote creativity, development and integration, share and apply advances in information technology, electronics and science in general for the benefit of humanity and the professionals themselves. They collaborate with ISO and IEC on common problems. The best known standards of this organization are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;IEEE 730: Plans that ensure software quality.&lt;/li&gt;
&lt;li&gt;IEEE 829: Software testing documentation.&lt;/li&gt;
&lt;li&gt;IEEE 982.1, 982.2: Standard dictionary of measures to produce reliable software.&lt;/li&gt;
&lt;li&gt;IEEE 1008: Software unit tests.&lt;/li&gt;
&lt;li&gt;IEEE 1012: Software verification and validation.&lt;/li&gt;
&lt;li&gt;IEEE 1028: Software review.&lt;/li&gt;
&lt;li&gt;IEEE 1044: Standard classification for software anomalies.&lt;/li&gt;
&lt;li&gt;IEEE 1061: Standard for a software quality metrics methodology.&lt;/li&gt;
&lt;li&gt;IEEE 1228: Software security plans.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Tests&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Extensive testing of the software is impractical, as not all of it's functionality can be tested, even in small, simple programs. The purpose of testing is to &lt;strong&gt;detect defects&lt;/strong&gt;, software &lt;strong&gt;bugs&lt;/strong&gt;, so a &lt;strong&gt;test&lt;/strong&gt; is &lt;strong&gt;successful&lt;/strong&gt; if a &lt;strong&gt;defect is discovered&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;The testing process begins with generating a test plan based on the project documentation and the software documentation to be tested. From this plan, the specific tests are detailed, they are executed with the test cases and the results are obtained. Results may indicate errors, and errors should then be documented and reported in order to correct them and rerun the tests.&lt;/p&gt;

&lt;p&gt;Test plans should not be made thinking that there are no flaws; &lt;strong&gt;one must assume that there always are&lt;/strong&gt;. As tests, they should be planned and systematically designed to detect the maximum number and variety of defects with minimal time and effort.  Undocumented or not carefully designed testing should be avoided.&lt;/p&gt;

&lt;p&gt;Testing should focus on two objectives: testing whether the software &lt;strong&gt;is not doing what it should be&lt;/strong&gt;, and testing whether the software &lt;strong&gt;is doing what it should not be&lt;/strong&gt;, that is, whether it causes adverse side effects. It's common to forget this last objective.&lt;/p&gt;

&lt;h4&gt;
  
  
  Types of tests
&lt;/h4&gt;

&lt;p&gt;There are different ways to classify the tests and these are not mutually exclusive:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Functional and non-functional&lt;/strong&gt;: The former are intended to verify some functional requirements of the software and the latter are not. Examples of non-functional tests: those that indicate the effort required to learn how to handle that software, analyze the code and locate an error, support changes and facilitate the tests associated with those changes, or migrate the software to another environment.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Manuals and automatic tests&lt;/strong&gt;: The former follow a detailed plan and there is no automatic process for executions. The second has an automatic process that can be repeated as many times as you like comfortably.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Dynamics and static tests&lt;/strong&gt;: The former are done while the software is running and the latter are not.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There are operations that certain tools perform in the code to detect defects, although they are not strictly tests:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Code Validation:&lt;/strong&gt; allows you to ensure that the code complies with some language standard.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Debugging:&lt;/strong&gt; It allows to detect the code that gives erroneous results in the execution.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Code lines analysis:&lt;/strong&gt; it allows to detect, for example, the code repeated in several places, review the code that is documented and that will facilitate the task of automatic generation of documentation (Javadoc in Java), find commented code lines that take up space even if they don't work and can be removed using a version control system.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Well, it was enough for today. I know this introduction has been very theoretical, but it will be much more visual in the next post. I hope you continue with me on this software testing tour.&lt;/p&gt;

&lt;p&gt;If you have had experiences worth telling while doing your software tests, I would love to read them!&lt;/p&gt;

&lt;p&gt;See you soon!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>codenewbie</category>
      <category>software</category>
      <category>testing</category>
    </item>
    <item>
      <title>Javascript behind scenes</title>
      <dc:creator>Valentiina VP</dc:creator>
      <pubDate>Wed, 29 Apr 2020 15:40:53 +0000</pubDate>
      <link>https://dev.to/vplentinax/javascript-behind-scenes-1d9</link>
      <guid>https://dev.to/vplentinax/javascript-behind-scenes-1d9</guid>
      <description>&lt;p&gt;When we start learning a new language, we forget to understand what happens when we execute our lines of code. We want to see our printed output on the console, or see its actions running, and we forget to understand how this is possible. Understanding how languages ​​work internally will allow us to &lt;strong&gt;advance more quickly&lt;/strong&gt; in their learning. So today, I want to summarize how JavaScript works behind the scenes. &lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;How browser execute our code?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TNFlauNo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/db7s292fp7d4o456bz4s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TNFlauNo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/db7s292fp7d4o456bz4s.png" alt="Alt Text" width="880" height="386"&gt;&lt;/a&gt;&lt;br&gt;
Doing a review of what I talked about in my previous post &lt;a href="https://dev.to/vplentinax/java-vs-javascript-4hbd"&gt;Java vs Javascript&lt;/a&gt;, let's continue to delve into the execution of our code.&lt;/p&gt;

&lt;p&gt;JavaScript is always &lt;strong&gt;hosted&lt;/strong&gt; in some &lt;strong&gt;environment&lt;/strong&gt;. That environment is almost always a &lt;strong&gt;browser&lt;/strong&gt;, or as in the case of NodeJS it can be on a server. Inside this environment there is a &lt;strong&gt;engine&lt;/strong&gt; that will execute our code. This engine is different in each browser: Google's V8 for Chrome and Opera, Mozilla's Gecko and SpiderMonkey for Firefox etc...&lt;/p&gt;

&lt;p&gt;The first thing that happens inside the browser engine is that our code is parsed by a &lt;strong&gt;parser&lt;/strong&gt;, which basically reads our code line by line and &lt;strong&gt;check&lt;/strong&gt; if the &lt;strong&gt;syntax of the code&lt;/strong&gt; we gave you it's correct. This happens because the parser &lt;strong&gt;knows the syntactic rules&lt;/strong&gt; of Javascript so that the code is correct and valid. If it encounters an &lt;strong&gt;error&lt;/strong&gt;, it will stop running and It will throw that error.&lt;/p&gt;

&lt;p&gt;If our code is correct, the parser generates a structure known as &lt;strong&gt;AST or Abstract SyntaxTree&lt;/strong&gt;. The syntax is "abstract" in the sense that it does not represent all the details that appear in the actual syntax, but only the structural or content-related details. This structure is translated into &lt;strong&gt;machine code&lt;/strong&gt; and it is at this moment that the execution of our program actually occurs. &lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Context execution&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;As I mentioned in the previous post, when we talk about JavaScript code execution, we need to keep in mind the &lt;strong&gt;execution stack&lt;/strong&gt; and &lt;strong&gt;scope&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;When the code is executed, the JavaScript interpreter in a browser takes the code as a single thread, this means that only one thing can happen at a time, and appends these actions or events into queues, in what is called the  &lt;strong&gt;execution stack&lt;/strong&gt;. &lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Who creates the contexts?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pzWMKUak--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/snmknala71kc22msnkje.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pzWMKUak--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/snmknala71kc22msnkje.png" alt="Alt Text" width="880" height="218"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I'm not going to give a great explanation about this because basically the contexts in the browser are created by the &lt;strong&gt;functions&lt;/strong&gt; and, in some cases, by the called &lt;strong&gt;blocks-scope&lt;/strong&gt; (&lt;strong&gt;{let / const}&lt;/strong&gt;). Contexts are stored in &lt;strong&gt;objects&lt;/strong&gt; that also differ in global and local. These contexts in turn create a &lt;strong&gt;scope&lt;/strong&gt;. &lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Global Context and Local Context&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The &lt;strong&gt;execution context&lt;/strong&gt; can be &lt;strong&gt;defined&lt;/strong&gt; as the &lt;strong&gt;scope&lt;/strong&gt; in which the current &lt;strong&gt;code&lt;/strong&gt; is being &lt;strong&gt;evaluated&lt;/strong&gt;. When the code is run the first time, the browser &lt;strong&gt;automatically creates&lt;/strong&gt; the &lt;strong&gt;Global Execution Context&lt;/strong&gt;. We can define the global context as that code that &lt;strong&gt;is not inside&lt;/strong&gt; a function or inside blocks-scope. &lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;local context&lt;/strong&gt; is &lt;strong&gt;created&lt;/strong&gt; when a declared &lt;strong&gt;function is called&lt;/strong&gt;. When the synchronous execution flow enters that function to execute it's instructions, it &lt;strong&gt;creates&lt;/strong&gt; it's &lt;strong&gt;local context&lt;/strong&gt; for that function call.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LOLwjqly--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/lmw6ju8srsrpzuzuwn2s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LOLwjqly--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/lmw6ju8srsrpzuzuwn2s.png" alt="Alt Text" width="880" height="280"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;global context&lt;/strong&gt; is located in the first position from bottom to top in the &lt;strong&gt;execution stack&lt;/strong&gt;. Every time a &lt;strong&gt;new context&lt;/strong&gt; is created when a function is called, this placed at the &lt;strong&gt;top of the queue&lt;/strong&gt;. Once it's executed, they are &lt;strong&gt;eliminated from top to bottom&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Context Object&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IWq2fvKT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/pagihtyn5eksaspdy8rx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IWq2fvKT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/pagihtyn5eksaspdy8rx.png" alt="Alt Text" width="564" height="451"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I mentioned that contexts are stored in objects. These are known as &lt;strong&gt;context objects&lt;/strong&gt;. This does not happen as simply as it's to pronounce it. Let's see it:&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Creation of the variable object&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Argument object&lt;/strong&gt; is created, which stores all arguments (if any) in a function.&lt;/li&gt;
&lt;li&gt;The code is scanned for function and variable declarations and creates a property in the &lt;strong&gt;variable object&lt;/strong&gt; (VO) that points to those functions and variables before execution. This process is known as &lt;strong&gt;hoisting.&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Hoisting:&lt;/strong&gt; Elevate functions and variables by making them available before execution, albeit in different ways:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Functions: only those that are declared. It makes them fully available.&lt;/li&gt;
&lt;li&gt;Variables: makes them available but as undefined.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Scope Chain&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--OxmLG4fx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/edu6grdzqh47je2nqwyf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OxmLG4fx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/edu6grdzqh47je2nqwyf.png" alt="Alt Text" width="880" height="312"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;scope&lt;/strong&gt; answers the question: where can we access? Each new function call creates a new scope that makes what is defined in it accessible. Accessibility within that scope is defined by the &lt;strong&gt;lexical scope&lt;/strong&gt;, which is practically the one that identifies the &lt;strong&gt;position of 'something'&lt;/strong&gt; in the code. As the flow of execution is followed, a &lt;strong&gt;chain of scopes&lt;/strong&gt; belonging to the object variable is created to finally create the context object.&lt;/p&gt;

&lt;p&gt;If you come from a programming language like Java, you can conceptualize the scope as access modifiers (public, private, protected ...), since the scope is the ability to access from one place in our code to another. The scope is privacy. We will see it in practice with the code of the image that I have put as an explanation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--RHKwZ1Cb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2ik0yi33wlzrbnc5jxz5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RHKwZ1Cb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2ik0yi33wlzrbnc5jxz5.png" alt="Alt Text" width="698" height="412"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the scope chain, the innermost function of the chain is placed in the first position from bottom to top, this implies that this function has access to all the functions that will be above it in the scope chain. For this reason, the execution is successful. But what would happen if we tried to call the function second() from the global scope?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6XW2PFk5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0iuztjpu5jx8c3csp9mt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6XW2PFk5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0iuztjpu5jx8c3csp9mt.png" alt="Alt Text" width="880" height="356"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The global scope cannot access the local scope of internal functions, as is second(). Let's see another example: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2i86-11J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/udy51oefjja8rgq1w3qw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2i86-11J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/udy51oefjja8rgq1w3qw.png" alt="Alt Text" width="801" height="353"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Although both functions are declared in the global scope, the b() function cannot access the local variables of a(). Simply put, the scope chain works like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--CbJn3PYD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0p58q6qynmypn0pn484u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--CbJn3PYD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0p58q6qynmypn0pn484u.png" alt="Alt Text" width="880" height="376"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Lexical Scope
&lt;/h4&gt;

&lt;p&gt;Before we mentioned the &lt;strong&gt;lexical scope&lt;/strong&gt;. This is best seen when we take the example of the bloks-scope and the declaration of variables ES5 (var).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mo-Q8Jjh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/9oaukakxkagx5hjdlkel.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mo-Q8Jjh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/9oaukakxkagx5hjdlkel.png" alt="Alt Text" width="790" height="380"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Although both variables are declared within blocks ({}) within the lexical scope, the scope is only assigned to "let". This happens because the function declaration with "var" is not strict, and its scope is only assigned when it's lexical scope is inside a function. However, "let" is considered a block-scope just like "const", because when declared within blocks they generate their own local scope.&lt;/p&gt;

&lt;p&gt;For this reason, many professionals in the field of programming believe that the correct concept is to literally define this scope when the "let" is declared inside blocks, such as those created with if conditionals. That is to say:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--GYc4ZBI4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/yl4osbi3immxin523tol.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GYc4ZBI4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/yl4osbi3immxin523tol.png" alt="Alt Text" width="298" height="250"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And not like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kynS48AA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/a6h7mv9ldbdz4231ctbi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kynS48AA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/a6h7mv9ldbdz4231ctbi.png" alt="Alt Text" width="278" height="216"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To finish this part of the process of creating the context object, I wanted to remember that we should not confuse the execution stack with the scope chain, both refer to different concepts as we have already seen.&lt;/p&gt;

&lt;p&gt;The execution stack is how the function calls are placed inside the execution stack, storing their context, while the scope chain refers to the scope of accessibility existing between the different contexts.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ntFk65pR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/sgzaptact4zx14wuco3w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ntFk65pR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/sgzaptact4zx14wuco3w.png" alt="Alt Text" width="880" height="323"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Define the value of THIS&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;And to finish the first phase for creating the context object, you must assign a value to "this". This is the variable that will &lt;strong&gt;store&lt;/strong&gt; each of the &lt;strong&gt;contexts&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;In a normal function call, this keyword simply points to the global object, which, in the browser's case, is the window object. In a method call this variable points to the object that calls the method. These values are not assigned until a function call is made where it's defined. &lt;/p&gt;

&lt;p&gt;Once the call is made, "this" will take the context of the function where it was defined. Let's see it more clearly with this example on the console.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--c3TKzTu0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/s6hrj9mb10mus4f3sn9f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--c3TKzTu0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/s6hrj9mb10mus4f3sn9f.png" alt="Alt Text" width="417" height="370"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When the function is called for the first time, it takes the value of the &lt;strong&gt;global context&lt;/strong&gt; that is &lt;strong&gt;window&lt;/strong&gt;, while when calling it assigning a &lt;strong&gt;new local context&lt;/strong&gt; created by the &lt;strong&gt;person object&lt;/strong&gt; variable, "this" takes this new local context as value.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Execution code&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;In this way, the context object is created and goes to the &lt;strong&gt;second phase&lt;/strong&gt;, which is the line-by-line execution of the code within each context until each function call ends and they are removed from the execution stack.&lt;/p&gt;

&lt;p&gt;This has been an explanation of how the execution of our Javascript code would be &lt;strong&gt;visualized internally&lt;/strong&gt;. I know the terms can be confusing, but I hope I was able to help you understand this process. See you soon!&lt;/p&gt;

&lt;p&gt;If you want to read more about Javascript:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/java-vs-javascript-4hbd"&gt;Java vs Javascript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/js-101-i-n-fundamentals-3cg5"&gt;Javascript 101- Fundamentals&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you want to read about other topics:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/computer-languages-i-24pb"&gt;Classification of computer languages ​​(I)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/software-development-models-and-methodologies-part-1-1kl5"&gt;Software development models and methodologies (Part 1)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/algorithm-1ao0"&gt;Algorithm&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/vplentinax/suggestion-for-developing-web-pages-with-html-3fam"&gt;Suggestion for developing web pages with HTML&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Follow me!&lt;br&gt;
&lt;a href="https://www.instagram.com/vplentinax/"&gt;Instagram&lt;/a&gt;&lt;br&gt;
&lt;a href="https://twitter.com/vplentinax"&gt;Twitter&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>codenewbie</category>
      <category>programming</category>
    </item>
    <item>
      <title>Java VS JavaScript</title>
      <dc:creator>Valentiina VP</dc:creator>
      <pubDate>Fri, 24 Apr 2020 04:05:58 +0000</pubDate>
      <link>https://dev.to/vplentinax/java-vs-javascript-4hbd</link>
      <guid>https://dev.to/vplentinax/java-vs-javascript-4hbd</guid>
      <description>&lt;p&gt;It's not a surprise that when we begin to learn programming we confused these two languages, since they both have similarities in their names. But today we are going to understand what differentiates them and why we must learn not to confuse them. Let's start.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;&lt;center&gt;Java&lt;/center&gt;&lt;/th&gt;
    &lt;th&gt;&lt;center&gt;JavaScript&lt;/center&gt;&lt;/th&gt;
  &lt;/tr&gt;
    &lt;td&gt;It's need a &lt;b&gt;virtual machine and a development kit&lt;/b&gt; to be able to work.&lt;/td&gt;
    &lt;td&gt;It's only need a &lt;b&gt;text editor&lt;/b&gt; to work.&lt;/td&gt;
  
  &lt;tr&gt;
    &lt;td&gt;It's form of execution, as we saw in my previous post, places it in a language both compiled and interpreted, through the use of its &lt;b&gt;JVM&lt;/b&gt;.&lt;/td&gt;
    &lt;td&gt;It's an &lt;b&gt;interpreted&lt;/b&gt; language, as we also saw in my previous post.&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;In original nature it was mainly created to be used on the &lt;b&gt;back-end&lt;/b&gt; side.&lt;/td&gt;
    &lt;td&gt;In original nature it was mainly created to be used on the &lt;b&gt;front-end&lt;/b&gt; side.&lt;/td&gt;
  &lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;It's methodology is based on &lt;b&gt;classes&lt;/b&gt; within object-oriented programming.&lt;/td&gt;
    &lt;td&gt;It's methodology is based on &lt;b&gt;prototypes&lt;/b&gt; within object-oriented programming.&lt;/td&gt;
  &lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;It's &lt;b&gt;strongly typed&lt;/b&gt;.&lt;/td&gt;
    &lt;td&gt;It's &lt;b&gt;weakly typed&lt;/b&gt;.&lt;/td&gt;
  &lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;It's debugged in &lt;b&gt;two phases&lt;/b&gt;.&lt;/td&gt;
    &lt;td&gt;It's debugged in &lt;b&gt;one phases&lt;/b&gt;.&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;These are some of the main differences, there may be others in depth in both languages, but we will address the ones I have mentioned. If you can contribute more differences, feel free to add it and open a discussion, so we all learn much more. &lt;/p&gt;

&lt;p&gt;Taking these differences in mind, will they have any characteristics in common? Yes, few, but there are.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Both languages ​​are &lt;strong&gt;C-based&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Both are &lt;strong&gt;cross-platform&lt;/strong&gt; programming languages&lt;/li&gt;
&lt;li&gt;Both are languages ​​that, due to their time on stage and wide community, are classified as &lt;strong&gt;robust languages&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;JAVA&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Oracle is the private company in charge of this language. Today it's in &lt;strong&gt;JAVA SE 14&lt;/strong&gt; version.&lt;/p&gt;

&lt;p&gt;Java is made up of different platforms:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Java SE&lt;/strong&gt; (Standard Edition) is used to build desktop applications, console applications with Swing and JavaFX.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Java EE&lt;/strong&gt; (Enterprise Edition) is used to develop web applications. It comes with many technologies.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Java ME&lt;/strong&gt; (Micro Edition) is used to develop mobile applications.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;As I also mentioned, in order to run a program in JAVA, you must first have installed the Java Development Kit, but what is this?.&lt;/p&gt;

&lt;h4&gt;
  
  
  Java Development Kit (JDK)
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Frl3l9s1q7r28f2lqorwy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Frl3l9s1q7r28f2lqorwy.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
In common terms, the JDK is the box that contains all the &lt;strong&gt;tools necessary&lt;/strong&gt;  develop and execute code written in this language. &lt;/p&gt;

&lt;p&gt;The main tool that we can mention is the &lt;strong&gt;javac compiler&lt;/strong&gt;, it allows compiling the &lt;strong&gt;.java source file&lt;/strong&gt; and transforms it into a &lt;strong&gt;bytecode&lt;/strong&gt; with &lt;strong&gt;.class&lt;/strong&gt; extension. Another important tool to mention within the JDK is &lt;strong&gt;javadoc&lt;/strong&gt;, which allows you to generate the documentation for the code. The JDK also includes the &lt;strong&gt;JRE&lt;/strong&gt;, which is the &lt;strong&gt;Java runtime environment&lt;/strong&gt;, that is, the place where the code is executed.&lt;/p&gt;

&lt;h4&gt;
  
  
  JDK vs JRE
&lt;/h4&gt;

&lt;p&gt;As its name implies, JDK is a tool used for development, so it is generally only used by the &lt;strong&gt;Java developer community&lt;/strong&gt;, but not the end user. By contrast, the JRE is the tool that the &lt;strong&gt;end user&lt;/strong&gt; needs to run their program or application.&lt;/p&gt;

&lt;p&gt;But as a curious thing, the JDK cannot be installed without the JRE, however, the JRE can be installed independently. This makes sense, since as programmers we need to test our code, therefore we need their execution environment to be able to do it, while end users only need to execute it.&lt;/p&gt;

&lt;h4&gt;
  
  
  Java execution
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F14lh98sg79iqcrq6vnk4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F14lh98sg79iqcrq6vnk4.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As we saw in my previous post (&lt;a href="https://dev.to/vplentinax/classification-of-computer-languages-iii-3ali"&gt;Classification of computer languages (III)&lt;/a&gt;), Java is a compiled language, but through its VM you can choose whether to interpret the bytecode or compile it. As we can visualize it in the previous image.&lt;/p&gt;

&lt;h4&gt;
  
  
  Classes-based (OOP)
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fqez95exf9c8lcdeixcku.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fqez95exf9c8lcdeixcku.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
It's based on creating a &lt;strong&gt;mold structure&lt;/strong&gt; called &lt;strong&gt;class&lt;/strong&gt; where the fields and methods that our objects will have are specified. Every time we need an object we create an instance (or copy of the object) using the class &lt;strong&gt;as a template&lt;/strong&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Strongly Typed
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F35s2tfqi4i9966veofaf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F35s2tfqi4i9966veofaf.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
The concept refers to the strict use of data types when declaring variables or using parameters. Personally, it is a feature of languages ​​like Java that are very useful to me, especially at the time of data entry by the user. Allows better control of input data. &lt;/p&gt;

&lt;p&gt;It is also a very important feature when programming, since, knowing the types of data to be used from the beginning, you will have greater control when allocating the spaces in the memory of the data. If you are an intermediate programmer, you will know that an INT is not the same as a BYTE and the effects this has on the memory, weight and execution time of the code. Later I will talk about this in another post.&lt;/p&gt;

&lt;h4&gt;
  
  
  Java Debugging
&lt;/h4&gt;

&lt;p&gt;At the time of executing our java code, the debugging is done in two steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;At compile time&lt;/strong&gt;: When the javac compiler tries to generate the bytecode, it first parses the syntax, and if it is not correct, it warns of this error and the code doesn't execute.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;At runtime&lt;/strong&gt;: If the first step does not generate errors, the code is executed, but it may happen that the user enters an unexpected data type, or tries to access an index that does not exist in an array, or the basic errors in Java mathematical operations such as divisions by zero or saving strings where they should be numbers. The program runs, but at the time of finding one of these errors, it will hang and not work properly.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;JAVASCRIPT&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Javascript is also registered under the Oracle company, however, 1997 adopted the ECMA non-profit organization standard, which later specified it as &lt;strong&gt;ECMAScript&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This is a very versatile language, since, although it is naturally based on prototypes, as I mentioned earlier, it easily adapts to other methodologies.&lt;/p&gt;

&lt;h4&gt;
  
  
  JavaScript Execution
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fdb7s292fp7d4o456bz4s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fdb7s292fp7d4o456bz4s.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
JavaScript is an interpreted language, although other developers think that it can also be compiled. If you are interested in reading about this thought, you can access it here: &lt;a href="https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch1.md" rel="noopener noreferrer"&gt;You Dont Know JS&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The first thing that happens inside the engine is that our code is parsed by a &lt;strong&gt;parser&lt;/strong&gt;, which basically reads our code line by line and &lt;strong&gt;check&lt;/strong&gt; if the &lt;strong&gt;syntax of the code&lt;/strong&gt; we gave you it's correct. This happens because the parser &lt;strong&gt;knows the syntactic rules&lt;/strong&gt; of Javascript so that the code is correct and valid. If it encounters an &lt;strong&gt;error&lt;/strong&gt;, it will stop running and It will throw that error.&lt;/p&gt;

&lt;p&gt;If our code is correct, the parser generates a structure known as &lt;strong&gt;AST or Abstract SyntaxTree&lt;/strong&gt;. The syntax is "abstract" in the sense that it does not represent all the details that appear in the actual syntax, but only the structural or content-related details. This structure is translated into &lt;strong&gt;machine code&lt;/strong&gt; and it is at this moment that the execution of our program actually occurs.&lt;/p&gt;

&lt;p&gt;When we talk about JavaScript code execution, we need to keep in mind the &lt;strong&gt;execution stack&lt;/strong&gt; and &lt;strong&gt;scope&lt;/strong&gt;. On these two concepts I will delve into my next post &lt;a href="https://dev.to/vplentinax/javascript-behind-scenes-1d9"&gt;Javascript behind scenes&lt;/a&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Prototype-based (OOP)
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F4el1s83iykd7t7tbxzcl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F4el1s83iykd7t7tbxzcl.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
In this methodology there are no classes, only objects. To create an object with the same structure as another, the term &lt;strong&gt;object cloning&lt;/strong&gt; is used. This cloning is done through a &lt;strong&gt;prototypical object&lt;/strong&gt;, which is used as a template to obtain more objects equal to it.&lt;/p&gt;

&lt;h4&gt;
  
  
  Weakly Typed
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fjhdoxp51uwng4w3p4gb0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fjhdoxp51uwng4w3p4gb0.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
For many programmers, this is an advantage, as it constantly eliminates thinking about what kind of data to use and focusing on logic. Another possible advantage is being able to change the type of the variable on the fly, such as assigning a string to an int.&lt;/p&gt;

&lt;p&gt;In Javascript curious things happen that in a strongly typed language would not happen, such as when comparing strings and numbers. Let's see an example in the browser console:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fmryqvq7903l89bk1copq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fmryqvq7903l89bk1copq.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
Admittedly, these problems are easily solved using strict comparators (===), but it might confuse those that come from a strongly typed language.&lt;/p&gt;

&lt;p&gt;As we can see, these languages ​​cannot be confused, since their independent characteristics allow us to see that there is no reason for it. Remember, if you want to contribute more to this article, feel free to do so!&lt;/p&gt;

&lt;p&gt;See you soon!&lt;/p&gt;

</description>
      <category>programming</category>
      <category>javascript</category>
      <category>codenewbie</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Classification of computer languages (III)
</title>
      <dc:creator>Valentiina VP</dc:creator>
      <pubDate>Wed, 15 Apr 2020 22:15:18 +0000</pubDate>
      <link>https://dev.to/vplentinax/classification-of-computer-languages-iii-3ali</link>
      <guid>https://dev.to/vplentinax/classification-of-computer-languages-iii-3ali</guid>
      <description>&lt;p&gt;We have been analyzing the ways of classifying computer languages, today we will continue with the classification by translation and method of execution. If you want to start the thread of these posts, I leave the table of contents here.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;center&gt; Content &lt;/center&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/computer-languages-i-24pb"&gt;&lt;strong&gt;Classification Part I&lt;/strong&gt;&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/classification-of-computer-languages-ii-2201"&gt;&lt;strong&gt;Classification Part II&lt;/strong&gt;&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Translation and method of execution&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The code written for a computer program is known as the &lt;strong&gt;source code&lt;/strong&gt;. This code is saved in a file known as &lt;strong&gt;source file&lt;/strong&gt; and will have to be translated into language machine to be able to run.&lt;/p&gt;

&lt;p&gt;Three language groups can be considered programming considering how to translate to machine language and to execute:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Compiled languages.&lt;/li&gt;
&lt;li&gt;Interpreted languages.&lt;/li&gt;
&lt;li&gt;Managed execution languages ​​or of machine virtual.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Some languages ​​like Prolog can be considered compiled or interpreted since they have compilers and interpreters.&lt;/p&gt;

&lt;h4&gt;
  
  
  Compiled languages
&lt;/h4&gt;

&lt;p&gt;They have a compiler or program that translates the &lt;strong&gt;source code&lt;/strong&gt; to &lt;strong&gt;machine code&lt;/strong&gt; saving the result in an &lt;strong&gt;executable file&lt;/strong&gt;. This compiled code that is generated is called an &lt;strong&gt;object code&lt;/strong&gt;. With that file you can run the program as many times it is necessary without having to repeat the process, so the waiting time between executions is minimal. At runtime the executable file is launched on the platform for which the compiler was made.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Faetrjqvyxwr0pdmql2pf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Faetrjqvyxwr0pdmql2pf.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;center&gt;Characteristics&lt;/center&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;There is an executable file for the real machine.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The translation process is done at compilation time and only once.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Execution is very fast since the executable is in machine language.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The executable only works for the platform it was created for.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The user who executes does not have to know the source code, he only has the executable code that is not easily manipulated to obtain the source code, and as a consequence the programmer has the code most protected source.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The executable will not be generated if there are lexical errors, syntactic or semantic.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Interrupting execution can be difficult for the system operational and may affect the platform.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Modifying the source code implies going back to generate the executable file.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Example: ADA, C, C++, COBOL...&lt;/p&gt;

&lt;p&gt;We see them more in desktop software since they require greater resources and access to certain files. Also due to the greater weight that they usually have in their executable files.&lt;/p&gt;

&lt;h4&gt;
  
  
  Interpreted languages
&lt;/h4&gt;

&lt;p&gt;They execute the instructions directly, without generate object code. They need an &lt;strong&gt;interpreter&lt;/strong&gt; or program in memory to that at runtime the code is translated from source code to machine language. Your instructions or rather the source code, written by the programmer in a high-level language, is translated by the interpreter to a language understandable to the machine step by step, instruction by instruction. The process is repeated every time the program is run, the code in question.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fqnvxgh97fmifv7182341.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fqnvxgh97fmifv7182341.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;center&gt;Characteristics&lt;/center&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;There is no executable file.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The translation process is done every time it is run.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The execution is slow since the execution process the translation has to be added.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The file can be run on different platforms provided there is an interpreter for them.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The user uses the source code to execute program.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Lexical, syntactic or semantic errors can appear in the execution&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Interrupting execution normally only affects to interpreter and not to the platform.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Allows dynamic data typing. It is not necessary initialize a variable with a certain data type.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Example: RUBY, PYTHON, PHP, JAVASCRPT, VISUAL BASIC 6 and previous...&lt;/p&gt;

&lt;p&gt;They are seen in the development of applications or websites that go accompanied by frameworks that greatly facilitate the programming.&lt;/p&gt;

&lt;h4&gt;
  
  
  Managed execution languages ​​or machine virtual.
&lt;/h4&gt;

&lt;p&gt;These languages ​​initially need a compiler that in programming time translates the &lt;strong&gt;source code&lt;/strong&gt; to a cross-platform &lt;strong&gt;intermediate code&lt;/strong&gt;, then you need other software that translates that intermediate code to machine code. This is the case of languages ​​like Java or .NET&lt;/p&gt;

&lt;p&gt;In the case of &lt;strong&gt;virtual machine languages&lt;/strong&gt; ​​such as &lt;strong&gt;Java&lt;/strong&gt; happens that:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F8r65vondkeq70gzb7evy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F8r65vondkeq70gzb7evy.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;At compile time the Java compiler generates the intermediate code called &lt;strong&gt;bytecode&lt;/strong&gt; Java platform independent.&lt;/li&gt;
&lt;li&gt;At runtime, you need a &lt;strong&gt;Java Virtual Machine (JVM)&lt;/strong&gt; that interprets the bytecode, virtual machine is a software that simulates a machine
real with your operating system.&lt;/li&gt;
&lt;li&gt;It acts as an intermediary with the real machine, so virtual machines are different for Linux, Windows, Mac and Solaris.&lt;/li&gt;
&lt;li&gt;This scheme provides many of the advantages of
compilation and interpretation, getting rid of some drawbacks. Mainly:&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;center&gt;Virtual Machine Advantage&lt;/center&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;Portability&lt;/strong&gt; and &lt;strong&gt;speed:&lt;/strong&gt; The intermediate code is now free of syntactic errors, and it is a very simple code (in the style of machine code).&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;Multiplatform:&lt;/strong&gt; If there is an interpreter for this code in different platforms, the same code can be run on each of them.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;Stability:&lt;/strong&gt; intermediate code is not executed by a CPU directly, but yes by a virtual CPU: really, by the virtual machine interpreter, which is a program and not a real chip It allows greater control over this code, making work easier to prevent uncontrolled code from affecting stability of the current platform.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;In languages ​​of &lt;strong&gt;managed execution&lt;/strong&gt; such as &lt;strong&gt;Microsoft's .NET&lt;/strong&gt; platform happens that:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F4fk6yjts65xr3jua49b7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F4fk6yjts65xr3jua49b7.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;At compile time, the compiler generates the &lt;strong&gt;CIL (Common Intermediate Language)&lt;/strong&gt; code of independent platform.&lt;/li&gt;
&lt;li&gt;To run it is necessary to have on the client computer the version of the .NET Framework &lt;strong&gt;(CRL Common Runtime Language - proper execution engine)&lt;/strong&gt; and the last compilation phase is done, in which the CRL will translate intermediate code into machine code using a &lt;strong&gt;JIT (Just In Time) compiler&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;To directly run a .NET application using the CLR, you need the so called &lt;strong&gt;"CLR Hosts"&lt;/strong&gt;. &lt;strong&gt;CLR Host&lt;/strong&gt; is an application responsible for loading the CLR in an operating system process, create the application domains required within that process and run the application inside the application domains.&lt;/li&gt;
&lt;li&gt;The .Net platform has a common system of types known as &lt;strong&gt;CTS (Common Type System).&lt;/strong&gt; All types of data are collected in the CTS and operations that can be used from a language .Net. It doesn't matter if we use Visual Basic .Net, C #, COBOL, Perl or Pascal. The data set to use is always the same. The CTS also includes the operations that can be done on the data.&lt;/li&gt;
&lt;li&gt;There is a subset of the CTS made up of data types and operations that all .Net languages ​​must implement to be compatible with the rest. This subset is known as &lt;strong&gt;CLS (Common Language Specification).&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;center&gt;Common features between managed machine and virtual machine languages&lt;/center&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;There is an intermediate code that runs on a specific software but not an executable.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The initial translation process is done before execution and the final translation process is done every time running.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Execution is not as fast as in compiled languages ​​but it is faster than in languages interpreted.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The file can be run on different platforms as long as the specific software exists.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The user does not have the source code, only the intermediate code that is not easily manipulated to get the source code, so the programmer has more protected source code.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Lexical, syntactic or semantic errors are detected in the compilation phase, and if they exist they are not will generate the intermediate code.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Interrupting execution normally only affects the interpreter and not to the platform.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Modifying the source code implies repeating the compilation process.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h4&gt;
  
  
  Client-server architecture
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Ftn4ddcawtdekd9eaudqo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Ftn4ddcawtdekd9eaudqo.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The client-server architecture basically consists of a &lt;strong&gt;client program&lt;/strong&gt; that &lt;strong&gt;makes requests&lt;/strong&gt; to a &lt;strong&gt;server&lt;/strong&gt;. It is most useful when the client or the server are communicating through a network, although it can also be apply when they are on the same machine.&lt;/p&gt;

&lt;p&gt;It differentiates between languages ​​that are executed: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Server-side like PHP, NodeJS...&lt;/li&gt;
&lt;li&gt;On the client side as Javascript...&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These were some of the ways of classifying computer languages, I hope you have learned a lot. See you soon.&lt;/p&gt;

</description>
      <category>devlive</category>
      <category>computerscience</category>
      <category>webdev</category>
      <category>software</category>
    </item>
    <item>
      <title>Classification of computer languages (II)</title>
      <dc:creator>Valentiina VP</dc:creator>
      <pubDate>Mon, 13 Apr 2020 23:43:26 +0000</pubDate>
      <link>https://dev.to/vplentinax/classification-of-computer-languages-ii-2201</link>
      <guid>https://dev.to/vplentinax/classification-of-computer-languages-ii-2201</guid>
      <description>&lt;p&gt;Continuing with the previous post , the following classification of programming languages ​​is by &lt;strong&gt;paradigms&lt;/strong&gt;. If you want to see the whole thread of this post, here I leave the table of contents:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;center&gt; Content &lt;/center&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/computer-languages-i-24pb"&gt;&lt;strong&gt;Classification Part I&lt;/strong&gt;&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/classification-of-computer-languages-iii-3ali"&gt;&lt;strong&gt;Classification Part III&lt;/strong&gt;&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Paradigms&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;A programming paradigm is a &lt;strong&gt;methodology&lt;/strong&gt; or &lt;strong&gt;programming philosophy&lt;/strong&gt; to follow with a central core unquestionable, that is, the languages ​​that use the same programming paradigm will use the same basic concepts to program.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Paradigms Groups&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;Imperative&lt;/strong&gt; : Programmer indicates &lt;strong&gt;how&lt;/strong&gt; to obtain the desired result.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;Declarative&lt;/strong&gt;: Programmer indicates &lt;strong&gt;what&lt;/strong&gt; he wants to obtain the desired result.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Imperative paradigm&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The code consists of a series of steps or instructions for performing a task organizing or changing values ​​in memory.  The instructions are executed &lt;strong&gt;sequentially&lt;/strong&gt;, until the previous one is not executed, the next one will not be executed. Examples: Java, C, C ++, PHP, Javascript, Visual Basic...&lt;/p&gt;

&lt;p&gt;Within this group are different programming methodologies. Among them, the structured methodology and the object-oriented methodology.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fe496qrjma8acsdlufx48.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fe496qrjma8acsdlufx48.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Structured methodology
&lt;/h4&gt;

&lt;p&gt;At the end of the 70s, this methodology was born which allowed &lt;strong&gt;3 types of structures&lt;/strong&gt; in the code:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Sequential.&lt;/li&gt;
&lt;li&gt;Alternative (based on a decision).&lt;/li&gt;
&lt;li&gt;Repetitive (loops).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The structured program theorem states that each computable function can be implemented by combining structures sequentials, alternatives or repetitives.  &lt;/p&gt;

&lt;p&gt;Using these structures, encodings like the one in the image on the left can be replaced with a structured code like the one in the figure on the right:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FKjqcJRC%2Fcode-Structured.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FKjqcJRC%2Fcode-Structured.png" alt="code-Structured"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The structured methodology evolved by adding &lt;strong&gt;the module&lt;/strong&gt; as a basic component giving rise to &lt;strong&gt;structured and modular programming&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2F37PHjbX%2Fevolutonimperative.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2F37PHjbX%2Fevolutonimperative.png" alt="evolutonimperative"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The programs were made up of modules or processes on the one hand and data on the other. The modules &lt;strong&gt;needed input&lt;/strong&gt; data to &lt;strong&gt;get output&lt;/strong&gt; data which in turn could beused by other modules. Example: C.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Module&lt;/strong&gt;: independent code that performs a specific task.&lt;/p&gt;

&lt;p&gt;With this evolution of structured programming methodology, it was possible to divide the problem into several &lt;strong&gt;subproblems&lt;/strong&gt; that they can be solved separately and by joining them they get a final result.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It is desirable that the modules have &lt;strong&gt;high cohesion&lt;/strong&gt; and &lt;strong&gt;low coupling.&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Cohesion:&lt;/strong&gt; measures the strength of the relationship between
instructions for a given module.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Coupling:&lt;/strong&gt; is the level of independence there is between modules. Low coupling is normally a sign of a well-structured system and good software design.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h4&gt;
  
  
  Object Oriented Methodology
&lt;/h4&gt;

&lt;p&gt;In the 80's it emerged the methodology oriented objects that considers the object as a basic element. It became popular in the early 90's. Examples: Java, C++, and Javascript supports this methodology, although it is natively based on prototype-oriented programming.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Object&lt;/strong&gt;: Abstraction of real life objects, both physical and abstract. All these objects have a &lt;strong&gt;state&lt;/strong&gt; and a &lt;strong&gt;behavior&lt;/strong&gt;. Each object is an instance of a class.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reals: car, house, bed, animal, person...&lt;/li&gt;
&lt;li&gt;Abstracts: a notification, a search ...&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;&lt;p&gt;&lt;strong&gt;Class&lt;/strong&gt;: A class is a plane or mold from which individual objects are created.&lt;/p&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;Programs contain objects that relate to or collaborate with other objects of the same class or from other classes. The class is made up of &lt;strong&gt;attributes&lt;/strong&gt; (data) and &lt;strong&gt;methods&lt;/strong&gt; (processes).&lt;/p&gt;

&lt;p&gt;The most fundamental concepts within this methodology are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Encapsulation:&lt;/strong&gt; Hide internal details of a class. Keywords within this concept are: Private, public, protected ...&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FfHTCzP7%2Fencaps.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FfHTCzP7%2Fencaps.png" alt="encaps"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Inheritance:&lt;/strong&gt; subclasses can be declared that inherit the properties and methods of the parent class.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FQDbqb0m%2Finehernec.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FQDbqb0m%2Finehernec.png" alt="inehernec"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Polymorphism&lt;/strong&gt; refers to the property by which it is possible to send syntactically equal messages to objects of different types. The only requirement that must be met by objects that are used in a polymorphic way is to know how to respond to the message sent to them.  Let's try to give an example of this: all animals make a sound, but this sound is different depending on the type of animal that emits it. Everyone will inherit the emitSound method from the parent class, but each subclass will do it differently. Let's see it graphically.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FPrz98fV%2Fpoli.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FPrz98fV%2Fpoli.png" alt="poli"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The world of object-oriented programming is big, in another post, I will continue to cover this topic. For now, let's continue with our classifications.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Declarative paradigm&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The form of coding in this paradgim contains a set of conditions, propositions, affirmations, constraints, equations, or transformations that describe the problem and detail its solution. The programmer has to think about the logic of the algorithm and not in the sequencies of steps to perform.  There are also different groups within this paradigm.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Logic programming&lt;/li&gt;
&lt;li&gt;Algebraic programming&lt;/li&gt;
&lt;li&gt;Functional programming&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Logic programming
&lt;/h4&gt;

&lt;p&gt;This methodology emerged as a simple form of communication between humans and machines, unlike low-level languages, making use of &lt;strong&gt;mathematical logic&lt;/strong&gt;, which is the simplest way for the human intellect to express and formally prove complex problems. The language by excellence within this methodology is Prolog.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FmtYtT1W%2Flogiv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FmtYtT1W%2Flogiv.png" alt="logiv"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Algebraic programming
&lt;/h4&gt;

&lt;p&gt;Methodology used mostly in relational database query languages ​​such as SQL or Maude. This language makes use of a collection of relational schema operations that is used to manipulate relationships. The result of an operation, in turn, is also a relation, which allows you to chain calculations by applying an operator to the result of a previous calculation. These operators are the ones used by &lt;strong&gt;relational algebra&lt;/strong&gt;: &lt;/p&gt;

&lt;p&gt;This is an example of using relational algebra with the unary SELECTION primitive operator in SQL.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FzfYyR7q%2Falgebra.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FzfYyR7q%2Falgebra.png" alt="algebra"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Functional programming
&lt;/h4&gt;

&lt;p&gt;This type of languages, manage their entire structure through functions. There are no loops, or repetitive structures, and instead the &lt;strong&gt;concept of recursion&lt;/strong&gt; is used. They makes use of mathematical functions. The difference from functions in the imperative paradigm is that imperative functions can make changes to previously performed calculations. Example: Heskel, Miranda. Javascript is not purely functional but supports such methodology, as well as Perl, Python, Ruby or Rust.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FVTqYWCr%2Ffuncion.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FVTqYWCr%2Ffuncion.png" alt="funcion"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are concepts within this methodology:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;First-class and higher-order functions&lt;/strong&gt;: they are functions that can take other functions as arguments or return them as results.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pure functions:&lt;/strong&gt; have not side effects (memory or I / O). They are widely used in code optimization&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Strict(eager) vs. Non-Strict(Lazy) evaluation:&lt;/strong&gt; concepts that refer to how function arguments are processed when an expression is being evaluated.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Type systems:&lt;/strong&gt; The use of algebraic data types and pattern matching makes manipulation of complex data structures convenient and expressive, the presence of strict type checks at compile time makes programs more reliable, while type inference relieves the programmer of the need to manually declare the types for the compiler.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We have learned a lot today about paradigm classification of some languages. In the next post we will continue with the last classification ways. See you soon.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>devlive</category>
      <category>computerscience</category>
      <category>programming</category>
    </item>
    <item>
      <title>Classification of computer languages (I)</title>
      <dc:creator>Valentiina VP</dc:creator>
      <pubDate>Sat, 11 Apr 2020 18:49:01 +0000</pubDate>
      <link>https://dev.to/vplentinax/computer-languages-i-24pb</link>
      <guid>https://dev.to/vplentinax/computer-languages-i-24pb</guid>
      <description>&lt;p&gt;Computer language allows communicate with the computer. It is made up of a set of symbols and words that follow some syntax rules, in the same way as it exists in natural languages. There is no classification adopted by the majority of the experts, there are big differences. &lt;/p&gt;

&lt;p&gt;If you want to see the whole thread of this post, here I leave the table of contents:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;center&gt; Content &lt;/center&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/classification-of-computer-languages-ii-2201"&gt;&lt;strong&gt;Classification Part II&lt;/strong&gt;&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;a href="https://dev.to/vplentinax/classification-of-computer-languages-iii-3ali"&gt;&lt;strong&gt;Classification Part III&lt;/strong&gt;&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;A possible classification would be the following:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Classification Computer Languages&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;Markup Languages:&lt;/strong&gt; They allow to place marks, badges or signs in the text that they will be interpreted by applications or processes. (HTML, XHTML, XML, Markdown...)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;Specification or style languages:&lt;/strong&gt; They are languages ​​that they specify the presentation or style of a document written in one of the aforementioned markup languages. (CSS, XSL-FO, DSSL...)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;Query languages:&lt;/strong&gt; They allow to extract or manipulate data from a group of information.(SQL, CQL, XQUERY, DMX)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;Transformation languages&lt;/strong&gt;: They act on an initial information to obtain another new. (XSLT, TXL, DMS...)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;Programming languages:&lt;/strong&gt;  They allow communication with hardware devices so that we can carry out a certain process. For this they can handle data structures stored in internal or external memory, and use control structures. They have a lexicon, and they have to follow rules syntactic and semantic. (Java, Javascript, C, C++, C#, Python...)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;On many occasions I have heard some web developers say that they "program" in programming language as HTML and CSS. This is incorrect, HTML and CSS are not programming languages, as we have seen. If you are one of those developers, don't say it again 😊. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Programming languages&lt;/strong&gt; ​​also have various forms of classification. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Distance to hardware.&lt;/li&gt;
&lt;li&gt;Generations.&lt;/li&gt;
&lt;li&gt;Programming paradigm.&lt;/li&gt;
&lt;li&gt;Way of translating into machine language and to run.&lt;/li&gt;
&lt;li&gt;Server-client architecture&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let's see it in more detail.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Classification of programming languages&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Distance to hardware
&lt;/h4&gt;

&lt;p&gt;Within this classification, there is another:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Low-level languages&lt;/th&gt;
&lt;th&gt;High-level languages&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;It is based directly on the electronic circuits of the machine. Programs written for one machine cannot be used on others, that is, it is not cross-platform. (Machine languages ​​and Assembly language.)&lt;/td&gt;
&lt;td&gt;They tend to get closer to human language and separate of the internal knowledge of the machine, that's why they need to be translated into machine language. This translation makes execution slower than in low-level languages ​​but without depending on the processor, they can be run in different computers. They are cross-platform languages (Modern programming languages)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Machine language&lt;/strong&gt; is &lt;strong&gt;binary code&lt;/strong&gt; (zeros and ones) and acts directly about hardware. It is the only language that does not need translation since the processor recognizes instructions directly.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Assembly language.&lt;/strong&gt; Coding in assembly language is &lt;strong&gt;mnemonic&lt;/strong&gt;, that is, uses labels to describe certain operations. It's just a translation of strings of 0 and 1 almost impossible to remember by names that allow you to identify the instructions. It is necessary to translate the assembly code into the machine language so that the processor recognizes the instructions.&lt;/p&gt;

&lt;p&gt;This is an example of the 3 + 5 &lt;strong&gt;addition operation&lt;/strong&gt; in &lt;strong&gt;assembly language&lt;/strong&gt;, &lt;strong&gt;machine language&lt;/strong&gt; and a general representation in &lt;strong&gt;high-level languages&lt;/strong&gt;. The machine code is represented in hexadecimal for having a shorter representation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F00e3zjn1co75dfpzysgh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F00e3zjn1co75dfpzysgh.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  By Generations
&lt;/h4&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Five generations&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;1st generation (1GL):&lt;/strong&gt; formed by the languages ​​of programming used in the first computers: machine and assembler language.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;2nd generation (2GL):&lt;/strong&gt; formed by language macroassembler which is the assembly language combined with control and operating instructions of more complex data. Each computer model has a language own assembler different from the others, for which the program can only be used on the machine to which was scheduled. They are still used to program the cores (kernel) of operating systems and drivers of some devices (device drivers).&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;3rd generation (3GL)&lt;/strong&gt;: made up of most of today's high-level languages. The code is machine independent and language programming is similar to human language.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;4th generation (4GL):&lt;/strong&gt; made up of languages ​​and environments designed for a very task or purpose specific as access to databases, report generation, interface generation user etc. For example: SQL, Informix 4GL, Progress 4GL.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;5th generation (5GL):&lt;/strong&gt; natural languages, formed for the languages ​​in which the programmer sets the problem to be solved and the conditions to comply. Mechanisms that allow communication between people and machines through languages natural It is used in artificial intelligence, systems based on knowledge, expert systems, mechanisms of inference or natural language processing. Examples: Prolog, Smalltalk and Lisp.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;In the next post, we will study the other classifications in more depth. See you soon.&lt;/p&gt;

</description>
      <category>computerscience</category>
      <category>devlive</category>
      <category>software</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
