行と列
グリッドを作ります
「行と列」はCoddyKit上の無料Javascript for Kidsレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavascript for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Javascript for Kidsコースには全4レッスンが含まれています。
グリッドを作る! 🟦🟦
グリッドは、チェッカーボードや小さな四角形が並ぶ窓のようなものです!行(横)と列(縦)でできています。⬜⬜⬜
ネストしたループは、グリッドを描くのにぴったりです!
行を作る 📏
星を1行並べるには、文字列の中で+を使って星をつなげます。
行のテキストを少しずつ作ってみましょう!
let row = ''
for (let col = 1; col <= 4; col++) {
row = row + '*'
}
console.log(row)何が起きましたか 🔍
最初は空の文字列''でした。ループのたびに*が1つ追加されます。そのため、*、**、***、****と増えていきます!
そして完成した行を表示しました。きれいですね!✨
let row = ''
for (let col = 1; col <= 3; col++) {
row = row + '*'
console.log(row)
}たくさんの行 📚
次は、それを外側のループで囲んで、たくさんの行を作りましょう!外側が行、内側が列です。
for (let r = 1; r <= 3; r++) {
let row = ''
for (let c = 1; c <= 4; c++) {
row = row + '*'
}
console.log(row)
}4×4の正方形 🟦
完璧な正方形を作りましょう!星を4行、4列に並べます。
for (let r = 1; r <= 4; r++) {
let row = ''
for (let c = 1; c <= 4; c++) {
row = row + '*'
}
console.log(row)
}絵文字を使う! 🎨
退屈な星を使う必要はありません。ハートのグリッドを作りましょう!💖
for (let r = 1; r <= 3; r++) {
let row = ''
for (let c = 1; c <= 3; c++) {
row = row + '💖'
}
console.log(row)
}横長の長方形 ▭
行数と列数を同じにする必要はありません!横長の長方形を作りましょう:2行、6列です。
for (let r = 1; r <= 2; r++) {
let row = ''
for (let c = 1; c <= 6; c++) {
row = row + '🟩'
}
console.log(row)
}数字のグリッド 🔢
星の代わりに、列番号でグリッドを埋めましょう!
for (let r = 1; r <= 3; r++) {
let row = ''
for (let c = 1; c <= 4; c++) {
row = row + c
}
console.log(row)
}縦長のグリッド 🏢
縦長の塔を作りましょう!ブロックを6行、2列に並べます。🧱
for (let r = 1; r <= 6; r++) {
let row = ''
for (let c = 1; c <= 2; c++) {
row = row + '🧱'
}
console.log(row)
}スペースを追加する 🔲
記号の間にスペースを入れて、間隔を広げましょう!スペースを含む'* 'を使います。
for (let r = 1; r <= 3; r++) {
let row = ''
for (let c = 1; c <= 4; c++) {
row = row + '* '
}
console.log(row)
}グリッドを作ってみましょう 🌟
ハートを星に変えたり 🌟、サイズを変えたりしてみましょう!編集して実行し、自分だけのグリッドを作ってください。
for (let r = 1; r <= 4; r++) {
let row = ''
for (let c = 1; c <= 5; c++) {
row = row + '🌟'
}
console.log(row)
}クイックチェック ✅
グリッドの理解度チェックです!🧠
行と列のまとめ 🎉
美しいグリッドができました!🟦 グリッドの作り方を学びました。
- 外側のループ = 行
- 内側のループ = 列
row = row + symbolで行のテキストを作り、それを表示します
次は、成長する星の三角形を作ります!🔺
よくある質問
「行と列」レッスンは無料ですか?
はい。「行と列」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Javascript for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Javascript for Kidsコースには全4レッスンが含まれています。
「行と列」で何を学びますか?
グリッドを作ります ブラウザで直接実行するハンズオンコードでJavascript for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Javascript for Kidsを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのJavascript for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「行と列」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavascript for Kidsレッスンでコードを書いて実行できますか?
はい。すべてのJavascript for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。