Help us understand the problem. What is going on with this article?

【js簡単纏め】javascriptを勉強して恐怖感を取り除こう!

More than 5 years have passed since last update.

概略

最近Titaniumを扱っているんですが、JSについてあんまり詳しくなくて、1から勉強しようと思いましたので、ついでに記事投稿。

とりあえずwebで触っていきます。レスポンスあると楽しいので!

効能:主に僕の恐怖心が和ら具程度です。
対象:プログラムならだいたい分かる。でも、javascriptよくわかんねーけど動く。何これ怖い。

そんな人達がこの記事を読んでjavascriptに対する恐怖心が薄まってくれればなぁと思います。

主にhtmlとの連携を主軸に話が進みますので、
- 初心者卒業しました☆彡
- 生JSなんて見たくもねぇ!
- JS単独で動くやつを作りてぇ!

という方には向かないと思いますのでご注意を。

その1ではとりあえず、javascriptを使ってみます。

早速jsを凄く細かく噛み砕く。超導入編

canvasというものを使って簡単に説明します。
canvasはWeb上にブラウザ上に図を描くために策定された仕様で、簡単にjavascriptっぽい事できるのでこれを使って勉強しましょう。(気になった人はぐぐってね!)

ひとまずこんなhtmlを書いてみましょう。やたら詳しく書いてますけど気にしないでください。

index.html
<html lang="ja">
  <head>
    <!-- ページの文字コード設定 -->
    <meta charset="utf-8">
    <title>なんとなくJSを使う</title>
  </head>
  <body>
    <section>
      <canvas id="mycanvas" width="700" height="300" style="border: solid; 1px #999;></canvas>
      <script>
      </script>
    </section
  </body>
</html>

出来ました?
ブラウザで開くと、CSSで四角を作ってるだけですので、四角が出てくるだけだと思います。その四角の中がキャンバスです。

さぁ真っ白キャンバスに早速scriptタグの中にjsを書いていきましょう!

index.html
  var canvas = document.getElementById("mycanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#00bfff";
  ctx.fillRect(20, 20, 50, 100);

これを書き込んでブラウザで開いてみると。四角が出ますよね。

解説1:document.getElementById("mycanvas");
Javascriptの特徴として、ブラウザにロードされたhtmlはdocumentオブジェクトとして表すことが出来ます。
document. ~~ でhtml自体の情報に色々アクセスできるわけですね。
その中でも.getElementByIdというのはかなり基本中の基本でhtml内に記述されたタグのid部分を引っ張ってこれるというすぐれものです。
こいつがわかると割りとなんでも出来ます。
/解説1

解説2:var ctx = canvas.getContext("2d");以下
canvas.というのは上で変数として作ってますよね。mycanvasというidを持っているタグをオブジェクトとして持っています。

canvas.getContext("2d");は、所謂魔法の言葉ですが、あえて言うならcanvasの2d関係のapiを使えるようにしています。その次のを使う準備ですね。
ctx.fillStyle = "#00bfff";
ctx.fillRect(20, 20, 50, 100);
色を作って、位置と大きさ決めて、四角を表示。ですね。
/解説2

ここまでで、あれ?javascriptもう怖くねぇわって人はプログラムにある程度精通している人ですね。

早速jsを凄く細かく噛み砕く。関数化してボタンにしよう。

さっきhtmlを

index.html
function draw(){
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#00bfff";
    ctx.fillRect(20, 20, 50, 100);
}

こんな感じにしての下に

index.html
<button type="button" onClick="draw()">描画</button>

と記述してみよう。
それでブラウザを立ち上げてみるとー?

2.png
1.png

ボタンが出ますので、ボタンをクリックすれば動くと思います。

解説3:htmlでjavascriptのトリガーにする。
マウスオーバーの時に動かしたい!ダブルクリックにしたい!フォームでキーが押された時に判定させたい!
そんな場合でhtmlにトリガーを仕込むのが「イベント属性」ってやつですね。今回はonClickというボタンが押された時に動くやつを使っています。

イベント属性についてどんなの有るの?って方はこちらのサイトさん等いいかもしれません!
HTMLタグ/HTMLの基本/イベント属性 - TAG index Webサイト
/解説3

勿論関数の中で関数を使用することだってで来ます。
scriptの中をこんな感じにすれば、チョチョイのチョイですね。

index.html
function draw(){
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");
    parts(ctx);
}
function parts(ctx){
    ctx.fillStyle = "#00bfff";
    ctx.fillRect(20, 20, 50, 100);
}

javascriptなんとなくわかりました?

噛み砕いた後は飲み込もう。

じゃあ次はこれです。
bodyの中にあるセクションを以下のようしてみよう。今回は画像を使っています。htmlのあるフォルダ内にimgというフォルダを作って「hut.png」という画像を入れています。

index.html
<section>
    <img id='sample_img' src='' name="img" alt='画像登場予定'/>
    <buttom type="button" onClick="drawImg()">画像表示・非表示</buttom>
    <form name='area1'>
        <p id='wrote'>文字を打ち込んでね!</p>
        <textarea name="text" onkeyup="check()"></textarea>
    </form>
    <br>
    <textarea id="t1"></textarea>
    <textarea id="t2"></textarea>
    <buttom type="button" onClick="inputAlert()">アラート</buttom>

    <script>
    var c = 0;
    function drawImg(){
        var img = document.getElementById("sample_img");
        if(c%2 == 0){
            img.src = 'img/hut.png';
            img.style.visibility = 'visible';
        }else{
            img.src = '';
            img.style.visibility = 'hidden';
        }
        c++;
    }
    function check(){
        var str = document.area1.elements["text"].value;
        var strCount = document.area1.elements["text"].value.length;
        document.getElementById("wrote").innerHTML = str+'\nと書きましたね?それは'+strCount+'文字です。';
    }
    function inputAlert(){
        var str1 = document.getElementById("t1").value;
        var str2 = document.getElementById("t2").value;
        alert("打ち込んだ文字は\n"+str1+"\n\n"+str2+"\nですね!");
    }
    </script>
</section>

これが読み解ければJSはもう怖くないね!

え?ソース汚くて読めない?
....ソースが汚いのは私が未熟だからです。m(_ _;)m

以下解説です。

読み解けないよ!
って方は参考までにしてください!

解説4:画像の表示大作戦
drawImg()がそうですね。
やっていることは簡単で、imgタグを直接変更しています。
最初にsrcがない状態なのをsrcを指定してあげることで画像の表示を行っています。
逆にsrcを空っぽにして非表示という操作も可能です。
styleも編集可能でvisibilityという要素を変更して表示、非表示を行っています。

画像の大きさを変更したかったら
img.style.widthにして変更すると…?
/解説4

解説5:一体何を何文字入力した!?
フォーム作りをするときに入力している最中文字カウントしてくれる便利なアイツ。check()さんです。

ちょっと指定方法がさっきまでと違いますが、なんとなくわかりましたか?
document.area1.elements["text"].value;ってやつですが。
(今見ているweb).(名前がarea1ってやつ).(その中にあるnameがtextって要素).(に書いてある内容)
って感じです。大抵の場合document.getElementByIdが使えるとなんとかなるのですが、こういう記述もあるんです。

次に表示の部分ですが
document.getElementById("wrote").innerHTML
innerHTML何者?って話ですよね。
pタグの内側に文章が書いてありますよね?
それはそのままタグの内側のことを指しています。textareaだとvalueと扱っていますけど、pタグにvalueという要素はないです(よね?)。
つまりそういうことです。なので中身を変更するしか無いので、こんな記述になるわけですね。
/解説5

解説6:Alertって簡単
ここまで来ればinputAlert()なんて簡単ですよね。
文章を簡単に取得できれば後は簡単です。

煮るなり焼くなり
文章チェックするなり正規表現確かめたりしてやって下さい。
true/falseの返事がほしい(アラートダイアログにしたい!)時は
var res = confirm(str1+"でいいですか?");
みたいに書いてみてください。resの部分にダイアログの評価が入ります。
/解説6

こんなところで今回は終わりです!

俺(達)の勉強はこれからだ!

mmusasabi
(*´д`*)パッション!!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away