JavaScript– category –

JavaScriptで検索ツールを作ってみよう JavaScriptで簡単な検索ツールを作ってみようと思い立ちました。 どういうものかというと、複数の商品やサービスがある中から特定の条件にマッチするものを抽出して表示させる。ECサイトなんかによくあるツールです...

JavaScriptで画像を読み込むパスの話、まずはhtmlからjsを読み込む こういう階層構造のケース sample.html jsファイルの読み込みは絶対パスでも相対パスでも構わない。Wordpressのような全ての記事（全ての階層にあるhtmlファイル）から同じjsファイルを読...

Forループの中で配列の要素を消そうとするとおかしくなる。 以下のjavascriptは、array1で定義した配列のうち、iphoneで始まる要素を削除しています。 なのでandroid-1と、android-2だけが配列に残って欲しいところですが結果は 結果 android-1,iphone-2,a...

クッキーに保存する方法と、クッキーを取り出す方法のおさらい クッキーに値を保存するには以下のように、window.documentオブジェクトのcookieプロパティに代入すると習った。 document.cookie = キー=値; 例えば、 こんな感じ。 これで キーが「hoge1」...

備忘録、調査、試したこと、解決策をメモ。（スマートな正解かどうかは不明） クラス名で取得した要素のclassをループ中にremoveするとおかしくなる HTMLでこのように記述して、 JavaScriptはこのように記述。 1行目でclass名enemyで要素を取ってきている...

5秒で消えちゃうので先に画面をお見せします。 See the Pen canvas-img-repeat by pghappy (@pghappy) on CodePen. ここから解説。 Canvas上に文字を表示して、5秒後にその文字を消す（ように見せるために再描画する）ということをやります。 まずHTML側で...

まず結論から。以下のコードで画像の繰り返しが出きた。 HTML側はcanvasを用意してid=bgの画像を非表示で1個用意。 JavaScript側は以下のようにした。drawImageを使ってない。。 全体像はこちら。 See the Pen img-click-event-test5 by pghappy (@pghappy...

なぜかcanvasに画像を描画してそれをaddEventListnerしてもイベントが取れないので色々試したときの備忘録。 画像タグにonclick属性でメソッドを設定する方法はOK HTML側で画像を用意して、onclick属性にpushed()というメソッドを入れておく。 JavaScript...

ブラウザ上でユーザーが何も操作をすることなく、イベントを発生させたい場合の話。 コード内で自分で作ったイベントを発生させる方法の備忘録。 JavaScriptでコード内でイベントを発生させる方法1 先にコードを書いておく。 HTMLは HTML側には「押して」...

JavaScriptで何もないところにtableを動的に作成する createElement(tagName)とすることでtagNameで指定されたHTML要素を作成することができる。 tableを作成したい場合はcreateElement("table")とやればよい。 HTMLのtableを構成するのは、table、thead（...

こちらも自分用の備忘録としてまとめたものです。 JavaScriptの基本的な配列の宣言方法 JavaScriptではいくつかの配列の宣言方法がある。C言語のように配列長を指定せずに生成することもできる。 JavaScriptで配列の要素にアクセスする方法 fruits[3]とか...

まずHTML側は とした。ページ読込時にinit関数を呼び出して、そこでキャンバスの設定を行う予定。キャンバスのサイズは250x250の黄色。 init関数は以下のように。 グローバル変数でctxと、intervalID を宣言。 translate(125,125)関数によって、座標軸を右...

キャンバスの状態を保存するsave()関数と、 保存した状態を復元するrestore()関数の使い方をやっていきます。 以下の順序でやります。 １．塗りつぶしの色と、座標系を保存して、 ２．塗りつぶしの色と、座標系を移動して、 ３．塗りつぶしの色と、座標系...

この記事の主題は「canvasのtranslateで座標の中心を移動させることができる」というこです。 ★例えば 描画領域の左上の座標は(0,0)となっているので、円を描くときに(0,0)を中心に円を描いてしまうと下図のようにおおかしなことになってしまう。・・・① ...

スタート　ストップ ソースコードは以下のようになった。 まずはHTML側。 スタートとストップボタンを表示。それぞれのボタンにonclickプロパティでstartTimer、stopTimer関数をセット。 canvasを囲うようにdivのwrapperをつけてcanvasのサイズを調整。dic...

構文は以下のとおり。 arc(x, y, radius, startAngle, endAngle, anticlockwise) x,yが円の中心 radiusは半径 startAngleが開始角度。X軸方向が0度。 endAngleが終了角度。 anticlockwiseは方向（デフォルトは時計回り） startAngleとendAngleに使う角度は...

canvasにマウスでお絵描きするJavaScript。これを実現する。 マウスの現在座標をリアルタイムで取得して表示する ①addEventListenerメソッドでmousemoveを指定、第2引数で関数を入れる e.pageXYを使うと、ページの左上を0,0とした座標が取れてしまうので、...

キーボードのキーが押されたとのイベントonkeydown、onkeyup キーが押されたときにイベントが発生するのはwindow.onkeydownプロパティかdocument.onkeydownプロパティに関数を入れてあげればよい。 またはアロー関数を使えば キーを押しっぱなしにするとこ...

JavaScriptの関数を関数に入れる不思議 JavaScriptでは、 ・関数を代入できる・関数を関数の引数に渡すことができる というのがあって個人的にはすごく不思議な感じがする。 functionを使うことで関数に名前を付けずに（無名関数を）、代入することもでき...

ページ読込時のonloadイベントハンドラー onloadプロパティはそのページが読み込まれたとき（HTMLや画像のリソースの読み込み後）に発生するイベント。 HTMLのbodyタグやimgタグに、 としたりして指定できる。 順番的にはimgのonloadが先で、ページ全体の...