JavaScript
位置情報の取得 navigator.geolocation.getCurrentPosition(success, fail); 第一引数に位置情報が取得できた時に呼び出すfunction名を記述 第二引数には失敗した時に呼び出すfunction名を記述 success functionが呼び出された時には位置情報がパラメータと…
jQuery jQueeryを使うためにHTMLに下記のように記述 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> バージョンはその都度必要なものを使用 下記URL参照 https://code.jquery.com/ $( ) ... 要素をjQueryオブジェクトに変換してメソッドを使えるようにする ＊ $( )で取得した要素が複数ある場合、その全て…
this イベントが発生した要素を指す onclickイベントを使った例 'use strict'; //画像を配列に格納 const thumbs = document.querySelectorAll('.thumb'); thumbs.forEach(function(item, index){ //各画像がクリックされた時にイベントが発生 item.onclick …
配列 const array = [a, b, c]; オブジェクト const object = { id: 1, name: a} 配列-配列 const array = [ [a, b, c], [a, b, c] ] オブジェクト-オブジェクト const object = { id: {x: 1, y: 2}, name: {x: a, y: b} } 配列-オブジェクト const array = …
DOM操作 HTMLやCSSを書き換えたりする処理のこと 基本的に出力はDOM操作 HTMLの属性の読み取り 読み取り 取得した要素.属性 書き換え 取得した要素.属性 = 値; documentメソッド .querySelector documentの .querySelector メソッドは()内に書かれたCSSセレ…
定数 プロパティ 説明 .e ネイピア数(E。自然対数の底) .LN2 2の自然対数 .LN10 10の自然対数 .LOG2E 2を底とするEの対数 .LOG10E 10を底とするEの対数 .PI 円周率 SQRT1_2 1/2の平方根 .SQRT2 2の平方根 メソッド メソッド 説明 .abs(x) xの絶対値 .ceil(x)…
現在の日時の取得をする const 変数名 = new Date(); Dateオブジェクトのインスタンス化をする 日時を扱うメソッド Dateオブジェクトの変数名.メソッド メソッド 説明 getFullYear() 年を取得 getMonth() 月を取得(0~11の数値) getDate() 日を取得 getDay() …
setTimeout( ) 指定したミリ秒後にfunctionを実行する function function名(){ setTimeout(ミリ秒後に実行するfunction名, 1000); } padStart( ) ある文字列の数に文字数を揃えるメソッド String(データ).padStart(桁数, 先頭につける文字) String()でString…
formの入力内容を取得 submitボタン押下時の処理 submitボタンが押されたらaction属性のURLに入力内容が送信される。 onsubmitイベントはボタンが押された直後で入力内容が送信される前に発生する document.getElementById('id名').onsubmit = function(){ …
URIの各箇所の名前 下記のようなURIがあったとして各箇所の名称をみてみる https://aaa.com/intent/bbb?button_ccc=ref_src=src%5Etfw 箇所 名前 https スキーム aaa.com ホスト名 /intent/bbb リソース名 ?以降 クエリ クエリに半角英数以外の文字(日本語等…
tweetボタンの作成 「twitter ボタン」と検索しtwitterが公式で提供しているサイトを開く What would you like to embed?の下の空欄に#ハッシュタグをつけてツイートしたい内容を#をつけて入力する ボタンをカスタマイズするためset customization options …
while文 for文 ... 指定された回数だけ処理を繰り返し実行する while文 ... 指定した条件が真(true)のあいだ処理を繰り返し実行する while(条件式){ 実行する処理; 実行する処理; }; 繰り返し実行する処理が１つだけの場合、波括弧{}は省略可能 do while文 w…
文字を整数値で表す プログラムは全て2進数の整数値であるため文字を数値化することができる '文字'.charCodeAt(添字); テスト console.assert関数を使ってテストすることができる 第一引数にテストしたい式を、第二引数にはテストの結果が正しくなかった時…
正規表現 特殊文字を組み合わせて、特定の文字を取り出すことができる。 基本 文字 マッチする場所や説明 最短長一致 記述例 適応文字例 . 任意の一文字 . a * 直前の文字が0回以上繰り返す 最長 ho*ge hge,hoge,hoogeなど *? 直前の文字が0回以上繰り返す …
スコープ グローバルスコープ ... プログラムのどこからでもアクセス可能 ローカルスコープ ... 関数スコープとブロックスコープがある [ 関数スコープ ] functionごとに作られるスコープ。 関数スコープ内で変数宣言(var,let,const)をすると関数の外からは…
アニメーションは短い時間ごとに更新し続けることで表現 JavaScriptで回転し続けるアニメーションを作成 var example = document.getElementById('example'); var degree = 0; function rotateAnimation() { degree = degree + 6; degree = degree % 360; if…
オブジェクト オブジェクトはプロパティという、名前と値のセットを複数持てるJavaScriptの値。 var user = { name: '太郎', age: 18 }; {}の中に プロパティ名：値 と記述する。 複数ある場合は,コンマで区切る プロパティの値はオブジェクト.プロパティ名…
関数 fanctionと宣言をし、関数名を設定。その後ろに()を書き、{}の中に処理を書く。 例) function 変数名(引数) { 実行したい処理; return 戻り値; }; 関数の結果を戻り値という。JavaScriptでは戻り値を記述するためにreturn文を用いる。必要なければretur…
配列と添字 JavaScriptで配列は下記のように表現する。 var classes = ['A組', 'B組', 'C組', 'D組']; 変数に入れられる値であれば、何でも配列に入れることができる。 添字で中身の要素を取り出すには、変数[添字の数]; classes[0]; と入力すると"A組"と表…
[ for文 ] 繰り返し行う処理(ループ)をさせたい時に使用 for文の形は for (①初期化式; ②条件式; ③変化式) { ④繰り返し行いたい処理 } 処理の順序 ①初期化式→②条件式→④繰り返したい処理→③変化式→②条件式→④繰り返したい処理→③変化式→②条件式 例）１から1万まで…
[ 比較演算子 ] 値と値を比較することで真偽値にできる演算子(記号) 表現 入力例 結果 1は2以下 1 <= 2 true 1は2以上 1 >= 2 false 1は2未満 1 < 2 true 1は2より大きい 1 > 2 false 1は2と等しい 1 === 2 false 1は2と異なる 1 !== 2 true '1' === 1 // fa…
JavaScriptでの計算には値,算術演算子(数学記号),変数を使う [ 値 ] JavaScriptの値には数値,文字列,真偽値がある -- 数値 -- 整数だけでなく −9 や 3.14 などマイナスの値や小数点を含む数値も扱う またJavaScriptでは指数も扱える X × 10のY乗 は Xe+Yと表…
HTMLからJavaScriptを読み込む HTMLのbodyタグの中に script:src と入力しTabキーを押下すると <body> <script src=""></script> </body> "(ダブルクォート)の間にファイル名.jsを入れる ＊htmlファイル内でJavaScriptファイルを読み込む記述をする場所には注意が必要 <script src="ファイル名.js" charset="UTF-8"></script> 上記のようにUTF-8の宣言も…
