Javascript håller på att ta över webben

april 23, 2012 § Lämna en kommentar

Det ser ut som att webben utvecklar sig mer och mer bara mot javascript bibliotek. Alla har något att bidra med också. Här kommer en lista över de mest kända och bästa biblioteken:

  • jQuery – Används på ca 50% av alla hemsidor som finns ute på webben(baserat på fakta från http://httparchive.org som analyserat de 17 000 populäraste hemsidorna). jQuery tillåter användarna att skriva enkel men effektiv kod, ”Write less do more” som deras slogan är.
  • Node.js – Kom år 2009 och har fått 3 år på sig sedan slagit ner som en blixt. Vann utmärkelsen ”technology of the year 2912” som InfoWorld utnämner. Node.js används för att skriva skalbara internet applikationer och det med hjälp av en javascript webbserver.
  • AngularJS – AngularJS kommer att återfinnas på många hemsidor i framtiden. Men då det har ett ovanligt användarområde så det är omöjligt att säga hur många användare AngularJS kan locka. AngularJS tillåter användarna att enkelt skriva kod som uppdateras automatiskt i webbläsaren. Men det har mycket mer än så, t.ex: enkel form validering och stöd för server kommunikation.
  • PrototypeJS – Används i princip på samma sätt som jQuery.
  • BackboneJs – För att hålla din hemsida strukturerad. Mycket lightweight och har trogna supporters.
  • MooTools – Tillåter användaren att skriva kraftfull, flexibel och cross-browser kod.
  • Underscore.js – Jag har inte grävt i det så kan inte ge en utförlig beskrivning. Men deras hemsida säger att UnderscoreJs är slipsen som går ihope med jQuerys smoking och Backbone.js hängslen.
  • Coffescript – tillåter användaren att utföra funktioner med mindre kod.

Det var några av det populäraste. Utöver det så finns det även: SproutCore, Archetype JavaScript Framework, Fleegix.js, SimpleJS, script.aculo.us, Sammy.js, UIZE, Spine.js, Cappuccino, MochiKit, Dojo Toolkit, Spry framework for Ajax, QooXDoo, Yahoo! User Interface Library, Midori, Rialto, Ext JS, Knockout.js, Javascript MVC, Ember.js, Batman.js, Google Web Toolkit och Google Closure.
Vi kan kort och gott konstatera att om du vill följa trenden så bör du lära dig Javascript till fullo. Sedan kanske skapa ett eget bibliotek 😉

Google utvecklare har skapt AngularJS

april 23, 2012 § Lämna en kommentar

Vad är AngularJS?

AngularJS är ett javascript MVC bibliotek. Det som AngularJS specialiserat sig på är att allt sker i realtid. Det är också enkelt att komma igång med. Utvecklarna har lämnat video tutorials om hur man kommer igång. Det hittar ni här: http://angularjs.org/#/list
Själv kommer jag garanterat att använda mig av AngularJS i framtiden.

Skapa 3d grafik på webben med hjälp av ett bibliotek och HTML5.

mars 27, 2012 § Lämna en kommentar

Three.js verkar vara ett utmärkt bibliotek för att skapa 3d grafik med html5. För att komma igång med det så kan ni gå hit: http://aerotwist.com/tutorials/getting-started-with-three-js/(öppnas i nytt fönster).
När du har läst första delen så vill du kanske lära dig mer? Gå hit: http://aerotwist.com/tutorials/creating-particles-with-three-js/

Vad är jQuery?

november 24, 2010 § Lämna en kommentar

jQuery är världens mest använda javascript bibliotek. Ett bibliotek som sparar tid åt utvecklare. I den här artikeln kommer jag att gå igenom vad som gör jQuery så kraftfullt.

För att kalla på ett HTML element behöver man bara använda sig av dollartecknet $.

För att kalla på exempelvis <body> så skriver jag $(‘body’).

Man kan också kalla på klasser och ID. Det görs på samma sätt. Vi tänker oss att jag i min html kod har <p class=”newstyle”>. För att kalla på klassen i jQuery så använder jag: $(‘.newstyle’)        <–notera punkten som står för klass

För att kalla på ett ID så gör man på samma sätt. <div id=”greenbg”>. För att kalla på det skriver jag $(‘#greenbg’).

Man kan också göra en så kallad ”action” på varje element man har valt. För att ta ett exempel: $(‘valtElement’).on(click, function(){console.log($this)}). Den functionen returnerar elementet som vi klickade på. I det här fallet är ”.on” en action.

Samlingsnamnet actions består av många olika grupper. En grupp kallas ”traversals”. Här finns en lista över traversals: http://api.jquery.com/category/traversing/ Dessa hjälper oss att hantera element.

En annan grupp kallas ”manipulation”. Den hjälper till att manipulera elementet. Här finns den listan. http://api.jquery.com/category/manipulation/

För att lägga till html text inom body taggar med jQuery. Skriv: $(‘body’).html(‘<p>Brödtext skrivs här</p>’).

Med selectors så väljer vi ut mer precist vilket element vi vill jobba med. Här finns det stöd för CSS3. Här är listan över selectors. http://api.jquery.com/category/selectors/

För att t.ex välja ut första <p> elementet skriver man: $(‘p:first’).
För att skapa en animation så kan vi skriva såhär:
$(‘#knappattklicka’).click(function() {
$(‘#ettannatelement’).animate({
opacity: 0.25,
height: ‘toggle’
}, 5000, function() {
// Animation complete.
});
});
Den animerar elementet genom att sänka opacity till 25%, och sedan använder den ”toggle”. Toggle används för att visa eller dölja element.

HTML5 Javascript API

november 23, 2010 § Lämna en kommentar

HTML5 har en hel del nya funktioner. Nyheterna finns inom HTML, CSS och naturligtvis JavaScript. Den officiella versionen av HTML5 specifikationen sägs att inte bli helt färdigutvecklad förrän 2022.

Majoriteten av JavaScript-funktioner som beskrivs närmare är redan genomförda i moderna webbläsare (t.ex. Sarafi, Chrome, Firefox, Opera). Även Internet Explorer fått möjlighet att göra canvas och andra grejer (antar vi använder ExplorerCanvas eller Chrome Frame).
Ta en närmare titt på vad som kommer att göra ditt liv enklare:

Hur många gånger har du undrat varför det finns getElementById, getElementsByTagName, men inte getElementByClassName? Nya JavaScript API löser detta problemet:

var element = document.getElementsByClassName (‘dagbok’);

Dessutom finns det nu möjlighet att hämta element på ett nytt sätt:
var elements = document.querySelectorAll(”ul li:nth-child(odd)”);
var first_td = document.querySelector(”table.test > tr > td”);

Web Storage (sessionStorage, localStorage)

Cookies har vissa nackdelar. Som W3C sade:

1. Om webbplatsen använder cookies för att hålla koll på vilken biljett användaren köper, när användaren då klickar mellan olika sidor i windows, skulle biljetten som blev köpt ”läcka” från de ena fönstret till det andra, möjligtvis skulle ett dubbelköp kunna uppstå för samma biljett och flygning utan att personen lade märke till något.

2.
Webbapplikationer kan vilja spara flera megabyte av data på klient sidan, till exempel för ett färdig skrivet dokument eller en användares mailbox. Cookies hanterar inte det här bra. Eftersom det baseras på varje begäran.

Såhär gör man för att rädda data varje gång en tangent blir tryckt:
textarea.addEventListener(‘keyup’, function () { window.localStorage[‘value’] = area.value; window.localStorage[‘timestamp’] = (new Date()).getTime(); }, false); textarea.value = window.localStorage[‘value’];

Var befinner jag mig?

Du bläddrar för närvarande i kategorin APITobiasboman's Blog.

%d bloggare gillar detta: