D05_dom_비동기 - 비동기1_개념_setInterval
- 하나의 프로그램을 프로시저라고 한다.
- 프로시저는 한개의 스래드를 가지고 있다.
- main 프로그램이 돌아가고 있다.
- 스레드
- 그림을 그리고 있다.
- 0과 버튼
- 스레드를 한개 더 켬
- addnumber - 1초 간격
- 스레드가 2개인것
- 스레드 1번에서 버튼을 누르면 스레드 2번이 꺼진다.
- 🔶 질문 1: 왜 <body> 안에 <script>가 있는 거야?스크립트가 페이지가 로드된 후 실행되기를 원할 때, 보통 <body> 안 또는 맨 아래에 <script>를 둡니다.
- ✅ 이유: 스크립트가 페이지가 로드된 후 실행되기를 원할 때, 보통 <body> 안 또는 맨 아래에 <script>를 둡니다.
<script>
document.querySelector("#time").innerHTML = num;
</script>
이렇게 DOM 요소(id="time")를 다루는 코드를 <head>에 넣으면, 브라우저가 아직 <div id="time">를 읽기 전일 수 있어 에러가 날 수 있어요. 그래서 DOM이 다 로드된 뒤에 실행되도록 <body> 마지막에 넣는 것이 안정적입니다.
🔶 질문 2: <script>는 뭐 할 때 쓰는 거야?
✅ <script>는 JavaScript 코드를 넣는 곳이에요.
JavaScript는 웹 페이지에서 동적인 동작을 만들기 위해 쓰입니다. 예를 들어:
- 버튼 클릭 시 동작 처리
- 숫자 자동 증가/감소
- 팝업 띄우기
- 서버와 데이터 주고받기(AJAX)
- 사용자 입력 검사 등
이런 HTML이 있다고 해볼게요:
이 HTML을 브라우저가 읽으면 각 태그가 자바스크립트에서 조작 가능한 객체로 바뀌어요.
즉, 자바스크립트에서는 아래처럼 접근 가능:
이게 바로 <div id="time">를 DOM 요소로 가져온 것이에요.
📌 정리하자면:
| DOM | HTML 문서를 브라우저가 구조화한 객체 모델 |
| DOM 요소 | HTML 태그 하나하나가 자바스크립트에서 조작 가능한 객체 |
| 스크립트에서 DOM 요소를 불러온다 | document.querySelector() 같은 방법으로 HTML의 태그를 자바스크립트에서 가져오는 것 |
✅ 그래서 네 말처럼,
body 안에 적은 태그들을 스크립트 안에 불러올 때가 돔 요소인 거야?
맞아요! 정확히 이해하셨어요.
스크립트에서 HTML 태그를 불러오고 조작하는 대상이 바로 DOM 요소입니다.
🎯 예시 코드 다시 보기:
- document → 웹 문서 전체를 의미
- querySelector("#time") → id="time"인 요소(HTML 태그)를 가져옴 → DOM 요소
- .innerHTML = num → 이 요소의 내용(text)을 바꿈
- _02_setInterval2.html
- function flashText => 이것은 따른 공간에 있는것을 인지해야 한다.
- main 실행되고
- main이 스레드 하나를 동작시킨다.
- div . 버튼
- onload가 changeColor를 실행시켰고.
- function changeColor() {
id = setInterval(flashText, 500); // 0.5초 간격으로 호출
}- 이때 스레드가 한개 더 생긴다. 완전히 독자적인 프로그램
- function flashText() {
// div태그 선택
- 요세 컴퓨터. 16스레드
- 스레드가 많으면 여러가지를 할 수 있다. 요리사가 많은것
- _03_setInterval3.html
- _04_setInterval4.html
비동기2_개념_timeout
- _01_timeout1.html
- 셋인터벌은 일정 간격으로 실행
- 셋타임아웃은 이 시간이 지나면 한번 동작하고 끝난다.
- _02_timeout2.html
- _03_timeout3.html
- 셋타임아웃을 가지고 셋인터벌과 똑같은 효과를 낼 수 있다.
- 셋타임아웃을 자기 안에 넣은것
- _04_timeout4_종료.html
- 셋타임아웃도 클리어타임아웃이라는 함수가 제공된다.
- 자기 안에 넣었으면 꺼야한다. 끌수 있어야 한다. 그래서 담아야 한다.
- 계속 자기가 자기를 실행시킨다.
- _05_이벤트중첩오류.html
- 셋인터벌이나. 셋타임아웃을 할 때 . 주의점
- 이게 스레드를 발동시킨다.
- 만약 이거를 여러번 누르면 스레드가 계속 생긴다.
- 시작을 여러번 누르면 빨라진다. 스레드가 동시에 여러개가 작동시키는거다.
- 컴퓨터 렉이 걸린다.
- 이런 오류를 막으려면 한번 눌리고 나면. 못눌리도록 막아야 한다.
- _06_이벤트중첩해결_한번만실행.html
- 강제로 버튼을 막아버리면 된다.
- this.onclick = null;을 적으면 된다.
비동기3_신호등_암기
- 신호등1.html
- 신호등2.html
'코딩 > 1-JavaScript' 카테고리의 다른 글
| D06_dom_정규식 => 정규식01_이름과아이디 (0) | 2025.05.28 |
|---|---|
| 비동기슬라이드_추가된내용 => 동영상 (1~3) (0) | 2025.05.27 |
| 비동기 기본이론 (1) | 2025.05.26 |
| 폼태그5_개념_테이블문자열 ~ 폼태그6_종합_산업기사기출 (0) | 2025.05.26 |
| 폼태그1_개념_종류 ~ 폼태그4_개념_문자열로태그생성 (0) | 2025.05.23 |