JavaScript

Ein presentasjon Tomas har starta å lage
om verdas kulaste språk

Text

JavaScript

– 10 dagar i 1995 (les mer)

– Klinkekule 

2005: Ajax --> jQuery

– 2008: Chrome + V8 

– Før: "liv" til nettsider

– Nå: overalt

JavaScript

Elementary Javascript

- Tutorial: codeschool

- Tutorial: Javascripting

Arbeide med javascript i nettleseren

- Tutorial: Discover Chrome DevTools

node

= kjør JavaScript på maskinen din

= last ned og installer andres bibliotek

- Svær samling opensourcebibliotek (npm)

var http = require('http');
var server = http.createServer(function (request, response) {
  response.end("Hello World\n");
});

server.listen(8000);

1. Skriv litt kode

2. lagre som hvaduvil.js

3. kjør med node hvaduvil.js

Lage en server

node

- Download: nodejs.org

- Biblioteksamling: npmjs.org

- Tutorial: codeschool

- Tutorial: learnyounode

electron

= Lag desktop-programmer med node

– HTML og CSS (+ litt native)

– Node moduler og JS for logikk

– Innebygd Chromium browser

– Automatisk oppdateringer

– Installers, debugging, crash report

electron

- Download: electron.atom.io

- Eksempel: SlackAtom

- Tutorial: Elementary Electron

 

three.js

= Lag grafikk i browseren

– WebGL --> OpenGL (grafikkort)

– Kamera, scene, lys++

– Importer 3D-modeller fra 3DSMax++

three.js

- Download: threejs.com

- Eksempel: creepy hode

- Eksempel: Åndalsnes

- Tutorial: Intro to WebGL

sketch.js / processing.js

= Lek og vær kreativ

– Forenkle lyd

– Forenkle grafikk

– Ingen nytte

sketch.js / processing.js

- Download: processingjs.org

- Download: soulwire.github.io/sketch.js

- Eksempel: awwwards

particle.io

= Interaksjon med fysiske ting

(Skru av lys, mål temperatur, RFID-leser++)

– Rimelig chip

– Editor i skyen med trådløs deploy

– App på mobil for testing

particle.io

- Get started: particle.io 

- Eksempel: Photon-eksempler

- Alternative: cylonjs.com

- Alternative: evothings.com

- Chips: dealextreme

meteor.js

= Webrammeverk 

– Lag websider kjapt!

    – (for mye?) magi 

 

meteor.js

- Download: meteor.js

- Tutorial: meteor

- Tutorial: meteor m/React

React

= Frontendrammeverk

– Håndterer det -etter- et API

React

- Download: facebook.github.io/react

- Eksempler: Facebook, Reddit, Instagram +++

- Tutorial: learnyoureact

React Native

= Lag mobilapplikasjoner

– 2015

React Native

- Download: facebook.github.io/react-native

- Tutorial: official tutorial

- Tutorial: BEKK React Native / Slides

reveal.js / slides

= Lag presentasjon med HTML/CSS/Javascript

– Perfekt for å vise webpresentasjoner

reveal.js / slides

- Download: lab.hakim.se/reveal-js 

- Eksempel: CSS3-presentasjon

- (GUI: slides.com)

chart.js / d3.js

= Imponer folk med grafer

– Fete illustrasjoner

chart.js

 

- Download: chart.js (easy)

- Download: d3.js (advanced)

- Eksempel: stolpediagram (fra galleri)

Lenkesamling

Elementary Javascript

- Tutorial: codeschool

- Tutorial: Javascripting

Arbeide med javascript i nettleseren

- Tutorial: Discover Chrome DevTools

Server + bibliotek m/node

- Download: nodejs.org

- Biblioteksamling: npmjs.org

- Tutorial: codeschool

- Tutorial: learnyounode

Desktop apps m/electron

- Download: electron.atom.io

- Eksempel: Slack, Atom

- Tutorial: Elementary Electron

 

 

Grafikk m/threejs

- Download: threejs.com

- Eksempel: creepy hode

- Eksempel: Åndalsnes

- Tutorial: Intro to WebGL

Lag "kunst" m/sketch.js

- processingjs.org

- Get started: soulwire.github.io/sketch.js

- Eksempel: awwwards

IoT-dingser m/particle

- Get started: particle.io 

- Eksempel: Photon-eksempler

- Alternative: cylonjs.com

- Alternative: evothings.com

- Chips: dealextreme

Websider m/Meteor

- Download: meteor.js

- Tutorial: meteor

- Tutorial: meteor m/React

Websider m/React (advanced)

- Download: facebook.github.io/react

- Tutorial: learnyoureact

Apper m/React Native

- Download: facebook.github.io/react-native

- Tutorial: official tutorial

- Tutorial: BEKK React Native / Slides

Presentasjon m/reveal

- Download: lab.hakim.se/reveal-js 

- (GUI: slides.com)

Lag grafer m/chart

- Download: chart.js (easy)

- Download: d3.js (advanced)

Javascript

By Tomas Fagerbekk