자바스크립트의 타이머 함수에 대해서 알아보겠습니다. 여기에서 먼저 3가지 주요 function을 알아보겠습니다. 순번 선언 의미 1. setInterval() 일정 시간간격으로 특정 코드 실행 2. setTimeout() 일정 시간이 지난후 특정 코드를 딱 1번 실행 3. clearInterval() 실행중인 타이머(timer)함수를 정지 이렇게 3가지가 있는데요 실제 활용 예를 보겠습니다. 먼저 첫번째로 순번 1(setInterval())과 3(cearInterval())을 사용하여 간단한 초시계를 만들어보겠습니다. 시작, 중지, 초기화(0부터 다시시작)을 하는 버튼을 만들어주고 해당 초과 디스플레이되는 span태그도 하나 만들겠습니다. 초 : 0 각 버튼에 onclick을 통해서 실제 활용 이벤트를 ..
안녕하세요? 원주남자입니다~ 외부json데이터파일을 통하여 html table를 만드는 예시를 알아보겠습니다. 현재 아래에 설명할 예제는 json_data.json이라는 파일을 통해 데이터를 추출할 예정인데요. 일반적으로는 지금예시와는 달리 서버단에서 DB에 저장된 데이터를 가공하여 json데이터로 만들어서 처리하는게 많을 것 같습니다. json_data.json [ { "hp":"010-1234-1234", "name":"김원주", "address":"원주시 단계동" }, { "hp":"010-5234-1234", "name":"김서울", "address":"서울특별시 중랑구" }, { "hp":"010-7234-1234", "name":"김부산", "address":"부산광역시 해운대구" } ] hp..
안녕하세요? 원주남자입니다. $(this)는 일종의 변수, 선택자라고 볼 수 있겠는데요. 일반적으로 동일한 소스가 반복되는 네비게이션 메뉴, 탭, 아코디언메뉴, 리스트등에서 많이 활용되는 것 같습니다. 그럼 간단한 소스를 통해서 어떻게 활용되는지 확인해볼게요. btn이라는 class를 동일하게 가진 버튼들이 존재합니다. 현재는 어느버튼을 눌러도 class가 같기 때문에 .. 모든 버튼에 글씨가 변하는 것을 볼 수 있는데요. 이 this를 활용하여 타겟버튼만 변경되게 바꿔보면 button.click(function(){ $(this).val("눌렀어~"); }); 이 부분만 바꾸면되겠네요. 만약 이 방법을 안쓴다면 아래 예제소스와 같이 각 버튼마다 id를 별도로 주고... 각각의 이벤트를 만들어주는 번거롭..
안녕하세요? 오늘은 Each()함수에 대해서 확인해보겠습니다. Each함수는 for처럼 반복하면서 array이나 특정object/선택자를 검사/관리하는 함수라고 볼 수있는데요. 콜백함수의 인자로는 index(순번), item(데이터)가 있습니다. 사용방법은 크게 2가지 방법이 있다고 볼 수 있습니다. //1. 배열 $.each(배열객체, function(index, item)){ //하고 싶은 내용 }); //2. 선택자 $("선택자").each(function(index, item)){ //하고 싶은 내용 }); 좀 더 빠른 이해를 위해서 예제하나를 볼게요. 먼저 배열을 사용한 케이스입니다. var array_test = ["1","2","3"]; $.each(array_test, function(in..
안녕하세요? ^^원주남자입니다. 배열한 사용하는 몇가지 예제들을 통해서 배열을 다루는 방법을 알아볼게요~ 먼저 배열은 어떻게 선언을 할까요? ※1. 배열의 선언. var array_test1 = []; var array_test2 = ["1","2","3"]; var array_test3 = new Array(); 3개의 배열을 선언했는데요. 먼저 array_test1은 중가로만을 사용하여 내용이 없는 배열을 만들었고요. 2번째 array_test2같은 경우는 배열의 선언뿐만아니라 중가로내에 value까지 미리 정의를 해두었습니다. 3번째는 Array()라는 생성자를 통해서 배열을 선언하였고요. 그럼 배열에 값을 한번확인해볼까요? 확인방법은 console.log 라는 콘솔명령어를 사용하는 것인데요. 제 ..
안녕하세요? 원주남자입니다! 이번 시간에는 jquery를 사용하여 스타일을 지정하는 방법을 알아보겠습니다. 저번 시간에는 style코드를 head에 명세하고 class와 id를 통하여 css를 적용시켰는데요~ 이번에는 버튼 이벤트를 통하여 동적으로 css가 적용되는 것을 보겠습니다. https://wonjuman.tistory.com/12 [HTML&CSS]ID, Class의 차이 및 예제. 안녕하세요? 원주남자입니다. 오늘은 id와 class의 차이점과 그 활용예제를 보겠습니다. 위에 소스.. wonjuman.tistory.com (id, class를 사용한 스타일 적용 예제 필요하신 분 확인하세요~) 먼저 알아야 하는 것은 jquery의 css()라는 메서드입니다. 이 css() 메서드는 두 가지로 ..
