itpro-blogger

itpro-blogger

▼質問
htmlタグのxmlns属性って何？

▼回答
1999年にW3Cから勧告されたXML名前空間（以降「XMLNS」とする）。

XMLNSは、語彙（要素タイプ名、属性名）をURI(Uniform Resource Identifier)と

組み合わせる（修飾する）ことで、複数の語彙を混在させるメカニズムです。

例えば、全体の構成をXHTMLで記述しつつ、数式部分にはMathMLの語彙を、

グラフにはSVGの語彙を利用するという方法が考えられる。

■参考サイト
XML名前空間の簡単な説明
XHTMLのDTDと名前空間/XHTML基礎講座/Index/Web for senior 作成支援
URI

itpro-blogger

適当なホームページを表示させた後、ブラウザのアドレスバーに以下の内容を入力すると

表示している内容がブラウザ上で直接編集できるようになるらしい。

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

やってみるとなかなか凄くて面白いが・・・。

自分が使うことを想像すると、どんな時に使えるのか

直ぐには想像できないなぁ～。

いつからサーポートしていたのか調べてみた。

contentEditableは、IE5.5以降からサポートしているみたいだ。

Firefox3でもサポートされているみたいだ。

次のサイトにあるサンプルを動かしてみて、

どんな時に使うのかわかった気がする。

SCRAPBLOG : contenteditable 属性

かっこいい入力エリア（テキストエリアの代わり）の

ＷＥＢデザインにする時に使うのがベストだと感じた。

■参考サイト
WEBブラウザーに表示されている画面を直接編集する方法: sanonosa　システム管理コラム集

itpro-blogger

▼質問
canvasの幅と高さを次の様に取得しようとしたんだがうまくいかないんだ。

exGraph.getCanvas = function( id ) {
/* canvas要素のノードオブジェクト */
var el = document.getElementById( id );
this.canvas = el;
/* 2Dコンテキスト */
this.context_ = this.canvas.getContext( '2d' );
/* canvas要素の幅・高さ */
this.getWidth = function() { return this.canvas.width; };
this.getHeight = function() { return this.canvas.height; };
};

var obj = new exGraph.getCanvas( "sample" );
/* canvasエリアの幅・高さを取得する */
var width = obj.getWidth;

どうしてか教えてくれ！

▼回答
取得する時のコードが間違っているよ。

括弧が足りないんだ！

var width = obj.getWidth();

メソッドの括弧は省略できないんだ。

VBみたいに・・・。

itpro-blogger

▼質問
excanvas.jsのサンプルないかな？

▼回答
次のコードを参考にしてくれ！！



<html>
<head>
<title></title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
if ( typeof( exGraph ) == 'undefined' ) {
    exGraph = new Object();
}
exGraph.getCanvas = function( id ) {
   /* canvas要素のノードオブジェクト */
 var el = document.getElementById( id );
 this.canvas = el;
 /* 2Dコンテキスト */
 this.context_ = this.canvas.getContext( '2d' );
};
exGraph.getCanvas.prototype.draw = function() {
 /* 全てをクリアする */
    this.context_.clearRect();
    /* 矩形を描く */
 this.context_.strokeRect( 20, 15, 100, 100 );
 /* 塗りつぶした矩形を描く */
 this.context_.fillRect( 150, 15, 100, 100 );
 /* 塗りつぶした円を描く */
 this.context_.fillStyle = "rgba( 255, 0, 0, 0.1 )";
 this.context_.strokeStyle = "rgba( 255, 0, 0, 1 )";
 this.context_.beginPath();
 this.context_.arc( 320, 60, 50, 0, Math.PI*2, 1 );
 this.context_.fill();
 this.context_.stroke();
};
exGraph.getCanvas.prototype.drawLine = function( x1, y1, x2, y2, width, type, color ) {
 this.context_.strokeStyle = color;
 this.context_.lineWidth = width;
 this.context_.lineCap = "butt";  /* butt、round、square */
 if ( type == "solid" ) {
  this.context_.beginPath();
  this.context_.moveTo( x1, y1 );
  this.context_.lineTo( x2, y2 );
  this.context_.stroke();
 }
 else if ( type == "dashed" ) {
  var x = x1;
  var y = y1;
  while ( 1 ) {
   this.context_.beginPath();
   this.context_.moveTo( x, y );
   if ( y1 == y2 ) { x = x + width*4; }
   if ( x1 == x2 ) { y = y + width*4; }
   if ( x > x2 ) { x = x2; }
   if ( y > y2 ) { y = y2; }
   this.context_.lineTo( x, y );
   this.context_.stroke();
   if ( y1 == y2 ) { x = x + width*2; }
   if ( x1 == x2 ) { y = y + width*2; }
   if ( x > x2 ) { break; }
   if ( y > y2 ) { break; }
  }
 }
 else if ( type == "dotted" ) {
  this.context_.fillStyle = color;
  var x = x1;
  var y = y1;
  while ( 1 ) {
   this.context_.beginPath();
   this.context_.arc( x, y, width/2, 0, Math.PI*2, 0 );
   this.context_.fill();
   this.context_.stroke();
   if ( y1 == y2 ) { x = x + width*3; }
   if ( x1 == x2 ) { y = y + width*4; }
   if ( x > x2 ) { break; }
   if ( y > y2 ) { break; }
  }
 }
};
exGraph.getCanvas.prototype.drawText = function( x, y, text, font_size, font_family, color ) {
 var div = document.createElement( 'DIV' );
 div.appendChild( document.createTextNode( text ) );
 div.style.fontSize = font_size;
 div.style.fontFamily = font_family;
 div.style.color = color;
 div.style.margin = "0";
 div.style.padding = "0";
 div.style.position = "absolute";
 div.style.left = x.toString() + "px";
 div.style.top = y.toString() + "px";
 this.canvas.parentNode.appendChild( div );
};
window.onload = function() {
 var obj = new exGraph.getCanvas( "sample" );
 if( !obj ) { return; }
 obj.draw();
 /* 実線を描く */
 obj.drawLine( 20, 150, 350, 150, 1, "solid", "rgba( 255, 0, 0, 1 )" );
 obj.drawLine( 20, 210, 20, 280, 1, "solid", "rgba( 255, 0, 0, 1 )" );
 /* 破線を描く */
 obj.drawLine( 20, 170, 350, 170, 2, "dashed", "rgba( 255, 0, 0, 1 )" );
 obj.drawLine( 50, 210, 50, 280, 2, "dashed", "rgba( 255, 0, 0, 1 )" );
 /* 点線を描く */
 obj.drawLine( 20, 190, 350, 190, 2, "dotted", "rgba( 255, 0, 0, 1 )" );
 obj.drawLine( 80, 210, 80, 280, 2, "dotted", "rgba( 255, 0, 0, 1 )" );
 /* 文字列を描く */
 obj.drawText( 150, 230, "文字列", 10, "Arial,sans-serif", "#ff0000" );
 obj.drawText( 150, 250, "文字列", 20, "Arial,sans-serif", "#0000ff" );
};
</script>
</head>
<body>
<div><canvas width="400" height="300" id="sample" style="border:1px solid #4c4c4c;"></canvas></div>
</body>
</html>

itpro-blogger

▼質問
次の様に、透明にしたい領域を指定してもうまくその領域が透明にならずに

描画した全ての図形が消えるんだ！？

コンテキスト.clearRect( x座標, y座標, width（幅）, height（高さ） );

どうしてか教えてくれ！！

▼回答
IE（Internet Explorer）では、全てクリアされるのが正しいようだ。

そうやって使うらしいよ？！

・・・。

excanvas.jsの中身を見ても、そんなパラーメタを定義したメソッド

見つからないしね・・・。

itpro-blogger

▼質問
prototypeプロパティって何？

▼回答
prototypeプロパティは、クラスにメソッドを追加する時に使うんだよ！

クラス名.prototype.メソッド名 = 関数名;

function クラス名() {
this.変数名1 = "";
function 関数名1( パラメータ１ )
{
this.変数名1 = パラメータ１;
}
クラス名.prototype.メソッド名 = 関数名1;
return this;
}

var obj = new クラス名();
obj.メソッド名( パラメータ２ );
var 変数1 = obj.変数名1;

変数1が、パラメータ２となる。

・オブジェクトへのプロパティの追加
オブジェクト名.任意のプロパティ名 = 値;
var obj = new クラス名();
obj.新規プロパティ名 = "";
obj.["新規プロパティ名"] = "";

・オブジェクトへのメソッドの追加
オブジェクト名.任意のメソッド名 = 関数名;

function 関数名1( パラメータ１ )
{
this.変数名1 = パラメータ１;
}
var obj = new クラス名();
obj.新規メソッド名 = 関数名1;

■参考サイト
プロパティとメソッドについて

itpro-blogger

■参考サイト
ExplorerCanvas
[Think IT] 第1回：JavaScriptを使って描画するCanvasとは？ (2/3)
canvas で実現する高度なグラフィック表現 - WebOS Goodies
JavaScript で，クリックした座標に点を追加できるグラフチャートを描画する方法　（jQuery のプラグイン jquery.sparklines / jquery.flotの使い方) - 主に言語とシステム開発に関して
HTMLタグファレンス
Canvas チュートリアル - MDC

itpro-blogger

▼質問
font-sizeの単位は、pt（ポイント）?

それとも、px（ピクセル）?

素朴な疑問

どっちなんだ？

教えてくれ！！

▼回答
どちらでも指定できるよ！

■参考サイト
font-sizeにはptではなくpxを使おう - みずぴー日記

itpro-blogger

▼質問
textareaタグのフォントを指定したいんだ。

どうやったら指定できるか教えてくれ！！

▼回答
style属性を使うんだ。

次の様に指定すればよい！

style="font-size:サイズpx;"

itpro-blogger

▼質問
IE（Internet Explorer）でうまく動いていたホームページを

試しにFirefoxで表示したら

次のエラーが出るんだ。

「警告: getElementById() に空文字列が渡されました。」

どうしてか教えてくれ！

▼回答
getElementById(名前)で指定している名前の属性が

name属性じゃないか確認してみてくれ！！

IEでは、getElementByIdとname属性の

あいまいな組合せでも動くんだ。

name属性の時は、getElementsByNameを使うんだ。
←getElementByNameじゃなくてgetElementsByName
Elementにsが付くことに注意してくれ！

getElementByIdの時は、id属性を定義するんだ。

Firefoxでも動くようにするにはid属性とname属性を

定義しておいた方がいいぞ！！

itpro-blogger

▼質問
My.Application.UnhandledExceptionイベントって！

どんなことができるの？

▼回答
Windowsアプリケーションやコンソール・アプリケーションで

処理できなかった例外を、1カ所で処理することができるんだ。

■参考サイト
捕捉されなかった例外がスローされたことを知る: .NET Tips: C#, VB.NET, Visual Studio
＠IT：.NET TIPS 適切に処理されなかった例外をキャッチするには？ - C# VB.NET Windowsフォーム

itpro-blogger

▼質問
replaceの全置換ができないんだ。

どうしてなんだ？！

教えてくれ～！！

▼回答
replaceメソッドは、最初に見つかったものしか置換されないだ。

だから、次の様な関数を作成しておくと便利なんだ。

function replaceAll( s, sep1, sep2 ) {
return s.split(sep1).join(sep2);
}

使い方
出力文字列 = replaceAll( 入力文字列, 置換文字列, 置換後文字列 );

■参考サイト
JavaScript 文字列の置き換え - replace／replaceAll - JavaScript入門

itpro-blogger

▼質問
文字コードから文字に変換したいんだ。

どうやったらできるか教えてくれ。

▼回答
StringオブジェクトのfromCharCodeメソッドを使えばできるよ。

使い方は、こんな感じだ。

String.fromCharCode(文字コード)

カンマで区切れば、複数の文字コードも

指定することができる。

String.fromCharCode(文字コード,文字コード)

ひらがなの文字コードを文字列にした

サンプルだ。

参考にしてみてくれ！！

var str = "";
var scode = "あ".charCodeAt(0);
var ecode = "ん".charCodeAt(0);

for ( i = scode ; i <= ecode ; i++ ) {
var c = String.fromCharCode(i);
str += c;
}
alert(str);

itpro-blogger

▼質問
JavaScriptで入力ダイアログを使いたいんだ。

どうしたらできるか教えてくれ！

▼回答
windowオブジェクトにpromptというメソッドがあるよ。

使い方は次の様になるから、参考にしてくれ！！

var str = window.prompt( ダイアログに表示されるメッセージ, 初期値 );

itpro-blogger

itpro-blogger

▼質問
タイトル（title）を変更したいんだ。

どうしたらできるか教えてくれ！

▼回答
タイトル（title）を変更するには次の２つ方法がある。

top.document.title = "タイトル";
window.document.title = "タイトル";

フレームのタイトルを使いたい場合は、

フレームのHTMLファイル内に次のコードを書けばいい。

top.document.title = top.自フレーム名.document.title;

itpro-blogger

▼質問
クエリ文字列（QueryString）のパラメータを取得したいんだ。

どうしたらできるか教えてくれ！

▼回答
次のコード参考にしてくれ！



<script language="JavaScript" for="window" event="onload"> 
<!-- 
var QueryString = location.search.split("?");
if ( QueryString.length > 0 ) {
  alert( QueryString[1] );
}
// --> 
</script>

■参考サイト
JavaScript：URLからパラメータ取得したい - Insider.NET
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=7297&forum=7&2

itpro-blogger

@

`

€

À

à

!

A

a

¡

Á

á

"

B

b

‚

¢

Â

â

#

C

c

ƒ

£

Ã

ã

$

D

d

„

¤

Ä

ä

%

E

e

…

¥

Å

å

&

F

f

†

¦

Æ

æ

'

G

g

‡

§

Ç

ç

(

H

h

ˆ

¨

È

è

)

I

i

‰

©

É

é

*

J

j

Š

ª

Ê

ê

+

K

k

‹

«

Ë

ë

,

L

l

Œ

¬

Ì

ì

-

M

m

Í

í

.

N

n

Ž

®

Î

î

/

O

o

¯

Ï

ï

0

P

p

°

Ð

ð

1

Q

q

‘

±

Ñ

ñ

2

R

r

’

²

Ò

ò

3

S

s

“

³

Ó

ó

4

T

t

”

´

Ô

ô

5

U

u

•

µ

Õ

õ

6

V

v

–

¶

Ö

ö

7

W

w

—

·

×

÷

8

X

x

˜

¸

Ø

ø

9

Y

y

™

¹

Ù

ù

:

Z

z

š

º

Ú

ú

;

[

{

›

»

Û

û

<

\

|

œ

¼

Ü

ü

=

]

}

½

Ý

ý

>

^

~

ž

¾

Þ

þ

?

_

Ÿ

¿

ß

ÿ

itpro-blogger

▼質問
iframe（インラインフレーム）の内容を動的に操作したいんだ。

どうしたらできるか教えてくれ！！

▼回答
次のコードを参考にしてくれ！



    var iframe = document.getElementById(インラインフレームのID);
    if ( document.all ) {
      iframedoc = iframe.contentWindow.document;
    } else {
      iframedoc = iframe.contentDocument;
    }
    iframedoc.writeln("<body></body>");
    iframedoc.body.innerHTML = "テスト";

itpro-blogger

▼質問
JSON（JavaScript Object Notation）って何？

▼回答
テキストベースのデータフォーマット（軽量のデータ交換フォーマット）。

XMLとJSONで同じデータを双方独自の

フォーマット形式で記述できる。

●XMLの例
<ルート>
<要素１>要素①
<要素２>要素②

●JSONの例
{
"要素１":"要素①",
"要素２":"要素②"
}

■参考サイト
[Think IT] 第1回：JSONってなにもの？ (1/3)
http://www.thinkit.co.jp/article/70/1/
JSON入門 - RapidShare
http://d.hatena.ne.jp/brazil/20050915/1126709945

itpro-blogger

金曜日, 7月 31, 2009

[HTML]htmlタグのxmlns属性って何？

木曜日, 7月 09, 2009

[JavaScript]ブラウザに表示した内容を編集する方法

土曜日, 6月 27, 2009

[JavaScript]パラメータの無いメソッド

火曜日, 6月 23, 2009

[JavaScript]excanvas.jsのサンプル（矩形・円・破線・点線）

[JavaScript]clearRectメソッド（excanvas.js）

日曜日, 6月 21, 2009

[JavaScript]prototypeプロパティって何？

金曜日, 6月 19, 2009

[JavaScript]グラフ（excanvas.js）

金曜日, 6月 12, 2009

[HTML]font-sizeの単位はpt（ポイント）?px（ピクセル）?

[HTML]textareaタグのフォント指定

木曜日, 6月 11, 2009

[JavaScript]警告: getElementById() に空文字列が渡されました。

金曜日, 5月 29, 2009

[VB2005]My.Application.UnhandledExceptionイベント

日曜日, 5月 17, 2009

[JavaScript]replaceの全置換

水曜日, 5月 13, 2009

[JavaScript]文字コードから文字変換

木曜日, 4月 30, 2009

[JavaScript]入力ダイアログ（window.prompt）

土曜日, 3月 21, 2009

[SQL]テーブル名とフィールド名の取得

土曜日, 3月 14, 2009

［JavaScript］タイトル（title）を変更したい

金曜日, 3月 13, 2009

［JavaScript］クエリのパラメータ（QueryString）取得

金曜日, 3月 06, 2009

ＨＴＭＬ文字コード表

[JavaScript]インラインフレーム（iframe）の動的操作

[JavaScript]JSON（JavaScript Object Notation）って何？