JavaScript(23)
-
Day6_VSCODE_JavaScript_이벤트
🟡이벤트 웹 브라우저가 알려주는 HTML 요소에 대한 사건이 발생 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 🟢이벤트타입 - 발생한 이벤트의 종류를 나타내는 문자열로 이벤트 명이라고함 - 키보드,마우스,HTML DOM, Window 객체.. 등 처리하는 이벤트 제공 - https://developer.mozilla.org/ko/docs/Web/API/Event 🟢이벤트 타겟 - 이벤트가 일어날 객체를 의미 🟢이벤트리스너 - 이벤트가 발생했을 때 그 처리를 담당하는 함수 - 이벤트 핸들러라고 부름 - 지정된 타입의 이벤트가 특정 요소에서 발생하면 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행 [예시] 이벤트 등록 객체.addEventListenr(이벤트..
2023.04.12 -
Day5_VSCODE_JavaScript_ (재정리) _상속의 활용
상속 부모 클래스 class Animal { constructor(color) { this.color = color; } eat() { console.log('먹는다!') } sleep() { console.log('잔다!') } } 상속 클래스 만들기 class Dog extends Animal { play(){ console.log('논다!'); } } //확인 const Rucy =new Dog('white') console.log(Rucy) Rucy.eat(); Rucy.sleep(); Rucy.play(); //2번째 예시 class Cat extends Animal{ constructor(color,name){ super(color); //부모 쪽 컬러를 사용시 부모쪽으로 보내는 법 this...
2023.04.11 -
Day5_VSCODE_JavaScript_ (재정리) _클래스 심화
static 정적 프로퍼티 및 메소드를 생성 프로그램이 실행되면서 무조건 바로 메모리에 올라가는 것 클래스안에 메소드 예)(Static MakeBanana)는 this 참조할 수 없다 class Fruit { static count_fruit = 10; constructor(name,emoji){ this.name = name; this.emoji = emoji; } display = () => { console.log(`${this.name}: ${this.emoji}`) } static makeBanana(){ return new Fruit('banana','🍌') } } const apple = new Fruit('apple','🍎') const orange = new Fruit('orange','..
2023.04.11 -
Day5_VSCODE_JavaScript_ (재정리) _객체 활용법
호출법 let dog = { name: '루시', age: 14, 'dog-weight': 3.5, ['dog-height']: 0.8, } console.log(dog.name) console.log(dog['age']) [연습 문제] Fruit 생성자를 만들고 위와 같은 결과를 동일하게 출력할 수 있는 객체를 만들어보자 단 Fruit(name,emoji) 형태로 만든다. function Fruit(name,emoji){ this.name=name; this.emoji=emoji; this.display = ()=>{ console.log(`${this.name}: ${this.emoji}`); } } const apple2 = new Fruit('apple','🍕') const orange2 = ne..
2023.04.11 -
Day5_VSCODE_JavaScript_ (재정리) _함수 작성법
함수 작성 tip 조건식이 있을 시, 조건에 만족하지 않는 경우 --> 함수 도입부분에서 함수를 미리 종료 function print(num) { if (num a + b; const calc_multiply = (a, b) => a * b; console.log(calc_add(10, 5)) console.log(calc_multiply(10, 5)); [문제] 특정 숫자를 입력하면, 해당 숫자 까지를 출력 예) 5를 입력하면 1 2 3 4 5를 출력 특정 숫자를 입력하면 해당 숫자를 제곱하는 숫자 출력 예) 4를 입력하면 16을 출력 위 두개의 식을 함수로 만들고, 두 함수의 기능을 모두 사용할 수 있는 iterate()를 만들어보자 function array(num) { a = [] if (num
2023.04.10 -
javascript 혼자 공부(항시 업데이트)
내부 자바스크립트 vs 외부 자바스크립트 외부 자바스크립트 파일은 웹 브라우저가 미리 읽어 올 수 있어 웹 페이지의 로딩 속도 또한 빨라집니다. 출처:tcpschool 변수 1개를 body에 출력할 때 다음줄(enter)후 출력하기 document.getElementById("result").innerHTML = (typeof sym) + " " + (typeof symObj); 해석: sym이란 변수의 타입과, symObj의 변수타입을 띄어쓰기로 출력 !
2023.04.08