Video tutorials from WebMagisters. Douglas Crockford "JavaScript: Strengths"

Selection of materials for learning JavaScript for any level of training - we have collected useful resources, which are suitable for both beginners and professionals.

Beginner Marijn Haverbeke "Expressive JavaScript"

The book touches on the fundamental concepts of not only JS, but programming in general. In addition to studying theory, the author will offer to implement several interesting practical projects. For example, create your own programming language.

JavaScript Jedi course from Sorax

Video course from famous programmer and a teacher named Sorax is great for starting to learn JS.

Video tutorials from WebMagisters

Another excellent video course in Russian that will tell you about the basics of JS and how to properly use it in web development.

JavaScript30

English-speaking 30-day practical course by JS. The author does not rely heavily on theory, but from the first lesson he suggests writing interesting projects, which become more difficult from lesson to lesson.

For those who know the basics Modern JavaScript tutorial

An interactive tutorial that will be equally useful to both a beginner and a programmer who has studied the basics. It contains many subtleties and tricks regarding the work of JS and DOM.

Eddie Osmani "Patterns for Scalable JavaScript Applications" JavaScript. Templates

This book is also a guide to a large number practical examples and a complete guide to basic concepts. Recommended for programmers who need to learn a web programming language, as well as programmers who already use JS and want to master it perfectly.

Douglas Crockford "JavaScript: strengths»

JS - far from it best language programming, especially when it comes to its optimization. Since it was created in a hurry, it has a lot weaknesses and terrible designs. This is exactly what the author proposes to talk about on the pages of his book, and at the same time understand what determines the strengths of the language and how this will help create truly extensible and effective code.

McLaughlin B. “Learning AJAX”

A book for those who want to better understand how AJAX works. Recommended for anyone who wants to take their creation to the next level interactive applications for the web.

Tom Coleman & Sasha Greif "Discover Meteor." Building Real-time JavaScript Web Apps"

The book is dedicated to Meteor.js - a framework that is built on the basis of Node.js and is essentially a fast layer between the interface and the database. It allows you to create truly interactive JS applications and use a single code on both the server and the client.

Meteor.js Documentation

Meteor.js documentation translated by the community into Russian.

Mark Bates "CoffeeScript. JavaScript's second wind"

If you already know and use CoffeeScript in your work, then this book will help you do your job better. And if not, it will be an excellent guide and the main reference book on the topic. The publication is intended primarily for web developers using JS, as well as all those who want to write high-quality and understandable code.

Maximiliano Firtman “jQuery Mobile. Development of applications for smartphones and tablets"

The book talks about creating dynamic web applications using JS, AJAX and jQuery libraries. It also pays attention to the creation of applications with the ability to work autonomously offline.

We have collected several excellent guides on the Internet for working and learning Angular.js and present them to your attention.

Continuation of the selection of materials on Angular, this time with links to various useful sources, such as the presentation of the framework version 2 (to find out what has changed and appeared in new version framework from the original source), as well as interesting podcasts and other materials that may be useful in learning Angular.js.

Video tutorials on Node.js

A short video course on Node.js - suitable for those who are completely unfamiliar with this framework and for those who want to refresh their knowledge about it.

Video tutorials on CoffeeScript from Sorax.

Another series of tutorials from Sorax, this time for more advanced JS users who want to get familiar with CoffeeScript. Great to watch right after the vanilla JavaScript course.

Book "Surrealism in JavaScript".

An excellent guide for those who like to learn new things through practice - the book will tell you how to create complex applications such as games using JS.

At a Glance: In Part 1 of the Modern JavaScript Concepts Handbook series, we'll introduce functional programming (FP), reactive programming (RP), and functional reactive programming (FRP). To do this, we will learn about purity, state and statelessness, immutability and mutability, imperative and declarative programming, higher order functions, observables and the FP, RP, FRP paradigms.

Introduction

Behind last years JavaScript has evolved a lot and doesn't think it will stop there. However, many concepts born in JS blogs and documentation remain unclaimed by a wide range of interface developers. In this series of articles, we'll explore concepts that require both intermediate and advanced levels of knowledge, and how they fit into modern JavaScript.

Concepts

In this article, we'll cover concepts that are critical to understanding functional programming, reactive programming, and functional reactive programming and how to use them with JavaScript:

Purity: pure functions, impure functions, side effects
Condition: with and without it
Immutability and changeability
Imperative and declarative programming
Higher Order Functions
Functional programming
Observables: hot and cold
Reactive Programming
Functional Reactive Programming

Purity Pure functions

The return value of a pure function depends only on its input data (arguments) and does not entail any side effects. With the same input argument, the result will always be the same. Example:

Function half(x) (
return x / 2;
}

The half(x) function takes a number x and returns the value of half x . If we pass an argument of 8 to this function, it will return 4. Once called, a pure function can always be replaced by the result of its work. For example, we could replace half(8) with 4: wherever this function is used in our code, the substitution would have no effect final result. This is called referential transparency.

Pure functions depend only on what is passed to them. For example, a pure function cannot reference variables in its parent's scope unless they are explicitly passed to it as arguments. Even then, the function cannot change anything in its parent scope.

Var someNum = 8;

// this is NOT a pure function
function impureHalf() (
return someNum / 2;
}

Pure functions must take arguments.
The same inputs (arguments) will always produce the same outputs (return the same result).
Pure functions are based only on the internal state and do not change the external one ( note: console.log changes global state).
Pure functions do not produce side effects.
Pure functions cannot call impure functions.

Impure functions

An impure function changes state outside its scope. Any functions with side effects(see below) are unclean, just like procedural functions without a return value.

Consider the following examples:

Side effects in JavaScript

When a function or expression changes state outside of its context, the result is a side effect. Examples of side effects: calling an API, manipulating the DOM, outputting an alert, writing to a database, and so on. If a function produces side effects, it is considered unclean. Functions that cause side effects are less predictable and harder to test because they cause changes outside their local scope.

To sum it up: cleanliness

A lot of good code consists of impure functions procedurally called by pure ones. This still has a lot of benefits for testing and immutability. Referential transparency also has the convenience of memoization: caching and storing the results of function calls, and then reusing the cached results. However, determining when functions are truly pure can be difficult.

Additional information on cleanliness can be found in the following resources:

Pure or impure functions
Functional Programming: Pure Functions

State

State — information that a program has access to and can work with at a certain point in time. This includes data stored in memory, I/O ports, databases, and so on. For example, the contents of variables in an application in any this moment time is representative of the state of the application.

With a fortune

Stateful programs, applications, or components store current state data in memory. They can change the state and also have access to its history. The following example demonstrates this:

Var number = 1;
function increment() (
return number++;
) // global variable is changed: number = 2

increment();

No state

Stateless functions or components perform tasks as if they were being run for the first time each time. They do not reference or use previously created data in their execution. Statelessness provides referential transparency. Functions depend only on their arguments and do not have access to or need to know anything outside their scope. Pure functions have no state. Example:
Var number = 1;
function increment(n) (
return n + 1;

Stateless applications still manage state. However, they return to their current state without changing the previous state. This is the principle of functional programming.

To sum it up: condition

Wealth management is important for anyone complex application. Stateful functions or components change the state and its history and are more difficult to test and debug. Stateless functions rely only on their inputs to produce outputs. A stateless program returns new state rather than modifying existing state.

Additional status information can be found at the following resources:

State
Benefits of Stateless Programming
Components with and without states, missing manual
Redux: Predictable State Container for JavaScript Applications

Immutability and changeability

The concepts of immutability and mutability are more nebulous in JavaScript than in some other programming languages. However, you will hear a lot about immutability when reading about functional programming in JS. It's important to know what these terms mean in a classical sense and how they are implemented in JavaScript. The definitions are quite simple:

Immutable

If an object is immutable, its value cannot be changed after it is created.

Changeable

If an object is mutable, its value can be changed after creation.

Implementation: Immutability and Mutability in JavaScript

IN JavaScript strings and numeric literals are implemented immutable. This is easy to understand if we consider how we work with them:

Var str = "Hello!";
var anotherStr = str.substring(2);
// result: str = "Hello!" (not changed)
// result: anotherStr = "llo!" (new line)

Using the .substring() method on our Hello! , the string does not change the original string. Instead she creates new line. We could redefine the value of str to something else, but once we've created our Hello! , it will forever remain Hello! .

Numeric literals are also immutable. The following example will always have the same result:

Var three = 1 + 2;
// result: three = 3

Under no circumstances can 1 + 2 become anything other than 3.

This demonstrates that JavaScript has an implementation of immutability. However, JS developers know that the language allows you to change a lot. For example, objects and arrays are mutable. Consider the following example:

Var arr = ;
arr.push(4);
// result: arr =

var obj = ( greeting: "Hello" );
obj.name = "Jon";
// result: obj = ( greeting: "Hello", name: "Jon" )

In these examples source objects changed. New objects are not returned.

To learn more about mutableness in other languages, check out Mutable and Immutable Objects.

In Practice: Mutability in JavaScript

Functional programming in JavaScript is growing well. But at its core, JS is a highly fluid language, consisting of many paradigms. Key Feature functional programming — immutability. Other functional languages will throw an error when a developer tries to change an immutable object. Then how can we reconcile the inherent mutability of JS when writing functional or functional reactive JS?

When we talk about functional programming in JS, the word "immutable" is used a lot, but it is the responsibility of the developer to always keep it in mind. For example, Redux relies on a single immutable state tree. However, JavaScript itself is capable of modifying the state object. To implement an immutable state tree, we need to return a new state object every time the state changes.

To demonstrate the concept of observables, let's look at a simple example: resizing a browser window. In this context, observables are as clear as possible. Browser window resizing emits a stream of events during certain period time (while the window is receiving right size). We can create an observable and subscribe to it to respond to a stream of resize events:

The code example above demonstrates that as the window size changes, we can limit the observable stream and subscribe to its changes to respond to new values in the collection. This is an example of a hot observable.

About this guide

The reference book is intended for people who have already mastered the basics of programming in JavaScript.

The directory was created on the basis of information provided on the website “Directory of Web Languages” www.spravkaweb.ru.

Due to this resource constantly replenished new information, download updated version reference book can be found in the Download section

Also on the site, reference books on PHP, CSS, Perl, MySQL are available for download.

A joint using HTML and JavaScript

. . . Script text

Attribute language

Second attribute src

turns into single:

Tag

Rules for writing scripts

First of all, we need to consider the tag. This tag is used to insert scripts into the HTML code of the page. Its format:

. . . Script text

The script text is placed inside the tag

Attribute language allows you to specify in which programming language the script is written.

The default value is "JavaScript".

Internet Explorer scripts written in VBScript language, which corresponds to the value of the "VBScript" attribute.

Navigator allows you to set the JavaScript interpreter version:

This can come in handy in cases where you use the option JavaScript language, specific to a particular version.

The following table shows the versions of the JavaScript interpreter and their correspondence different versions Navigator:

Second attribute src serves to specify the address of the file containing the script.

In this case, usually the paired tag turns into a single tag:

js- standard extension for JavaScript files.

But what happens if the Web browser does not support scripts? (For example, it's too old version program, or the user has disabled script support in the security settings.) The Web browser will ignore the tag and display the script text.

To avoid this, it is recommended to enclose the script inside a tag in a comment.

However, some versions of Navigator do not “see” the script in this case, although, according to technical manuals Netscape itself should. So this tip only applies to Internet Explorer.

Alternatively you can use the .

This tag is supported by Internet Explorer and Navigator:

. . . Text to display if the Web browser does not support scripts

The tag can be placed anywhere in the text of the page, even outside the . Text placed inside this tag will be displayed instead of the entire page. That is, a user of a Web browser with script support disabled will see only this text in the window and nothing else.

Document object model

It should be noted that JavaScript supports so-called external classes and objects defined by other programs. The Web page that you view in a Web browser window can be described as a collection of objects. Let's say it includes large object"document-as-a-whole" and smaller objects: "paragraph-1", "paragraph-2", "paragraph-1" and "figure". You can access these objects from the same JavaScript.

Figure.MoveForward;Paragraph-1.Width = 80%;Paragraph-3.Show;

Of course, this is being greatly exaggerated, but the principle is this.

For example, consider the script:

var d;d=new Date();document.write(d.toString());

Document document- this is our “document-as-a-whole”. A write- its method that inserts the text passed as a parameter into the current location of the HTML document.

The collection of objects that describes a web page, with all their methods and properties, is called the document object model. A technology for creating a web page, in which regular HTML code is combined with JavaScript code, and the latter controls the page using object model, is called dynamic HTML (DHTML).

document object

activeElement

alinkColor

Example:

characterSet

compatMode

defaultCharset

designMode

documentElement

fileCreatedDate

fileModifiedDate

fileSize