JavaScript for beginners

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

What is Vim.Wasm?

Small introduction to Vim port to WebAssembly with screenshot and developer notes
16 July 2018   91

Vim.wasm is experimental fork of Vim editor to compile it into WebAssembly using emscripten and binaryen.

Developer added some notices:

  • Please access from a desktop browser (Chrome/Firefox/Safari/Edge). Safari seems the best on macOS.
  • Please avoid mobile networks. Your browser will fetch some large files (up to 2.5MB).
  • vim.wasm takes key inputs from DOM keydown event. Please disable your browser extensions which affect key inputs (incognito mode would be the best).
  • This project is very early phase of experiment. Currently only tiny features are supported. More features will be implemented (please see TODO section). And you may notice soon on trying it... it's buggy :)
  • If inputting something does not change anything, please try to click somewhere in the page. Vim may have lost the focus.

The goal of this project is running Vim editor on browser by compiling Vim C sources into WebAssembly. 

Vim.wasm screenshot
Vim.wasm screenshot 

WebAssembly frontend for Vim is implemented as a new GUI frontend. C sources are compiled to each LLVM bitcode files and then they are linked to one bitcode file vim.bc by emccemcc finally compiles the vim.bc into vim.wasm binary using binaryen and generates HTML/JavaScript runtime.

You can find more info at GitHub.