サブ講師の時間が出来たので、この時間を使って受講生のサポートをしながらjQueryを勉強しています。
jQueryプログラミング入門を買ったのですが、
なんというか・・・html4.01で書いてあるので、ありなんだろうけど・・・brタグを連続で打ってあったりで、自分なりにソースを変更しながら作成中。Nodeを勉強した時に散々悪戦苦闘したおかげで、どうやらソースの中身を理解する力は多少はレベルアップしたようで、jQueryの設定を読んだ上で、プログラムを入力すると、だいたい理解できるようになっていたのは嬉しいことです。
でも、今回悩まされたのが、サムネイルをクリックしたらライトボックス風に半透明の黒の上に画像が枠付で表示されるプログラムを作成した時に、通常htmlファイル以外、javascriptはjsフォルダ。画像ファイルはimagesフォルダで管理。というように別々のフォルダに管理しています。しかし、この本は同じフォルダ内で管理してるのです。その影響でサンプルプログラムを作成しても同じフォルダ内に全てのファイルを保存しないと動かないものになってました。
サンプルでは、src属性の値を取得して、その値にb_を追加して表示させるファイル名を設定しているのですが、この方法は、画像を別フォルダで管理していると変になります。例えば、images/img01.jpg となっていた場合。こちらの思いとしては、images/b_img01.jpg となってほしいのですが、サンプルのままでやるとb_images/img01.jpg となります。
別フォルダを指定するならこれもありかもしれませんが、imagesだけで管理している場合に都合が悪いです。
そこで、substring()とlastIndexOf()を使って、ファイル名だけを取得して、取得したファイル名にb_ を追加してパスを追加して、新たなimg要素に追加する方法で対応してみました。
他にも何か対応方法が有るのかもしれませんが、ファイル名の取得!と思った時に、特定の文字列を抽出 という言葉を思い出したので、javascriptの教科書を引っぱり出したり、ネットで調べたりで対応してみました。
やっぱり市販のテキストって、肝心な部分で省略してたり楽をしている場合があるな~と改めて感じた出来事でした。