생활코딩 (7) 썸네일형 리스트형 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.. 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.. 웹과 자바스크립트(생활코딩) Javascript를 이용하면 웹 브라우저를 제어! ▶ Script 태그 HTML의 태그 중 하나인 script 태그 안에는 Javascript 코드를 쓸 수 있음 -> HTML 코드 안에 Javascript 넣기 변화할 필요가 없는 페이지의 뼈대는 HTML로 작성 -> 동적 유저와 상호작용이 필요한 요소들을 그 위에 Javacript로 작성 ->정적 ▶Javascript와 사용자의 상호작용, 이벤트(Event) : 웹 브라우저에서 일어나는 중요한 사건 예시) onclick : 사용자가 어떤 것을 클릭하는 사건을 의미 onchange: 입력창에서 사용자가 키보드를 이용해 무언가 입력하면, 그에 따라 내용이 바뀌는 사건을 의미. 이 때, 입력창에 입력한 후 바깥쪽을 클릭했을 때를 기준으로 그 전과 내용이 .. 이전 1 다음
