Category js

   window.addEventListener('beforeunload', (event) => {
        event.preventDefault();
        // このページを去る前にローカルストレージを削除;
        localStorage.removeItem('interValId');
    });

そのまま保存するとデータ構造が書き換えられて配列がcsv形式になってしまう｡

localStorage.setItem('stockoutData', JSON.stringify(stockoutData)); //保存

let stockoutData = localStorage.getItem('stockoutData'); //取得
     let stockouts = JSON.parse(stockoutData);  //変換

//URL書き換え
    var anker = 1;
    var issuer_no = 1;
    history.replaceState('','','?issuer_no='+issuer_no + '&bank_no=' + bank_no + anker);

2021-07-26 → 2021年7月26日

var datestr = "2021-07-26";
var date = Date.parse(datestr);
var date = new Date(date);

  format = date.getFullYear() + '年';
  format +=( date.getMonth() + 1 ) + '月';
  format += date.getDate() +'日';
  
  console.log(format);

オブジェクト要素数のカウント

  let a = {de:234}
  console.log( Object.keys(a).length)

// a.length はundefined になる

変数が未定義かどうかの判定

                                                 // あり   なし
    console.log(typeof session !== "undefined" );// true  false
    console.log(typeof session === "undefined" );// false true
 

指定した要素本体の取得

   $('#youso').prop('outerHTML');
 

自分の親要素の順位

 
 var this_index = jQuery('.oya p').index(jQuery(this).parent());
 oyaクラスの中のpが何番目かが取得できる this は同じ親を持つボタンとか
 

チェックされているラジオボタン､checkBoxの値を取得

 
jQuery('input[name="shipper"]:checked').val();
 

ラジオボタンの見た目をONにする､属性を選択状態にする←これらは別物

 
 jQuery('[type="radio"]').eq(0).prop('checked',true).attr('checked',true);
 

選択されたラジオボタンがあればtrue

 
 var ret = $('[name="fls"]').is(':checked'); 
 

セレクトメニューに値をセット

 
jQuery(this).prop("selectedIndex", 0); //最初のoption指定
 

セレクトメニューで選択されたoption要素のdata属性を取得

 
jQuery('select').children('option:selected').data('id');

datalistで選択されたoption要素のdata属性を取得

 
  $('[name="company"]').change(function(){
      var issuer_id = $("#datalistOptions22 option[value='" + $('#company').val() + "']").data('issuer_id');
      console.log(issuer_id);
    });

組み込みでもともとあるので自作しなくてもよい
number_format javascript

 
var price = 120000000;
console.log( price.toLocaleString());
 

→ 120,000,000

 



  jQuery(function ($) {
  // その他の処理
    $(window).on("load", function() {
    // 画像等全て読み終えた時の処理
      var h = $('.color-v img').height();
      console.log(h);
    });
  });

    $(function () {
      //DOM構築後実行 画像等は待たない
      $('header').append("$(fnction)");
    });

    $(document).ready(function () {
      //DOM構築後実行 画像等は待たない
      $('header').append("ready");
    });

    document.addEventListener('DOMContentLoaded', function () {
      //最初の HTML 文書の読み込みと解析が完了したとき
      $('header').append("addEventListener");
    });

    window.addEventListener('load', function() {
         $('header').append("window addEventListener");
    });


// 特定の要素を読み込んでから実行
  const MAX_RETRY_COUNT = 10;  //待ち時間上限
  var retry_counter = 0;
  var set_interval_id = setInterval(findTargetElement, 1000);
   function findTargetElement() {
      retry_counter++;
      // 要素がMAXリトライ値になっても見つからない場合、インターバルを削除
      if(retry_counter > MAX_RETRY_COUNT ) {
          clearInterval(set_interval_id);
      }
                                                          // 読み込みを待つ要素名
      var diff_container_elements = document.getElementsByClassName('new_pl_9');
      if(diff_container_elements.length > 0) {
          clearInterval(set_interval_id);
          // ここにやりたい処理を書く

      }       
   }

 

実行順

addEventListener

window addEventListener

$(fnction)

ready

$(window).on

 let val = `テンプレート文字列とは
  ヒアドキュメントのようなもの`;
  console.log(val);

let name = '小川';
let str  = `My name is ${name}`;
console.log(str);

//分割代入
let [namae,age]=['ささき',35];
console.log(namae , age);

// js のforeach文
names = ['sato','ito','goto'];
for (let value of names){
  console.log(value);
}

// 可変長引数
function sum(...prop){
  var t = 0;
  for(let num of prop)
    t += num ;
  return t ;  
}
console.log( sum( 2 ,4 ,1 ) );
console.log( sum( 2 ,4 ) );

/*
無名関数をつくるアロー関数 
*/
var area = (x,y) => {
  console.log( x * y );
}
area(12,4);

// 一行の処理だけなら{}がいらない｡ 引数が一つなら()も省略可 
var squareArea = val => val ** 2
 console.log(squareArea(9));


//オブジェクトからの分割代入
  const mpl={name:'jhon',age:44}
  const{name, age, jender='women'} = mpl;
                  // jender は無いが初期値を入れられる
  console.log(name, age, jender);




//map 関数
  const singers = ['jckei evencho','martina mcbride' ,'aricia keys'];
  // ループの処理
  singers.map( (name) => $('#singer').append(name + '<br>') );


//filter 関数
  let country = singers.filter( (name) => {
    return name == 'martina mcbride'; 
  });

    $('#mm').append( country );  // → martina mcbride