文字列をつなぐ - JavaScriptのチュートリアル

このレッスンでは 複数の文字列のつなぎ方について ご説明をします。 今開いている このJavaScriptコードなんですけれども img のこの画像をクリックすると 画像が切り替わるという 処理がしてあります。 id="photo" となっているんですが、 getElementById でこの要素を取ってきて、 その要素に対して addEventListener で click をしたら この関数を実行します。 その中では新しい画像のパスですね。 元は image_001 なんですが、 002 のパスを変数に入れて setAttribute で src、ソースを 002 に変える ということになっています。 ですからクリックすると写真が 切り替わるんですが、 確認しておきましょう。 今ブラウザウィンドウに表示しているのが 「001」のほうですね。 クリックすると切り替わって 「002」の画像が出てきます。 実はこの画像を収めているフォルダ、 「images」なんですけれども そこには「003」、「004」と 全部で4枚入ってるんですね。 せっかくですから4枚 表示したいと思います。 ということはこの photo という 変数に入れているこのパスなんですが、 それを3つの文字列に 分けるということになりますね。 00 までと 2 と .png。 分けて、この 2 の部分を 3、4 と 入れ替えればいいということになります。 この3つの文字列に分けるということなんで ではここはクオーテーションをつけて 2 の所もクオーテーションをつけてと。 こうしないと3つの文字列になりません。 そして3つの文字列を くっつける必要があります。 このときに使うのは記号の です。 演算子という言い方を プログラムではするんですけれども 演算の子供ですね、演算子。 演算記号のことですね。 で、数値であれば 足し算をするんですけれども 文字だとすると その文字をくっつけてくれるという 機能があります。 ではこれで最初と同じように 00、2、.png と認識してくれるかどうか 確認しましょう。 ファイルを保存します。 画像をクリックして切り替われば いいわけですね。 ちゃんと切り替わりました。 「00」、「2」と「.png」。 くっつけて認識してくれるということが 確認できました。…