このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

JavaScript

pjaxとは pjaxはpushStateとajaxを組み合わせた造語(pushState + ajax = pjax)となります。  pushStateはhtml5に新実装されたHistory APIのひとつで、javascriptからブラウザの履歴に直接挿し込む為に用意されているメ…

続きを読む

enchant.js http://enchantjs.com/ja/ 記事を書こう書こうと思いましたら、色々と時は過ぎていくものですね。 もう、すっかり話題のenchant.jsについて書いていこうかと思います。 enchant.jsとは A simple JavaSc…

続きを読む

乱数について考えてみました。そもそも乱数とはなにか? 乱数とは、サイコロの出目のように規則性がなく予測不能な数値のこと。 と、書かれているところが多いかと思います。 Javascriptのなど言語ではMath.random();で乱数を生成することができます。 Math.ran…

続きを読む

document.querySelector 概要 与えられたクラスの最初の要素を返します。 [code]element = document.querySelector( selectors );[/code] element は element オブジェクト…

続きを読む

何気にここらへんについては書いていない感じでしたので、ざっとではありますがまとめさせて頂きました。 まず、ここが変だよJavaScriptといったところで挙げられるのは 「厳密な意味でのクラスという概念がない。」ということではないでしょうか。 ここで言う「クラス」とはCSSが参照…

続きを読む

前回の、サーバーサイドJavascript 『node.js』 macにインストール・使用方法の続きとなります。 node.jsをインストール完了したかと思いますので、 更に便利に使う為、「npm(Node Package Manager)」を利用し、 「express」をインストー…

続きを読む

インストールしたまま、かれこれ数年経った気が。w node.jsについて触れてみました。 node.js node.jsとはなんぞや?? サーバーサイドjavascriptと言われるもので、サーバーサイドjavascriptは 文字通りWebアプリケーションのサーバーサイドプログ…

続きを読む

css3ではアニメーションを設定することが可能となっております。 アニメーションの設定の方法はkeyframeを設定したアニメ、transitionを設定したアニメなどがございます。 transitionアニメーションに関しては以下の記事を参照してください。 css3 trans…

続きを読む

最近、外はめっきり肌寒くなり、もう冬の気配さえも感じ始める今日この頃になってきましたね。 皆さんはどの様にclassを取得していますか? え?取得しない? そんな取得しない方々にも簡単に取得出来る世の中になりました。 今回はgetElementByClassNameとquery…

続きを読む

ども。 最近、外はめっきり肌寒くなり、もう冬の気配さえも感じ始める今日この頃になってきましたね。 皆さんはどの様にclassを取得していますか? え?取得しない? そんな取得しない方々にも簡単に取得出来る世の中になりました。 今回はclassListについてです。 jQue…

続きを読む

AjaxはJesseJamesGarrettが発表した用語で、「Asynchronous JavaScript + XML」(非同期的なJavaScript + XML)の略ですが、Ajax とはそもそもなんなのか。 ってところですよね。 一般的に使われているAjaxという言葉はあいま…

続きを読む

前回書いた、 ActionScript ランダム関数 Math.random() まとめ をそっくりそのまま、JavaScriptにしてまとめてみました。 TweenerのアニメーションはCSS3で実装しておりますので、webkit系ブラウザ(safari,GoogleChome)等…

続きを読む

JavaScriptを用いたCSSのスタイル変更は通常、 [code]element.style.backgroundColor = "#ff00000";[/code] などのように element.style.attribute = value; で変更が…

続きを読む

2011.09.06

JavaScript

JavaScript 配列

配列 いくつものデータをまとめて扱う場合、配列がよく使用されます。 配列とは複数の変数に番号を振って並べたものです。 配列に含まれるそれぞれの変数は要素と呼ばれます。 「配列aの5番目の要素は55です。」「配列cの4番目の要素は33。」等のように1つの名前で扱えるので利便性が…

続きを読む

JavaScript 代入と参照 「book1 = new Object()」を説明したときは 「変数book1にObjectオブジェクトを代入」ではなく 「Objectオブジェクトのインスタンスを参照する」となります。 「代入 ではなく 参照」 [code] <…

続きを読む

プロパティの作成 JavaScriptのオブジェクトには、自分の好きなプロパティを加えることができます。 Objectオブジェクトは、特別な機能のないオブジェクトで、いわば白紙のオブジェクトです。 new Object()としてコンストラクタを呼び出すと 変数book01はObje…

続きを読む

オブジェクトの簡単な考え方 オブジェクトとは 簡単にまとめると「データを持っていて、操作の対象となるモノ」 そのオブジェクトに変数を持たせると、オブジェクトのデータとなり オブジェクトに関数を持たせると、オブジェクトを操作できます。 オブジェクトに変数→プロパティ オブジェクト…

続きを読む

JavaScriptの実行中には、記述ミスやブラウザーの種類によってエラーが発生することがあります。 エラー処理(例外処理)を記述する方法とJavaScriptのデバッグ方法を紹介します。 例外処理 JavaScriptでエラーが発生する場合は以下のとおりです。 エラーの種類 ■…

続きを読む

関数の中ではローカル変数(局所的な変数)を利用することができます。 ローカル変数は関数の中だけで通用する変数のことをいいます。 ローカル変数を使用すると、同じ名前の変数を関数の内外で使い分けたり、複数の関数で使い分けたりできます。 ローカル変数を作るのは、変数の前にvarを付けて変数…

続きを読む

2011.09.04

JavaScript

JavaScript 戻り値

関数が返す結果を戻り値と言います。 戻り値を使うと、引数を元に計算を行い、その結果に応じ様々な値を返す関数を作ることができます。 関数の中で戻り値を記述するには、return文を使います。 return 戻り値; 例: [code]<script type=&qu…

続きを読む

2011.09.04

JavaScript

JavaScript 引数

【引数】 関数には引数(ひきすう)を渡すことができます。 引数とは、関数に与える数値や文字列などの情報となります。 同じ関数でも引数の値を変えることによって、動作を変えることが可能となります。 2を渡したら4を表示、4を渡したら8を表示する。のような感じになります。 関数の定義で…

続きを読む

2011.08.29

JavaScript

JavaScript Ajax

Ajax Ajaxって何ですか? てとこからだったりしますよね? Ajaxとは 2006年2月18日、 Adaptive Path社のJesse James Garrettって方が発表した用語で、 「Asynchronous JavaScript + XML」(非同期的なJav…

続きを読む

while(ホワイル)文の主な使用方法 while(条件式){ 繰り返し実行するスクリプト.... } [code] <script type="text/javascript"> num = 1; while(num <= 4){ …

続きを読む

JavaScriptを用いて、「ユーザーエージェント」の振り分けの方法です。 ユーザーエージェントとはwebブラウザーや検索エンジンのクローラーといった webサイトへアクセスするプログラムのことをいうのですが、 web制作では一般的に「webブラウザーがHTTP通信時にサーバーへ送…

続きを読む

2011.08.17

JavaScript

JavaScript swich文

Javascript swich文の説明です。 if文同様、条件分岐に使用します。 switch(変数){ case 値1: 変数が値1に等しい場合に実行されるスクリプト.... break; case 値2: 変数が値2に等しい場合に実行されるスクリプト.... br…

続きを読む

javascriptにおける条件式と論理値型の使用方法です。 f = 1; if(f) document.write("こんにちは"); ↑if(f)は「ifが真であれば」という意味です。 if(f != 0)と同じ意味になります。 [code][/code] nam…

続きを読む

JavaScriptの数値には無限と非数というものがあります。 無限 [code]<script type="text/javascript"> a = 50 / 0; document.write(a); </script>[/c…

続きを読む

2011.07.06

JavaScript

JavaScript 型

型とは数値や文字列のデータの種類のことを示す。 型の種類 名前 書き方(リテラル) typeof演算子の結果 数値型 1や2 10や3.14 number 文字列型 'こんにちは'や"ポチ"など string 論理値型 trueま…

続きを読む

16進数 10進数の16を10 256を100と表す。 10進数の10から15はA〜Fで表す。 javascriptでは数字に0xを付ける。 a = 0xb // 10進数の11 b = 0x1F //10進数の31 8進数 10進数の8が10, 64が100 …

続きを読む

[code]<a href="#" onclick="hoge(); ">ほげ</a>[/code] などのイベントハンドラを実行する際、 a要素のリンクの機能を実行させないようにreturn falseをa要素に付与しま…

続きを読む

エスケープ シーケンス 意味 ¥b バックスペース ¥t 水平タブ ¥n 改行 ¥v 垂直タブ ¥f 改ページ ¥r 復帰 ¥" 二重引用符 ¥' 一重引用符 ¥x〇〇 〇〇は、2桁の16進数のユニコード番号。例:¥xE9 → 'e ¥u…

続きを読む

2011.06.07

JavaScript

JavaScript window prompt

window promptで名前を表示する方法 ○○さん、こんにちは と表示 [code]<script type="text/javascript"> name = window.prompt("お名前は?","&qu…

続きを読む

カラーコード16進数を(#feef02) → 10進数(R 254,G 239,B 2)に変換するJavaScriptツールです。 ColorChage http://webcyou.com/demo/js/colorchanger/ 使い方は至って簡単! フォームに16新数のカラーコー…

続きを読む

iPhoneにはiOSというOSが使われており、 iOS3.0からiPhone内蔵webブラウザ「safari」上で動くjavascriptに GPSデータの取得機能が追加されています。 safariに搭載されているGPS関連機能はW3CのGeolocationAPIに準拠し、 …

続きを読む

JavaScript 演算子 %についてです。 %は余り算を求める演算子になります。 10%4とすれば戻り値は2になります。 3%3は0になります。 これを利用して1から100 までの4の倍数を求めます。   [code]<script type="text/j…

続きを読む

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。