• Где необходимо применение ООП на Javascript?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Как только вы начали изучать Javascript, вы сразу приступили к изучению ООП, поскольку:

    — объявив переменную внутри функции, вы столкнулись с инкапсуляцией
    — вызвав у объекта метод toSring(), вы столкнулись с полиморфизмом и наследованием

    MVC-паттерны, ядро, песочница (или сервисный слой) — это только реализация разных подходов и не могут быть признаками ООП.
    Подробнее про паттерны habrahabr.ru/post/215605 и в книжках Закаса и Олмани (есть и масса других).
    Ответ написан
    Комментировать
  • CSS3. Где я могу найти наиболее полное руководство?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Работа над CSS давно разбилась на десятки направлений, по каждому из которых создана рабочая группа (по каким-то только планируется), а результат работы имеет абсолютно разный статус. Так что мир пёстр до безумия.

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

    Насчёт поддержки рекомендую также поглядывать caniuse.com/. Для свойства, метода, правила — нужно добавить его название после слэша.

    Нет ни одной книжки, которая охватывала бы все результаты работы по этим направлениям.
    Ответ написан
    Комментировать
  • Как разобраться с прототипом и конструктором?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    var F = function() { }
    F.prototype = Parent.prototype
    Child.prototype = new F()

    Создаём промежуточный вспомогательный конструктор, который нужен, чтобы не тащить все штуки-дрюки из создания объекта с помощью непосредственно конструктора Parent. Мы же не знаем, какие собственные свойства навешиваются при вызове конструктора?

    Child.prototype = new Parent()
    При таком вызове можно подхватить чёрт-те знает что.

    Child.prototype.constructor = Child
    Обновили ссылку на конструктор в прототипе. Для чего? Видимо для того, чтобы строки имели одинаковый эффект:
    var iLoveToMakeChild1 = Object.create(Child.prototype)
    var iLoveToMakeChild2 = new Child()


    Child.superclass = Parent.prototype
    И на всякий случай положили в свойство конструктора ссылочку на прототип своего предка. Бывает очень нужно.

    Ваш пример — типичная схема наследования.
    Что почитать:
    dmitrysoshnikov.com/ecmascript/ru-javascript-the-core
    habrahabr.ru/post/120193
    habrahabr.ru/post/108915

    Update:
    Не уверен, что это пояснение действительно пояснит, но...

    05c7add10c82486b89a0109e62db1c7f.png
    function Млекопитающее() {
    	//И вот тут может произойти непонятное без прокладки F
    }
    Млекопитающее.prototype.commonParams = [
    	'Вскармливает детей молоком',
    	'Теплокровное'
    ];
    
    function Человек(options) {
    	if (options && typeof options == 'object') {
    		for (var i in options) {
    			this[i] = options[i];
    		}
    	}
    }
    
    function Кошка(options) {
    	if (options && typeof options == 'object') {
    		for (var i in options) {
    			this[i] = options[i];
    		}
    	}
    }
    
    function extend(Child, Parent) {
    	var F = function() { };
    	F.prototype = Parent.prototype;
    	Child.prototype = new F();
    	Child.prototype.constructor = Child;
    	Child.superclass = Parent.prototype;
    }
    
    extend(Человек, Млекопитающее);
    Человек.prototype.ownParams = [
    	'Носит одежду',
    	'Поёт в караоке'
    ];
    
    extend(Кошка, Млекопитающее);
    Кошка.prototype.ownParams = [
    	'Забавно урчит',
    	'Ест мух'
    ];
    
    var man1 = new Человек({
    		name: 'Петя',
    		params: [
    			'Брюнет',
    			'Любит Хауса',
    			'Бросил курить'
    		]
    	}),
    	animal1 = new Кошка({
    		name: 'Маська',
    		params: [
    			'Любит кукурузу',
    			'Имеет 2 лотка'
    		]
    	});
    Ответ написан
    3 комментария
  • Как активировать кнопку при появление текста в поле?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Достаточно давно появилось событие input https://developer.mozilla.org/en-US/docs/Web/Event...
    В отличие от других событий даёт именно то, что вам нужно:
    — ввод с клавиш
    — перетаскивание
    — копирование/вставку
    — правильно отслеживает ввод с бухгалтерской раскладки (типа Alt+171) единственного символа

    Для старых IE приходилось параллельно отслеживать propertychange, но там всё хуже — IE берёт в расчёт любое изменение, даже стилей, даже состояния типа focus/blur.

    Вот вам искомое jsfiddle.net/petroveg/m2H67/1
    Ответ написан
    Комментировать
  • Можно ли выкупить красивый IP в личное пользование и использовать его вместо домена?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Продам 192.168.1.0. Недорого. К лотку приучен. Жрёт мало.
    Ответ написан
    Комментировать
  • Как заглушить javascript исключения в iframe?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Отлавливать ошибки в контексте выполнения скриптов iframe'а.

    var iframe = document.createElement('iframe'),
    	content = 'data:text/html;charset=utf-8,<!DOCTYPE html><html><head><meta charset="utf-8">' +
    	'<script>document.writew("<h1>Hello!</h1>");<\/script>' +
    	'</head><body><h2>World!</h2></body></html>';
    
    	document.body.appendChild(iframe);
    	iframe.contentWindow.addEventListener('error', function (e) {
    		e.stopPropagation();
    		e.preventDefault();
    		console.log(e);
    	}, false);
    	iframe.src = content;
    Ответ написан
  • Как загрузить исходный код страницы?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Интерпретатор JS не может запуститься до старта обработки кода парсером и исходный код вам не получить в точности, каким он есть. Скрипт в примере уважаемого @iiil сможет получить только заново сериализованный результат десериализации исходного кода. К примеру, результат для IE8 для этого примера:

    Какой-то код
    <HEAD><META content="IE=8.0000" http-equiv="X-UA-Compatible">
    
    <META charset=UTF-8>
    <META name=robots content=noindex><LINK href="http://codepen.io/iiil/pen/qtFpr" rel=canonical>
    <STYLE></STYLE>
    </HEAD>
    <BODY>
    <DIV>Какой-то код</DIV><PRE></PRE>
    <SCRIPT src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></SCRIPT>


    Понятно, что полагаться на совпадение реально исходного кода и того, во что он превратился в результате двойной операции, явно не стоит. А главное, смысл действия не совсем понятен.
    Ответ написан
    2 комментария
  • Как ассинхронно сменить картинку у маркера на яндекс картах?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Ответ — пресеты. Создаёте, сохраняете (как видно, объекты практически аналогичны и их нужно просто клонировать, меняя один параметр). А дальше — что захотите. Пресетов может быть сколько угодно с любыми именами.

    Update: По молчаливой просьбе собеседника добавил сторонние элементы

    var points = [
    		[55.831903,37.411961],
    		[55.763338,37.565466],
    		[55.763338,37.565466],
    		[55.744522,37.616378],
    		[55.780898,37.642889]
    	],
    	markers = {};
    
    ymaps.ready(function () {
    	ymaps.option.presetStorage.add('custom#default', {
    		iconLayout: 'default#image',
    		iconImageHref: 'marker.png',
    		iconImageSize: [30, 40],
    		iconImageOffset: [-15, -40],
    		iconImageClipRect: [
    			[0, 30],
    			[30, 70]
    		],
    		hideIconOnBalloonOpen: false
    	});
    	ymaps.option.presetStorage.add('custom#active', {
    		iconLayout: 'default#image',
    		iconImageHref: 'marker.png',
    		iconImageSize: [30, 40],
    		iconImageOffset: [-15, -40],
    		iconImageClipRect: [
    			[0, 70],
    			[30, 110]
    		],
    		hideIconOnBalloonOpen: false
    	});
    
    	var myMap = new ymaps.Map('map', {
    			center: [55.751574, 37.573856],
    			zoom: 9
    		});
    
    	for (var i = 1; i <= points.length; i++) {
    		markers['id' + i] = new ymaps.Placemark(
    			points[i - 1],
    			{
    				hintContent: 'Какая красивая метка...'
    			},
    			{
    				preset: 'custom#default'
    			}
    		);
    		$('<a href="#" data-type="marker" data-id="id' + i + '">').html(i + '-я метка').appendTo($(document.body));
    	}
    
    	placemark.events.add('click', function (e) {
    		changeMarker(e.get('target'));
    	});
    
    	myMap.geoObjects.add(placemark);
    });
    
    function changeMarker (marker) {
    	marker.options.set('preset', {
    		preset: 'custom#active'
    	});
    }
    
    $(document).on('click', 'a[data-id][data-type="marker"]', function (e) {
    	e.stopPropagation();
    	e.preventDefault();
    	changeMarker(markers[$(this).data('id')]);
    });


    Метка тут такая 8542c38cbe6a410f901a3adffe1974b2.png
    Ответ написан
    4 комментария
  • Как и с помощью каких технологий можно создать конструктор-редактор?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Вариантов, кроме Flash (и пускай горит он в аду), собственно два.

    1. HTML + CSS + SVG + JS
    Наиболее привлекательный, но нужно знать SVG, CSS 3 и понимать, например, те же трансформации (как получать матрицу, перемножать их etc.). Про старых ослов забыть сразу (версия 9 и ниже).

    2. HTML + JS (Canvas)
    Исключительно программирование и ещё раз оно.
    Ответ написан
  • Не работает transform в safari?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Ответ написан
    Комментировать
  • Как правильно сделать если заголовок - ссылка ?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    В HTML 5 (читай уже в любом современном браузере) в ссылки можно класть что угодно, и таблицы в том числе. Так что не давайте ссылки на старые обсуждения касательно HTML 4.

    Разница между первым и вторым ответами в активной области. Для ссылки внутри заголовки она будет по текстовому содержанию. Для заголовка внутри ссылки — по всей области заголовка. За оба варианта поисковики не погладят по головке.
    Ответ написан
    2 комментария
  • Какие существуют способы защиты стилей CSS?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Крысы?)) Очень смешно. Никогда ничего не выкладывай в сеть, тогда не украдут. А вопрос глуп. Такое редко бывает, но таки бывает.
    Ответ написан
    Комментировать
  • Проблема с подчеркиванием javaskript

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Не нужно ничего красить и подчёркивать в скриптах — для этого есть смена классов.

    Если же речь про динамическое создание правил CSS, то и здесь не нужно ничего делать с помощью css(). Нужно создавать их грамотно через коллекцию Stylesheets.
    Ответ написан
    Комментировать
  • По поводу HTML5

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Про xHTML насмешили:) Для того, чтобы документ парсился как xHTML, заголовок с сервера должен гласить не «text/html». а «application/xhtml+xml». А ну-ка, покажите-ка мне эти волшебные сайты, фанаты xHTML:)

    Справедливо и обратное — ну никак ни xHTML, ни HTML не могут повлиять на скорость понимания HTML 5, ибо все нововведения не касаются особенностей XML-синтаксиса. А циферку вообще уберут, как уже давно обещали. И будет просто HTML.

    Про адаптивную верстку вообще непонятно — она для повышения удобства людей, а не для поисковиков. Гугол только посоветовал использовать такой подход для разных версий сайта с целью унификации кода страниц. Да и к HTML 5 этот вопрос не имеет отношения, благо Media Queries — тема CSS 3.
    Ответ написан
    Комментировать