Programming_Language/JavaScript13 [EVENT] 모바일 가로모드, 세로모드 감지 이벤트 Orientationchange 모바일 웹페이지를 만들 때, 가끔 가로모드와 세로모드로 인해 이벤트를 만들어야 할 경우가 종종 있는데요. 이럴때는 css로 세로모드 및 가로모드 고정 방법도 있지만, 간혹 브라우저 특성으로 걸리지 않는 경우도 있다고 합니다. 그래서 자바스크립트를 이용해서 이벤트를 발생 시킬 때 어떤 조치를 해라! 하기 위한 코드를 적어보려고 해요. 바로 window.addEventListener 에서 "orientationchange" 이벤트 인데요. 이것은 장치 방향 바꿈 이벤트 입니다. 이벤트 발생 시 window.orientation(각도) 에서 값을 확인하고 그것을 판단하는데요. 0 : 세로 90 : 가로 -90 : 가로 표시가 됩니다. 스크립트 안에서 위에 코드처럼 작성하고 주석에 걸린 부분에 원하는 이벤트를 .. 2023. 12. 18. [querySelector] document.querySelector 로 데이터 불러오기 querySelector : 그룹과 일치하는 요소안 첫번째 요소를 반환. 예제) Hello Selector 홍길동 17 coco 김두환 19 -> div로 묶어서 리스트 설정. -> a : id가 t_1 안에 있는 요소들을 불러와라. b : t_1 요소 안에 "title"이라는 클래스의 innerText 값을 불러와라 c : t_1 요소 안에 "name"이라는 클래스의 innerText 값을 불러와라 d : t_1 요소 안에 "age"이라는 클래스의 innerText 값을 불러와라 a는 t_1 안에 있는요소들을 다 불러오게 되고, b,c,d는 특정 class의 값을 불러왔다. 2023. 6. 28. [타입] 기본타입 타입 종류 1. 숫자 (number) var num1 = 10 var num2 = 10.1 2. 문자열(String) var str = "이것이 자바스크립트다"; 3. 불리언(boolean) var number = 10; var number1 = 10; if(number == number1){ console.log(number == number1); } else{ console.log(number == number1); } -> 결과 : true 4. undefined var number = null; var number1; console.log(number); console.log(number1); 결과 5. 객체(Object) var object = {name:"코코팝", age:100}; conso.. 2023. 6. 11. [변수타입] var, let, const 1. var -> 중복 선언 가능 -> 동일한 이름으로 여러 번 중복해서 선언이 가능.(마지막 할당된 값이 변수에 저장) 예) var data = "안녕"; alert(data); var data = "잘가"; alert(data); -> 결과 : 안녕, 잘가 2. let -> 중복 선언이 불가능 -> var 이후에 업데이트 된 것으로 java 변수 선언 처럼 같은 이름의 변수를 만들 수 없다. 3. const -> let과 마찬가지로 중복 선언이 불가능하다. -> let과 const 차이는 let은 재할당이 가능하지만, const는 재할당이 불가능하다. (const는한번 선언한 값을 바꿀 수 없어, 고정 값을 선언할 때 사용한다) 2023. 6. 11. [EVENT] onload, ready 1. onload -> 페이지의 모든 images,script,css,요소 가 로드 된 후 이벤트 발생. -> DOM의 Standard 이벤트 -> 이미지나, 영상이 포함된 페이지를 열 경우, 이미지와 영상의 용량이 매우 커서 onload 시점이 느려질 수 있으니 잘 보고 판단. (태그가 대 부분 글자로 사용하는 페이지에는 괜찮음) -> onload는 한번만 사용할 수 있다. (body에서 onload 이벤트를 사용하면 window.load()가 실행되지 않는다) 사용법 . 1. js에서 사용. window.onload = function(){ // 코드 } 2. html, jsp 에서 사용. 3. 특정 요소를 onload 사용할 경우 document.getElementById("").onload = f.. 2023. 6. 11. 이전 1 2 다음 반응형
