Javascript class, object

2020/Vanilla JavaScript 2020. 9. 20. 01:20
반응형
// 문법을 엄격하게 봐줌
'use strict';


class Person {

    //생성자
    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    //함수
    speak(){
        console.log(`${this.name}: hello`);

    }
}

const mario = new Person('Mario', 35);
console.log(mario.name);
console.log(mario.age);
mario.speak();


//2. Getter and setters
class User{
    constructor(firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    get age(){
        return this._age;
    }

    set age(value){
        // if(value < 0){
        //     throw Error('age can not be negative');
        // }

        this._age = value < 0 ? 0 : value;
    }
}

const user1 = new User('Steave', 'job', -1);
console.log(user1.age);


//4. Static properties and methods
class Article {
    static publisher = 'Dream Coding';
    constructor(articleNumber) {
        this.articleNumber = articleNumber;
    }

    static printPublisher(){
        console.log(Article.publisher);
    }
}

const article1 = new Article(1);
const article2 = new Article(2);

console.log(Article.publisher);
Article.printPublisher();

//5. Inheritance
class Shape {
    constructor(width, height, color){
        this.width = width;
        this.height = height;
        this.color = color;
    }

    draw(){
        console.log(`drawing ${this.color} color of`);
    }

    getArea(){
        return this.width * this.height;
    }
}

class Rectangle extends Shape {

}
class Triangle extends Shape{
    draw(){
        super.draw();
        console.log(' :) ')
    }
    getArea(){
    return (this.width * this.height) / 2 ;
    }
    toString(){
        return `Triangle Color : ${this.color}`;
    } 
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
console.log(rectangle.getArea());
const triangle = new Triangle(20, 20, 'red');
triangle.draw();
console.log(triangle.getArea()); 
console.log(triangle.toString());
반응형
저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

Vanilla JavaScript # 모달 만들기  (0) 2020.03.29
Javascript #prototype  (0) 2020.03.28
JavaScript #ES6 Class  (0) 2020.03.28
JavaScript #내장함수 reduce  (0) 2020.03.28
JavaScript #내장함수 (shift, pop, unshift, push, concat, join)  (0) 2020.03.28
블로그 이미지

꽃꽂이하는개발자

,

Vanilla JavaScript # 모달 만들기

2020/Vanilla JavaScript 2020. 3. 29. 18:31
반응형

html

<!DOCTYPE html>
<html>

<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
</head>

<body>
	<h1> 안녕하세요</h1>
	<p>환영합니다.</p>
	<button id="open"> 모달 열기</button>
	<div class="modal-wrapper" style="display: none">
		<div class="modal">
			<div class="modal-title">
				안녕하세요
			</div>
			<p> 모달 내용</p>
			<div class="close-wrapper">
				<button id="close"> 닫기</button>
		</div>

	</div>

	<script src="src/index.js">
	</script>
</body>

</html>

css

body {
  font-family: sans-serif;
}

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: white;
  padding: 24px 16px;
  border-radius: 15px;
  width: 300px;
}

.modal-title {
  font-size: 24px;
  font-weight: bold;
}

.close-wrapper {
  text-align: right;
}

JS

import "./styles.css";

const open = document.getElementById("open");
const close = document.getElementById("close");
const modal = document.querySelector(".modal-wrapper");

open.onclick = () => {
  modal.style.display = "flex";
};

close.onclick = () => {
  modal.style.display = "none";
};

반응형
저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

Javascript class, object  (0) 2020.09.20
Javascript #prototype  (0) 2020.03.28
JavaScript #ES6 Class  (0) 2020.03.28
JavaScript #내장함수 reduce  (0) 2020.03.28
JavaScript #내장함수 (shift, pop, unshift, push, concat, join)  (0) 2020.03.28
블로그 이미지

꽃꽂이하는개발자

,

Javascript #prototype

2020/Vanilla JavaScript 2020. 3. 28. 21:47
반응형
function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}

const dog = new Animal("개", "멍멍이", "멍멍");
const cat = new Animal("고양이", "야옹이", "야옹");

Animal.prototype.say = function() {
  console.log(this.sound);
};

dog.say();
cat.say();
반응형
저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

Javascript class, object  (0) 2020.09.20
Vanilla JavaScript # 모달 만들기  (0) 2020.03.29
JavaScript #ES6 Class  (0) 2020.03.28
JavaScript #내장함수 reduce  (0) 2020.03.28
JavaScript #내장함수 (shift, pop, unshift, push, concat, join)  (0) 2020.03.28
블로그 이미지

꽃꽂이하는개발자

,

JavaScript #ES6 Class

2020/Vanilla JavaScript 2020. 3. 28. 21:45
반응형
class Animal {
  constructor(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
  }
  say() {
    console.log(this.sound);
  }
}
//상속
class Dog extends Animal {
  constructor(name, sound) {
    super("개", name, sound);
  }
}
class Cat extends Animal {
  constructor(name, sound) {
    super("고양이", name, sound);
  }
}
const dog = new Dog("멍멍이", "멍멍");
const cat = new Cat("야옹이", "야옹");
const cats = new Cat("고양이들", "야오오오오오옹");

dog.say();
cat.say();
cats.say();
class Food {
  constructor(name) {
    this.name = name;
    this.brands = [];
  }
  addBrand(brand) {
    this.brands.push(brand);
  }
  print() {
    console.log(`${this.name}을/를 파는 음식점들:`);
    console.log(this.brands.join(", "));
  }
}

const pizza = new Food("피자");
pizza.addBrand("피자헛");
pizza.addBrand("도미노피자");

const chicken = new Food("치킨");
chicken.addBrand("굽네치킨");
chicken.addBrand("동네앞치킨");

pizza.print();
chicken.print();
반응형
저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

Vanilla JavaScript # 모달 만들기  (0) 2020.03.29
Javascript #prototype  (0) 2020.03.28
JavaScript #내장함수 reduce  (0) 2020.03.28
JavaScript #내장함수 (shift, pop, unshift, push, concat, join)  (0) 2020.03.28
JavaScript splice vs slice  (0) 2020.03.28
블로그 이미지

꽃꽂이하는개발자

,

JavaScript #내장함수 reduce

2020/Vanilla JavaScript 2020. 3. 28. 20:10
반응형

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
//---------------------forEach
// let sum = 0;
// numbers.forEach(n =>{
//   sum += n;
// });
// console.log(sum);  // 15
//---------------------reduce 더하기
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); //15

// --------------------reduce 평균
const avg = numbers.reduce((accumulator, current, index, array) => {
  if (index == array.length - 1) {
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);

console.log(avg);

 

// 알파벳 중복수

const alphabets = ["a", "d", "a", "b", "c", "d", "d", "e"];

const count = alphabets.reduce((acc, cur) => {
  if (acc[cur]) {
    acc[cur] += 1;
  } else {
    acc[cur] = 1;
  }
  return acc;
}, {});
console.log(count);
반응형
저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

Javascript #prototype  (0) 2020.03.28
JavaScript #ES6 Class  (0) 2020.03.28
JavaScript #내장함수 (shift, pop, unshift, push, concat, join)  (0) 2020.03.28
JavaScript splice vs slice  (0) 2020.03.28
JavaScript #filter내장함수  (0) 2020.03.28
블로그 이미지

꽃꽂이하는개발자

,

JavaScript #내장함수 (shift, pop, unshift, push, concat, join)

2020/Vanilla JavaScript 2020. 3. 28. 19:41
반응형

shift() : 배열의 앞에서부터 shift()이 실행될때마다 하나씩 삭제

// shift(): 실행될때 마다 배열의 맨 앞에서 부터 잘라냄.
const numbers = [10, 20, 30, 40];
const num = numbers.shift();
console.log(num); // 10 을 삭제
console.log(numbers); // 20, 30, 40 출력

pop() : 배열의 뒤에서부터 pop이 실행될때마다 하나씩 삭제

const numbers = [10, 20, 30, 40];
const num = numbers.pop();
console.log(num);
console.log(numbers);

unshift(): 배열의 맨 앞쪽에 하나씩 추가

const numbers = [10, 20, 30, 40, 50];
const num = numbers.unshift(5);
console.log(num);
console.log(numbers);

push() : 배열의 맨 뒤쪽에 하나씩 추가

const numbers = [10, 20, 30, 40, 50];
const num = numbers.push(5);
console.log(num);
console.log(numbers);  // [10,20,30,40,50,5]

concat: 배열을 합쳐줌 (concat은 기존의 배열을 수정하지 않는다.)

const arr1 = [1,2,3,4,5];
const arr2 = [6,7,8,9,10];
const concated = arr1.concat(arr2);
console.log(concated); //[1,2,3,4,5,6,7,8,9,10]

join() : 배열의 수 사이에 넣어줌.

반응형
저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

JavaScript #ES6 Class  (0) 2020.03.28
JavaScript #내장함수 reduce  (0) 2020.03.28
JavaScript splice vs slice  (0) 2020.03.28
JavaScript #filter내장함수  (0) 2020.03.28
Javascript 내장함수 foreach, map, indexOf, findIndex, find  (0) 2020.03.28
블로그 이미지

꽃꽂이하는개발자

,

JavaScript splice vs slice

2020/Vanilla JavaScript 2020. 3. 28. 19:20
반응형

splice : 배열에서 특정한 항목을 제거할때. (기존의 numbers 배열을 바꿈)

const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
const spliced = numbers.splice(index, 2); // index부터 몇번째까지 지울것이냐
console.log(numbers); //지운 후 배열에 남아있는 수
console.log(spliced); // 삭제한 수

 

slice : 배열에서 특정 부분을 잘라냄 (기존의 배열은 건들지 않음.)

const numbers = [10, 20, 30, 40];

const sliced = numbers.slice(0,2);
console.log(sliced);  // 10, 20
console.log(numbers); // 10, 20, 30, 40

 

반응형
저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

JavaScript #내장함수 reduce  (0) 2020.03.28
JavaScript #내장함수 (shift, pop, unshift, push, concat, join)  (0) 2020.03.28
JavaScript #filter내장함수  (0) 2020.03.28
Javascript 내장함수 foreach, map, indexOf, findIndex, find  (0) 2020.03.28
for in, for of, for  (0) 2020.03.28
블로그 이미지

꽃꽂이하는개발자

,

JavaScript #filter내장함수

2020/Vanilla JavaScript 2020. 3. 28. 19:11
반응형

filter : 특정 조건을 만족하는 원소들을 찾아서  그 원소들을 가지고 새로운 배열을 만드는 것

const todos = [
  {
    id: 1,
    text: "자바스크립트 입문",
    done: true
  },
  {
    id: 2,
    text: "함수 배우기",
    done: true
  },
  {
    id: 3,
    text: "객체와 배열 배우기",
    done: true
  },
  {
    id: 4,
    text: "배열 내장 함수 배우기",
    done: false
  }
];

const taskNotDone = todos.filter(todo => todo.done === false);
console.log(taskNotDone);
반응형
저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

JavaScript #내장함수 (shift, pop, unshift, push, concat, join)  (0) 2020.03.28
JavaScript splice vs slice  (0) 2020.03.28
Javascript 내장함수 foreach, map, indexOf, findIndex, find  (0) 2020.03.28
for in, for of, for  (0) 2020.03.28
JavaScript 배열  (0) 2020.03.28
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

티스토리툴바