FrontEND 18

try, catch, finally

//try : 예외가 발생할 가능성이 있는 코드 //catch : 예외처리 //finally : 항상 실행되는 코드 try{ const number = Number(window.prompt("숫자를 입력해주세요")); const divide = Number(window.prompt("나눌숫자를 입력해주세요")); if(divide == 0){ throw new Error("0으로는 나눌수 없습니다 ") } // 숫자가 아니라면, if(isNaN(number) || isNaN(divide)){ throw new Error("값은 반드시 숫자이어야 합니다. ") } const result = number / divide; console.log(result) } catch(error){ console.erro..

FrontEND/JavaScript 2024.03.08

string 메소드

let title = "Need Change "; // 문자열에서 문자하나를 가지고 오고 싶을때. console.log(title.charAt(0)) //나 // 문자열의 위치를 알고 싶을때 console.log(title.indexOf("C")) // 문자열 수를 센다 console.log(title.length) // 빈공간제거한다. console.log(title.trim()) // 대문자를 만든다. console.log(title.toUpperCase()) // 소문자를 만든다. console.log(title.toLowerCase()) // 글자를 횟수만큼 반복한다. console.log(title.repeat(2)) // startWith(), endWith(), includes() let u..

FrontEND/JavaScript 2024.01.24

사용자가 입력한 값에 따라 출력하기 IF문사용

운전이 가능한 나이? 확인 const input =document.getElementById("input"); const button =document.getElementById("button"); const label = document.getElementById('label'); button.onclick = function(){ // string으로 들어온것을 숫자로 변환 Number() age= Number(input.value); if(age >= 100 || age == 0){ label.textContent = "100세이상 또는 0세 입력되었습니다. 잘못입력했습니다. "; } else if(age >= 18){ label.textContent = "운전가능한 나이 입니다. " } else ..

FrontEND/JavaScript 2024.01.24

1~45숫자중에서 로또번호 만들기

// 0~ 5 까지 렌덤번호 let randomNum = Math.random() * 6; // Int형태로 보여준다. let randomNum = Math.floor(Math.random() * 6); console.log(randomNum); int형태로 보여주기위해서 Math.floor()사용했다. Math.random() * 6 이렇게 하게되면 0~ 5까지 숫자를 반복해준다. 그래서 + 1을하면 1~6까지의 숫자가 반복된다. 1~45까지의 숫자중에서 6자리를 램덤으로 출력해보자. lotto number Random Number let button = document.getElementById("button"); let label1 = document.getElementById("label1"); ..

FrontEND/JavaScript 2024.01.24

getElementById,onclick 함수 사용법

index.html 0 decrease reset increase 여기에서 decreaseBtn의 요소를 가지고 오고 싶다면, decreaseBtn = document.getElementById("decreaseBtn"); index.js 그리고 decreaseBtn 버튼을 클릭시 어떠한 동작을 수행한다. const decreaseBtn = document.getElementById("decreaseBtn"); const resetBtn = document.getElementById("resetBtn"); const increaseBtn = document.getElementById("increaseBtn"); const countLabel = document.getElementById("countLab..

FrontEND/JavaScript 2024.01.23

class 문법을 사용하면 상속 관계

// 부모 클래스 class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } // 자식 클래스 class Dog extends Animal { constructor(name) { super(name); } speak() { console.log(`${this.name} barks.`); } } // 객체 생성 및 사용 let dog = new Dog('Rex'); dog.speak(); // "Rex barks." 위 코드에서 Animal 클래스는 부모 클래스이며, Dog 클래스는 자식 클래스입니다. Dog 클래스는 Animal 클래스를 상속하고 있습니다. Dog..

FrontEND/JavaScript 2023.04.16

프로토타입 기반의 상속 방법

프로토타입 기반의 상속 방법은 객체를 복제하는 것을 기반으로 합니다. 자식 객체가 부모 객체의 모든 속성과 메서드를 복제하고 이를 자식 객체의 프로토타입으로 지정함으로써 상속을 구현합니다. 아래 예제는 Animal 객체를 생성하고, 이를 상속하여 Dog 객체를 생성하는 예제입니다. // Animal 객체 생성 var Animal = { name: '', setName: function(name) { this.name = name; }, speak: function() { console.log(this.name + ' makes a noise.'); } }; // Dog 객체 생성 및 상속 var Dog = Object.create(Animal); // Animal 객체를 복제하여 프로토타입으로 지정 Do..

FrontEND/JavaScript 2023.04.16

public, private, get,set

// 1. Array const array = [1, 2, 3]; const push1 = array.push(4); console.log(array); /* 2. New Construction this는 CreateProduct 함수를 호출하는 시점에 생성된 객체를 가리킵니다. 따라서, this.radius와 this.color는 각 객체의 radius와 color 속성에 값을 할당하게 됩니다. this.discount는 Product 객체에 discount 메서드를 추가하고, 해당 메서드를 객체의 속성으로 등록합니다. */ function CreateProduct(title, price) { let store = "1000"; //private //private된 변수를 보이게하기 (Get) this..

FrontEND/JavaScript 2023.04.16

프로토타입

자바스크립트의 프로토타입이란? 이를 예제로 설명하면, Product라는 객체가 있다고 가정해봅시다. Product 객체는 모든 Product 객체가 공유하는 메서드인 getDiscountPrice를 가지고 있습니다. 이때, Product 객체의 prototype에 getDiscountPrice 메서드를 정의하면, 모든 Product 객체는 해당 메서드를 공유하게 됩니다. 이후, Book 객체를 생성할 때, Product 객체의 prototype을 상속하여 getDiscountPrice 메서드를 사용할 수 있습니다. function Product(name, price) { this.name = name; this.price = price; } Product.prototype.getDiscountPrice ..

FrontEND/JavaScript 2023.04.16