클라이언트/JavaScript (49) 리스트형 [자바스크립트(JavaScript)] 상속 // 상속, Inheritance class 자식클래스명 extends 부모클래스명 { 추가될 속성 } - 기존의 class를 상속해 새로 추가된 class를 만들 때 사용한다. - 중복을 제거하여 코드의 양을 줄이고, 유지보수의 편리성을 높여준다. class Pet { constructor(name, age) { this.name = name; this.age = age; } eat() { return `${this.name} is eating!`; } } class Cat extends Pet { meow() { return 'MEOWWWW!'; } } class Dog extends Pet { bark() { return 'WOOOOF!'; } } const blue = new Dog('Blue',.. [자바스크립트(JavaScript)] 파일 쪼개기 - 한 파일에 Javascript 코드를 모두 넣게 되면 유지보수, 관리가 힘들어진다. - js 파일을 따로 생성하여 관리한다. - 장점 1. Javascript 코드를 한 번에 관리할 수 있다. 2. 코드를 재사용할 수 있다. > 유지보수 편리 3. 코드가 명확해지고 가독성이 좋아진다. 4. js 파일을 한 번 다운로드해서 캐시에 저장해두면 다운로드 없이 사용할 수 있기 때문에 더 빨리 페이지를 표시할 수 있다. - 파일 분리 전 ~ index.html WEB HTML CSS JavaScript WEB Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit exercitationem soluta aperiam, quisquam alias provi.. [자바스크립트(JavaScript)] 객체 // 객체, Object - 어떤 값을 순서 없이 저장하는 구조 - 각각의 이름을 이용해서 값들을 꺼내고 넣는다. - 객체를 만들 때는 '중괄호 {}'를 이용한다. var coworkers= { "programmer": "egoing", "designer": "leezche" }; - 객체의 각 요소를 꺼낼 때는 '대괄호[]' 또는 '.'을 이용한다. document.write(coworkers.programmer) document.write(coworkers["programmer"]) - 객체에 요소를 추가 : 객체명["이름"]="값"; coworkers["bookkeeper"] = "duru"; - 객체에서 요소를 삭제 : delete 객체명.이름' delete memberObject.red - ke.. [자바스크립트(JavaScript)] 함수 // 함수, Function - 1급 객체, First class object - 함수를 객체처럼 취급한다. > 함수를 값처럼 취급할 수 있다. - 단독으로 사용될 수도 있고, new가 앞에 붙어 객체를 만드는 생성자로 쓰일 수도 있다. 1. 함수를 변수에 담을 수 있다.(저장) 2. 함수를 매개변수에 전달할 수 있다. 3. 함수를 반환값으로 사용할 수 있다. - 함수를 만드는 방법 1. 함수 선언문 function m1(num) { return 10; } 2. 함수 표현식(리터럴) - 익명 함수(Anonymous Function) - 함수의 목적 : 함수를 변수에 넣기 위해서 > 함수를 독립적으로 사용할 의도가 전혀 없다. - 이벤트에 함수를 사용하면 함수 오용 가능성이 없어 완전성, 가독성이 높아진다.. [자바스크립트(JavaScript)] 제어문(조건문, 반복문) //조건문 - if-else WEB HTML CSS JavaScript JavaScript Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet error illum, assumenda odit accusamus voluptate reiciendis quisquam, distinctio a pariatur similique? Reiciendis earum assumenda veniam facere, ex debitis cumque consequatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam hic, quo voluptatum laborum consequatur ei.. [자바스크립트(JavaScript)] 배열(Array) //배열, Array - Array(외형) + ArrayList(길이 가변, 자료형 자유) ~ var 배열명 = new Array(); - 초기화 1. var 배열명 = new Array(값); 2. var 배열명 = [값] > 배열 리터럴 표현 > 더 많이 씀 * 유사 배열: 배열은 아닌데, 배열처럼 보이게 만든 객체 - 스트림 계열 메서드 미지원 - Array.from() : 유사배열을 진짜 배열로 바꾸는 함수 // Array 관련 메서드 - push : 제일 뒤에 요소 삽입 - pop : 제일 뒤의 요소 삭제 - shift : 제일 앞의 요소 삭제 - unshift : 제일 앞에 요소 삽입 - concat(array2): 배열 연결 - includes: 특정 요소를 배열이 포함하고 있는지 탐색 - .. [자바스크립트(JavaScript)] Date // Date - 내장 객체 var 변수명 = new Date(); - 요소 출력 ~ getYear : 두 자리 연도 ~ getFullYear : 네 자리 연도 ~ getMonth : 월-1 ~ getDate : 일 ~ getDay : 요일(숫자, 일요일이 0부터 시작) ~ getHours : 시 ~ getMinutes : 분 ~ getSeconds : 초 ~ getMilliseconds : 밀리초 ~ getTime : 틱(ms) - 출력 ~ toLocaleString: 날짜 + 시간 ~ toLocaleDateString: 날짜만 ~ toLocaleTimeString: 시간만 - 특정시각 만들기 ~ setFullYear(4자리 연도): 연도 설정 ~ setMonth(월-1): 월 설정 ~ setDate:.. [자바스크립트(JavaScript)] 자료형, 연산자 //자료형, Data Type 1. number - 숫자형(정수, 실수) 2. string - 문자, 문자열 3. boolean - 논리형 4. object - 객체형 - JavaScript에는 클래스가 없지만 객체는 있다. - 자바스크립트 > 객체 기반 프로그래밍 언어 (≠ 자바 > 객체 지향 프로그래밍 언어) 5. 기타(=상수) a. null b. undefined c. NaN(Not a Number) 1. 숫자(Number) - 사칙 연산이 가능하다. 2. 문자열(String) - '' 또는 "" - str. length : 문자열 길이 반환 - str.toUpperCase() : 대문자로 변환 - str.toLowerCase() : 대문자로 변환 - str.indexOf("하이") : 문자열에서 .. < 1 ··· 3 4 5 6 7 >
