에러 구문의 종류
| 종류 | 설명 |
| try | 코드 블록에서 오류를 테스트할 수 있는 구문 |
| catch | 오류를 처리할 수 있는 구문 |
| throw | 사용자 지정 오류를 만들 수 있는 구문 |
| finally | 결과와 관계없이 try 및 catch 후에 코드를 실행할 수 있는 구문 |
try catch
<body>
<p id="test"></p>
<script>
var test = document.getElementById('test');
try{
aalert('안녕하세요');
}
catch(err){
test.innerHTML = err.message;
}
</script>
</body> // aalert is not defined 라고 출력 //try catch는 세트로 사용됨
Throws
오류가 발생되면 자바스크립트는 중지되고 오류메시지를 생성
||
자바스크립트의 예외를 발생시켜 오류를 일부러 발생.
=사용자 지정 오류를 만들수있음
※예외 대상 String, Number, Boolean, Object
try와 catch와 함께 throw를 사용하면
프로그램의 흐름을 제어하고 사용자 지정 오류메시지를 생성할수있다.
finally
결과와 관계없이 try 및 catch 후에 코드를 실행
Error 객체의 속성 종류
| 종류 | 설명 |
| name | 오류 이름을 설정하거나 반환 |
| message | 오류 메시지를 문자열로 설정하거나 반환 |
| 종류 | 설명 |
| EvalError | eval( )함수에서 오류가 발생 ** eval( ) : 문자열을 코드로 변경해주는 함수 |
| RangeError | 숫자에서 범위를 벗어나면 오류가 발생 |
| ReferenceError | 잘못된 참조가 발생 |
| SyntaxError | 구문 오류가 발생 |
| TypeError | 값 유형에 대한 오류가 발생 |
| URIError | encodeURI( )에서 오류가 발생 |
- 최신 버전의 자바스크립트는 EvalError를 발생시키지 않습니다. 대신 SyntaxError를 사용하면 됩니다.
-----------------------------------------------------------------------------------------------
클래스
className속성은 문서객체의 클래스명을 설정하거나 반환
var 변수명 = 객체선택.className;
//h1태그의 클래스명을 경고창에 띄워보기
<body>
<h1 class="title" id="text">제목태그</h1>
<script>
var text = document.getElementById('text')
var cName = text.className;
alert(cName);
</script>
클래스명 지정
문법
객체선택.className = '클래스명';
<body>
<h1 id="text">제목태그</h1>
<script>
var text = document.getElementById('text')
text.className = 'title';
</script>
</body>
classList 속성
classList속성의 문서객체의 클래스명을 DOMTokenList 객체로 반환
문서객체에서 CSS클래스를 추가, 제거 및 전환하는데 유용
IE9 이하의 버전에서는 적용안된다는 점
-크로스브라우징할때는 브라우저버전을 잘 확인
classList의 속성과 메서드
| 종류 | 설명 |
| length | 클래스 수를 반환 |
| add('클래스명1','클래스명2',...) |
문서객체 하나 이상의 클래스명을 추가하는 메서드 |
| contains('클래스명') | 문서객체에 매개변수의 클래스명이 있는지 여부를 true/false로 나타내는 메서드 |
| item(index) | 문서객체에서 지정된 인덱스번호가 있는 클래스명을 반환하는 메서드 인덱스 범위가 벗어나면 null반환 |
| remove('클래스명1','클래스명2',...) | 문서객체에서 하나 이상의 클래스명을 제거하는 메서드 ** 존재하지 않는 클래스를 제거해도 오류가 발생되지 않음 |
| toggle('클래스명'); | 문서객체에 클래스명을 추가하거나 제거하는 것을 번갈아 실행하는 메서드 요소가 제거되면 false를 리턴, 요소가 추가되면 true를 리턴 |
<head>
<meta charset="UTF-8">
<title>JS - Class 속성</title>
<style>
.active{
background-color: black; color: pink;
}
</style>
</head>
<body>
<h1 id="text">제목태그</h1>
<hr>
<button id="add">클래스추가</button>
<button id="remove">클래스제거</button>
<script>
//1. 문서객체선택
var text = document.getElementById('text');
var add = document.getElementById('add');
var remove = document.getElementById('remove');
//2. 추가버튼 클릭
add.addEventListener('click',function(){
text.classList.add('active');
});
//3. 제거버튼 클릭
remove.addEventListener('click',function(){
text.classList.remove('active');
});
</script>
</body>
<body>
<h1 id="text">제목태그</h1>
<p id="test"></p>
<script>
//1. 문서객체선택
var text = document.getElementById('text');
var test = document.getElementById('test');
//2. 클릭이벤트
text.addEventListener('click',function(){
//active클래스 토글처리
this.classList.toggle('active');
//contains메서드를 통한 active클래스를 갖고 있는지 여부 확인
var is = this.classList.contains('active');
if(is){ //클래스를 갖고 있다면
test.textContent = '클래스추가';
}else{ //클래스를 갖고 있지 않다면
test.textContent = '클래스제거';
}
});
</script>
</body>
'코딩 > 자바스크립트' 카테고리의 다른 글
| JS / 드림코딩 유튜브강의 노트 (0) | 2022.04.08 |
|---|---|
| JS / 문서객체 영역, dataset(문서객체 사용자정의속성) (0) | 2022.04.05 |
| JS / 정규표현식 RegExp (0) | 2022.04.05 |
| JS / DOM Node와 Forms (0) | 2022.04.05 |
| JS / 문서객체생성과 이벤트 (0) | 2022.04.04 |