본문 바로가기

전체 글

 (251)
[jQuery]Ajax 제이쿼리에서 에이젝스를 사용하는 방법은 다음과 같은데 여기서 살펴볼 것은 data : $('form').serialize()임 속성 data는 우리가 ajax를 통해 서버로 전송할 데이터를 말함 속성값으로 form태그를 넣었고 .serialize()라는 메소드를 이용했는데. 이는 태그의 value값을 리턴하게 됨 여기서는 form태그의 자식 태그인 option의 value값들을 리턴함 위 코드에서 dataType이 추가 되었는데 여기서 dataType을 json이라고 값을 주었다. 이는 무엇을 의미하냐면 이전에는 parse를 통해서 json객체의 속성들과 속성값들을 분류했는데, dataType을 지정하면 이것들을 제이쿼리에서 대신 처리해 준다.
[JavaScript] JSON(2) 자 그럼 JSON을 왜 사용하는가에 대해서 느껴보자. 위의 코드를 살펴보면 timezones이라는 객체에 행렬을 담았다. 첫번째 값은 Asia/Seoul 두번째 값은 America/New_York 그리고 이 값을 출력하는데 이때 implode메소드를 이용하여 각 행렬 사이에 ,를 추가 시켰다. 결과 적으로 Asia/Seoul,America/New_York가 문자열로 리턴된다. 다음 html코드는time.php를 리턴받는데 if문 이하부터 살펴보면 tzs객체에 xhr에 php가 echo로 출력하는 값을 리턴받는다.그리고 그 값을 split메소드로 ,를 기준으로 행렬로 만든다. 그리고 빈 문자열을 _str에 담고 반복문을 통하여 행렬들을 _str에 하나씩 담고 마지막에 ul태그도 담아서 Aisa/SeoulA..
[JavaScript] JSON(1) JSON(Javascript Object Notation)의 약자로 자바스크립트에서 객체를 만들 때 사용하는 표현식. 다음은 그 예시인데 일단 첫번째 단락은 info라는 자바스크립트 객체를 만드는 것이다. 그런데 이것은 제이슨 객체로 만드는게 적합하지 않다. 그래서 두번째 단락 처럼 저것들을 문자열로 바꾼다. 이때 역슬래쉬들은 단락을 나누는(엔터를 인식)것을 인식하기 위함이다. 이후에 JSON이라는 자바스크립트 객체의 메소드 parese라는 것을 이용하면 자바스크립트 객체 infoobj에 제이슨 형식의 객체로 만들어진다. 이후에 값들을 불러 오거나 할 수 있다. 그리고 맨 마지막 단락의 stringify를 이용하면 객체화 되어있는 문법들이 문자열로 출력이 된다. 이것이 필요한 이유는 ajax와 함께 사용..
[Javascript]Ajax Asynchronous JavaScript and XML 비동기적 자바스크립트 비동기적 - 따로따로 일한다? 웹 페이지에 필요할 때만 로드 되는 부분들을 그냥 두었다가 로드가 필요할 때 불러낼 수 있게 하여 문서를 불러올 때의 부담을 줄여줌. 위의 코드는 사용 예시이다. 변수xhr httprequest객체를 넣고 그 객체를 open메소드를 이용해서 여는데 첫번 째 파라미터는 방식 두번째 파라미터는 여는 대상이다. 이는 각각 form의 method와 action과 같은 역할을 한다. 그러고 나면 onreadystatechange를 이용하여 함수를 열고 readyState === 4(준비를 완료했는가?) 와 xhr.status ===200(성공적으로 수행했는가?, 실패는 404)가 만족하면 xhr객체의 내용..
[jQuery]이벤트 , on , off 제이쿼리와 바닐라자바스크립트의 addEventListener의 차이는 위와 같다. 제이쿼리의 이벤트 메소드인.on()에 대해 알아보자. W3C의 설명은 다음과 같다. .on(events[selector1,selector2][data], handler(eventObject)) 우리가 아는 것은 events와 hander(eventObject))이다. 그렇다면 [selector][data]는 무엇을 의미할까? [selector]는 일종의 필터링 기능을 한다. 위 코드가 selector를 추가한 코드이다. ul태그의 a와 li에 이벤트를 발생시킨다. 그 예로 콘솔 값의 this는 ul태그가 아닌 이벤트가 발생하는 a와 li이다. 위 코드는 만약 $('body')부분이 ul태그였다면 실행되지 않았을 것이다. 하..
[Javascript] 마우스 이벤트 이벤트 타입웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다.click 클릭했을 때 발생하는 이벤트. dblclick 더블클릭을 했을 때 발생하는 이벤트mousedown 마우스를 누를 때 발생mouseup 마우스버튼을 땔 때 발생mousemove 마우스를 움직일 때mouseover 마우스가 엘리먼트에 진입할 때 발생mouseout 마우스가 엘리먼트에서 빠져나갈 때 발생contextmenu 컨텍스트 메뉴가 실행될 때 발생키보드 조합마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용한다. 이 때 사용하는 프로퍼티는 아래와 같다.event.shiftKeyevent.altKeyevent.ctrlKey마우스 포인터 위치마우스 ..
[Javascript]문서 로딩 위 코드의 콘솔 결과값은 NULL이다. 그 이유는 태그가 나오기도 이전에 엘리먼트 값을 얻으려고 하기 때문이다.즉 순서의 문제이다. 이 경우에 보통에는 바디태그 아래 혹은 모든 엘리먼트들이 다 입력 된 후 마지막에 script를 입력하면 된다. 하지만 onload메소드를 이용하면 이 문제를 위치 변경 없이 해결 할 수 있다. 다음과 같이 window객체의 속성인 onload를 이용하여 엘리먼트를 불러 들였다. 다음은 이벤트 리스너 방식 위의 두 예시의 문제점은 onload , load는 모든 HTML문서의 작업이 끝나고 나서야 실행된다는 것인데, 이는 이미지 다운로드와 같은 오래 걸리는 동작까지 기다려야 한다는 점이다. 그럴 때 DOMContentLoaded를 이용하면 쉽게 문제를 해결 할 수 있다. 이..
[Javascript] Form Form 은 사용자가 입력한 정보를 서버로 전송하게 해주는 HTML태그 이벤트 1. submit 입력한 값을 제출 하는 이벤트를 가진다. 위의 예시는 입력한 값이 없을 때 제출하게 되면 경고창이 뜨게 하는 코드이다. 일단 폼 태그의 엘리먼트를 t라는 객체로 확보하고 t에 이벤트 리스너 메소드를 이용한다. ( 폼의 이벤트 리스너 속성) 그리고 첫번째 인자는 폼태그의 속성값중 하나인 submit 두번째 인자는 함수를 입력한다. 조건문을 이용하여 value 프로퍼티의 길이가 0인지 확인 하여 처리한다. event.prventDefault는 이벤트의 작동을 중지시키는것! 2. change 만약 input의 값이 변화했을때 발생하는 메소드 form태그 하위 태그인 input태그 엘리먼트를 변수 t에 저장하고 이벤..

티스토리툴바