最近少しずつやらなきゃなーと思って使いだしたJavaScript。
簡単なものから勉強しています。開発環境とか考えるのもなんだったので、WEBサービスとして展開しているのを利用しています。
ってことでそれも含めて今日は記事に。
フォームに入力された値を取得して表示
前々からちょっとやりたいとは思っていたので、それをもとに実践。
結論として出来上がったものはこちら。
See the Pen RoZrvR by yatta47 (@yatta47) on CodePen.
これが何に役に立つのか?というと、"YoutubeのRSSを生成する"のに使うつもりです。
YoutubeのRSSの形式は、"https://www.youtube.com/feeds/videos.xml?channel_id=[ChannelID]"っていう形式で、ChannelID部分が可変になっているだけなので、その部分を入力できるようにして、取得を押せば決まったURLが構成される・・・・っていう感じです。
getElementByIDは、ノードにアクセスするときに使うようです。これを使って、id="value"
の値を取得しています。それで同じように、値を表示したいノードid="result"
を取得して、そこに値をセットして表示している感じです。
JavaScriptのノードの扱いとかDOMの操作はこちらのページを参考にしました。
http://piyo-js.com/05/use-dom.html
基本的な動きの部分はこれ以上ないので、今度はこれをBootstrapでデザインしていこうと思います。
ちなみに勉強環境はCodepen
Codepenのアカウント作って、そこで実行しています。
Rubyの開発の場合はCloud9使っていて、HTMLとかJavaScriptもできなくはないんだけど、どうもしっくりこなかったので前々から気になっていたCodepenを使ってみました。
なかなか便利ですねー。リアルタイムに描画されるところが気に入っています。今回の成果物・・・・というか勉強結果もCodePenでEmbedで張り付けています。ファイルとしてもダウンロードできたりと便利な機能がたくさんありますね。もっともっと使いこなしていこう。