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 😉

Annonser

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/

Javascript – värt att lägga på minnet

mars 24, 2012 § Lämna en kommentar

Jag vill ta upp lite enkel javascript och sånt som kan vara värt att lägga på minnet.

För att kunna grabba/editera element

  • getElementById(‘Här skriver du ID’) – Hämtar elementets ID. Det får bara finnas en ID i ett html dokument därför blir detta alltid unikt.
  • getElementByTagName(‘Här skriver du tag name’) – Hämtar ett element genom ett ‘tag’ name. Returnerar en lista med alla tag names i dokumentet. För att komma åt så skrivs de(som en array) t.ex såhär:
    x = document.getElementByTagName(‘a’);
    x[0]; <— För att välja första "anchor" i dokumentet.
  • setAttribute – Om du har hämtat ett element med getElementbyTagName så kan du välja ett attribut som det elementet har och sätta värdet. T.ex såhär:
    var spartag = document.getElementByTagName(‘img’)
    spartag.setAttribute(‘alt’, ‘alternative information goes here’)
  • getAttribute – Används istället för att sätta värdet till att hämta värdet.
  • createTextNode – Tillåts skapa en text, t.ex: createTextNode(‘Here you can write whatever you want’)
  • appendChild – Om du har skapat en text node och vill sätta in den i en paragraph så kan det se ut såhär:
    para = document.getElementByTagName(‘p’);
    text = document.createTextNode(‘text here’);
    para.appendChild(text);
  • lastChild – Om du behöver få tag i sista child i dom trädet.
  • nextSibling – För att få tag i nästa ”kusin” i dom trädet
  • previousSibling – För att få tag i nästa ”kusin” i dom trädet
  • innerHTML – Är ett klumpigt sätt för att få in html och text
  • Uppdaterar mer senare….

RegExp – som programmerare måste du kunna dessa tecken(Javascript)

februari 28, 2012 § Lämna en kommentar

Jag vill ta upp det nödvändiga kommandon som man måste kunna när man jobbar med RegExp. Kommentera och lägg till om det är något ni efterlyser.

I alla förklaringar skulle jag vilja skriva t.ex ”står för alla siffror”. Men det skulle bli så plottrigt. Jag hoppas ni kan läsa av detta istället 🙂

() – Används för att gruppera uttryck. Det skapar också en ”backreference” som gör att det som matchar uttrycket inom parenteser fångas där och kan användas senare.
\d – Alla siffror
\ – Används för att ”escapa” ett tecken. T.ex \\s betyder bara \s.
/skriv din regexp här/ – Framåt-slashes används för att definera hela regexp. Här ser vi 2 exempel på hur vi kan skriva RegExp: re = /\w+/ eller re = new RegExp(”\\w+”)
[0-9] – Samma sak som \d
\s – Radbrytning, white-space eller en tab. Det är samma sak som [ \t\r\n]
\t – White space
\r – Tab
\n – Radbrytning
^ – Används för att deklarera att det som kommer efter ^ ska vara först. Om ^ är inom square brackets så betyder det att tecknet/uttrycket efter ^ ska ”tas bort”.
$ – Används i slutet av en regex för att tala om att nu är det slut på uttrycket
. – Matchar alla tecken
? – Repeterar
* – Repeterar
{} – Används för att definiera hur många gånger det ska upprepa sig: {min, max}. Om vi skriver {1,} så är minimum definierat men inte maximum. Därför är den ändlös.
+ – Repeterar (exempel: regex [0-9]+ matcher 837 likaså 222.
[] – Om man anger flera RegExp uttryck inom square brackets så accepterar en söknad (i en text t.ex) en av dessa uttryck.

Exempel

1

Om man är kluven i sin engelska och vill acceptera både ”gray” och ”grey” så kan man göra det enkelt med regexp uttrycket gr[ae]y. Som accepterar både a och e.

2

\s\d matchar whitespace tecken följt av en siffra. [\s\d] matchar bara en bokstav/siffra. När båda används på 1 + 2 = 3 kommer \s\d matcha ”whitespace”+2. När [\s\d] används så kommer den bara att matcha 1 (utan whitespace före).

3

För att ta ett annat exempel så matcher ”.*” precis alla tecken som är inom citattecken. Men om vi t.ex i en text skulle skriva 2 citerade ord på varsitt håll så skulle all text där emellan tas med också. Eftersom uttrycket säger att den ska ta med allt (även citattecken) i sitt uttryck.

För att klargöra: I den här ”meningen” så skulle allt understryket vara ”medtaget”.
För att undvika detta så använder vi oss utav: ”[^”\r\n]*”
Som med andra ord betyder: Vi vill ha allt inom citat utom ett till citat, tab eller radbrytning emellan.

4

var regex = RegExp(”(^|\\s)” + vadsomhelst + ”(\\s|$)”);
För att förstå den här regexpen så måste vi få en överblick. Den första parentesen utgör tillsammans med den sista helheten i uttrycket. Första parentesen berättar att detta tecken är inom parenteser. ^|\\s – betyder att antingen börjar meningen eller också så är det en tabb, radbrytning eller whitespace där. Sedan avslutas parentesen och grupperingen med ”). + vadsomhelst + ”vadsomhelst” är inget att bry sig om. Den texten kan bytas ut och användas i en function. Slutet på regexpen är nästan likadan som den inledande bara det att |$ betyder att det kan vara slut här.

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 JavascriptTobiasboman's Blog.

%d bloggare gillar detta: