기록들 https://github.com/ndgndg91

최근에 레거시를 유지 보수하면서, JS 및 JQuery 를 만지는 일이 있었다. 일을 하면서 select 태그의 option 태그를 selected 가 아닌, 특정 value 값을 기준으로 option 태그를 선택 후 해당 텍스트값을 가져와야 하는 작업이 필요했었다. 보통 select 태그를 사용하게 되면, selected 인 option 의 value 혹은 text 값을 핸들링 하는데, 해당 케이스는 보통 케이스와 달라서 아주 잠깐 당황했었다. 해결법은 물론 있다. 레거시를 만지면서, JQuery 를 최대한 걷어내고 있는데, JQuery 선택자를 이용하면 매우 간단하게 해결할 수 있다. 예를 들어, 아래와 같이 한 줄 이면 간단하게 해결이 가능하다. 근데, 요즘 JQuery 를 사용하지 않는데 이점이 더 큰것을 알아가고 있어서 JQuery 를 사용하지 않기로 결심했다. 따라서 namedItem 이라는 method 를 사용해보았다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/namedItem The  HTMLSelectElement.namedItem()  method returns the  HTMLOptionElement  corresponding to the  HTMLOptionElement  whose  name  or  id  match the specified name, or  null  if no option matches. name 혹은 id 속성을 이용해서 Element 를 선택한다. 아래에서 확인할 수 있듯이, Edge 와 IE 에서는 name 속성이 지원이 안된다고 한다. 따라서 id 속성을 이용하는것이 크로스 브라우징에 매우 유리하다. 그럼 우선 예제를 보자, 아래와 같이 fruits 라는 id 속성을 가진 sele...

우선, SOP가 뭐냐? wiki 백과 왈 ~ In  computing , the  same-origin policy  is an important concept in the web application  security model . Under the policy, a  web browser  permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same  origin .  same-origin policy는 웹어플리케이션 보안 모델에서 중요한 개념이라고 한다. 웹 브라우저는 첫 번째 웹 페이지에 포함 된 스크립트가 두 번째 웹 페이지의 데이터에 접근하는 것을 허용하지만 두 웹페이지 모두 동일한 출처 를 갖는 경우에만 허용된다고 한다. 그렇다면 , 동일한 출처가 뭐냐? 프로토콜/호스트/포트 가 동일한가 라고 한다. 예를들어, http://abc.dfg.com/temp/index.html 과 동일한 출처를 알아보자. http://abc.dfg.com/temp/login.html    =>  동일한 출처. http://abc.dfg.com/temp2/fake.html   =>  동일한 출처. https://abc.dfg.com/temp/real.html    =>  프로토콜 이 다르다. 따라서 동일한 출처가 아니다. http://abc.dfe.com:123/temp/isReal.html   => 포트 가 다르다. 따라서 동일한 출처가 아니다. http://dfe.abc.com/temp/good.html   =>    호스트 가 다르다.  ...

먼저 HTML 코드이다. CSS는 Bootstrap을 사용했다. Bootstrap은 CDN을 통해 임포트를 해준다. <link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" > <div class="row"> <div class="col-25"> <label for="pic">근무지 사진</label> </div> <div class="col-75"> <div> <input type="file" id="input_imgs" multiple name="files[]" maxlength="3"/> </div> <div> <div class="imgs_wrap"> </div> </div> 그다음 javascript와 jQuery jQuery또한 CDN을 통해서 임포트 해준다. 아래의 코드는 input태그의 변화가 생겼을 때, 즉 이미지를 업로드 할 경우에, handleImgsFilesSelect라는 함수가 실행되도록 짜여졌다. handleImgsFilesSelect함수는 input태그에서 업로드된 사진을 a태그와 img태그로 구성된 조합의 태그에서 img 태그 src 안에 넣고 imgs_wrap클래스의 div 태그에 append 처리를 해주는 함수이다. 그리고 a태그의 href 속성에 deleteImageAction()함수를 실행시키도록 처리를 해놓았다. <script  src=...

우선 역시 실행영상~ https://www.w3schools.com 에서 찾아보면 역시 코드가 있는데 가져와서 응용해서 만들어 보았다. 전체코드는 아래 깃헙링크에 있음,, 전체 프로젝트중 일부분만 따온거라 찾기 힘들수도 있지만 일단 첨부,, https://github.com/leehyolim/Balpoom html, css까지 올리면 너무 지저분해 질것 같아서 생략하고 자바스크립트 코드만 맨아래에 아래 함수 들이 있다. openNav() #mySidenav의 width속성을 500px로 만들어줌 -> 튀어나오도록 closeNav() #mySidenav의 width속성을 0로 만들어줌 -> 들어가서 안보이도록 해준다. #choice라는 select태그의 값이 어떤 값이냐에 따라 밑에 있는 태그들이 유동적으로 바뀌게끔 짜주었다. 조금 지저분하지만 겁나 솔직하고 직관적이게 짰다. 더 좋은방법이 있겠지만 느낌가는데로,,,~ $(document).ready(function(){   var output = "";   if($("#choice > option:selected").val()=='Bottom'){     output +='<label>총 기 장 : </label> <input type="text" name="length" placeholder="Enter Your Cm"/><br>';     output +='<label>허&nbsp;&nbsp;&nbsp;&nbsp; 리 : </label> <input type="text" name="waist" placeholder="Enter Your Cm"/><br>...

우선 역시 실행영상~ https://www.w3schools.com 에서 찾아보면 코드가 있는데 가져와서 조금만 바꿨다. 전체코드는 아래 깃헙링크에 있음,, 전체 프로젝트중 일부분만 따온거라 찾기 힘들수도 있지만 일단 첨부,, https://github.com/leehyolim/Balpoom html, css까지 올리면 너무 지저분해 질것 같아서 생략하고 자바스크립트 코드만 setTimeout을 이용해서  2초마다 함수를 호출해서 사진을 바꿔주게끔 설정을 했다. dot이라는 클래스를 가진 태그들이 아래 점들이다. active에는 배경색을 바꿔주는 css가 있다. 4개의 사진 전부 display:none;에서 보여줄 사진만 2초마다 block으로 바꿔주는 방법. var slideIndex = 0; showSlides(); function showSlides() {     var i;     var slides = document.getElementsByClassName("slides");     var dots = document.getElementsByClassName("dot");     for (i = 0; i < slides.length; i++) {        slides[i].style.display = "none";      }     slideIndex++;     if (slideIndex > slides.length) {slideIndex = 1}        for (i = 0; i < dots.length; i++) {         dots[i].className = dots[i].className.replace(" acti...

우선 실행 영상, 전체코드는 아래 깃헙링크에 있음,, 전체 프로젝트중 일부분만 따온거라 찾기 힘들수도 있지만 일단 첨부,, https://github.com/leehyolim/Balpoom html, css까지 올리면 너무 지저분해 질것 같아서 생략하고 자바스크립트 코드만 position속성을 이용해서 특정 height를 지나치면 top에 붙어서 fixed로 바꿔주고 평상시에는 static이 되도록 코드를 짜준다. var navbarHeight=document.getElementById("header_navbar"); var submenu=document.getElementById("header_submenu"); function stop(){ if(window.pageYOffset > 130) { navbarHeight.style.position="fixed"; submenu.style.position="fixed"; navbarHeight.style.top="0px"; submenu.style.top="123px"; } else { navbarHeight.style.position="static"; submenu.style.position="static"; navbarHeight.style.top="0px"; submenu.style.top="0px"; } } window.addEventListener("scroll", stop); 여기서부터는 서브메뉴 코드 mouseenter하면 display:none; 에서 inline-block으로 바뀌게끔 코드를 짠다. mouseleave하면 display:inline-block에서 none;으로 반대로 바뀌게...

우선 실행 영상, 사진들은 그냥 쇼핑몰에서 가져와서 괜찮을라나 모르겠다,, 전체코드는 아래 깃헙링크에 있음,, 전체 프로젝트중 일부분만 따온거라 찾기 힘들수도 있지만 일단 첨부,, https://github.com/leehyolim/Balpoom html, css까지 올리면 너무 지저분해 질것 같아서 생략하고 자바스크립트 코드만 #left는 왼쪽 개발바닥모양이고 #right는 오른쪽 개발바닥모양 width가 총 1200px이라서 오른쪽이나 왼쪽으로 1200씩 더해주고 빼주는 식으로 구현. var curPosition=1; $(document).ready(function(){   $('#left').click(function(){     if(curPosition == 1){     fnMove(4);   }else if(curPosition == 2){     fnMove(1);   }else if(curPosition == 3){     fnMove(2);   }else if(curPosition == 4){     fnMove(3);   }   });   $('#right').click(function(){     if(curPosition == 1){     fnMove(2);   }else if(curPosition == 2){     fnMove(3);   }else if(curPosition == 3){     fnMove(4);   }else if(curPosition == 4){     fnMove(1);   }   }); }); function fnMove(seq){   if(seq=...