Front/JavaScript23 자바스크립트 라이브러리와 프레임워크 자바스크립트 라이브러리와 프레임워크 자바스크립트 라이브러리와 프레임워크 필요성 웹 애플리케이션에서 유저 인터페이스 동적 처리 시 각 DOM 요소 작업 필요 getElementById()로 찾아와서 이벤트 처리하고 코드 작성 프로젝트가 커지고 인터페이스 다양해짐 이러한 프로젝트를 관리하려면 많은 DOM 요소나 코드를 관리하고 정리하는 일이 어려워짐 그래서 사용자 인터페이스에만 집중할 수 있는 라이브러리 또는 프레임워크 필요 많은 라이브러리나 프레임워크 만들어지고 사용되면 생산성과 유지보수 많이 향상 대표적인 자바스크립트 라이브러리 / 프레임워크 Angular / React / Vue.js 프레임워크와 라이브러리 차이점 프레임워크 뼈대, 기반 구조를 의미. 제어의 역전 여러 클래스나 컴포넌트로 구성되어 있고.. 2021. 12. 17. JavaScript - JSON JavaScript JSON(JavaScript Object Notation) 자바스크립트 객체 표기법 key, value 값이 쌍으로 구성된 형태의 객체 표기법 클라이언트와 서버 사이에서 데이터 교환 목적으로 사용 웹 서버에서 수신하는 데이터는 문자열이다. 문자열 데이터를 JSON 파싱 함수를 사용해서 자바스크립트 객체로 변환이 가능하다. 최근의 브라우저들은 전부 내장 객체로 JSON 변환 기능 지원 형식 {key:value} {"name":"홍길동"} 자바스크립트 객체 -> JSON 변환 JavaScript -> JSON data Stringify() 메서드 사용 결과: JSON 형태의 문자열 JSON data -> JavaScript parse() 메서드 사용 결과 : object json_pars.. 2021. 12. 13. JavaScript - 사용자 정의객체 연습문제 JavaScript 사용자 정의 객체 클래스 생성 연습문제1 object7-classEx.html 프로퍼티: width, height 생성자 / getter / setter 메서드: getArea(): 넓이를 구해서 반환 출력 getter 호출해서 가로 길이, 세로 길이 출력 사각형의 넓이 출력 setter 호출해서 가로 길이, 세로 길이 변경 변경된 사각형의 넓이 출력 출력 내용 가로길이: 30, 세로 길이 10 사각형의 넓이: 300 (ㅊ가로 길이를 20, 세로 길이를 30으로 변경) 사각형의 넓이: 600 2021. 12. 13. JavaScript - 사용자 정의 객체 JavaScript 객체 내장 객체 브라우저 객체 문서 객체(DOM) 사용자 정의 객체 사용자 정의 객체 사용자가 직접 필요한 객체를 생성해서 사용하는 것 사용자 정의 객체 생성 방법 리터럴 이용 생성자 함수 (function()) 이용 new Object() 이용 (ES6에 추가) class 정의하고 객체 생성 (ES6에 추가) 1. 리터럴 이용 객체 선언: 멤버 추가 property(속성): 속성값 멤버 메소드 추가 객체 사용(호출) 객체.속성; 객체.메소드(); person.getName(); // 객체의 멤버 메소드 사용(호출) 형식 var 객체 = { // 변수: 프로퍼티(속성) 속성명1: 값1; 속성명2 : 값2; // 멤버 메소드 메소드명 : function() { 수행 코드; } }; //.. 2021. 12. 13. JavaScript - 폼 유효성 확인 JavaScript 폼 유효성 확인 form 객체 document 객체의 하위 객체 form 태그 내에 들어있는 여러 입력 양식을 제어 form의 하위 객체들 폼 객체 사용 방법 태그의 name 속성을 객체로 사용하는 경우 newMemberForm.id.focus(); newMemberForm.id.value = “”; newMemberForm.passwd.focus(); 문서 객체 모델 (DOM) 방식을 사용하는 경우 var name = document.getElementById(‘name’); name.focus(); name.value = “”; 폼 유효성 확인 예제 join.html (밑의 링크 확인) https://hyeon99-dev.tistory.com/75 별도의 checkForm.js 파.. 2021. 12. 10. JavaScript - 이벤트 핸들러와 이벤트 처리 JavaScript 이벤트 핸들러와 이벤트 처리 사용자로부터 발생되는 여러가지 이벤트 처리 인라인 이벤트 핸들러 - HTML 태그에 직접 이벤트 달기 고전 방식의 이벤트 객체.onclick = function() { alert("msg"); } DOM : 이벤트 리스너 등록 addEventListener('이벤트 종류', '함수이름'); removeEventListener(); 자주 사용하는 이벤트 핸들러 onLoad: HTML 문서나 특정 요소가 로드되었을 때 발생 onUnload: HTML 문서나 특정 요소가 사라질 때 발생 onClick: 클릭했을 때 발생 onKeyUp: 키를 눌렀다가 떼었을 때 발생 onKeyPress: 키를 누를 때 발생 onMouseDown: 마우.. 2021. 12. 10. JavaScript - 문서 객체 모델(DOM) JavaScript 객체 내장 객체 브라우저 객체 문서 객체(DOM) 사용자 정의 객체 문서 객체 모델(Document Object Model) 객체 지향 모델로서 구조화된 문서를 표현하는 방식 HTML 문서에 접근하기 위한 표준 모델 표준은 대부분의 브라우저에서 DOM을 구현하는 기준 문서 내의 모든 요소를 정의하고, 각 요소에 접근하는 방법을 제공 웹 브라우저에서 보여지는 HTML 문서 태그 요소에 대한 정보와 문서에 대한 여러 가지 속성을 제공 document 객체의 하위 객체를 이용하여 문서 내에서 일어나는 다양한 기능 제어 DOM 사용 시기 HTML 문서가 로드되고 나서 파싱 작업을 거쳐 DOM 트리 생성 DOM 문서가 로드될 때 모든 DOM을 사용할 수 있게 되는 파일 문서 내의 요소(태그) .. 2021. 12. 10. JavaScript - 브라우저 객체 모델(history, location, navigation) JavaScript 객체 내장 객체 브라우저 객체 문서 객체(DOM) 사용자 정의 객체 브라우저 객체 모델(Browser Object Model) 자바스크립트에서는 웹페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공 객체들을 계층구조로 분류 대표적인 브라우저 객체 웹 브라우저를 대상으로 이루어진 객체 new 연산자를 통해서 생성하지 않고 그냥 사용 ex) document.write() window: 창 document: 문서 history 객체: 웹 브라우저 기록 정보 location 객체: 주소 정보 navigation 객체: 웹 브라우저 정보(종류 판별 등) history 객체 최근 방문한 주소에 관한 정보를 기억하고 있는 개체 메소드 back() :.. 2021. 12. 10. JavaScript - 브라우저 객체 모델(window) JavaScript 객체 내장 객체 브라우저 객체 문서 객체(DOM) 사용자 정의 객체 브라우저 객체 모델(Browser Object Model) 자바스크립트에서는 웹페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공 객체들을 계층구조로 분류 대표적인 브라우저 객체 웹 브라우저를 대상으로 이루어진 객체 new 연산자를 통해서 생성하지 않고 그냥 사용 ex) document.write() window: 창 document: 문서 history 객체: 웹 브라우저 기록 정보 location 객체: 주소 정보 navigation 객체: 웹 브라우저 정보(종류 판별 등) 브라우저 객체의 계층 구조 window객체 창에 대한 전반적인 상황을 제어하는 최상위 객체 자.. 2021. 12. 10. 이전 1 2 3 다음
