비동기 방식을 사용하기 위해 Ajax의 맛을 봐보자! 전체적인 흐름! 하나하나 무슨 소리인지 알아보자. js가 Ajax를 사용할 때 쓰는 객체인 XMLHttpRequest를 생성! 객체이므로 new를 통해 만들어 준거다! XMLHttpRequest 객체의 open() 메서드를 사용해 해당 요청의 전송 방식, 전송 위치, 방식 을 지정해준다. 배치 순서는 → open(전송 방식 , 전송 위치 , 방식) 형태로! 역시 XMLHttpRequest 객체의 send() 메서드를 통해 XMLHttpRequest를 보낼 수 있다! 성공적으로 보내질 경우 responseText란 속성으로 답이 오는데, 요 녀석도 XMLHttpRequest 객체의 속성! 아하... 이를 통해 지난번 PNU Quiz에서 사용된 Ajax ..

문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다! 1. DOM 관련 용어 문서 객체 모델(DOM)! 그런데 태그니, 문서 객체니, 노드니 하는 용어가 등장한다. 우선 태그는? 우리에게 익숙한, HTML 페이지에 존재하는 , 같은 녀석들! 이 태그를 js에서 이용할 수 있는 객체로 만들면? → 요놈이 문서 객체다! (var header = document.getElementById('header')시 header가 문서 객체! document 객체를 사용한걸 이제 안다!) 마지막으로 노드 란... HTML 페이지는 위 그림처럼 트리 모양으로 나타낼 수 있다. 이 때 그림 속 각 요소들을 노드 라고 부른다! 노드는 요소 노드와 텍스트 노드로 구분할 수 있는데, 요소 노도는 ..

브라우저 객체 모델(BOM)이란? 웹 브라우저와 관련된 객체의 집합! 그림처럼 최상위의 window, 하위의 location, navigator, history, screen, document 객체가 있다! 이중 document 객체와 관련된 객체의 집합을 DOM이라 부르는 것! 1. window 객체 브라우저 기반 js의 최상위 객체인 window 객체! open() 메서드를 통해 새로운 window 객체를 생성할 수 있으며, 만들어진 객체에 접근할 수도 있다. 역시나 다양한 기본 메서드를 제공하고 있으며, 위 예시처럼 작성하면... 새로운 window 객체가 뜨며, 1초마다 왼쪽으로 10px 아래쪽으로 10px씩 이동한다! 참말로 신기하고만. 2. screen 객체 다음은 운영체제 화면의 속성을 가지..

JavaScript에 내장된 객체 중 가장 기본적인 내장 객체를 살펴보자! 1. 기본 자료형과 객체의 차이 변수 primitiveNumber은 기본 자료형 숫자, 변수 objectNumber은 객체에 해당한다. 이 둘을 출력해보면... 같은 값이다! 심지어 속성과 메서드는 객체가 가질 수 있는 것인데... 기본 자료형에도 속성과 메서드가 존재한다. 이게 어찌 된 일? 기본 자료형의 속성이나 메서드를 사용하면 기본 자료형이 자동으로 객체로 변환되기 때문! 예를 들어 기본 자료형 숫자의 속성이나 메서드를 사용할 때는 자동으로 Number 객체로 변환된다. 따라서... 기본 자료형과 객체의 차이점은 찾기 어렵다! 굳이 굳이 찾자면 기본 자료형은 객체가 아니므로 속성과 메서드를 추가할 수 없다는 점. 따라서 기..

1. 객체 js에서는 python의 list와 유사한 배열(array)이란 개념을 사용할 수 있었다. 배열에는 인덱스 와 요소 가 있는데, 각 배열 요소를 사용할 때는 인덱스를 통해 접근(array[0])했다. 이러한 배열은 객체를 기반으로 만들어졌기 때문에 이 둘은 굉장히 유사한 개념! 차이점이라면 배열은 인덱스를 통해, 객체는 키를 통해 요소에 접근한다! 여기서 eat의 속성은 함수 자료형이므로 특별히 eat() 메서드 라고 부른다! 아니, 속성이니 메서드니 함수니 변수니 하는 말이 다 뭐람?? → 매번 헷갈렸는데... 드디어 정리한다. 단독 사용 다른 식별자와 함께 사용 식별자 뒤 괄호 X 변수 (ex input) 속성 (ex Array.length) 식별자 뒤 괄호 O 함수 (ex alrert('..

PNU Quiz의 result페이지에는 로딩바 기능이 있었다. result.html이 띄워질 때 메인 콘텐츠를 숨겨뒀다가 n초 뒤에 나타나게 하고, 로딩바는 n초 뒤에 사라지게 함으로써 유저가 로딩바를 n초 동안 봤다가 메인 콘텐츠를 볼 수 있게끔 만들었다. 해당 코드는 다음과 같다! 얼핏 보기에는 정상적으로 작동하나 싶었는데... 문제 발생. '익명 님의 성적표~~'에 해당하는 부분(메인 콘텐츠)은 분명 .hide()를 통해 숨겨뒀다. 하지만 웬걸, result.html이 뜨고 약 0.3초 정도 동안 이 녀석들이 나타나는 게 아닌가! 지금 생각해보면 당연한 일이지만 어째서 이런 일이 발생했는지, 어떻게 해결할 수 있는지 알아보자. 1. onload() ? result.js는 window.onload()..

js를 통해 열심히 페이지를 작성했는데... 브라우저마다 보이는 화면이 다르면 몹시 슬플 테다. '모든 웹 브라우저에서 정상적으로 작동하게 만드는' 것은 중요하면서도 꽤나 어려운 일. 이 때문에 다른 사람이 만든 라이브러리를 사용하곤 하는데, 이것이 바로 jQuery! 제일 먼저 html과 우리의 js를 연결. 그런데 jQuery는 다른 사람이 만들어 둔 라이브러리라고 했다. 따라서 요놈도 script로 받아와야 한다! 그럼 누가 만든 라이브러리를 받는디? 구글에 쳐보면 많다! 여기서는 made in 구글을 이용. 희한하게 생긴 $ 가 붙어있다. 요놈은 jQuery 라이브러리의 함수! 기본적으로 $().메소드(, ) 의 형태로 사용된다. jQuery에서 객체를 생성하기 위해서는? document, css..

js에서는 페이지에서 일어나는 여러 이벤트들을 지정할 수 있다. 대충 적어봐도... 마우스, 키보드, 사용자 인터페이스, 터치, 구조 변화 등! 생동감 있는 페이지를 위해선 어느 하나 빼놓을 수 없다. 역시나 js파일은 외부참조! webevent.js라는 파일을 만들었다. html상에 버튼을 하나 만들어줬다. onclick속성을 통해... 클릭하면 buttonClick이라는 함수가 작동된다. 요놈은 어디에? 아항! js 파일에서 이렇게 buttonClick 함수를 만들어줬다. 작동하면 클릭 이라는 경고창을 띄운다. 잘 뜨는구만. 이렇게 id를 지정해 불러올 수도 있다! id를 통해 객체를 지정할 테니 getElementById를 사용했다! 요 button은 onclick이벤트를 가지는데... 이 녀석을 ..