Med input blokke kan du aktivere kode når du ryster eller trykker på en knap på din microbit.

For at komme i gang med Sonic Pi skal man bare skrive kode i dette felt

Prøv at skrive

play 60

Derefter tryk på Start knappen

Hvis du vil stoppe dit program kan du trykke på Stop knappen

Hvis du skal have en række elementerne der fremgår som en liste så kan du bruge <ul> </ul> som kaldes for en unummereret liste (Unordered List) sammen med <li> </li> som er en liste genstand (List Item)
F.eks. hvis du vil skrive en opskrift med en ræ

I HTML skriver man elementer ved at skrive f.eks. <p> </p> (paragraph elementet). Indholdet i elementet er så det der er imellem det startende tag <p> og det lukkende tag </p>.
Der findes blandt andet:
<p> Paragraf </p>

Paragraf

Hvis du vil have en kant rundt om dit element kan du bruge border
Den tager op til 3 argumenter, den første er hvor tyk den skal være, den anden hvordan kantlinjen skal se ud, og den tredje er hvilken farve den skal have.

//CSS
.min-ene-ka

For at få din første lyd skal du bare skrive

play 40

Derefter tryk "Run"
Du hører så en lyd der vil svare til tangent nr. 40 på et keyboard. Prøv at skrive 60 eller 30 og læg mærke til at du hører en højere eller lavere tone.

Det er måske lidt forvirrende og du har måske ikke noget klaver. I stedet kan man skrive navnet på en node og den oktav den skal spilles i. F.eks.

play :E3

Den afspiller så noden "E" i oktav 3. Hvis du skriver en højere eller lavere oktav en 3 så kan du høre samme node i højere eller lavere frekvens. Du kan også prøve at skrive A, B, C, D, F eller G!

Når du skal skrive noget CSS som gælder for elementer der har en bestemt klasse så skal du bruge en klasse selektor. Man skriver en klasse selektor ved at skrive et punktum foran sin klasse og derefter blokken med deklarationer. Et HTML element kan have flere klasser, så der kan være flere klasser der gælder for et html element!

//CSS
.red {
  background-color: red;
}
.white-text {
  color: white;
}

<!-- HTML -->
<div class="red white-text"> Rød Farve </div>

Variabler er beholdere af data. Altså tal eller tekst.

Hvis man vil undgå at gentage kode eller opdele sin logik så det er nemmere at forstå, så er funktioner meget vigtige.
En funktion defineres ved at skrive function, derefter et navn på funktionen og så skal der være parentheser () . Til sidst skal de

Med border-radius kan du give et element runde hjørner ved at sætte en værdi på fx. 10px
f.eks.

//CSS
.rund {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 10px
}

<!-- HTML -->
<div class="rund"> Hej </div>

play :C3, attack: 0.1, decay: 0.1, sustain: 1.25, release: 0.5

Attack er tiden der går fra at der er ingen lyd til den første lydniveau. Det er her lyden bliver indfaset.
Decay er tiden fra det første niveau til sustain.
Sustain er normalt hvor man hører det meste lyd.
Release er udfasningen af lyden.

Ækvivalens ( == )

true == true
true == false

Større end ( > ) og Mindre end ( < )

3 > 4
2 > 1
5 < 6

Negation ( ! )

!true

Logisk OG ( && )

true && false
false && false

Logisk ELLER ( || )

true || false
false || false

Hvis du vil have at dit element har en fast bredde eller højde, så kan du bruge width og height og give dem en værdi i px eller andet.

//CSS
.redbox {
  background-color: red;
  width: 100px;
  height: 50px;
}

<!-- HTML -->
<div class="redbox"> Rød Kasse </div>

Prøv andre værdier som:

75px
10%
5rem
4em
8vh

Hvis vi vil afspille mere end 1 tone så kan vi bare tilføje flere play kald på nye linjer

play :C3
play :E3
play :G3

Nu afspiller vi C, E og G tonerne i 3. oktav. CEG er faktisk en akkord. Altså en samklang af 3 eller flere toner.

Hvis man vil afspille en akkord kan man faktisk også bare bruge chord metoden.

play chord(:C3, :major)

En Hash er en kollektion af nøgler og værdier. Man slår op i den ligesom en ordbog.

options = { font_size: 10, font_family: "Arial" }
options[:font_family]
#=> "Arial"

Med <img> </img> kan man nemt sætte et billede ind i din web site.
Det kræver også at du giver attributen src, altså "source", en værdi som er en addresse på billedet.
Da det ikke giver mening at have indhold i dit element, behøver du ikke afslutte

Hvis du vil have at et element ikke skal vises, eller hvis du vil have at et element altid starter på en ny linje så kan du bruge display egenskaben. Hvis du derimod vil have at et element ikke skal starte på en ny linje kan du bruge inline-block

`

Et tag der tit bruges til links i HTML er <a> </a> også kaldet Anchor.
Med attributten href kan det dirigere til at ny side eller andet sted på samme side.

<a href="www.carlsbergpirates.dk"> Dette er et link til Carlsberg Pirates </a>

De grundlæggende elementer er blokke der starter dit program eller viser tekst eller tal.

Variabler bruges til at holde på data, som f.eks. tekst.
Du kan lave en variabel ved bruget nøgleordet var efterfulgt af hvad du vil kalde din variabel. Derefter skriver du = for at tildele en værdi, og så på højresiden af = skriver du værdien der

En synthethizer er en et stykke elektronik eller program der genererer et lydsignal. Altså lydene vi hører. En synthetizer lyder måske ligesom fysisk instrument (klaver eller guitar), imens et andet lyder som "elektronisk"

Du kan bestemme hvilken synthethizer du bruger.

synth :tech_saws, note: :E3

Her bruger vi :tech_saws som er navnet på en synthethizer der er med i Sonic Pi pakken. Der findes mange andre som du kan finde i bunden af din sonic pi editor.

Hvis du vil afspille en række toner med en bestemt synthethizer kan du bruge use_synth :tech_saws til at sige den skal bruges fremover.

use_synth :tech_saws
play :C3
sleep 0.5
play :E3
sleep 0.5
play :G3

Variabler bruges til at holde på data, som f.eks. tekst.
Du kan lave en string variabel ved at bruge nøgleordet string efterfulgt af hvad du vil kalde din variabel. Derefter skriver du = for at tildele en værdi, og så på højresiden af = skriver du værdien der skal tildeles, f.eks. dit navn.

string navn = "Sune";
Debug.log(navn);

Du kan også lave en variabel med en anden type eller en klasse.
F.eks.

int point = 3;
Vector3 position = Vector3.new(0,0,0);

Der er en løkke til at gentage noget et bestemt antal gange.
Man skriver antal gange den skal gentage efterfulgt af .times metoden.
Herefter skal der være en kodeblok do og end, hvor i mellem vi skriver vores kode.

5.times do 
  play :c2
  sleep 0.25
end

Med margin kan du indrykke et element i forhold til dens forældrer
Du kan vælge at bruge margin-top, margin-right, margin-bottom, margin-left og indrykke i en enkelt side
Du kan også give dem alle en værdi på samme tid ved at skrive f.eks. `ma

:hover giver en anden farve når musen er over elementet

//CSS
.redbox {
  background-color: red;
  width: 100px;
  height: 50px;
}
.redbox:hover {
    background-color: blue;
}

<div class="redbox"> Flyt musen ovenpå mi

Nogen gange vil man gerne køre kode afhængig af om noget er sandt eller falsk.
En if løkke er en kontrol struktur som kører køde hvis der er en sand værdi
Den laves ved at skrive if, derefter et boolsk udtryk i parantes, f.eks. ( true ) og så en kode blok { } hvori du kan sætte din kode.

if ( 3 > 4 ) {
    Debug.log("tre er større end fire");
}

if ( 4 > 3 ) {
    Debug.log("fire er større end tre");
}

Der findes mange typer af data i C# og derfor mange typer af værdier.

Tekst værdier kaldes for en "streng" og er typen string

Debug.log("Hej verden!");

Her er Debug.log() en metode der skriver værdien "Hej verden!" til konsol vinduet i Unity3D

Heltals værdier er af typen int og kaldes også for "integer" på Engelsk. De kan IKKE være kommatal!

Debug.log(2018);

Her skrives værdien 2018 til konsol vinduet.

Et HTML dokument er ligesom et familietræ. Et html element kan have en eller flere børn eller en forælder. Fra sin forælder arver man egenskaber som f.eks. CSS farver osv! Derfor er det altså ikke nok bare at læse et dokument fra toppen til bunden, me

HTML elementer kan have attributter.
Disse attributter giver ekstra information om hvordan vores element skal opføre sig.
For eksempel er title en attribut der giver vores element en tekst når vi har musen over den.

<p title="Du kan se mig

Der findes mange typer af data og derfor findes der også mange "typer" af værdier.

Tekst, bogstaver, tal, osv. kan altid lagres som en "streng"

console.log("hej")

Forskellige typer har dog forskellig opførsel f.eks. så er strenge ikke

Hvis du vil have et element sat i højre eller venstre side, så kan du bruge float og give den værdier left eller right

//CSS
.float-til-hoejre {
    float: right;
}

<!-- HTML -->
<div class="float-til-hoejre">
    Je

Løkker er et stykke kode der gentager noget andet kode. Det kan gentages få gange eller igen og igen for evigt.

I programmeringssprog skal man skrive kode efter en syntax, som kan forstås som en række grammatik regler.
Computeren kan kun læse korrekt kode, så hvis du har tastefejl, forkerte tegn, så læser den det som noget andet.

i Sonic Pi og Ruby er der nogle primitive datatyper, som er heltal, kommatal, symboler og tekst.

40 # Heltal
2.5 # Kommatal
:C3 # Symbol
"C3" # Tekst

Der er også metoder som play eller sleep.
De kan forstås som kommandoer der gives argumenter.
I eksemplet nedunder er :C3 et argument, og amp: 3 et navngivet argument.
Argumenter skal separeres med komma.

play :C3, amp: 3
sleep 1

Hvis man vil fjerne eller ændre prikket eller tallet fra en liste som <ul> </ul> eller <ol> </ol> så kan man gøre det med list-style-type på <li> </li>

<ul>
    <li> Første </li>
    <li> Anden </li>
</ul>

li {
    list-style-type: none;
}

• Første
• Anden

For at lave matematik med værdier kan man bruge operatorer som du kender fra din lommeregner

Tildeling ( = )

var a = 10

Addition ( + )

10 + 10

Multiplikation ( * )

2 * 3

Subtraktion

use_synth_defaults amp: 2, cutoff: 90, release: 0.25

amp er amplitude, altså lydforstærkning. Den bliver tildelt en værdi på 2.
cutoff er afskæring, altså den skærer den højeste del af tonen fra. Den bliver tildelt en værdi af 90, som betyder vi skærer 10% af det mest skingre fra.
release er løsladelse, altså hvor langt tid der går fra lyden har nået sit højeste lydniveau, til den forsvinder/faser ud.

Ruby kan hentes med din package manager fra official repositories. Dette installerer kun en enkelt og globa ruby version.

sudo apt-get ruby hvis Ubuntu/Debian/CodingPiratesOS
sudo apt-get ruby-dev hvis Ubuntu/Debian/CodingPiratesOS

sudo pacman -S ruby hvis Arch
sudo pacman -S ruby-dev hvis Arch

Logik blokke bruges til at køre kode afhængigt om noget er sandt eller falsk

Ligesom strenge og tal, som er typer af værdi, findes der også boolske værdier.
Modsat strenge og tal, findes der kun 2 boolske værdier true og false, altså sand eller falsk. Denne type kaldes også boolean

Man kan forme boolske udtryk ved at br

Hvis du vil indrykke elementer der er barn af elementet kan du gøre det med padding
Du kan vælge at bruge padding-top, padding-right, padding-bottom eller padding-left og indrykke i enkelte sider.
Du kan også give dem alle en værdi på samme ti

En sample er et lydklip der afspilles.
Der findes en masse samples der kommer med Sonic Pi

sample :bd_haus

:bd_haus er en bass tromme lyd. Prøv selv at afspille andre samples fra Sonic Pi, der findes en liste i bunden af editoren. Derudover autoforeslår den også. Prøv :loop_amen eller :drum_heavy_kick

Du kan også afspille dine egne lydklip. sample metoden skal bare vide hvor den er ved at give den stien.

sample "sti/til/mit/lydklip.wav"

Addition ( + )

10 + 10

Multiplikation ( * )

2 * 3

Subtraktion ( - )

4 - 2

Division ( / )

6 / 3

Hvis man vil have sine funktioner til at være mere dynamiske og mere gentaglige til forskellige situationer, så kan man sende en besked med når man kalder den. Dette kaldes for et argument.

Når man kalder en funktion kan man sende en værdi med ved at s

Ved at bruge .sum metoden på et array kan man hurtigt beregne summen af alle tal i arrayet

[1, 2, 3, 4].sum
 #=> 10 

Man kan bruge font-size til at ændre skriftstørrelsen

<!-- HTML -->
<p> Jeg har stor skrift </p>

//CSS
p {
    font-size: 50px;
}

Jeg har stor skrift

:active giver en anden farver når du trykker på elementet

//CSS
.bluebox {
  background-color: blue;
  width: 60px;
  height: 80px;
}
.bluebox:active {
  background-color: green;
}

<div class="bluebox"> Tryk på mig! <

Ved at bruge .tally kan man tælle antal forekomster i et array

["a", "b", "c", "b"].tally
  #=> {"a"=>1, "b"=>2, "c"=>1}

Nogen gange vil man gerne køre kode afhængig af om noget er sandt eller falsk.
En if løkke er en kontrol struktur som kører køde hvis der er en sand værdi
Den laves ved at skrive if, derefter et boolsk udtryk i parantes, f.eks. ( true ) og så en k

En Range er et interval, altså en række tal fra et starttal til et sluttal.
Det laves ved at skrive et start tal efterfulgt af ... og så sluttallet,, altså `start..slut´

(1..5).to_a
#=> [1,2,3,4,5]

Den mest almindelig anvendte html tag er <div> </div>
Egentlig er det bare en tom kasse og bruges som en beholder til at gruppere elementer, der er ikke noget magi ved den udover de attributter og styles du giver den!

<div>
     Jeg er bar

Vi kan gentage en melodi ved at bruge løkker.
Et live_loop er en løkke der gentager et stykke kode for evigt.
Hvis du ændrer i dens kode, og afspiller, så vil den sætte den nye version i kø til næste gennemgang.

live_loop :musik do
  play :C3
  sleep 0.5
  play :E3
  sleep 0.5
  play :G3
  sleep 0.5
  play :E3
  sleep 0.5
  play :G3
  sleep 0.5
end

Prøv at ændre i koden imellem do og end og derefter tryk "Run" igen. Det er ikke nødvendigt at trykke stop, den vil afspille dit nye kode i næste iteration af loopet.

Pseudo klasser er lidt ligesom en selektor.
Den kan dekorere med css når man har musen over et element, eller hvis du har klikket på den.
Den har denne syntaks

selektor:pseudo-klasse {
    egenskab:værdi;
}

Når du skal skrive noget CSS som gælder en enkelt type element så skal du lave en element selektor. Man skriver en element selektor ved at skrive et elementnavnet og derefter blokken med deklarationer.

//CSS
p {
  color:red;
}

Hvis du vil have teksten i et element centreret, eller sat i højre eller venstre side, så kan du bruge text-align og give den værdier left, right eller center

//CSS
.centreret {
    text-align: center;
}

<!-- HTML --

Hvis vi vil lave mere end 1 lyd, så kan vi sætte pauser imellem afspilninger. For at lave en pause bruger man sleep metoden

play :C3
sleep 1
play :E3
sleep 1
play :G3

Den afspiller hver node med en pause på 1 sekund. Prøv at ændre tallet til et komma tal f.eks. 0.25 eller et større tal. Husk! på engelsk bruger kommatal et punktum!