LATEST POSTs 최근 등록된 포스팅 목록 최신순

---

인기순

• js 새로운 창 닫는 방법, window.close() 자바스크립트를 통해 브라우저 창 또는 탭이 열린 경우 이를 닫는 방법에 대하여 알아봅니다. 어떻게 하면 자바스크립트에서 창을 닫는 것이 가능할까요?# 자바스크립트 브라우저 닫는 방법, 새 창 또는 새 탭현재 브라우저 창이 열린 경우 다음의 방법을 통해 열린 창을 닫을

  View : 24837 / 2015-10-19
  
• js [제이쿼리] window.open() 에서 부모요소를 선택 및 변경하기 현재 윈도우에서 새로운 창을 띄울 경우 상황에 따라 자신을 불러온 부모창에 어떤 변화를 줄 경우가 있습니다. 이런 경우는 아래의 경우가 있을 수 있죠.a. 띄운창에 특정 이미지를 선택시 그 값을 부모창에 넣는 경우b. 띄운창에 특정 텍스트값을 부모창에 보내는 경우위와같은 동작을 구현하기 위해서는 자바스크립트를 사용할 수 있고 간단하게 jquery를 사용해 구현이 가능합니다. 이때 사용할 키워드가 opener입니다.window.o

  View : 8854 / 2015-10-15
• js ajax를 사용해 서버에 데이터 저장하는 방법 서버와 통신하기 위해 동기식 또는 비동기식 방법을 택할 수 있습니다. 아무래도 비동기식 방법은 서버에 부하를 덜어주기 때문에 유용한데요... 제 블로그의 경우 포스팅을 수정하거나 등록시 기존의 동기식 방법을 비동기식으로 변경하였습니다. 변경을 통해 얻을 수 있던 장점들은 아래와 같습니다.! 비동기식 변경 후 장점<

  View : 17049 / 2015-10-14
• js [제이쿼리] 시간지연 함수 delay() 일정시간 뒤에 콜백함수를 실행하는 방법에는 setTimeout() 함수가 사용됩니다. 이런 지연 함수는 제이쿼리에도 동일하지는 않으나 일정시간이 지난 후 애니메이션 큐를 지연하여 실행하기 위한 제이쿼리의 시간지연 함수는 바로

  View : 32371 / 2015-09-14
  
• js [제이쿼리] 부모요소 선택하는 방법 parent(), parents(), closest() 제이쿼리(jQuery)를 사용하여 부모요소를 선택하거나 찾는 방법을 알아봅니e다. 어떻게 해야할까요? 부모 요소에 접근하는 다양한 방법에 대하여 알아보고자 합니다.# 제이쿼리를 사용하여 부모요소 선택, 찾는 방법먼저 부모 요소를 선택하는 방법은 제이쿼리에도 몇 가지가 있습니다. 그 중에서 가장 자주 사용되는 방법

  View : 93617 / 2015-09-11
  
• js [자바스크립트] 지역변수, 전역변수 이해하기 지역변수(local variable)와 전역변수(global variable)가 무엇이고 이를 구분하는 목적등에 대하여 알아보고자 한다.# 지역변수와 전역변수란 무엇인가?; 지역변수는 일정한 또는 지정된 지역(스코프 scope 라고 함)에서만 사용할 수 있는 특정한 변수를 의미한다. 이에반해 전역변수는 모든 영역에서 사용할 수 있는 변수를 말한다. 결국 전역변수를 선언하면 코드의 {}(블록영역), 내부함수, 외부함수 등의 영역에 상관없이 어디서든 불러와 사용할 수 있다. 하지만 지역변수는 문법적

  View : 12656 / 2015-08-21
• js [제이쿼리] DOM 요소를 불러온 뒤 제이쿼리를 실행하는 방법 제목이 무엇을 의미하는지 헤깔릴 여지가 있습니다. 아래의 내용은 순수 자바스크립트 또는 제이쿼리를 사용하여 스크립트 코드를 작성할때 그 코드가 DOM요소를 모두 불러온 뒤 실행될 수 있도록 미리 선언하는 코드입니다.! 만약 DOM 요소(태그들...)가 먼저 로딩되지 않

  View : 2469 / 2015-08-14
• js [자바스크립트] 문자타입 숫자로 변환하는 방법 자바스크립트에서 문자타입의 데이터를 숫자타입으로 변경하는 방법에 대하여 알아보려 합니다. 이때 Number()를 사용하여 변환이 가능합니다.Number(변환할 값)그럼 아래 예제를 통해서 쉽게 알아보세요.test = "123";// test 변수에 문자타입 123이 저장되어 있음typeof(test);// 위 변수의 타입을 확인, String 즉 문자임

  View : 4004 / 2015-07-15
• js 객체를 JSON 형태로 변환하는 방법 JSON 객체가 가진 메소드중 stringify()는 객체타입을 JSON 타입으로 변경할 수 있게도와줍니다. <div tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet" data-cke-

  View : 17246 / 2015-07-09
• js [제이쿼리] 비동기식 호출 ajax() 메소드 알아보기 요즘의 웹에서 비동기 방식의 ajax 호출이 웹환경에서의 꽃이라 할만큼 중요한 부분을 차지합니다. 그만큼 비동기 방식의 통신이 많이 사용되고 반드시 필요하기 때문이죠. 제이쿼리에서 ajax를 사용한 비동기 방식에 대하여 간단하게 알아보고 어떻게 사용하는지 아래에서 알아보겠습니다.# ajax란

  View : 9375 / 2015-07-09
  
• js [제이쿼리] getJSON() 메소드 비동기 데이터 받아오기 제이쿼리는 ajax() 함수외에도 다양한 단축메소드가 존재합니다. 이중에서도 getJSON() 메소드에 대하여 알아보고자 합니다. 참고로 ajax 단축 메소드는 이외에는 get(), post(), load()등의 메소드가 존재합니다. <span data-c

  View : 12245 / 2015-07-09
  
• js [자바스크립트] 스코프 scope 그리고 콘텍스트 context 이해 자바스크립트를 배우면서 개념을 이해하는 것과 용어를 이해하는 것이 매우 어렵습니다. 특히 다른 언어를 접하지 않은 경우 많은 글들이 잘 모르는 용어를 사용하기도 하는데 일반적으로 엔지니어 출신이 아니라면 알 수 없는 용어도 참 많은게 현실입니다. 예를들어 C 또는 자바를 배운적이 없는데 기본이라 생각되는 이 언어와 비교를 하면서 설명하는 서적들이 많습니다. 이는 비전공자를 더 어렵게 만들고 중도 탈락자를 만들기도 하죠.하지만 결론은 책은 모든 것을 말해줄 수 없다는 점과 어떤 책도 100% 만족할 수는 없다는

  View : 2832 / 2015-07-08
• js [자바스크립트] call() apply() 사용해 함수 this 값 지정하는 방법 자바스크립트의 함수를 실행하는 방법은 아래와 같습니다. 예를들어 아래와 같이 show라는 이름의 함수가 있다면? show()라고 소괄호를 실행합니다.function show(name) { return name; }// 함수 실행show('webisfree')이때 함수 또는 객체 내부의 함수인 메소드를 실행하는 방법으로 call(), apply()를 사용할 수 있습니다. 그럼 call()과 apply()는 언제

  View : 9927 / 2015-07-08
• js [자바스크립트] arguments.callee 속성 알아보기 자바스크립트의 재귀함수 등에 자주 쓰이는 arguments 객체의 callee 속성에 대하여 알아보려 합니다.자바스크립트의 함수는 arguments 객체를 가지고 있습니다. 이를 사용하면 현재 실행중인 함수 개체를 반환하는데 함수 실행시 넘어온 인지(arguments)는 물론 callee()를 사용해 재귀함수로써 반복도 가능하게 됩니다.arguments.callee()</sp

  View : 7130 / 2015-07-08
• js [자바스크립트] 느낌표로 시작하는 자기 호출 함수 알아보기 뜬금없지만 함수는 1급 객체입니다. 자기 자신을 호출하거나 다른 함수의 매개변수가 되기도 하고 다른 함수를 반환할 수도 있습니다. 느낌표로 시작하는 함수문은 자기 호출함수의 형태중 하나입니다. 이 외에 두가지 형태의 자기 실행 함수가 있죠.! 자기호출 익명함수(Self-invoking anonymous function)이란...익명함수는 말그대로 함수의 이름이 없는 함수를 말합니다. 자바스크립트는 이름이 없는 함수인 익명형수 형태로 사용이 가능하며 대부분 다른 함수의 매개변수로 사용됩니다

  View : 9903 / 2015-07-08
• js [제이쿼리] 화면 그리고 부모로부터 상대적인 위치 알아내기, offset, position 제이쿼리는 특정 요소의 상대적인 위치를 구할 수 있는 매우 효과적인 메소드를 지원하는데 그 중에서도 아래 두 메소드를 사용하면 매우 간단하게 구할 수 있다.$(선택요소).offset();$(선택요소).position();만약 test라는 클래스 명을 가진 요소가 있을 경우 그 요소의 상대적 위치를 구하기 위해 아래의 방법을 사용한다.$('.test').offset();// 문서로부

  View : 2383 / 2015-07-07
• js [자바스크립트] 클로저를 활용하여 setTimeout을 실행하는 방법 자바스크립트의 클로저(Closure)를 이해하고 이를 활용해 setTimeout() 함수에서 일어날 수 있는 일을 예측, 발생가능한 이슈를 수정하는 방법에 대하여 알아보려합니다.# 자바스크립트의 클로

  View : 11145 / 2015-07-07
  
• js 제이쿼리 속도 개선하는 방법 및 팁 자바스크립트의 제이쿼리를 사용할 경우 어떻게 해야 불필요한 코드를 없애고 속도를 향상시킬 수 있는 방법에 대하여 정리하였습니다.# DOM요소를 찾을때 태그 또는 클래스(class) 단위로 선택하는 것보다 아이디(id)값을 활용할 것예를들어 <body id="bodyId" class="bodyClass">라는 태그가 있는 경우 $('body'), $(''.bodyC

  View : 3729 / 2015-07-07
• js [자바스크립트] 정규표현식 이미지 또는 파일 확장자만 가져오기 자바스크립트를 사용하여 만약 파일의 확장자(이미지라면 jpg, gif, png를 말합니다) 값만 불러오게 하려면 어떻게 해야할까요? 아래에서 알아봅니다.# 자바스크립트 파일 이름의 확장자만 가져오기생각할 수 있는 방법 중 가장 쉬운 방법은 바로 <span data-custom-style="ct

  View : 9740 / 2015-07-03
• js [자바스크립트] 인접한 형제요소를 쉽게 찾는 방법 순수 자바스크립트를 사용해 인접한 형제 요소를 찾는 방법은 간단하지 않습니다. 하지만 제이쿼리 라이브러리의 + 결합자를 사용하면 매우 쉽게 형제 요소를 찾아 반환해 줍니다. 사용방법은 아래와 같습니다.$('기준요소 + 인접한 형제요소')예를들어 아래와 같은 코드에서 인접한 h2 코드의 형제요소 p코드를 찾는다고 할 경우 다음과 같습니다. 찾은 코드는 폰트색상을 빨간색으로 변경하겠습니다.<b

  View : 5400 / 2015-07-02
• js [자바스크립트] 선택한 요소 중간에 위치시키는 방법, 예제보기 요소를 중간에 위치시킨다? 가로정렬은 상대적으로 간단하지만 세로정렬은 쉽지 않은 부분이 있습니다. 자바스크립트를 사용해 선택한 특정요소를 중간에 위치시키는 방법을 알아보겠습니다.먼저 아래 예제를 봐주세요!! 선택요소 세로 정렬 소스 코드보기<body><div id='popup_win'>TEST<

  View : 2819 / 2015-07-02
• js [자바스크립트] 정규표현식 설명 및 예제 정규표현식은 두가지 표기 방법이 있습니다. 하나는 리터럴 표기에 의한 방법으로var pattern = /abcdf/;두번째는 RegExp 객체를 사용하는 방법입니다.var pattern = RegExp('abcdf');보는 것은 매우 다를 수 있지만 둘 다 정규표현식에 필요한 인스턴스를 만들어 사용할 수 있습니다. 사실 정규표현식은 다루어야 할 부분이 매우 많습니다. 하지만 매우 복잡한 코드를 한줄로 줄일

  View : 3789 / 2015-07-02
• js 자바스크립트 클로저 Closure 이해하기 (업데이트 중입니다....)자바스크립트를 배우게되면 클로저(Closure)에 대하여 한 번쯤은 들어보게됩니다. 또한 코딩 과정에서 자신도 모르게 클로저가 나타날 수도 있죠. 이처럼 클로저는 자바스크립트를 사용하다보면은 꼭 알아야하는 중요한 부분 중 하나가 되었습니다. 그렇다면 아래는 클로저에 대하여 자세히 알아보고 클로저가 어떻게 생성되는지 함께 알아보고자합니다. ! 왜 클로

  View : 7287 / 2015-06-25
• js [자바스크립트] 배열에 값 앞 또는 뒤에 추가하기, unshift(), push() 자바스크립트에서 배열에 새로운 값을 추가하고 싶은 경우가 있다면 어떻게 해야할까요? 원하는 값을 앞 또는 뒤 원하는 위치에 아래 두 가지 함수를 사용해 간단히 추가할 수 있습니다.# 자바스크립트 배열의 앞 또는 뒤에 추가 방법만약 test라는 이름의 변수가 있다면

  View : 136845 / 2015-06-22
  
• js [자바스크립트] 배열 또는 문자열에 indexOf() 사용한 특정 문자 검색 자바스크립트에서 원하는 문자열을 찾거나 배열의 값을 찾는 강단한 방법으로 indexOf() 함수가 사용됩니다. 아래에서 더 자세하게 알아봅니다.# 자바스크립트 indexOf() 알아보기내장함수 indexOf() 함수는 문자열에서 원하는 문자열을 검색하여 찾거나 아니면 배열에

  View : 202283 / 2015-06-22
  
• js [자바스크립트] 생성자 함수의 확인, constructor 속성 자바스크립트의 세계관을 이해한다... 제가 너무 좋아하는 문구 중 하나로 읽었던 책 중에서 '자바스크립트를 깨우치다'에 나오는 문구입니다. 생각해보면 요즘은 잘 만들어진 플러그인, 라이브러리가 홍수와 같죠... 사용법만 조금만 안다면 충분히 복잡한 형태의 인터페이스나 애니메이션을 쉽게 구현 할 수 있게되었습니다. 다시 말해 자바스크립트를 (깊게) 이해하지 않아도 레퍼런스만 잘 찾아보면? 원하는 무엇이든 구현할 수 있죠.! 자바스크립트를 깊히 이

  View : 5619 / 2015-06-13
• js [자바스크립트] if 문에서 요소의 존재 여부 확인 방법 자바스크립트에서 만약 해당하는 요소가 존재하지 않으면 오류가 발생하게됩니다. 해당 노드(Node)가 존재하지 않기 때문이죠. 해당 요소가 display 또는 visibility를 사용해 실제로는 존재하지만 보이지 않는 경우라면? 당연히 에러가 발생하지 않겠죠. 하지만 서버사이드 언어를 통해 브라우저에 출력되지 않게 한다면 스크립트 언어가 발생할 수 밖에 없을 것입니다. 이를 피하기 위해서는 먼저 해당 요소의 존재 여부를 확인해야합니다.<div cla

  View : 11915 / 2015-06-09
• js [자바스크립트] cloneNode() 함수를 사용해 노드 복제하기 자바스크립트에서 동일한 노드(엘리먼트)가 다수 필요한 경우 어떻게 하면 DOM에 효과적으로 그릴 수 있을까요? HTML을 반복 사용하는 것도 가능하지만 자바스크립트를 사용하여 cloneNode() 함수를 사용할 수 있습니다. cloneNode()는 쉽게 엘리먼트, 노드를 복제하여 줍니다. 아

  View : 25502 / 2015-05-06
  
• js [제이쿼리] end() 메소드, 이전 요소 돌아가기 선택하기 이전에 선택했던 요소로 돌아가기 위한 방법으로 end() 메소드를 사용할 수 있습니다. 이 메소드의 경우 제이쿼리가 체인으로 길게 연결된 경우 유용하게 사용되기도 합니다..end()// 이전 선택요소를 반환! end() 예제소스 코드보기<html><head><style type="text/css"></style><b

  View : 5194 / 2015-04-29
• js [자바스크립트] 드래그로 선택된 영역의 텍스트 바꾸기 자바스크립트를 사용하여 마우스로 드래그 한 경우 해당 텍스트, 문자열에 대하여 어떤 일을 수행하는 경우가 많더군요. 그래서 드래그한 부분을 변경하거나 앞 또는 뒤에 추가, 삭제 등등 여러가지 일을 할 수 있는 소스를 만들어봤습니다. 순수 자바스크립트로 작성하였으며 자세한 기능은 아래를 참고하세요.<span data-cus

  View : 10786 / 2015-04-29