GreenComet - Notes from a web programmer

The file is written for Gulp 4 . The file is designed to work with styles ( SCSS ) and JavaScript . All minify and compile sourcemaps for debugging. Third-party scripts and styles are in separate files. const production = ( process.env.NODE_ENV == 'production' ); //base part let {src, dest, parallel, series, watch} = require('gulp'), rename = require('gulp-rename'), sourcemaps = require('gulp-sourcemaps'); //css part let sass = require('gulp-sass'), cleanCSS = require('gulp-clean-css'), autoprefixer = require('gulp-autoprefixer'); const babel = require('gulp-babel'), uglify = require('gulp-uglify-es').default, include = require("gulp-include"); let pathFiles = { build: { css: './css/', js: './js/' }, src: { css: './src/scss/**/*.scss', js: './src/js/**/*.js' } }; function swallowError(error){ ...

In many programming languages implemented inheritance. And it also exists in JavaScript. First, consider prototype inheritance. We describe the function constructor function Animal(name, weight, color){ this.name = name || 'someAnimal'; this.weight = weight; this.color = color; //do some actions during initialization console.log(this.name + ' construct animal'); } // write the method to the prototype Animal.prototype.sayName = function(){ console.log(this.name); } We describe the constructor function that inherits the Animal class. And we will expand it, we will add in addition own properties and methods function Mammal(name, weight, color, limbs){ Animal.apply(this, arguments); this.limbs = limbs || 4; console.log(this.name + ' construct mammal'); } Mammal.prototype = Object.create(Animal.prototype); Mammal.prototype.constructor = Mammal; Mammal.prototype.run = function(){ console.log('run'); } Cre...

Often on sites that sell something you can find a countdown timer to a certain date. Such a script is usually required for landing pages and online stores. JS (() => { let finishDate = new Date(2017, 8, 30); // set the final date let compareDate = finishDate.getTime(); let timer = setInterval(function () { timeBetweenDates(compareDate); }, 1000); function timeBetweenDates(toDate) { let difference = toDate - Date.now(); if (difference <= 0) { // if the date has passed, the timer stops clearInterval(timer); } else { let seconds = Math.floor(difference / 1000), minutes = Math.floor(seconds / 60), hours = Math.floor(minutes / 60), days = Math.floor(hours / 24); hours %= 24; minutes %= 60; seconds %= 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0...

Every day sensory devices are being introduced into our lives. These devices have specific events, unlike the desktop. One of these events is the swipe . Especially often have to deal with it when developing a mobile version of the site. Code: (() => { let initialPoint; let finalPoint; document.addEventListener('touchstart', function(event) { initialPoint=event.changedTouches[0]; }, false); document.addEventListener('touchend', function(event) { finalPoint=event.changedTouches[0]; let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX); let yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY); if (xAbs > 20 || yAbs > 20) { if (xAbs > yAbs) { if (finalPoint.pageX < initialPoint.pageX){ // to left } else{ // to right } } else { if (final...

Consider a few examples of working with AJAX with native JavaScript. Functions are written with ECMAScript-2015 syntax The function for the GET method: let ajaxGet = (url, callback) => { let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4){ if(xhr.status == 200){ alert( xhr.responseText ); callback(); } else { // if error alert(xhr.statusText); } } }; xhr.open('GET', url, true); xhr.send(null); }; The function for the POST method. The data to be sent to the server accepts both the string and the object. let ajaxPost = options => { /* an example * options = { * data: 'a=1&b=word&c=name', * url: 'test.php', * cb: function(){ * alert('test'); * } * } */ let sendstr = ''...

We will send form data without reloading the page using jQuery. We will not consider processing the server part. Sample form: <form id="test_ajax_form" method="post" action="test_handler_form.php"> <input type="text" name="name" placeholder="Name"> <textarea name="message" placeholder="Message"></textarea> <input type="submit" value="Send" name="submit"> </form> JS $(function(){ $('#test_ajax_form').on('submit', function(e){ e.preventDefault(); let data = $(this).serialize(), url = $(this).attr('action'); $.ajax({ method: "POST", url: url, data: data }).done(function(){ alert('Success!'); }).fail(function(){ alert('Error!'); }); }); });

A short note about finding the maximum value in a JavaScript array with numeric values. The Array object in JS does not have its own max method. But we can add it. Array.prototype.max = function () { return Math.max.apply(null, this); } We borrowed the method we are interested in from the Math object. It will work like this: let arr = [3, 5, 6, 1, 10, '12', 0]; arr.max(); //12 If the array contains string values that cannot be cast to a number, the method returns NaN . You can do without modifying the global Array object. let arr = [3, 5, 6, 1, 10, '12', 56, 0]; Math.max.apply(null, arr); //56 And according to the syntax of ES6 you can write even easier let arr = [3, 5, 6, 1, 10, '12', 56, 0]; Math.max(...arr); //56