— javascript, tutorials — 1 min read
前回は無名関数をやりました。これは重要なので改めてもう一度説明します。 まずは書き方の違いだけ覚えてください。
1function hello(name) {2 console.log("Hello, " + name + " さん")3}
1(name) => {2 console.log("Hello, " + name + " さん")3}
1var hello = (name) => {2 console.log("Hello, " + name + " さん")3}4 5hello("まつだ")
今の所は、関数の定義方法がいくつかあるんだな程度に覚えて置いてください。 関数はこれ以外にもいくつか定義の仕方があります。
onclick
ondblclick
onmousemove
など、他にもたくさんのイベントがあります。
JavaScriptをブラウザで気軽に試せる便利なツールです、HTML/CSSも書けます。 https://jsfiddle.net/
JavaScriptのタブ、HTMLのタブ、CSSタブ、Resultタブ、 4つのタブが確認できますか?
右側にある Edit JSFiddle
というボタンからもコードが確認できます。
最初のうちは、ユーザーの操作をきっかけに発生すマウスやキーボード系のイベントを中心に見ておけば十分です。 入力の途中で、今までの総文字数をカウントしたり、クリックしたら見た目を何か変化させたりができます。
クリックしたら背景の色が変わるコードをイベントを使って書いてみましょう
背景が変わるDOM操作
1var func1 = () => {2 var body = document.getElementsByTagName("body")3 if(body[0].style.backgroundColor == "red"){4 body[0].style.backgroundColor = "blue"5 } else {6 body[0].style.backgroundColor = "red"7 }8}
画像タグ(img)をHTMLに一つ配置し、画像データが切り替わるコードを書いてみましょう。 DOMを取得するコードはバッチリですか?
1img.src = "https://..."
さあ、ここまで学習した内容でオセロゲームを作るための材料は「全て」揃いました。 次回からは5日かけてオセロを作って行きます!
まずはCanvasを使って、オセロの盤面を作ります。 オセロに必要な素材は、四角形と丸だけです。
どうでしょう、イメージがわきますか?
次回、お楽しみに!
次回はこちら JavaScript道場:15日目 / オセロ①