JavaScript for beginners

Solutions for problems that JavaScript newbies face
25 July 2017   1958
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

Cinnamon 4.2 to be Available

A new release of Cinnamon will be offered in the Linux Mint 19.2 distribution, which is scheduled for release in the nearest future
01 July 2019   325

After nine months of development, a release of the Cinnamon 4.2 user environment has been formed, within which the Linux Mint distribution developer community is developing fork of the GNOME Shell shell, Nautilus file manager and window manager Mutter, aimed at providing the classic GNOME 2 environment with support for successful interaction elements from GNOME Shell . Cinnamon relies on GNOME components, but these components are shipped as a periodically synchronized fork, not bound by external dependencies to GNOME.

A new release of Cinnamon will be offered in the Linux Mint 19.2 distribution, which is scheduled for release in the coming months. In the near future, packages will be prepared that can be installed in the Linux Mint and Ubuntu from the PPA-repository, without waiting for the new version of Linux Mint.

These are main features:

  • New widgets for creating configurators, simplifying the writing of configuration dialogs and making their design more complete and consistent with the Cinnamon interface was added
  • The search bar is moved to the top in MintMenu, .
  • The Nemo file manager simplifies the process of sharing directories with Samba.
  • Some changes are ported to the Muffin window manager from the Metacity window manager developed by the GNOME project.
  • An applet for printing has been added to the main composition, which is now launched by default.
  • Some internal components were reviewed and simplified, such as DocInfo (processing of recently opened documents) and AppSys (parsing application metadata, identifying application icons, defining entries for menus, etc.)

Get more info at GitHub and Linux Mint blog.