WEB/JavaScript (19) 썸네일형 리스트형 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블럭에 의해 예외처리를 .. Js - 내장 함수 2 자바스크립트 내장객체 Date 날짜와 시간을 다루는 객체 사용자 브라우저의 시간대 timezone을 기준으로 날짜와 시간을 다루는 객체 날짜 구성요소 얻기 Date 객체의 getXxx 메서드를 이용해서 날짜/시간의 각 요소를 얻을 수 있음 JSON JavaScript Object Notation 데이터를 저장하거나 다른 시스템으로 전송시 많이 사용하는 데이터 교환 형식 자바스크립트의 Object 표기와 유사 단, 키를 정의할때는 반드시 ""를 사용해야 함 이전에 사용했던 데이터 교환형식인 XML에 비해 작은 코드로도 데이터를 정의할 수 있음 JSON.stringify / parse stringigy : 객체를 JSON 문자열로 변환하기 위해 사용, 데이터를 서버로 전송 시 또는 객체를 출력시 사용 par.. Js - 내장 함수 1 자바스크립트 내장객체 개요 자바스크립트에서 기본적으로 제공하는 객체에 포함된 여러가지 함수들에 대해 알아봄 자바스크립트의 내장객체는 크게 3가지로 분류: native 객체, host 객체, 사용자정의 객체 Native 객체 ECMAscript 규격에 따라 정의된 객체 Object, String, Number, Function, Array, Date, Math, RegExp 등이 제공됨 이러한 객체는 전역객체(global object) 라고도 불림 Fuction 함수 정의시 사용 String 문자열을 효율적으로 다룰 수 있게 해줌 String 객체는 기본적으로 불변immutable(변경불가) 객체임 문자열은 기본적으로 문자열 상수풀을 이용해서 관리함 Number 숫자를 다룰때 유용한 함수 제공 Math 수.. Js - 함수 자바스크립트 함수 개요 특정 작업(코드블럭)을 여러번 반복해야 하는 경우 해당 작업을 재사용 가능한 구조로 만들때 사용 즉, 어떤 작업을 수행하기 위해 필요한 코드들의 집합을 의미, 이것들을 재사용하기 위해 모듈형태로 작성한 것 함수를 만들기 위해서는 function이라는 키워드 사용 arrow function - 함수의 간단 생성 (파이썬의 람다) ES6에서 추가된 기능으로 함수 선언을 간단하게 작성가능 즉, function이라는 키워드 대신 =>을 이용해서 함수 선언할 수 있음 코드가 한줄이면 중괄호{}도 생략가능 Js - 객체 자바스크립트 객체 개요 자바스크립트는 기본 자료형 제외한 나머지 모두 객체임 자바스크립트의 객체는 기본적으로 key와 value 값으로 구성된 속성property들의 집합 자바스크립트 함수는 1급 시민이므로 값으로 취급할 수 있음 객체는 데이터를 의미하는 속성과 데이터를 참조하고 조작하는 동작을 의미하는 메서드로 구성성/p> 속성 키와 값으로 구성된 객체의 구성요소 객체 속성 접근하기 객체의 속성을 출력하거나 다루려면 '객체명.키이름' 형식 사용 또는 '객체명[키이름]'으로도 사용가능 객체의 내용 순회하기 for-in 문을 사용하면 객체에 포함된 모든 속성에 접근할 수 있음 ES6부터 지원하는 for-of 문으로도 객체를 순회할 수 있음 배열 동일한 자료형의 여러 데이터를 저장하기 위한 자료구조 배열 생.. 이전 1 2 3 다음