✍ 📁 🙈 🙉 🙊

JavaScript Array

JavaScript Array JSON
JSON.stringify(JSON) / Object.keys( ) / Object.values( )

<pre><p id="demo"></p></pre>
<script>
var text = '[{ "aa":"00" , "bb":"00000" },{ "aa":"11" , "bb":"11111" },{ "aa":"22" , "bb":"22222" } ]';

var parse= JSON.parse(text);
var stringify= JSON.stringify(text);

txt += "\n\n var parse= JSON.parse(text) ;"
txt += "\n var stringify= JSON.stringify(text) ;"
txt += "\n\n typeof text  = " + typeof text ;
txt += "\n typeof parse = " + typeof parse;
txt += "\n typeof stringify = " + typeof stringify;

txt += "\n\n parse = " + parse ; 
txt += "\n stringify = " + stringify;

txt += "\n\n JSON.stringify(parse)= " + JSON.stringify(parse );

txt += "\n\n JSON.stringify(parse, null , 2)= " + JSON.stringify(parse, null , 2);

txt += "\n\n JSON.stringify(parse, ['aa'],2)= " + 
             JSON.stringify(parse, ['aa'],2);

txt += "\n\n JSON.stringify(parse, ['bb'],2)= " + 
             JSON.stringify(parse, ['bb'],2);

//toString

txt +="<br><br><br><br><br>";
//txt += "JSON.stringify(obj) = " +JSON.stringify(obj)+ "<br><br>";

//txt += "JSON.parse(text) = "+ JSON.parse(text) + "<br><br>";
//txt += "obj  = "+ obj  + "<br><br>";

//txt += "obj.length = " + obj.length + "<br><br>";

//for(var x=0 ; x < parse.length; x++){
//  txt += "obj[parse].aa = "+obj[parse].aa+ '    ';
 // txt += "obj[parse].bb= " +obj[parse].bb+ "<br>"; }

document.getElementById("demo").innerHTML = txt
</script>

<pre><p id="demo"></p></pre>
<script>
var text = '[{ "aa":"00" , "bb":"00000" },{ "aa":"11" , "bb":"11111" },{ "aa":"22" , "bb":"22222" } ]';

var parse= JSON.parse(text);
var stringify= JSON.stringify(text);

txt += "\n\n var parse= JSON.parse(text) ;"
txt += "\n var stringify= JSON.stringify(text) ;"
txt += "\n\n typeof text  = " + typeof text ;
txt += "\n\n typeof parse = " + typeof parse;
txt += "\n\n typeof stringify = " + typeof stringify;

txt += "\n\n parse = " + parse ; 
txt += "\n stringify = " + stringify;

txt += "\n\n JSON.stringify(parse)= " + JSON.stringify(parse );

txt += "\n\n JSON.stringify(parse, null , 2)= " + JSON.stringify(parse, null , 2);

txt += "\n\n JSON.stringify(parse, ['aa'],2)= " + 
             JSON.stringify(parse, ['aa'],2);

txt += "\n\n JSON.stringify(parse, ['bb'],2)= " + 
             JSON.stringify(parse, ['bb'],2);

//toString

txt +="<br><br><br><br><br>";
//txt += "JSON.stringify(obj) = " +JSON.stringify(obj)+ "<br><br>";

//txt += "JSON.parse(text) = "+ JSON.parse(text) + "<br><br>";
//txt += "obj  = "+ obj  + "<br><br>";

//txt += "obj.length = " + obj.length + "<br><br>";

//for(var x=0 ; x < parse.length; x++){
//  txt += "obj[parse].aa = "+obj[parse].aa+ '    ';
 // txt += "obj[parse].bb= " +obj[parse].bb+ "<br>"; }

document.getElementById("demo").innerHTML = txt
</script>

<pre>
var D1 =  {"中文":[{item: "橙子" , Qty: 31 , from: "香港"} ,
                  {item: "蘋果" , Qty: 12 , from: "中國"} ,
                  {item: "檸檬" , Qty: 32 , from: "美國"} ,
                  {item: "芒果" , Qty: 22 , from: "日本"}],
           "英文":[{item: "orange" , Qty: 31 , from: "HK"} ,
                  {item: "apple" , Qty: 12 , from: "China"} ,
                  {item: "lemon" , Qty: 32 , from: "US"} ,
                  {item: "mango" , Qty: 22 , from: "Japan"}]   }

txt += "</r>\n\nD1 ☛ "    + D1 ;
txt += "\nD1.length ☛ "    + D1.length ;

txt += "\nObject.keys(D1) ☛ "    + Object.keys(D1) ;
txt += "\nObject.keys(D1).length ☛ "    + Object.keys(D1).length ;
txt += "\nObject.keys(D1)[0] ☛" + Object.keys(D1)[0] ; 
txt += "\nObject.keys(D1)[1] ☛" + Object.keys(D1)[1] ;
txt += "\nObject.keys(D1.中文).length ☛" + Object.keys(D1.中文).length ;
txt += "\nObject.keys(D1.英文).length ☛" + Object.keys(D1.英文).length ;
txt += "\n\nJSON.stringify(Object.keys(D1)) ☟\n" + 
        JSON.stringify(Object.keys(D1)) ;

txt += "\n\nObject.values(D1).length ☛" + Object.values(D1).length ;
txt += "\n\nJSON.stringify(Object.values(D1)[0]) ☟\n" + 
        JSON.stringify(Object.values(D1)[0]) ;
txt += "\n\nJSON.stringify(Object.values(D1)[1]) ☟\n" + 
        JSON.stringify(Object.values(D1)[1]) ;
txt += "\n\nJSON.stringify(Object.values(D1)) ☟\n" + 
        JSON.stringify(Object.values(D1)) ;

txt += "\n\nJSON.stringify(D1)  ☟\n" + 
JSON.stringify(D1);

txt += "\n\nJSON.stringify(Object.values(D1)[0] ) ☟\n" + JSON.stringify(Object.values(D1)[0] );

txt += "\n\nJSON.stringify(Object.values(D1)[1] ) ☟\n" + JSON.stringify(Object.values(D1)[1] );

txt += "\n\nD1.中文[0].item=" + D1.中文[0].item ;
txt += "  D1.中文[0].Qty=" + D1.中文[0].Qty ;  
txt += "  D1.中文[0].from="+ D1.中文[0].from ;

txt += "\nD1.中文[1].item=" + D1.中文[1].item ;
txt += "  D1.中文[1].Qty=" + D1.中文[1].Qty ;  
txt += "  D1.中文[1].from="+ D1.中文[1].from ;

txt += "\nD1.中文[2].item=" + D1.中文[2].item ;
txt += "  D1.中文[2].Qty=" + D1.中文[2].Qty ;  
txt += "  D1.中文[2].from="+ D1.中文[2].from ;

txt += "\nD1.中文[3].item=" + D1.中文[3].item ;
txt += "  D1.中文[3].Qty=" + D1.中文[3].Qty ;  
txt += "  D1.中文[3].from="+ D1.中文[3].from ;

txt += "\n\nD1.英文[0].item=" + D1.英文[0].item ;
txt += "  D1.英文[0].Qty=" + D1.英文[0].Qty ;  
txt += "  D1.英文[0].from="+ D1.英文[0].from ;

txt += "\nD1.英文[1].item=" + D1.英文[1].item ;
txt += "  D1.英文[1].Qty=" + D1.英文[1].Qty ;  
txt += "  D1.英文[1].from="+ D1.英文[1].from ;

txt += "\nD1.英文[2].item=" + D1.英文[2].item ;
txt += "  D1.英文[2].Qty=" + D1.英文[2].Qty ;  
txt += "  D1.英文[2].from="+ D1.英文[2].from ;

txt += "\nD1.英文[3].item=" + D1.英文[3].item ;
txt += "  D1.英文[3].Qty=" + D1.英文[3].Qty ;  
txt += "  D1.英文[3].from="+ D1.英文[3].from ;

demo.innerHTML = txt; 
</script>
<style>
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
r{font-size:20px;color:red;}

</style>

var Tt= '' ;

Tt += 'var Ay = ' + JSON.stringify(Ay) ;

Tt += '\n\nAy.length = ' + Ay.length ;
Tt += '\nAy = ' + Ay
Tt += '\nJSON.stringify(Ay) = ' + JSON.stringify(Ay) ;

Tt += '\n\nObject.keys(Ay).length = ' + Object.keys(Ay).length ; 
Tt += '<br>Object.keys(Ay[0]).length = ' + Object.keys(Ay[0]).length ; 
Tt += '<br>Object.keys(Ay[1]).length = ' + Object.keys(Ay[1]).length ; 
Tt += '<br>Object.keys(Ay[2]).length = ' + Object.keys(Ay[2]).length ;  
Tt += '\nJSON.stringify(Object.keys(Ay))    = ' + 
          JSON.stringify(Object.keys(Ay)) ;
Tt += '\nJSON.stringify(Object.keys(Ay[0])) = ' + 
          JSON.stringify(Object.keys(Ay[0])) ;
Tt += '\nJSON.stringify(Object.keys(Ay[1])) = ' + 
          JSON.stringify(Object.keys(Ay[1])) ;
Tt += '\nJSON.stringify(Object.keys(Ay[2])) = ' + 
          JSON.stringify(Object.keys(Ay[2])) ;

Tt += '<br><br>Object.values(Ay).length = ' + Object.values(Ay).length ; 
Tt += '<br>Object.values(Ay[0]) = ' + Object.values(Ay[0]) ; Tt += '<br>Object.values(Ay[1]) = ' + Object.values(Ay[1]) ; Tt += '<br>Object.values(Ay[2]) = ' + Object.values(Ay[2]) ;

Tt += '\n\nJSON.stringify(Object.values(Ay))    ☟\n' + 
          JSON.stringify(Object.values(Ay)) ;
Tt += '\n\nJSON.stringify(Object.values(Ay[0])) ☟\n' + 
          JSON.stringify(Object.values(Ay[0])) ;
Tt += '\n\nJSON.stringify(Object.values(Ay[1])) ☟\n ' + 
          JSON.stringify(Object.values(Ay[1])) ;
Tt += '\n\nJSON.stringify(Object.values(Ay[2])) ☟\n ' + 
          JSON.stringify(Object.values(Ay[2])) ;

var obj = JSON.parse(JSON.stringify(Ay));
Tt += '\n\n<r>var obj = JSON.parse(JSON.stringify(Ay))</r>'
Tt += '\nobj[0].aa = ' + obj[0].aa +'  obj[0].bb = '+obj[0].bb;
Tt += '\nobj[1].aa = ' + obj[1].aa +'  obj[1].bb = '+obj[1].bb;
Tt += '  obj[1].cc = ' + obj[1].cc ;
Tt += '\nobj[2].aa = ' + obj[2].aa +'  obj[2].bb = '+obj[2].bb;

demo.innerHTML = Tt;

</script>

Edit

#html #網頁格式 #style #div #JavaScript array 陣列 #JavaScript Array #html Array #JavaScript Array JSON #html Array JSON #html Object.keys() #JavaScript Object.keys() #html Object.values() #JavaScript Object.values()

input Number Key

input Number Key only
input 僅輸入數字鍵

<pre><b>input Number Key only 
input 僅輸入數字鍵</b>

<<c>input type="text" <r>onkeyup</r>="CT(this)">

<<c>script>
function CT(x)   {
  var ls = x.value.substr(-1) ;
  if(ls.charCodeAt(0) >= 42 && ls.charCodeAt(0)<= 57){return }
  x.value=x.value.substr( 0,x.value.length-1 )
}
<<c>/script>

input only [0 to 9] , [+ - * /]</pre>

<pre><b>input Number Key only 
input 僅輸入數字鍵</b>

<<c>input type="text" <r>onkeypress</r>="return isNumberKey(event)" >

<<c>script>
function isNumberKey(evt)   {
   var charCode = (evt.which) ? evt.which : event.keyCode
   if (charCode >= 42 && charCode <= 57){return true;}
   if (charCode == 13){return true;}
   return false;      }
<<c>/script>

input only [0 to 9] , [+ - * /]</pre>

<pre><bb>input  on mouseove</bb>
<input type="text" size="20" value="11" />
<input type="text" size="20" value="22" />
<input type="text" size="20" value="33" />
<input type="text" size="20" value="44" />
<input type="text" size="20" value="55" />

<<c>script>
var Tag= document.querySelectorAll("input") ;
Tag.forEach((round) => {
    round.addEventListener("mouseover", function() { 
    round.select() ;
  }) })
<<c>/script>
</pre>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

<pre><bb>Activate the next input field 
激活下一個輸入字段</bb>
<input type="text" size="20" value="11" />
<input type="text" size="20" value="22" />
<input type="text" size="20" value="33" />
<input type="text" size="20" value="44" />
<input type="text" size="20" value="55" />
<div id="dp"></div>
<<c>script>
var Tag= document.querySelectorAll("input") ;
Tag.forEach((round) => {
    round.addEventListener("keypress", function(e) { 
          if(e.key == "Enter"){
                var ii = [...Tag].indexOf(event.target);
                if(ii > Tag.length-2){ii=-1}
                Tag[ii+1 ].select()  }
  }) })
<<c>/script>
</pre>

}) })
</script>

Edit

#html #網頁格式 #script #div #input #input 僅輸入數字鍵 #input Number Key only

window open

JavaScript window.open() 開啟新視窗

參數	window.open 參數值與說明
toolbar	toolbar，預設是要顯示，若不顯示 toolbar=no。
scrollbars	scroll bars 要顯示可用參數值 yes，若不顯示請使用參數值 scrollbars=no。
resizable	是否同意網友自己調整新視窗的大小，若不同意請使用參數值 resizable=no。
location	網址欄位顯示控制，預設是要顯示，若不顯示請使用參數值 location=no。
menubar	目錄欄位顯示控制，預設為要顯示，若不顯示請使用參數值 menubar=no。
status	狀態列顯示控制，預設為要顯示，若不顯示請用參數值 status=no。
left	開啟的新視窗靠瀏覽器左邊的距離，單位為 px。
top	開啟的新視窗靠瀏覽器上邊的距離，單位為 px。
width	開啟的新視窗寬度，單位為 px。
height	開啟的新視窗高度，單位為 px。
fullscreen	是否在全屏模式下顯示瀏覽器。默認是否。全屏模式下的窗口也必須處於影院模式。

<table border="1" cellspacing="1" style="width: 100%;height:100%">
<tbody>
<tr><td style="width:80px">
<button  onclick="LT()">左上角開視窗 </button >
</td><td>
newwin = window.open("","neww","width=300,height=300")<br>
newwin.moveTo(0, 0)<br>
newwin.focus()<br>
newwin.document.write(...視窗內容...)<br> 
newwin.document.write(...視窗內容...)<br>
newwin.document.close();
</td></tr>

<tr><td>
<button  onclick="BB()">中央角開視窗 </button >
</td><td>
newwin = window.open("","neww","width=300,height=300")<br>
newwin.moveTo( (screen.width-300)/2, (screen.height-300)/2) )<br>
newwin.focus()<br>
newwin.document.write(...視窗內容...)<br> 
newwin.document.write(...視窗內容...)<br>
newwin.document.close();
</td></tr>

<tr><td>
<button  onclick="RB()">右下角開視窗 </button >
</td><td>
newwin = window.open("","neww","width=300,height=300")<br>
newwin.moveTo(5000, 5000)<br>
newwin.focus()<br>
newwin.document.write(...視窗內容...)<br> 
newwin.document.write(...視窗內容...)<br>
newwin.document.close();
</td></tr></tbody></table>

function RB(){  
//開新視窗在 右下角 
if(newwin ) {newwin.close()} 
newwin = window.open( "","neww" ,"width=300,height=300");
newwin .moveTo(5000, 5000); 
newwin.focus();
newwin.document.write('<center>window open<br>'); newwin.document.write('<input type="button" onclick = "window.close() " value="close">') 
newwin.document.write('<center>'); 
newwin.document.close();}

function BB(){    
//正中央有關閉按鈕 
if(newwin ) {newwin.close()} 
newwin = window.open("","neww","width=300,height=300");                newwin .moveTo((screen.width-300 ) / 2, (screen.height-300) / 2); newwin.focus(); 
newwin.document.write('<center>window open<br>'); newwin.document.write('<input type="button" onclick = "window.close() " value="close">') 
newwin.document.write('<center>');  newwin.document.close();}

</script>

Edit

#html #網頁格式 #style #div #script window open #script 開新視窗 #document.write()

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

JavaScript Array

JavaScript Array JSON
JSON.stringify(JSON) / Object.keys( ) / Object.values( )

input Number Key

input Number Key only
input 僅輸入數字鍵

window open

JavaScript window.open() 開啟新視窗

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

JavaScript Array

JavaScript Array JSONJSON.stringify(JSON) / Object.keys( ) / Object.values( )

input Number Key

input Number Key only input 僅輸入數字鍵

window open

JavaScript window.open() 開啟新視窗

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

JavaScript Array JSON
JSON.stringify(JSON) / Object.keys( ) / Object.values( )

input Number Key only
input 僅輸入數字鍵