【初心者向け/ITスクール41日】JSのイベント関数
はじめに
今日は、ITスクールに通った41日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。
41日目は、HTML/CSSで作成したWEBページをJavaScriptと連携して、イベントを処理する関数とJSPからHTMLから入力したデーターを処理する練習をしました。
その前に、簡単なJSの基礎文法も最後にも一度振り返ってみたいと思います。
ガンガンいきましょう！
JavaScript基礎文法3
オブジェクトリテラル(Object literal)
javaScriptでは、Objectをkey:valueのようにpropertyを組みあわせ、波格好の中で表現します。
let mouse = {
manufacture: "logitec",
price:32000,
}
propertyを取得するには２つの方法があります。
mouse.price // .
mouse.['price'] //['']
const languages = {
ja: "日本語",
en: "英語"
};
const myLang = "ja";
console.log(languages[myLang]); // => "日本語" []
以下のように属性を追加し、消すこともできます。
let wizard={
name:"harry potter",
gender:"male",
age:45,
}
//javaとは異なり、ない属性に対しても.を付けることができます！
wizard.school = hogwarts;
wizard.['class'] = 'gryffindor';
wizard.['girlfriend'] ='cho chang'
delete.girlfriend;
let wizard={
name:"harry potter",
gender:"male",
age:45,
school:"hogwarts",
class:"gryffindor",
magic:function(){
console.log(wingardiumlebiosa!)
}
データーだけではなく、関数をオブジェクトに宣言することもできます。
この場合は関数ではなく、メソッドになります。
function makeSpiderman(name,age){
return{
name,
age,
power:"spidersense"
}
)
以下のように、オブジェクトを生成する関数を作成することもできます。
javaと言えば、コンストラクタみたいな感じですね。
Array
JavaScriptのArrayはJavaとは異なり、lengthが動的で、データーを前からも後ろからも入れることができるようです。
list + stack + que みたいな万能配列で、Arrayもオブジェクトの一種なので、全てのデータータイプを入れることができます。
let jojo = ["jotaro",
3,
true,
{
words:"oraraoraoraora",
stand:"starplatinum",
},
function kuchiguse(){
console.log("yareyare")
}];
let days ["sat","tue","wed","thur","fri","sat2"]
days.pop();
days.shift();
days.push("sat");
days.push("sun");
days.unshift("mon");
Javaとは異なって、波格好ではなく、各括弧を入れることもポイントです！
EventHandling
簡単に説明しますと、静的なHTML、CSSの要素のattributeを変えることです。
先日、勉強してみたonclickもEventの一種で、ボタンを押すことでナイトモードで背景がブラックカラーになることなどもJavaScriptを通して具象したものです。
このようなもことをEventだといい、JavaScriptのfunction()を通して、Eventの種類、アニメーション効果などをカスタマイズすることをEventHandlingと呼びます。
onload()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function init(){
</script>
</head>
<body onload="init();">
<canvas id="cv" width="400px" height="400px"></canvas>
</body>
</html>
onload="init()"は、WEBページがロードされる際に<body>からinit() functionに定義されているイベントが行うという意味です。
const canvas = document.getElementById("cv");
const ctx = canvas.getContext("2d");
canvasは言葉どおり、スケッチブックみたいな空間を作るタグです。
init()はcanvas elementを呼び出し、getContext("2d")は呼び出すことでレンダリング(簡単に言えば視覚化する）ができる絵具をctxにリターンします。
これにより、ctxはペンをもつことができました。
ctx.beginPath(); //線を書くための命令語みたいなやつです。
ctx.moveTo(50,50); //最初の始まりのところです。x 50 y 50
ctx.lineTo(300,50); //moveToの座標からx 300, y 50に線を引きます。
50,50 300，50
ブラウザーにこのように動くようと命令するコードです。
ctx.lineWidth = 20; //線の太さ
ctx.strokeStyle = "pink" //線の色
ctx.stroke(); 指定したmoveTo,lineToに指定した座標に選を引く
これにより、WEBページがローディングされたとたん、線を引くイベントが行われます。
ctx.setLineDash([4,6]);
ctx.setLineDash([32,10,6,10]);
ctx.setLineDash([40,12,8,12,8,12]);
setLineDash([])関数から線の長さとgapをループすることも可能です。
円の場合、こちらのarc関数で書くことができます。
ctx.arc(100,100,50,0,2 * Math.PI);
x= 100 , y = 100, r=50という意味です。
0は最初の角度で、2*Math.PIと組み合わせば、完璧な円になります。
onclick()
https://gist.github.com/Palisanka/b9c03d21cdbb5e6e89d92dba6880297
座標を計算することで、クリックするところにイベントを起こすこともできます。
canvas.onclick = function(event){
const x = event.clientX - ctx.canvas.offsetLeft;
const y = event.clientY - ctx.canvas.offsetTop;
//クリックされたところに四角いが書かれます。
ctx.fillRect( x - 15, y - 15, 30, 30);
}
.clientXはクライアントが見ているブラウザー画面上の座標で、
.offsetLeftは親要素から距離(ｘ座標)を意味します。
xとyから15を引く理由はクリックしたところを基準にし、左上から30ｘ30の正方形が描かれるので、中心にするために-15,-15をしました。
canvas.addEventListener("mousedown", function(me){
mDown(me);
}, false);
canvas.addEventListener("mousemove", function(me){
mMove(me);
}, false);
canvas.addEventListener("mouseup", function(me){
mUp(me);
}, false);
canvas.addEventListener("mouseout", function(me){
mOut(me);
}, false);
addEventListenerというメソッドからeventをhandlingする関数を宣言することもできます。
mousedown : active and focus
mousedup : not click
mouseout : cursor is outside from element(この場合は、canvasのDOMです。）
その他にもsetInterval()のようにms単位でイベントを無限ループする関数も勉強しました。
Discussion