for in문으로 dataTransfer를 이용하기 / 객체속성나열하기

 

파일을 드래그하면 그린, 드래그를 놓으면 화이트

백종원이 만든 시판소스를 사용하는것이 실력일까 ?

다 만들어져있는, 소스를 버무리는것은 실력이라고하기어렵다.

함수를 만드는것말고 사용하는 방법떄문에 시간을 쓰는것 비효율

 

dataTransfer를 for in문을통해 키를 얻어내면 키가 출력된다. 그중 types, files를 또 밑에서 출력해보자

dataTransfer는 드래그할때 가져온데이터를 가지는 객체이다. 어떤속성인지 알고싶다면 ?

d

이벤트객체의 속성을 알아낼수있다.

갖고있는 기능을 출력해보자. -> for in문을  쓰면 속성을 알아낼수있다.

어떤객체든 속성을 나열 할 수있다. ->

f파일을 드래그해서 놓으면 파일의 속성이 출력된다.

for in 문은 key를 뽑는다.

 

for(var attr in e.dataTransfer.files[0] : 파일속성들출력

ojdbc8.jar 이라는 파일명이 for in문돌리면 각각 키가나온다.(문자열배열)

 

for(var attr in e.dataTransfer.files[0].name){ 

 console.log(e.dataTransfer.files[0].name);

} : 파일명의 글자하나하나가 배열처럼 인덱스로 출력된느것

ojdbc8.jar 이라는 파일명이 for in문돌리면 각각 키가나온다.(문자열배열) 0,1,2,3,...9 =>문자열일가능성이 큼

e.dataTransfer.files[0].name ->파일명이 출력된다.

for in문을 돌리면 문자열이 하나의 컬렉션으로 인식이 되고 각각 의 데이터를 뽑기위한 key가 나온다.

key가나와서 0,1,2,3,.으로나온다

속성명이 나온다는것은 오브젝트란 뜻이고 

0,1,2,..로 나오는것은 배열이란뜻

types를 for in문에 돌리면 ? 0 이나온건 배열이라는뜻 . 배열의 항목이 한개

console.log에 직접출력하면 속성들을 하나씩 확인해볼 수 있다.

e.dataTansfer.types출력 files가나온다.

포인문으로 속성이몇개있는지찾고, 직접출력

사진을 드래그드랍하면 size정보가뜬다