「JavaScript/Global」の版間の差分

削除された内容 追加された内容
Ef3 (トーク | 投稿記録)
タグ: 2017年版ソースエディター
Ef3 (トーク | 投稿記録)
語尾の統一
タグ: 2017年版ソースエディター
1 行
{{Nav}}
== グローバルオブジェクト ==
'''グローバルオブジェクト'''は組込みオブジェクトでブラウザ環境では window オブジェクトです。
例えば alert() メソッドの実体は、window.alert() です。
DOMが扱う対象の document も window.document です。
31 行
</syntaxhighlight>
 
とすると、その結果が返ってくるきます
このことから、何らかのユーザーの入力があったときに、その結果をJavaScriptで扱える状態に変換可能である
例えば、次のコードはHTMLで作成した、選択ボックスの結果を、evalでJavaScriptに変換した結果を逐次代入しています
: <syntaxhighlight lang="html5">
<form id="enquete">
50 行
</script>
</syntaxhighlight>
(ただし入力紹介する結果が数値である場合は、後で紹介するparseIntやparseFloatの方が安全である)
 
さらに一歩推し進めて考えると、次の様に計算式等もeval関数は処理をして変数を参照できます
: <syntaxhighlight lang="javascript">
console.log( eval('100+100') ); // 200を表示
59 行
console.log( s ); // Hello,World!を表示
</syntaxhighlight>
ちなみにevalで呼び出せる変数の値は、グローバル変数(何処の関数のスコープにも属していない変数; 実体はグローバルオブジェクトのプロパティ)で無ければならないりません
 
ここまでを知っていると、eval関数はまた新たな使い道を考えることが出来ます
外部から取り出したテキストを評価して、データとして取り出す手法である
: <syntaxhighlight lang="javascript">
var s = '{ "住所":"東京都", "年齢":28, "性別":"男" }'; // 仮に外部から取り出したとしたデータ
70 行
 
Webページ等で外部と通信しながら、その結果を動的反映していく[[w:Ajax|Ajax]]という手法では、この手法を使って主にデータの取り出しを行っています。
この様に、JavaScriptのデータ形式を文字列化([[w:シリアライズ#直列化|シリアライズ]])して、データのフォーマットとして使われ出しています
この形式を[[JSON]](JavaScript Object Notation)と言う。
 
88 行
 
{{コラム|JSONオブジェクト|
JSONフォーマットの文字列をeval関数で評価することで不正なコードを実行してしまう危険を侵さないよう、[[JavaScript/JSON|JSON オブジェクト]] がJavaScriptに加わり JSON.parse() でJSON(であろうと期待される)文字列からJavaScriptのオブジェクトを JSON.stringify() でJavaScriptのオブジェクトからJSONフォーマットの文字列をそれぞれ得ることが出来るよになりました。
: <syntaxhighlight lang="js">
const str = JSON.stringify({ "住所":"東京都", "年齢":28, "性別":"男" });
112 行
console.log( parseInt('0o77') ); // 0を表示; 0oで始まる場合も10進数として解釈。
console.log( parseInt('0b10') ); // 0を表示; 0bで始まる場合も10進数として解釈。
console.log( parseInt('ZERO') ); // 例外にならず NaN を表示; 1文字も数値として解釈できないません
console.log( parseInt('3_14') ); // 3 を表示; _ を区切り文字とする記法には対応しないません
console.log( Number.parseInt === parseInt ); // Number.parseInt の別名。true を表示
</syntaxhighlight>
123 行
console.log( parseFloat('10') ); // 10が表示
console.log( parseFloat('10.00') ); // 10が表示
console.log( parseFloat('0x10') ); // 16進数としては評価されないません。最初の数字の「0」まで表示
console.log( parseFloat('10e+4') ); // 1000を表示
console.log( parseFloat('10E-3') ); // 0.01を表示
138 行
==== isNaN(number) ====
引数の値がNaN(Not-a-Number)であればtrueを、それ以外はfalseを表示。
Number.isNaN() とは動作が異なります
: <syntaxhighlight lang="javascript">
console.log( isNaN(NaN) ); // trueを表示
149 行
 
==== isFinite(number) ====
渡された値が有限数かどうかを判定しま(Finiteは英語で「有限な」)。
正あるいは負の Infinity か NaN か undefined の時 false を返し、それ以外は true を表示。
Number.isFinite() とは動作が異なります
: <syntaxhighlight lang="javascript">
console.log( isFinite(Infinity) ); // falseを表示
166 行
http://ja.wikipedia.org/wiki/ネットスケープコミュニケーションズ
 
このリンクは日本語文字列を含んでいるため、実際にはURLとして利用できないません
そのため、これを英語と記号のASCII文字列の範囲の文字列で一度変換を行う必要があります
これがURLエンコードと呼ばれる技術である
 
*[[w:URLエンコード|URLエンコード]]
175 行
 
実際にURLエンコードを行う関数にはencodeURIとencodeURIComponentの2つがあるが、これらは微妙に実装が違う。
実際に先ほどのURLをそれぞれの関数で変換してみます
 
: <syntaxhighlight lang="javascript">
189 行
http%3A%2F%2Fja.wikipedia.org%2Fwiki%2F%E3%83%8D%E3%83%83%E3%83%88%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%BA</syntaxhighlight>
 
日本語文字列以外にも、スラッシュ(/)等の一部の文字がencodeURIComponentでは変換されているのが分かります
これらの変換の結果は次の様な法則が共通しています
* 文字の中でも[0-9][a-z][A-Z]の文字列は変換されない
* 日本語等の非ASCII文字列は基本的に変換される
300 行
|}
 
少し図が見づらいかもしれないませんが、結果は一定の傾向があり、
encodeURIでは変換をされない文字は"#","/","&",":",";"等、URLで使用したり、CGIでパラメータを指定するときに特別な意味があるものである
 
なので、これらの使い分けは次の様に分けるのが一つの基準となります
* URLを変換するときはencodeURI
* データをcookieや外部のテキストとして出力するとき、CGIで入力された文字の安全な変換等はencodeURIComponent
 
このように変換した文字は、encodeURI、encodeURIComponentに対応するdecodeURI、decodeURIComponentという関数で元の文字列に戻すことができます
 
==== encodeURI(uri) ====
334 行
 
=== コンストラクタ ===
標準組込みオブジェクトのコンストラクタは、ほとんどグローバルオブジェクトのメソッドです<ref>TypedArrayの様な少数の例外はあります。</ref>。また多くは(newを伴わないずに)型変換関数としても振る舞います。
 
{{節スタブ}}