Javascript - oreference @ ウィキ

Javascriptのリファレンスです。

表記の仕方は絶賛悩み中。
候補としては

• 初出
• 実際のソースコード
• どういう時に使うのか？
• 使い方の例
• 分類

splice
ex) function.splice(x, y)

setTimeout(function, 時間)

clearTimeout(ID)

document.getElementById('ID').innerHTML = ""

alert('')

console.log(X)

.disabled

【世界時計】

• var time = document.getElementById(‘time’)

time.innerHTML = ‘'
という超有名コンボ

• getDay()

は日曜0 土曜6 とした数字を返してくれる

• setTimeout(関数, 待機時間)

関数 を 待機時間ごとに繰り返す

• 時間を二桁表示にする方法

取得した時間(hour min sec)が10未満だったら
hour = “0” + hour; みたいにすればおｋ

• if文内の処理が1行で終わるときは{}なくてもおｋ

• selectタグ と option

<select id=“ID”>
<option value=“値”>ラベル1
→ラベルのところが実際に表示されるところ

• selectでデフォルト表示にするには selected

• 時差をうまくやる

Tokyoを奇人として、ずらす

• ↓ここは理解できてないと思う
• selected indexでselectで選ばれているやつになる
• select要素にアクセスして、そのラベルもとってくる

var cityElement = document.getElementById("city");
var index = cityElement.selectedIndex;
var timeZone = cityElement.options[index].value;→cityElementつまり、id=“city”の中のoptionの中の[index]の値

• getTime()とかは全てミリ秒なので気をつける

【為替計算】
◯formタグがよくわかんねい

◯inputタグ
type=“number”
step=“0.1” 0.1刻みにできるってこと
value=“” デフォルトで表示されるやつ
size=“” フォントサイズかな
<input type=“number” id=“ID” value=“初期値” min=“最小値 max=“最大値” step=“刻み幅” >

◯button
valueはラベルとなる属性

◯関数と引数
引数の可能性を感じたがやっぱりよくわからない

◯引数の設定は “” じゃなくて ‘'

◯「ドルから円に両替」ボタンを押すと
onclick="exchange(‘toYen’)”
関数exchangeに引数toYenをもたせているってこと

で、関数exchange(exchangeType)としていることによって
引数をもたせている。

で、その後のif文で
引数が toYen のとき にしている。
※なんかうまく説明が書けないな。。。。

◯画像の差し替え

• 選択した国によって画像がかわる方法

まず、デフォルト画像に name=“ID” という属性を加える
で、変えたいときは
document.ID.src = “画像URL”;

function imgChange() {

	var imgArray = ["a.jpg","b.jpg","c.jpg", "d.jpg","e.jpg"];

var cnt = Math.floor(Math.random() * imgArray.length);
document.SP.src = imgArray[cnt];
}

【スライドショー】
border: solid #999999 1px;
これでグレーの囲いがつけられる

透明度は opacity

クラスは複数設定可能
<div class=“thumb select”>

◯アルゴリズムとか
配列に画像を5枚格納
サムネをクリックした時に関数発動
そのときに引数をつけている、つまり、
showImage(0)であれば
showimage(imageNo)という定義なので、
imageNo = 0
という状態で以降の処理が進むというわけ
で、
document.getElementById(“main”).src = imageArray[imageNo];
によって、mainのDOM要素のsrcプロパティとしてアクセスして、それをクリックした画像と切り替える
で、
thumbImages = document.getElementByClassName(“thumb”)
で、クラスthumbの全ての画像要素を取得して、
まずはselectクラスを消し去る
このときに、for文によって、すべてのサムネのselectを消し去る
thumbImage[i].classList.remove(“select”).
DOM要素.classLIst.remove(取り除くクラス名)
for文では、i<thumbImges.lengthを使うといいよね
DOM要素.classLIst.add(追加クラス名)

◯buttonタグ
<input type=“button”>
もあるけど
<button></button>
もある。
ラベルを自由に記述できるので、ラベルを画像にしたりできるというわけです。

◯タイマースタートとタイマーの停止

• setTimeout と clearTimeout
• setInterval と clearInterval

→違いは今のところ分からないが、どっちでもできる

!!!!!!!!!!!なんか動かないので、続きはそこから！！！！！！
バグが分かんなかったから、コピペした！

◯<audio>タグ
<audio src=“音楽ファイル” controls autoplay loop></audio>
controls 再生 一時停止 ボリュームとかを操作できるコントロールバーが追加される
autoplay ページを開くと勝手に再生
loop 繰り返し再生

◯audioで全てのブラウザに対応させる方法
<source>タグで複数のファイル形式を記述する

◯BGMの再生
再生 → 要素.play()
一時停止 → 要素.pause()
停止 → 要素.load()

◯input type=“range”
<input type=“range” id=“ID” value=“初期値” min=“最小値” max=“最大値” step=“間隔”>

◯ボタンを押せないようにする
要素.disabled = true; → 押せない
要素.disabled = false; → できる

このへんでもぐらたたきつくってた

【らくがき帳】

◯canvasタグ
<canvas id=“ID” width=“” height=“”></canvas>
透明なキャンパスが生成される

◯キャンパスの取得とコンテキストの取得

• これは決まり文句！！

canvasタグにIDをふっておいて
var canvas = document.getElemntById(‘main’);
var coctext = .getContext(“2d”);

◯線の色
コンテキスト.strokeStyle = 色

◯四角形の輪郭のみの描画
コンテキスト.strokeRect(x, y, w, h)
→(左上頂点のｘ座標 左上頂点のｙ座標 四角形の幅 四角形の高さ

)

◯塗りつぶしの設定
コンテキスト.fillStyle = 色

◯四角形の塗りつぶしの描画
コンテキスト.fillRect =(ｘ,ｙ,ｗ,ｈ)
x y w h の引数は四角形の輪郭描画と同じ引数
つまり、左上頂点(ｘ,ｙ)に(ｗ,ｈ)の大きさの四角形塗りつぶし

◯キャンバス上の図形は パス と呼ばれる線の集合からなる
strokeRectメソッド や fillRextメソッドは、パスを意識せずに四角形を描画できるが、基本的にキャンバス上の図形はパスを作成し、そのパスを描画するという手順になる。

• パスの作成

コンテキスト.beginPath();

• 始点の移動

コンテキスト.moveTo(x, y)
キャンバス上の座標(x,ｙ)が始点

• 線の作成

コンテキスト.lineTo(x, y)
現在の座標から指定の座標まで線(=パス)が惹かれ、指定の

座標に移動。
→つまり、このときの指定の座標が次状態での始点ということ
※ここまではパスを作成しただけで、描画はされていない！

• パスの描画

コンテキスト.stroke()
線の色はstrokeStyleプロパティで指定した色になる

◯パスを閉じる → 最後の座標と最初の座標を結ぶ
コンテキスト.closePath()

◯円の描画
コンテキスト.arc(x, y, radius startAngle, endAngle, anticlockwise)
円の中心座標(x,y)
円の半径
開始角度
終了角度
描画方向 trueは反時計回り falseは時計回り

◯マウス関連のイベント
onMouseDown マウスボタンが押されたら
onMouseMove マウスボタン移動したら
onMouseUp マウスボタンが離されたら
引数の event はeventオブジェクトと呼ばれ、イベントが発生した時のマウスカーソルの位置やイベントの種類などが格納されている

◯event.clientX
→ブラウザ上のX座標

◯canvasのときのお約束 キャンバスの取得とコンテキストの取得
var canvas = document.getElementById(“main”);
var context = canvas.getContext(“2d”)

◯書いた絵を別ウィンドウで表示
新しいウィンドウをを開いて、直接HTMLタグをぶちこむ
function showImage() {
var canvas = document.getElementById("main");
var imageWin = window.open("", "”); //新しいウィンドウを開く

imageWin.document.open();
imageWin.document.write('<html>');
imageWin.document.write('<head><title>Draw</title></head>');
imageWin.document.write('<body>');

imageWin.document.write('<img src="' + canvas.toDataURL() + '">');

imageWin.document.write('</body></html>');
imageWin.document.close();
}

◯キャンバスのデータをURLデータとして生成
キャンバス.toDataURL();

【付箋アプリ】

◯ドラッグドロップ関係
draggable属性→ドラッグを許可するかどうか
onDragStartイベント→ドラッグを開始した時に発生するイベント

◯DataTransferというインタフェース
ドラッグ時にはsetDataメソッドを使って渡したいデータを格納
setData(データ型, データ)
→setData(データ型)で取り出せる
event.preventDefault();
→通常のドラッグ操作(範囲指定など)を禁止する

◯placeholder属性
→入力フォームの説明文。ここになんとかを入力してください。みたいな。
→入力フォームに何も入力されていない時に指定された文をグレーで表示する。

◯radioボタンのchecked属性

◯radioボタンが選択されているかどうかは、ボタンのDOM要素アクセスして、checked属性がtrueかどうか調べればよい

◯DOM要素の作成
document.crateElement(タグ)

◯DOM要素の子要素を追加
親要素.appendchild(追加する子要素)

◯オブジェクト指向とは
情報 と 操作 をまとめて、ひとつのもの(=オブジェクト)として考えるプログラミング手法。
JSでは 情報 を格納する変数を プロパティ と呼び、 動作する関数 を メソッド と呼ぶ。また、プロパティ と メソッド をまとめて定義したものを クラス と呼ぶ。

付箋紙の持つ情報と操作は次のようになる
<情報(=プロパティ)>

• ID
• 付箋紙に表示するテキスト
• 付箋紙の色
• 配置座標(ｘ,ｙ)

<動作(=メソッド)>

• DOM要素を作成する
• 移動する。

◯プロトタイプとかクラスとコンストラクタとかぜんぜんわかんなーい