JavaScript/Home.md
... ...
@@ -1,6 +1,7 @@
1 1
[[_TOC_]]
2 2
3 3
# リンク
4
+- [JavaScript リファレンス | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference)
4 5
- [ECMAScript](http://ja.wikipedia.org/wiki/%45%43%4d%41%53%63%72%69%70%74)
5 6
- [Dynamic HTMLリファレンス](http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/references/dhtmlrefs.asp)
6 7
- [HTML and DHTML Reference](http://msdn2.microsoft.com/en-us/library/ms533050.aspx)
... ...
@@ -21,59 +22,74 @@
21 22
- [AnchorSynch.html](AnchorSynch.html)
22 23
23 24
# URI/URIコンポーネントのエンコード/デコード
24
-- [EncDec.html](EncDec.html)
25
-```html
26
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
27
-<html lang="ja">
28
-<head>
29
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
30
- <meta http-equiv="Content-Script-Type" content="text/javascript">
31
- <title>URI/URIコンポーネントのエンコード/デコード</title>
32
-</head>
33
-<body>
34
-<script type="text/javascript">
35
-<!--
36
-function EncURI(){
37
- document.formEncDec.txtDst.value = encodeURI( document.formEncDec.txtSrc.value );
38
-}
39
-
40
-function DecURI(){
41
- document.formEncDec.txtDst.value = decodeURI( document.formEncDec.txtSrc.value );
42
-}
43
-
44
-function EncURIC(){
45
- document.formEncDec.txtDst.value = encodeURIComponent( document.formEncDec.txtSrc.value );
46
-}
47
-
48
-function DecURIC(){
49
- document.formEncDec.txtDst.value = decodeURIComponent( document.formEncDec.txtSrc.value );
50
-}
51
-
52
-function Cpy(){
53
- document.formEncDec.txtSrc.value = document.formEncDec.txtDst.value;
54
-}
55
-// -->
56
-</script>
57
-
58
-<h1>URI/URIコンポーネントのエンコード/デコード</h1>
59
-
60
-<form name="formEncDec" action="#">
61
-<table summary="Encode Decode Form">
62
-<tr><td><input type="text" name="txtSrc" size="100" value=""></td></tr>
63
-<tr><td align="center">
64
-<input type="button" name="btnEnc" value="↓EncURI" onClick="EncURI()">
65
-<input type="button" name="btnDec" value="↓DecURI" onClick="DecURI()">
66
-<input type="button" name="btnEncC" value="↓EncURIC" onClick="EncURIC()">
67
-<input type="button" name="btnDecC" value="↓DecURIC" onClick="DecURIC()">
68
-<input type="button" name="btnCpy" value="↑Copy" onClick="Cpy()">
69
-</td></tr>
70
-<tr><td><input type="text" name="txtDst" size="100" value=""></td></tr>
71
-</table>
72
-</form>
73
-
74
-</body>
75
-</html>
76
-```
25
+- [Sample](https://www.takeash.net/js/EncDec/EncDec.html)
26
+- html
27
+ ```html
28
+ <!DOCTYPE html>
29
+ <html lang="ja">
30
+
31
+ <head>
32
+ <meta charset="UTF-8">
33
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
34
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
35
+ <link rel="stylesheet" type="text/css" href="//www.takeash.net/take.css">
36
+ <title>URI/URIコンポーネントのエンコード/デコード</title>
37
+ </head>
38
+
39
+ <body>
40
+ <h1>URI/URIコンポーネントのエンコード/デコード</h1>
41
+ <div style="text-align: center;">
42
+ <div>
43
+ <textarea id="txtSrc" rows="16" style="width: 100%;"></textarea>
44
+ </div>
45
+ <div>
46
+ <button onClick="EncURI()">↓EncURI</button>
47
+ <button onClick="DecURI()">↓DecURI</button>
48
+ <button onClick="EncURIC()">↓EncURIC</button>
49
+ <button onClick="DecURIC()">↓DecURIC</button>
50
+ <button onClick="Cpy()">↑Copy</button>
51
+ </div>
52
+ <div>
53
+ <textarea id="txtDst" rows="16" style="width: 100%;"></textarea>
54
+ </div>
55
+ </div>
56
+ <script type="text/javascript" src="EncDec.js"></script>
57
+ </body>
58
+
59
+ </html>
60
+ ```
61
+- javascript
62
+ ```javascript
63
+ const d = document;
64
+ const txtSrc = d.getElementById('txtSrc');
65
+ const txtDst = d.getElementById('txtDst');
66
+
67
+ function EncURI() {
68
+ txtDst.value = encodeURI(txtSrc.value);
69
+ }
70
+
71
+ function DecURI() {
72
+ txtDst.value = txtSrc.value.replace(
73
+ /((%[8-9A-Fa-f][0-9A-Fa-f])*%[0-9A-Fa-f]{2})/g,
74
+ (whole, p1) => decodeURI(p1)
75
+ );
76
+ }
77
+
78
+ function EncURIC() {
79
+ txtDst.value = encodeURIComponent(txtSrc.value);
80
+ }
81
+
82
+ function DecURIC() {
83
+ txtDst.value = txtSrc.value.replace(
84
+ /((%[8-9A-Fa-f][0-9A-Fa-f])*%[0-9A-Fa-f]{2})/g,
85
+ (whole, p1) => decodeURIComponent(p1)
86
+ );
87
+ }
88
+
89
+ function Cpy() {
90
+ txtSrc.value = txtDst.value;
91
+ }
92
+ ```
77 93
78 94
# 半角数字を漢数字に変換
79 95
- [NumberString.html](NumberString.html)
... ...
@@ -97,17 +113,17 @@ function Cpy(){
97 113
<script type="text/javascript">
98 114
<!--
99 115
function NumberString(src){
100
- var dictionary = {
101
- '0':'〇', '1':'一', '2':'二', '3':'三', '4':'四',
102
- '5':'五', '6':'六', '7':'七', '8':'八', '9':'九',
103
- ',':'、'
104
- };
105
-
106
- for( var key in dictionary ){
107
- src = src.replace( RegExp(key,'g'), dictionary[ key ] );
108
- }
109
-
110
- document.FORMNUMBERSTRING.TEXTDESTINATION.value = src;
116
+ var dictionary = {
117
+ '0':'〇', '1':'一', '2':'二', '3':'三', '4':'四',
118
+ '5':'五', '6':'六', '7':'七', '8':'八', '9':'九',
119
+ ',':'、'
120
+ };
121
+
122
+ for( var key in dictionary ){
123
+ src = src.replace( RegExp(key,'g'), dictionary[ key ] );
124
+ }
125
+
126
+ document.FORMNUMBERSTRING.TEXTDESTINATION.value = src;
111 127
}
112 128
// -->
113 129
</script>
... ...
@@ -122,27 +138,27 @@ function NumberString(src){
122 138
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
123 139
<html lang="ja">
124 140
<head>
125
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
126
- <meta http-equiv="Content-Script-Type" content="text/javascript">
127
- <title>ゼロ詰め</title>
141
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
142
+ <meta http-equiv="Content-Script-Type" content="text/javascript">
143
+ <title>ゼロ詰め</title>
128 144
</head>
129 145
<body>
130 146
<script type="text/javascript">
131 147
<!--
132 148
function packZero( x, n )
133 149
{
134
- var n1 = (""+x).length;
135
- var n0 = ( n > n1 ) ? n : n1 ;
136
- var z = "0";
137
- var d = "";
138
- while( n > 0 ){
139
- if ( n & 1 ){
140
- d += z;
141
- }
142
- z += z;
143
- n >>= 1;
144
- }
145
- return ( d + x ).slice( - n0 );
150
+ var n1 = (""+x).length;
151
+ var n0 = ( n > n1 ) ? n : n1 ;
152
+ var z = "0";
153
+ var d = "";
154
+ while( n > 0 ){
155
+ if ( n & 1 ){
156
+ d += z;
157
+ }
158
+ z += z;
159
+ n >>= 1;
160
+ }
161
+ return ( d + x ).slice( - n0 );
146 162
}
147 163
// -->
148 164
</script>
... ...
@@ -218,22 +234,22 @@ function packZero( x, n )
218 234
*/
219 235
220 236
(function(){
221
- var links = document.getElementsByTagName( "a" );
222
- for ( var i = links.length; --i >= 0; ){
223
- // search for all links with href to image file
224
- if ( links[i].href
225
- && links[i].href.match( /^.*\.(jpe?g|png|bmp|gif)$/i )
226
- && links[i].getElementsByTagName( "img" ).length == 0
227
- ){
228
- var img = document.createElement( "img" );
229
- img.setAttribute( "src", links[i].href );
230
- img.setAttribute( "class", "image-link" );
231
- img.setAttribute( "alt", links[i].getAttribute( "title" ) ) ;
232
- img.setAttribute( "height", 100 ) ;
233
- links[i].appendChild( img );
234
- links[i].setAttribute( "target", "_blank" );
235
- }
236
- }
237
+ var links = document.getElementsByTagName( "a" );
238
+ for ( var i = links.length; --i >= 0; ){
239
+ // search for all links with href to image file
240
+ if ( links[i].href
241
+ && links[i].href.match( /^.*\.(jpe?g|png|bmp|gif)$/i )
242
+ && links[i].getElementsByTagName( "img" ).length == 0
243
+ ){
244
+ var img = document.createElement( "img" );
245
+ img.setAttribute( "src", links[i].href );
246
+ img.setAttribute( "class", "image-link" );
247
+ img.setAttribute( "alt", links[i].getAttribute( "title" ) ) ;
248
+ img.setAttribute( "height", 100 ) ;
249
+ links[i].appendChild( img );
250
+ links[i].setAttribute( "target", "_blank" );
251
+ }
252
+ }
237 253
})();
238 254
```
239 255
... ...
@@ -243,9 +259,9 @@ function packZero( x, n )
243 259
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
244 260
<html lang="ja">
245 261
<head>
246
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
247
- <meta http-equiv="Content-Script-Type" content="text/javascript">
248
- <title>change String and Pic by buttons</title>
262
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
263
+ <meta http-equiv="Content-Script-Type" content="text/javascript">
264
+ <title>change String and Pic by buttons</title>
249 265
</head>
250 266
<body onLoad="init()">
251 267
<SCRIPT type="text/javascript">
... ...
@@ -254,23 +270,23 @@ var elmPicImg;
254 270
var elmPicName;
255 271
256 272
function init(){
257
- elmPicImg = document.getElementById("PicImg");
258
- elmPicName = document.getElementById("PicName");
273
+ elmPicImg = document.getElementById("PicImg");
274
+ elmPicName = document.getElementById("PicName");
259 275
}
260 276
261 277
function showImg1(){
262
- elmPicImg.src = "http://www.takeash.net/Etc/BABY.GIF";
263
- elmPicName.innerHTML = "Baby";
278
+ elmPicImg.src = "http://www.takeash.net/Etc/BABY.GIF";
279
+ elmPicName.innerHTML = "Baby";
264 280
}
265 281
266 282
function showImg2(){
267
- elmPicImg.src = "http://www.takeash.net/Etc/MyMelo.png";
268
- elmPicName.innerHTML = "MyMelody";
283
+ elmPicImg.src = "http://www.takeash.net/Etc/MyMelo.png";
284
+ elmPicName.innerHTML = "MyMelody";
269 285
}
270 286
271 287
function showImg3(){
272
- elmPicImg.src = "http://www.takeash.net/Etc/Usamimi.png";
273
- elmPicName.innerHTML = "Usamimi";
288
+ elmPicImg.src = "http://www.takeash.net/Etc/Usamimi.png";
289
+ elmPicName.innerHTML = "Usamimi";
274 290
}
275 291
276 292
-->
... ...
@@ -302,41 +318,41 @@ function showImg3(){
302 318
// lengthプロパティは「最大の添え字+1」で元のまま。
303 319
304 320
function testArray(){
305
- var ret = 'Browser: ' + navigator.userAgent + '\n';
306
- var a = [];
307
- a[2] = { 'index':2, 'value':200, 'name':'std' };
308
- a[5] = { 'index':5, 'value':400, 'name':'high' };
309
- a[9] = { 'index':9, 'value':100, 'name':'low' };
310
- ret += '\nソート前 / length: ' + a.length + '\n' + showObj( a );
311
- a.sort( function(a,b){ return b['value'] - a['value']; } );
312
- ret += '\nソート後 / length: ' + a.length + '\n' + showObj( a );
313
- return ret;
321
+ var ret = 'Browser: ' + navigator.userAgent + '\n';
322
+ var a = [];
323
+ a[2] = { 'index':2, 'value':200, 'name':'std' };
324
+ a[5] = { 'index':5, 'value':400, 'name':'high' };
325
+ a[9] = { 'index':9, 'value':100, 'name':'low' };
326
+ ret += '\nソート前 / length: ' + a.length + '\n' + showObj( a );
327
+ a.sort( function(a,b){ return b['value'] - a['value']; } );
328
+ ret += '\nソート後 / length: ' + a.length + '\n' + showObj( a );
329
+ return ret;
314 330
}
315 331
316 332
function showObj( obj, indent ){
317
- indent = indent || 0;
318
- var ret = '';
319
- for( var p in obj ){
320
- if ( typeof( obj[p] ) == 'object' ){
321
- ret += repeatStr( '\t', indent ) + p + ':\n' + showObj( obj[p], indent + 1 );
322
- } else {
323
- ret += repeatStr( '\t', indent ) + p + ':\t' + obj[p] + '\n';
324
- }
325
- }
326
- return ret;
333
+ indent = indent || 0;
334
+ var ret = '';
335
+ for( var p in obj ){
336
+ if ( typeof( obj[p] ) == 'object' ){
337
+ ret += repeatStr( '\t', indent ) + p + ':\n' + showObj( obj[p], indent + 1 );
338
+ } else {
339
+ ret += repeatStr( '\t', indent ) + p + ':\t' + obj[p] + '\n';
340
+ }
341
+ }
342
+ return ret;
327 343
}
328 344
329 345
function repeatStr( s, n )
330 346
{
331
- var ret = '';
332
- while( n > 0 ){
333
- if ( n & 1 ){
334
- ret += s;
335
- }
336
- s += s;
337
- n >>= 1;
338
- }
339
- return ret;
347
+ var ret = '';
348
+ while( n > 0 ){
349
+ if ( n & 1 ){
350
+ ret += s;
351
+ }
352
+ s += s;
353
+ n >>= 1;
354
+ }
355
+ return ret;
340 356
}
341 357
// EOF
342 358
```
... ...
@@ -347,31 +363,31 @@ Browser: Opera/9.80 (Windows NT 6.1; U; ja) Presto/2.9.168 Version/11.50
347 363
348 364
ソート前 / length: 10
349 365
2:
350
- index: 2
351
- value: 200
352
- name: std
366
+ index: 2
367
+ value: 200
368
+ name: std
353 369
5:
354
- index: 5
355
- value: 400
356
- name: high
370
+ index: 5
371
+ value: 400
372
+ name: high
357 373
9:
358
- index: 9
359
- value: 100
360
- name: low
374
+ index: 9
375
+ value: 100
376
+ name: low
361 377
362 378
ソート後 / length: 10
363 379
0:
364
- index: 5
365
- value: 400
366
- name: high
380
+ index: 5
381
+ value: 400
382
+ name: high
367 383
1:
368
- index: 2
369
- value: 200
370
- name: std
384
+ index: 2
385
+ value: 200
386
+ name: std
371 387
2:
372
- index: 9
373
- value: 100
374
- name: low
388
+ index: 9
389
+ value: 100
390
+ name: low
375 391
```
376 392
377 393
## Firefox 5.0.1
... ...
@@ -380,31 +396,31 @@ Browser: Mozilla/5.0 (Windows NT 6.1; rv:5.0.1) Gecko/20100101 Firefox/5.0.1
380 396
381 397
ソート前 / length: 10
382 398
2:
383
- index: 2
384
- value: 200
385
- name: std
399
+ index: 2
400
+ value: 200
401
+ name: std
386 402
5:
387
- index: 5
388
- value: 400
389
- name: high
403
+ index: 5
404
+ value: 400
405
+ name: high
390 406
9:
391
- index: 9
392
- value: 100
393
- name: low
407
+ index: 9
408
+ value: 100
409
+ name: low
394 410
395 411
ソート後 / length: 10
396 412
0:
397
- index: 5
398
- value: 400
399
- name: high
413
+ index: 5
414
+ value: 400
415
+ name: high
400 416
1:
401
- index: 2
402
- value: 200
403
- name: std
417
+ index: 2
418
+ value: 200
419
+ name: std
404 420
2:
405
- index: 9
406
- value: 100
407
- name: low
421
+ index: 9
422
+ value: 100
423
+ name: low
408 424
```
409 425
410 426
# Greasemonkey