2021-11-11
#js #IchigoJam #KidsIT 
IchigoJamでプログラミングを基本を押さえたら、スマホでもPCでもサーバーでも動くインストール済みプログラミング言語、JavaScriptにチャレンジしてみましょう！

PCN代表、まったさんが作ったステキ環境「Webプログラミング 道場」
「ブラウザだけでサクッとHTML練習！chromebookの中学生も活用中の「Webプログラミング道場」、Code for FUKUIから提供開始！ - about yrm」

ログイン不要、HTMLやJavaScriptを書いてみて、動かして、また書いてみる・・・開発の基本サイクルがしっかりできるので、初心者用、学校現場でも最適。
HTM1ファイル、61行しかないシンプルなプログラムですが超便利です。
→ 「Web プログラミング⼊⾨ - ブラウザでプログラミングしてみよう」


「Webプログラミング 道場 - ichigojam-font ver.」
Code for FUKUIにてオープンソースとして公開されているので、どなたでも改善提案できます。

プルリク2件

1. ctrl-s で「見てみる」
「Visual Studio Code」風に保存して、動かすというサイクルを気持ちよくするための基本ショートカット「保存 / ctrl-S」を追加提案。
addEventListenerでチェックするコードを追記してます。

2. IchigoJam FONTバージョン
Chromebookで動かしてみた課題、0(ゼロ)とO(オー)が区別できない問題。そういえばIchigoJam FONTがあったので、それを使ってみたバージョンです。 大きく区別しやすいフォントなのと、IchigoJamで見慣れたこどもたちにはうれしいかも？ フォントが選べるオプションを付けてからマージなどがいいかもしれません。

kawakudari.js を動かしてみましょう！ <html> <body> <script type="module"> import { cls, lc, print, wait, btn, scr, rnd } from "https://js.sabae.cc/ij.js"; window.run = async () => { cls(); let x = 15; for (;;) { lc(x, 5); print("O"); lc(rnd(32), 23); print("*"); await wait(3); x = x - btn(28) + btn(29); if (scr(x, 5)) { break; } } }; </script> </body> </html> ij.jsのURLがちょっと長かったので、js.sabae.cc に下記コードを置いて短く書けるようにしました。 export { cls, lc, print, wait, btn, scr, rnd } from "https://ichigojam.github.io/ij-screen/ij.js"; 同じくまったさん作、JavaScriptが使える「IchigoLatte」でちょっと背伸びしてJavaScriptを味わっておくのもいいですよ！

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS