Adapted from Full-Stack JavaScript in Six Weeks: A Curriculum Guide

Web development is one of the simplest and therefore popular areas among novice programmers. Any one is enough to work. text editor and the browser, there is no need to study algorithms at an advanced level, the result of each stage of writing a program is clear - in general, there are many advantages. A key skill in the context of web development is the knowledge of JavaScript.

Now JavaScript is developing very quickly, and therefore it is easy to get confused when learning the language. We offer you a well-structured curriculum that covers all the necessary aspects of JavaScript and related technologies.

Why JavaScript?

It is worth noting the openness of the language - companies, usually competing with each other, cooperate to develop JavaScript. The language is very flexible and will suit supporters of both object-oriented and functional approaches. A huge number of libraries and frameworks makes it easy to solve any type of task, and the Node.js server platform makes it possible to use the language not only in the browser, but also in the console. You can even write desktop and mobile applications: the first - using the Electron framework, and the second - in NativeScript or React Native.

Basics

First you need to learn the basic concepts of JavaScript, web development and programming in general:

• object-oriented JS - constructors and factories, inheritance;
• functional JS - higher order functions, closures, recursion;
• Jasmine test specifications;
• the basics of HTML, CSS and jQuery.

git

Git is an essential tool for developers, so you need to get started with it as early as possible. Here are the basic skills you need to have:

• creating and moving files in directories;
• initialization and commits in Git;
• setting up repositories in GitHub.

Algorithms and data structures

Then you should study algorithms (in particular, the concept of the complexity of algorithms), as well as basic data structures: linked lists, queues, stacks, binary search trees and hash tables. This will help you.

Backend

Node.js

10 years ago, JavaScript could only be used for front-end development. Now, thanks to Node.js, things are not limited to one “front”. Node is just a server-side JS code execution environment, so you don't have to learn new syntax, but you do need to import and export files, break code into modules, and use the npm package manager.

Servers, HTTP, Express.js

After learning Node, it's worth continuing your acquaintance with back-end development and understanding servers and routing. You can start with ports and protocols, with a focus on HTTP, and then move on to Express, a Node library for handling requests.

Asynchronous JavaScript

Databases, schemas, models and ORM

Databases are one of the most important elements of web development. If your application needs to load or store any data that is not lost when the page is refreshed, you will have to use a database. You need to learn to distinguish between relational and non-relational databases and understand the types of relationships. Then get to know different people. The ability to work with ORM will not be superfluous either.

Frontend

HTML and CSS

HTML and CSS are the backbone of the basics for any web developer. You do not need to know them perfectly, but you should understand them. You can also learn some popular library (like Bootstrap) and a CSS preprocessor like Sass to make your CSS look like normal code. To simplify working with HTML, you can choose one of the popular templating engines, such as pug.

jQuery and DOM manipulation

Creating the look and feel of the page HTML help and CSS, you will use the jQuery library to manipulate the DOM. Many people think that jQuery is useless and will soon be replaced by Angular and React, but it is insanely popular and therefore worth knowing. In addition, one day you will find yourself in a situation where it will be inconvenient for you to hammer nails with a React microscope, and then lightweight jQuery will come to the rescue.

Chrome Developer Tools

It would be unforgivable to neglect the Chrome tools, which provide a huge number of possibilities. With them, you can examine DOM elements, debug via the console, track routes, and much more. C describes several handy features of the Chrome console that will simplify the performance of routine tasks.

AJAX

If you want your application to not reload pages after every database operation, you definitely need AJAX - it sends background asynchronous HTTP requests, the responses to which only update part of the display. You can work with AJAX through jQuery using the .ajax method.

Programming is not just a way to earn big money and not even quite mental work. This is an opportunity to understand what the surrounding world consists of, decompose it into small particles, and then reassemble it, guided by your own logic and knowledge.

Programming languages ​​are just a tool with which a person builds rules in created systems.

The Internet presents a wealth of opportunities that bright and enterprising minds are seizing on. Of course, web development also has its own tools for bringing ideas to life. One of them is language. JavaScript programming which will be discussed in this article:

general information

Many people, even those who have nothing to do with the IT field, have heard the word Java. A revolutionary platform-independent language that applications are actively written for mobile systems. It was developed by the promising company Sun, which then came under the wing of Oracle. But neither company has anything to do with JavaScript:

Sun only needed permission to use part of the name. Surprisingly, JavaScript is not owned by any firm at all.

When writing web applications, JavaScript programming is used most often. Briefly listed key features given language, the following should be noted:

• Object orientation. Program execution is the interaction of objects;
• Data type conversion is done automatically;
• Functions are objects of the base class. This feature makes JavaScript similar to many functional programming languages ​​such as Lisp and Haskell;
• Automatic memory cleaning. The so-called garbage collection makes JavaScript look like C# or Java.

If we talk about the essence of using JavaScript, then this language allows you to "revive" stationary pages of sites using code that can be run for execution ( so-called scripts). That is, you can draw an analogy with cartoons, where html and css are drawn characters, and JavaScript is what makes them move.

If we talk about JavaScript syntax, then it has the following features:

• Register is important. The functions named func() and Func() are completely different;
• After the statements, you must put a semicolon;
• Built-in objects and operations;
• Spaces are not taken into account. You can use as many indents as you like, as well as newlines, to style your code.

The simplest JavaScript code looks like this:

Scope of application

In order to understand why JavaScript is needed, and how much it is necessary to study it, it is necessary to highlight some areas in which given language programming.

• Development of web applications. Do you want to set up a simple counter, organize data transfer between forms, or place a game on your site? Then JavaScript will act as a faithful assistant in this matter;
• "Active Participation" in AJAX. This technology made it possible to significantly speed up the work of applications by exchanging data with the server in the "background" mode:

• OS. Perhaps someone did not know, but Windows, Linux and Mac have their browser competitors, the lion's share of whose code is written in JavaScript;
• Mobile applications;
• Sphere of learning. Any programming specialty at the university includes the study of JavaScript in one volume or another. This is due to the fact that the language was originally developed for not very strong programmers. JavaScript lessons are logically woven into the basic HTML course, so mastering is quite simple.

Advantages and disadvantages

You should not think that JavaScript is some kind of panacea for all problems, and every programmer uses this language with a smile on his face. Everything in the world has its positive and negative sides. First, let's look at the shortcomings.

• The need to ensure cross-browser compatibility. Since JavaScript acts as an Internet technology, you have to put up with the rules that the World Wide Web sets. The code must run correctly in all, or at least the most popular, browsers;
• The inheritance system in the language makes it difficult to understand what is happening. JavaScript implements prototype-based inheritance. People who have studied other object-oriented programming languages ​​are accustomed to the familiar " child class inherits parent class". But in JavaScript, these things are handled directly by objects, and this does not fit in the head;
• Missing standard library. JavaScript does not provide any facilities for working with files, I/O streams, and other useful things;
• Syntax in general makes it difficult to understand. The beauty of the code is clearly not the strong point of JavaScript, but the main rule of programmers is observed: “ Working? Don't touch!».

Now it is worth noting some advantages

• JavaScript provides a large number of opportunities to solve a wide variety of problems. The flexibility of the language allows the use of many programming patterns in relation to specific conditions. An inventive mind will get real pleasure;
• The popularity of JavaScript opens up a considerable number of ready-made libraries for the programmer, which can significantly simplify writing code and level out syntax imperfections;
• Application in many areas. The wide possibilities of JavaScript give programmers a chance to try themselves as a developer of a wide variety of applications, and this, of course, fuels interest in professional activities.

Do not pay attention to the fact that there were more minuses than pluses. JavaScript is firmly entrenched in its niche, and no criticism of it from there on this moment won't beat.

For those who want to study

A difficult and long road lies ahead for those who have decided to thoroughly study JavaScript. For beginners, there are basic recommendations, following which, you can greatly simplify your training.

• First of all, HTML. You can't start doing anything for the internet without the basics. Cascading Style Sheets (CSS) are also very useful;
• Use new literature. Programming is not physics, the laws of which are inviolable, but new study guides- these are stripped-down old ones. IT technologies are constantly evolving, and useful updates should not be neglected;
• Try to write all parts of the program yourself. If something doesn’t work out at all, you can borrow someone else’s code, but only after clarifying each line for yourself;
• Debugging is your true friend. Finding errors quickly is one of the highlights in programming;
• Don't ignore formatting rules. Of course, the code will not become better or worse from a different number of indents and spaces, but the ease of reading and understanding by the programmer is also an important point. Code below? very difficult to perceive, especially if you are not his

• Variable names must have lexical meaning. In the process of writing simple programs it seems not at all important, but when the number of lines of code exceeds a thousand, all the devils break their legs;

Javascript is an ever-evolving language, especially now that the ECMAScript specification updates are set to be released annually. In this regard, the importance of knowing Javascript outside of jQuery is increasing.

Of course, in this article we will not be able to cover all the necessary amount of knowledge. Surely, there will be moments that I missed, perhaps I was mistaken, or our opinions on the required set of knowledge will differ.

Considering these aspects, let's start ...

What is FizzBizz test

FizzBizz is usually a small test aimed at weeding out inexperienced developers. I think you'd be surprised how many javascript developers don't know how to write such tests.

As a rule, such tests do not carry a large semantic load. It is aimed solely at testing the abilities of potential candidates.

Remember, the chances of you being asked to take a test like this in an interview are very high.

An example of a classic FizzBizz test:

The options for such tests are endless. Once, at an interview, I came across such a test, after which I had to decide two more options.

For (var i = 1; i<= 100; i++) { if (i % 15 == 0) { console.log("FizzBuzz"); } if (i % 3 == 0) { console.log("Fizz"); } if (i % 5 == 0) { console.log("Buzz"); } }

Difference between == and ===

You are probably familiar with both comparison operators. However, do you know how exactly these operators differ? Your Javascript Linter requires you to use the === operator, wonder why?

Does not compare the types of the operands; instead, it casts them to the same type. Such an operation has a negative reputation.

Console.log(24 == "24"); // true

As you can see, the string value 24 (in single quotes) has been cast to an integer type. Of course, there are situations when this is exactly what you want, but more often than not, you probably don't want the comparison operator to manipulate data types. Comparing data using the == operator is not recommended, most javascript code style checking systems will point you to this error.

=== (strict comparison) compares data types, without converting them to the same type, that is, the data will be compared as is. Also, since this operation does not involve type casting, it works faster. Thus, for this operator to work correctly, operators of the same type are required.

The same example, but with the === operator

Console.log(24 === "24"); // false

In response, we get false , since the operands are of different types, one of them is an integer type, and the second is a string type.

How to select DOM elements without additional libraries

Surely you are familiar with how to select elements with jQuery, but can you do the same without the help of this library?

I'm not just talking about selecting an element with a specific ID or set of classes, I'm talking about expressions for finding elements using jQuery.

There are several native methods for finding elements in the DOM that are just as good as jQuery. We can also use first-child , last-child , and so on.

Let's take a look at some of these methods.

• document.getElementById is the classic method for finding elements by their ID.
• document.getElementsByClassName - fetch elements by className field value
• document.querySelector is a great method that almost completely replaces jQuery's $() selector, but it's already included in Javascript. The only difference is that it only returns the first element it finds.
• document.querySelectorAll is similar to the previous method, but returns an array of found elements.
• document.getElementsByTagName - This method will help you select elements by tag name. If you need to find all div elements, then you need this method.

I also want to note that the querySelector and querySelectorAll methods can be used not only on the entire document, but also on individual elements, that is, you can make a selection within one parent element.

See the mozilla documentation for a complete description of these methods.

Hoisting variable and function declarations

Javascript is interesting in how it handles declared variables and functions, all of which are automatically raised to the top of the scope. This way you can refer to them before they are declared in scope (e.g. functions in javascript have their own scope).

Therefore, for readability of the code, make it a rule to ALWAYS declare variables at the beginning of the scope. If you specify 'use strict' at the top of a script or function, you will get an error when accessing an undeclared variable.

Most code style checking tools like Jshint will give you an error if you don't use 'use strict' , so if you're trying to write good code you won't be able to use variables before they're declared anyway. As always, if you have any questions, please refer to the documentation from mozilla, there you will always find a complete and exhaustive description of your problem.

Using developer tools in the browser

Most often, such tools are used to debug javascript scripts, but their functionality is not limited to this. For example, you can use a breakpoint, step through your script, stepping into each function while doing so.

These tools are indispensable help, as you can fully monitor the performance of your application and find problem areas.

By learning how to use the developer tools in browsers such as Chrome, Firefox and the latest versions of Internet Explorer, you can debug your script, measure its performance and find places where it is worth improving the algorithm.

Never try to debug code blindly, always analyze it first with developer tools. Solving problems that don't exist is a waste of time.

Console commands

Let's move on to the next point in learning about developer tools. Typically, they all offer a console where you can execute Javascript code interactively.

You are probably already familiar with commands like console.log and console.error , but the functionality of the console is not limited to this.

I want to note right away that not all of the listed commands will work in all browsers. I will try to mention only those that work in modern browsers. However, as a piece of advice, I’ll say that before using them, try to check their performance yourself so as not to pile up the code in vain.

• console.log - used for logging events. Supports formatting.
• console.error - for logging errors in code. I use this command when there are errors in AJAX requests and in other potentially dangerous parts of the code. The method is similar to the previous one, but it prints a list of stack calls.
• console.dir(object) - Displays the formatted contents of the object. As a rule, this method is very useful when debugging code.
• console.group(title) - allows you to create a group of log messages called title. Thus, you can group messages, for example, according to the section of code where they are generated.
• console.groupCollpased is similar to the previous command with one exception. Namely, it displays messages in a collapsed form.
• console.groupEnd - Ends a previously created group.
• console.time(label) - allows you to track the speed of the site in milliseconds. The method is useful for catching potentially difficult sections of code.
• console.timeEnd(label) is similar to the groupEnd method, but it works in relation to console.time().
• copy(string) - There is a method in the Chrome and Firefox console that allows you to copy the contents of a string to the clipboard. Very useful method, try it out.

What exactly is contained in this

First of all, this is a big source of problems for those who do not fully understand what exactly is contained behind this keyword. And it is very easy to make a mistake in this, since its content depends entirely on the structure of the code.

In traditional programming languages, this holds a reference to the current class object. But since javascript is far from traditional, in it this variable refers to the parent object of the method.

The easiest way to understand this is to take it as the owner or parent of a method. this always refers to the parent, except when you use the call , apply , or bind methods.

In the following example, this refers to the window object:

Function myFunction() ( console.log(this === window); // true ) myFunction();

Surely you have a question, how can this be equal to window if we refer to it within the method? If you know the answer to this question, then great, otherwise read on and I will try to explain.

When a function is declared in this way, it is bound to the global window object. Remember when we said that this refers to the method's parent?

Changing the value of this to a completely new object (not window):

Function myFunction() ( console.log(this === window); // false ) new myFunction();

Proponents of code cleanliness are probably shocked by such an example. We are just walking on the tip of the iceberg with such examples. As you can see for yourself, the value of this is no longer equal to window .

Why did it happen?

The simplest explanation is that in the second example we used the keyword new , thereby creating a new scope and a new object.

In the following example, we will create a dummy API to upload data from a library from a server. We will create an API object with some methods.

When using the word new , the script context moves from the window context to the API .

Var API = ( getData: function() ( console.log(this === window); // false console.log(this === API); // true ) ) ; API.getData();

As you can see, the this value is completely set by the way the method is called. Since the function is called within the API object, its parent, the this value refers to the API object.

Remember, the value of this changes. It changes depending on how you call it, but if you use the bind method, then the value of this remains the same.

You can learn more about the this keyword in javascript in the Quirksmode article and the documentation from Mozilla.

'use strict';

As we mentioned earlier, user strict is used to enforce a stricter version of the javascript language. This directive should be used in all scripts.

By default, javascript is pretty loose in its syntax. It will simply skip the erroneous piece of code and try to execute subsequent lines without telling you anything.

There is a whole article in mozilla's documentation on this topic, I highly recommend you read it.

Different types of cycles

You will be surprised, but I have met a huge number of developers who did not know how to properly use the for loop and absolutely did not hear about other types of loops. And being able to loop on an array or object is a very important skill for a developer. There is no clear instruction when and what type of cycle to use, but you should be guided in this matter. You are probably familiar with for and while, but what about others?

List of loops in javascript:

• for..in
• for..of (added in ES6)
• forEach
• while
• do..while

for loop

An absolutely obligatory cycle that you need to know and understand. HE executes his body when condition 2 is met.

For (condition 1; condition 2; condition 3) ( // Your code )

Condition 1 - is met once before the start of a series of cycles. In most cases, you will initialize the loop counter here. This item can be skipped if you have performed initialization earlier.

Condition 2 - This condition is used to determine whether to continue the loop or not. You will probably be comparing your counter with the size of the array here. If the comparison value is true, then the loop continues. If you break the loop internally with break, then this condition can be skipped.

Condition 3 - this section is executed after each iteration, as a rule, this is where you increase your counter.

for...in loop

The next most important type of cycle. With it, you will be able to go through all the fields of the class.

Let's take an example.

Var person = ( firstName: "Dwayne", lastName: "Charrington", age: 27, starSign: "Aquarius") ; // The below loop will output: // "Dwayne" // "Charrington" // 27 // "Aquarius" for (var p in person) ( if (person.hasOwnProperty(p)) ( console.log(person[ p]); ) )

for...of loop

A fairly new loop type was added in ES6. Due to its novelty, it is not supported by all browsers. But with the use of certain technologies, it is quite possible to apply it today.

This loop is the exact opposite of for...in , it iterates over field values ​​and only works with data types that support iteration, which Object is not.

Var fruits = ["orange", "apple", "squash", "pear"]; for (var fruit of fruits) ( console.log(fruit); )

The big advantage of this type of loop is that we no longer need to create a pointer and keep track of the length of the array in order to completely iterate through its elements.

forEach loop

Another type of cycle, which in its depth is no different from the previously listed types of cycles.

It only works with arrays, not objects. It has the advantage that you don't have to create extra variables that end up polluting your code.\

This is probably the most limited type of cycle, but it has its own areas of application that you should be aware of:

Var fruits = ["apple", "banana", "orange", "grapes", "pear", "passionfruit"]; // The three values ​​on the callback function are: // element - The element being traversed // index - The current index of the item in the array starting at 0 // array - The array being traversed (probably mostly irrelevant) fruits. forEach(function(element, index, array) ( console.log(index, element); ) );

Sometimes you just need to go through all the elements in an array and maybe make some changes to them. Its behavior is similar to jQuery.each.

One disadvantage of this type of cycle is that it cannot be interrupted. If you need to create a loop according to ES5 rules, then use the Array.every method, which you can find in the mozilla documentation.

while loop

The while loop is similar to for , but it takes only one parameter - the condition itself, according to which the loop determines whether to continue iteration or stop them.

Although this type of cycle is considered the fastest, I find this point rather controversial. I think you will not argue that this type of loop does not look neater than others, and its speed can only be explained by the simplicity of the internal logic.

In my experience, the fastest while loop is the decrementing loop, you decrement it by one until you get to zero (which is also debatable).

Vari = 20; while (i--) ( console.log(i); )

do...while loop

Such a cycle is quite rare, but it is still worth getting acquainted with it in order to understand its work.

The while loop may not complete any iterations. That is, if you pass a false value as a condition to the loop, then not a single iteration will be performed. The do...while loop is guaranteed to execute at least one operation.

The difference doesn't end there. The while loop processes the condition before iteration, and the do...while loop after.

As always, in the documentation from mozilla you will find a detailed description of this kind of loops.

Basic Methods and Tasks

There are basic methods in javascript that you should be aware of. With respect to working with arrays and strings, javascript offers a large set of built-in methods. We will only touch on arrays and strings, leaving objects for later.

If you are interested in working with other data types, then feel free to refer to the mozilla documentation. Of course, one should not know all these methods by heart, I will describe only those that I consider necessary.

Working with strings

In JavaScript, you will most often work with string data, with the possible exception of arrays and objects. Even if you don't work with strings, or think you don't, it's still worth getting to know these methods.

• String.replace(regexp | what to replace, what to replace with, callback) - allows you to replace part of a string, regular expressions are allowed.
• String.concat(line 1, line 2...) - concatenation of several lines into one.
• String.indexOf(value) - the method allows you to find the ordinal number of the character of the desired part of the string, -1 - if the string is not found
• String.slice(startIndex, endIndex) - returns the section of the string from startIndex to endIndex
• String.split(separator, limit) - splits the string into an array by the separator character, the maximum length is the limit.
• String.subsctr(startIndex, length) - returns the part of the string starting at startIndex with length length.
• String.toLowerCase - Converts all characters in a string to lowercase
• String.toUpperCase - convert all characters of the string to uppercase
• String.trim - remove spaces from the beginning and end of a string

Working with arrays

You will encounter arrays very often. They have proven themselves as a way to store data. These methods are definitely worth knowing for any javascript developer, don't google them.

• Array.pop - Returns the last element and removes it from the array.
• Array.shift - Returns the first element and removes it from the array.
• Array.push(val1, val2) - adds one or more values ​​to the end of the array. Returns the new length of the array.
• Array.reverse - reverses the order of array elements.
• Array.sort([comparison function]) - allows you to sort an array using your own function.
• Array.join(separator) - Returns a string consisting of the elements of an array separated by the separator character (comma by default).
• Array.indexOf(value) - Returns the index of the element in the array, -1 if the element is not found.

This is not a complete list of methods for working with arrays. Others can be found in the mozilla documentation. Since ES6 some very interesting methods have been added.

Difference between call and apply

Developers often confuse these two methods. You can often do without them, but they help you call methods and change the this value during execution.

The difference between them is very small, but it exists. When using the call method, you can specify an infinite number of arguments by separating them with a comma.

With the apply method, you can pass arguments as an array and change the value of this .

If you just need to pass an array as arguments to a method, then since ES6 an extended (spread) operator has been added. It does not allow you to change the value of this . You can get acquainted with it, as always in the official documentation from mozilla.

call example:

Function myFunc() ( console.log(arguments); ) myFunc.call(this, 1, 2, 3, 4, 5);

apply example:

Function myFunc() ( console.log(arguments); ) myFunc.call(null, );

Introduction to libraries and frameworks

Today, the most notable representatives of javascript frameworks are AngularJS, React.js and Ember. Of course, there are a number of others.

As web applications get bigger and bigger, these libraries make it easier to work with. It should be understood that now knowing jQuery alone is clearly not enough. In most vacancies, knowledge of additional javascript libraries is exhibited as a basic requirement.

Node.js

There is no doubt that Node.js is in a strong position. Almost any front-end tool is built on node.js and uses npm (node ​​package manager), if you are unfamiliar with it, then I strongly advise you to correct this omission. Since node.js uses javascript, learning it is not too difficult for those who are already familiar with this language. You will spend more time setting up node packages than writing the actual code.

Personally, I think that Node should be familiar to every developer in 2015. I'm not talking about deep knowledge, it's enough to be able to apply it for server-side development, prototyping, testing, etc.

There is a fork of node.js called IO.js, which is pretty much the same today, and at the end of the day, you just write Javascript with a few minor differences.

Testing

Once upon a time, we did not test the javascript code at all, because we did not consider it necessary. But scripts are getting bigger and bigger thanks to AngularJS and Node.js.

Javascript is evolving and the volume of scripts is increasing and testing becomes vital. If you don't test your code, then you're doing it wrong. My favorite tester is Karma. There are others, but this one has proven itself the best when working with AngularJS. And if it is suitable for AngularJS, then it is suitable for me.

Tools

Being a javascript developer in 2015 means not only excellent knowledge of the language, but also a large number of tools for working with it.

Sometimes the tools include the browser itself that we use. And sometimes you have to turn to third-party tools to get a deeper analysis of the situation.

Here's a set of tools to keep in mind: Gulp, Webpack, and BabelJS. There are many more tools out there, but tools like Gulp and Grunt greatly help you develop and manage javascript applications.

Gone are the days when you just download a javascript file and add it to your page. We now use the NPM or Bower package managers.

We combine and minify scripts, test them, which helps to organize the structure of the project.

Javascript tools go hand in hand when developing isomorphic Javascript (code used on both client and server side). ECMAScript 6, aka ES6, aka ESNext

Browsers have yet to implement most of the functionality of ECMAScript 6. But today you can use the novelties from ES6 with the help of javascript compilers. Get to know the new APIs and methods: strings, arrays and other methods like WeakMaps, Symbols and Classes. You should always be aware of upcoming changes.

Conclusion

I can tell you a lot more. Judging by the size of this article, you can imagine how much a javascript developer needs to know. We've only touched the tip of the iceberg. Do not think that this article should be taken as a guide for the developer. This is just my personal vision of the problem.