[카테고리:] javascript/jQuery

javascript 정규식 샘플 모음

천천히 모아 보겠습니다. HTML소스코드 압축하기 let template = ` <div style="line-height:120%"> <p>애국가 1절/p> <p style="color:blue">동해물과 백두산이 마르고 닳도록</p> <h3>하느님이 보우하사 우리 나라만세</h3> <p>무궁화 삼천리 화려강산 대한사람 대한으로 길이 보존하세</p> </div> ` let content = template.replace(/[\n\r\t]/gim,'').replace(/(>)\s+(<)/gm,"><"); /* 결과: <div style="line-height:120%"><p>애국가 1절/p><p style="color:blue">동해물과 백두산이 마르고 닳도록</p><h3>하느님이 보우하사 우리 나라만세</h3><p>무궁화 삼천리 화려강산 대한사람 대한으로 길이 보존하세</p></div> */

캡처링 버블링의 이해

아래와 같이 모든 DOM요소(엘리먼트)의 최종 자식인 <p>P</p>의 click 이벤트를 발생시 캡쳐링 발생: html > body > form > div > p, 직후 버블링 발생: p > div > form > body > html 다시말해서 이벤트가 전파되는 순서를 의미한다. 캡처링(Capturing) : Dom 요소 최상위에서 event.target 까지 도달할 때 까지 내려가는(찾아 들어가는) 과정 버블링(Bubbling): event.target까지 도달했다가 다시 … 계속 읽기 캡처링 버블링의 이해

application/json post 전송(jQuery, spring)

javascript $.ajax({ url: "www.aaboo.com/giveMeJsonOK" , type: "post" , contentType: "application/json;" //없을 경우 Default: application/x-www-form-urlencoded , data: JSON.stringify({a:1, b:2, c:[1,2,3]}) , success: function(result){ console.log(result) } }) java import java.util.HashMap; import javax.inject.Inject; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.Controller; import com.google.gson.Gson; @Controller public class aabooTestClass { @inject private Gson gson; @RequestMapping(value="/giveMeJsonOK", method=ReqestMethod.POST) public void giveMeJsonOK(@RequestBody HashMap<String, Object> payload, @HttpServletReseponse res) … 계속 읽기 application/json post 전송(jQuery, spring)

javascript Promise

기본 형태 //resolve 로 정상일 경우 new Promise(function(resolve, reject) { resolve('hello'); //goto then() }).then(function(result){ console.log("success : "+ result); // success : hello }).catch(function(result){ console.log("failed : "+ result); }); //reject 로 실패일 경우 new Promise(function(resolve, reject) { reject('hello'); //goto catch() }).then(function(result){ console.log("success : "+ result); }).catch(function(result){ console.log("failed : "+ result); // failed : hello }); 함수형으로 … 계속 읽기 javascript Promise

Shadow Dom(HTML 코드 숨기기)

유튜브 "코딩애플"님의 강좌를 정리하였습니다. HTML <div id="mordor"></div> JAVASCRIPT document.querySelector('#mordor').attachShadow({mode:'open'}); document.querySelector('#mordor').shadowRoot.innerHTML=` <p>심연에서 왔도다</p> `; 위 화면의 결과를 개발자도구에서 확인하면, <div id="mordor"></div> 만보이고, '심연에서 왔도다'는 안보여진다. 그냥 개발자가 멋있어 보일려고 이런 코드를 작성한다고 하는데, 보이게 하려면 개발자도구 설정에서 ShadowDom을 활성화 시키면 된다. 사용자정의 엘리먼트 작성 방법 우선 아래와 같이 작성을 하면 <custom-input/> 이라는 새로운 엘리먼트를 클래스화하여 사용할 … 계속 읽기 Shadow Dom(HTML 코드 숨기기)

Javascript 랜덤한 정수 뽑아내기

원리: Math.random() //랜덤한 유리수를 선언함 Math.random()*8 //0~7 까지의 랜덤한 유리수 Math.floor(유리수) //반내림 정수 Math.floor(Math.random()*8) //0~7까지의 랜덤한 정수 Math.floor(Math.random()*8)+1 //1~8까지의 랜덤한 정수 문제 1)  -3 ~ 3 까지의 랜덤한 수를 구하시오(아래 부분을 마우스로 긁어보세요) Math.floor(Math.random()*7) - 6;