概略
最近Titaniumを扱っているんですが、JSについてあんまり詳しくなくて、１から勉強しようと思いましたので、ついでに記事投稿。
とりあえずwebで触っていきます。レスポンスあると楽しいので！
効能：主に僕の恐怖心が和ら具程度です。
対象：プログラムならだいたい分かる。でも、javascriptよくわかんねーけど動く。何これ怖い。
そんな人達がこの記事を読んでjavascriptに対する恐怖心が薄まってくれればなぁと思います。
主にhtmlとの連携を主軸に話が進みますので、
- 初心者卒業しました☆彡
- 生JSなんて見たくもねぇ！
- JS単独で動くやつを作りてぇ！
という方には向かないと思いますのでご注意を。
その１ではとりあえず、javascriptを使ってみます。
早速jsを凄く細かく噛み砕く。超導入編
canvasというものを使って簡単に説明します。
canvasはWeb上にブラウザ上に図を描くために策定された仕様で、簡単にjavascriptっぽい事できるのでこれを使って勉強しましょう。（気になった人はぐぐってね！）
ひとまずこんな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を書いていきましょう！
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#00bfff";
ctx.fillRect(20, 20, 50, 100);
これを書き込んでブラウザで開いてみると。四角が出ますよね。
解説１：document.getElementById("mycanvas");
Javascriptの特徴として、ブラウザにロードされたhtmlはdocumentオブジェクトとして表すことが出来ます。
document. ~~ でhtml自体の情報に色々アクセスできるわけですね。
その中でも.getElementByIdというのはかなり基本中の基本でhtml内に記述されたタグのid部分を引っ張ってこれるというすぐれものです。
こいつがわかると割りとなんでも出来ます。
/解説１
解説２：var ctx = canvas.getContext("2d");以下
canvas.というのは上で変数として作ってますよね。mycanvasというidを持っているタグをオブジェクトとして持っています。
canvas.getContext("2d");は、所謂魔法の言葉ですが、あえて言うならcanvasの2d関係のapiを使えるようにしています。その次のを使う準備ですね。
ctx.fillStyle = "#00bfff";
ctx.fillRect(20, 20, 50, 100);
色を作って、位置と大きさ決めて、四角を表示。ですね。
/解説２
ここまでで、あれ？javascriptもう怖くねぇわって人はプログラムにある程度精通している人ですね。
早速jsを凄く細かく噛み砕く。関数化してボタンにしよう。
さっきhtmlを
function draw(){
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#00bfff";
ctx.fillRect(20, 20, 50, 100);
}
こんな感じにしての下に
<button type="button" onClick="draw()">描画</button>
と記述してみよう。
それでブラウザを立ち上げてみるとー？
ボタンが出ますので、ボタンをクリックすれば動くと思います。
解説３：htmlでjavascriptのトリガーにする。
マウスオーバーの時に動かしたい！ダブルクリックにしたい！フォームでキーが押された時に判定させたい！
そんな場合でhtmlにトリガーを仕込むのが「イベント属性」ってやつですね。今回はonClickというボタンが押された時に動くやつを使っています。
イベント属性についてどんなの有るの？って方はこちらのサイトさん等いいかもしれません！
HTMLタグ/HTMLの基本/イベント属性 - TAG index Webサイト
/解説３
勿論関数の中で関数を使用することだってで来ます。
scriptの中をこんな感じにすれば、チョチョイのチョイですね。
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」という画像を入れています。
<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
以下解説です。
読み解けないよ！
って方は参考までにしてください！
解説４：画像の表示大作戦
drawImg()がそうですね。
やっていることは簡単で、imgタグを直接変更しています。
最初にsrcがない状態なのをsrcを指定してあげることで画像の表示を行っています。
逆にsrcを空っぽにして非表示という操作も可能です。
styleも編集可能でvisibilityという要素を変更して表示、非表示を行っています。
画像の大きさを変更したかったら
img.style.widthにして変更すると…？
/解説４
解説５：一体何を何文字入力した！？
フォーム作りをするときに入力している最中文字カウントしてくれる便利なアイツ。check()さんです。
ちょっと指定方法がさっきまでと違いますが、なんとなくわかりましたか？
document.area1.elements["text"].value;ってやつですが。
（今見ているweb）.(名前がarea1ってやつ).（その中にあるnameがtextって要素）.(に書いてある内容)
って感じです。大抵の場合document.getElementByIdが使えるとなんとかなるのですが、こういう記述もあるんです。
次に表示の部分ですが
document.getElementById("wrote").innerHTML
innerHTML何者？って話ですよね。
pタグの内側に文章が書いてありますよね？
それはそのままタグの内側のことを指しています。textareaだとvalueと扱っていますけど、pタグにvalueという要素はないです（よね？）。
つまりそういうことです。なので中身を変更するしか無いので、こんな記述になるわけですね。
/解説５
解説６：Alertって簡単
ここまで来ればinputAlert()なんて簡単ですよね。
文章を簡単に取得できれば後は簡単です。
煮るなり焼くなり
文章チェックするなり正規表現確かめたりしてやって下さい。
true/falseの返事がほしい（アラートダイアログにしたい！）時は
var res = confirm(str1+"でいいですか？");
みたいに書いてみてください。resの部分にダイアログの評価が入ります。
/解説６
こんなところで今回は終わりです！
俺（達）の勉強はこれからだ！