【JavaScript】コード作成ツールの作り方【さわり】

　どうも！LSSです！！

 　今回は、「コード作成ツール」をどんな風に作っているか、の さわりの部分について書いていきます！

はじめに、基本形のコードを書きます

まず、ごくごく簡単にCSSを使ったコードを書いてみます。

コード

<style>.waku{border:10px double #ffaaaa;}</style><span class="waku">テストです</span>

↑のようなコードを書くと、

テストです

のように表示されます。

はてなブログの場合、その後プレビューした後、HTML編集画面に戻ると、

<style><!--
.waku{border:10px double #ffaaaa;}
--></style>
<p><span class="waku">テストです</span></p>

のように書き換えられますが、意味は同じなので気にしない方向でｗ

JavaScriptのinnerHTMLを試してみます 

コード

<div id="gamen"></div>
<script>
txt='こんにちは！';
gamen.innerHTML=txt;
</script>

 のようなコードを書いてみると、

 

となります。

 普通に「こんにちは！」と書いたのと同じ状態ですね。

上記２つを合わせてみると

コード

<div id="gamen"></div>
<script>
txt='<style>.waku{border:10px double #ffaaaa;}</style><span class="waku">テストです</span>';
gamen.innerHTML=txt;
</script>

「こんにちは！」だった部分を、最初の１行のコードに置き換えてみました。

すると、

 

やはり、最初と同じものが出てきますね^^

画面を書き換えるコードを関数化する

コード

<div id="gamen"></div>
<script>
gw();
function gw(){
txt='<style>.waku{border:10px double #ffaaaa;}</style><span class="waku">テストです</span>';
gamen.innerHTML=txt;
}
</script>

先ほどの<script>タグ内の２行のコードを、 function gw(){ と } で挟んであげます。

これによって、一回実行されるだけだった このコードが、 gw(); と呼び出すたびに実行される「関数」となります^^

関数化すると、呼び出されるまで実行されないので、

gw();

と一回呼び出す部分も書きました。

 

やはり同じように出力されているのが確認できますね^^

カラーパレットを呼び出すinputタグを追加！

さて、ここで

にも書いた「inputタグのカラーパレット」をつけたしてみます！

コード

<input id="colp" type="color" value="#ffaaaa"/>
<div id="gamen"></div>
<script>
gw();
function gw(){
txt='<style>.waku{border:10px double #ffaaaa;}</style><span class="waku">テストです</span>';
gamen.innerHTML=txt;
}
</script>

こういう感じで、divタグの上に書いてみます。すると…

 

こうなります。

カラーパレットで色を選ぶ事はできますが、まだそれを反映させる部分を書いていないので、「テストです」のほうは変化しません。

次は「カラーパレットで選んだ色で『テストです』の周りの色が変わる」ところを作っていきます！

タイトル

コード

<input id="colp" type="color" value="#ffaaaa"/>
<div id="gamen"></div>
<script>
colp.addEventListener('input',gw,false);
gw();
function gw(e){
txt='<style>.waku{border:10px double '+colp.value+';}</style><span class="waku">テストです</span>';
gamen.innerHTML=txt;
}
</script>

まず、
colp.addEventListener('input',gw,false);
で、「colpと名付けたinputタグの内容が変更された時（input）、gwという関数を呼び出す」というイベントリスナーを設定します。
※この時、gwの後ろに () はつけない点に注意！

関数gwの方には、一応イベント受け取り変数の e を入れておきます（eは任意の変数名）

また、元のコード、

<style>.waku{border:10px double #ffaaaa;}</style><span class="waku">テストです</span>

の色を指定していた赤字部分に、inputタグで指定した色が当てはまるように、

txt='<style>.waku{border:10px double '+colp.value+';}</style><span class="waku">テストです</span>';

と変更します。

これで表示してみると…

 

無事、カラーパレットの色を変更した時、「テストです」が描き直されて、さらにカラーパレットの色が反映される仕組みができました！^^

同じ要領でinputタグを増やせます！

コード

<input id="colp" type="color" value="#ffaaaa"/>
<input id="haba" type="range" value="10"/>
<div id="gamen"></div>
<script>
colp.addEventListener('input',gw,false);
haba.addEventListener('input',gw,false);
gw();
function gw(e){
txt='<style>.waku{border:'+haba.value+'px double '+colp.value+';}</style><span class="waku">テストです</span>';
gamen.innerHTML=txt;
}
</script>

例えば、枠線の太さをスライダーで変更できるようにするなら、上記のように
「inputタグ」「イベントリスナー設定」「関数内の置き換え」
の３つを行う事で、 

 

と、いくつでも変更可能場所を増やす事ができます^^

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^