Arhiva pentru tagul “JavaScript”

HTMLDrive: o resursă bogată

Era o vreme… poate chiar înainte de anul 2000… când unul dintre siturile pe care le vizitam periodic era DynamicDrive.com. Prin 2004 am şi scris un material de prezentare. Era vremea când un sit îl scriam din cap în coadă, adică fără generatoare, fără CMS-uri. De fapt singurele linii de cod nescrise de mine erau de pe DynamicDrive, de unde luam de exemplu meniuri frumoase – dar nu numai. Apoi situl a cam apus, deşi din când în când mai publică scripturi noi. Mai pe val pare însă HTMLDrive.net, pe care vi-l recomand acum.

imagine

Situl oferă aproximativ 250 de soluţii pentru meniuri; similar pentru slideshow-uri şi scroller-e; aproape 150 de scripturi pentru efecte pe imagini; …


S/2: Pentru webmasteri

Sunt câteva articole pe care aş dori să le semnalez, e drept că în grabă, aşa că intră la S/2 (scurt pe doi). Şi am să încep cu cel care m-a interesat mai mult: Powerful New CSS- and JavaScript Techniques. Puteţi parcurge articolul ca spectator, admirând la ce culmi noi se poate ajunge cu CSS şi Javascrips, sau ca “actor” implicat, inspirându-vă pentru propriile proiecte. Veţi găsi în total cinci secţiuni: CSS Transitions and Animations Useful and Practical CSS Techniques; CSS Typography and Text Techniques; CSS Navigation Menus and Hover Effects; Visual Techniques With CSS.

imagine

Am spus “pe scurt”? Am spus. Aşa că trec mai departe. Chiar azi a apărut un alt articol interesant: …


JSDo.it: comunitate cu coduri

Vă amintiţi de JSFiddle? Rămâne un serviciu extraordinar şi poate tocmai de aceea nu lipsesc clonele. Dar aş fi răutăcios să numesc JSDo.it o simplă clonă. Este o comunitate care foarte probabil e predominant asiatică, precum autorii sitului. Membrii pot să scrie cod (HTML, JavaScript, CSS…) şi să îl ruleze spre verificare, iar apoi pot să îl facă public, comunităţii dar şi în afara ei. După cum vedeţi mai jos, interfaţa e aerisită. Scrii cod şi când apeşi Ctrl+S pentru salvare ţi se actualizează previzualizarea din dreapta. Se pot integra şi biblioteci JavaScript.

imagine

Puteţi răsfoi coduri ale altor membri ai comunităţii şi studia cum au realizat anumite lucruri (ex: simple jocuri JavaScript). Există şi o …


Numărătoare în textarea

Vă invit să vedem în continuare ceva simplu pentru avansaţi, bun de ştiut pentru începători: cum numărăm câte caractere sunt scrise într-un câmp textarea. Am văzut aşa ceva, nu?, pe zeci de situri, în special pe cele care limitează numărul de caractere ce pot fi scrise/trimise. Cum se face? Evident că foarte simplu. În demonstraţia de mai jos mă voi folosi de jQuery pentru simplul fapt că e mai uşor aşa, dar se poate face desigur şi fără.

Pe scurt urmărim evenimentul onKeyUp pe câmpul textarea. La fiecare ridicare a degetului de pe o tastă va fi apelată funcţia contor(). Aceasta ia ce s-a scris în câmpul textarea şi într-un div scrie câte caractere are ceea ce s-a scris. Evident, se poate interveni ca peste un număr de n caractere să nu mai permită scrierea, dar aici ne limităm la numărat. Vreţi să vedeţi codul de mai jos în execuţie? Mergeţi …


Biblioteci JavaScript pentru lucrul cu texte şi cu date

Vă amintiţi de Sugar? Sper cineva să facă acele mici traduceri necesare pentru funcţiile pe dată. Dar astăzi vedem alte alternative, mai specializate. Şi începem cu string.js, o bibliotecă JavaScript dedicată prelucrării stringurilor, adică şirurilor de caractere. Autorul chiar face referire laudativă la Sugar, dar tot are motivele lui pentru o bibliotecă separată. Poate fi folosită într-un proiect HTML printr-o simplă apelare a bibliotecii de pe Github (sau salvaţi local, dacă faceţi teste offline). Se creează atunci o variabilă globală numită pur şi simplu… S.

imagine

Şi astfel, de exemplu S(‘JavaScript e tare de tot!’).contains(‘tare’) va returna adevărat (true). Metodele (vreo 20) le veţi găsi în banda laterală indicate, fiecare cu o scurtă explicaţie şi câteva exemple. Iar …


Sencha Touch 2 (versiune finală)

Anul trecut, în decembrie, am scris pe scurt despre Sencha Touch: Mobile JavaScript Framework. Nu mai reţin ce beta sau release candidate era atunci, dar oricum nu era versiunea finală. Iată că întorcându-mă pe sit, descopăr cu ceva întârziere că la 6 martie, deci acum vreo două săptămâni, a apărut şi versiunea 2 finală. Anunţul oficial îl găsiţi aici, iar firile mai tehnice vor dori probabil să vadă release notes. Trebuie să admit că anunţul noii versiuni e foarte bine gândit, parcă ar vinde vreun produs Apple 🙂 .

imagine

Accentul cade pe Build for Speed (vedem nişte grafice care ne arată un progres considerabil), Build for Great Experiences (aceste demonstraţii ar trebui să …


Ferestre cu jQuery UI (II)

Am văzut în articolul anterior cât de simplu se poate crea o fereastră de dialog cu jQueryUI, precum şi cum putem face unele mici configurări. Acum să mergem mai departe. În următorul exemplu facem două schimbări: în primul rând conţinutul ferestrei îl indicăm dinamic: de fapt vom avea o singură fereastră dar care afişează două texte diferite, în funcţie de butonul apăsat; în al doilea rând vom face ceva de ordin estetic, şi anume să adăugăm o iconiţă la butonul la care acum îi spunem “Bine”. De ce? Pentru că mie mi-a luat ceva până am găsit cum se face 🙂 şi sper altora să ia aşa mai puţin. Iată strict codul JavaScript, în timp ce puteţi vedea pagina în acţiune aici şi să îi studiaţi sursa.

$(document).ready(function(){
$(‘#fereastra’).dialog({
autoOpen: false,
width: 400,
height: 250,
modal: true,
buttons: {
Bine: function() {
$(this).dialog("close");
}
},
open: function(event, ui) {
$(this).parent().find(‘.ui-dialog-buttonpane button:contains("Bine")’).button({
icons: { primary: ‘ui-icon-check’ }
});
}
});
$("button").button();
$("#buton1").click(function (){
$("#fereastra").html("<p>Un text!</p>");
$(‘#fereastra’).dialog(‘open’);
});
$("#buton2").click(function …


Sugar: pentru ca JavaScript-ul să fie mai atrăgător

JavaScript-ul e un limbaj de programare foarte răspândit şi îndrăgit de mulţi pentru simplitatea lui. Unde mai pui că merge în navigatoare, deci nu ai nevoie de programe speciale, compilatoare sau altele. Un navigator ai oricum pe calculator, iar un Notepad (mai bine Notepad++) iar există. Şi totuşi, JavaScript-ul are limitele lui, şi de aceea au apărut atâtea biblioteci (frameworks) ce fac munca mai uşoară, în special rezolvând diferenţele dintre diversele navigatoare: IE, Firefox, Chrome, Opera, Safari… Ei bine, Sugar este un framework pentru JavaScript, dar nu în sensul în care e jQuery de exemplu.

imagine

Sugar chiar face viaţa mai dulce programatorilor cu o serie incredibilă de “extensii”, de funcţii foarte-foarte-foarte utile. Am spus că sunt foarte utile? Da, …


În 2012 înveţi să programezi!

Poate vă amintiţi despre Codecademy: învăţare (mai) interactivă, un articolaş scris în august 2011. Atunci situl era la început, acum e… păi nu e prea departe, dar are un total de aproape 30 de lecţii. Şi uite că ambiţia îi face să lanseze un sit care gravitează în jurul aceloraşi lecţii, evident cu unele adaptări, plus completările ce vin pe drum, doar că acum recurgând la email şi la o planificare anuală. Yep. Propunerea lor este să învăţaţi să programaţi în 2012. Peste 300 de mii de persoane au intrat în horă şi luni de luni primesc câte o lecţie nouă de parcurs.

imagine

Nu vă imaginaţi că primiţi un text de citit. Nuuuuu. Sunteţi conduşi la nişte lecţii interactive, …


List.js: joacă cu listele

Listele sunt vechi dar mereu noi. De când cu CSS-ul, şi meniurile sunt cel mai adesea liste… doar că verticale. Clasicele buline pot dispărea sau fi înlocuite cu orice element grafic, tot via CSS. Ce mai: CSS-ul e unul din cei mai importanţi prieteni ai listelor. Dar JavaScript-ul? Cu ceva pricepere poţi face listele dinamice, dar cu List.js  listele prind aripi. Sau “devin superflexibile”, ca să citez autorul. Cu ajutorul acestei biblioteci JavaScript (nu, nu e plugin jQuery, dar merg împreună) listele devin rapid căutabile, sortabile şi filtrabile!

imagine

La momentul scrierii acestui material, List.js e în stadiul beta (0.1.4), deci nu e recomandabil să îl folosiţi în proiecte publice sau majore. Dar poate când citiţi acest material a ajuns …