ウェブエンジニア
プログラミングスクールを実際に試してレポートしています。
javascriptプログラミング– tag –
-
JavaScriptで簡単な検索ツールを作った
JavaScriptで検索ツールを作ってみよう JavaScriptで簡単な検索ツールを作ってみようと思い立ちました。 どういうものかというと、複数の商品やサービスがある中から特定の条件にマッチするものを抽出して表示させる。ECサイトなんかによくあるツールです... -
JavaScriptとcssで読み込む画像の「相対パス」「絶対パス」
JavaScriptで画像を読み込むパスの話、まずはhtmlからjsを読み込む こういう階層構造のケース sample.html jsファイルの読み込みは絶対パスでも相対パスでも構わない。Wordpressのような全ての記事（全ての階層にあるhtmlファイル）から同じjsファイルを読... -
JavaScript Forループの中で要素を消すには？配列の後ろから消す
Forループの中で配列の要素を消そうとするとおかしくなる。 以下のjavascriptは、array1で定義した配列のうち、iphoneで始まる要素を削除しています。 なのでandroid-1と、android-2だけが配列に残って欲しいところですが結果は 結果 android-1,iphone-2,a... -
JavaScriptでクッキーを保存したときに空白スペースが自動で入るので消す方法
クッキーに保存する方法と、クッキーを取り出す方法のおさらい クッキーに値を保存するには以下のように、window.documentオブジェクトのcookieプロパティに代入すると習った。 document.cookie = キー=値; 例えば、 こんな感じ。 これで キーが「hoge1」... -
JavaScript クラス名で取得した要素をループ中にremoveするとおかしくなる
備忘録、調査、試したこと、解決策をメモ。（スマートな正解かどうかは不明） クラス名で取得した要素のclassをループ中にremoveするとおかしくなる HTMLでこのように記述して、 JavaScriptはこのように記述。 1行目でclass名enemyで要素を取ってきている... -
JavaScriptでCanvasの上に描画した表示を数秒後に消すsetTimeout
5秒で消えちゃうので先に画面をお見せします。 See the Pen canvas-img-repeat by pghappy (@pghappy) on CodePen. ここから解説。 Canvas上に文字を表示して、5秒後にその文字を消す（ように見せるために再描画する）ということをやります。 まずHTML側で... -
JavaScriptでCanvas内にdrawImageした画像をrepeatする
まず結論から。以下のコードで画像の繰り返しが出きた。 HTML側はcanvasを用意してid=bgの画像を非表示で1個用意。 JavaScript側は以下のようにした。drawImageを使ってない。。 全体像はこちら。 See the Pen img-click-event-test5 by pghappy (@pghappy... -
JavaScriptでCanvas内でdrawImageした画像を押したときのイベントを発生させる
なぜかcanvasに画像を描画してそれをaddEventListnerしてもイベントが取れないので色々試したときの備忘録。 画像タグにonclick属性でメソッドを設定する方法はOK HTML側で画像を用意して、onclick属性にpushed()というメソッドを入れておく。 JavaScript... -
JavaScriptでコード内でイベントを発生させる方法
ブラウザ上でユーザーが何も操作をすることなく、イベントを発生させたい場合の話。 コード内で自分で作ったイベントを発生させる方法の備忘録。 JavaScriptでコード内でイベントを発生させる方法1 先にコードを書いておく。 HTMLは HTML側には「押して」... -
JavaScriptでtableの作成・td値の取得・行追加・クリック行取得
JavaScriptで何もないところにtableを動的に作成する createElement(tagName)とすることでtagNameで指定されたHTML要素を作成することができる。 tableを作成したい場合はcreateElement("table")とやればよい。 HTMLのtableを構成するのは、table、thead（... -
JavaScriptの配列と連想配列の扱い方（宣言・要素・追加・削除）
こちらも自分用の備忘録としてまとめたものです。 JavaScriptの基本的な配列の宣言方法 JavaScriptではいくつかの配列の宣言方法がある。C言語のように配列長を指定せずに生成することもできる。 JavaScriptで配列の要素にアクセスする方法 fruits[3]とか... -
JavaScriptのCanvasとrotate()関数を使って動く時計を描画してみる
まずHTML側は とした。ページ読込時にinit関数を呼び出して、そこでキャンバスの設定を行う予定。キャンバスのサイズは250x250の黄色。 init関数は以下のように。 グローバル変数でctxと、intervalID を宣言。 translate(125,125)関数によって、座標軸を右... -
JavaScriptのCanvasのsave()とrestore()関数の使い方
キャンバスの状態を保存するsave()関数と、 保存した状態を復元するrestore()関数の使い方をやっていきます。 以下の順序でやります。 １．塗りつぶしの色と、座標系を保存して、 ２．塗りつぶしの色と、座標系を移動して、 ３．塗りつぶしの色と、座標系... -
JavaScriptのCanvasのtranslate()関数の使い方と意味
この記事の主題は「canvasのtranslateで座標の中心を移動させることができる」というこです。 ★例えば 描画領域の左上の座標は(0,0)となっているので、円を描くときに(0,0)を中心に円を描いてしまうと下図のようにおおかしなことになってしまう。・・・① ... -
JavaScriptでサイコロ転がし – Canvasに画像（DrawImage）をランダム表示
スタート ストップ ソースコードは以下のようになった。 まずはHTML側。 スタートとストップボタンを表示。それぞれのボタンにonclickプロパティでstartTimer、stopTimer関数をセット。 canvasを囲うようにdivのwrapperをつけてcanvasのサイズを調整。dic... -
スマホの画面サイズに合わせて、canvasサイズを設定する
スマホの画面サイズに合わせて、canvasのサイズを設定する HTML側は以下のようにする。canvasタグをdivタグ（id="wrapper"の）で囲っておく。 divタグはCSSで幅高さ100%にしておき、Canvasのサイズは最初のページ読み込み時に、JavaScript側でdivタグの幅... -
JavaScriptで、canvasに円弧や円を描くのと、角度（ラジアンの計算）
構文は以下のとおり。 arc(x, y, radius, startAngle, endAngle, anticlockwise) x,yが円の中心 radiusは半径 startAngleが開始角度。X軸方向が0度。 endAngleが終了角度。 anticlockwiseは方向（デフォルトは時計回り） startAngleとendAngleに使う角度は... -
JavaScriptのマウスのイベントmousedown、mousemove、mouseup
canvasにマウスでお絵描きするJavaScript。これを実現する。 マウスの現在座標をリアルタイムで取得して表示する ①addEventListenerメソッドでmousemoveを指定、第2引数で関数を入れる e.pageXYを使うと、ページの左上を0,0とした座標が取れてしまうので、... -
JavaScriptでイベントonkeydown、onkeyup、onchange
キーボードのキーが押されたとのイベントonkeydown、onkeyup キーが押されたときにイベントが発生するのはwindow.onkeydownプロパティかdocument.onkeydownプロパティに関数を入れてあげればよい。 またはアロー関数を使えば キーを押しっぱなしにするとこ... -
JavaScriptで関数に関数を入れるコールバック関数の整理
JavaScriptの関数を関数に入れる不思議 JavaScriptでは、 ・関数を代入できる・関数を関数の引数に渡すことができる というのがあって個人的にはすごく不思議な感じがする。 functionを使うことで関数に名前を付けずに（無名関数を）、代入することもでき...
12