Введение Несмотря на то, что в JavaScript нет классов, этот язык представляет концепции объектно-ориентированного программирования. JavaScript содержит функции первого класса, это означает, что мы можем расценивать функции как объекты, то есть мы получаем возможность возвращать или передавать их в другие функции. Это позволяет нам создавать классоподобную семантику в функциях. В этой статье мы сосредоточимся на таких особенностях JavaScript: Объекты класса; Конструктор; Закрытые члены; Открытые/ общедоступные члены; Статические члены; Наследование. В этой статье термины «класс» и «функция» взаимозаменяются. Хотя это различные понятия, они используются аналогично в контексте данной статьи. Объекты класса var Person = function () { }; var person1 = new Person(); var person2 = new Person(); console.log(person1 instanceof Person);  // true console.log(person2 instanceof Person); // true Представьте себе класс Person,созданный с помощью выражения функции. Мы можем добавлять объекты этого класса, используя ключевое слово new.Каждый объект занимает отдельное место в памяти, но имеет тип Person. Конструктор var Person = function (firstName) {     this.firstName = firstName;     console.log('Instance created'); }; var person1 = new Person("Foo"); // logs "Instance created" var person2 = new Person("Bar"); // logs "Instance created" console.log('person1 is ' + person1.firstName); // logs "Foo" console.log('person2 is ' + person2.firstName); // logs "Bar" Определение функции действуют как конструктор класса Person. Аргумент функции – это параметр, переданный конструктору при создании объекта. Используя ключевое слово this, мы можем инициализировать атрибуты класса, например firstName. Закрытые члены var Person = function (firstName) {     var firstName = firstName; }; var person1 = new Person("Foo"); var person2 = new Person("Bar"); person1.firstName; // undefined person1.firstName; // undefined Область видимости firstName, находясь внутри функции Person, ограничена. Идеальный способ доступа и управление закрытыми членами класса реализуется с помощью функции accessor, похожей на setter() и getter() в Java.  var Person = function (firstName) {     var firstName; }; Person.prototype.setFirstName = function (firstName) {     this.firstName = firstName; } Person.prototype.getFirstName = function () {     return this.firstName; } var person1 = new Person(); var person2 = new Person(); person1.setFirstName('Foo'); person2.setFirstName('Bar'); person1.getFirstName(); // Foo person2.getFirstName(); // Bar Публичные члены  var Person = function (firstName) {     this.firstName = firstName; }; Person.prototype.sayHello = function () {     console.log(this.firstName + ' says Hello!'); } var person1 = new Person("Foo"); var person2 = new Person("Bar"); person1.sayHello(); // logs "Foo says Hello!" person2.sayHello(); // logs "Bar says Hello!" firstName и sayHello  – публичные члены класса Person. Они доступны и могут быть использованы вне определения функции.  Статические члены var Person = function () { } Person.firstName = "First Name"; var person1 = new Person(); console.log(person1.firstName); //logs undefined console.log(Person.firstName); //logs "First Name" Статические члены класса доступны с className, на них невозможно воздействовать объектами класса. Наследование var Person = function (firstName) {     this.firstName = firstName; }; Person.prototype.sayHello = function () {     console.log("Hello, I'm " + this.firstName); }; var Student = function (firstName, subject) {     Person.call(this, firstName);     this.subject = subject; }; Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student; var student1 = new Student('Foo', 'Math'); student1.sayHello();   // "Hello, I'm Foo" console.log(student1 instanceof Person);  // true console.log(student1 instanceof Student); // true Student – дочерний класс класса Parent, он автоматически наследует все члены родительского класса. Мы делаем определенный вызов конструктору родительского класса, используя Person.call и убеждаемся, что прототип наследуется от Person. Этот тип наследования называется прототипным. Использование данных элементов в модуле JavaScript улучшит Ваш код и сделает его модульным. Источник : http://pankajparashar.com/posts/javascript-classes/

Введение Метрика программного обеспечения (англ. Software metric) – это некая мера определенного свойства программного обеспечения или же его спецификаций. Как известно, мера – это средство измерения. Важно понять, что мера - это числовое значение. Таким образом, метрика программного обеспечения будет показывать некое числовое значение определенного свойства ПО.  Мы не будем углубляться в теорию, так как ее можно найти в свободном доступе довольно легко. Мы займемся практической частью данного вопроса. А именно: как нам использовать метрики для улучшения кода? Метрики в Visual Studio Стоит заметить сразу, что метрики подвергаются критике. Это, как минимум, поверхностно и неточно. Мы вернемся к этому после того, как поймем о чем речь. Рассматривать мы будет все на примере Visual Studio 2015 RC. Сперва, откроем проект для изучения. Далее, мы можем видеть вкладку Analyze В этой вкладке мы видим Calculate Code Metrics for ... Это нам и нужно. Разница лишь в том, что будет анализироваться. Или же выбранные проекты в Solution Explorer, или же сразу весь Solution. После нажатия придется немного подождать. Время зависит от конфигурации Вашего компьютера. Когда анализ будет завершен, Вы увидите внизу окно Здесь будет видна иерархия всего Solution. В моем случае это отдельная dll библиотека и проект. Когда развернем библиотеку, мы увидим следующий уровень иерархии, и так далее Теперь давайте разберемся со столбцами дальше. 1. Maintainability Index – это комплексный показатель качества кода. Эта метрика рассчитывается по следующей формуле: MI = MAX(0, (171 — 5.2 * ln(HV) — 0.23 * CC — 16.2 * ln(LoC)) * 100 / 171) HV – Halstead Volume, вычислительная сложность. Чем больше операторов, тем больше значение этой метрики; CC – Cyclomatic Complexity (Эта метрика описана ниже); LoC – количество строк кода (Эта метрика описана ниже). 2. Cyclomatic Complexity – показывает структурную сложность кода. Иными словами, количество различных ветвей кода. Считается на основе операторов в Вашем коде, строя графы переходов от одного оператора к другому. К примеру, оператор if-else увеличит эту метрику, потому что здесь будут разные ветви выполнения. 3. Depth of Inheritance – глубина наследования. Для каждого класса эта метрика показывает, насколько глубоко он в цепочке наследования. 4. Class Coupling – указывает на зависимость классов друг от друга. Проект с множеством зависимостей очень трудно и дорого поддерживать. 5. Lines of Code – количество строк кода. Напрямую используется редко. В наши дни, с множеством разнообразных как подходов к программированию, так и языков, эта метрика дает нам мало полезной информации. Если брать во внимание отдельный метод, то можно разбить его на несколько методов поменьше. Использования метрик Изначально стоит обращать внимание на Maintainability Index. Старайтесь придерживать его около 70-90. Это значительно облегчит сопровождения кода как Вами, так и другими программистами. Иногда стоит оставить его на уровне 50-60, так как переписать некоторые участки кода бывает очень затратным. Оценивайте здраво как код, так и Ваши возможности с затратами. Стоит также уделить много внимания Class Coupling. Эта метрика должна быть как можно меньшей. Ведь она так же способствует поддержке кода. Для оптимизации возможно придется пересматривать дизайн проекта и некоторые архитектурные решения. Теперь стоит уделить внимание Cyclomatic Complexity. Эта метрика показывает сложность кода, а это так же влияет на поддержку кода в будущем. Иногда приходится переписывать куски кода, которые писали до Вас другие люди, так как Вы просто не можете понять, что, как и зачем в этом методе. Конечно, этому еще способствует стиль кода и идея, но не забывайте о Cyclomatic Complexity при рефакторинге. Критика А теперь вернемся к критике. Вы, наверняка, заметили, что мы использовали на практике не все метрики, но они могут быть частью остальных, как в случае с Maintainability Index. Но стоит понимать, что оценивать качество работы программиста, исходя из метрик, нельзя. Это очень неточно и поверхностно. Иногда просто нет другого способа решения задачи, а иногда это бывает затратным. Также есть человеческий фактор, о котором не стоит забывать. Метрики бывают искаженными, ведь программист может стремится написать не эффективное и правильно решение, а оптимизировать показатели этих же метрик. Вывод С таким инструментом в руках Вы можете быстро и относительно легко сделать review проекта и найти его уязвимые места. Также можно постоянно мониторить метрики и делать даже некие выводы об усталости работника или его отношении к работе. Более того, можно увидеть динамику роста качества кода каждого программиста. Но здесь стоит отчетливо понимать все детали так, как мы говорили об этом в критике. Ну и одно из самых важных, следить за недопустимыми значениями, при которых хорошо было бы провести рефакторинг кода.

Введение На сегодняшний день внутренние письменные коммуникации – неотъемлемая часть повседневной работы в любой компании. Каждый день ваш почтовый ящик будет пополняться разного рода информационными сообщениями от ваших коллег и, разумеется, от административного аппарата вашей компании или компании заказчика. Нередко вы сами будете становиться автором рассылок с полезной информацией или будете вынуждены попросить помощи у вашего коллектива. Именно поэтому мы разберемся с вами с самыми простыми правилами ведения корпоративной переписки. Стоит помнить, что информация, рассылаемая на всех специалистов команды/отдела/компании, должна быть тщательно продуманна и проверена, а сама рассылка должна быть обоснованной. Зачастую в компаниях принято организовывать несколько почтовых групп, таких как All-Corporate – которая используется в тех случаях, когда необходимо уведомить всех сотрудников об изменениях бизнес-процессов компании, разного рода общекорпоративных событиях, или по поводу вопросов, которые являются значимыми для всех специалистов без исключений. Будучи получателем такой рассылки стоит помнить об особенности ответов на подобные письма. Если у вас возникла потребность уточнить что-либо у специалиста, отправившего вопрос или сообщение на группу All-Corporate, это делается через индивидуальное письмо, т.е. через нажатие кнопки Reply, использование Reply to All должен иметь весомые обоснования и не применяется без особой на то необходимости. Более популярная рассылка имеет название Informal, она используется в том случае, когда необходима помощь от сотрудников в решении каких-либо узкоспециализированных рабочих вопросов и зачастую для решения срочных, очень важных нерабочих (личных) вопросов. Ниже приведем краткий список тегов, которыми помечают тему письма для упрощения фильтрации подобных писем адресатами. [HELP] Сообщения с просьбой о помощи, в любых жизненных ситуациях: поиск детского врача для ребенка, аренды жилья, поиск доноров или волонтеров. [SKILLS] Сообщения о поиске специалистов внутри компании, которые могут провести консультацию и поделиться своей экспертизой в определенной сфере или специализации. [FAREWELL] Сообщения от сотрудников, которые покидают компанию. Зачастую принято оставлять свои личные контакты для поддержания отношений. [ALERT] Сообщения, которые уведомляют о вопросах личной безопасности сотрудников (личной и имущества) [GREETINGS] Поздравление сотрудников с праздниками: дни рождения, рождение ребенка, свадьбой и т.д. [SPORT] Сообщения с приглашениями на спортивные события, информация о деятельности корпоративных спортивных команд и т.д. [LOST&FOUND] Сообщения о потерянном или найденном имуществе на территории офиса или во время общекорпоративных мероприятий. [SPAM] [SALE] Сообщения о продаже и покупке [SPAM] [RENT] Сообщения о найме, аренде квартир. [SPAM] [LEISURE] Сообщения о поиске компании для проведения совместного отдыха (поход в горы, поход в кафе, хобби и т.д.). [SPAM] [PETS] Сообщения о покупке, продаже, раздаче домашних животных. Если у вас возникли трудности с определением, в какую группу или с какими тегами писать то или иное письмо – вы всегда можете обратиться за советом в ваш HR-департамент. Помните, что ваше электронное письмо зачастую является первым шагом в построении отношений с заказчиками и партнерами. К его созданию стоит относиться с особым вниманием, соблюдая не только правила грамматики речи и пунктуации, но и помня о неписанных правилах построения партнерских отношений, этики и корпоративной культуры. На сегодняшний день ваша переписка – это костюм, по которому вас встречают как старые знакомые, так и рекомендуют новым, следите за опрятностью и собственным стилем.

Введение Элементарные и ссылочные типы, или элементарно-ссылочный дуализм на примере строк в JavaScipt. Одно из ключевых правил языка JavaScript состоит в особенностях выполнения операций над элементарными типами данных и ссылочными типами. Так, числа и логические величины  являются элементарными типами данных, операции над ними выполняются по значению, они состоят из относительно небольшого и заранее определенного числа байт, поэтому операции над ними легко выполняются даже низкоуровневым интерпретатором JavaScript. Примером ссылочных типов являются объекты. Что касается массивов и функций – они являются специализированными типами объектов, поэтому также представляют собой ссылочный тип данных. Эти типы данных характеризуются произвольным количеством свойств и элементов, поэтому операции над ними выполняются намного сложнее. В случае массивов и объектов больших размеров, операции по значению могут привести к избыточному копированию и сравнению огромных объемов памяти, что легко может поставить под сомнение оптимальность использования клиентских ресурсов. Примером работы с элементарными типами послужит следующая пара инструкций: var a = 5; // переменная с именем a хранит значение 5 var b = a; // производится операция копирования, исключительно по значению: переменная с именем b хранит другое значение 5 (его дубликат) другим примером может послужить изменение значения внутренней копии переменной: var a = a + 5; // эта строка изменяет только внутреннюю копию переменной с именем a, перезаписывая в нее значение 10 Что касается работы со ссылочными типами, простейшим примером послужит набор операций над двумя массивами: var myArray = [10, 20, 30, 40]; // создаем переменную ссылочного типа, а именно массив с именем myArray состоящий из четырех элементов var otherArray = myArray; // присваиваем новой переменной с именем otherArray первую перменную, при этом, копирование значений из переменной с именем myArray не производится, мы разрешаем новой переменной работать со значениями из первой. otherArray[0] = 110; // так изменив якобы значения ново-созданной второй переменной, на самом деле мы производим операцию перезаписи значений из первой переменной. alert(myArray); // отобразим значение 110,20,30,40 Стоит отметить, что строки, которые, на первый взгляд, могут восприняться в качестве ссылочного типа в силу неограниченности своей длины, что касается JavaScript, то строки зачастую рассматриваются с позиции элементарного типа из-за того, что не являются сущностью с природой объекта. Что же касается реальных случаев, то строки не могут вписываться в двойственный элементарно-ссылочный тип. Строки нельзя представить объектами, поэтому можно предположить, что их можно отнести к элементарному типу, но такого рода ситуация может привести к непроизвольному расходованию системных ресурсов, в случае произведения операций по значению, в силу возможности задания произвольной длины строки. Поэтому в JavaScript нельзя изменить содержимое строки, пусть даже существует специальный метод charAt(), который после вызова вернет символ из заданной строки, но не существует метода setChartAt(), который мог бы ввести на это место другой символ. Строки в JavaScript преднамеренно созданы как неизменяемые сущности, в нем отсутствуют элементы языка, предполагающие возможность изменения символов в строке. Несмотря на то, что невозможно определить, каким образом производится копирование строк, есть возможность определить, как производится сравнение строк – по ссылке или же по их значению. <script>         var row1 = "hello world";         var row2 = "hello " + "world";         if (row1 == row2) {             alert("строки сравниваются по значению")         } script> Поскольку мы сравниваем абсолютно разные строки, состоящие из одинаковых последовательностей символов, но они интерпретируются как эквивалентные, следовательно, увидим соответствующую надпись. Важно помнить, что сравнение строк выполняется строго посимвольно и производится для числовых значений отдельного символа из общепринятой кодировки Unicode последовательно. Кроме того, сравнение символов происходит с учетом регистра, т.е. все прописные буквы будут иметь «вес» меньший, чем соответствующие строчные буквы. var word1 = "hello"; var word2 = "Hello"; var rez = word1 < word2; document.write(rez); // false Также стоит помнить, что сравнение происходит от первого определения разных символов, при этом длина строки не учитывается var word1 = "hello w"; var word2 = "hello World"; var rez = word1 > word2; document.write(rez); // true Порой получая знания от пользователя в виде строк, к примеру, используя prompt, возвращается строка, введенная пользователем. В таком случае нельзя сравнивать числа, полученные от пользователя, поскольку результат будет не верен. var a = "5"; var b = "10"; var rez = a > b; document.write(rez); // true Посимвольное сравнение дает результат: символ ‘5’ больше, чем ‘1’. Стоит помнить о явном преобразовании полученных значений к числовым. Использую унарный знак плюс «+» var a = "5"; var b = "10"; var rez = +a > +b; document.write(rez); // false Как видим, язык JavaScript имеет много тонкостей, о которых стоит помнить при написании своих сценариев и программ. В дальнейшем вы сможете самостоятельно обнаруживать подобные особенности и грамотно ими пользоваться.  

Введение HTML – простой язык веб-разработки, продолжающий развиваться и обновляться. Сейчас идет работа над шестой версией языка. HTML5, текущая версия HTML, считается одним из самых популярных релизов по сравнению с предыдущими версиями HTML. Обзор HTML5 В HTML5 появились очень интересные функции, например, поддержка аудио и видео, а также возможность создания оптимизированных для смартфонов сайтов. Кроме того, он освободил разработчиков от использования атрибута type в тегах и. Он позволил систематизировать контент, используя новые метки ,,и т. д. Однако, HTML5 все еще находится на стадии развития и не является законченным продуктом. Понимание концепции HTML6 Представьте себе использование тега для присвоения логотипа веб-странице или тега . Было бы удобно, если бы Вы могли использовать тег без использования нескольких идентификаторов, а сразу использовать или напрямую. Проще говоря, вместо использования Вы можете просто использовать . HTML6 – шестой релиз HTML с такой же структурой пространств имен, как у XML. Пространства имен XML помогут Вам использовать тот же тег, не конфликтуя с любым другим тегом. Например, тег, используемый в XHTML DOCTYPE:  xmlns:xhtml="http://www.w3.org/1999/xhtml" В HTML6 можно будет отходить от определенных спецификаций тегов и использовать теги более понятные и удобные для разработчика. Пример HTML6 <!DOCTYPE html> <html:html>     <html:head>         <html:title>Взгляд в HTML6html:title>         <html:meta type="title" value="Заголовок страници">             <html:meta type="description" value="Пример заголовка">                 <html:link src="css/mainfile.css" title="Styles" type="text/css">                     <html:link src="js/mainfile.js" title="Script" type="text/javascript">     html:head>     <html:body>         <header>             <logo>                 <html:media type="image" src="images/xyz.png">             logo>             <nav>                 <html:a href="/img1">                     a>                     <html:a href="/img2">                         a>             nav>         header>         <content>             <article>                 <h1>Заголовокh1>                 <h2>Подзаголовкиh2>                 <p>[...]p>                 <p>[...]p>             article>             <article>                 <h1>Концепт HTML6h1>                 <h2>Понимание основh2>                 <p>[...]p>             article>         content>         <footer>             <copyright>© 2014copyright>         footer>     html:body> html:html> В примере кода HTML6 Вы видите теги . Эти новые элементы с двоеточиями принадлежат к спецификации W3C и HTML6. Например, элемент будет изменять заголовок в браузере, а покажет определенное изображение на экране. Все эти элементы определяются специально для пользователей и не имеют ничего общего с браузером. Они не более чем крюки для JavaScript и таблицы стилей. Они помогут сделать Ваш код более семантичным и правильным. HTML6 APIs В HTML6 теги будут содержать двоеточия, например, или и т.д. Давайте посмотрим на каждый тег, использованный в примере выше. 1. <!DOCTYPE html> <html:html>     // этот тег эквивалентен тегу     <html>     в предыдущих версиях     HTML документа --> html:html> 2. Этот тег – эквивалент тегу . Его цель – получение данных и скриптов, управляющих отображением контента в теге . <!DOCTYPE html> <html:html>     <html:head>         <html:title>       -->     html:head> html:html> 3. Этот тег изменяет заголовок документа HTML в браузере. Он похож на тег

Введение AJAX (Asynchronous JavaScript and XML) - это концепция объединения воедино нескольких технологий. Результатом их совместной роботы является способность обмена данными между сервером и страницей без ее полной перезагрузки. Примером использования данной технологии является «живой поиск», реализованный почти во всех современных поисковиках. Работа такого поиска состоит в том, что при наборе пользователем поискового запроса при помощи JavaScript с сервера будет получен список возможных дополнений. Зачастую этот список выводится снизу поисковой строки. Рассмотрим небольшой пример. Напишем функцию для обработки пользовательского ввода, которая будет моментально отображать введенную информацию на странице. Сперва создадим HTML страничку и добавим в , в который поместим одно поле для ввода и один параграф . <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Simple exampletitle> head> <body>     <div>         <p>My name is <span id="namePlace">span>p>         <input type="text" id="name">input>     div> body> html> Далее добавим функцию для обработки ввода, а также обозначим для поля ввода эту функцию как обработчик события “onkeyup”. Назовем функцию “change” и просто возьмем значение поля с id= “name” и присвоим его элементу с id= “namePlace”. Код будет выглядеть так: <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Simple exampletitle>     <script type="text/javascript" charset="utf-8" async defer>         function change() {             var res = document.getElementById("name").value;             document.getElementById("namePlace").innerHTML = res;         }     script> head> <body>     <div>         <p>My name is <span id="namePlace">span>p>         <input type="text" id="name" onkeyup="change()">input>     div> body> html> Откроем страницу в браузере: После введения своего имени, вы сразу же увидите его отображенным: В основе AJAX лежит использование XMLHttpRequest объекта, предоставляющего легкий способ получения данных от URL с частичной перезагрузкой страницы. Несмотря на то, что название данного объекта включает в себя «XML», он способен взаимодействовать с любыми типами данных, не только с XML. Также он поддерживает работу не только с HTTP протоколом, а и с многими другими (включая файлы и ftp). Для того чтобы создать экземпляр класса XMLHttpRequest, достаточно лишь добавить в код строку: var newRequest = new XMLHttpRequest(); Для создания кроссбраузерного экземпляра нужного класса потребуется следующий код: if (window.XMLHttpRequest) { // Mozilla, Safari, ...     newRequest = new XMLHttpRequest();     if (newRequest.overrideMimeType) {         newRequest.overrideMimeType('text/xml');     } } else if (window.ActiveXObject) { // IE     try {         newRequest = new ActiveXObject("Msxml2.XMLHTTP");     } catch (e) {         try {             newRequest = new ActiveXObject("Microsoft.XMLHTTP");         } catch (e) { }     } } Далее нужно создать JavaScript функцию для обработки ответа от сервера и указать свойству XMLHttpRequest объекта - onreadystatechange, что данная функция будет этим заниматься. Для реализации нам нужно присвоить свойству onreadystatechange имя данной функции без скобок (так как нам нужна лишь ссылка на функцию без ее вызова) или же пойти другим путем и присвоить саму функцию (название функции упускается).   Код для первого случая: function nameOfFunction() {     //body of the function } newRequest.onreadystatechange = nameOfFunction; Код для второго случая: newRequest.onreadystatechange = function () {     //body of the function }; Написание самой функции мы рассмотрим позже, а сейчас перейдем к созданию самого запроса, за что отвечают две функции описываемого ранее класса – open() и send(). Функция open() отвечает за инициализацию запроса. Рассмотрим несколько вариантов использования: ·        open( method, URL, async ) ·        open( method, URL, async, userName, password ) Параметром method задают HTTP метод, такой как GET или POST. Вторым параметром(URL) задается адрес запрашиваемой страницы. Параметр asynch – имеет булевое значение (true/false) и определяет, будет ли значение  асинхронным (true) или синхронным (false). В дальнейших примерах используются только асинхронные запросы, так что третий параметр всегда будем устанавливать в положительное значение. Последние два параметра userName и password определяют данные для авторизации пользователя. Функция send() отправляет запрос. Тип данных параметров этого метода не ограничен. Хочу отметить, что при значении параметра method - GET в методе open() передаваемое значение параметра метода send() будет null, так как у GET-запроса нет тела. Рассмотрим пример с использованием всех вышеперечисленных методов. Создадим HTML страничку и добавим в один с id=” textField” и вложенным в него параграфом . Также добавим блок для ввода текста "textarea" с id=”area”, а также одну кнопку для активизации работы наших функций. Присвоим событию onclick имя функции для создания запроса, в данном примере функция будет называться makeRequest(). <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Creation of AJAX requesttitle> head> <body>     <div id="area"><p>We will change this text with content of the given file.p>div>     <textarea id="ar" width="100"> Changeable texttextarea>br>     <button type="button" onclick="makeRequest()">Show content of the filebutton> body> html> Теперь напишем саму функцию makeRequest(), для этого стоит вспомнить все, о чем вы прочитали ранее. Первым делом создадим объект класса XmlHttpRequest, после чего присвоим функцию для обработки самого запроса, в нашем примере функция будет называться outputContents(newRequest) и будет принимать на вход сам запрос. Далее вызвать функцию open(), подав на вход соответствующие параметры (в качестве url подадим путь к текстовому файлу), и затем вызовем функцию send(). Функция outputContents(newRequest) будет получать ответ от сервера и далее вставит этот результат в поля с id=”area” и id=”textField”. Финальный код страницы: <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title> Creation of AJAX requesttitle>     <script type="text/javascript" language="javascript">         function makeRequest() {             var newRequest = false;             if (window.XMLHttpRequest) { // Mozilla, Safari, ...                 newRequest = new XMLHttpRequest();                 if (newRequest.overrideMimeType) {                     newRequest.overrideMimeType('text/xml');                 }             } else if (window.ActiveXObject) { // IE                 try {                     newRequest = new ActiveXObject("Msxml2.XMLHTTP");                 } catch (e) {                     try {                         newRequest = new ActiveXObject("Microsoft.XMLHTTP");                     } catch (e) { }                 }             }             if (!newRequest) {                 alert('Ooops we have some problem with creation of XmlHttpRequest object!');                 return false;             }             newRequest.onreadystatechange = function () { outputContents(newRequest); };             newRequest.open('GET', 'login.txt', true);             newRequest.send(null);         }         function outputContents(newRequest) {             if (newRequest.readyState == 4) {                 if (newRequest.status == 200) {                     var res = newRequest.responseText;                     document.getElementById('textField').innerHTML = res;                     document.getElementById('area').innerHTML = res;                 } else {                     alert('There is some problems with the request!');                 }             }         }     script> head> <body>     <div id="textField"><p>We will change this text with content of the given file.p>div>     <textarea id="area" width="100"> Changeable texttextarea>br>     <button type="button" onclick="makeRequest()">Show content of the filebutton> body> html> В браузере мы увидим следующее: При нажатии на кнопку контент нашей страницы изменится таким образом: Надеемся, что вы разобрались с созданием забросов посредством AJAX и разделяете наше восхищение данной технологией.

Введение Даже если Вы много раз слышали о классах в JavaScript, это не объектно-ориентированный язык программирования. JS можно назвать прототипным языком. Работа с классами в JS вполне возможна, но весьма неудобна синтаксически. WinJS – библиотека JS, одна из задая которой уменьшить синтаксическую сложность работы с классами.  В этой статье Вы научитесь использовать классы в WinJS. Начнем с создания класса в стандартном JS. JavaScript класс может быть создан так: function Product(name, price) {     this.name = name;     this.price = price;     this.Display = function () {         console.log(this.name + this.price);     } } var p = new Product("Pen", 30); p.Display(); Вы можете получить прототип класса – он организовывает основную работу с классами в JS. Класс в WinJS можно создать с помощью WinJS.Class.define. Он, как правило, состоит из трёх частей: конструктор, экземпляр класса и статические члены. var Product = WinJS.Class.define( //constructor //instancemembers //staticmembers ) Вы можете создать конструктор с помощью функции. Также сможете передать параметры в конструкторе и установить значение частных переменных. Конструктор с двумя входящими параметрами создаётся так: var Product = WinJS.Class.define(    //constructor    function (name, price) {        this.name = name;        this.price = price;    }    //instancemembers    //staticmembers   ); После конструктора поставьте запятую, а затем откройте фигурные скобки. Внутри скобок можно поместить все элементы экземпляра. {     Display: function () {         return this.name + " costs " + this.price + "$";     } } Также Вы можете добавить статический элемент в класс WinJS. Он может быть добавлен в качестве третьего параметра после элемента экземпляра. А теперь Вы можете добавить распределитель статического элемента. Это возможно таким образом: //staticmembers {     DistributorName: "ABC Corp" } Весь класс Product, включая конструктор, функции экземпляра и статические элементы, будет выглядеть так: var Product = WinJS.Class.define(      //constructor      function (name, price) {          this.name = name;          this.price = price;      },      //instancemembers      {          Display: function () {              return this.name + " costs " + this.price + "$";          }      },       //staticmembers      {          DistributorName: "ABC Corp"      }     ); После того, как класс создан, Вы можете создать экземпляр класса и использовать свойства. var product1 = new Product(name, price); var textToDisplay = product1.Display(); var disName = Product.DistributorName; Обратите внимание, что имя статической переменной используется непосредственно с именем класса. Если у Вас есть опыт работы с классами в JS, Вы заметите, что работа с классами в WinJS синтаксически проста. Теперь давайте рассмотрим реальный пример работы с классом Product, созданным ранее. В нём пользователь может ввести имя, цену и, кликнув на кнопку в классе Product, данные будут обновлены.     <input id="txtName" type="text" />     <input id="txtPrice" type="text" />     <br />     <button id="btnDisplay">Display Productbutton>     br/>     <label id="lblProduct">result here label>     <label id="lblDis">result here label> Если в JS-файле кликнуть на кнопку события, создаётся экземпляр класса Product, пропуская пользовательский ввод и вывод сообщения. document.querySelector("#btnDisplay").onclick=         function () {         var name = document.querySelector("#txtName").value;         var price = document.querySelector("#txtPrice").value;         var product1 = new Product(name, price);         var textToDisplay = product1.Display();         var disName = Product.DistributorName;         document.querySelector("#lblProduct").textContent=textToDisplay;         document.querySelector("#lblDis").textContent = disName; А вот как можно извлечь один класс из другого: var SportsProduct = WinJS.Class.derive(Product,         function(name,price,color)     {       this.name = name;       this.price = price;       this.color = color;     },     {        //instance members     },     {       //static members      }); Производный класс будет иметь доступ ко всем членам базового класса. Теперь возможно использование производного класса для создания нового экземпляра: var product1 = new SportsProduct("Pen", 30, "Red"); Таким образом Вы можете работать с классами в WinJS. Как видите, работа с классом гораздо удобнее в плане синтаксиса, по сравнению с JavaScript. Источник: http://debugmode.net/2014/12/11/classes-in-winjs/

Введение Привет всем. Многие студенты, которые решили связать свою жизнь с програмированием, задаются такими вопросами: - что выбрать своим главным инструментом в работе? - чем пользуется большинство? - чем пользоваться при написании своего кода? - что лучше? На эти вопросы нет однозначного ответа, каждый редактор по-своему хорош. Но постараюсь описать главные возможности тех редакторов, с которыми я сам столкнулся и пользовался в своей практике. Сразу внесем ясность и расставим точки над i. Средства разработки делятся на два главных класса: 1 – Интегрированные среды разработки (IDE) 2 - Текстовые редакторы (text editor) Официальное определение  интегрированная среда разработки можно найти по адресу: https://ru.wikipedia.org/wiki Официальное определение текстовый редактор по адресу: https://ru.wikipedia.org/wiki Попытаюсь объяснить  разницу между двумя этими классами своими словами. Интегрированная среда разработки - это как швейцарский нож или трактор, он мультифункционален, а следственно, и граничен. Может делать много, но некоторые вещи делает не так, как нам хотелось бы. Посудите сами: трактор ведь может тянуть тяжелый груз, копать и, главное, может передвигаться. Но все это он делает медленно. К примеру, если стоит задача переместиться из пункта “А” в пункт “Б” (что является одной из функций трактора), для этого лучше пригодится спорткар или обычный легковой автомобиль, для этой операции нами не нужен трактор со всеми его функциями. Следовательно, мы можем сделать вывод, что для определенных операций нам нужны определенные инструменты. В этой статье я не буду рассматривать IDE и их фичи (feature). Хочу рассказать о главных текстовых редакторах и их возможностях. Мой TOP текстовых редакторов: 1. Sublime Text 2. Brackets 3. Visual Studio Code (на этом месте был Atom) Пробовал, но не понравились/не подошли, по каким-либо причинам (поэтому не рассматриваю их тут) 1. Notepad++ (Сайт https://notepad-plus-plus.org/) 2. Komodo Edit (Сайт http://komodoide.com/komodo-edit/) 3. Atom (Сайт https://atom.io/) 4. Textmate (Сайт https://macromates.com) Итак ,начнем. Sublime Text 3 сайт: http://www.sublimetext.com/3 Чем нравится: кроссплатформенный легкий большая и понятная библиотека плагинов (дополнений) легко настроить под себя Что следует сделать после установки. Зайти на сайт https://packagecontrol.io/installation И сделать все согласно инструкции, открыть консоль Саблайма: найти вкладку View  и кликнуть Show Console. В появившемся снизу поле ввода вставить следующий код: import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) Должно получиться вот так: Жмем Enter. Так мы установили Package Control в наш Sublime. Теперь мы можем устанавливать плагины в редактор, нажав сочетание клавиш Ctrl+Shift+P on Windows/Linux, ⇧⌘P on OS X На сайте https://packagecontrol.io/ вы найдете множество плагинов с детальным описанием, руководством установки и руководством использования. Теперь о плагинах. Плагин – грубо говоря, это дополнение программы. Официальное определение https://ru.wikipedia.org/wiki Плагины, которые пригодились мне в работе, возможно, пригодятся и вам. 1. Emmet - https://packagecontrol.io/packages/Emmet Плагин, который помогает быстро набирать код. С помощью шпаргалки вы быстро научитесь быстро набирать сложные конструкции html, указав лишь название тега и  порядок иерархического положения елемента на странице. Его официальный сайт http://emmet.io/ и шпаргалка http://docs.emmet.io/cheat-sheet/ Еще одно условие: для работы этого дополнения нужен предустановленный nodeJS. Найти его можно тут: https://nodejs.org/ Думаю, что nodeJS у вас уже был предустановлен, а если не был, то он вам точно еще пригодится не раз. 2. SublimeCodeIntel - https://packagecontrol.io/packages/SublimeCodeIntel Плагин портирован из текстового редактора Komodo Editor, помогает автодополнением к языкам программирования JavaScript, Python, Ruby, XML, HTML, CSS, PHP и другим. 3. SideBarEnchancements - https://packagecontrol.io/packages/SideBarEnhancements Плагин открывает новые возможности боковой панели для работы с Вашими проектами. 4. BracketHighlighter - https://packagecontrol.io/packages/BracketHighlighter Плагин позволяет отображать дополнительные скобки возле номеров строк, отображая, к примеру, блоки кода. 5. AutoFileName - https://packagecontrol.io/packages/AutoFileName Плагин говорит сам за себя, когда мы пишем пути к нашим фалам, помогает, выводя дополнительное выскакивающее окошко, с выбором папок или файлов. 6. HTML-CSS-JS Prettify https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify Плагин “расческа”. Причесывает наш код, делает его более читабельным для человеческого глаза. 7. Color Highlighter - https://packagecontrol.io/packages/Color%20Highlighter Плагин подсвечивает цвета при написании вайлов CSS/Less/SASS/SCSS/Stylus. Остальные плагины, для работы с такими библиотеками как jQuery, Bootstrap, AngularJS,  советую устанавливать осторожно, потому как постоянно выскакивающие окошки с помощью какого либо плагина если не пугают, то начинают очень надоедать. Поэтому советую не превращать текстовый редактор в “неубранный балкон”. Также есть возможность установки из того-же Package Control множества тем и цветовых схем. Темы и цветовые схемы отличаются тем, что тема  меняет полностью весь внешний вид Sublime, цветовая схема  меняет только цвета подсветки синтаксиcа. Файл настроек находится во вкладке Preferences>Settings Default/Settings User. Почему именно два файла? Потому что вы сможете изменять только Settings User. Оба файла являются, по сути, JSON объектами, поэтому разобраться и изменять свои настройки вы научитесь довольно быстро. Brackets сайт - http://brackets.io/ Этот текстовый редактор также поддерживает большинство перечисленых плагинов, и даже если таковых вы не найдете, то их аналоги точно есть в песочнице. На правой боковой панели вы найдете несколько кнопок: Первая в виде молнии – LivePreview. Запускает страницу с рашрирением html в вашем браузере, который установлен по умолчанию, браузер будет сам обновлять страницу.  Вторая в виде лего – Extension Manager. При клике вызывает модальное окно в, котором содержатся вкладки меню для выбора плагинов, тем, их установке и удалению.  Третья в виде “слоев торта” со стрелочкой вверх – Extract for Brackets. Ради этой кнопки и стоит устанавливать этот редактор. Она позволяет после регистрации загрузить файлы psd формата для верстки прямо  из текстового редактора, не загружая ничего больше.  Кликаете по кнопке Open PSD Регистрируетесь или же входите под своим Adobe ID, загружаете PSD шаблон и начинаете верстать в разы быстрее. Кликнув по какому либо элементу на шаблоне, вы можете моментально перенести: текст, css свойства, или же выгрузить картинку из шаблона пряму в папку с проектом. С такими возможностями верстка становится в разы быстрее! Не агитирую, просто  советую попробовать) Visual Studio Code сайт - https://code.visualstudio.com/ Бесплатный кроссплатформенный текстовый редактор, основанный на технологиях замечательного текстового редактора Atom от GitHub. Подробное описание можно прочитать по ссылке ниже: https://uk.wikipedia.org/wiki/Visual_Studio_Code Также будет полезна ссылка с документацией: https://code.visualstudio.com/Docs/setup Отличный текстовый редактор от компании Microsoft. Облегченная и кроссплатформенная версия Visual Studio. Имеет схожий дизайн со своим старшим собратом. Похожие темы и подсказки в виде выпадающих окошек (контекстные подсказки). Так что разработчикам, перешедшим с Visual Studio, будет гораздо легче адаптироваться. Еще несколько плюсов с коробки: поддержка таких языков програмирования: JavaScript, C++, C#, PHP, XML, Java, Objective-C, HTML, CSS, Less, Sass и т.д. (полный перечень находится в документации). отладчик инструменты для работы с Git автодополнения в стиле Emmet. Настоятельно рекомендую обратить внимание и попробовать Visual Studio Code. Даже просто потому, что вы установите его и все, дальше просто приступаете к работе :) На этом все. Думаю, что изложил свои мысли достаточно простым языком. Помните, что не важно, в каком текстовом редакторе или IDE вы работаете, это всего лишь инструмент, в конечном итоге вы можете остановить свой выбор на обычном блокноте и там разрабатывать приложения, для того, чтобы писать программы не обязательно иметь подсветку синтаксиса, всякие плюшки, главное, чтобы вам было удобно и при написании вы чувствовали себя комфортно. Выбор за вами. Удачи!

Введение В написании любого письма крайне важно правильно начать ваше обращение и неменее грамотно его закончить. Всем известно, что письмо начинается с обращения к вашему адресату. В данной статье ознакомимся с самыми распространенными шаблонными обращениями и шаблонными фразами, которыми принято пользоваться в корпоративной переписке. Итак, рассмотрим несколько вариантов: Когда вы не знаете имени того, к кому обращаетесь: Dear Sir, ... Yours faithfully – обращение к мужчине, Dear Madam, ... Yours faithfully – обращение к женщине, Dear Sir or Madam, ... Yours faithfully – обращение к собеседнику, чьего пола вы не знаете. В том случае, когда вы знаете имя и фамилию собеседника: Dear Mr Hanson, ... Yours sincerely – обращение к мужчине, Dear Mrs Hanson, ... Yours sincerely – обращение к замужней женщине (в последнее время не используется), Dear Miss Hanson, ... Yours sincerely - обращение к незамужней женщине (в последнее время не используется), Dear Ms Hanson, ... Yours sincerely – обращение к женщине, в независимости от ее семейного положения. Когда письмо адресуется вашему хорошему другу или коллеге, с кем давно работаете: Dear Alexander ... Best wishes/Best regards Когда письмо адресуется группе получателей: Dear Sirs ... Yours faithfully Отдельным случаем является следующее обращение: To whom it may concern – его используют в тех случаях, когда нет возможности узнать имя, пол, должность адресата. Часто используют в информационных письмах, которые адресуются большому числу людей или организаций. Рекомендуется к использованию в случаях первого обращения в отделы компании: hr@company.com или office@company.com Кроме этого, не забывайте в деловой переписке использовать общепринятые ответы, такие как:  I am writing to acknowledge receipt of your letter – в качестве подтверждения получения письма, … to ask for assistance – с просьбой о содействии в той или иной ситуации, The purpose of this letter is to keep you informed of the situation – вежливое уведомление о состоянии дел в вашем проекте. Со временем у вас накопится достаточно опыта для быстрого составления деловой корреспонденции, но первое время никто не запретит вам использование шаблонных фраз. Напротив, в большинстве случаев, следование общепринятым стандартам и правилам вызовет лишь поощрение. Также не бойтесь заимствовать понравившиеся речевые обороты, это обогатит вашу речь и будет способствовать развитию словарного запаса. В следующих статьях вы узнаете о правилах оформления корпоративной подписи и об основных шаблонах писем-обращений в различные службы и отделы.

Введение Если Ваш бизнес достаточно рентабелен, Вы можете считать, что не нуждаетесь в SEO, так как это технически сложное и трудоемкое дело. Но если Вы отнесётесь к SEO поверхностно и небрежно, Вы можете ухудшить состояние Вашего бизнеса. Вам нужно помнить, что в Google часто меняют правила. В этой поисковой системе был крупный ряд обновлений и, несмотря на их приятное описание, они ужасно повлияли на владельцев веб-сайтов всего мира. Подготовка и планирование SEO-кампании может казаться Вам непреодолимым препятствием. Почему необходимо подготовиться и узнать как можно больше о SEO, прежде чем приступить к работе? Ваш сайт может получать 30-60 % траффика из поисковых систем, но если Вы посмотрите статистику ключевых слов в своей учётной записи (в Google Webmaster Tools), то Вы скорее всего увидите, что около 30-50 % ключевых слов, используемых для поиска Вашего сайта, это товарные знаки – названия Ваших продуктов или компаний. Такой поиск осуществляется людьми, которые уже знаю о Вас. Но не знающие Вашего бренда и ищущие то, что Вы продаёте, не могут найти Ваш ресурс. Если пользователи хотят найти продукт или компанию по названию, Google легко направит их к цели поиска. А SEO существует для помощи пользователю найти необходимую ему услугу или товар, которые Вы можете предоставить, даже если он не знает Вашего имени. Эта статья поможет Вам узнать, что делать для улучшения поиска. Что такое настоящее SEO? Настоящее SEO – это всё, что помогает поисковой системе понять содержимое Вашего веб-ресурса. Даже если Google понял содержание и актуальность каждой страницы веб-сайта, необходимы также многократные его просмотры пользователями. Понимание Вашего положения – Google Analytics Прежде чем перейти к улучшению своего SEO-рейтинга, Вам нужно разобраться в своём текущем положении. Простой и быстрый способ сделать это: 1. Откройте Вашу учётную запись в Google Analytics. 2. В диапазоне дат, в правом верхнем углу, измените нынешний год на предыдущий. К примеру, 5 января 2015 станет 5 января 2014. Затем выберите Apply. 3. Потом нажмите All Sessions, выберите Organic Traffic и кликните Apply. 4. Нажмите на небольшой чёрно-белый квадратный значок в правом верхнем углу и перетащите ползунок к режиму Higher Precision (высокая точность). 5. Нажмите на кнопку интервала Week, чтобы график стал более простым для понимания. Сейчас Ваш график будет выглядеть приблизительно так: 6. Нажмите на стрелочку справа от All Sessions и выберите команду Remove. 7. Нажмите на Select a metric, рядом с кнопкой Sessions над графиком, и выберите Pages / Session. На экране должно быть что-то подобное: Выше мы видим, что количество трафика увеличивается с середины августа, но его качество (количество просмотренных страниц за одну сессию) снизилось. Объединение данных Сессия в Google Analytics показала Вам качество Вашей работы со стороны SEO и количество Ваших посетителей. Но статистика демонстрирует то, что уже работает, количество людей, находящих Ваш ресурс в поисковых системах и переходящих на него по ссылке. Запрос данных в Google Webmaster Tools даст Вам представление о недочетах. Он покажет статистику запросов и ключевых слов, по которым пользователи не переходят на Ваш веб-сайт. Чем меньше пользователей будут переходить на Ваш ресурс, тем на более дальних позициях в поиске он окажется. По каким ключевым словам Вы бы хотели, чтобы Вас находили? Неправильный подбор ключевых слов – одна из самых распространенных и важных ошибок в SEO. Многие полагают, что не нужно беспокоиться относительно своих ключевых слов. Они считают, что им известно, какие слова используются для поиска их товаров. Также они предполагают, что Google освоил содержание их сайтов. Все эти утверждения ошибочны. Проведите коллективное обсуждение маленького ряда Ваших наиболее очевидных ключевых слов, затем проверьте их с помощью Google’s Keyword Planner. Игнорируйте информацию в Ad group ideas, опирайтесь на Keyword ideas. Вместо того, чтобы пользоваться очень неудобным интерфейсом, рекомендуем скачать данные как электронную таблицу, где можно их изменять и сортировать. Из таблицы можно удалить все неуместные столбцы или ключевые слова. На этом этапе Вы можете устранить проблему поиска Вашего веб-сайта пользователями. Число зафиксированных поисков определенного ключевого слова важно, но ещё важнее – уровень конкуренции. Определяется по формуле: (число поисков × число поисков) ÷ конкуренцию Есть множество альтернатив формулы, но данный вариант наиболее простой. Это слегка запутанная, но вполне эффективная методология исследования ключевых слов. Действительно ли SEO просто? 70 % SEO – несложно. Если у Вас есть список актуальных для Вашей продукции ключевых слов, все, что нужно сделать – создать под них качественный контент. Но существует одно простое правило: созданное Вами содержание должно быть не только хорошего качества, но и совершенно оригинальным, а также он должен быть написан прежде всего для пользователя-человека, а не паука поисковой системы. Каждая статья должна быть ценной и полезной для читателя. Но остальные 30 % требуют не просто создания хорошего содержания и ожидания посетителей. Вы должны помочь Google понять содержание на своих страницах, входящие ссылки, авторитет домена, авторитет страницы, факторы спама и многое другое. Однако, даже если Вы не вмешиваетесь в эти 30 % SEO, создавая правильный контент для правильных посетителей, используя терминологию Ваших потенциальных клиентов, Ваш сайт будет лучше, чем ресурс Ваших конкурентов. Вывод SEO – очень важная часть продвижения любого бизнеса. Для того, чтобы Ваша SEO-кампания прошла успешно, нужно изучить свое текущее положение, выявить свои сильные и слабые стороны. Затем следует работать с качеством контента Вашего ресурса, делая его максимально удобным для пользователя, используя ключевые слова для улучшения поиска Вашего сайта в поисковых системах. Только на третьем этапе, после выполнения всего вышеперечисленного, стоит приступать к оптимизации понимания Вашего сайта системой Google. Источник: http://24ways.org/2014/seo-in-2015-and-why-you-should-care/