Frontend/Javascript (26) 썸네일형 리스트형 Javascript 프레임워크와 라이브러리 필요성 및 차이점 필요성 웹 애플리케이션에서 유저 인터페이스 동적 처리 시, 각 DOM 요소 작업 필요 getElementById()로 찾아와서 이벤트 처리하고 코드 작성 프로젝트가 커지고 인터페이스가 다양해지면서, 프로젝트를 관리를 위해 많은 DOM 요소나 코드를 관리하고 정리하는 일이 어려워짐 따라서 사용자 인터페이스에만 집중할 수 있는 라이브러리 또는 프레임워크 필요 많은 라이브러리나 프레임워크 만들어지고 사용되면 생산성과 유지보수성 대폭 향상 대표적인 자바스크립트 라이브러리/프레임워크 : Angular / React / Vue.js 차이점 프레임워크 뼈대. 기반 구조를 의미 제어의 역전 여러 클래스나 컴포넌트로 구성 작업하는 방법이 정의되어 있음 라이브러리 활용 가능한 도구 집합 사용자가 정의한 클래스에서 호출해서.. 응용 예제 : 음성 녹음 응용 예제 : 음성 녹음 WebRTC 별도의 플러그인 없이 웹에서 RTC(Real-Time Communications)를 구현하기 위해 HTML5에 새로 추가된 기능 https://webrtc.org WebRTC An open framework for the web that enables Real-Time Communications (RTC) capabilities in the browser. webrtc.org voiceRecord.html 녹음 정지 voiceRecord.js /** * voiceRecord.js */ $(document).ready(function(){ const record = document.getElementById('record'); const stop = document.g.. 자바스크립트 객체 JSON 변환 JSON(JavaScript Object Notation) 자바스크립트 객체 표기법 key와 value 값이 쌍으로 구성된 형태의 객체 표기법 클라이언트와 서버 사이에서 데이터 교환 목적으로 사용 웹 서버에서 수신하는 데이터는 문자열 -> 문자열 데이터를 JSON 파싱 함수를 사용해서 자바스크립트 객체로 변환 가능 최근의 브라우저들은 전부 내장 객체로 JSON 변환 기능 지원 자바스크립트 객체 JSON 변환 자바스크립트 객체 → JSON data로 변환 stringify() : 메서드 사용 결과 : 제이슨 형태의 문자열 JSON data를 자바스크립트 객체로 변환 parse() 메서드 결과 : object 예제 프로토타입; prototype prototype : 프로토타입 객체를 만드는 원형 함수도 객체이고, 객체인 함수가 기본으로 갖고 있는 프로퍼티 함수의 객체가 생성될 때 모든 객체가 공유하는 공간 자바의 static 개념 prototype에 멤버 정의 멤버를 함수 외부에 선언 여러 객체가 공유하게 하는 방법 prototype 사용 시 이점 생성자 함수 이용해서 객체 생성 시, 프로퍼티와 메서드는 객체마다 생성됨 -> 사용하지 않을 경우에도 생성되기 때문에 메모리 낭비 프로퍼티와 메서드를 미리 만들어 놓지 않고 필요 시 추가한 후 모든 객체에서 공유 -> 메모리 낭비를 줄일 수 있음 예제 사용자 정의 객체 사용자 정의 객체 사용자가 직접 필요한 객체를 생성해서 사용 사용자 정의 객체 생성 방법 (1) 리터럴 이용 (2) 생성자 함수 (function()) 이용 (3) new Object() 이용 (ES5에 추가) (4) class 정의하고 객체 생성 (ES6에 추가) (1) 리터럴 이용 // 객체 생성 var 객체 = { // 변수 : 프로퍼티(속성) 프로퍼티명(속성명)1 : 값1, 프로퍼티명(속성명)2 : 값2 // 멤버 메소드 메소드명 : function() { 수행 코드; } }; // 객체 사용 객체.프로퍼티; 객체.메소드(); 사용 예시 var person = { name : “홍길동”, age : 20, getName : function() { return this.name; } }; //객체 .. 폼 유효성 확인 예제 폼 유효성 확인 예제 (External 방식) 구현 내용 입력 값을 확인하여, 다음과 같은 경우 다음 창으로 넘어가지 못하게 함 성명 입력하지 않은 경우 ID 입력하지 않은 경우 ID 입력 값의 길이가 6~10가 아닌 경우 [비밀번호]와 [비밀번호 확인]이 일치하지 않은 경우 에서 선택하지 않은 경우 라디오 버튼 하나도 체크하지 않은 경우 체크박스에서 하나도 선택하지 않은 경우 /** * checkForm.js */ /* id가 joinForm인 폼의 submit 버튼이 눌렸을 때 수행되는 이벤트 처리 */ window.onload = function() { document.getElementById('joinForm').onsubmit = function() { // 성명을 입력하지 않은 경우 경고장 .. form 객체 form 객체 document 객체의 하위 객체 form 태그 내에 들어 있는 여러 입력 양식을 제어 form의 하위 객체들 폼 객체 사용 방법 (1) 태그의 name 속성을 객체로 사용하는 경우 newMemberForm.id.focus(); newMemberForm.id.value = “”; newMemberForm.passwd.focus(); (2) 문서 객체 모델 (DOM) 방식을 사용하는 경우 var name = document.getElementById(‘name’); name.focus(); name.value = “”; 이벤트 핸들러와 이벤트 처리 이벤트 처리 방식 인라인 이벤트 핸들러 : HTML 태그에 직접 이벤트 달기 고전 방식의 이벤트 DOM 이벤트 리스너 등록 자주 사용되는 이벤트 핸들러 이벤트 핸들러 설명 onLoad HTML 문서나 특정 요소가 로드 되었을 때 발생 onUnLoad HTML 문서나 특정 요소가 사라질 때 발생 onClick 클릭했을 때 발생 onKeyUp 키를 눌렀다가 떼었을 때 발생 onKeyPress 키를 누를 때 발생 onMouseDown 마우스 버튼 눌렀을 때 발생 onMouseUp 마우스 버튼 눌렀다가 떼었을 때 발생 onMouseOver 포커스로 마우스 포인터가 들어갈 때 발생 onMouseOut 포커스로 마우스 포인터가 나갈 때 발생 onMouseMove 마우스를 움직일 때 발생 onResize 문서의 특정.. 문서 객체 모델 (Document Object Model) 문서 객체 모델 (Document Object Model) 객체 지향 모델로서 구조화된 문서를 표현하는 형식 HTML 문서에 접근하기 위한 표준 모델 표준은 대부분의 브라우저에서 DOM을 구현하는 기준 문서 내의 모든 요소를 정의하고, 각 요소에 접근하는 방법을 제공 웹 브라우저에서 보여지는 HTML 문서 태그 요소에 대한 정보와 문서에 대한 여러 가지 속성을 제공 document 객체의 하위 객체를 이용하여 문서 내에서 일어나는 다양한 기능 제어 DOM 사용 시기 HTML 문서가 로드되고 나서 파싱 작업을 거쳐 DOM 트리 생성 DOM 문서가 로드될 때 모든 DOM을 사용할 수 있게 되는 때임 문서 내의 요소(태그) 제어 메소드를 사용하여 요소를 선택할 때 자바스크립트 위치 주의 문서 내에서 요소(객체.. 이전 1 2 3 다음
