8 плохих практик JavaScript, которые 100% приведут к сбоям


Оглавление (нажмите, чтобы открыть):

Краткое руководство лучших практик JavaScript

JavaScript является основным языком программирования, позволяющим манипулировать с DOM страниц сайтов. Это интерпретируемый язык программирования исполняемый в браузере. Изначально JavaScript был назван как Mocha, затем переименован в LiveScript. На синтаксис языка оказали влияние такие языки программирования, как Си и Java. Язык Java стал очень популярным и поэтому LiveScript был очень хитро переименован в JavaScript. Эдакий, рекламный ход, чтобы еще никому в то время неизвестный язык, был на слуху.

Стиль кода JavaScript

JavaScript как и каждый язык программирования имеет множество руководств по стилю кода. Часто рекомендуемое руководство это стиль кода для JavaScript от Google.

Объектно-ориентированное программирование

В JavaScript есть сильные объектно-ориентированные возможности программирования, однако, отличающиеся от других языков, что иногда приводит к дискуссиям.

Анонимные функции

Анонимные функции в JavaScript это функции динамически объявляемые во время выполнения, которым не присваиваются имена, как обычным функциям.

Функции как объекты первого класса

В JavaScript функции являются объектами первого класса — особый тип объекта, выполняющий все, что делают обычные объекты.

Слабо типизированный

JavaScript представляет собой язык программирования с динамической и слабой типизацией. Поэтому разработчикам, которые работали до этого с Java или C# и имели дело со строго типизированными переменными, нужно быть осмотрительными при работе с слабо типизированными переменными в JavaScript, чтобы не попасть в некоторые ловушки.

Связывание функций

Функции в JavaScript не привязаны к this. Когда вы хотите использовать связывание функции с this, то на помощь придет функция prototype.bind().

Функции замыкания

Замыкания в JavaScript это функции, ссылающиеся на свободные переменные и запоминающая окружение, в котором она создана.

Паттерны (шаблоны) проектирования

В JavaScript, кроме содержащихся шаблонов проектирования, могут быть использованы многие другие классические паттерны.

Список паттернов проектирования

  • Factory
  • Prototype
  • Mixin
  • Singleton

Создание паттернов проектирования

  • Adapter
  • Bridge
  • Composite
  • Decorator
  • Facade
  • Flyweight
  • Module
  • Proxy
  • Revealing Module

Структурные паттерны проектирования

  • Chain of Responsibility
  • Command
  • Mediator
  • Observer

MV* паттерны

В JavaScript можно применять некоторые реализации классических шаблонов MVC и его вариантов

Инструменты для тестирования JavaScript

Mocha — многофункциональная среда JavaScript-тестирования, работающая на Node.js и в браузере, что делает асинхронное тестирование простым и интересным . Тесты Mocha запускается серийно, что позволяет гибко и точно сообщать отчеты, а также отображает неотображаемые исключения в правильные тестовые примеры.

QUnit — это мощная, простая в использовании платформа тестирования модулей JavaScript. Он используется jQuery, jQuery UI и jQuery Mobile и способен тестировать любой общий код JavaScript.

Intern — позволяет писать тесты в JavaScript и TypeScript, используя любой понравившийся стиль (TDD, BDD, что угодно!).

Karma — представляет тестовую среду для разработчиков. Здесь не нужно настраивать множество конфигураций. Разработчики могут просто написать код и получить мгновенную обратную связь от своих тестов.

Jasmine — это среда для тестирования JavaScript. Он не полагается на браузеры, DOM или любые рамки JavaScript. Таким образом, он подходит для сайтов, проектов Node.js или везде, где может работать JavaScript.

Sinon.JS — позволяет проводить автономные тестовые проверки, заглушки и макеты для JavaScript. Работает с любой модульной системой тестирования.

Jest — это полное и простое решение для тестирования JavaScript.

Библиотеки

jQuery — пожалуй, самая известная и используемая библиотека для JavaScript.

ReactJS — библиотека JavaScript для создания пользовательских интерфейсов.

Underscore — библиотека JavaScript, обеспечивающая целый ряд полезных помощников по функциональному программированию без расширения каких-либо встроенных объектов.

Backbone — Backbone.js предоставляет структуру веб-приложениям с богатым API, с использованием интерфейса RESTful JSON.

RequireJS — это загрузчик файлов JavaScript и модулей. Он оптимизирован для использования в браузере, но его можно использовать в других средах JavaScript, таких как Rhino и Node.


Polymer — библиотека, помогающая создавать пользовательские элементы многократного использования в приложениях.

Dojo Toolkit — модульная библиотека для ускорения разработки JavaScript или AJAX приложений и сайтов.

Фреймворки

AngularJS — фреймворк с открытым исходным кодом для разработки одностраничных приложений на основе MVC-шаблона, упрощение тестирования и разработки.

Vue.js — прогрессивный фреймворк для создания пользовательских интерфейсов.

Emberjs — каркас веб-приложений, реализующий MVC шаблон, предназначенный для упрощения создания масштабируемых одностраничных веб-приложений.

Knockout.js — фреймворк для создания каркаса веб-приложений, реализующего Model-View-ViewModel шаблон.

JavaScriptMVC — это среда с открытым исходным кодом, содержащая лучшие идеи в разработке jQuery.

Шаблонизаторы

Handlebars — обеспечивает необходимую мощность, позволяющую эффективно создавать семантические шаблоны без каких-либо разочарований.

Jade — высокопроизводительный механизм для построения динамических шаблонов ваших JavaScript приложений.

Nunjucks — богатый и расширяемый механизм для работы с шаблонами, наследованием блоков, макросами, асинхронным управлением.

Mustache.js — логический шаблонный синтаксис для HTML, расширения тегов в шаблоне, используя значения, представленные в хеше или объекте.

Transparency -минимальный механизм шаблонов для jQuery. Он сопоставляет объекты JSON с элементами DOM с нулевой конфигурацией.

Hogan.js — шаблонный движок, разработанный в Twitter. Используйте его как часть вашего пакета ресурсов для компиляции и обработки динамических шаблонов.

Анимация

GSAP — быстрый набор скриптов для создания анимации.

TweenJS — это простая и мощная библиотека JavaScript для анимации элементов HTML5.

Snap.svg — позволяет создавать интерактивную, независимую от разрешения векторную графику, которая отлично смотрится на любом экране размера.

Textillate.js — позволяет использовать удивительную CSS3-анимацию для любого текста

Game Dev

MelonJS — движок с открытым исходным кодом, который позволяет разработчикам и дизайнерам сосредоточиться на контенте.

htmllab

Практика javascript 2020 года

Реализуйте функцию palmTree(n), которая будет принимать целое положительное n и возвращать строку, состоящую из символов « �� «. Например, вызов palmTree(3) приведёт к тому, что функция вернёт « ������ «. Примечание: при нечисловом аргументе функция должна вернуть false, а при вызове без аргумента — один символ « �� «. Примечание 2: хорошо, если это задание показалось вам простым. Оно рассчитано на закрепление основ JavaScript начинающими разработчиками.

Реализуйте функцию autoReplace(needles,change,haystack), которая будет принимать целое массив строк, которые нужно поменять на строку change внутри строки haystack. Например, вызов функции

autoReplace([‘салат’,’помидоры’], ‘еда’, ‘свежие помидоры пошли в салат’)

должна вернуть строку ‘свежие еда пошли в еда’.

Примечание: если хотите, тут можно использовать регулярные выражения, но это не обязательное требование, при этом регистр не должен учитываться. При отсутствии параметров должен вернуться false

Создайте функцию autoTags(str, tags, url), которая принимает входную строку str, массив слов для замены на теги и базовый URL (по умолчанию должен иметь значение «https://mysite.local/tag/»), которые нужно сделать тегами в строке str. Например, вызов функции

autoTags(‘интересно изучать js’, [‘html’,’js’])

должен вернуть строку

Примечание: если вы увидите как замыкание может упростить работу над задачей, используйте его.

Реализуйте функцию genitive(n, word). Функция принимает положительное целое число и объект word с вариантами записи слов для разных чисел. Объект word имеет свойства singular many1 many2, например . Функция должна корректно возвращать строку вида ‘2 товара’ или ’29 товаров’. Например, при вызове

функция должен вернуть строку ‘5 курсов’

Создайте объект classNames со свойством cname и методами

add( String [,String] )Добавляет к cname классы

remove( String [,String] ) Удаляет из cname классы

toggle ( String [, Boolean])Если класс у элемента отсутствует — добавляет, иначе — убирает. Когда вторым параметром передано false — удаляет указанный класс, а если true — добавляет.

Примечание: это пригодится в дальнейшем при работе с Познакомьтесь с интерфейсом https://developer.mozilla.org/ru/docs/Web/API/Element/classList .

Напишите функцию lorem(n), которая принимает положительное целое n (от 1 до 445) и при вызове возвращает строку длиной n символов из строки

«Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»

Например, при вызове lorem(100) функция должна вернуть строку

«Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore «

Напишите функцию myReplace(s1, s2, s3), которая будет принимать три строковых аргумента s1, s2, s3 и заменять в первом аргументе s1 все слова, совпадающие со вторым аргументом s2, на третий аргумент s3. Функция должна возвращать изменённую строку. Например, вызов

myReplace(«Ехал Грека, через реку», «р», «л»)

должен вернуть строку «Ехал Глека, челез леку»

Примечание: эта задача является частным случаем одной из предыдущих задач. Она более простая, позволяет отдохнуть и приступить к следующим задачам. Внимание, функция должна учитывать регистр слов.

Напишите функцию getPhraseByNum(n), которая принимает целое число n в диапазоне от 0 до 9999 и возвращает строку с описанием числа. Например, вызов функции

должен вернуть строку «две тысячи триста десять»

Напишите функцию directionByKeyCode(keyCode), которая принимает одно из чисел 87, 65, 68 или 83, а возвращает соответственно одну из строк ‘вверх ↑’, ‘влево ←’, ‘вправо →’,’вниз ↓’. Например, вызов

должен вернуть ‘вверх ↑’

Напишите функцию byDesc(arr), которая на вход принимает числовой массив и возвращает массив отсортированный по убыванию. Например, вызов byDesc([3,10,2,7]) должен вернуть [10,7,3,2]

Напишите функцию oddity(arr), которая на вход принимает числовой массив и возвращает массив отсортированный так, что в начале массива идут все нечётные числа, а потом все чётные. Например, вызов oddity([3,10,2,7]) должен вернуть [7,3,10,2]. Формально, правильным ответом является и [3,7,2,10], но мы будем придерживаться детерминистского подхода

Напишите функцию byLength(str), которая на вход принимает массив строк, а возвращает массив строк отсортированный по убыванию количества символов в строке. Например, вызов byLength([‘колхоз’,’гладиолус’,’вода’,’книга’]) должен вернуть [‘гладиолус’,’колхоз’,’книга’,’вода’]

Дан массив объектов

Реализуйте функцию sortBy(usersArray,prop), которая принимает массив подобный массиву users и строчное название поле сортировки prop, которое по умолчанию равно ‘name’, в возвращает массив объектов по возрастанию числового признака или по алфавиту для строкового признака. Например, вызов

должен вернуть отсортированный массив

Напишите функцию sortEmail(arr), которая сортирует массив строк с электронными адресами по имени домена (точнее по части, идущей после символа ‘@’). Например, вызов функции

должен вернуть массив [‘m@asite.loc’, ‘m@bsite.loc’, ‘m@csite.loc’]


Напишите функцию stepByStep(num1, num2, step), которая принимает два числа num1, num2 и аргумент step с количеством «шагов», которые нужно построить между числами num1 и num2. Функция должна возвращать массив чисел между num1 и num2, включая последние. Например, при вызове

stepByStep(0, 10, 2)

функция должна вернуть массив чисел [0,5,10], а при вызове

stepByStep(20, 40, 5)

вернуть массив [20, 24, 28, 32, 36, 40]

Напишите функцию gradient(color1, color2, step), которая принимает две строки с цветами в формате ‘#rrggbb’ в переменные color1, color2 и аргумент step с количеством «шагов», которые нужно построить между цветами color1 и color2. Функция должна возвращать массив строк с промежуточными цветами в формате rgb(). Например, при вызове

функция должна вернуть массив строк:

а для вызова gradient(‘#336699′,’#89ef12’,5) вернётся

Напишите функцию randRange(n1,n2), которая возвращает случайное целое в диапазоне от n1 до n2. Например, вызов функции с аргументами

может вернуть 59 или 63. n1 и n2 должны быть включены в диапазон генерации

Написать функцию nearestDistance(point, points), которая принимает объект point со свойствами x и y соответствующими координатам на плоскости, и массив points подобных объектов с другими координатами. Функция должна возвращать индекс ближайшей точки из массива points. Например, при вызове

функция должна вернуть число 2, потому как является ближайшей к

Есть объект со структурой

Написать функцию category(categories), которая принимает объект типа categories и возвращает строку. Например, вызов

должен вернуть строку ‘Компьютеры/Ноутбуки/Все ноутбуки/Игровые’

Как представить 9500руб как можно меньшим количеством купюр достоинством 5000, 2000, 200, 100 рублей? Напишите функцию search(n), которая принимает целое число кратное ста и возвращает объект со свойствами в виде номинала купюр и значениями — их количеством. Например, вызов

должен вернуть объект

Написать функцию getWordStat(str), которая принимает строковую переменную str, а возвращает массив объектов. Каждый объект хранит одно свойство — слово и одно значение — количество вхождений этого слова в строку str. В возвращающемся массиве не должны учитываться знаки препинания, пробельные символы и пустые строки. Например, вызов

getWordStat(‘Ехал Грека, через реку реку реку’)

Напишите функцию extractProps(arrObjects,prop), которая по значению аргумента prop вернёт массив всех одноимённых свойств из объектов массива arrObjects. Например, вызов

вернёт массив [«Василий»,»Наталья»,»Джон»]

Написать функцию bmi(m,h), которая принимает аргументы m (массу тела в килограммах) и h (рост человека в метрах), а возвращает индекс массы тела ( https://ru.wikipedia.org/wiki/%D0%98%D0%BD%D0%B4%D0%B5%D0%BA%D1%81_%D0%BC%D0%B0%D1%81%D1%81%D1%8B_%D1%82%D0%B5%D0%BB%D0%B0 )

Например, при массе человека 100кг и росте 1.8м
bmi(100,1.8)

функция должна вернуть 30.86

Напишите функцию quadro(), которая будет принимать неограниченное количество целочисленных аргументов, а возвращать массив квадратов этих чисел

должен вернуть [4,36,100,16]

Напишите функцию fib(n), которая получает целое число n, а возвращает массив из n элементов последовательности Фибоначчи (0,1,1,2,3,5…)

Например, при вызове функция

должна вернуть массив [0,1,1,2]

Напишите функцию fibNthElement(n), которая получает целое число n, а возвращает n-й элемент последовательности Фибоначчи (1,1,2,3…)

Например, при вызове функция

должна вернуть массив 2

Реализуйте тело функции sequence(numArr) так, чтобы она возвращала другую функцию возвращающую поочередно элементы массива numArr. Например, первый вызов some()

let some = sequence([10,5,2,1]);

должен вернуть 10, потом 5 и так далее.

Реализуйте функцию days(), которая возвращает количество дней (полных суток) оставшихся до грядущего Нового Года.

Реализуйте функцию differenceDays(d1, d2), которая возвращает количество дней (полных суток) между двумя датами d1 и d2 заданными через конструктор Date. Например, вызов

differenceDays(new Date(2020,9,5),new Date(2020,9,7))

должен вернуть 2

Реализуйте функцию differenceTimes(d1, d2), которая возвращает строку в формате «hhh:mm:ss» соответствующую разнице между двумя датами в часах, минутах и секундах. Если количество минут или секунд задается не двузначным числом, нужно предварять их нулем. Например, вызов

differenceTimes(new Date(2020,9,7,10,10,20),new Date(2020,9,7,12,13,24))

должен привести к возврату ‘2:03:04’

Напишите функцию checkPhone(phone), которая на вход принимает строку с номером телефона и возвращает true, если номер подходит к шаблону вида «+X(XXX)XXX-XX-XX», где X — любое целое от 0 до 9. Если строка не подходит, то функция должна возвращать false. Например, вызов

Напишите функцию validPhone(phone), которая на вход принимает строку с номером телефона, а возвращает строку типа «+XXXXXXXXXXX», где X — любое целое от 0 до 9. Причём, на месте пустых «вводов» должны присутствовать символы подчёркивания «_». При задании некорректного символа, функция должна вернуть false. Например, вызов

должен вернуть «+7495_______»

Напишите функцию daysAgo(dataObject), которая принимает объект Date и возвращает словесное описание произошедшего события — «N дн. назад». Например, если текущая дата 16.05.2020, а функция вызывается с датой соответствующей 13.05.2020, результат возврата функции должен быть «2 дн. назад». Примечание: в решениях типа momentjs указываются не только дни, но и недели, месяцы и т.д. Например, вызов функции

daysAgo(new Date((new Date()).getTime()+1000*3600*24+1000))

должен вернуть «1 день назад», а вызов

daysAgo(new Date((new Date()).getTime()+1000*3600*24*17+1000))

должен вернуть «17 дней назад»

Напишите функцию timeAgo(dataObject), которая принимает объект Date и возвращает словесное описание произошедшего события — «N T назад», где N — целое число соответствующее годам, или месяцам, или неделям, или дням, или часам. Например, вызов

timeAgo(new Date((new Date()).getTime()+1000*3600*24*365*21+1000))

Мастер Йода рекомендует:  Kotlin — всё по этой теме для программистов

должен вернуть «21 год назад»

Реализуйте метод even(), который будет определять является ли числовая величина чётной или нечётной. Для чётной метод должен возвращать 1, для нечётной — 0.

Например, в контексте кода

вызов n.even() должен вернуть 1

Примечание: эта работа на расширение прототипа встроенного объекта Number.

Расширьте встроенный конструктор массивов методом mul(n). При вызове, метод должен возвращать новый массив с элементами текущего массива, умноженными на n. Например, в контексте вызова

Вызов метода d.mul(2) должен вернуть массив [68,10]

Создайте класс CSS, у которого будет статический метод rgb(r,g,b). Метод должен возвращать строку в формате «rgb(23,56,100)». r,g,b должны быть целыми числами от 0 до 255 (включая). Например, вызов


должен вернуть ‘rgb(23,56,100)’. А вызов

должен вернуть ‘rgb(255,0,37)’

Создайте функцию nextNumber(arr, n), которая принимает массив arr и необязательный параметр n с номером первого элемента, который должен быть возвращен возвращаемой функцией. Например, вызов функции

Практика javascript 2020 года

Задание 1: Сортировка карточек

Вам дана стопка посадочных карточек на различные виды транспорта, которые доставят вас из точки A в точку B. Карточки перепутаны, и вы не знаете, где начинается и где заканчивается ваше путешествие. Каждая карточка содержит информацию о том, откуда и куда вы едете на данном отрезке маршрута, а также о типе транспорта (номер рейса, номер места и прочее).
Предоставьте JavaScript API, который отсортирует такой список карточек и вернет словесное описание, как проделать ваше путешествие. API должен принимать на вход несортированный список карточек в формате придуманном вами и возвращать, например, такое описание:

• Take train 78A from Madrid to Barcelona. Seat 45B.
• Take the airport bus from Barcelona to Gerona Airport. No seat assignment.
• From Gerona Airport, take flight SK455 to Stockholm. Gate 45B. Seat 3A. Baggage drop at ticket counter 344.
• From Stockholm, take flight SK22 to New York JFK. Gate 22. Seat 7B. Baggage will be automatically transferred from your last leg.

• Алгоритм должен работать с любым количеством карточек, если все карточки образуют одну неразрывную цепочку.
Время прибытия и отправления неизвестно и не важно. Подразумевается, что средство передвижения для следующего отрезка дожидается вас.
• Структура кода должна быть расширяема для использования любых типов транспорта и информации, которая может быть связана с каждым типом транспорта.
• API будет вызываться из других частей JavaScript-кода без необходимости дополнительных запросов между браузером и сервером.
• Не используйте библиотеки и фреймворки, напишите все с нуля.
Задокументируйте в коде формат входных и выходных данных.

Задание 2: Проход по дереву

Написать тело функции reversePrint(), чтобы она при вызове доходила до самого глубокого свойства next и поднимаясь выводила числа. Например, 4,3,2,1.

Задание 3: Сортировка массива объектов

Создайте массив объектов users. Каждый объект — элемент массива — должен иметь имя сотрудника, его возраст и рост. Отсортируйте массив по возрасту сотрудников (по свойству age объектов).

  1. изначально массив не должен быть упорядочен
  2. количество элементов не должно быть менее 5
  3. предусмотреть возможность сортировки по разным свойствам с использованием замыкания (Пример замыкания в JavaScript — https://www.youtube.com/watch?v=8JsteOQxJZc )

Задание 4: Работа с декартовыми координатами

Даны координаты трёх точек в декартовой системе. Определить какая из них ближе к четвёртой точке с координатами x,y. Примечания:

  1. координаты точек генерировать случайным образом
  2. решение должно выглядеть в виде функции
  3. формат хранения координат точек продумать самостоятельно, но не тратить на каждую ось по отдельной глобальной переменной
  4. рассмотреть вариант с трёхмерной системой координат

Задание 5: Работа со строкой

В переменной str находится текст. Написать функцию, возвращающую массив объектов, свойствами которых будут отдельные слова текста, а значениями — частота встречаемости этого слова

Задание 6: Копирование массивов

Напишите функцию копирования многомерного массива. Примечание: используйте рекурсию.

Задание 7: Замена строк

Написать функцию myReplace(s1, s2, s3) , которая будет принимать три строковых аргумента s1 , s2 , s3 и заменять в первом аргументе s1 все слова, совпадающие со вторым аргументом s2 , на третий аргумент s3 .

Задание 8: Фильтрация массива

Напишите функцию для фильтрации массива filterArr(inArr,filter) , где inArr — входной одномерный массив, filter — функция принимающая по очереди каждый элемент inArr и возвращающая true , если этот элемент доложен входить в результат фильтрации или false , если элемент не должен попадать в результат.

  1. Рассмотрите варианты, когда inArr содержит (а) строки, (б) числа, (в) объекты. filter для разных случаев должна быть соответствующая.
  2. Функция filterArr(inArr,filter) должна возвращать отфильтрованный массив

Задание 9: Извлечение массива свойств

Возьмите массив, подобный массиву users из задания 3. Напишите функцию extractProps(prop) , которая по значению аргумента prop вернёт массив всех одноимённых свойств из объектов массива users .

Задание 10: Числа словами

Создайте метод у всех числовых объектов, который бы выводил значение числа от 0 до 99 в виде слов. Например число 45 должно выводиться как «сорок пять». Для выполнения задания используйте свойство prototype.

8 плохих практик JavaScript, которые 100% приведут к сбоям

69’515 подписчиков
14’726 просмотров на пост

Полезные материалы по всему, что может быть интересно программисту.

Детальная рекламная статистика будет доступна после прохождения простой процедуры регистрации

  • Детальная аналитика 70’046 каналов
  • Доступ к 28’004’146 рекламных постов
  • Поиск по 112’332’059 постам
  • Отдача с каждой купленной рекламы
  • Графики динамики изменения показателей канала
  • Где и как размещался канал
  • Детальная статистика по подпискам и отпискам

Найдено 1677 постов

JWT для чайников: 5 шагов к пониманию JSON веб-токенов

Что такое JWT, с чем его едят, и как он обеспечивает безопасность вашего приложения? Пошаговое руководство для понимания JSON веб-токенов с нуля.

5 вредных привычек неэффективных программистов

Разработчики бывают разные: блестящие, компетентные, способные… и ужасные. В чем проблема плохих программистов? В плохих привычках!

Встречают по одежке или используем английский в IT

Английский в IT – ключевой навык, без которого ну совсем никак. Не знаешь, как начать беседу и боишься быть непонятым? Курс тебе в помощь.

​​��Где обучиться web — разработке БЕСПЛАТНО?

����‍��Успей зарегистрироваться на БЕСПЛАТНЫЙ онлайн марафон по основам веб программирования, и ты НАПИШЕШЬ КОД уже в первый день марафона.

✅А ещё ты узнаешь с чего начать изучать веб-разработку и поймёшь, подходит тебе это или нет.

��Жми «РЕГИСТРАЦИЯ» — регистрируйся за 30 секунд

Пишем оператор Kubernetes на Python без фреймворков и SDK

Нужен оператор Kubernetes, но нет времени учить Go? В этой статье мы покажем, как создать надёжный оператор, используя Python.

Путь к мастерству: создаём веб-карту на Python

Хотите стать мастером в Python? Тогда изучайте язык на практике. В этом материале рассказываем, как создать веб-карту на Python.

Хотите быстро выучить Java? Сожгите все книги


Пытаетесь выучить Java? Ускорьте процесс! Сравниваем правильный и ошибочный подходы. Подборка лучших ресурсов для овладения этим языком.

​​Как самостоятельно создать сайт? Всего за три дня директор центра SymbioWay всему научит.

Подробности по ссылке �� https://clc.to/ZIBbjw

�� Создашь лендинг, который станет визитной карточкой фрилансера по созданию сайтов.
�� Получишь шанс выиграть грант на 30 000 рублей для поступления в Skillbox.
�� Гарантированно заберешь сертификат на изучение английского языка от EnglishDom.

Перенимай опыт ведущих специалистов страны!

​​Надоело просить повышения и вариться в местечковой тусовке? Прокачивай английский. Это самый простой способ найти топового работодателя и не зависеть от превратностей российского рынка. Рекомендуем Skyeng — самую крупную в Европе онлайн-школу английского языка. Тут все свои!

Занятия проходят онлайн, в любое время дня и ночи. Никаких учебников и тетрадей, нужны только компьютер и интернет. Учись с личным преподавателем на крутой образовательной платформе, смотри кино в оригинале с умными субтитрами и вебинары, занимайся в приложениях.
Начни прямо сейчас на бесплатном пробном уроке и получи 3 занятия в подарок по промокоду PROGLIB3 при первой оплате.

JavaScript Maps vs Обычные объекты: смертельная битва

Стандарт ES6 дал в руки разработчикам мощное и гибкое оружие – JavaScript Maps. Кажется, простым объектам уже пора на покой… Или нет?

Небольшой и полезный видеокурс по основам блокчейна на Python

Собрались, выдохнули и приступили к знакомству с базовыми принципами блокчейна на Python. Небольшой проект с понятным видеокурсом.

Прощай, плохой код: вот как не лажать в JavaScript

На JavaScript легко писать работающие решения, но легко и совершать ошибки. Рассказываем и показываем, как стать лучше в JavaScript.

Как стать программистом? 10 советов начинающему

Гадаете, трудно ли быть программистом? Узнайте, что вас ожидает. Рассказываем, к чему готовиться, и какие навыки развивать.

Как писать на PHP в 2020 году, или Путь продолжающего

На что обратить внимание в PHP в 2020 году, и как стать полноценным Middle? Рассказываем, показываем, делимся полезными ресурсами.

Классические книги по математике для вечных студентов

Если ты собрался взяться за вышку или вспомнить некоторые вопросы – пришло время для актуальных книг по математике из нашей подборки.

7 фреймворков автоматического машинного обучения

Чем интересны системы автоматического машинного обучения? Какие фреймворки годятся для AutoML? В чем пока есть ограничения? Отвечаем в статье.

​​Создай первую модель машинного обучения на Python. На это потребуется всего три дня интенсива!

Подробности по ссылке �� https://clc.to/uAwAIg
Участие бесплатное!

Chief Data Scientist в Skillbox и преподаватель МАИ Валентин Пановский поделится своими знаниями и практическим опытом.

�� Стань одним из лучших и получи грант на 30 000 рублей для обучения в Skillbox!

Упрости свой JavaScript – используй map, reduce и filter

Бросай forEach – открывай новые горизонты! Введение в перебирающие методы массивов, которые должен знать каждый JavaScript разработчик.

​​Присоединяйся к самому масштабному IT-забегу

11 августа в Измайловском парке пройдет крупнейший ИТ-забег RUNIT 25. Бегут только программисты, тестировщики, devops, а еще сеошники и те, кто занимается контекстом, в общем, кто так или иначе связан с digital.

Участников ждет:
– размеченная трасса,
– электронный хронометраж,
– стартовый пакет (с майкой, номером, спортивной водой и батончиком),
– пункты питания,
– образовательная программа,
– множество развлекательных активностей до самого вечера (игротека от мосигры, игры в очках виртуальной реальности).

Медали получат все участники соревнований на финише!

Выбирай свою дистанцию: 3 км, 5 км, 10 км, 25 км, эстафета или командный зачет!
Бонус промокод на 20% скидку – proglibforever

Обмануть автомобиль: спуфинг дорожных знаков и Deep Learning

Мы атаковали реальные авто, используя Deep Learning для генерации знаков дорожного движения. В этом помогли мощный GPU и коммерческая печать.

Как закреплять основы javascript на практике?

html и css знаю неплохо. Есть опыт верстки примерно 20 страничек.
Языков программирования не изучал.

Итак
1. Выучил первую часть учебника learn.javascript.ru/#book-toc-638 .Прошелся ни один раз. Около 80% задач выполнил самостоятельно.
2. Неоднократно смотрел видеоуроки Sorax, HexletUnivercity и частично Специалиста.
3. Есть печатное издание Javascript. Подробное руководство. 6 издание. Дэвид Флэнаган.
Вскользь читал эту книгу до 200 страницы.

В общем теорию знаю неплохо, единственное, что плохо понимаю, так это замыкания.
Из практики делал только задачи на learn.javascript.ru и создал программку для расшифровки ИНН (актуально для Украины), что-то вроде такого https://decode.org.ua/inn
Пытался сделать калькулятор, но пока не выходит, так как клиентский javascript еще не изучал.
Пробовал смотреть видеоуроки по angular.js, но там вообще все тяжело.

Что делать дальше?
1. Еще несколько раз пройтись по теории, а потом думать, что делать дальше.
2. Идти дальше по учебнику learn.javascript.ru и учить клиентский javascript
3. Выполнять практические задачи.

Лично я предпочитаю 3 вариант, но не знаю, где именно брать эти задачи.
Читал, что можно пробовать разобраться в библиотеках, что-то поменять. Качал исходники jQuery, но разобрать код так и не могу.
Можно на github найти проект и присоединиться к нему, но по запросу javascript ничего доступного для меня не выдает.
В общем запутался и не знаю, что делать дальше.

По html и css есть куча уроков верстки, где все становиться понятно.
В php есть уроки по созданию движков для интернет-магазина (php я не учил).
А вот что делать с javascript?

12 концепций, которые прокачают ваш JavaScript

Несмотря на уровень знаний вы должны понимать основополагающие концепции языка. Эти 12 концепций, конечно, не охватывают всего, что должен знать разработчик, но важны для любого JS-программиста.

Присвоения примитивных и ссылочных типов

Понимание того, как JavaScript присваивает значение переменной, является залогом работающего кода. Без этого вы можете легко написать код, который непреднамеренно будет изменять значения переменных.

JavaScript всегда использует присвоение по значению. И это очень важно: когда присваиваемое значение является одним из 5 JavaScript’овых примитивов (Boolean, null, undefined, String и Number) — присваивается фактическое значение. Однако, когда присваиваемое значение является типом Array, Function или Object, присваивается ссылка на объект в памяти.

Например, в коде ниже переменной var2 присваивается значение var1 . Т. к. var1 является примитивом (String), то переменной var2 присваивается строковое значение var1 , и она может рассматриваться как отдельная (независимая) переменная. Соответственно, изменения var2 никак не отразятся на var1 .

А теперь попробуем то же самое с типом Object .

Если бы вы ждали от кода выше такого же поведения, как и с примитивами, — это, вероятнее всего, вызвало бы ошибки. Подобное может быть особенно неудобным, если вы решите создать функцию, которая будет изменять какой-нибудь Object .

Замыкания

Замыкания — важный паттерн для приватизации переменной. В примере ниже createGreeter возвращает анонимную функцию, которой доступна переданная переменная greeting со значением «Hello». После эта переменная будет доступна для sayHello .

Или же более «правдоподобный» пример. У вас может быть некая функция apiConnect(apiKey) , которая возвращает некоторые методы с использованием API ключа. В таком случае этот ключ нужно передать только один раз.

Деструктуризация

Деструктуризация — это просто способ извлечения свойств из объектов.

Если вам нужно извлечь свойство, дав ему другое имя, — делайте так:

В следующем примере деструктуризация применяется для «чистой» передачи объекта person в функцию introduce . Иначе говоря, деструктуризация может использоваться для непосредственного извлечения передаваемых параметров. Для тех, кто разрабатывает на React, это может показаться знакомым.

Spread

Нельзя не сказать об этой концепции. Spread — это специальный оператор JavaScript, который позволяет расширять выражения в тех местах, где предусмотрено использование нескольких аргументов.

«КРОК», Москва, Троицк, Санкт-Петербург, Нижний Новгород, Самара, Иркутск, Пермь, Краснодар, Воронеж, Челябинск, от 120 000 до 240 000 ₽

В следующем примере Math.max() не может принять массив arr , т. к. функции с таким аргументом не существует. Math.max() принимает числа отдельными аргументами. Оператор spread (три точки — . ) используется для извлечения отдельных элементов из массива.


Rest-параметры

Rest-параметры позволяют передавать произвольное количество аргументов, принимая их в виде массива.

Методы массивов

С помощью методов массива в JavaScript можно добиться крутых (а порой и элегантных) способов трансформации данных. На StackOverflow часто можно наткнуться на вопросы о том, как работать с массивом объектов.

Ниже будут перечислены некоторые методы массива, сгруппированные по назначению. Однако это далеко не весь список.

map, filter, reduce

В методах map() , filter() и reduce() иногда можно запутаться. Они полезны для трансформации массива или возвращения его агрегатного значения.

  • map(): возвращает массив, в котором каждый элемент изменяется с помощью переданной функции.
  • filter(): возвращает массив с теми элементами, в которых переданная функция возвращает true .
  • reduce(): работа с элементами с сохранением промежуточного результата.

find, findIndex, indexOf

Эти методы очень похожи. Используйте их следующим образом:

    find(): возвращает первый элемент массива, удовлетворяющий определенному условию.

Опять же, обратите внимание, что все числа после 5 удовлетворяют условию, но возвращаться будет только первое значение. Это полезно в случаях, когда вы используете break при первом совпадении.

  • findIndex(): метод идентичен find() , но вместо возвращаемого значения здесь возвращается индекс первого подходящего элемента.
  • indexOf(): метод идентичен findIndex() , но вместо функции он принимает искомое значение. Используйте этот метод в тех случаях, когда вам не нужна функция для проверки элемента на совпадение.
  • push, pop, shift, unshift

    Вот отличные методы, которые позволяют добавлять или убирать элементы в массиве.

    • push(): этот метод относительно простой. Он добавляет элемент в конец массива. Метод модифицирует массив и одновременно возвращает добавленный элемент.
    • pop(): метод удаляет последний элемент массива. Как и в прошлом случае, метод изменяет массив и одновременно возвращает удалённый элемент.
    • shift(): этот метод удаляет первый элемент массива. Метод изменяет массив и возвращает удалённый элемент.
    • unshift(): добавляет один или несколько элементов в начало массива. Как и прошлые методы, он изменяет массив, но возвращает новую длину массива.

    splice, slice

    Эти методы либо изменяют, либо возвращают подмассив элементов.

    • splice(): метод изменяет массив, удаляя или заменяя существующий элемент, и/или добавляет новый. Метод только изменяет массив. Код ниже можно объяснить так: в позиции 1 массива удалить 0 элементов и вставить b.
    • slice(): возвращает подмассив элементов массива, начиная и заканчивая на определённой позиции. Если конечная позиция не указана, возвращается остаток массива. Важно понимать, что этот метод не модифицирует массив, а только возвращает подмассив.

    Метод сортирует массив, основываясь на функции, которая принимает первый и второй элемент. Этот метод изменяет сам массив. Если в массиве порядок элементов не был изменен, метод возвращает 0, если изменён — 1.

    Генераторы

    Не забываем и про них. Генератор определяет, какое значение будет возвращено при следующем вызове next() .

    Мастер Йода рекомендует:  Как узнать IP адрес, и для чего это нужно

    А вот пример использования генератора для бесконечных значений:

    Разница операторов сравнения (===) и (==)

    Не стоит пренебрегать разницей этих операторов. Оператор ( == ) перед операцией сравнения будет выполнять преобразование типов, а ( === ) делать преобразования не будет.

    Сравнение объектов

    Частая ошибка у новичков в JavaScript — это неправильное сравнение объектов. Дело в том, что переменные объектов хранят в памяти ссылку на объект, а не сам объект. Один из способов сравнения двух объектов — предварительное преобразование их в JSON строку. Однако у этого способа есть недостаток: не факт, что порядок в объекте сохранится. Более безопасный способ сравнения объектов — использование специальной библиотеки, которая сравнивает объекты на более глубоком уровне (к примеру isEqual от loadash)

    Хоть следующие объекты кажутся одинаковыми, они ссылаются на разные объекты в памяти.

    А вот в следующем примере сравнение возвращает true , потому что второй объект приравнивается к первому и они оба ссылаются на один объект.

    Важно понимать разницу между примитивами и ссылочными типами для правильной установки переменной, которая будет ссылаться на объект в памяти.

    Callback-функции

    Многие избегают callback-функции (функции обратного вызова). А зря — ведь это довольно просто! В следующем примере console.log() будет передан в myFunc() в качестве callback-функции.

    Промисы

    Как только вы начнёте понимать работу callback’ов в JavaScript, возможно, совсем скоро вы окажетесь в «аду обратных вызовов». На помощь приходят промисы (англ. Promises). Оберните свою асинхронную логику в промисы: resolve — для успехов, reject — для фейлов. Используйте then для обработки успеха и catch — для обработки фейлов.

    Async Await

    Как только вы разберётесь в промисах, вам может понравиться async await — это«синтаксический сахар» поверх промисов. Ниже пример async функции с await и промисом.

    Заключение

    Если вы не знали ни об одной из этих 12 концепций — не стоит откладывать их изучение в долгий ящик. А если знали — практика лишней никогда не будет.

    8 плохих практик JavaScript, которые 100% приведут к сбоям

    Полезные материалы по всему, что может быть интересно программисту.

    About
    Platform
    Made by @FCK_RKN_bot Лучший прокси-бот для Telegram

    Математики в шоке: в JavaScript происходит такое!

    В это невозможно поверить! 0.1 + 0.2 не равно 0.3! Math.max() меньше, чем Math.min()! Заходи и узнай сам, как JavaScript нас обманывает!

    Spring для начинающих: наиболее полный видеокурс

    Ситуации, когда нужен джавист, но не требуется знание Spring – редкость. Представляем полный видеокурс на тему «Spring для начинающих».

    Свежие идеи проектов, которые принесут вам успех

    Вы программист и ищете вдохновение. Для резюме ли, для заработка ли – дело десятое. В статье собраны идеи проектов, которые вам пригодятся.

    Аниме и генеративно-состязательная сеть: в чём связь?

    Генеративно-состязательная сеть, которую вы построите, создаёт персонажей из манги и аниме. Рисуйте вайфу в своё удовольствие!

    Иллюстративный видеокурс по линейной алгебре: 11 уроков

    Видеокурс по линейной алгебре с большим количеством анимаций будет полезен при создании компьютерной графики и решении задач ML.

    Читаемый код: 10 практик успешного написания


    Набор из десяти несложных правил, помогающих писать читаемый код, понятный не только вам, но и всем, кто с ним столкнётся.

    26 полезных возможностей Python: букварь разработки от А до Z

    Букварь известных и не очень возможностей Python для простой и приятной разработки. 26 модулей, приемов и хитростей, о которых вы могли не знать.

    Распознать выгорание и спасти свою карьеру в IT

    Вы едва заставляете себя ходить работу, которая когда-то вас вдохновляла, а отпуск совсем не помогает? Возможно, у вас профессиональное выгорание.

    Погружаемся в основы и нюансы тестирования Python-кода

    Пишете код на Python? Будет полезно знать о принципах тестирования Python-кода ваших приложений. Изучайте статью и применяйте навыки в работе.

    8 плохих практик JavaScript, которые 100% приведут к сбоям

    Разобрали восемь практик React, в рамках которых нужно быть максимально внимательным, ведь они могут вызвать сбой в вашем приложении.

    Алгоритмы и структуры данных: развернутый видеокурс

    Структуры данных и их понимание, очень важны для того, чтобы программы стали понятнее, код – лаконичнее, а потребление ресурсов – минимальным.

    Интернет вещей: на чем писать IoT разработчику?

    Интернет вещей – популярное веяние. Хотите приложить руку к IoT? Вот перечень языков, один из которых вам точно нужно знать.

    Шифруйся: лучшие бесплатные ПО для защиты данных

    Спецслужбы и злые хакеры читают ваши письма? Контекстная реклама знает о вас слишком много? Делимся эффективными рецептами защиты данных.

    UNIX-подобная операционная система: пишем ядро на языке C

    UNIX-подобная операционная система интересна для разбора, а также для написания собственного ядра, которое выведет сообщение. Ну что, напишем?

    27 супер плагинов VS Code для JavaScript разработчика

    Думаете, что уже установили на свой VS Code все, что нужно? Вы просто еще не видели эти расширения! Срочно смотрите и устанавливайте!

    ​​Postuf — продуктовая компания, которая занимается разработкой приложения, позволяющего узнать всю информацию о человеке из сети. Вводите имя, загружаете фото и получаете информацию об увлечениях, круге общения, последних совершённых действиях — всё, что только можно узнать о человеке из открытых источников.

    Сейчас они ищут разработчиков на Android, iOS и бэкенд (PHP, MySQL, Redis). Условия комфортные — офис в центре Москвы (ст.м. Чкаловская), Macbook Pro для работы, бесплатные обеды и ежегодный рост з/п на 20к.

    Подробнее о компании и вакансии: https://postuf.com/

    Регулярные выражения: базовое знакомство для новичков

    Знакомьтесь, регулярные выражения! Из статьи вы почерпнёте основные идеи, распространённые шаблоны и функции с примерами.

    NLP – это весело! Обработка естественного языка на Python

    Разберем принципы NLP и научим компьютер понимать человеческий язык. Составим пайплайн для анализа текстов и реализуем его с библиотекой spaCy.

    Сколько зарабатывает системный администратор, и как им стать

    Системный администратор – кто он: бедный работяга или бездельник-богач? Рассказываем, сколько зарабатывает админ, и что он должен уметь.

    Логические задачи: 15 упражнений для тренировки мозга

    Программистам без логики никуда. Поэтому время прокачать мозг: проверьте свои способности. Вам под силу эти логические задачи?

    PROG-TIME

    Практикуемся в работе на языке JavaScript. Полезные уроки для закрепления выученного ранее материала и получения новых знаний на практике. Здесь мы практикуемся и набираем опыт в области WEB-программирования. Учимся строить грамотные сайты, продающие сайты.

    Вы можете предложить тему на нашем форуме, задать свой вопрос или помочь другим начинающим программистам: https://vk.com/prog_time

    Так же практикуйте своё знание языков программирования на нашем канале:https://www.youtube.com/channel/UCF_m4pWmG7zor1hHBCf_PqA

    Генератор случайного кода цвета. JavaScript генератор рандомного цвета

    В новой записи мы будем практиковаться в написании кода на JavaScript. Сегодня я вам покажу как сделать генератор случайного цвета на javascript. Мы с вами напишем функцию которая будет создавать […]

    Практика JavaScript: эффект света от фонаря.

    Всем привет сегодня я вам покажу как можно создать эффект подсвечивания контента. При передвижение мыши по экрану будет создаваться иллюзия свечения фонарём. Это очень простой эффект, всего 2 HTML элемента, […]

    JavaScript практика: визуализация голоса с микрофона. Web Audio API

    Я нашёл контент. Сегодня я научу вас создавать визуализацию звука на HTML + CSS +JS. Мы будем использовать микрофон, а звук будет преобразовываться в виде звуковых частот на экране. Изучим […]

    Индикатор сложности пароля на чистом JavaScript

    В данной записи я вам покажу как сделать индикатор сложности пароля на чистом JavaScript. Данный индикатор будет менять свой цвет и длину заливки. Вы самостоятельно можете прописать параметры по которым […]

    Как создать progress bar на чистом JavaScript. Линия прогресса для сайта

    В данной записи я вас научу создавать Progress Bar. Progress Bar – это линия прогресса, которая увеличивается по мере прокрутки страницы. HTML CSS JavaScript

    Модальное окно на чистом JavaScript. Простое модальное овно для сайта

    В данной записи я вам покажу как сделать модальное окно на чистом JavaScript. Модальное окно будет открываться после нажатия на кнопку. HTML HTML простой – кнопочка и контейнер для модального […]

    Простой калькулятор на HTML + CSS + JavaScript

    Всем привет в данной записи мы с вами рассмотрим реализацию простого калькулятора на CSS, HTML, JavaScript. Это простой и очень красивый калькулятор, который вы легко сможете добавить на свой сайт. […]

    Адаптивная верстка на jQuery. Аналог @media для jQuery скриптов

    В данной записи я вам покажу как сделать проверку ширины экрана устройства , с помощью jQuery. Это нужно для того чтобы вы могли прописывать JavaScript код который будет срабатывать при […]

    Скроллинг к элементу на jQuery. Плавный переход при нажатии на кнопку

    Сегодня мы вновь попрактикуемся с jQuery. Мы будем писать скрипт плавного скроллинга при нажатии на кнопку. Сделаем так чтобы при нажатии на кнопку, пользователя плавно переносило на нужный блок. Этот […]

    Простое модальное окно на jQuery. Готовое модальное окно для сайта

    Всем привет, сегодня я вам покажу как сделать модальное окно без использования плагинов и библиотек(только jQuery).Мы сделаем кнопку при нажатии на которую будет появляться окно, в которое вы можете разместить […]

    8 плохих практик JavaScript, которые 100% приведут к сбоям

    Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

    Дизайн лендинга

    Создавайте дизайн любых сайтов — для себя и на заказ!

    Популярное


    • Главная
    • ->
    • Материалы
    • ->
    • 11 ошибок при работе с JavaScript

    Reg.ru: домены и хостинг

    Крупнейший регистратор и хостинг-провайдер в России.

    Более 2 миллионов доменных имен на обслуживании.

    Продвижение, почта для домена, решения для бизнеса.

    Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

    Бесплатный Курс «Практика HTML5 и CSS3»

    Освойте бесплатно пошаговый видеокурс

    по основам адаптивной верстки

    на HTML5 и CSS3 с полного нуля.

    Фреймворк Bootstrap: быстрая адаптивная вёрстка

    Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

    Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

    Верстайте на заказ и получайте деньги.

    Что нужно знать для создания PHP-сайтов?

    Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

    Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

    Создайте свой сайт за 3 часа и 30 минут.

    После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

    Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

    Изучите основы HTML и CSS менее чем за 4 часа.

    После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

    Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

    Бесплатный курс «Сайт на WordPress»

    Хотите освоить CMS WordPress?

    Получите уроки по дизайну и верстке сайта на WordPress.

    Научитесь работать с темами и нарезать макет.

    Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

    Хотите изучить JavaScript, но не знаете, как подступиться?

    После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

    Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

    *Наведите курсор мыши для приостановки прокрутки.

    11 ошибок при работе с JavaScript

    JavaScript относительно прост для изучения. Тем не менее, язык этот достаточно хитрый и изобилует различными «подводными камнями».

    Вы уверены, что не увлекаетесь плохими практиками? Сегодня мы поговорим о ряде ошибок, которые вы, возможно, допускаете при работе с ним.

    Ошибка № 1 — Вы используете глобальные переменные

    Если вы подружились с JavaScript недавно то, вероятно, полагаете, что здорово, что все переменные являются глобальными. В действительности, если вы новичок, то вы скорее всего не до конца понимаете, что это значит..

    Глобальные переменные — это переменные, доступные в любой части вашего сценария, даже в различных файлах, подгружаемых данной страницей. Звучит здорово, не так ли? Любая переменная, которую бы вы ни пожелали изменить, всегда под рукой.

    В действительности, нет.

    Эта идея плоха тем, что вы можете непреднамеренно переписать содержимое ваших переменных.

    Скажем, у вас есть интернет-магазин, и вы используете JavaScript для того, чтобы отображать цены всех товаров в корзине с покупками (разумеется, вы все это пересчитываете на стороне сервера; JavaScript же используется как декоративная примочка). Ваш код в этом случае может выглядеть примерно так:

    Теперь предположим, что вы также используете некий код, найденный в сети, для вывода каких-нибудь сообщений из твиттера или хотите сделать небольшую фотогалерею для ваших продуктов. Упомянутые скрипты могут иметь фрагмент кода, вроде:

    Теперь у вас неприятности: две важные переменные были перезаписаны, а вы даже можете не догадываться об этом.

    Ваш код теперь будет работать с неверными данными, а вы рискуете потратить кучу времени и нервов, пока обнаружите ошибку и устраните ее.

    Итак, что же делать? Решение — инкапсуляция, но есть много способов ее реализовать. Прежде всего, вы можете написать весь код внутри самовызывающейся анонимной функции:

    Таким образом, никакой код извне функции не может получить доступ к значениями переменных внутри функции.

    Такой код работает для «домашнего» использования, но не очень подходит, если вы работаете профессионально или собираетесь распространять ваш код.

    К примеру, если вы хотите создать покупательскую корзину, которую могли бы использовать другие, было бы здорово использовать модульный подход:

    И еще один момент по глобальным переменным: если вы не используете ключевое слово var при создании переменной, то JavaScript в этом случае по умолчанию создаст глобальную переменную:

    Переменная tax доступна за пределами функции потому что объявлена без использования ключевого слова var. Будьте внимательны!

    Ошибка № 2 — Вы не используете точку с запятой (;)

    Каждая команда в JavaScript должна завершаться точкой с запятой. Очень просто. Если вы не поставите точку с запятой, то за вас это сделает компилятор.

    Отсюда вопрос: зачем нам тратить время, если компилятор все равно сделает все за нас?

    На самом деле, в некоторых случаях ставить точку с запятой попросту необходимо, иначе вы получите сообщение о синтаксической ошибке. Ну а что делать с концами строк?


    Сообщество JavaScript-разработчиков разделилось здесь на две части. Я знаю уважаемых профессионалов, которые придерживаются противоположных мнений.

    Мое же мнение такое: всякий раз, когда вы полагаетесь на то, что компилятор JavaScript подкорректирует ваш код (пусть даже самую малость), вы подвергаете риску работоспособность своего скрипта.

    Давайте посмотрим на простую функцию:

    Выглядит так, что она вернет нам маленький объект, но в реальности JavaScript решит, что после слова return нужно поставить точку с запятой и, соответственно, ничего не вернет.

    Решением будет такой подход:

    На самом деле постановка точки с запятой становится привычкой очень быстро.

    Вполне логично также, что вы, будучи веб-разработчиком, работаете и с другими языками (к примеру, с PHP), в которых точку с запятой ставить нужно обязательно. Так есть ли смысл «переключаться» с одного на другое, если можно писать код единообразно на разных языках?

    Ошибка № 3 — Вы используете ==

    Встаньте прямо сейчас из-за монитора и прогуляйтесь, пока не встретите первого попавшегося JavaScript-разработчика. Попросите его/ее назвать вам одну типичную ошибку при работе с JavaScript и он/она скажет: «Использование двойного знака равенства вместо тройного».

    Что это означает?

    Испробуйте такой код:

    Работает именно так, как вы и ожидали, верно? Теперь попробуйте следующее:

    Да, вы снова получаете слова Это верно! в консоли. и да, это плохо.

    Дело в том, что оператор двойного равенства меняет значения, пытаясь сделать их «более похожими». В данном случае он просто конвертирует строку «1» в число 1, что и приводит к выполнению равенства.

    Решение — использовать тройное равенство ===. Оно не производит преобразования типов там, где не просят, поэтому и значение, и тип остаются именно такими, какими вы ожидаете их увидеть.

    Очевидно, все то же самое применимо и к операторам != и !==.

    Теперь, просто для развлечения посмотрите на несколько невероятных несоответствий, которые вы получите, если используете двойное равенство:

    Ошибка № 4 — Вы используете «объектные обертки»

    JavaScript любезно (хм?) предоставляет нам возможность использовать «объектные обертки» для простого (хм?) создания примитивных типов:

    Прежде всего, это просто супер неудобно. Все эти вещи можно сделать куда меньшим количеством кода:

    Однако, постойте! Это не одно и то же.

    Это значит, что если проверить тип для Number(10) или String(«hello») с помощью typeof, то мы получим object — не то, что ожидаем. К тому же, использование «объектных оберток» может привести к неожиданному поведению программы, отличному от ее поведения при работе с примитивными значениями.

    Так зачем же в JavaScript существуют такие объекты? Это связано с тем, что они используются для внутренних целей.

    Примитивные значения в действительности не имеют методов (т.к. не являются объектами). Поэтому, когда вы вызываете метод примитивного объекта (вроде «hello».replace(«ello», «i»)), JavaScript создает «объектную обертку» для строки, делает то, что вам нужно, после чего удаляет объект.

    Оставьте «объектные обертки» для JavaScript и пользуйтесь примитивными значениями.

    Примечание: возможно, это лишнее, но я хочу донести до новичков следующее: я не говорю, что вам не следует использовать функцию-конструктор и ключевое слово new (хотя некоторые рекомендуют именно это). Этот совет применим к примитивным типам данных: числам, строкам; к массивам и пустым объектам.

    Мастер Йода рекомендует:  HTML для детей преимущества обучения в раннем возрасте

    Ошибка № 5 — Вы не проверяете свойства при использовании for-in

    Все мы знакомы с проходами по массиву, однако вы, вероятно, иногда захотите пройтись поочередно по свойствам объекта (Отступление: элементы в массиве — это просто пронумерованные свойства объекта).

    Если вы делали это ранее, то использовали цикл for-in:

    Если вы выполните код выше, то получите такой вывод:

    Однако, браузеры будут включать свойства и методы, идущие выше в цепочке прототипов. В большинстве случаев у вас не будет нужды видеть их все при перечислении свойств.

    Поэтому, чтобы отфильтровать свойства, не относящиеся к текущему объекту, вам следует использовать метод hasOwnProperties:

    Иногда у вас может также возникнуть необходимость просмотреть все свойства, но отфильтровать все методы. Это можно сделать, используя метод typeof:

    В любом случае, будьте внимательны при использовании for-in, чтобы избежать нежелательных результатов.

    Ошибка № 6 — Вы используете with или eval

    К счастью, большинство обучающих материалов по JavaScript уже не учат работать с with и eval. Однако если вы используете достаточно старые или не очень авторитетные материалы, вы могли наткнуться на эти функции и попробовать их в деле.

    Давайте начнем с with. Две главные причины не использовать данную конструкцию:

    — это действительно сильно замедляет работу вашего скрипта;
    — не всегда очевидно, что вы делаете.

    Первый пункт пояснений не требует, поэтому переходим ко второму.

    Вкратце, как это работает: вы передаете объект оператору with, затем внутри блока with вы можете получать доступ к свойствам объекта как к переменным:

    Но что же произойдет, ели у нас есть переменная с таким же именем, как и свойство объекта, к которому мы применяем with?

    В общем случае, если существуют переменная и свойство с одним и тем же именем, будет использоваться переменная.

    Другой момент заключается в том, что вы не можете добавить свойство к объекту внутри конструкции with. Как можно видеть из примера ниже, заданное для свойства job значение остается пустым при обращении через объект, однако сама переменная существует и хранит значение Дизайнер.

    А что же насчет eval?

    Если в целом, то вы можете передать строку кода этой функции, и она его выполнит.

    Звучит безобидно, скорее даже радует своими возможностями, верно? В этом-то и заключается основная проблема: это слишком мощная штука.

    В действительности нет никаких причин использовать эту функцию т.к.:

    — вы можете просто написать непосредственно код;
    eval замедляет работу скрипта, как и with.

    Таким образом, главной функций eval является выполнение кода, которого нет у вас «на руках». Скажем, вы получаете его от сервера или напрямую от пользователя.

    Вы действительно хотите дать посетителям вашего сайта полный контроль над своим кодом? Надеюсь, что нет.

    Также эта функция открывает сайт для атак многочисленных хакеров: используя eval вы словно говорите: «Я ушел, ключи под ковриком.» Если вы любите себя и своих посетителей, не используйте ее.

    Ошибка № 7 — Вы игнорируете основание системы счисления при использовании функции parseInt

    В JavaScript есть хорошая удобная функция parseInt, которая позволяет конвертировать строку, содержащую число в значение числового типа.

    Хм, что же тут произошло? Разве во второй строке должно быть не 43?

    В действительности parseInt работает не только с десятичной системой счисления, поэтому, когда функция «видит» строку, начинающуюся с нуля, то она считает, что имеет дело с числом в восьмеричной системе счисления.

    Вот почему нужно передавать данной функции второй параметр — необходимую систему счисления:

    Ошибка № 8 — Вы не используете фигурные скобки при работе с if и while

    Одна из очевидных привлекательных сторон JavaScript — его гибкость. Однако иногда это может сыграть с вами злую шутку.

    Речь идет о фигурных скобках для конструкций if и while. Они необязательны, если у вас в блоке кода только одна строка:

    Это здорово, потому что вы можете даже разместить все необходимое в одну строку:


    Но это не очень здорово по двум причинам: первая — это может выглядеть неочевидно:

    Видите, о чем я? Вторая строка не входит в условие if, однако выглядит все так, словно она к нему относится. Скобки, разумеется, прояснят ситуацию.

    Также, если вам вдруг понадобится добавить дополнительные строки, то вам нужно помнить о том, что нужно добавить еще и фигурные скобки. Гораздо проще озадачиться этим с самого начала. Так сделайте это.

    Ошибка № 9 — Вы добавляете элементы в DOM поштучно

    Ок, ок, это не совсем JavaScript, но в 99 случаях из 100 использование JavaScript подразумевает работу с DOM (Document Object Model — Объектная Модель Документа).

    Проблема в том, что добавление каждого нового элемента заставляет браузер заново отрисовывать всю страницу целиком, поэтому если вам нужно добавить на страницу кучу элементов, то делать это поштучно — плохая идея:

    Вот что следует сделать вместо этого: используйте фрагменты документа.

    Фрагмент документа — это контейнер, содержащий элементы DOM. Затем, вместо того, чтобы вставлять все элементы поштучно, вы можете добавить их все разом.

    Фрагмент документа — это не узел, и для него нет соответствующего визуального отражения в DOM. Это просто невидимый контейнер для ряда DOM-элементов, который используется как промежуточный этап перед реальной модификацией DOM. Итак, как можно поступить:

    Быстрее, четче, понятнее — почему не полюбить?)

    Ошибка № 10 — Вы не изучаете JavaScript

    JavaScript не равняется jQuery. Я вас удивил?

    Если вы допускаете ошибки, уже обозначенные выше, то, вероятно, вам нужно серьезно подойти к вопросу изучения JavaScript.

    JavaScript — это язык, который вы можете начать использовать практически не изучая его, именно поэтому многие люди так и не находят времени, чтобы как следует его освоить.

    Не будьте одним из таких людей: вокруг множество добротных уроков и руководств, поэтому не ищите себе оправдания. Если все, что вы знаете — это jQuery (или Mootools, или еще что-нибудь), то вы ставите себя в неудобное положение.

    Ошибка № 11 — Вы следуете всем правилам

    И, наконец, финальная ошибка, которую мы рассмотрим — это следование всем правилам. Да, и даже некоторым из тех правил, что были упомянуты выше в этой статье.

    Как и полагается, правила созданы для того, чтобы их нарушать. Если вы новичок в JavaScript, вам, вероятно, следует активно избегать все тех моментов, которые я описал выше.

    Но правда в том, что если вы понимаете, почему не рекомендуется делать то-то и то-то, это знание становится вашим помощником и вы учитесь использовать правильные инструменты в правильной ситуации.

    К примеру, все отговаривают вас использовать eval, однако это единственный инструмент, с помощью которого вы можете обработать JSON-ответ от сервера. Разумеется, нужно использовать различные проверки для обеспечения безопасности и т.д. Но суть остается той же — вам не нужно бояться «плохих практик», если у вас действительно возникает в них необходимость.

    Зашоренность, которая ведет к совершению этих ошибок — та же зашоренность, что ведет потом к неспособности правильно использовать эти инструменты.

    На этом данный обзор я заканчиваю и искренне надеюсь, что он поможет вам стать чуть лучше как JavaScript-разработчик.

    По материалам http://net.tutsplus.com
    Перевод: Дмитрий Науменко

    P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

    Понравился материал и хотите отблагодарить?
    Просто поделитесь с друзьями и коллегами!

    Ruby on Rails c нуля!

    Замечательный JavaScript ч.2: Хорошие практики

    JavaScript имеет множество недостатков, но влияния многих из них можно избежать используя правильные практики и рекомендации бывалых разработчиков. Эта статья — это компиляция различных советов по улучшению кода и практик по его написанию. Большей своей частью статья опирается на рекомендации данные Дугласом Крокфордом, но содержит и много практик от других разработчиков.

    1. Всегда используйте фигурные скобки.
    JavaScript позволяет не писать фигурные скобки, однако то, что это позволено не означает, что это правильно. Во-первых ваш код выглядит не так очевидно, а во вторых он не будет работать после его минификации.

    2. Всегда ставьте точку с запятой.
    В JavaScript ставить точку с запятой в конце каждой строки является необязательным, однако, что произойдет если мы минифицируем код? — Правильно, код поломается.

    3. Всегда используйте var для объявления переменных и избегайте глобальных переменных.
    Если вы не используете var для объявления переменных, то такие переменные объявляются как глобальные переменные. Глобальные переменные несут различные опасности связанные с некорректной работой кода.

    4. Всегда объявляйте переменные в начале функции.
    Если вы объявите все используемые функции в начале определения функции, то код будет значительно более читабелен. Также рекомендуется пояснять значение переменных комментариями к коду.

    5. Не используйте сокращений.
    Сокращения — это сладкий яд, который убивает ваш код.

    Сокращения делают ваш код менее очевидным, а некоторые, как, например множественное присваивание вообще приводят к ошибкам. В примере с переменными a и b, a будет локальной, а b — глобальной.

    6. Используйте === для сравнения вместо ==.
    Оператор == в действительности не сравнивает объекты, а пытается привести их типы. Для сравнения объектов в JavaScript используйте оператор ===.

    7. Используйте всегда многострочные комментарии.
    Использовать однострочные комментарии кажется более удобной практикой, чем использование много строчных, ведь мы экономим аж 2 символа, однако что случиться при минификации кода? — Правильно, весь код, записанный в одну строку после первого же комментария превратится и работающего кода в закомментированный.

    8. Используйте кэширование результатов.
    Зачем выполнять код несколько раз, когда результат не меняется? В таких случаях необходимо использовать кэширование результата.

    Кэширование результата в зависимости от количества вызовов функции может значительно повысить производительность вашего кода, особенно это касается случаев, когда имеется большое количество вызовов и/или достаточно медленный код, например работа с DOM.

    9. Старайтесь избегать внутренних функций.
    Внутренние функции создаются каждый раз когда вы вызываете родительскую функцию. Старайтесь выносить внутренние функции, тогда они будут создаваться только один раз и как любой объект храниться в памяти все время, пока в них имеется необходимость.

    Разумеется, никто не призывает вас полностью отказаться от вложенных функций — это полнейшая глупость, но вам следует думать над тем, когда функции действительно необходимо влаживать.

    10. Используйте массивы специальных типов Int16Array, Int32Array, Float32Array и Float64Array.
    Когда это возможно — используйте массивы специальных типов. Они работают примерно в 2 раза быстрее обычных. Разумеется, в таких массивах можно хранить только численные значения, однако даже так можно более-менее значительно улучшить производительность вашего кода, особенно если вы работаете с графикой.

    11. Используйте getElementsByClassName(), getElementsByTagName(), и т.д. вместо querySelector() и querySelectorall().
    В DOM Level 3 были добавлены два замечательнейших метода — querySelector() и querySelectorAll(), которые используются для обращения к элементам DOM используя CSS-селекторы. Это очень отличные инструменты для работы с DOM, однако не стоит ими злоупотреблять. Во-первых они не поддерживаются старыми браузерами (IE6, IE7), а во вторых они медленнее чем getElement… — методы. Частичный отказ от querySelector() и querySelectorAll() позволит вам увеличить производительность и затраты на написание кроссбраузерного кода (кода будет меньше за счет отсутствия некоторых проверок = лучше читабельность, меньше размер, меньше операций — еще больше производительность).

    12. Переносите методы в прототипы там, где это возможно

    В большинстве случаев объявление методов объектов в функциях-конструкторах не обосновано. Каждый раз, когда вы будете создавать их конструктора новый объект он будет создаваться с своими собственными методами. Представьте, что вы создали несколько сотен таких объектов у каждого из которых несколько десятков методов и все они одинаковы. В итоге вы получаете потерю производительности за счет необходимости создания нескольких тысяч абсолютно идентичных объектов — функций, вместо создания всего нескольких десятков. Кроме того, может значительно увеличиться объем потребляемой оперативной памяти. Для того, чтобы этого избежать — определяйте максимум методов в прототипе, тогда функции будут храниться в одном единственном экземпляре.

    13. Не используйте with
    with — это совсем бесполезное ключевое слово, которое делает ваш код менее очевидным для любого, кто будет его читать, даже для вас. Кроме того, with может значительно ухудшить производительность.

    14. Используйте ?: оператор для выбора из двух значений, но не для выбора из двух действий.
    Эта рекомендация данная Дугласом Крокфордом датируется 2005 годом и обосновывается тем, что использование ?: для выбора одного из двух действий не является кроссбраузерным решением. На сколько это актуально сейчас не знаю, но стоит быть внимательными.

    15. Комментируйте ваш код и снабжайте комментарии примерами его использования.
    Мне очень нравится как задокументирован код Rails и я видел, что многие Ruby/Rails разработчики, что разрабатывают собственные библиотеки или делаю коммиты используют тот же стиль комментирования. Это очень хорошо, когда код можно читать как документацию.

    16. Используйте профессиональный инструментарий и пишите тесты или спецификации.
    В работе с любым языком программирования успех программиста и проекта в достаточно большой мерез зависит от инструментария. Работая с JavaScript вы просто обязаны быть знакомым с FireBug и его аналогами для других браузеров, возможно вас заинтересует Firefox Aurora. FireBug и его аналоги предоставляют разработчику несколько полезных инструментов, которые включают в себя консоль JavaScript, отладчик и профайлер. Используя эти инструменты вы сможете быстро находить ошибки и исправлять их, экспериментировать с кодом и замерять производительность для выбора наиболее оптимального варианта. Кроме того, я рекомендую вам использовать инструмент JSLint авторства Дугласа Крокфорда. Этот инструмент предназначен для анализа вашего JavaScript кода и обнаружения в нем опасных моментов. Как альтернатива JSLint существует JSHint — это форк JSLint. Оба инструмента хороши и практически идентичны.

    Для тестирования вы можете использовать QUnit или Jasmine. Jasmine — это BDD фреймворк, аналог RSpec для JavaScript разработанный командой PivotalLab. В PivotalLab очень любят RSpec и желали сделать нечто подобное для тестирования/написания спецификаций для JavaScript кода своих приложений. QUnit и Jasmine не единственные инструменты для тестирования, но имхо, самые популярные.

    Удачи вам в разработке вашего кода на JavaScript!

    UPD:

    Лучшая благодарность автору — ваши комментарии!

    Хорошая практика программирования на Javascript

    Избегать глобальных переменных, избегать оператора new, избегать оператора ==, избегать функции eval().

    Избегайте глобальных переменных

    Старайтесь сводить к минимуму использование глобальных переменных.

    Сюда относятся все типы данных, объекты и функции.

    Дело в том, что глобальные переменные и функции могут переписываться другими скриптами.

    Вместо этого используйте локальные переменные и учитесь использовать замыкание.

    Всегда декларируйте локальные переменные

    Все переменные, используемые в функции, должны декларироваться как локальные переменные.

    Локальные переменные должны декларироваться при помощи ключевого слова var, иначе они станут глобальными переменными.

    Внимание! Строгий режим не допускает использование недекларированных переменных.

    Декларирование в верху области видимости

    Хорошей практикой программирования на JavaScript является практика размещения всех деклараций в верху скрипта или функции.

    • получить более чистый код
    • обеспечить единое место для отслеживания локальных переменных
    • избегать нежелательных (неявных) глобальных переменных
    • снизить вероятность появления нежелательных повторных деклараций

    Это также относится и к переменным цикла:

    Внимание! По умолчанию, JavaScript перемещает все декларации в верх области видимости (Поднятие в Javascript).

    Инициализируйте переменные

    По хорошему всегда следует инициализировать переменные во время их декларации.

    • получить более чистый код
    • обеспечить единое место для инициализации переменных
    • избежать неопределенных значений

    Никогда не декларируйте объекты Number, String, Boolean

    С числами, строками и логическими значениями всегда обращайтесь как к примитивам, а не объектам.

    Декларирование этих типов как объектов замедляет скорость выполнения скрипта и приводит к неприятным побочным эффектам:

    Не используйте команду new Object()

    • Используйте < >вместо new Object()
    • Используйте «» вместо new String()
    • Используйте 0 вместо new Number()
    • Используйте false вместо new Boolean()
    • Используйте [ ] вместо new Array()
    • Используйте /()/ вместо new RegExp()
    • Используйте function () < >вместо new Function()

    Помните об автоматическом преобразовании типов

    Помните о том, что числа могут быть случайно преобразованы в строки или значение NaN (Не число).

    JavaScript — слабо типизированный язык программирования. Переменные могут содержать значения разных типов, при этом переменные могут менять тип, содержащихся в них данных:

    Во время математических операций JavaScript может преобразовывать числа в строки:

    Вычитание строки из строки не генерирует ошибку, а возвращает значение NaN (Не число):

    Используйте сравнение ===

    Оператор сравнения == всегда приводит сравниваемые значения к одинаковым типам.

    Оператор сравнения === сравнивает как сами значения, так и их типы:

    Используйте параметры по умолчанию

    Если функция вызывается с пропущенным параметром, то этому параметру присваивается значение undefined.

    Значения undefined могут сломать ваш код. Если взять за правило присваивать параметрам значения по умолчанию, то это будет хорошей привычкой.

    Всегда заканчивайте выражение switch оператором default

    Всегда заканчивайте выражение switch оператором default. Даже если вы думаете, что он совсем не нужен.

    Старайтесь не использовать eval()

    Функция eval() используется, чтобы запустить текст, как код. Почти во всех случаях в этом нет необходимости.

    Из-за того, что эта функция позволяет запускать самостоятельный код, она еще может являться и источником проблем безопасности.

    Добавить комментарий