본문 바로가기

전체 글

(61)
Js - modal 자바스크립트로 모달창 만들기 뒷배경은 투명한 검정색 표현 검은 배경위로 모달창 표시 모달창 띄우기 모달창 닫기
Js - 브라우저 객체 2 자바스크립트 BOM location 현재 브라우저에 표시된 문서의 url을 변경하거나 url에 대한 정보를 얻을 수 있음 구글로 이동 네이버로 이동 오늘의 추천사이트 navigator 클라이언트의 브라우저 및 운영체제 정보를 알아냄
Js - 브라우저 객체 자바스크립트 브라우저 객체 개요 웹브라우저의 여러 구성요소들을 객체형태로 구현해서 자바스크립트로 제어할 수 있도록 만들어 놓은 것 BOM은 W3C의 표준모델은 아님. 따라서, 브라우저 제조사마다 구현방식이 달라 특정 부분은 서로 호환되지 않는 것도 존재 window객체 웹브라우저의 창 자체를 의미하는 객체 innerHeight, innerWidth : 브라우저의 뷰포트 크기를 의미 rs 문서열기/닫기 window객체의 open 함수를 이용해서 지정한 문서를 새창이나 새로운탭에 띄울수 있음 또한, window객체의 close함수를 이용하면 띄워진 창이나 탭을 닫을수있음 창 생성시 창에 관한 속성(크기,너비등)을 설정하면 탭으로 생성되지 않고 독립적인 창으로 생성됨 주 브라우저의 url과 새창의 url이 동..
Js - 이벤트 핸들러 자바스크립트 이벤트 개요 이벤트는 사용자가 웹페이지를 이용하면서 발생시키는 어떤 행위를 의미 버튼을 클릭하거나 브라우저 크기를 변경하거나 html 문서가 브라우져에 의해 로드되었거나 특정 키를 눌렀거나 하는 것을 의미 이벤트가 발생하면 누군가는 이를 감지할 수 있어야 하고 그에 대응하는 처리를 호출해 주어야 함 브라우저는 이러한 이벤트를 감지해서 통지를 해줌으로써 사용자와의 상호작용을 가능하게 함 이벤트 핸들러 이벤트가 발생하면 그에 맞은 반응을 해야 함 이러한 반응은 보통 함수로 구현되어 있고, 이벤트 발생시 함수가 실행됨 - 이벤트 핸들러 이벤트 핸들러 등록 인라인 이벤트 핸들러 : 요소에 직접 이벤트핸들러를 등록 (비추), 인라인 이벤트 핸들러 프로퍼티 : ..
Js - dom 문서 객체 모델 자바스크립트 문서객체 모델 개요 텍스트파일로 만들어져있는 html 문서를 브라우저에 시각적으로 나타내려면 (렌더링) 먼저, 문서의 내용을 브라우저가 이해할 수 있는 형태로 메모리에 업로드하는 과정(파싱parsing)이 선행되야 함 파싱과정을 통해 메모리에 업로드된 결과는 DOM이라고 부르는데, 이것은 자바스크립트를 통해 문서의 내용에 접근해서 동적으로 변경할 수 있음 한편, DOM으로 구성된 문서내 객체들은 속성과 메서드로 구성된 DOM API를 이용해서 동적으로 웹페이지 내용을 변경할 수 있음 DOM tree 구성 노드 document node : 트리의 최상위 요소 DOM tree에 접근하기 위한 진입점(entry point) element node : HTML상의 요소를 의미 attribute no..
Js - regexp 정규표현식 정규 표현식 Regular expression 개요 문자열에서 특정 문자조합을 찾거나 대체할때 사용하는 패턴식 주로 사용자가 입력한 값이 어떤 조건을 만족하는지 체크할때 사용 - 이메일, 전화번호, 아이디/비밀번호 정규식 작성 정규표현식은 /로 감싸는 정규식 리터럴을 사용하는 방법과 RegExp라는 객체의 생성자를 사용하는 방법등이 있음 정규식 함수와 플래그 exec : 정규식을 통해 문자열 패턴을 찾고 배열 반환 test : 대응하는 문자열이 있는지 여부 검사, true/false match : 정규식을 통해 문자열 패턴을 찾고 배열 반환, 문자열 함수 정규표현식을 수행시 추가적인 작동방식을 지정하기 위해 플래그를 사용할수도 있음 i : ignore case - 대소문자 구별하지 않음 g : globa..
Js - AJAX AJAX 브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 필연적으로 화면갱신이 발생함 서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데, 페이지 일부만 갱신하고도 동일한 효과를 볼수있게 하는 기술 이를 통해 데스크탑 프로그램과 동일한 사용자 경험을 제공받을 수 있음 XMLHttpRequest AJAX 처리를 위한 핵심 라이브러리 서버로부터 응답 : 아이디 중복검사 Hello, World!! [ {"userid":"abc123" , "passssd":"987xyz"}, {"userid":"abc124", "passssd":"988xyz"}, {"userid":"abc125", "passssd":"989xyz"} ]
Js - 예외 처리 (try ~ catch) 자바스크립트 예외처리 개요 자바스크립트에서 오류는 try ~ catch 문을 통해 관리할 수 있음 코드의 실행을 중단시키는 오류는 크게 2가지가 존재 : 문법적 오류, 실행상 오류 자바스크립트에서는 실행상 오류만 예외처리 가능 유형별 예외처리 오류 유형별로 메세지 처리를 상이하게 하고 싶으면 instanceof 객체를 사용하면 됨 referenceError : 변수 선언과 관련된 오류 rangeError : 범위와 관련된 오류 syntaxError : 문법과 관련된 오류 typeError : 변수나 객체의 자료형과 관련된 오류 인위적으로 오류발생시키기 특정 코드에 의해 발생되는 오류외에도 로직이 정상적으로 수행되는 특정조건을 만족하지 못했을 때 의도적으로 오류를 발생시켜 catch블럭에 의해 예외처리를 ..