こんにちは。
JavaScriptさわってみる企画3回目やっていきます。なかなか進まないので入門書１冊と言っても結構回数がかかりそうですね。
参考にしている入門書はこちら。
まだ序盤で基礎の基礎でしょうからなるべくサクサクと進めたいところではあります。
※おことわり
毎度のことですが"初心者がやってみた”というだけの記事ですので内容の信頼性はそれ相当です。信用してどんな災難に遭おうとも責任は負いかねます。
今回やってみるのはIF文(分岐)。～だったら〇〇して、そうじゃなくて…だったら△△してね、みたいなやつです。RPGツクールMZで言うところの条件分岐、どんな言語でもこれがなければゲームは作れないでしょう、というくらいの基礎だと思います(たぶんね)。
本によりますとJavaScriptでの分岐の書き方は３種類あるようです。
①IF文
if (条件式１) {
処理１
}
else if (条件式２) {
処理２
}
else {
処理３
}
条件式１が成り立つ(TRUEが返る)とき処理１を実行、条件式１は成り立たず(FALSEが返り)条件式２がTRUEのとき処理２を実行、どちらもFALSEのとき処理３を実行。っていうやつ。
②switch文
switch(㋐){
case ㋑:
処理１
break;
case ㋒:
処理２
break;
default:
処理３
}
㋐と㋑が一致するとき処理１、㋐と㋒が一致するとき処理２を実行、いずれでもなければ処理３を実行。IF文と似てますが条件式にイコールを使う場合や分岐が多いときはこっちが見やすいよ、ということです。
③三項演算子
条件式？ 処理１：処理２
分岐が２つだけなら１行で書けちゃうよ、というもののようです。EXCELのIF関数みたいですね。
②も③も①の書き方で置き換えることは可能なのでとりあえずは①だけ覚えておけばいいような気もしますが、既にあるプログラムを読み解こうとする場合にはこういうパターンがあることも知っておく必要はありますね。
私はRPGツクールMZのコアスクリプトやプラグインを読めるようになりたいので今回もなかなかの収穫です。実際プラグインで②は見たことがあります。
では実践。前回のコードにIF文を付け足してみようと思いますがせっかくなので違うことも付け足してみたい…。
画像の表示でもやってみましょう！ネットで調べてみました。
まずHTMLで画像表示なら
<img id ="××" src="〇〇" >
××に画像id(任意)、〇〇に画像アドレスですね。
これを付け足して・・・関数にIF文を入れて・・・とやってみましたが大苦戦しました(+_+)
とりあえずできたもの↓
<script>
function pic() {
const target = document.querySelector("#gazou");
const a = document.getElementById("i0").value;if(a == 1){
target.src = "https://cdn-ak.f.st-hatena.com/images/fotolife/i/icedtomatobazooka/20220304/20220304182304.jpg"
}
else if(a == 2){
target.src = "https://cdn-ak.f.st-hatena.com/images/fotolife/i/icedtomatobazooka/20220205/20220205192723.jpg"
}
else{
target.src ="https://cdn-ak.f.st-hatena.com/images/fotolife/i/icedtomatobazooka/20220216/20220216021720.jpg"
}
}
</script>
<body>
画像番号:<input id="i0" value="1" />
<button onclick="pic()">表示</button><br>
<img src="" width="400" id ="gazou">
</body>
URLが入ってるのは画像アドレスです。入力欄に”1”を入れた場合、"2"を入れた場合、それ以外の３パターンで表示ボタンを押すと過去記事のアイキャッチ画像を表示するようにしてます。
画像番号:
条件式の比較演算子を"==="(厳密な比較？)にするとうまく行きませんでした。たぶん前回のjavascript記事で話した型の違いでしょうね。調べたところ"=="で数値と文字列を比較した場合は文字列が数値に自動で変換されるようです。さすがJavaScript(*'ω'*)
画像の表示についてはquerySelector()ってやつでタグを検索するってことをしてるんです。下から２行目が画像を表示するHTMLですがここでidを"gazou"ってしてるじゃないですか、これを探してその場所のsrc(情報元)を指定のアドレスに変えてねってことをpic関数の中でやってるんですよね。実は前回からやってることですがこのへんのイメージがつかみにくかったです。関数"pic"には直接的に「再描画する」という命令文は無いのですが画像が置き換わるんですね。javaやVBAにはこういった考え方無い気がする(知らないだけかも)。
答えだけ見ると簡単そうなんですけどね( ;∀;) 難しかった…(自分には)。
参考にしたページ↓
正直あんまり理解してませんｗ
ちなみにはてなブログでJavaScriptを動かすなら設定から編集モードをMarkdownモードにする必要がありますよ!(記事毎に設定できます。) 次回↓ icedtomatobazooka.site
さて、らくがきがないのでまたまた例のヤツやります。
例のヤツとは：素体からキャラクターを描く練習としてオリキャラ+体操着を描く企画。素体は「SPEEDRAW」というアプリの絵を模写したもの。
ちゃんと色を塗る体力は残っていませんでした。そしてオチの使い回し。なんかこう・・・下から風がぶわーみたいなの描きたかったんですけどムリでしたね。
素体からの練習したやつ↓
酷いでしょ。やっぱり描き慣れてない角度はホントに描けませんね。JavaScriptがうまくいかなくて疲れたのでほとんど手直ししてないっていうのもあります(言い訳)。
ランキング参加中です。下のバナーをクリックして頂けるとやる気値が増幅します!！
