読者です 読者をやめる 読者になる 読者になる

/var/www/yatta47.log

やったのログ置場です。スクラップみたいな短編が多いかと。

JavaScriptでフォームの値を取得して表示する

最近少しずつやらなきゃなーと思って使いだしたJavaScript

簡単なものから勉強しています。開発環境とか考えるのもなんだったので、WEBサービスとして展開しているのを利用しています。

ってことでそれも含めて今日は記事に。

 

フォームに入力された値を取得して表示

前々からちょっとやりたいとは思っていたので、それをもとに実践。

結論として出来上がったものはこちら。

See the Pen RoZrvR by yatta47 (@yatta47) on CodePen.

これが何に役に立つのか?というと、"YoutubeRSSを生成する"のに使うつもりです。

YoutubeRSSの形式は、"https://www.youtube.com/feeds/videos.xml?channel_id=[ChannelID]"っていう形式で、ChannelID部分が可変になっているだけなので、その部分を入力できるようにして、取得を押せば決まったURLが構成される・・・・っていう感じです。

 

getElementByIDは、ノードにアクセスするときに使うようです。これを使って、id="value"の値を取得しています。それで同じように、値を表示したいノードid="result"を取得して、そこに値をセットして表示している感じです。

JavaScriptのノードの扱いとかDOMの操作はこちらのページを参考にしました。

DOMを使ってみる - JavaScript超初心者によるJavaScript入門講座

 

基本的な動きの部分はこれ以上ないので、今度はこれをBootstrapでデザインしていこうと思います。

ちなみに勉強環境はCodepen

Codepenのアカウント作って、そこで実行しています。

codepen.io

 

Rubyの開発の場合はCloud9使っていて、HTMLとかJavaScriptもできなくはないんだけど、どうもしっくりこなかったので前々から気になっていたCodepenを使ってみました。

なかなか便利ですねー。リアルタイムに描画されるところが気に入っています。今回の成果物・・・・というか勉強結果もCodePenでEmbedで張り付けています。ファイルとしてもダウンロードできたりと便利な機能がたくさんありますね。もっともっと使いこなしていこう。

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

広告を非表示にする
Real Time Web Analytics