JavaScript for beginners

Solutions for problems that JavaScript newbies face
25 July 2017   1450
JavaScript

Lightweight interpreted or JIT-compiled programming language with first-class functions

JavaScript ("JS" for short) is a full-fledged dynamic programming language that is applied to an HTML document, and can provide dynamic interactivity on websites. It was developed by Brendan Eich, co-founder of the Mozilla project, Mozilla Foundation and Mozilla Corporation.

You can do a lot with JavaScript. You can start with small, simple functions, such as carousels, image galleries, changing layouts and a response to the pressing of buttons. When you become more experienced in the language, you can create games, animated 2D and 3D graphics, full-scale applications with databases and much more!

JavaScript itself is fairly compact, but very flexible, and developers have written many tools on top of the main JavaScript language, which unlock a huge number of additional functions with very little effort.

JS is one of the most popular programming languages in the world. Therefore, this is one the most popular programming language that beginners would like to learn. We’ve made a research and found out, what are the main issues that beginners face when learning JavaScript are:

  • javascript array
  • javascript switch
  • javascript substring
  • javascript map
  • javascript foreach
  • javascript date

Let's go thru this list and find out, what difficulties can newbies face and how to solve them.

JavaScript Array 

Array is a type of object that is intended for storing numbered values and offers additional methods for convenient manipulation of such a collection.

They are usually used to store ordered collections of data, for example - a list of products on the page, students in a group, etc.

If you have a list of items (a list of cities names, for example), storing the city names in a single variables could look like this:

var car1 = "Moscow";
var car2 = "London";
var car3 = "Paris";

However, what if you want to go through the cities and find a specific one? And what if you had not 3 cities, but 300? The solution is an array! An array can hold many values under a single name, and you can access the values by referring to an index number.

You can learn more at:

  • W3Schools
  • Tutorials Point
  • LearnJSRu

JavaScript Switch 

The switch construct replaces several if at once. It is a more visible way to compare the expression with several options at once.

Let's have a look at it:

switch(x) {
  case 'val1':  // if (x === 'val1')
    ...
    [break]

  case 'val2':  // if (x === 'val2')
    ...
    [break]

  default:
    ...
    [break]
}
  • X is checked for strict equality to the first value of val1, then to the second val2 and so on.
  • If the match is set - the switch starts executing from the appropriate case directive and then to the next break (or until the end of the switch).
  • If no cases match, the default option is executed (if any).

You can learn more at:

  • W3Schools
  • LearnJSRu
  • Mozilla

JavaScript Substring

In JavaScript, any text data is a string. There is no separate type of "symbol", which is in other languages.

You can create string in this way:

var text = "my string";

var anotherText = 'my string 2';

var str = "012345";

In JS, there are 3 methods for taking substring, with slight differences between them: substr, substring, slice.

substring (start, end) method returns a substring from the start position to, but not including, end.

var str = "stringify";
alert(str.substring(0,1)); // "s"

If there is no end argument, it goes to the end of the line. 

var str = "stringify";
alert(str.substring(2));

Learn more about sting and substing in JS here:

  • W3Schools
  • LearnJSRu
  • Mozilla

JavaScript Map

Map allows to store records like key: value.

Unlike objects in which keys can only be strings, the Map key can have an arbitrary value, for example:

'use strict';

let map = new Map();

map.set('1', 'str_1');   
map.set(1, 'num_1');    
map.set(true, 'bool_1');

alert( map.get(1)   ); // 'num_1'
alert( map.get('1') ); // 'str_1'

alert( map.size ); // 3

As you can see from the example above, get and set methods are used to store and read values. Both keys and values are stored "as is", without type conversions.

The map.size property stores the total number of records in map.

Learn more about JS Map here:

  • W3Schools
  • LearnJSRu
  • Mozilla

JavaScript forEach

Method arr.forEach (callback [, thisArg]) is used to enumerate the array. It calls the callback function for each element of the array.

This function passes three parameters callback (item, i, arr):

  • Item is the next element of the array.
  • I is his number.
  • Arr is an array that iterates.

For example:

var arr = ["Apple", "Orange", "Lemon"];

arr.forEach(function(item, i, arr) {
  alert( i + ": " + item + " (array:" + arr + ")" );
});

The second, optional argument forEach allows you to specify the this context for the callback. TheforEach method returns nothing, it is used only for enumeration, as an "elegant" option than the usual for loop.

  • W3Schools
  • LearnJSRu
  • Mozilla

JavaScript Date

Date objects are used to work with the date and time in JavaScript.

To create a new Date object, use one of the syntaxes:

new date ()
Creates a Date object with the current date and time:

var now = new Date ();
alert (now);

new date (milliseconds)
Creates a Date object whose value is equal to the number of milliseconds (1/1000 seconds) since January 1, 1970 GMT + 0. 

// 48 hours since 01.01.1970 GMT+0
var Jan02_1970 = new Date (3600 * 48 * 1000);
alert (Jan03_1970);

new date (datestring)
If a single argument is a string, use the Date.parse call to read the date from it.

new date (year, month, date, hours, minutes, seconds, ms)
You can create a date using the components in the local time zone. For this format, only the first two arguments are required. Missing parameters, starting with hours are considered equal to zero, and date - to one.

Note:

  • The year must be 4 digits.
  • The month count starts from zero 0.

For example:

new date (2012, 0, 1, 0, 0, 0, 0); // // January 1, 2012, 00:00:00
new date (2012, 0, 1); // same, hours / seconds defaults to 0

The date is specified to within milliseconds:

var date = new date (2012, 0, 1, 2, 3, 4, 567);
alert (date); // 1.01.2012, 02: 03: 04.567

  • W3Schools
  • LearnJSRu
  • Mozilla

Visual Studio Code 1.30 Released

The solution has received new features, as well as improved support for JavaScript and TypeScript
14 December 2018   57

Microsoft has released the development environment Visual Studio Code 1.30. The tool has received new features, as well as improved support for JavaScript and TypeScript.

The search tool in the new version of the editor allows you to make multi-line queries. You can add a new line to the query by pressing Shift + Enter or simply by pasting text from the clipboard.

Custom headers and menu items in Linux are now activated by default. Since some menus may go beyond the boundaries of the screen, the developers added the ability to scroll.

Menu items designed to work with the settings have been moved to the title bar of the editor.

In the snippet, new comment variables are implemented, allowing to leave lines or blocks of notes based on the language of the code.

Also, the developers added the Go to Declaration and Peek Declaration commands to Visual Studio Code 1.30 in addition to the existing Go to Definition and Peek Definition. This is due to the fact that in some languages ​​the concepts of definition and declaration are fundamentally different.

In Visual Studio Code 1.30, you can work with TypeScript 3.2.2. Display of callbacks in JavaScript and TypeScript is improved. The new version of the editor displays which function they belong to.

The developers have improved the integration with the repository. In the new version of the program, you can change the tool that opens the file by clicking on the version control panel.

The Visual Studio Code 1.30 error detection and removal tool allows you to delete debug consoles for inactive sessions. Improved concept of variable substitution in launch.json configuration. The initial debug configuration itself has been simplified by hiding minor elements and adding a Quick Pick interface.

You can set the task to run automatically when you open the project folder. In addition, several new tasks have been added to the task management command section, for example, Tasks: Rerun Last Task, which allows you to restart the previous process.