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

• js [jQuery] toggleClass() 메소드 알아보기 제이쿼리의 toggleClass() 메소드 매우 자주 사용됩니다. 이 메소드를 사용하면 원하는 요소에 새로운 클래스를 추가하거나 제거하기를 매우 쉽고 간단하게 반복할 수 있습니다.toggleClass()는 설정된 클래스명을 해당하는 요소가 가지고 있는지 판단하여 해당 요소가 있으면 이를 제거합니다. 반대로

  View : 20944 / Created : 2016-07-04
  
• js 제이쿼리ui dialog 모달 사용방법 자바스크립트의 제이쿼리ui에는 다양한 ui 플러그인이 존재하는데 이중에서 dialog 제이쿼리 ui 구현에 대하여 알아보자. 우선 다이얼로그를 만들게 되면 페이지에 팝업창을 띄우게 된다. 팝업창은 모달창 형태를 띄며 이를 만약 직접 만들 경우 시간 및 노력이 많이들지만 이 플러그인을 사용할 경우 매우

  View : 36593 / Created : 2016-07-01
  
• js [자바스크립트] localStorage, sessionStorage 클라이언트에 정보 저장 웹에서 데이터를 저장하는 방법 중 서버가 아닌 클라이언트에서 가능한 방법을 알아보려고 합니다.웹사이트의 정보를 저장하기 위해서 반드시 서버가 필요한 것은 아닙니다. 사용 목적에 따라 클라이언트 저장소 역시 좋은 역할을 할 수 있습니다. 일반적으로 클라이언트 저장소를 생각하면 가장 먼저 쿠기 저장소를 떠올리겠지만 html5에는 좀 더 효과적인 클라이언트

  View : 69251 / Created : 2016-06-24
  
• js [자바스크립트] console 객체에 대하여 알아보기 안녕하세요. 오늘은 console 객체에 대하여 알아보려합니다. console(콘솔 객체)가 가장 많이 사용되는 부분은 디버깅(debugging)할 경우가 많은데 이는 간편하게 출력정보를 확인하게 도와주기 때문입니다. console 객체는 몇 가지 유용한 메소드가 존재하며 이중에서도 많이 사용되는 log() 메소드는 특정정보를 인자로 넘겨주면 브라우저의 개발자 메뉴의 <span data-

  View : 6686 / Created : 2016-06-19
  
• js [JavaScript] 함수의 예약어 return이란 ? 오늘은 자바스크립트 함수에서 사용되는 예약어 return에 대하여 알아보겠습니다. 사실 함수를 작성하면 매우 자주 사용되는데도 불구하고 예약어가 무엇이고 어떤 것을 하는지 잘 모르는체 그냥그냥 사용해온 사람도 있을 것입니다. 저 역시 처음에 그 기능을 잘 몰랐었습니다. 아래는 예약어 return의 역할이 무엇이고 어떤 때에 사용하는지 알아보고자 합니다.<span

  View : 16712 / Created : 2016-06-18
  
• js [자바스크립트] 이벤트 버블링 제거방법 stopPropagation() 자바스크립트를 사용하여 이벤트를 구현할 때 발생가능한 문제점 중 하나로 이벤트 버블링 현상을 빼놓을 수 없을 것이다. 아래는 이벤트 버블링(Event Bubbling)이 무엇이고 왜 이런 문제가 발생하는지 알아볼 것이며 이를 해결하기 위한 방법에 대하여 예제를 통해 자세히 알아보고자 한다. 먼저 이벤트 버블링이 무엇인지 알아보자.이벤트 버블링이란이벤트 버블링은 보통 선택한 엘리먼트가

  View : 26408 / Created : 2016-06-15
  
• js ajaxStart() ajaxStop() 사용방법 및 예제보기 비동기 방식(AJAX)을 사용한 웹사이트 구현시 제이쿼리의 ajax()메소드를 많이 사용한다. 이때 AJAX의 요청이 시작 또는 완료될 경우 특정한 메시지나 문구를 방문자에게 알림창 등의 방식으로 보여주기 위하여 ajaxStart() 그리고 ajaxStop()메소드를 사용할 수 있다. 먼저 이 두가지 메소드를 간단하게 설명하

  View : 8596 / Created : 2016-06-13
  
• js [자바스크립트] 데이터 타입 상수란? 상수의 선언 및 특징 변수는 값을 저장하기 위해 가장 넓리 쓰이기 때문에 아시겠지만 상수는 모르시는 분들이 있을 것입니다... 이 상수는 변수와 다른 차이점을 가지는데요... 가장 큰 차이점이라면 상수는 변수와 달리 한번 설정하면 readonly 읽기만 하는 자료형을 말합니다. 다시말해 한 번 설정하면 절대 변하지 않는 값입니다. 그래서 가끔은 변수의 선언보다 상수가 더 유용할 수도

  View : 9567 / Created : 2016-06-01
  
• js [자바스크립트] jQuery 마우스의 위치, 좌표 확인, event() 자바스크립트를 사용하여 마우스의 위치, 좌표값을 확인하는 방법에 대하여 알아보려합니다. 아래에서는 가장 간단한 방법인 제이쿼리를 사용해 알아보겠습니다# 제이쿼리를 사용하여 마우스 위치 알아내기 만약에 현재 마우스 커서가

  View : 39322 / Created : 2016-05-31
  
• js [자바스크립트] switch 조건문 사용방법 자바스크립트에서 가장 많이 쓰이는 조건문(분기문)이 if문이겠지만 switch 역시 굉장히 많이 쓰이는 조건문 중 하나입니다. 조건문에 대하여 간단히 설명하자면.. 해당하는 조건이 맞는 경우에 정해진 구문을 실행하도록 만든 코드가 바로 조건문입니다.

  View : 32102 / Created : 2016-05-30
  
• js [자바스크립트] 오늘 하루만 팝업 띄우기 자바스크립트를 사용해 팝업창을 띄우는 방법은 그다지 어렵지 않습니다. window 객체의 open() 메소드를 사용하여 원하는 팝업을 한개 또는 다수 띄울 수 있죠. 하지만 만약 오늘 하루... 24시간 동안 팝업을 띄우지 않을 경우에는 어떻게 해야할까요? 아래는 24시간 동안 팝업을 띄우지 않는

  View : 24912 / Created : 2016-05-30
  
• js [자바스크립트] 난수, 랜덤 숫자 만들기 예제 자바스크립트를 사용하여 무의미한 랜덤한 숫자인 난수를 발생시키는 방법을 알아보고자 합니다. 먼저 난수(random number)는 왜 필요할까요? 난수는 다양한 곳에 활용할 수 있습니다. 그 경우는 굉장히 많으며 아래에서 자세히 알아보겠습니다.<span data-custom-style=

  View : 29751 / Created : 2016-05-30
  
• js [JavaScript] 이전 페이지로 돌아가기, history.back(), history().go() 자바스크립트(Javascript)를 사용해 이전 페이지로 이동하기 위한 방법에 대하여 알아보고자 합니다. 어떻게하면 이전에 방문했던 페이지로 바로 이동이 가능할까요? 아래에서 확인해보세요.# 자바스크립트 이전 페이지로 이동하는 방법이 경우 자바스크립트 객체인 <spa

  View : 85820 / Created : 2016-05-27
  
• js 자바스크립트 ajax 설명 및 예제보기 자바스크립트가 비동기방식의 ajax가 없었다면 꽃을 피웠다 얘기할 수 있었을까요? 재미있게 시작했지만 분명 자바스크립트에게 ajax, 비동기 방식의 호출은 가장 큰 발전의 계기가 되었음이 틀림없습니다... 아래는 이 중요한 ajax에 대하여 하나하나 알아보려합니다. 먼저, ajax가 무엇인지 알아보고 자바스크립

  View : 15039 / Created : 2016-05-26
  
• js 자바스크립트 변수선언시 팁 및 정보 자바스크립트는 매우 좋은 언어입니다. 오늘은 변수 선언시 간단하게 선언할 수 있는 변수선언 팁에 대하여 알아보려고합니다. 먼저 일반적인 변수의 선언 방법과 오늘 알아볼 분기문에 따른 변수 선언시의 약식 표현... 이 둘의 차이점에 대하여 알아보겠습니다. 그전에 일반적인 경우 우리는 어떻게 변수를 선언할까요?아래는 변수를 선언의 방법입니다.<span

  View : 3694 / Created : 2016-05-26
  
• js 자바스크립트 배열 array의 이해 그리고 예제 자바스크립트에는 많은 데이터 타입이 존재하며 그 중 하나로 배열(array)이 존재합니다. 배열은 자바를 비롯한 대부분의 언어가 가지는 데이터 타입으로 자바스크립트만의 특별한 자료 구조는 아닙니다. 그렇다면 배열이 사용, 선언되는 경우는 언제일까요?

  View : 56843 / Created : 2016-05-18
  
• js 이벤트 함수에서 e 그리고 window.event 구문 이해하기 자바스크립트의 이벤트가 발생하는 경우 우리는 e 또는 window.event가 사용된 모습을 자주 볼 수있다. 이 두가지 키워드가 어떻게 사용되고 이벤트 안에서 어떤 일이 일어나는지 자세히 알아보고자 한다.먼저 아래의 코드를 보자. 아래 코드는 일반적인 이벤트 함수를 작성중인 코드로

  View : 7282 / Created : 2016-05-17
  
• js [자바스크립트] json 문법에 대하여 이해하기 오늘은 데이터 타입의 하나로 매우 넓리 사용되는 JSON 타입에 대하여 알아보려한다.json은 데이터의 타입 중 하나로 잘알려진 XML과 함께 많이 사용되고 있다. 이런 json은 서버와의 데이터 통신시 전달되는 데이터로 많이 쓰이고 비동기 방식의 ajax() 메소드들과 함께도 많이 사용된다.처음

  View : 10385 / Created : 2016-05-16
  
• js [JavaScript] Input 태그의 체크여부 확인하기, 체크값 불러오기 오늘 알아볼 내용은 입력폼 중 하나인 input 태그가 체크박스 또는 라디오 타입으로 어떤 값을 가지고 있을때 이를 체크하였는지 확인할 수 있는 다양한 방법에 대하여 알아보고자 한다. 방문자가 이를 클릭했을경우 이를 불러오기 위한 방법은 어떤 것이 있을까?우선 순수 자바스크립트의 방법을

  View : 106546 / Created : 2016-05-14
  
• js 이메일 주소 검증 스크립트 정규표현식 자바스크립트의 정규표현식은 프로그래밍 언어가 가지는 가장 큰 기능중 하나입니다. 오늘은 정규표현식을 사용하여 이메일을 검증하는 함수를 만들어 보려합니다.# 이메일이 올바른지 검증하는 함수그런데 왜 이메일 검증이 필요할까요?<span style="fo

  View : 40182 / Created : 2016-05-12
  
• js [자바스크립트] 다수의 배열 병합, 복수 배열 합치기 다수의 배열, 여러개의 배열값이 존재하는 경우 이를 하나로 합치거나 병합하기 위해서 concat() 함수를 사용할 수 있습니다. 이 함수는 다수의 배열을 하나의 값으로 병합합니다. 다시말해 배열값이 여러개인 경우 이를 하나로 합칠 수 있게됩니다. 아래는 간단한 사용방법입니다.<span data-custom-style="ct01"

  View : 33289 / Created : 2016-05-07
  
• js 드래그하여 영역 및 텍스트 복사 안되도록 막는 방법 오늘 알아볼 내용은 특별한 요소 및 텍스트를 드래그 하여 선택하는 것을 막기위한 방법에 대하여 자세히 알아보도록 한다. 어떻게 하면 방문자의 영역 복사를 막을 수 있을까? 먼저 이런 경우가 언제 필요할까?이유야 많을 수 있겠으나 자신의 콘텐츠가 다른 사람에게 손쉽게 사용되는 것을 막기 위함도 하나의 이유로 볼 수 있을 것이다. 물론 소스보기 등의 방법을 막을 수는 없지만 간단한 방법을 사용해 복사하는 등의 방법은 못하도록 하는 최소한의 예방책이라 할

  View : 3379 / Created : 2016-05-06
  
• js 제이쿼리 insertAfter() 알아보기 jQuery 메소드중 하나인 insertAfter()에 대하여 알아보자. insertAfter()가 어떤 기능과 특징이 있는지 알아보고 after() 메소드와는 무엇이 다른지도 알아보겠다. 먼저 아래는 insertAfter()가 무엇인지 설명한 내용이다.<b

  View : 3006 / Created : 2016-05-06
  
• js 파일 드래그하여 드랍시 이벤트 무시, preventDefault 자바스크립트를 사용해 파일을 드래그앤 드랍하여 서버에 전송하기 위한 입력폼을 만들어보자. 이를 위해서 특정 요소 위해 파일을 드래그 후 드랍해야하는데 나타날 문제는 다음과 같다.# 드래그앤드랍시 브라우저 기본 이벤트 발생하여 페이지 전환됨문제는 파일을 브라우저에 올릴 경우 브라우저가 가진 기본 이벤트가 실행되는데 있다. 정상적으로 구현하기 위해서는 이런 디폴트 이벤트를 제거하는 방법이 필요하다.# 이벤트 제거하기 위한 함수 코드보기<div tabindex="-1

  View : 3585 / Created : 2016-05-03
  
• js href 속성에 javascript void:(0) 사용하는 이유 웹페이지를 보면 자바스크립트의 코드인 javascript:void(0)를 인라인 형태로 사용된 것을 자주 볼 수 있다. 이 코드의 역할은 무엇이고 어떤 경우에 사용되는지 알아보도록 하겠다. 먼저 이 코드는 어디서 볼 수 있을까? 바로 내부링크가 위치한 a 태그의 속성으로 사용된 것을 흔히 보게된다. 예를

  View : 31780 / Created : 2016-05-02
  
• js 가장 잘못 이해되고 있는 언어, 자바스크립트 이야기  이 글은 자바스크립트의 가장 유명한 사람인 더글라스 크락포드의 글을 읽고 적은 내용이다. 더글라스 크락포드는 제이슨(JSON) 형식의 창시자로 아마 많은 분들이 이미 이 글 및 이 책에 대하여 알고 있을 것이다. 그는 '자바스크립트 핵심 가이드'라는 책의 저자이기도 하다.<span d

  View : 1987 / Created : 2016-04-28
  
• js ECMAScript 무엇이고 자바스크립트는 같은 것일까? 차이점은? 우리가 알고있는 자바스크립트(Javascript) 그리고 ECMAScript는 다른 것일까? 다르다면 무엇이 다른지 알아보고자 한다.ECMAScript는 1995년 SUN과 넷스케이프에서 개발하고 발표한 스크립트언어의 이름이다. 이는 이름이 Mocha로 바뀌고 다시 LiveScript로 바뀌었고 그 뒤에야 현재의 자바스크립트로 불리게 되었다. 그런데 클라이언트 스크립트 언어를 MS에서도 만들면서 <span data-custom-styl

  View : 906 / Created : 2016-04-28
  
• js 자바스크립트 한글이 포함되었는지 찾는 정규표현식 알아보기 자바스크립트 언어뿐 아니라 프로그래밍 언어의 가장 강력한 부분 중 하나가 바로 정규표현식의 사용일 것이다. 이런 정규표현식을 사용할때 영문 또는 숫자 사용과는 달리 한글 사용 또는 혼용시에는 조금 더 복잡한 과정이 필요하다.아래는 한글이 포함된 경우 이를 알아내는 정규표현식에 대하여 알아보려한다. 정규표현식의 방법은 편의상 regexp 변수에 저장하도록 하겠다. 아래 함수를 통해 특정 텍스트가 한글을 가지고 있는지 알아보자<

  View : 7712 / Created : 2016-04-28
  
• js 자바스크립트의 in 연산자 for in 반복문 사용하기 자바스크립트는 in 연산자를 통해 객체가 가진 프로퍼티나 메소드가 맞는지의 여부를 확인할 수 있다. 다시말해 진짜 이 값을 가진 객체인지 판별해주는 연산자이다.먼저 간단한 예제를 통해 알아보자. 만약 장난감이란 객체를 만들고 해당하는 프로퍼티가 장난감 객체에 해당하는지 알아보려면 다음과 같이 수행할 수 있을 것이다.toy = new Object;toy.car = "sonata"toy.plane = "drone"위 예제를

  View : 2549 / Created : 2016-04-23
  
• js [자바스크립트] instanceof 연산자를 사용해 생성자 알아보기 자바스크립트의 객체를 배우게되면 함께 배우는 용어들이 존재한다. 그 중에서 인스턴스에 대하여 알아보고 함께 사용되는 연산자 instanceof를 알아보자.# 인스턴스란?인스턴스란 객체에서 생성된 또 다른 객체를 의미한다. 자세한 내용은 아래 링크를 확인하면 더욱 자세한 내용을 알 수 있으니 참고하자!*

  View : 5365 / Created : 2016-04-20