====== HTML CSS Javascript ======

{{tag>software_development html css javascript jquery}}

[[https://www.w3schools.com/|https://www.w3schools.com/]]

==== 계정 ====
https://www.hostmeca.com/
https://domain.ksidc.net/


==== Location ====
<code javascript>
location.hash ="#n"
$(location).attr('hash')
</code>
==== List, Dictionary ====
<code javascript>
prod = { "key":"value" };
for (var key in prod) {
  key
  prod[key]
}
</code>

==== CSS Style ====
<code javascript>
$('#mask').removeClass('active');
$('#mark').addClass('active')
$('html').css('overflow', 'initial');

$(this).attr('id')
</code>


<code css>
@media (min-width: 768px) {
  /* wide mode css */
  .classname {
    attr : value !important; /* override */
  }
}
</code>
==== String ====
<code javascript>
function comma(str) { // 숫자에 컴마 및 원 붙이기
  str = String(str);
  return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,') + "원";
}
</code>

==== resize ====
<code javascript>
$(window).on('resize', function() {
  if ($(window).width() >= 768) {
    set_tablet_mode();
    status = "t";
  } else {
    status = "m";
  }
});
</code>
==== disable Telephone Link on Desktop ====



[[https://jsfiddle.net/az96o8Ly/|https://jsfiddle.net/az96o8Ly/]]

<code javascript>
// Use event delegation, to catch clicks on links that may be added by javascript at any time.
jQuery(document.documentElement).on('click', '[href^="tel:"]', function(e){
  try{
    // These user-agents probably support making calls natively.
    if( /Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   // Do nothing; This device probably supports making phone calls natively...
    } else {
      // Extract the phone number.
      var phoneNumber = jQuery(this).attr('href').replace('tel:', '').trim();

      // Tell the user to call it.
      alert("Please call "+phoneNumber);

      // Prevent the browser popup about unknown protocol tel:
      e.preventDefault();
      e.stopPropagation();
    }
  } catch(e){
    console.log("Exception when catching telephone call click!", e);
  }
});
</code>

==== Image resize - area map ====

[[https://github.com/stowball/jQuery-rwdImageMaps|https://github.com/stowball/jQuery-rwdImageMaps]]

<code html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<img src="https://go.pardot.com/l/552572/2019-03-27/32l8vw/552572/111582/1903_cafe24________________1_01_______.jpg" width=3750 height=1080 border="0", alt="" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="391,79,1864,415" href="https://go.pardot.com/l/552572/2019-03-27/32krky" target="_blank">
  <area shape="rect" coords="1933,79,3405,415" href="tel:1661-0004">
</map>
<script>
$(document).ready(function(e) {
  $('img[usemap]').rwdImageMaps();
});
</script>
</code>

==== Page onload ====

  * window.onload = onPageLoad(); function onPageLoad(ids) {}
  * $(window).load(function(){ }); : 더 나중에 실행됨

==== Click to popup layer ====

[[https://www.w3schools.com/howto/howto_js_popup.asp|https://www.w3schools.com/howto/howto_js_popup.asp]]

==== Table x-y scroll ====

''<table id=maintable style="height:550px;overflow-x: scroll;display:block;">''

~~DISCUSSION~~

==== Jquery on Internet Explorer, IE ====

  * ActiveX 인식 못할 때 : head에 추가 ''<meta http-equiv="X-UA-Compatible" content="IE=edge">''
  * for each 보다 index 이용이 더 빠름 (Table Rendering이 느림..)

==== Overflow (말줄임표) - ellipsis ====

  * [[http://rabbitchris.tistory.com/431|http://rabbitchris.tistory.com/431]]

==== 통신사/Device 찾기 ====
<code javascript>
// 홈페이지_기업_인트렌치컨설팅_통신사확인_태그

<script>

  var transactionXmlHttpRequest;
  var itemXmlHttpRequest;
  var telecomType;


  if (window.XMLHttpRequest)
  {
    // code for modern browsers
    transactionXmlHttpRequest = new XMLHttpRequest();
    itemXmlHttpRequest = new XMLHttpRequest();

  } else {
    // code for IE6, IE5
    transactionXmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
    itemXmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
  }

  // 서버 연결
  transactionXmlHttpRequest.open('POST', 'http://ip-api.com/json', true);
  // 데이터 전송
  transactionXmlHttpRequest.send(encodeURI(""));


  transactionXmlHttpRequest.onreadystatechange = function() {

    if (transactionXmlHttpRequest.readyState == 4 && transactionXmlHttpRequest.status == 200) 
    {
      telecomType = JSON.parse(this.responseText);

      //console.log( "Telecom Type : "+telecomType.isp );  

      //return telecomType.isp;
    }
  };

</script>





// 맞춤 자바스크립트  수정

function(){
     return telecomType.isp;
}





function(){
    var pc_device = "win16|win32|win64|mac|macintel";  // 디바이스 종류 설정
    var this_device = navigator.platform;  // 접속한 디바이스 환경

    if( pc_device.indexOf(navigator.platform.toLowerCase()) < 0 ){
        return "MO"
    }else{
        return "PC"
    }
}

</code>


==== 웹 폰트 사용 (나눔고딕) ====
https://www.letmecompile.com/%EB%82%98%EB%88%94%EA%B3%A0%EB%94%95-%EA%B5%AC%EA%B8%80-%EC%9B%B9%ED%8F%B0%ED%8A%B8webfont-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/