JS 127

[JS] class 예제 : 은행 (입금, 출금, 이체)

1. let으로 하나씩 만들어 사용하는 경우 let myAccount = { //이름 name: 'hong', //잔액 balance: 0, //입금 deposit: function(amount){ this.balance += amount; }, //출금 withdraw: function(amount){ this.balance -= amount; }, //이체 transfer: function(amount, otherAccount){ this.balance -= amount; otherAccount.balance += amount; } }; let yourAccount = { //이름 name: 'kim', //잔액 balance: 100, //입금 deposit: function(amount){ thi..

JS/JS 예시 2023.04.18

[JS] class, 객체, 생성자

class, 객체, 생성자 객체를 생성할 때, 생성자를 넣지 않는 경우 undefined로 출력 객체 생성 후, 객체 설정 추가가능! (굳이 생성자를 자세히 만들 필요 X) 생성자는 자바스크립트 하나에 오직 하나만 허용!! 예시 예) 은행 - 입금/출금/이체 https://jungeun980906.tistory.com/214 예) 생성자 함수이용 클래스 생성 생성 // 클래스생성 class Car{ // 생성자 생성 : 자바스크립트에서는 생성자는 오직 1개! 허용 constructor (name, year){ this.name = name; this.year = year; this.model = ''; } } // 객체생성 let myCar1 = new Car('쏘나타', 2022); let myCar2..

JS/JS 공부 2023.04.18

[JS] Map 예제 : 과목, 점수를 map에 저장하고 합계,평균 등 출력

과목 : 점수 : 추가버튼 출력버튼 결과버튼 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스  1. 버튼마다 하나씩 프린트하도록 설정하는 경우  DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta http-equiv="X-UA-Compatible" content="IE=edge">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Map 예제title>            추가버튼 : map에 추가        출력버튼 : map을 출력..

JS/JS 예시 2023.04.18

[JS] Count버튼 만들기 (더하기버튼누르면 +1/ 뺴기버튼누르면 -1)

HTML 삽입 미리보기할 수 없는 소스 DOCTYPE html> Count 만들기 더하기 빼기 리셋 let num = 0; let str = " "; document.getElementById('plus').addEventListener('click',()=>{ if(num > 99){ alert(`최대수량입니다. 현재 수량: ${num}`); } else { num++; str = `현재수량: ${num}` } document.getElementById('print').innerText=str; }) document.getElementById('miu').addEventListener('click',()=>{ if(num < 1){ alert(`최소수량입니다. 현재 수량: ${num}`); } else..

JS/JS 예시 2023.04.18

[JS] try~catch 예외 처리

try~catch : 예상되는 에러를 try{code..} 영역에 배치하고, 만약 에러가 발생하면 catch(err){code...} 영역에서 처리하는 예외처리 프로세스 try영역 : 에러발생 가능성이 있는 코드를 실행하는 곳 catch(err) 영역 : 에러발생시 예외 처리를 하는 곳 try_catch로 예외 처리를 하면, 프로세스를 멈추지 않고 지속시킬 수 있음 finally 영역 : 예외처리와 관계없이 무조건 코드를 실행하는 영역 throw : 예외를 고의적으로 발생시키는 키워드 throw + 예외발생 후 처리할 코드 사용 예시 ) alert => alerttt 오류 console.log('프로세스 시작'); try{ alerttt('경고창 실행'); //명령어가 잘못된 부분 console.log(..

JS/JS 공부 2023.04.18

[JS] set

set : 자바스크립트의 데이터 타입의 확장 개념 집합데이터를 다룰수 있는 객체 중복 데이터 허용X : 중복데이터가 들어오면 체크 후 하나만 남김 set() : 파라미터는 주로 배열을 사용 배열의 index, value 값을 활용하여 집합 데이터를 만듬 set 전용 메서드들이 있음 getter,setter가 없기때문에 forEach를 이용해 접근해야함 set 객체 생성 및 초기화 new set( ) new set( array ) 예) const testSet = new Set(['html', 'css', 'js']); 사용예시 로또번호 생성 : https://jungeun980906.tistory.com/215 set.add( value ) 데이터 추가 set.delete ( value ) 데이터 삭제 ..

JS/JS 공부 2023.04.18

[JS] Map

map : key / value 형태의 데이터를 한개의 배열로 만들어서 다시 배열에 저장하는 방식 기본적으로 중첩구조를 가지고 있기때문에 key중복확인 필수! key를 식별자로 사용하기 때문에 중복x get (KeyName, value) 메서드 제공 2차원 배열 형태와 비슷한 구조 key의 타입은 문자로 하는 것이 원칙 = key의 타입이 달라지면 관리 어려움 객체의 속성명도 문자로 하는 것이 원칙 선언 및 초기화 new Map(); new Map( [ 'key' , 'value' ] , [ 'key1' , 'value1' ] ... ); 예시 https://jungeun980906.tistory.com/212 (과목, 점수를 map에 저장하고 합계,평균 등을 출력) 과목, 점수를 map에 저장하고 합계..

JS/JS 공부 2023.04.18

[JS] day08_과제 (전송받은 데이터 저장-출력)

HTML 삽입 미리보기할 수 없는 소스 DOCTYPE html> 연습문제 table{ font-size: 15px; } table td{ width:150px; } 데이터를 입력하세요 데이터 입력 칸 이름 : 거주지 : 좋아하는 리스트 리스트 1 : 리스트 2 : 리스트 3 : 이메일 : Pet 반려동물 여부 : 지금 가장 원하는 것 : 전송 전송받은 데이터 출력하기 출력 데이터 출력 테이블 이름 거주지 좋아하는 리스트 이메일 Pet반려동물여부 지금가장원하는것 // 객체 생성 let sbBtn = document.getElementById('sbBtn'); let printBtn = document.getElementById('printBtn'); // 버튼의 이름이 중복되면 안됨! const data ..

JS/JS 수업분 2023.04.18

[JS] day08_요일구하기

오늘은? Today " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta http-equiv="X-UA-Compatible" content="IE=edge">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>요일구하기title>head>body>    h1>오늘은?h1>    button type="button" onclick="today();">Todaybutton>    h3 id="print">            h..

JS/JS 수업분 2023.04.18

[JS] day08_나이구하기

이름 : 주민번호 : 확인 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta http-equiv="X-UA-Compatible" content="IE=edge">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>나이구하기title>    head>body>    이름 : input type="text" id="name"> br>    주민번호 : input type="text" id="rNum"> br>    ..

JS/JS 수업분 2023.04.18