#Javascript

Cast JavaScipt object to TypeScript classes

Published at February 26, 2019 ·  2 min read

TypeScript could give you a false hope that I’ve got a strong-typed code and everything will work as expected with JavaScript. In reality, TypeScript doesn’t do anything after sources are compiled to JavaScript. It means, in runtime, you’ll face good-known JavaScript with it dynamic typing.

The lack of any runtime type checking is a big minus for TypeScript. You’ll lose all your type at the same moment when browser executes code.

...


Embedded React App on Your Site

Published at February 19, 2019 ·  2 min read

It’s great if you’re able to start development from scratch and you can implement SPA using the latest technologies. But sometimes you can only extend existing functionality. In such a case, it makes sense to embed your React app into the existing web site.

The idea is pretty simple: you need to add your react-based application to the existing page.

The easiest way is to add some <div id="reactApp"></div> to your page and add the script with a production build of your react application. E.g.: <script src=”main.3d23bdc2.js”></script>

...


TypeScript vs JavaScript

Published at February 12, 2019 ·  1 min read

TypeScript is a typed superset of JavaScript. I like this language for it type system over “standard” JavaScript. Since it’s just a extension to JavaScript it’s easy to start it. Other type checkers like Flow look less native for me.

I prefer to use TypeScript instead of JavaScript because it’s simple to use and doesn’t require a lot of knowledge from the beginning.

From the other side, I like JavaScript because it’s a dynamic typed language with allows you to do everything you need. The backside of this benefit is that it makes code less maintainable and harder to change without quality loss.

...


Some usefeul JavaScript articles (if you didn't use Javascript suring the last 5 years)

Published at February 11, 2019 ·  1 min read

If you like me didn’t write any lines of code in JavaScript during the last 5 years, you will be surprised how it changed.

I won’t re-write all existing blog posts and manuals because of two reasons: I’m too lazy for these things and I’m not feeling that I can do it better.

I’ll leave the references for two topics I’ve found useful for me: variables declarations and modules. I like MDN, so I’ll use it for references.

...


Click and Double Click in JavaScript

Published at January 5, 2019 ·  1 min read

Spent a few hours on a simple task: create different handlers for ‘click’ and ‘double click’ events on the same element, onclick handler should not be executed if a double click event is raised.

I hope, there is a better solution but I didn’t find it. I leave it here in case if somebody helps me with it:

<html>
<body>
    <a href="#" id="clickMe">Click Me</a>

    <script type="text/javascript">
        /* click or double click */
        var timeout = null;
        let link = document.getElementById('clickMe')
        link.addEventListener('click', (e) => {
            if (timeout === null){
                timeout = setTimeout(() => {
                    timeout = null
                    alert('click')
                    e.preventDefault();
                }, 300);
            }
        })

        link.addEventListener('dblclick', (e) => {
            clearTimeout(timeout)
            timeout = null;
            alert('double click')
            e.preventDefault();
        })
    </script>
</body>
</html>

I use pure JavaScript to not depend on any framework in this example.

...


Pros and Cons of Vue.js

Published at January 2, 2019 ·  3 min read

Since I started to learn Vue.js a few months ago, I realized that it has some benefits I like and some things which I really hate. I’m not an expert in this framework, but I would like to share my thoughts about it.

Pros:

Simplicity

It is really easy to integrate it into your existing web application by just adding one more ~20KB-size JavaScript library. It allows you to start using it with an old or legacy web site like you did with jQuery in the past! You don’t need all that npm and Single Page Application (SPA) stuff in your (mostly python or something else) project. If you need to start only with a simple grid or ‘Load more’ button - you’ll do exactly what you need without tons of JavaScript libraries and npm packages nightmare.

...


jQuery Ajax Table - небольшой плагин для jQuery

Published at August 30, 2011 ·  1 min read

То, о чём писал в твиттере, но не мог написать в блоге раньше. 

Была небольшая и, на первый взгляд, достаточно простая задача - показать на странице таблицу, с возможностью сортировки и автообновления. Ну ещё и поиск по ней. После некоторого времени, потраченного на поиск и попытки исправления существующих решений стало понятно, что написать с нуля будет быстрее и дешевле (тут имеется в виду также дальнейшая поддержка всего этого). Готовые реализации javasctipt-библиотек и плагинов к jQuery были или слишком уж навороченный для данной задачи или, мягко говоря, очень плохо справлялись с обновлением таблицы и последующей сортировкой. Результатом этого всего стало написание плагина для jQuery c нуля.

...


JavaScript и константы

Published at June 9, 2011 ·  3 min read

 

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

Согласно спецификации ECMAScript 5th Edition, ECMA Script (для простоты понимания и удобства буду использовать термин JavaScript) у объекта Object должен быть метод freeze, который принимает объект и создает на его основе новый неизменяемый (inmutable) объект, у которого все свойства становятся read only и пропадает возможность удалить и/или изменять свойства объекта.

...


[Audio] Субъективные мысли вслух о JavaScript

Published at May 8, 2011 ·  1 min read

Выступать на публике с докладами и говорить в микрофон - совсем не то, что обсуждать что-то в курилке или за чашкой чая. Без подготовки сделать это, как показала практика, значительно сложнее. Я решил попрактиковаться в создании аудио-версии своего блога. Первый блин, как всегда, комом, но буду стараться и практиковаться дальне. Из первых впечатлений:

Субъективные мысли вслух о JavaScript:

  • Недостатки JavaScript (куда же без них?)
  • Немного слов о RIA
  • Попытки избавиться от JavaScript 
  • Разработка под Android и iPhone
  • JavaScript - самый низкоуровневый язык программирования для веб

...


Модальные диалоги (popups) на HTML. Часть 2

Published at December 16, 2010 ·  2 min read

Продолжение предыдущего поста: http://blog.e0ne.info/post/Modal-popup-with-HTML.aspx

Часть 2. Практика

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

Для начала рассмотрю тот вариант, который я не стал реализовывать.

Решение проблемы #1: манипуляции с свойством tabIndex.

Те, кто сталкивался с необходимостью навигацией по сайту с помощью клавиатуры непременно сталкивались с таким свойством элементов, как tabIndex. По умолчанию, для всех элементов (кроме ) и tabIndex равен 0. Для других элементов свойство или не определено, или задано значение “-1” (минус еденица) В таком случае переход по элементам осуществляется в порядке их расположения в DOM-моделе. Если необходимо сделать так, чтоб при навигации по странице с помощью кнопки tab фокус на элемент не попадал, то значение tabIndex необходимо сделать -1.

...


Обработка ошибок в JavaScript

Published at November 29, 2010 ·  2 min read

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

Для начала немного теории.  Исключение (exception) - ошибка или нестандартное поведение программы во время её работы. Например, попытка открыть файл, которого не существует, или вызвать метод элемента DOM-модели, которого нет.

В JavaScript существует конструкция try-catch-finaly, которая работает так же, как и в других языках программирования.  Логично предположить, что если есть try-catch, то должен быть и оператор throw. И такой оператор в JavaScript действительно есть. Рассмотрим пример (файл error-0.html):

...


4 способа запустить JavaScript при загрузки страницы

Published at November 22, 2010 ·  2 min read

Рано или поздно при написании JavaScript’а возникает необходимость в том, чтобы он был автоматически запущен при загрузке страницы. Нужно это, как правило, для следующих действий: инициализация интерфейса (UI) и отложенная загрузка данных (lazy load).Как часто бывает, для такой простой на первый взгляд задачи, есть несколько способов решения.

Задача. После загрузки страницы, нам нужно каким-то образом проинициализировать меню функцией initiPageMenu(), которыя находится в файле menu.js.

Способы решения:

...


Модальные диалоги (pop-up) на HTML

Published at October 28, 2010 ·  3 min read

Часть 1. Теория

Сейчас использование модальных и не только диалогов на веб-сайтах является вполне нормальным явлением, в следствии чего нам доступна масса уже готовых контролов как для asp.net/…. (подставьте сюда ту технологию, которую вы используете в своих проектах), так и множество плагинов для популярных javascript-фреймворком, таких как jquery, moo tools, prototype и других. Для упрощения договоримся, что здесь под контролом я буду иметь в виду все что, что в итоге превращается в html-код и выглядит как привычное нам модальное диалоговое окно.Реализация диалогового окна на html выглядит следующим образом:

...


HTML Decode/Encode и URL Decode/Encode - что, когда и зачем использовать?

Published at September 3, 2010 ·  3 min read

HTML Decode/Encode.

Если кто-то слышал об такой атаке на веб-сайты, как XSS Injection, то он(она) знает что для предотвращение такой атаки необходимо использовать функции HtmlEncode/HtmlDecode. XSS Injection (Cross-site injection) - один из способов атак веб-приложений, главной идеей которого является вставка(инъекция) чужого javascript-кода на атакуемый веб-сайт. Как минимум, это может привести к краже печенек cookies и получении прав администратора сайта. …

1.1. ASP.NET

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

...


JQuery Tips: маленькие, но полезные скрипты

Published at August 10, 2010 ·  2 min read

Те, кто с помощью jQuery написал уже не одну сотню, а может и тысячу строк javascript-кода, в этом посте врядли найдут много нового и/или интересного. Пост рассчитан на разработчиков, которые только начинают знакомиться со всей мощью бтблиотеки jQuery. В нем я дам несколько примеров скриптов, которые я время от времени использую с небольшим количеством изменений или вообще без таковых.

[Добавлено перед публикацией поста]Все примеры достаточно просты, большинство (5 штук!) взяты из документации, но они активно используются мной и я решил сделать пост-заметку для себя. Может, еще кому-то будет полезно. Те, кто не использует jQuery либо другую библиотеку (еще остались такие?) поймут, что эти несколько строк кода в каждом примере иногда заменяют десятки строк кода на javascript’е без использования сторонних библиотек и своих велосипедов.[/Добавлено перед публикацией поста]

...


Делаем Hover control с ипользованием ASP.NET и jQuery

Published at June 14, 2010 ·  2 min read

В связи с тем, что я повсеместно пытаюсь избавиться от ASP.NET AJAX Control Toolkit (ACT) и перейти на использование jQuery, то от использования Hover Extender от ACT пришлось отказаться. Сразу же было найдено большое количество разнообразных плагинов для jQuery, но большинство из них имели недостаточную реализацию, из-за чегоостановился на jQuery plugin EZPZ Tooltip.

Из основных достоинств данного плагина хочется выделить:

  • “Чистый” HTML - не нужно добавлять специальные атрибуты для элементов, плагин завязывается на отдельный HTML элемент.
  • Конфигурация через наименование (Convention over configuration) - поведение элементов зависит от из ID.
  • Гибкие настройки - с помощью CSS можно настроить как внешний вид контрола, так и его позиционирование.
  • Возможность замены стандартных эффектов путем перехвата соответствующих событий на jQuery.
  • Удобство и простота работы.
  • Маленький размер - 4.5K в сжатов виде.

Более подробно о всем этом можно почитать на странице проекта, а я хочу рассказать как можно его использовать в связке с ASP.NET на примере простого UserControl.

...


QUnit - тестируем JavaScript

Published at February 12, 2010 ·  1 min read

Разработчики JavaScript-фреймворка JQuery не перестают нас удивлять. После недавнего релиза JQuery 1.4.1 нам представили инструмент для unit-тестирования кода, написанного на JavaScript - QUnit

В данный момент поддерживаются такие функции как expect(), equals(), ok(), same(), log() и асинхронные тесты. Вместе с фреймворком распространяется css-файл, с помощью которого можно быстро и красиво выводить результаты тестов. Также разработчики активно используют его для тестирования самого JQuery, поэтому можно посмотреть уже готовые приверы от авторов фреймворка.

P.S. Что-то подсказывает мне что не загорами плагин для FireBug, по крайней мере, мне бы этого хотелось…

...


jQuery 1.4 Alfa 1

Published at December 7, 2009 ·  1 min read

Несколько дней назад вышла новая версия популярного JavaScript framework’а jQuery, пока только альфа, которую сами разработчики не рекомендуют использовать в production. Официальная информация на блоге http://blog.jquery.com/2009/12/04/jquery-14-alpha-1-released, а я расскажу о своих первых впечатлениях по сравнению с последней стабильной версией 1.3.2.

Для начала сравним размеры файлов:

Видем что размер вырос, примерно, на 30 килобайт. Много это или мало - судите сами.

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

...


JavaScript: удаляем элементы из массива

Published at July 3, 2009 ·  2 min read

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

Итак, у нас есть исходный массив:

<p>
<em>var arr = new Array();<br />
arr.push('q');<br />
arr.push('w');<br />
arr.push('a');<br />
arr.push('e');<br />
arr.push('r');<br />
arr.push('t');<br />
arr.push('z');<br />
arr.push('y'); </em>
</p>

 Задача состоит в том, чтобы удалить из него элементы со значениями “a” и “z”. Первой же идеей было использование оператора delete:

...


.NET 3.5 и Web Service

Published at August 19, 2008 ·  2 min read

После переходна на новую ферсию .net framework, как и следовало ожидать, некоторый код потерял свою работоспособность. Перестали работать веб-службы. Точнее одна из них.

Серверный её код ничем не выделяется от остальных:

<font face="Courier New" size="2" color="black">[WebService(Namespace = <font color="#a31515">"myns"</font>)]<br />
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]<br />
[ScriptService]<br />
<font color="#0000ff">public</font> <font color="#0000ff">class</font> MyService : WebService<br />
{<br />
  [WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]<br />
  <font color="#0000ff">public</font> List<<font color="#0000ff">string</font>> GetData()<br />
  {<br />
     List<<font color="#0000ff">string</font>> result;<br />
     <font color="#008000">//вся необходимая логика</font><br />
     <font color="#0000ff">return</font> result;<br />
  }<br />
}</font><font size="1" color="gray"><br />
<br />
</font>

 Главное отличие её от других заключается в том, что обращение к ней идёт не с помощью ScriptManager и ServiceReference (в таком случае всё работает), а вызывается методом POST по url напрямую с javascript.

...


MS Ajax и сторонние скрипты

Published at April 5, 2008 ·  2 min read

Интеграция различных скриптов на страницу, где используется MS Ajax - задача нередкая, но единого решения для неё не существует. Я поделюсь с вами некоторыми методами, которые помогут интегрировать срипт в вашу страницу.

<li>

Никогда не подключайте скрипты с помощью тега <font size="2" color="#0000ff"><font size="2" color="#0000ff"><</font></font><font size="2" color="#a31515"><font size="2" color="#a31515">script</font></font><font size="2"> </font><font size="2" color="#ff0000"><font size="2" color="#ff0000">src</font></font><font size="2" color="#0000ff"><font size="2" color="#0000ff">="..."></</font></font><font size="2" color="#a31515"><font size="2" color="#a31515">script</font></font><font size="2" color="#0000ff"><font size="2" color="#0000ff">></font></font>. Вместо этого следует использовать копмонени ScriptManager либо ScriptManagerProxy. 

</li>
<li>

Что бы не говорили разработчики MS Ajax и AjaxControlToolkit, в конец каждого файла со скриптом следует добавить такой код:<br />
<font size="2" color="#0000ff"><font size="2" color="#0000ff">if</font></font><font size="2"> (</font><font size="2" color="#0000ff"><font size="2" color="#0000ff">typeof</font></font><font size="2">(Sys) !== </font><font size="2" color="#a31515"><font size="2" color="#a31515">'undefined'</font></font><font size="2">) Sys.Application.notifyScriptLoaded();<br />
</font>Данный код указывает на то, что скрипт полностью загрущился и можно его выполнять. 

</li>
<li>

Если скрипт необходимо подгружать только в определённых ситуациях (например, добавление нового компонента на форму), то его следует регистрировать с помощью статических методов класса ScriptManager вида RegisterClientScriptXXX(). 

</li>
<li>

Для выполнения скрипта после загрузки на страницу есть несколько методов: <br />
1) использовать клиентское событие EndRequest;<br />
2) создать функцию с именем pageLoad() - метод аналогичен первому;<br />
3) если скрипт необходимо зарегистрировать с помощью серверного кода, то используйте метод <font size="2" color="#2b91af"><font size="2" color="#2b91af">ScriptManager</font></font><font size="2">.RegisterStartupScript().</font> 

</li>

Эти методы не являются панацеей от всех бед, но помогают экономить часть времени, необходимого на интеграцию скриптов. Иногда хватает только этого, иногда приходится часами отлаживать чужой javascript, но знать о них, как я думаю, должен каждый разработчик, использующий MS Ajax.

...


Tags

.net .net framework .net framework 3.5 agile ajax ajax control toolkit ampq ansible apache asp.net asp.net mvc automation axum babel bash benchmark blog blog engine bootstrap buildout c# cache centos chrome ci cinder ckan cli cloud code review codeplex community config debugger deface dependencies development environment devices devstack devtime disks django dlr dns docker dockerimage dos easy_install elmah encoding environment variables error event events everything-as-a-code exception exceptions fabrik firefox flask foreach forms fstab gae gcc gerrit git github go google google app engine grep hack hacked hardware headless horizon hound html hugo iaas ienumerable iis internet iptables iron python ironic iscsi java script javascript jenkins jquery js jsx k8s kharkivpy kiss kombu kubernetes kvm kyiv lettuce libvirt linux lio loci logging loopback losetup lvm mac os macos mercurial microsoft microsoft sync framework mobile mono ms office msbuild networking news nginx npm npx offtopic oop open source open xml opensource openstack openvswitch os p'n'p packages paraller development patterns & practices performance php pika pip plugins podcast popup postgresql profiler project protocols proxy pycamp pycharm pycon pykyiv pylint pypi python python 3 qcow quantum qumy rabbitmq rar react reactjs refactoring rfc rhel search engine security selenium server shell silverlight socket software engineering source control sourcegear vault sources sql sql server sql server express sqlalchemy ssh static site sublimetext svg tests tgt tipfy todo tornado typescript uapycon ui uneta unit tests upgrades usability vim virtualenv visual studio vitrage vm vue.js vuejs web development web server web service web_root webpack webroot windows windows live word press x32 x64 xcode xml xss xvfb интернет-магазин книги

Recent posts

Go 1.18: new features

Всё будет Kubernetes

2022 Relaunch

Everyday Blogging

I don't want this CI


Archives

2022 (3)
2019 (73)
2018 (2)
2017 (3)
2016 (2)
2015 (3)
2014 (5)
2013 (17)
2012 (22)
2011 (36)
2010 (25)
2009 (35)
2008 (32)
2007 (2)