Category Archives: JavaScript

Greasemonkey scripts

Posted on by
1

Ползвали ли сте Greasemonkey? Това е една изключително готина добавка за Firefox (вече и за други браузери, в Chrome 4 си я има по подразбиране), която доста улеснява живота. Greasemonkey ви позволява да промените начина по който изглежда или се държи дадена Web-страница, благодарение на малки парченца javaScript код.
Greasemonkey може да се използва за персонализиране на редакторите във форумите. Как примерно да добавим бутончета към редактора за постове в Dbg:
– да прави цвета на селектирания текст в синьо, а текста удебелен
– да слага тагове за цитиран текст

Ей го скрипта:

// ==UserScript==
// @name           Add DBG Buttons
// @namespace      http://www.download.bg/*
// @description    Add DBG Buttons
// @include        
// ==/UserScript==
 
var BlueBtn = document.createElement('a');
BlueBtn.appendChild(document.createTextNode('Blue'));
BlueBtn.setAttribute("onclick", "s('[color=blue][b]', '[/b][/color]', document.posting_form.message)");
BlueBtn.setAttribute("style", "color: blue; font-weight: bold; cursor:pointer; margin: 0 2px; background: #eeeedd; border: 1px solid #bbbbaa;");
 
var content=document.evaluate("//a[@class='rtbutton']", document, null, 9, null).singleNodeValue;
content.parentNode.insertBefore(BlueBtn, content);
 
var QuotBtn = document.createElement('a');
QuotBtn.appendChild(document.createTextNode('"quot"'));
QuotBtn.setAttribute("onclick", "s('[q]', '[/q]', document.posting_form.message)");
QuotBtn.setAttribute("style", "color: black; font-weight: normal; cursor:pointer; margin: 0 2px; background: #eeeedd; border: 1px solid #bbbbaa;");
 
var content=document.evaluate("//a[@class='rtbutton']", document, null, 9, null).singleNodeValue;
content.parentNode.insertBefore(QuotBtn, content);

Много готино е, че Frefox поддържа XPath! За разлика от лайното Internet Explorer (трябва да се забрани със закон и всеки потребител да подписва договор, че никога, за нищо на света няма да използва IE, ам наистина НИКОГА!). А XPath яко улеснява писането на JavaScript и неимоверно съкращава кода.
Резултата може да се види на картинките по-долу.
Оригинална лента:

С добавените бутони:

Скрипта може да се изтегли от тук:
Добавяне на бутони към коментарите в DBG
======================================

Между другото Greasemonkey може да автоматизира и въвеждането на информация в специални сайтове, като например онлайн игрите. Има една онлайн игра Dimiva.com, където трябва да въртиш някакво зомбирано колело и междувременно ти излизат някакви зомбирани реклами, които трябва да познаваш за какво са и да кликаш на radio-бутони под тях. Изобщо зомбирана ситуация. Използвам я само за примерен скрипт, който да маркира автоматично radio-бутоните.

// ==UserScript==
// @name           Dimiva
// @namespace      https://www.dimiva.com/*
// @description    Dimiva advent script
// @include        
// ==/UserScript==
 
var items = {
"24ins" : "Застрахователен",
"0_7_wonders" : "Сладкарница",
"0_svobodni_kvartiri" : "жилища под наем",
"folio4cars" : "Затъмняване",
"cube_fitness_club" : "Фитнес",
"0_4by4" : "Off-Road",
"0_qbi_group" : "Застрахователен",
"0_maniq_varna" : "Дрехи втора упореба",
"e4995150fc0a" : "Алмохадон"
};
 
var images = document.getElementsByTagName('img');
 
for (var i=0; i<images.length; i++){
	for(var index in items) {
		if (images[i].src.indexOf(index) != -1) {
			document.evaluate("//div[contains(@class,'banner-container')]/a/img[contains(@src,'" + index +"')]/../../div/label[contains(text(),'" + items[index] + "')]/input", document, null, 9, null).singleNodeValue.setAttribute('checked', 'checked');
		}
	}
}

Спред картинката, която се зарежда, маркирам и съответния бутон. Картинките са с постоянни имена, което улеснява зомбираната ситуация.
И скрипта: dimiva.com – radio clicker

======================================
Ще покажа и още един пример, който обработва всички зададени тагове от дадена страница. Примерно искаме да сменим цвета на “син” на всички линкове в някой сайт. За да си спестя безмислено писане на код, отново ще използвам XPath.

// ==UserScript==
// @name           Blue Links
// @namespace      http://statcounter.com/
// @include        http://statcounter.com/*
// ==/UserScript==
 
 
textNodes = document.evaluate("//a", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
 
for (var i=0;i<textNodes.snapshotLength;i++) {
  var node = textNodes.snapshotItem(i);
  node.style.color = "blue";
}

======================================
На сайта на филмовата база данни IMDB има много интересни класации и рейтинги на филми. Но при отварянето на някои излиза досаден банер, който те призовава да станеш ProUser. Примерна страница:
https://pro.imdb.com/moviemeter/?d=tt_moviemeter_why
IMDB ProUser - banner

Това е смешно… и естествено е редно да го разкараме:

// ==UserScript==
// @name           imdb hide pro banner
// @namespace      none
// @include        http://pro.imdb.com/moviemeter/*
// ==/UserScript==
 
var snode = document.evaluate("//div[@id='pro_upsell_wrapper']", document, null, 9, null).singleNodeValue;
snode.style.display = 'none';

След като приложихме скрипта, получаваме една нормална страница:
IMDB ProUser Banner removed - Greasemonkey

======================================

И още един скрипт за оналайн магазина SportsDirect, който скрива резултати с цена по-висока от избраната от нас. Примерно искаме да скрием всички стоки, които са с цена по-висока от 29 паунда.

// ==UserScript==
// @name           SportsDirect
// @namespace      http://www.sportsdirect.com/
// @include        http://www.sportsdirect.com/*
// ==/UserScript==
 
var price_custom = 29; // Nad kakva cena da skriva rezultata
 
textNodes = document.evaluate("//span[@class=\"sellingprice s-largered productPrice productHasRef\"]", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
 
for (var i=0;i<textNodes.snapshotLength;i++) {
 
  var nodeText = textNodes.snapshotItem(i).textContent.replace("£","");
  var node = textNodes.snapshotItem(i)
  if(nodeText>=price_custom){
	node.parentNode.parentNode.parentNode.parentNode.parentNode.style.visibility = 'hidden';
  }
}

Файл за инсталиране: SportsDirect price filter

======================================

Малко полезни линкове:
https://userscripts.org/ – база данни с потребителски скриптове. Добро място за разучаване на кодирането с Greasemonkey.
https://wiki.greasespot.net/ – мястото от където е добре да започнем
document.evaluate – обяснение за опциите на document.evaluate

Share and Enjoy !

Shares

JavaScript GUI – бързо, вкусно, лесно с GLUEScript

Posted on by
Reply

Днес докато се ровех за интересни нови неща около JavaScript интепретатора на mozilla – SpiderMonkey попаднах на много интересна среда за програмиране GLUEScript, базирана на този интерпретатор. За графичния потребителски интерфейс (GUI) се използват wxWidgets.
Възможността да се пишат GUI програми с JavaScript особено много ме гизкефи. JavaScript е доволно популярен и приложим език за програмиране. Информация в мрежата бол.
Ето едно много просто приложение, което показва лекотата за писане с GLUEScript – температурен конвертор между Фаренхайд и Целзий:

var wx = require("wx");
wx.theApp.onInit = function()
{
  var frame = new wx.Frame(null, wx.Id.ANY, "Fahrenheit to Celsius Converter", { x:-1, y: -1}, new wx.Size(307, 73));
  var panel = new wx.Panel(frame, wx.Id.ANY);
  var button = new wx.Button(panel, wx.Id.EXIT, "Convert", { x : 112, y : 8 });
 
	var textbox1 = new wx.TextCtrl(panel, wx.Id.EXIT, "", { x : 6, y : 8 });
	var textbox2 = new wx.TextCtrl(panel, wx.Id.EXIT, "", { x : 192, y : 8 });
 
	button.onClicked = function(event){
		textbox2.value = (textbox1.value - 32)*5/9;
	}
  frame.center();  
  frame.show();
  return true;
}

Запазваме програмата като converter_c_to_t.js и я изпълняваме през промпта или конзолата:

glue converter_f_to_c.js

Резултат:
JavaScript GUI - Fahrenheit to Celsius Converter
С WinRar можем да направим програмката изпълнимо exe, като включим всички необходими файлове: F_to_C_Converter.exe

Share and Enjoy !

Shares

ТОТО 6 от 49 генератор – Javascript generate random unique numbers

Posted on by
Reply

Скоро в форума на DBG коментирахме скрипт за генериране на случайни числа за тото 6 от 49. Аз си написах собствен JavaScript генератор, който използва специфични и важни javascript трикове:
1. Генериране на обхват от числа
2. Проверка дали дадено число е част от масив
3. Възходящо сортиране на масив от числа
Ето и кода за тото-генератора:

// Деклариране на минимално и максимално число
var min = 1;
var max = 49;
// Брой на случайно-генерираните числа
var randnums = 6;
/* =================================== */
var nums = [];
var c = 0;
var seqarr =[];
 
function compare(a,b){return a - b}
 
for (var num = min; num <= max; num++){nums.push(num)}
 
do{
	var el = nums[Math.floor(Math.random() * nums.length)];
	if(seqarr.indexOf(el) != -1){continue}
	else {
		seqarr.push(el);
		c++;
	}
}while(c<randnums);
 
document.write(seqarr.sort(compare));

Пример може да се види тук:
JavaScript Random Numbers – ТОТО 6 от 49

Share and Enjoy !

Shares