JavaScript för barn · Lektion

Rader och kolumner

Skapa ett rutnät

Lektion 2 av 413 steg

Rader och kolumner är en gratis lektion i JavaScript för barn på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för JavaScript för barn, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript för barn innehåller totalt 4 lektioner.

Skapa ett rutnät! 🟦🟦

Ett rutnät liknar ett schackbräde eller ett fönster med små rutor! Det har rader (på bredden) och kolumner (på höjden). ⬜⬜⬜

Nästlade loopar är PERFEKTA för att rita rutnät!

Bygg en rad 📏

För att bygga EN rad med stjärnor kan vi sätta ihop stjärnorna med hjälp av + i en sträng.

Låt oss bygga radtexten steg för steg!

let row = ''
for (let col = 1; col <= 4; col++) {
  row = row + '*'
}
console.log(row)

Vad hände? 🔍

Vi började med en TOM sträng ''. Varje loop lade till en *. Därför växte den: *, **, ***, ****!

Sedan skrev vi ut den färdiga raden. Snyggt! ✨

let row = ''
for (let col = 1; col <= 3; col++) {
  row = row + '*'
  console.log(row)
}

Många rader 📚

Omslut nu detta med en YTTRE loop för att skapa många rader! Yttre loop = rader, inre loop = kolumner.

for (let r = 1; r <= 3; r++) {
  let row = ''
  for (let c = 1; c <= 4; c++) {
    row = row + '*'
  }
  console.log(row)
}

En kvadrat på 4 gånger 4 🟦

Låt oss skapa en perfekt kvadrat! 4 rader och 4 kolumner med stjärnor.

for (let r = 1; r <= 4; r++) {
  let row = ''
  for (let c = 1; c <= 4; c++) {
    row = row + '*'
  }
  console.log(row)
}

Använd emoji! 🎨

Varför använda tråkiga stjärnor? Låt oss bygga ett rutnät med hjärtan! 💖

for (let r = 1; r <= 3; r++) {
  let row = ''
  for (let c = 1; c <= 3; c++) {
    row = row + '💖'
  }
  console.log(row)
}

En bred rektangel ▭

Antalet rader och kolumner behöver inte vara samma! Låt oss skapa en bred rektangel: 2 rader och 6 kolumner.

for (let r = 1; r <= 2; r++) {
  let row = ''
  for (let c = 1; c <= 6; c++) {
    row = row + '🟩'
  }
  console.log(row)
}

Talrutnät 🔢

I stället för stjärnor fyller vi rutnätet med kolumnnumret!

for (let r = 1; r <= 3; r++) {
  let row = ''
  for (let c = 1; c <= 4; c++) {
    row = row + c
  }
  console.log(row)
}

Högt rutnät 🏢

Låt oss skapa ett högt torn! 6 rader och 2 kolumner med block. 🧱

for (let r = 1; r <= 6; r++) {
  let row = ''
  for (let c = 1; c <= 2; c++) {
    row = row + '🧱'
  }
  console.log(row)
}

Lägg till mellanslag 🔲

Lägg ett mellanslag mellan symbolerna för att sprida ut dem! Använd '* ' med ett mellanslag.

for (let r = 1; r <= 3; r++) {
  let row = ''
  for (let c = 1; c <= 4; c++) {
    row = row + '* '
  }
  console.log(row)
}

Nu är det din tur att bygga 🌟

Ändra hjärtana till stjärnor 🌟 eller ändra storleken! Redigera och kör koden för att skapa DITT rutnät.

for (let r = 1; r <= 4; r++) {
  let row = ''
  for (let c = 1; c <= 5; c++) {
    row = row + '🌟'
  }
  console.log(row)
}

Snabb koll ✅

Hjärnkoll på rutnät! 🧠

Besvara frågan i den interaktiva lektionen

Sammanfattning av rader och kolumner 🎉

Vackra rutnät! 🟦 Du har lärt dig att bygga dem.

Yttre loop = rader
Inre loop = kolumner
Bygg radtext med row = row + symbol och skriv sedan ut den

Nästa steg: växande stjärntrianglar! 🔺

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 35
Lektioner: 140

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Rader och kolumner” gratis?

Ja – hela texten till ”Rader och kolumner” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i JavaScript för barn, kan Ni uppgradera till CoddyKit PRO. Kursen i JavaScript för barn innehåller totalt 4 lektioner.

Vad lär jag mig i ”Rader och kolumner”?

Skapa ett rutnät Ni övar på JavaScript för barn med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript för barn?

Du behöver inga förkunskaper. Utbildningen i JavaScript för barn på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Rader och kolumner”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript för barn-lektionen?

Ja. Varje JavaScript för barn-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript för barn