DOM 객체
/*
객체
1. 미리 만들어진 객체
1) console 객체
console.log()
2) Math 클래스
Math.random()
3) document객체 : DOM 객체
document.querySelector()
etc...
2. 사용자 정의 객체
함수
1. 일반함수 : function 함수명(){ }
2. 익명함수 : function(){ }
- 재호출 X (일회성) => 이름이 없으니까
3. 화살표함수 : () => { } ; 람다식이라고도 함
- 재호출 X (일회성) => 이름이 없으니까
* 재호출 불가능하지만 변수나 객체[속성] 대입하면서 재호출을 할 수 있게 되었다.
JAVA는 HTML를 직접적으로 조작 못함
JS는 HTML를 직접적으로 조작 가능 [DOM 객체]
window 객체
1. window.onload = 함수 : HTML에서 모든 자료[CSS/HTML]를 불러왔을 때 실행
2. winodw.addEventListener('load' , 함수)
DOM객체 : 문서 객체
document.속성기능명
1. document.body.innerHTML : body 마크업에 html형식문자를 대입
2. document.addEventListener('이벤트명', 함수) : 문서에서 이벤트가 발생하면 함수 실행
DOMContentLoaded : HTML이 열렸을 때 [다른 자료 상관X]
document.addEventListener('DOMContentLoaded', () => { //HTML이 열렸을 때 실행})
document.addEventListener('DOMContentLoaded', function(){ alert('html열림[익명함수]') })
3. document.querySelector('식별자') : HTML 마크업 1개를 객체 반환
*/
//1. DOM 객체 : HTML를 객체화
let h1 = `<h1>${'안녕하세요'}</h1>`
document.body.innerHTML = h1
//2. DOM 객체의 이벤트
//1) 기존 함수 적용
function 함수1(){console.log('문서열림1')}
document.onload = 함수1; //실행 X
window.onload = 함수1; //실행 O
document.addEventListener('load' , 함수1) //실행 X
window.addEventListener('load' , 함수1) //실행 O
document.addEventListener('DOMContentLoaded' , 함수1);
//2) 익명 함수들 -> 이름이 없는 함수.
document.onload = function(){console.log('문서열림2')}
window.onload = function(){console.log('문서열림2')}
document.DOMContentLoaded = function(){console.log('문서열림2')}
document.addEventListener('load', function(){ console.log('문서열림3')})
window.addEventListener('load', function(){ console.log('문서열림3')})
document.addEventListener('DOMContentLoaded', function(){ console.log('문서열림3')})
//3) 화살표 함수 적용 [ ( 인수 ) => { 실행문 }] : 함수 적용
document.onload = () => {console.log('문서열림4')}
window.onload = () => {console.log('문서열림4')}
document.DOMContentLoaded = () => {console.log('문서열림4')}
document.addEventListener('load', () => {console.log('문서열림5')})
window.addEventListener('load', () => {console.log('문서열림5')})
document.addEventListener('DOMContentLoaded', () => {console.log('문서열림5')})
let 변수 = ( ) => { console.log('문서열림6')};
console.log(변수);
let 익명함수 = function(){console.log('익명함수 실행')}
let 화살표함수 = () => {console.log('화살표함수 실행')}
let 객체 = {행동 : () => {console.log('화살표함수 실행 [객체]')}}
DOM 객체 이벤트 & js 반복문
/*
DOM객체 : 문서 객체
document.속성기능명
1. document.body.innerHTML : body 마크업에 html형식문자를 대입
2. document.addEventListener('이벤트명', 함수) : 문서에서 이벤트가 발생하면 함수 실행
DOMContentLoaded : HTML이 열렸을 때 [다른 자료 상관X]
document.addEventListener('DOMContentLoaded', () => { //HTML이 열렸을 때 실행})
document.addEventListener('DOMContentLoaded', function(){ alert('html열림[익명함수]') })
3. document.querySelector('식별자') : HTML 마크업 1개를 객체 반환
- typeOf : 데이터/자료 형 확인
1) style : -대신 카멜표기법을 사용
.style.color = '색상';
.style.backgroundColor = "배경색";
.style.padding = '안쪽여백';
배열과 반복문
1. for(let i = 0; i < 배열명.length; i++){}
2. for(let index in 배열명){}
3. for(let object of 배열명){}
4. foreach()
1) 배열명.foreach((object) => { }) : obect는 필수이지만 나머지 인수는 필수가 아니다.
2) 배열명.foreach((object, index) => { })
3) 배열명.foreach((object, index, parentArray) => { })
*/
alert('script 열렸을 때') //script가 열렸을 때 실행
//1. 문서가 열렸을 때 DOM 객체 이벤트
//1) 재사용X => 화살표함수
document.addEventListener('DOMContentLoaded', () => { //HTML이 열렸을 때 실행
/*실행문*/
alert('html이 열림[화살표함수]')
//객체 1개
const h1 =document.querySelector('h1');
console.log(h1);
console.log(typeof(h1)); //typeof() : 데이터형 확인
h1.innerHTML = '안녕'
h1.style.color = 'red';
h1.style.backgroundColor = "blue"; //카멜표기법 씀 -> CSS에서는 '-'을 쓰는 것을
h1.style.padding = '10px';
})
//2) 재사용X => 익명함수
document.addEventListener('DOMContentLoaded', function(){ alert('html열림[익명함수]')
//객체 여러개
const h1Array = document.querySelectorAll('h1')
console.log(h1Array);
console.log(typeof(h1Array)); //Object -> 배열도 객체
/* 배열 내 데이터[요소]들을 하나씩 꺼내는 방법 */
//1.
for(let i = 0; i<h1Array.length; i++){ //for start
h1Array[i].innerHTML = '안녕' + i; //i라는 임시변수를 인덱스처럼 반복문에서 사용
}//for end
//2.
for(let index in h1Array){ //배열내 요소 인덱스를 마지막까지 하나씩 반복변수에 대입
h1Array[index].innerHTML = '안녕' + index;
}
//3.
for(let object of h1Array){ //배열내 요소 모든 데이터를 마지막까지 하나씩 반복변수에 대입
object.innerHTML = '안녕'
}
//4.
h1Array.forEach((object) => {object.innerHTML = "안녕~~~~~"})
//배열명.forEach(화살표함수)
//배열명.forEach(( 인수 ) => { 실행문; })
//배열명.forEach((요소값) => { 실행문; })
h1Array.forEach((object) => {console.log(object)}) //3번과 동일
//배열명.forEach((요소값, 요소인덱스) => {실행문;})
h1Array.forEach((object, index) => {console.log(object); console.log(index);}) //3번과 4번을 합친
/*h1Array.forEach((값, 인덱스) => {console.log(값); console.log(인덱스);}) */
h1Array.forEach((object, index, array) => { //배열도 들어갈 수 있음
console.log(object); console.log(index); console.log(array)
})
})
DOM 객체 (키보드)
//1. keyup 이벤트 : 키보드 누르고 떼었을 때
//1) <textarea> 마크업 객체화
const textarea = document.querySelector('textarea');
const h3 = document.querySelector('h3')
//2) 해당 마크업의 이벤트 등록 [객체명.addEventListener]
textarea.addEventListener('keyup', (이벤트상태)=>{
console.log('타자 치는 중')
//3) 해당 마크업 사이에 html 대입 [객체명.innerHTML = html형식의 문자]
h3.innerHTML = `글자 수 : ${textarea.value.length}`
//4) 키 상태 확인
console.log(이벤트상태)
console.log('altKey : '+ 이벤트상태.altKey) //다른 키와 같이 누를 경우 altKey
console.log('ctrlKey : '+ 이벤트상태.ctrlKey)//다른 키와 같이 누를 경우 ctrlKey
console.log('shiftKey : '+ 이벤트상태.shiftKey)//다른 키와 같이 누를 경우 shiftKey
console.log('code 키 : '+ 이벤트상태.code)
console.log('name 키 : '+ 이벤트상태.key)
})
textarea.style.position = 'absolute' //css 조작 -> static[작성배치] 기본값 위치 불가능
let x = 0
let y = 0 //상위 마크업 시작점 기준
let block = 10; //이동 단위
print(); //위치 배치 1번 실행
function print(){ //위치 배치 함수
textarea.style.left = `${x*block}px` //이동단위 : 10px씩 (x*이동단위)
textarea.style.top = `${y*block}px` //이동단위 : 10px씩 (y*이동단위)
}
print();
//2. keydown 이벤트 : 키보드가 키를 입력했을 때
document.body.addEventListener('keydown', (e) =>{
if(control){
/* console.log(e.keyCode);*/
let kc = e.keyCode;
if(kc == 37){ //왼쪽키 left--
x--;
}else if(kc == 38){ //위쪽 키 top--
y--;
}else if(kc == 39){ //오른쪽 키 left++
x++;
}else if(kc == 40){ //아래 키 top++
y++;
}
print();
}
})
// * 이벤트 제어 변수
let control = true;
//3.
document.querySelector('.moving').addEventListener('click', () =>{
//스위치 on/off 변경
control ? control = false : control = true;
/*control = !control*/
})