Chapter 8 예외처리
Chapter 9 Class
<객체 복습예제: >
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
</ head >
< body >
<!-- 1. body 부터 만든다 -->
< h1 > 할 일 목록 </ h1 >
< input id = "todo" >
< button id = "add-button" > 추가하기 </ button >
< div id = "todo-list" ></ div >
</ body >
< script >
//2. 어떤 객체를 만들건지 생성해야함
document . addEventListener ( 'DOMContentLoaded' ,() => {
const input = document . querySelector ( '#todo' )
const todoList = document . querySelector ( '#todo-list' )
const addButton = document . querySelector ( '#add-button' )
//변수를 선언합니다.
let keyCount = 0
//추가하기 누르면 만들기
const addTodo =() => {
//빈칸일때 추가하기 누르면 경고창뜨게 만들기
if ( input . value . trim ()=== '' ){
alert ( '할 일을 입력해주세요.' )
return
}
//문서객체를 설정합니다
const item = document . createElement ( 'div' )
const checkbox = document . createElement ( 'input' )
const text = document . createElement ( 'span' )
const button = document . createElement ( 'button' )
//item 객체를 식별할 키를 생성합니다.
const key = keyCount
keyCount += 1
//item 객체를 조작하고 추가합니다.
item . setAttribute ( 'data-key' , key ) //setAttribute (data-key 라는 속성이름에 key 라는 속성 추가)
//custom 키. 위에서 keyCount 만들었으니까 나중에 key가 1,2,3,4,5.. 생길거임.
//key값을 이용할 수 있도록 한 일 1. let keyCount=0, 2. key=keycount, keycount+=1 3. setAttribute 4. 클릭시 제거되는 remove 에 변수 key 입력. 함수설정하고 datakey도 설정.(왜 data key 라는 말을 쓰는지 모르겠음 원래 있는말잉ㄴ지 확인 )참고로 keyup 에 나오는 key랑은 다른얘기임
item . appendChild ( text )
item . appendChild ( button )
todoList . appendChild ( item )
//checkbox 객체를 조작합니다.
//체크박스 누르면 취소선 나오게 만들기
checkbox . type = 'checkbox'
checkbox . addEventListener ( 'change' ,( event ) => {
item . style . textDecoration = event . target . checked ? 'line-through' : ''
})
//text 입력가능하게 만들기 text의 속성을 textContent로 설정함(HTML 요소의 텍스트 내용을 읽거나 설정할 수 있습니다. text.textContent = input.value 구문은 text라는 HTML 요소의 텍스트 내용을 input.value로 설정하는 역할을 합니다. 이로써 사용자가 입력한 내용이 화면에 나타나게 됩니다.)
text . textContent = input . value
//button 객체를 조작합니다.
button . textContent = '제거하기'
button . addEventListener ( 'click' ,() => {
removeTodo ( key ) //removeTodo 함수는 밑에서 정의할거임. 클릭하면 removeTodo 함수를 실행하는 이벤트를 만든다.
})
//입력양식의 내용을 비웁니다.
input . value = '' } //입력하고 추가한뒤에 textbox 비워주는 역할
//removeTodo 함수 정의
const removeTodo =( key ) => {
//식별키로 문서 객체를 제거합니다.
const item = document . querySelector ( `[data-key=" ${ key } "]` ) //data키 속성값이 특정 key 인 값 가져오기.
todoList . removeChild ( item ) // 특정 key를 가져와서 삭제
}
// 이벤트 연결
addButton . addEventListener ( 'click' , addTodo ) //누르면 todo가 생성된다.
input . addEventListener ( 'keyup' ,( event ) => { //keyup 일때
const ENTER = 13
if ( event . keyCode === ENTER ){
addTodo ()
}
})
})
</ script >
</ html >
localStorage 객체
웹브라우저에 데이터를 저장하는 local storage 객체와 활용
*localStorage.getItem(키): 저장된 값을 추출. 없으면 undefined 가 나옴
객체의 속성을 추출하는 일반적인 형태로 locaStorage 키 또는 localStorage [키] 형태로 사용할 수 있음
setItem(키, 값) 값을 저장
이벤트
-이벤트모델은 이벤트를 연결하는 방법을 의미
-이벤트 객체는 이벤트리스너의 첫번째 매개변수로 이벤트와 관련된 정보가 들어있음
이벤트 발생 객체는 이벤틀르 발생시킨 객체를 의미
-이벤트 객체의 currentTarget 속성을 사용해서 확인할 수 있음
Chapter 8. 예외처리
구문오류와 예외를 구분하고, 예외처리의 필요성과 예외를 강제로 발생시키는 방법을 이해
*오류의 종류
-구문오류 (syntax error) : 프로그램 실행전에 발생하는 오류
-예외(exception)또는 런타임 오류(runtime error):프로그램 실행중에 발생하는 오류
-구문오류
console.log () 메소드를 입력할떄 마지막에 닫는 괄호를 입력하지 않아서 괄호가 제대로 닫히지 않은 경우의 예
Uncaught TypeError: console.rog is not a function
querySelector() 메소드로 추출된 문서 객체가 없는 경우
해결하는 방법:
1. 가장 기본적인 방법 : if
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< script >
document . addEventListener ( 'DOMContentLoaded' ,() => {
const h1 = document . querySelector ( 'h1' )
if ( h1 ){
h1 . textContent = '안녕하세요'
} else {
console . log ( 'h1 태그를 추출할 수 없습니다.' )
}
})
</ script >
</ head >
< body >
</ body >
</ html >
2. 고급예외처리
try catch finally
try{ //예외가 발생할 가능성이 있는 코드
}catch(exception){
}finally{// 무조건 실행할 코드
}
3. 예외처리구문내부에서 return 사용하기
구문오류는 프로그램 실행 전에 발생하는 코드으 ㅣ문법적인 문제로 발생하는 오류를 의미
예외는 프로그램 실행 중에 발생하는 모든 오류를 의미
예외 처리는 예외가 발생했을 때 프로그램이 중단되지 않게 하는 처리. 구문오류는 예외 처리로 처리할 수 없음
try cathc fianlly 구문은 try 구문 안에서 예외가 발생하면 catch 구문에서 처리하고, finally 구문은 예외 발생 여부와 상관없이 실행해야 하는 작업이 있을 때 사용 .
*예외객체
-예외객체: try catch 구문을 사용할때 catch의 괄호 안에 입력하는 식별자. 아무 식별자나 입력해도 괜찮지만, 일반적으로 e 나 exception이라는 식별자를 사용
자바스크립트의 배열 크기가 한정되어 있기 때문에 배열을 너무 크게 선언하면 오류를 발생하는 것을 이용해 이를 예외 처리하고 , 오류를 출력해보는코드
어떤문제가 발생했는지 알아보기 위해서 catch에 exception.name, exception.message
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< script >
try {
const array = new Array ( 99999999999999999999 )
} catch ( exception ){
console . log ( exception )
console . log ()
console . log ( `예외이름: ${ exception . name } ` )
console . log ( `예외메세지: ${ exception . message } ` )
}
</ script >
</ head >
< body >
</ body >
</ html >
예외강제발생
예외를 강제로 발생시킬때는 throw 키워드를 사용
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< script >
function divide ( a , b ){
if ( b === 0 ){ //분모가 0이면 원래 NaN이 뜸
throw '0으로는 나눌 수 없습니다.'
}
return a / b
}
console . log ( divide ( 10 , 2 ))
console . log ( divide ( 10 , 0 ))
</ script >
</ head >
< body >
</ body >
</ html >
자바스크립트는 undefined와 NaN이라는 값이 있어서 다른 프로그래밍 언어에 비해서 예외를 많이 발생하지는 않음
그렇기 때문에 사용자에게 함수를 잘못 사용했다는 것을 강제로라도 인지시켜줄 필요가 존재함.
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< script >
function test ( object ){
if ( object . a !== undefined && object . b !== undefined ){
console . log ( object . a + object . b )
} else {
throw new Error ( "a속성과 b 속성을 지정하지 않았습니다." )
}
}
test ({})
</ script >
</ head >
< body >
</ body >
</ html >
속성 지정하고 싶을때 추가하는 방법
***********************************************************************************************
<!DOCTYPE html>
***********************************************************************************************
예외객체는 예외와 관련된 정보를 담은 객체를 의미
throw 구문은 예외를 강제로 발생시킬 때 사용하는 구문
Chapter 9. Class
9-1. 클래스의 기본기능
9-2, 클래스의 고급기능
자바: class 매우매우 중요 . class 없으면 사용 못한다고 봐야함
자바스크립트: 고급기능, Node.js때 사용
class란, 객체지향을 이해하고 클래스의 개념과 문법 학습
*객체지향 패러다임.
-C(절차지향)을 제외한 모든 언어는 객체지향임
-객체지향 프로그래밍 객체를 만들고 객체들의 상호작용을 중심으로 개발하는 방법론
-객체지향 프로그래밍 언어들은 클래스라는 문법으로 객체를 효율적이고 안전하게 만들어 객체지향 패러다임을 쉽게 프로그래밍에 적용할 수 있도록 도와줌
*추상화
복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념과 기능을 간추려내는 것. 즉, 프로그램에 필요한 요소만 사용해서 객체를 표현하는 것
ex) 동물이다. 의 추상적 성질: 먹는다 뛴다 소리를 낸다.
*같은형태의 개체만들기
ex) 학생성적 관리프로그램
학생이라는 객체가 필요하고 학생들로부터 성적관리에 필요한 공통사항을 추출하는데 이것을 객체라고 한다
getSumof(), getAverageOf()라는 이름으로 함수를 만들고, 매개변수로 학생 객체를 받아 총합과 평균을 구하는 프로그램 만들기
메소드 이용하기
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< script >
//객체를 선언합니다.
const students =[] //하나의 객체에 하나의 인덱스를 넣고있는거임
students . push ({ 이름 : '구름' , 국어 : 87 , 영어 : 98 , 수학 : 88 , 과학 : 90 }) //얘네가 겟썸이라는 메서드를 갖게됐는데, 겟썸은 속성이 함수임
students . push ({ 이름 : '별이' , 국어 : 92 , 영어 : 98 , 수학 : 96 , 과학 : 88 })
students . push ({ 이름 : '겨울' , 국어 : 76 , 영어 : 96 , 수학 : 94 , 과학 : 86 })
students . push ({ 이름 : '바다' , 국어 : 98 , 영어 : 52 , 수학 : 98 , 과학 : 92 })
//students 배열 내부의 객체 모두에 메소드를 추가합니다.
for ( const student of students ){
student . getSum = function (){
return this . 국어 + this . 영어 + this . 수학 + this . 과학
}
student . getAverage = function (){
return this . getSum ()/ 4
}
}
//출력합니다.
let output = '이름 \t 총점 \t 평균 \n ' //헤더로 쓰려고 작성함
for ( const s of students ){ //객체.key, key값을 지정하면 속성값이 옴.
output += ` ${ s . 이름 } \t ${ s . getSum ( s ) <span style="color: #569cd6;
