javascript7

• 

  [JSON] JSON.stringify와 JSON.parse의 차이점 JSON.stringify 와 JSON.parse의 차이점 및 사용시점 알기 AJAX 통신을 하다 보면 누구나 한 번쯤은 JSON.stringify와 JSON.parse를 접해봤을 거고 누군가는 왜 사용하는지 헷갈리는 경우가 있을 것이다. JSON.stringify와 JSON.parse의 차이점을 비교해보며 각각 어떤시점에 사용해야 하는지 확실하게 알아두자 ! ! ! 먼저 JSON을 간략하게 정의하면, JavaScript Object Notation의 약자로, Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷. 웹 애플리케이션에서 데이터를 전송할 때 일반적으로 사용한다. (브라우저와 서버 사이에서 오고 가는 데이터의 형식) 여기에 간단히 JSON.stringify와.. FE/JavaScript 2022. 2. 25.

• 

  [javaScript] 클로저(Closure)란,,? 자바스크립트 클로저(Closure) 개념 이해하기. '클로저(Closure)'는 자바스크립트뿐만 아니라 다른 언어에서도 사용되는 특성이다. 특히 함수를 일급 객체로 취급하는 언어(함수형 언어 functional language)에서 주요하게 사용되는 특성이라고 하니 잘 알아두자 !! 자바스크립트 또한 함수를 일급 객체로 취급한다. 함수를 일급 객체로 취급하는 것은 함수를 다른 함수의 인자로 넘길 수도 있고, return으로 함수를 통째로 반환받을 수도 있음을 의미한다. 이점을 유의하여 클로저를 이해해보자 ! 클로저(Closure) : 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수 자바스크립트 클로저의 간단한 전형적인 구조를 보고 이해해보자 !! function outerFunc() { var .. FE/JavaScript 2021. 2. 24.

• 

  [javaScript] chart.js 사이즈 변경 / 크기 설정 chart.js 사이즈 변경하기 / 크기 설정하기 chart.js 샘플 코드를 받아서 실행하면 사이즈가 고정적으로 되어있다. 난 그것도 모르고 계속 css 코드를 수정작업했지만 크기는 변경되지 않았다ㅏ... chart.js 크기 변경하는 방법은 너무 간단했다.. 아래는 chart.js의 샘플예제를 살펴볼수 있는 주소이다. 다양한 chart가 있으니 들어가서 살펴보면 나중에 필요한 chart를 바로 사용할 수 있을 것이다. https://www.chartjs.org/ 먼저, chart.js의 샘플예제 코드 !!! 나는 도넛차트를 사용할 예정이여서 type:'doughnut'을 선택해줬다. 크기를 변경해주는 방법은 정적 크기 변동과 반응형을 위한 동적 크기 변동 두가지가 있다. 정적이던 동적이던 크기를 변경.. FE/JavaScript 2020. 11. 27.

• 

  [javascript] Dom객체 id 존재여부 확인하기 javascript를 이용해서 페이지 내 특정 DOM 객체가 존재하는지 확인하는 방법 (id사용) 자바스크립트와 jQuery 각각의 사용 방법을 정리해본다. test라는 id를 갖고 있는 객체가 있는지 찾아보자 ! jQuery는 객체가 존재하지 않으면 length를 0으로 리턴한다. 이 점을 알고 원하는 조건에 맞게 알맞게 수정해서 사용하면 편리하겠다 :> ~~ FE/JavaScript 2020. 9. 17.

• 

  [javascript] 콜백(callback) 함수 사용이유 ,,? callback() 함수란 무엇이고 왜 사용하는가,,? 간단히 말하자면, 자바스크립트의 비동기 처리 방식의 문제점을 해결해주기 위해 특정 시점에서 호출이 되도록 사용하는 함수이다. javascript의 비동기 처리란 ? : 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성. 이 특성이 어떤 문제점을 야기하냐면 , , , ajax통신할 때를 예로 들어 보자 ! ^_^ 통신을 하고 받아온 data를 가지고 실행이 되어야 하는 test 함수가 있다고 가정해보자. getData(); test(); function getData() { //ajax 통신 } function test(){ alert("test"); } 이렇게 하면 어떻게 실행이 될까? . . .. FE/JavaScript 2020. 9. 16.

• 

  [javascript] html DOM control하기 javascript로 html DOM을 control하는 속성들의 사용방법에 대해 정리하려한다. document.getElementById("testId").innerHTML = "테스트"; .innerHTML을 사용하다가 속성을 제대로 알지 못하고 사용해 오류가 발생해 여러가지 속성들에 대해 파헤쳐 공부하고 정리한다. 먼저 innerHTML과 outerHTML의 차이를 알아보자 ! 차이점을 알고 사용하면 헷갈리지 않고 확실하게 구현할 수 있을 것이다. ▶ innerHTML : innerHTML에서 지정한 요소 태그를 제외한 안쪽(내부)를 가져온다. 자기 자신을 포함하지 않는다. ▶ outerHTML : outerHTML에서 지정한 요소 태그를 포함하여 가져온다. 자기 자신을 포함한다. 추가적인 속성을 .. FE/JavaScript 2020. 6. 23.

• 

  [javascript] js 파일생성으로 jsp 반복부분 간편하게 사용하기 코드를 좀 더 효율적으로 코딩하기 위해 jsp에서 자주 반복되는 ajax부분을 따로 JS파일로 빼려고 한다. 이 작업을 하는 가장 큰 이유는 코드의 재사용을 줄이기 위해서이다. 기존에는 Servlet에 request 요청을 하고 싶을 때마다 그 jsp 안에서 ajax코드를 다 써야한다. 하지만 공통으로 사용중인 ajax로 통신하는 부분을 js로 빼놓으면 jsp에서 ajax를 쓰고 싶을 때 해당 함수 호출만 하면되는 간편함이 생긴다. 시작해보자 ! 먼저 js파일을 만들어서 공통으로 사용할 함수를 생성해준다. 나는 ajax통신 부분을 ajaxFunc() 함수로 만들었다. //ajax 함수 - js파일에 생성 function ajaxFunc(url, param, callback){ console.log("js.. FE/JavaScript 2020. 6. 18.