第12回【JavaScriptのAPI・DOM】


まずは動画を見てくださいね!
JavaScriptの基礎講座はこれで全部です!

いろいろな素材について

まずmozillaのページ、JavaScriptの解説はこちら。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Introduction
とても読む気にはなれませんw
ただ困った時は一読を・・・。
というか、本気でJavaScriptを極めようって時は全部読みましょうw
私は・・・無理ですね!

いずれにしても、何かやりたい時はググりましょう!
いろんな方がいろんな事を解説してくれてます。
ありがたい。。。



ビルトインオブジェクト

変数はオブジェクトとして扱って、そのオブジェクトのメソッドが使えます。
???が付くと思いますw
まずはこれを見てください。
	let x= 1.65432;
	let y;
	y = x.fixed(2);
これは、xを小数点以下2桁に四捨五入してyに入れるというプログラムです。
yには1.65が入ります。
	let x= 1.65432;
	let y;
	y = x.fixed(1);
こうすると、小数点以下1桁にして、yは1.7になります。

これは、数値を一時的にNumber型というオブジェクトにしてそのメソッドfixed()を利用しています。
ただ詳しい内容を知ることは、今の所ありません。
ただこういう便利な機能があるという事を覚えておきましょう。
「JavaScript 小数点 四捨五入」などとググると見つかるでしょう。
※Math.floorばっかり出てくるかもしれませんが。。。

同様に例えば、
	let x= "abcdefg";
	let y;
	y = x.length;
yにはxの文字数の7が入ります。
これは、文字列を一時的にString型というオブジェクトにしてそのプロパティlengthを利用しています。
この様に数値にしても文字列にしても、色々なメソッドやプロパティが使えるのですが、その都度調べれば大丈夫です!
「JavaScript 文字数を数える」などとググると見つかるでしょうw

数値、文字列以外にも配列用のArray型などもあります。


Date型、Math型について

これもビルトインオブジェクトですが、よく使うオブジェクトです。
Date型は日付の取得や操作ができます。
	let now = new Date();
	document.write( now.getFullYear() + "<BR>");
これで、今現在の年(西暦)が表示されます。
日付に関しては「JavaScript 日付」でググれば良いでしょう。
Math型は数値、計算に関する色々なメソッドがあります
	let y=1.56;
	x= Math.floor(y);
yの小数点以下を切り捨てて、xは1になります。
	let y=1.56;
	x= Math.round(y);
yの小数点以下を四捨五入して、xは2になります。
	x= Math.random();
xは0から0.99999...までの乱数が入ります。
1未満なので実際に使う時は必要なだけ掛け算をして使いましょう。
	x= Math.floor(Math.random()*10)+1;
これで1~10の乱数が取得できます。
もちろん「JavaScript 乱数」ですぐ出てきますし。



APIとDOMについて

APIとはApplication Programming Interfaceの略で、「どうぞ使ってください」と用意されている素材(オブジェクト)だと考えてください。
最初のMozillaのページを見てもわかりますが、もの凄い量のAPIが存在しています。
サードパーティ(TwitterとかGoogleとか)から提供されるAPIもあるので、とても覚えられる量ではありませんw。
当然、なんか欲しい機能があったら・・・まずはググりましょう!

APIの中でもJavaScriptはDOMというオブジェクトの扱いに長けています。
DOMとはDocument Object Modelの略で、WEBページ・・・つまりHTMLの要素へ簡単にアクセスでき要素の値などを操作しまくれるという代物です。
いままで使っていた、document.write()というメソッドもDOMを利用した物です。

	document.title = "タイトル";
これでWEBページのタイトルが変更できます。

<html>
	<DIV id="abc">ああああ</DIV>
</html>
	
	let elm= document.getElementById("abc");
	elm.innerText = "いいいい";
abcというidの付いた要素(上記ではDIVの一つ)から要素をelmに取得して、中身のテキストを"いいいい"に書き換えています。

	elm.innerText = "いいいい";
	elm.style.position = "absolute";
	elm.style.top  = "100px";
	elm.style.left = "300px";
さらに、DIVの位置を変更してます。
WEBプログラマは、このDOMをたくさん使って、かっこいいWEBサイトを作り上げています。



CANVASについて

<html>
	<canvas id="can">ああああ</canvas>
</html>
	
	let can = document.getElementById("can");
	let con = can.getContext("2d");
先ほどのdiv要素と同じ様に、HTMLのcanvas要素からidを使って要素を取得して、さらにcontextを取得すると、ここに色々とお絵描き等ができるようになります。
これを利用してグラフィカルなページや、ゲームなどが作れます!

	let can = document.getElementById("can");
	let con = can.getContext("2d");
	con.fillStyle="red";
	con.fillRect(0,0,100,100);
	con.fillStyle="rgba(0,0,255,0.7);";
	con.fillRect(50,50,100,100);
	con.fillStyle="rgba(0,255,0,0.7);";
	con.beginPath();
	con.arc(150,150,50,Math.PI*50/180,Math.PI*300/180);
	con.fill();
これで赤い四角、青い半透明の四角、緑の半透明の欠けた丸などを描いています。
こんなプログラムもググりながら書いています!



イベントについて

マウスをクリックしたり、マウスが動いたり、キーボードを押したり、ページの読み込み終了時だったり、色んな事でイベントが起きます。
そのイベントを受取る事ができます。

先程作った「いいいい」のDIVで、マウスのクリックを受け取ります。
	elm.onclick = function(e)
	{
		let x = (Math.random()*400).toFixed();
		let y = (Math.random()*400).toFixed();
		elm.style.left =x + "px";
		elm.style.top  =y + "px";
	}
これで、「いいいい」がクリックされた時にランダムで適当な位置に動きます。

	can.onmousemove = function(e)
	{
		let x = (Math.random()*400).toFixed();
		let y = (Math.random()*400).toFixed();
		can.style.position = "absolute";
		can.style.left =x + "px";
		can.style.top  =y + "px";
	}
こちらはキャンバスの上にマウスを持っていくと、キャンバスが適当な位置に動きます。

この様に、ビルドインオブジェクト、API/DOM、canvas、イベントなどを利用することで様々な事が出来るようになります。
これは完全に覚えていなくても、こういうことがしたいと思ったら、検索すればOKです!


これでJavaScriptの基礎は終わりです!
(テトリス編に続く)



これまでのソースコードです。
コピペするより、手入力をオススメいたします!
<!DOCTYPE html>
<HTML>
<body style="font-size:40px;">
<canvas width=300 height=300 id="ccc"></canvas>
<div id="aaa">ああああ</div>
<script>
	

// クラス ... オブジェクト指向

class parson
{
	constructor ( name , height , weight )
	{
		this.name   = name;
		this.height = height;
		this.weight = weight;
	}
	
	printBMI()
	{
		let bmi = this.weight / (this.height/100)**2 ;
		document.write(this.name + "、おはよう<BR>");
		document.write("身長は"+this.height+ "cm<BR>");
		document.write("体重は"+this.weight+ "kg<BR>");
		document.write("あなたのBMIは"+ bmi.toFixed(1) +"です。<BR>");
		document.write(this.name + "、さようなら<BR>");
		document.write("<BR>");
	}
	
	eat( val )
	{
		document.write(this.name + "はご飯を食べる<BR>");
		this.weight += val;
		document.write(val + "kg体重が増えました<BR>");
		document.write("<BR>");
	}
	
	run( val )
	{
		document.write(this.name + "は凄い走った<BR>");
		this.weight -= val;
		document.write(val + "kg体重が減りました<BR>");
		document.write("<BR>");
	}
}

let tanaka = new parson("田中",187,58);
tanaka.printBMI();
	
	
	// Number, String , Boolean , Array 
	
	let x=1;
	let s="いい";
	
	// Date , Math
	
	let now = new Date();
	document.write(now.getFullYear() + "<BR>");
	
	let y=1.56;
	y = 1+Math.floor( Math.random()*100 );
	document.write(y + "<BR>");
	
	
	// API DOM
	
	document.title = "タイトル";
	let elm = document.getElementById("aaa");
	elm.innerText ="いいいい";
	elm.style.position ="absolute";
	elm.style.top  = "100px";
	elm.style.left = "300px";
	
	// canvas HTML5から
	let can = document.getElementById("ccc");
	let con = can.getContext("2d");
	
	con.fillStyle="red";
	con.fillRect(0,0,100,100);
	con.fillStyle="rgba(0,0,255,0.7)";
	con.fillRect(50,50,100,100);
	con.fillStyle="rgba(0,255,0,0.7)";
	con.beginPath();
	con.arc(150,150,50,Math.PI*50/180,Math.PI*300/180);
	con.fill();
	
	
	// イベント
	
	elm.onclick = function(e)
	{
		let x = (Math.random()*400).toFixed();
		let y = (Math.random()*400).toFixed();
		elm.style.left =x +"px";
		elm.style.top  =y +"px";
	}
	can.onmousemove = function(e)
	{
		let x = (Math.random()*400).toFixed();
		let y = (Math.random()*400).toFixed();
		can.style.position ="absolute";
		can.style.left =x +"px";
		can.style.top  =y +"px";
	}
	
</script>
</body>
</HTML>




akichon/あきちょん
Youtubeでプログラミング講座やってるゲーム好きの(元?)プログラマ...
>>open profile...
■Twitter始めました
https://twitter.com/ak1chon
■Youtubeチャンネルはこちら
akichon(Youtube)