Wikibooks

「JavaScript/Global」の版間の差分

履歴の双方向閲覧
← 古い編集次の差分 →
削除された内容 追加された内容
ビジュアルウィキテキスト
Ef3 (トーク | 投稿記録)
7,120 回編集
Ef3 (トーク | 投稿記録)
7,120 回編集
→‎グローバル関数: document.getElementById -> document.querySelector
28 行
文字列を評価してその結果を返す。
 
eval関数の意味は、この一言で解説可能な単一の関数であるが、実際には様々な役割があり非常に重要なのでさらに解説を行う。
 
eval関数は文字列をJavaScriptとして評価して、その結果を返す。
34 行
 
<syntaxhighlight lang="javascript">
const str = "100";
varconst v = eval('100'str); // 数字型の値100をが、変数 v に代入される
</syntaxhighlight>
 
などとすると、その結果が返ってくる。
このことから、何らかのユーザーの入力があったときに、その結果をJavaScriptで扱うことができえる状態に変換可能である。
例えば、次のコードはHTMLで作成した、選択ボックスの結果を、evalでJavaScriptに変換した結果を逐次代入している。
<syntaxhighlight lang="html5">
48 ⟶ 49行目:
</form>
<script>
document.getElementByIdquerySelector('#yes-no').onchange = function(e) => {▼
var ret = true;
const target = e.currentTarget;
▲document.getElementById('yes-no').onchange = function(e){
retconst str = eval(thistarget[thistarget.selectedIndex].value);
const stat = eval();
console.log(stat);
}
</script>
</syntaxhighlight>
 
(ただし入力紹介する結果が数値である場合は、後で紹介するparseIntやparseFloatの方が安全である)
 
さらに一歩推し進めて考えると、次の様に、計算式等もeval関数は処理をして、変数を呼び出す事も出来参照できる。
<syntaxhighlight lang="javascript">
console.log( eval('100+100') ); // 200を表示
64 ⟶ 66行目:
console.log( s ); // Hello,World!を表示
</syntaxhighlight>
ちなみにevalで呼び出せる変数の値は、グローバル変数(何処の関数のスコープにも属していない変数; 実体はグローバルオブジェクトのプロパティ)で無ければならないのを知っておくべきである。▼
 
▲ちなみにevalで呼び出せる変数の値は、グローバル変数(何処の関数のスコープにも属していない変数; 実体はグローバルオブジェクトのプロパティ)で無ければならないのを知っておくべきである。
 
ここまでを知っていると、eval関数はまた新たな使い道を考えることが出来る。
75 ⟶ 76行目:
</syntaxhighlight>
 
Webページ等で、外部と通信しながら、その結果を動的反映していく[[w:Ajax|Ajax]]という手法では、この手法を使って主にデータの取り出しを行っているます。
この様に、JavaScriptのデータ形式を文字列化（[[w:シリアライズ#直列化|シリアライズ]]）して、データのフォーマットとして使われ出している。
この形式をJSON(JavaScript Object Notation)と言う。
 
実際には、コントロールされていない外部から文字列を受け取る場合には正しいJSONフォーマットではなく評価に失敗することがありうるため、エラーチェックのためにtry～catch文で囲うのがある。
 
<syntaxhighlight lang="javascript">
var o;
try {
o = eval('('+s+')');
} catch(e){
89 ⟶ 90行目:
}
</syntaxhighlight>
 
近年の流れとして、一部のJavaScript使用環境では、このJSON形式のデータを設定ファイルの保存形式等として使う流れも存在している。
その際の拡張子としては、txt や js 等も使われたが、json で標準化された（MIME-Typeは application/json）。
 
; [[w:JavaScript Object Notation|JavaScript Object Notation]]
 
98 ⟶ 95行目:
 
{{コラム|JSONオブジェクト|
JSONフォーマットの文字列をeval関数で評価することで不正なコードを実行してしまう危険を侵さぬよう、[[JavaScript/JSON|JSON オブジェクト]] がJavaScriptに加わり、 JSON.parse() でJSON（であろう）文字列からJavaScriptのオブジェクトを、 JSON.stringify() でJavaScriptのオブジェクトからJSONフォーマットの文字列をそれぞれ得ることが出来るよになりました。
<source lang="js">
const str = JSON.stringify({ "住所":"東京都", "年齢":28, "性別":"男" });
console.log(str); // "{\"住所\":\"東京都\",\"年齢\":28,\"性別\":\"男\"}"
const obj = JSON.parse(str);
console.log(obj); // {"住所":"東京都","年齢":28,"性別":"男"}
</source>
}}
 
=== 数値処理関数 ===
グローバルオブジェクトのメソッドは、いくつかの数値処理関数を標準で用意しているます。
これらは、Numberオブジェクトのメソッドの別名である場合と、機能的に近いものの挙動が違うものとがあるので利用にあたっては注意が必要であるす。
 
==== parseInt(string , radix) ====
与えられた文字列を、先頭から解釈して整数に変換しまする。第2引数では、何進法とみなして変換を行うのかを指定しまする。
規格上、第2引数は省略した場合 0x で始まる16進法表記以外は10進法とみなして自動で変換を行っているます。
Number.parseInt()の別名。
<syntaxhighlight lang="javascript">
122 ⟶ 125行目:
 
==== parseFloat(string) ====
与えられた文字列を、JavaScriptのNumber型のオブジェクトに変換しまする。
Number.parseFloat() の別名。
<syntaxhighlight lang="javascript">
197 ⟶ 200行目:
* 文字の中でも[0-9][a-z][A-Z]の文字列は変換されない
* 日本語等の非ASCII文字列は基本的に変換される
なので、その外の記号文字列は変換結果の違うものなのでこれらを比較しまする。
{| class="wikitable"
|- align="left"
314 ⟶ 317行目:
 
==== encodeURI(uri) ====
URL(URI)として有効な範囲で、文字列をURLエンコードしまする。
<source lang="javascript">
// 変換して「JavaScript%E6%A8%99%E6%BA%96%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA」
320 ⟶ 323行目:
 
==== encodeURIComponent(uriComponent) ====
文字列をURLエンコードしまする。
<source lang="javascript">
// 変換して「JavaScript%E6%A8%99%E6%BA%96%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA」
336 ⟶ 339行目:
// 「JavaScript標準ライブラリ」に戻す
encodeURI('JavaScript%E6%A8%99%E6%BA%96%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA');</source>
 
=== コンストラクタ ===
標準組み込みオブジェクトのコンストラクタは、ほとんどグローバルオブジェクトのメソッドです<ref>TypedArrayの様な少数の例外はあります。</ref>。また多くは（newを伴わない）型変換関数としても振る舞います。
 
{{節スタブ}}
; データ型
362 ⟶ 368行目:
:: {{See|[[JavaScript/Set|Set]]}}
:; WeakMap()
:: {{See|[[JavaScript/@WeakMap|@WeakMap]]}}
:; WeakSet()
: {{See|[[JavaScript/@WeakSet|@WeakSet]]}}
:; WeakRef()
:: {{See|[[JavaScript/@WeakRef|@WeakRef]]}}
; Error()
: {{See|[[JavaScript/Error|Error]]}}
:; EvalError()
:: {{See|[[JavaScript/EvalError|EvalError]]}}
:; RangeError()
:: {{See|[[JavaScript/RangeError|RangeError]]}}
:; ReferenceError()
:: {{See|[[JavaScript/ReferenceError|ReferenceError]]}}
:; SyntaxError()
:: {{See|[[JavaScript/SyntaxError|SyntaxError]]}}
:; TypeError()
:: {{See|[[JavaScript/TypeError|TypeError]]}}
:; URIError()
:: {{See|[[JavaScript/URIError|URIError]]}}
; Date()
: {{See|[[JavaScript/Date|Date]]}}
"https://ja.wikibooks.org/wiki/JavaScript/Global" より作成