개발중/JavaScript35

• js 배열 동적으로 다루기 js 배열을 해체 후 내 로직대로 재배치 해야 하는 로직이 필요했다. 동적으로 배열을 다루기 기록 var parentMenu = [] ; var childList = [] ; list.forEach(function(x){ x.childList.forEach( function (y){ childList.push({ menuSeq : y.menuSeq, menuName : y.menuName, menuStatus : true}); }) parentMenu .push({ menuSeq : x.menuSeq, menuName : x.menuName, menuStatus : true, childList : childList }); childList = []; }) 개발중/JavaScript 2021. 8. 10.

• js 객체 배열 추가 js 에서 배열을 다루는 법은 일반적으로 나와 있지만 다차원 배열에 대해서는 잘 나와있지 않는 것 같다. 내가 방황한 이유는 아래 같이 LIST 가 있는데 list: [ { name: "A", id: 0 }, { name: "S", id: 1 }, { name: "D", id: 2 }, { name: "F", id: 3 }, { name: "V", id: 4 }, { name: "H", id: 5 }, { name: "J", id: 6 }, { name: "M", id: 7 }, { name: "I", id: 8 }, ], 모든 객체에 age : 16 데이터를 추가 하고 싶은데 보통의 방법처럼 push 로는 안되는 것이었다 list: [ { name: "A", id: 0 , "age": 16 }, { n.. 개발중/JavaScript 2021. 4. 23.

• js 배열에서 특정 위치 index 찾기 Array.prototype.findIndex() 한 리스트가 있는데 list: [ { name: "포장", id: 0 }, { name: "이벤트", id: 1 }, { name: "영양정보", id: 2 }, { name: "online 유통", id: 3 }, { name: "offline 유통", id: 4 }, { name: "맛", id: 5 }, { name: "크기", id: 6 }, { name: "안정성", id: 7 }, { name: "가격", id: 8 }, ] 나한테는 id 값만 주어진다. 특정 객체를 삭제 하려면 index 를 알고 splice 를 이용해서 삭제 해야 하는데 특정 id 값의 위치를 알기 위해서 for 문을 여러번 돌리고 있었다. 그러다 좋은 기능을 발견해서 기록.. 개발중/JavaScript 2021. 4. 22.

• jQuery Object의 변수 jQuery Object의 변수 앞에는 $을 부여해 주십시오. // bad var sidebar = $('.sidebar'); // good var $sidebar = $('.sidebar'); jQuery 쿼리결과를 캐시해주십시오. // bad function setSidebar() { $('.sidebar').hide(); // ...stuff... $('.sidebar').css({ 'background-color': 'pink' }); } // good function setSidebar() { var $sidebar = $('.sidebar'); $sidebar.hide(); // ...stuff... $sidebar.css({ 'background-color': 'pink' }); } 개발중/JavaScript 2021. 2. 24.

• 이벤트 한번만 실행 .one() 특정 처리기를 한 번만 실행해야 하는 경우도 있습니다. jQuery는 이 목적을 위해 메서드를 제공합니다. $( "p" ).one( "click", function() { console.log( "You just clicked this for the first time!" ); $( this ).click(function() { console.log( "You have clicked this before!" ); }); }); 개발중/JavaScript 2021. 2. 24.

• Disconnecting Events (이벤트 끊기) .on() .off() .off() jQuery의 모든 재미는 메서드에서 발생하지만, 책임있는 개발자가되고 싶다면 해당 의 재미가 중요합니다. 더 이상 필요하지 않을 때 해당 이벤트 바인딩을 정리합니다. 이벤트 바인딩이 많은 복잡한 사용자 인터페이스는 브라우저 성능을 저하시킬 수 있으므로 메서드를 부지런히 사용하면 필요할 때 필요한 이벤트 바인딩만 있는지 확인하는 것이 좋습니다 // Unbinding all click handlers on a selection $( "p" ).off( "click" ); // Unbinding a particular click handler, using a reference to the function var foo = function() { console.log( "f.. 개발중/JavaScript 2021. 2. 24.

• 콜백 다른 많은 프로그래밍 언어와 달리 JavaScript를 사용하면 나중에 실행될 함수를 자유롭게 전달할 수 있습니다. 콜백은 다른 함수에 인수로 전달되고 부모 함수가 완료된 후 실행되는 함수입니다. 콜백은 부모가 끝날 때까지 참을성 있게 실행되기를 기다려 두기 때문에 특별합니다. 한편 브라우저는 다른 기능을 실행하거나 다른 모든 종류의 작업을 수행할 수 있습니다. 콜백을 사용하려면 콜백을 부모 함수로 전달하는 방법을 아는 것이 중요합니다. 인수가 없는 콜백 콜백에 인수가 없는 경우 다음과 같이 전달할 수 있습니다. 여기서 두 번째 매개 변수는 단순히 함수 이름입니다 (문자열로는 아니며 괄호가 없는 경우) $.get( "myhtmlpage.html", myCallBack ); 인수가 있는 콜백 인수로 콜백을.. 개발중/JavaScript 2021. 2. 24.

• onload / ready onload 브라우저가 문서 로드를 완료한 후 코드가 실행되도록 하려면 많은 JavaScript 프로그래머가 코드를 함수로 래핑합니다. window.onload = function() { alert( "welcome" ); }; ready 안타깝게도 배너 광고를 포함하여 모든 이미지가 다운로드가 완료될 때까지 코드가 실행되지 않습니다. 문서를 조작할 준비가 되자마자 코드를 실행하려면 jQuery에는 ready 문이 있습니다. $( document ).ready(function() { // Your code here. }); 대부분의 다른 이벤트의경우 이벤트 처리기를 호출하여 기본 동작을 방지할 수 있습니다 $( document ).ready(function() { $( "a" ).click(functio.. 개발중/JavaScript 2021. 2. 24.

• 체크박스 (checkbox) 전체 값 구하기 전체 스팸 카테고리 감성 // 수정 항목 var channelArr = document.getElementsByName("channels"); var selectedChannelArr = []; channelArr.forEach(function(channel){ if(channel.checked == true && channel.value != "") selectedChannelArr.push(channel.value); }); 개발중/JavaScript 2021. 2. 15.

• JSON.stringify( ) JSON.stringify( ) 자바스크립트의 값을 JSON문자열로 반환한다. JSON JSON이란 JavaScript Object Notaion의 약자로, 브라우저와 서버 사이에 오고가는 데이터의 형식이다. JSON.stringify( value, replacer, space ) value value 는 필수이다. json 문자열로 변환할 값이다. 배열, 객체 또는 숫자, 문자 등이 될 수 있다. replacer repacer은 선택이다. 함수 또는 배열이 될 수 있다. 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 json 문자열 결과에 포함된다. function replacer(key, value) { if (typeof value === ‘string’) { return unde.. 개발중/JavaScript 2021. 1. 8.

• AJAX 을 사용해서 정보를 컨드롤러로 보내기 $(document).ready(function(){ $('#add').on('click', function(){ $.ajax({ url: "Customer_SignUpSave.do", type: "POST", data: $('#signUpForm').serialize(), success: function(data){ alert("회원가입 완료"); location.href="Board.do"; }, error: function(){ alert("회원가입 실패"); } }); }); }); 개발중/JavaScript 2020. 10. 22.

• 

  JSON의 데이터 출력하기 🖤 글이 도움이 되었다면 유튜브 클릭 해주세요 🖤 Ajax 의 간단함에 배울수록 놀란다. 어떻게 이 간단한 코드로 저리 쉽게 ... 이 홈페이지에서 https://www.mockaroo.com/ Mockaroo - Random Data Generator and API Mocking Tool | JSON / CSV / SQL / Excel Paste the header row from your CSV, TXT, or Excel file to create multiple fields at once. www.mockaroo.com 이런 형식으로 다운 받아 사용했다. ajax 진짜 더 자세히 알아보고 싶구나 자료는 이런식으로 1000개를 준비했고 코딩은 이렇게 작성을 했다 function 에서 받는 data는 .. 개발중/JavaScript 2020. 8. 24.