The book "Front-end. Customer development for professionals. Node.js, ES6, REST »

The book covers all the essential JavaScript, HTML5, and CSS3 skills that a developer needs to succeed in creating modern client code. Studying this book, you will write four web applications. Each application is devoted to a separate part of the book, and each chapter adds new functionality to the application being created. Creating these four web applications will give you the opportunity to explore all the technologies required to create the client side.

• Ottergram . Our first project is dedicated to a web photo gallery. Creating an Ottergram will teach you the basics of browser programming using the HTML markup language, CSS style sheets and the JavaScript programming language. You will manually create a user interface and learn how the browser loads and visualizes content.

• CoffeeRun . Partially the order form of coffee, partially - the list of orders. CoffeeRun will introduce you to a variety of JavaScript programming language methods, including writing modular code, taking advantage of closures, and interacting with a remote server using Ajax technology.
')
Next under the cut ...

• Chattrbox . The Chattrbox app is the shortest part, and this app is the most different from the rest. It will use the JavaScript programming language to create an online chat system, including writing a chat server using the Node.js platform, as well as a browser client for the chat.

• Tracker . The latest project uses Ember.js - one of the most functional frameworks for client side development. We will write an application for cataloging cases of observation of rare, exotic and mythical creatures. Along the way, you'll learn how to harness the power of the rich ecosystem that underlies the Ember.js framework.

As you create these applications, you will become familiar with a variety of tools, including:

- Atom text editor and some useful plugins for working with code;
- Sources of documentation, such as the Mozilla Developer Network;
- Command line using an OS X terminal application or a Windows command line;
- browser-sync utility;
- Google Chrome browser developer tools (Google Chrome's Developer Tools);
- File normalize.css;
- Framework Bootstrap;
- jQuery, crypto-js and moment libraries;
- Node.js platform, Node package management system (npm) and nodemon module;
- WebSockets protocol and wscat module;
- Babel compiler and Babelify, Browserify and Watchify modules;
- Ember.js framework and such additions as the command line interface Ember CLI, plugin for Chrome Ember Inspector, add-on Ember CLI Mirage and template engine Handlebars;
- Bower package management system;
- Homebrew package management system;
- Watchman utility.

Excerpt Cycling through the array of thumbnails

Linking thumbnails to event handling code is quick and easy. We will write a function that will be the starting point of all Ottergram logic. In other programming languages, unlike JavaScript, there is a built-in mechanism for launching an application. But do not worry - it is fairly easy to implement manually.

Let's start by adding the function initializeEvents to the end of the main.js file. This method will bring together all the steps to turn Ottergram into an interactive application. First, it will get an array of thumbnails. Next, it will cycle through the array, adding a click handler for each of them. After writing this function, we will add a call to the initializeEvents function at the very end of the main.js file to run it.

In the body of our new function, add a call to the getThumbnailsArray function and assign the result (an array of thumbnails) to the variable thumbnails:

... function getThumbnailsArray() { ... } function initializeEvents() { 'use strict'; var thumbnails = getThumbnailsArray(); } 

Next, we need to loop through the array of thumbnails, one element at a time. When accessing each of them, we will call the addThumbClickHandler method and pass it a thumbnail item. This may seem like a few steps, but since the thumbnails are a real array, you can do all this by calling a single method.

Add a call to the thumbnails.forEach method in the main.js file and pass it to the addThumbClickHandler function as a callback.

 ... function initializeEvents() { 'use strict'; var thumbnails = getThumbnailsArray(); thumbnails.forEach(addThumbClickHandler); } 

Please note that you are passing a named function as a callback. As you read further, this is not always a good solution. However, in this case, it will work as it should, because the addThumbClickHandler function needs only the information that will be passed to it when the forEach method calls it, the element of the thumbnails array.

Finally, to see all this in action, add a call to the function initializeEvents at the very end of the main.js file:

 ... function initializeEvents() { 'use strict'; var thumbnails = getThumbnailsArray(); thumbnails.forEach(addThumbClickHandler); } initializeEvents(); 

Remember, the browser executes the code as you read each line of your JavaScript. For most of the main.js file, it simply declares variables and functions. But when it comes to the string initializeEvents () ;, it will execute this function. Save and return to the browser. Click on several different miniatures and admire the fruits of your labors (fig. 6.28).


Sit back, relax and enjoy the clicks on the otters photo! You have worked hard and learned a lot during the creation of an interactive layer of our site. In the next chapter, we will complete the creation of Ottergram, adding visual effects for greater beauty.

Silver Exercise: Hacking Links

Chrome Browser DevTools provide plenty of entertainment options with visited pages. The next exercise will be to change all the links on the search results page so that they go nowhere.

Go to your favorite search engine and search for the otter keyword. Open the DevTools console. Using the functions written for Ottergram as a model, connect event listeners to all links and disable the default click-through functionality.

Golden Exercise: Random Otters

Write a function to change the data-image-url attribute of a randomly selected otter miniature so that the enlarged image no longer matches the miniature. Use the URL of the image of your choice (although you can find a good one by searching the Internet for the word tacocat). As an additional exercise, write a function that returns the otters miniatures to the original values ​​of the data-image-url attribute and changes one of them, selected at random.

For the most inquisitive: strict mode

What is strict mode and why does it exist? It was created as a “cleaner” JavaScript mode, allows you to intercept certain types of programming errors (for example, typos in variable names), keeping developers from using some of the error-prone parts of the language and disabling the language features that are clearly unsuccessful.

There are many advantages to strict mode:

• Makes the var keyword use
• Does not require the use of operators with
• Limits how to use the eval function
• Treats duplicate function parameter names as syntax error.

All this can be obtained only by placing the 'use strict' directive at the top of the function. As a bonus, the use strict directive is ignored by older versions of browsers that do not support it (these browsers simply treat this directive as a string).
Read more about strict mode at MDN at .

»More information about the book can be found on the publisher's website.
» Table of Contents
» Excerpt

For Habrozhiteley 20% coupon discount - Front-end