본문 바로가기

Programming

(15)
[JavaScript] 이벤트 객체 접근 (크로스 브라우저) IE에서는 Event가 window 객체의 프로퍼티이다. 이벤트가 발생하면, 그에 따른 데이터가 프로퍼티에 담긴다. 넷스케이프, 파이어폭스, 모질라, 오페라와 같은 넷스케이프 기반 브라우저는 이벤트를 함수의 인자로 전달받는 방식을 사용한다. 크로스 브라우저 코드를 작성하려면 다음과 같이 한다. 먼저 함수에 이벤트 객체가 전달되었는지의 여부를 검사한 후, 전달된 경우(넷스케이프)에는 전달받은 이벤트 객체를 사용하고, 그 외의 경우(IE)에는window.event를 사용한다. IE의 fromElement와 넷스케이프의 reatedTarget은 동일한 일을 수행하지만 명칭은 다른 프로퍼티이다. 이 둘은 마우스 이동시, 이동 전의 객체를 캡처한다. IE의 toElement와 넷스케이프의 toElement는 이동..
[JavaScript] 함수 선언적 함수 가장 널리 사용하는 함수의 종류는 선언적/정적인 형태로 function 키워드, 함수명, 인자 리스트, 함수 몸체로 구성된다. 선언적/정적 함수는 페이지를 로드할 때 단 한 번만 파싱된다. 이 때 파싱된 결과는 함수가 호출될 때마다 사용된다. function 함수명 (인자1, 인자2, ..., 인자n) { // 실행 코드 } 익명 함수 함수도 객체다. 그렇기 때문에 함수도 생성자를 사용해서 생성할 수 있고, 함수를 변수에 배정하는 것도 가능하다. 선언적 함수와는 달리, 자바스크립트 엔진은 익명 함수를 동적으로 생성한다. 따라서 매번 함수가 호출될 때마다 동적으로 생성된다. 반복문에서 사용하면 매번 반복시마다 생성된다. var variable = new Funtion ("인자1", "인자2",..
[JavaScript] escape(), unescape(), encodeURI(), decodeURI() escape() / unescape() 자바스크립트 함수 중에 escape()라는 함수가 있는데, 이는 ASCII 문자열을 URL 인코딩 문자열(ISO Latin-1 [ISO 8859-1])로 바꾸어주는 함수다. unescape() 함수는 escape() 함수를 사용하여 인코딩된 문자를 원래대로 되돌려주는 역할을 한다. encodeURI() / decodeURI() escape()와 unescape() 함수는 사용법이 간단하지만, ASCII 외의 문자에는 동작하지 않는 문제점이 있다. encodeURI()와 decodeURI()라는 함수를 사용하면, ASCII 외의 문자도 인코딩/디코딩이 가능하다. URI 인코딩을 해야 하는 문자들 분류 문자 예약 문자 ; , / ? : @ & = + $ 인코딩하지 않는..
[JavaScript] 데이터 타입과 변수 (2) 기본 데이터 타입 String 데이터 타입 문자열 리터럴이란 문자의 연속으로, 홑따옴표(') 또는 쌍따옴표(")롤 사용해 시작과 끝을 알려준다. var str1 = "string 입니다"; var str2 = '저도 string 입니다.'; '와 "중 어느 것을 사용해도 상관없으니, 시작과 끝의 기호는 일치해야 한다. Boolean 데이터 타입 부울 데이터 타이에는 true와 false의 두 가지 값이 있다. 이들은 따옴표로 감싸지 않는다. var bool1 = true; var bool2 = false; Number 데이터 타입 자바스크립트에서 숫자란 부동소수점 수를 말한다. 소수점이 없거나 소수점 이하 수가 없는 경우에는 10진 정수로 취급된다. 이때의 숫자 범위는 -2 53 부터 2 53 까지다. ..
[JavaScript] 데이터 타입과 변수 (1) 변수 식별 자바스크립트 변수는 식별자, 영역, 데이터 타입으로 구성된다. 타입 검사가 엄격하지 않기 때문에, 타입 변환이 묵시적으로 일어난다. 자바스크립트 변수는 다른 언어들과 매우 유사하다. 즉, 변수에 값을 저장하여 코드의 다른 부분에서 명시적으로 접근할 수 있고, 각 변수에 사용되는 식별자는 지정된 영역 내에서 유일해야 한다. 식별자에는 문자, 숫자, 밑줄 기호, 달러 기호 등을 조합한 어떠한 문자열도 사용할 수 있다. 단, 첫 글자는 반드시 문자, 달러 기호, 밑줄 기호 중 하나로 시작해야 한다. _variableidentifier variableIdentifier $varibale_identifier var-ident 자바스크립트 1.5 버전부터는 유니코드 문자, 숫자, 확장 문자열 등도 모두 ..
[박스 모델] 콘텐츠 영역, 패딩(padding), 테두리(border), 마진(margin; 여백) 콘텐츠 영역은 무엇일까요? 모든 엘리먼트는 텍스트나 이미지와 같은 몇가지 콘텐츠를 가지고 시작하며, 이 콘텐츠는 그것을 포함할 정도로 충분한 크기의 박스 내부에 위치합니다. 콘텐츠 영역은 콘텐츠와 박스의 가장자리 사이에 빈 공간을 가지고 있지 않다는 점을 주목하세요. 패딩(padding)이란 무엇일까요? 어떤 박스도 콘텐츠 영역 주위에 패딩(padding)층을 가질 수 있습니다. 패딩은 선택적인 것이므로, 꼭 필요한 것은 아니지만 콘텐츠와 박스의 경계 사이에 시각적인 여백을 주기 위해 사용할 수 있습니다. 패딩은 투명하며 자신만의 고유의 색을 가지지 않습니다. 테두리(border)는 무엇일까요? 엘리먼트들은 주위에 선택 가능한 테두리(border)를 가질 수 있습니다. 테두리는 콘텐츠 주위에 있는 선 형..
[HTML] HTML <!DOCTYPE> 선언 DOCTYPE란? DOCTYPE은 웹 브라우저에서 해당 페이지를 어떻게 그려서 보여줄 지 판단하는 기준이 된다. 각각의 브라우져 마다 HTML 코드를 파싱하여 렌더링 하는 방식이 조금씩 다르기 때문에.. 모든 브라우저에서 비슷하게 보여지기 위해서는 DOCTYPE을 추가해야 한다. "DOCTYPE은 유효성 검사기가 어떤 규칙을 이용해서 이 문서에 대한 유효성 검사를 할지 결정할 수 있도록 합니다. - 웹 2.0을 이끄는 방탄 웹" Doctypes Available in the W3C Recommendations HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or de..