- 投稿日：2020-10-16T22:20:34+09:00
ボタンを押すとブラウザに画像を表示できる
ボタンを押すとブラウザに画像を表示できるようにする
canvas要素を指定してキャンバス上に表示したい画像を表示します。（別にcanvas要素以外の要素でも問題ありません）
canvas要素にid属性を指定して後でjavascriptで取得できるようにします。
2つのbutton要素にはonclick属性を指定して、ボタンをクリックしたときにそれぞれ関数が発火するようにします。appearメソッドを発火させたときは指定した画像を表示して、disappearメソッドを発火させたときは表示した画像を消去できるようにします。
img要素にはsrc属性に表示したい画像を設定して、id属性を指定して後で取得できるようにします。style属性には「display: none;」を指定してappear関数が発火するまで表示されないようにします。<body> <canvas id="canvas" width="500" height="500"></canvas><br> <button onclick="appear()">表示</button> <button onclick="disappear()">非表示</button> <img src="#" id="img1" style="display: none;"> </body>script要素内では、変数ctxを定義します。
appear関数内は定数canvasにbody内のcanvas要素を取得させ、変数ctxに代入してcanvas要素に画像を表示する準備をします。
変数imgにbody要素内のimg要素を取得させ、「drawImage( )」メソッドでキャンバスに画像を表示させます。
「drawImage(image, x, y, w, h)」メソッドはimageの部分に「img要素かvideo要素かcanvas要素」を指定できます。今回は静止画の表示なので「let img = document.getElementById("img1");」で代入したimgを指定します。xはキャンバスの左上隅からのx座標、yはキャンバス左上隅からのy座標、wは表示する画像の横幅、hは表示する画像の縦幅を指定します。
勘違いしやすいところですが、数学で学ぶ座標は中心から右に向かうとxが増え、上に向かうとyが増えますが、canvasを使うときはcanvasの左上隅が座標（0,0）で右に向かうとxが増えるのは同じですが、yは下に向かうと増えます。disappear関数内は1行だけですが、「clearRect( )」メソッドで表示した画像を消去しています。
「clearRect(x, y , w, h)」メソッドは指定した（x, y）座標からwで指定した横幅、hで指定した縦幅分、四角形の形でクリアすることができるメソッドです。<script> let ctx; function appear() { const canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); let img = document.getElementById("img1"); ctx.drawImage(img, 100, 100, 300, 300); } function disappear() { ctx.clearRect(0, 0, 500, 500); } </script>以下のコードをコピーして、ファイルに貼り付ければ試すことができます。（body内img要素のsrc属性の#はお持ちの画像に変更してください。drawImageメソッド内のw,hもお持ちの画像のアスペクト比に合わせて変更してください）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>image</title> <style> button { width: 100px; height: 30px; margin-right: 10px; } </style> <script> let ctx; function appear() { const canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); let img = document.getElementById("img1"); ctx.drawImage(img, 100, 100, 300, 300); } function disappear() { ctx.clearRect(0, 0, 500, 500); } </script> </head> <body> <canvas id="canvas" width="500" height="500"></canvas><br> <button onclick="appear()">表示</button> <button onclick="disappear()">非表示</button> <img src="#" id="img1" style="display: none;"> </body> </html>
- 投稿日：2020-10-16T20:53:19+09:00
【HTML】buttonタグでリンクを貼る方法
プログラミング勉強日記
2020年10月16日
HTMLでコードを書いてるときにbuttonタグでリンクを埋め込みたいと思ったのでその方法を備忘録としてまとめる。方法
buttonタグはクリックできるボタンを作るもので、基本的な書き方は以下のようになる。
基本的な書き方<button>表示させる内容</button>buttonタグを使ってリンクを貼る場合はonclick属性を以下のように追加する。
buttonタグでリンクを貼る方法<button onclick="loction.href='リンク先のURL'">表示させる内容</button>具体例<button onclick="location.href='https://qiita.com/mzmz__02'">Qiita マイページ(buttonタグで)</button>
他の方法でリンク先をbutton風にする
HTMLファイル<a href="https://qiita.com/mzmz__02">Qiita マイページ(aタグで)</a> <br><br> <a class="button" href="https://qiita.com/mzmz__02">Qiita マイページ(aタグでスタイルを使って)</a> <br><br> <input type="button" onclick="location.href='https://qiita.com/mzmz__02'" value="Qiita マイページ(input buttonで)"> <br><br> <button onclick="location.href='https://qiita.com/mzmz__02'">Qiita マイページ(buttonタグで)</button>CSSファイル.button { display: inline-block; border-style: solid; color: black; background-color: rgb(225, 224, 224); border-width:1px; border-color: darkgray; text-decoration: none; }
- 投稿日：2020-10-16T18:05:26+09:00
オセロの盤を作成する
オセロの盤の作り方
8✖️8のオセロの盤を作ります。まずはbodyタグ内を以下のように記述します。body要素内のonload属性はブラウザがページの読み込みを完了した際にダブルクォーテーション内の関数を実行してくれます。
table要素内にセルを並べていくので、id属性に「board」を指定します。
<body onload="init()"> <h2>オセロの盤</h2> <table id="board"></table> </body>head要素内のscript要素は以下のようになります。
変数boardにbody要素内のtable要素を取得させます。繰り返し文
「for(let r = 0; r < 8; r++) {
let tr = document.createElement("tr");
・
・
}
board.appendChild(tr);
}」
の部分でオセロの盤の行にあたるものを8つ作ります。
「createElement( )」メソッドは「document.createElement("要素名")」のかたちで引数に指定したHTML要素を生成することができます。
「appendChild( )」メソッドは
「親要素.appendChild(子要素)」のかたちで親要素の末尾に子要素を追加することができます。
今回は「tr」要素を8つ作り、table要素に追加しています。繰り返し文
「for(let d = 0; d < 8; d++) {
let td = document.createElement("td");
td.className = "ceil";
tr.appendChild(td);
}」
の部分はオセロの盤の列にあたるものを8つ作っています。
変数tdに生成したHTML要素である「td」要素を代入し、「tr.appendChild(td)」でtr要素一つ一つにtd要素を8つ追加しています。
「td.className = "ceil"」で作成したtd要素に「ceil」というclass属性を付与しています。classNameプロパティはclass属性の取得や設定に用いることができるプロパティです。<script> function init() { let board = document.getElementById("board"); for(let r = 0; r < 8; r++) { let tr = document.createElement("tr"); for(let d = 0; d < 8; d++) { let td = document.createElement("td"); td.className = "cell"; tr.appendChild(td); } board.appendChild(tr); } } </script>完成は以下になります。コピーしてhtmlファイルに貼り付けていただければ、ブラウザで表示できます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>board</title> <style> table { border: 3px solid black; border-collapse: collapse; } .cell { width: 50px; height: 50px; background-color: green; border: 1px solid black; } </style> <script> function init() { let board = document.getElementById("board"); for(let r = 0; r < 8; r++) { let tr = document.createElement("tr"); for(let d = 0; d < 8; d++) { let td = document.createElement("td"); td.className = "cell"; tr.appendChild(td); } board.appendChild(tr); } } </script> </head> <body onload="init()"> <h2>オセロの盤</h2> <table id="board"></table> </body> </html>
- 投稿日：2020-10-16T17:13:32+09:00
（自分用）スムーズにいかなかった点と解決方法②
グラデーション色について
CSS グラデーションは データ型で表現され、2つ以上の色の間の連続的な変>化から成る の特殊型です。グラデーションは3種類から選択することができます。線形linear (linear-gradient 関数によって生成)、放射radial (radial-gradient 関数によって生成)、扇形conic (conic-gradient 関数によって生成) の3種類です。 repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient の各関数によって、反復グラデーションを生成することもできます。
まずグラデーションは3種類から選択することができます。① 線形 ⇨ linear-gradient
② 放射 ⇨ radical-gradient
③ 扇形 ⇨ conic-gradient の３種類から選択できます。グラデーション色の使用方法
グラデーションの最も基本的な形を作成するために必要なことは、2つの色を指定することです。これらは色経由点color stopsと呼ばれています。少なくとも2つ必要ですが、必要なだけの数を設定することができます。
.simple-linear {
background: linear-gradient(blue, pink);
}
２種類以上の色を（）内に入力することでグラデーションが適用されます。グラデーション色の方向の設定方法
to right 左から右へ
.horizontal-gradient {
background: linear-gradient(to right, blue, pink);
}to bottom right 左上から右下へ
.diagonal-gradient {
background: linear-gradient(to bottom right, blue, pink);
}70deg 70度の位置へ
.angled-gradient {
background: linear-gradient(70deg, blue, pink);
}余談
自分の勉強用として投稿していますが、同じ問題に悩んだときに参考になれば幸いです。
- 投稿日：2020-10-16T16:48:08+09:00
【JavaScript】FizzBuzz問題を解いてみよう
今回作ったもの
テキストボックスに入力した整数の倍数をそれぞれFizzとBuzz、公倍数をFizzBuzzとして1~100の整数を順々に表示させます。
また、テキストボックスに整数値以外(文字列や小数値)が入力された場合は0以外の整数値を入力してくださいと表示されます。
コード解説
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>FizzBuzz問題</h1> <div class="r1"> <p class="p1">FizzNum:</p> <input type="text" value="" id="text1"> </div> <div class="r2"> <p class="p2">BuzzNum:</p> <input type="text" value="" id="text2"> </div> <p><input type="button" value="実行する" onclick="fizzbuzz()"></p> <div id="fizzbuzz-result"></div> <script> function fizzbuzz() { const fizzNum = Number(document.getElementById('text1').value); const buzzNum = Number(document.getElementById('text2').value); const fbArry = []; const fbText = []; const fbResult = document.getElementById('fizzbuzz-result'); if(!Number.isInteger(fizzNum) || !Number.isInteger(buzzNum) || fizzNum === 0 || buzzNum === 0) { fbResult.textContent = '整数値を入力してください'; return; } for(let i = 1; i < 101; i++){ if(i % fizzNum === 0 && i % buzzNum === 0) { fbArry.push('FizzBuzz' + i); } else if(i % fizzNum === 0) { fbArry.push('Fizz' + i); } else if(i % buzzNum === 0) { fbArry.push('Buzz' + i); } else { fbArry.push(i); } } for(const v of fbArry) { fbText.push(`<p>${v}</p>`); } const fbHTML = fbText.join(''); fbResult.innerHTML = fbHTML; } </script> </body> </html>まず、htmlでテキストボックスや、Fizz,Buzz,FizzBuzzを表示する
divタグを用意します。
JS本文では、
1. テキストボックスからfizzとbuzzの倍数となる数字を数値型で取得する
2. 1.で取得した値が整数値ではなかった場合に整数値を入力してくださいと表示させる処理(※整数値ではなかった場合、関数の処理はそこで終了)
3. 1~100の数値の中で公倍数のものをFizzBuzzという文字列とともに、fizzの倍数のものをFizzという文字列とともに、buzzの倍数のものをBuzzという文字列とともにfbArryに配列として追加
4. 3.のfbArryを<p></p>タグで囲ったものを配列としてfbTextに追加
5. 4.のfbTextをjoin('')で,(カンマ)を除いた文字列としてfbHTMLに代入
6. 最後にfbResult.innerHTML = fbHTMLでHTML本文に追加↑の流れになっています。
※コード本文追記(修正)
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>FizzBuzz問題</h1> <div class="r1"> <p class="p1">FizzNum:</p> <input type="text" value="" id="text1"> </div> <div class="r2"> <p class="p2">BuzzNum:</p> <input type="text" value="" id="text2"> </div> <p><input type="button" value="実行する" onclick="fizzbuzz()"></p> <div id="fizzbuzz-result"></div> <script> function fizzbuzz() { const fizzNum = Number(document.getElementById('text1').value); const buzzNum = Number(document.getElementById('text2').value); const fbArry = []; const fbResult = document.getElementById('fizzbuzz-result'); if(!Number.isInteger(fizzNum) || !Number.isInteger(buzzNum) || fizzNum === 0 || buzzNum === 0) { fbResult.textContent = '0以外の整数値を入力してください'; return; } for(let i = 1; i < 101; i++){ if(i % fizzNum === 0 && i % buzzNum === 0) { fbArry.push('FizzBuzz' + i); } else if(i % fizzNum === 0) { fbArry.push('Fizz' + i); } else if(i % buzzNum === 0) { fbArry.push('Buzz' + i); } else { fbArry.push(i); } } for(const v of fbArry) { const p = document.createElement('p'); p.textContent = v; fbResult.appendChild(p); } } </script> </body> </html>後から気づきましたが、最後の
for...ofの中でこう書いた方がすっきりするような気がしたのでこちらも載せておきます。
変更箇所の処理は、
for...ofの中でpタグを作り、pタグそれぞれのテキストにfbArryの値を代入して随時fbResultに追加する↑の流れになっています。
※ただ、コメントで教えていただいた通り、この書き方だとDOMの再レンダリングを繰り返してしまい処理が重くなるようです。お教えくださった方ありがとうございます！
感想
FizzBuzz問題を解くこと自体はすんなりいきましたが、テキストボックスに整数値以外が入力された時の処理で少し時間がかかりました。
Number関数のメソッドは微妙に返す値が違うので気を付けないとですね（笑）
- 投稿日：2020-10-16T14:54:32+09:00
サイコロの作り方
javascriptでのサイコロ作成
javascriptでサイコロを作る方法です。
<body> <button onclick="dice()">サイコロ</button> <p id="result"></p> </body>ボタンタグをクリックすると1〜6の数字がpタグに表示されます。
onclick属性をbutton要素に記述することでボタンをクリックしたときにjavascriptに作成したdice関数を起動させます。<head> <script> function dice() { let d = document.getElementById("result"); let r = Math.ceil(Math.random()*6); d.textContent = r; } </script> </head>dice関数には変数dとrを定義します。dにはサイコロを振った結果を表示するためにp要素に指定したid属性のresultを取得させます。
rには1〜6のどれかの数字がランダムに取得できるようにします。「Math.ceil( )」メソッドは引数に指定した値を小数点以下繰り上げしてくれるメソッドです。（仮に1.34という少数なら2に繰り上げてくれます。）
「Math.random( )」メソッドは0より大きく1より小さい値をランダムに返してくれるメソッドです。「Math.random( )*6」とする事で0より大きく6より小さい数値を返してくれます。
この2つのメソッドを組み合わせることで1〜6のランダムな数値を取得できるのでサイコロが完成します。
「d.textContent = r;」で1〜6の結果をid属性でresultを持つp要素に表示することができます。
修正
上記の内容に間違いがあったようなので、修正します。
「Math.random()」メソッドは0より大きく１より小さい値を返すのではなくて、【0以上1未満の値を返す】ようなので、script要素内は下記になります。<script> function dice() { let d = document.getElementById("result"); let r = Math.floor(Math.random()*6+1); d.textContent = r; } </script>「Math.floor()」メソッドは引数に指定した値を小数点以下切り捨てしてくれるメソッドです。「Math.floor」の引数内は1以上７未満になるので、1〜６の値をランダムに変数rに代入してくれます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>dice</title> <script> function dice() { let d = document.getElementById("result"); let r = Math.floor(Math.random()*6+1); d.textContent = r; } </script> </head> <body> <button onclick="dice()">サイコロ</button> <p id="result"></p> </body> </html>上記のコードをhtmlファイルにコピーすれば試すことができます。