온라인 강의/Javascript(생활코딩) (9) 썸네일형 리스트형 javascript 객체 고급(생활코딩) ● 상속 -> 'extends' 사용 class Person{ constructor(name,first,second){ this.name = name; this.first = first; this.second = second; console.log('constructor'); } class PersonPlus extends Person{ //person이 personPlus에 상속됩니다. avg(){ return (this.first+this.second)/2; } } var kim = new PersonPlus('kim',10,20); console.log("kim.sum()",kim.sum()); console.log("kim.sum()",kim.avg()); 1. super 서브(자식) 클래스에서 .. javascript 객체 기본(생활코딩) ● 배열/객체에서의 반복문 var memberObject = { // 원소의 이름 : 원소 값 manager: 'egoing', developer: 'graphittie', designer: 'leezche' } //객체 값에 접근 //1 console.log('memberObject.designer', memberObject.designer); //2 console.log("memberObject.['designer']", memberObject['designer']); //삭제 delete memberObject.manager console.log('after delete memberObject.manager', memberObject.manager);//undefined 출력됨 var memberA.. Javascipt 제어문 ● 문자열 프로퍼티와 메소드 var str1 = "Hello world"; str1.length; //문자열 길이 str1.charAt(0); //문자열 H 추출 str1.split(" "); //공백 기준으로 문자열 나눔 -> 출력할 때는 배열 [Hello,world]로 됨 ● 배열 프로퍼티와 메소드 var fruit = ["사과","배","포도"]; fruit.length; //데이터 개수 fruit.push("딸기"); //배열 뒤에 데이터 삽입 fruit.unshift("레몬"); //배열 앞에 데이터 삽입 fruit.pop(); // 배열 뒤의 데이터 제거 fruit.shift(); // 배열 앞의 데이터 제거 ● join() 메서드 const elements = ['Fire', 'Air', '.. Javascript 문법 ● 변수 var fruit = "apple"; ● 출력 console.log(fruit); ● 사용 방법 -> html 파일과 연동 ● 변수 데이터 확인 방법 우클릭 -> 개발자 검사(크롬) ● 변수 데이터 웹 화면에 출력 document.write(변수명); document.writeln(변수명); //출력값 사이에 변수 넣기 ● 데이터 타입 - 문자열 var str = "~" var string = 'He\'s a boy' -> 중간에 ' 사용가능, 문장 끝까지 인식됨 - 함수 var func1 = function(){ } func1(); 또는 function func1(){ } func1(); * 함수 데이터 호출 방법 var area = function(width,height){ return wi.. Javascript 활용(생활코딩) ▶ 파일을 이용해 코드 정리하기 연관된 코드들을 .js 파일로 정리해 웹페이지에 포함시키기 -> 코드 정리정돈, cache를 이용하여 browser가 한 번 다운로드 한 것은 다시 다운하지 않기 때문에 서버의 트랙을 줄일 수 있다. 여러개의 js 파일 가져오기 -> 한줄에 한번씩 script src를 선언해 준다. ▶ 라이브러리와 프레임워크 라이브러리 : 우리가 필요한 부분을 가져와서 사용하는 것(jQuery) 프레임워크 : 직접 프레임워크 안으로 들어가서 디테일을 수정해서 사용하는 것 ☆ jQuery 이 한 줄을 $('h1').css("font-size", "7px"); ▶ UI와 API UI : 사용자들이 시스템을 제어하기 위해서 조작하는 장치 API : 프로그래머들이 사용하는 조작 장치(ex.ale.. Javascript 객체(생활코딩) ▶ 객체 document.querySelector('body'); document : 객체 / querySelctor: 메소드 객체 선언) var coworkers= { "programmer": "egoing", "designer": "leezche" }; 객체 요소 읽기) document.write(coworkers.programmer) document.write(coworkers["programmer"]) 객체에 요소 추가) coworkers.bookkeeper = "duru"; coworkers["bookkeeper"] = "duru"; ▶ 객체의 순회 객체에 있는 모든 값들을 가져오는 방법 -> for in var coworkers = { "programmer": "egoing", "designe.. Javascript 함수(생활코딩) ▶ 함수 선언) 사용) ▶ 매개변수와 인자 unction sum(left, right) { document.write(left + right); } 매개변수: left, right sum(2,3); 인자: 2,3 this : 전역객체 = 당 코드가 포함된 태그를 가르켜 준다. self : 매개변수 = this를 script태그내의 function 함수의 매개변수로 가져온다. Javascript 제어문(생활코딩) ▶ 비교 연산자 === (이항 연산자) -> 좌항과 우항을 결합해서 그 관계에 따라 하나의 결과, 즉 True인지 False인지를 만들어냄 ▶ 비교 연산자 HTML에서는 이 꺽쇠 기호()가 태그를 나타낼 때 쓰이기 때문에 혼란을 줄 수 있기 때문 12 출력 ▶ 조건문을 활용한 토글 만들기 if(document.querySelector('#night_day').value === 'night') { document.querySelector('body').style.backgroundColor = 'black'; document.querySelector('body').style.color = 'white'; } else { document.querySelector('bod.. 이전 1 2 다음
