- DOM -> Javascript로 HTML 조작하기
- DOM : Document Object Model의 줄임말로, 웹브라우저가 정적인 웹페이지를 변경하거나 조작하기 위해 HTML 파일을 자바스크립트 객체로 만들어 준다.
- DOM을 사용하는 상황 : DOM dms <HTML></HTML>을 자바스크립트 객체로 만든 것이다. 자바스크립트로 HTML을 수정, 변경하거나 HTML에 작성된 내용을 자바스크립트 변수에 담아서 사용하는 등에 이용된다.
- 함수
- 함수의 종류
1. 함수의 선언식
function 함수이름(param1, param2, ...){
// ...code here
return 결과값
}
2. 함수의 표현식
const 함수이름 = function (param1, param2, ...){
// ...code here
return 결과값
}
3. 화살표 함수 : 실무함수
const 함수이름 = ( param1, param2, ... ) => {
// ...code here
return 결과값
}
- 함수 표현식 예제
// 함수 선언식 - 더하기 함수 만들어보기**
function add(a, b){
return a+b
}
// 함수 표현식 - 빼기 함수 만들어보기**
const minus = function (a, b){
return a-b
}
// 화살표 함수 - 곱하기 함수 만들어보기
const multiply = (a, b) => {
return a*b
}- 내장 함수
- 내장 함수의 종류
1. alert : 메세지를 지정할 수 있는 경고 대화 상자를 띄운다.
2. setTimeout : 시간 지연함수로 입력 시간이 만료된 후 함수나 지정한 코드를 실행한다.
3. setInterval : 시간 반복함수로 입력한 시가남다 함수를 반복적으로 호출하거나 코드를 실행한다.
- setTimeout, setInterval 예제 - 1
// setTimeout 예제
console.log("로딩을 시작합니다.")
setTimeout(function(){
console.log("로딩 완료.") // 로딩을 시작합니다.
}, 3000) // 로딩 완료.
// setInterval 예제
setInterval(function(){
const now = new Date()
const minutes = now.getMinutes()
const seconds = now.getSeconds()
console.log(minutes + "분" + seconds + "초") // 16분 11초
// 16분 12초
}, 1000) // 16분 13초
// 16분 14초
// ...
- setInterval 예제 - 1
- 인증만료시간을 보여줄 때와 같이 지정된 시간마다 함수를 실행해야 할 때 사용한다.
let timer = 180
setInterval(function(){
timer = timer - 1;
const minutes = Math.floor(timer / 60)
const seconds = timer - minutes * 60
console.log(minutes + ":" + seconds)
}, 1000)
- 시간지연함수와 시간반복함수의 종료
// 시간지연함수 강제종료
const time = setTimeout(기능, 시간) // 시간지연함수를 임시로 변수/상수에 저장해놓습니다.
clearTimeout(time) // 저장했던 시간지연함수를 종료합니다.
// 시간반복함수 강제종료
const time = setInterval(기능, 시간) // 시간반복함수를 임시로 변수/상수에 저장해놓습니다.
clearInterval(time) // 저장했던 **시간반복함수를 종료**합니다.- 각각의 종료 함수는 각자의 함수 안에서 사용할 수 있다. 즉, clearInterval은 setInterval안에서 사용할 수 있다는 뜻이다.
- 템플릿 리터럴
// 오늘 날짜 예쁘게 보여주기
console.log("오늘은 " + year + "년 " + month + "월 " + date + "일 입니다.")
// 오늘은 2021년 4월 3일 입니다.
// 지금 시간 예쁘게 보여주기
console.log("지금은 " + hours + "시 " + minutes + "분 " + seconds + "초 입니다." )
// 지금은 13시 30분 17초 입니다.- 이전에는 위와 같이 띄어쓰기까지 신경 써서 +를 붙여주었다.
console.log(`오늘은 ${year}년 ${month}월 ${date}일 입니다.`)
console.log(`오늘은 ${hours}시 ${minutes}분 ${seconds}초 입니다.`)- 위와 같이 하면 띄어쓰기를 별도로 신경쓰지 않아도 평소 쓰던 방식대로 입력하면 된다.
- 이벤트 핸들러
- 함수는 event를 처리하거나 반응한다. 애플리케이션은 이벤트 타입과 이벤트 대상을 지정해 웹브라우저에 이벤트 핸들러 함수를 등록한다. 그리고 지정된 대상(HTML 요소)에서 지정된 타입의 event가 일어나면 브라우저가 핸들러 함수를 호출한다.
- 이벤트 핸들러의 종류
1. 이벤트 핸들러는 이벤트 청취자, 즉 위와 같은 이벤트가 발생하는 것을 감지하는 역할을 한다.
- onclick
onclick="자바스크립트함수();" // 해당 태그를 클릭했을때 자바스크립트 함수 실행
- onchange
onchange="자바스크립트함수();" // 해당 태그가 변경됐을때 자바스크립트 함수 실행'개발 > CSS, HTML, JAVASCRIPT' 카테고리의 다른 글
| Javascript 기본 - 1 (0) | 2023.08.25 |
|---|---|
| CSS 기본 (1) | 2023.08.21 |
| HTML 기본 (0) | 2023.08.21 |