Web grafik med javascript for begyndere

posted in: Programmering | 0

HTML5, CSS og Javascript er en ret kraftig cocktail, der kan bruges til imponerende effekter på en hjemmeside.

Så her er en lille guide til nogle informationskilder, som kan bruges til et selvstudie, der meget hurtigt vil kunne få dig til at blive imponeret af dig selv. Altså hvis du ikke allerede er det. Alle kilderne er på engelsk.

Både HTML og Javascript er ganske almindelige tekstfiler (som fortolkes af internet browseren – Chrome eller Firefox anbefales) så du kan såmænd klare dig med en almindelig Notepad for at skrive programmerne. Der er dog flere alternative tekst-editor programmer, der er lidt bedre at anvende, fx den internet baserede jsbin.com hvor du kan skrive din kode og se resultatet med det samme. Hvis du hellere vil have koden liggende på din egen PC, kan du fx bruge Komodo Edit

zenva.com laver nogle gode webinar-kurser og nogle af dem er endda gratis. Her finder du en god (og gratis) introduktion til HTML og CSS: HTML and CSS for Entrepreneurs.

Når du har gennemgået det (eller besluttet at det kan du da i forvejen), kan du gå videre med Zenvas kursus i Javascript: Programming for Entrepreneurs – Javascript (Det koster for tiden $10). Dette kursus kan evt. suppleres med w3schools gennemgang af Javascript.

Så har du den basale viden i orden og kan gå videre med HTML5 canvas og lave næsten alle de grafiske kurver, du har brug for. Det er dog ingen skade til med et par eksempler, så jeg anbefaler:

Youtube video med introduktion til HTML5 canvas: HTML5 Canvas Fundamentals – simple bar chart

Youtube gennemgang af hvordan man laver en grafisk regnemaskine med HTML5 og Javascript: Building a Graphic Calculator with HTML5

Så laver du snart sådan noget: Ashampoo_Snap_2015.10.18_13h30m15s_001_

Og hvis du gerne vil lave grafik med udgangspunkt i data, som du har i en database, så er der her en video tutorial om hvoran man kan kombinere Javascript med Jquery og PHP så man kan hente data i en MySQL database: Connect to database using jQuery

Tutorial om forbindelse til SQLserver ved hjælp af nodeJs: Tutorial SQLserver connect in MS Visual Studio

En anden mulighed er at bruge Google Chrome Team’s Lovefield Javascript SQL like database query. (Bruger IndexedDB)

Node.js kan installeres på Mac, Linux og Windows og bruges til at afvikle Javascript uden at benytte en browser. 3 timers node.js kursus. (Bruger MongoDB)

Kursus med alle elementer af javascript, html, node.js, jaydata og MongoDB til at lave en indkøbsvogn: 28 videoer. (Benytter MS WebMatrix som editor)