본문 바로가기

Frontend/JavaScript26

Array, Map ... 리스트의 함정 (Call By Reference) 자바스크립트에서 리스트(Array, Map...) 를 사용할 때 꼭 알고 있어야하는 것이 있다. 아래와 같은 코드로 로직을 짜다가분명 나는 map 에서 꺼낸 객체를 새로운 array 에 담고 싶어서 5번 라인과 같이 new Array() 후 push 했는데,array 의 데이터를 변경했는데 map 데이터까지 변경되어 당황했다 ;;1234567891011121314var map = new Map();map.set(0, "zero");map.set(1, "one"); var array = new Array();map.forEach(function(element){ array.push(element);}) if (array[0] == map.get(0)) { console.log("=="); }else { c.. 2019. 5. 24.
[JavaScript] .trim() 사용시 유의할 점!! 좌우 공백 제거를 위해 javascript 에서 제공하는 trim() 함수를 흔히 사용하게 되는데, 여기서 유의할 점이 있다. 그것은 바로 IE8 이하 브라우저에서 trim() 함수가 지원이 안된다는 것 ... ^^ 그러니, jquery 의 $.trim() 을 이용하자 ..ㅎ 2019. 2. 19.
자바스크립트에서 확장 for문 사용하는 방법 자바에서 지원하는 확장 for 문을 자바스크립트에서 사용하고 싶다면,아래와 같이 이용하면 된다. 12345678//array 생성var array = ['aa','bb']; //확장 for문 사용for (var num in array) { //alert: aa //alert: bb alert(array[num]);} cs 2019. 2. 7.
request.getParameter 활용해 새 탭으로 연 창에 값 전달하기 보고있던 창에서 다른 창으로 넘어갈 때 특정 값을 전달해주려고 url 뒤에 파라미터값을 붙여서 전달했다.그럼 새로 열린 창에서 값을 받아야 하는데 찾아보니 크게 방법은 두가지 였다. * 부모 창 * 1234567891011dayClick : function(date){ swal({ title: "해당 날짜엔 나들이 일정이 없습니다.", text: date.format()+" 날짜로 일정을 새로 생성하시겠습니까?", buttons: ["취소", "생성하기"], }).then((willGo) => { if (willGo) { window.open("/schedule/addSchedule?date="+date.format()+''); } });}Colored by Color Scriptercs * 자식 창 *.. 2018. 7. 31.
[Javascript] File Upload 한 뒤 태그에서 이미지 바로 보여주기 1. 여기 보여 줄 img 태그와 file 태그를 html body 에 놓고 ​ 2. 이미지를 클릭하면 file 을 클릭하게, file을 클릭하면 이미지 attr 이 변경되게끔 구현했다 var updateCartImgNo = ""; $("img[id^='cartImg']").on("click", function(){ updateCartImgNo = $(this).closest("table").attr("class"); $("#file").click(); }) $("#file").on("change", function(){ imgPreview(this); }) function imgPreview(input) { if (input.files && input.files[0]) { var reader = new.. 2018. 7. 27.
caret.js 와 atwho.js 이용하여 게시물에서 @로 친구리스트 불러오기 (autocomplete 활용) 페이스북이나 인스타그램처럼, 태그(@) 를 이용하여 친구리스트를 댓글에 불러올 수 있도록 하는 기능을 구현했다 !Friend 테이블에서 FriendId 만을 추출하여 JSON 형식으로 만들고, 댓글폼에서 @를 입력하면 Ajax 로 리스트를 불러와 띄워주는 예제다.해당 기능 사용을 위해 caret.js 와 atwho.js 를 같이 사용하였다.Caret.js Git 주소 : https://github.com/ichord/Caret.jsAtwho.js Git 주소 : https://github.com/ichord/At.js해당 예제는 국내 포스팅도 없고 검색 데이터도 별로없었지만 내가 사용할 textarea 에 적용이 가능하고, 사용방법이 편한 점에서 공부하고 적용했다 (뿌듯) * 사용방법 *1. HTML 상.. 2018. 7. 20.