読者です 読者をやめる 読者になる 読者になる

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Style要素を動的に扱う

htmlのheadタグ内に記述したstyleをJavascriptで操作するためのTipsです。

(Javascript)Canvasの基本 canvasのコピー

画像のトリミングと同じ方法でcanvasのコピーを行うことができます。drawImageメソッドのソースとして、canvasオブジェクトを渡してあげれば、コピーの対象として扱えるようになります。

(Javascript)Canvasの基本 画像を表示する

canvas内に画像を読み込んで表示するためにはdrawImageメソッドを使用します。引数の数によって3パターンの描画方法を使うことができます。

(Javascript)Canvasの基本 マスクをかける

クリッピングを使用すると、canvas内にマスクを適用させることができます。クリッピングされた部分だけが表示され、それ以外の部分は非表示になります。

(Javascript)Canvasの基本 グラデーションの設定

線や面の色を指定する際に、グラデーションを指定することができます。グラデーションはCanvasGradientオブジェクトで行います。

(Javascript)Canvasの基本 文字を描画する

canvasはテキストを画像として書き出すことができます。基本的な使用方法をメモしておきます。

(Javascript)Canvasの基本 円を描画する

canvasで円を描画する場合はarcメソッドを使用して描画する円の形を指定します。fillメソッドで塗りつぶした円を、strokeメソッドで線のみを描画します。

(Javascript)Canvasの基本 線を描画する

Canvasで線を描画する方法を1つにまとめておきます。線の描画は「直線」か「曲線」の2種類の方法があります。

(Javascript)Canvasの基本 矩形を描画する

描画の基本です。句形だけでも色々とプロパティがあるので、一応まとめてメモしておきます。

(Javascript)Canvasの基本 2次元のcanvasを作成する

基本中の基本です。Html内にcanvasを作成して、描画をするための方法をメモしておきます。

(Javascript)Geolocation オブジェクト

現在地情報を取得できるオブジェクトです。モバイルデバイスに限らず、PCのブラウザにも使用することが可能です。メソッドは3種類用意されています

(Javascript)HTTPXMLRequest についての覚書

Javascriptで非同期通信を行う場合の処理は、XMLHttpRequestオブジェクトを生成して、 open()メソッドで送信方法(POSTかGET)とURLを設定して、send()メソッドで送信します。

(DOM)イベントの登録 - addEventListener

スクリプト側から各ノードにイベントを登録できるaddEventListenerの使用法を自分用のメモとしてまとめておきます。

(Javascript)thisの違いについての覚書

Javascriptのthisは実行コンテキストによって定義が変わります。例外があるかもしれませんが、基本的な定義は以下のとおりなので、メモを残しておきます。

(Javascript)イベントハンドラを一括設定する場合の基本

リンクタグのonclickなどに処理を持たせる場合、document.linksで一括処理できますが、 細かい部分を忘れそうなのでその方法をメモとして残しておきます。

(Javascript)エラー詳細を表示するスクリプト

Javascriptはエラー発生時でも静かに終了するので、エラーに気が付かないことがまれにあります。 window.onerrorに関数を登録しておくとエラー発生時に登録した関数を自動で実行してくれるので、head内に以下の様な関数を入れておくとエラーが発生した際に詳…

(DOM)HTMLノードタイプについて

DOMの定義では、htmlタグはいつくかのノードタイプに分けられます。よく使いそうなタイプを以下に記述しておきます。ノード名の左の数値はelement.nodeTypeプロパティで取得できる値です。

(DOM)要素を追加するサンプル

DOMを使って要素を追加するサンプルです。子要素を追加する関数として作成してみました。ちなみに、innerHTMLを使えば簡単なのですが、DOMの仕様に沿った場合は以下のようになるらしいので、メモとして残しておきます。

(DOM)Document.Allの代わり

Document.Allは非推奨の機能です。といえども、これに変わる機能がDOMには用意されていないようで、ネットを探してもこれといった解決方法を見つけることが出来ませんでしたが、以下の記述で簡単に全エレメントを取得できることがわかったので、共有します。

(Javascript)クライアントサイドの各オブジェクトについてのメモ

クライアントサイドJavascriptには、ブラウザを操作するためのオブジェクトが用意されています。これらのオブジェクトについて気がついたことをメモしておきます。

(Javascript)アドレスの取得に関するプロパティ一覧

基本的なことなので検索すればいくらでも出てきますが、一応自分用にメモを残しておきます。 // ロケーションオブジェクトの取得 var address = window.location; // 各プロパティ var url = address.href; // URLを取得 var proto = address.protocol; // …