GreenComet - Notes from a web programmer

There are several ways to create objects in JavaScript . The Object data type plays a critical role in JS . An object is an unordered set of key-value pairs. May contain other objects 1. Literal notation var someObject_1 = {}; Perhaps the most common and easiest way. Let's add properties and methods someObject_1.name = "John"; someObject_1.age = 25; someObject_1.run = function(){ console.log("run") } And now the same thing, but we will set properties and methods when creating var someObject_1 = { name: "John", age: 25, run: function(){ console.log("run"); } }; 2. Object constructor This method is not recommended for use, and it is better to use the previous one. Nevertheless, it exists. But the probability of meeting him is extremely small var someObject_2 = new Object(); We also set properties and methods var someObject_2 = { name: "Nick", age: 30, jump: function(){ conso...

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

For cloning objects in JS there is no specially provided method. You can copy an object in different ways. Since objects are passed by reference, we cannot clone simply by assigning a value to a variable. Objects With Spread let originalObject = {a: 1}; let clone = {...originalObject}; With Object.assign() let originalObject = {a: 1}; let clone = Object.assign({}, originalObject); With a loop let clone = {}; for (let key in originalObject) { if(originalObject.hasOwnProperty(key)){ clone[key] = originalObject[key]; } } With jQuery let clone = jQuery.extend(true, {}, originalObject); With lodash let clone = _.clone(value); let cloneDeep = _.cloneDeep(value); With JSON object let clone = JSON.parse(JSON.stringify(originalObject)); Arrays With Spread let clone = [...originalArray]; With Slice let clone = originalArray.slice(); Lodash can also be used for array cloning

Although this code can easily be found on the Internet, we still write a simple JavaScript clock Clock: < div id = " clock " > </ div > < script > function clock ( ) { let date = new Date ( ) , hours = date . getHours ( ) , minutes = date . getMinutes ( ) , seconds = date . getSeconds ( ) ; if ( hours < 10 ) hours = '0' + hours ; if ( minutes < 10 ) minutes = '0' + minutes ; if ( seconds < 10 ) seconds = '0' + seconds ; let time = hours + ':' + minutes + ':' + seconds ; document . getElementById ( 'clock' ) . innerText = time ; setTimeout ( ( ) => { clock ( ) ; } , 1000 ) ; } clock ( ) ; </ script >

The convenience of the jQuery plugin is that you can use the same code several times for different objects. In this case, copy-paste code is not needed. In addition, you can change the behavior of the plugin with different parameters. To write your jQuery plugin, you need to expand the $.fn object In general, it looks like this: $ . fn . MyPlugin = function ( ) { //plugin code } We write a plugin that will add a paragraph with the class "paragraph" after the selected object by clicking on it. By default we will set the red color of the text of our paragraph. ( $ => { $ . fn . myPlugin = function ( options ) { let settings = $ . extend ( { //set default parameters color : 'red' } , options ) ; //write the logic of our plugin $ ( this ) . on ( 'click' , function ( ) { let par = '<p class="paragraph">An added paragraph</p>' ; ...