브라우저(19)
-
[JavaScript] 자바스크립트로 HTML 페이지 리로드(Reload) 하기
096_자바스크립트로 HTML 페이지 리로드(Reload) 하기 [적용] 게시판 등의 화면을 새로고침하고 싶을 때 [문법] 메소드 의미 반환 location.reload(진리값) 화면 새로고침 없음 [내용] 화면을 새로고침하고 싶을 때 사용하는 메소드. 게시판에서 새 글을 확인할 때 사용하는 새로고침 버튼 등에 사용하거나 웹 게임 등의 콘텐츠에서 게임이 종료되었을 때 시작 화면으로 전화하는 기능으로도 사용할 수 있다. 예제를 통해 location.reload()를 확인해 보자. 해당 메소드를 요청하는 순간 새로고침이 실행되며, 브라우저의 새로고침 버튼과 같은 작동을 한다. 전달 인수가 없으면 캐시를 사용해서 새로고침이 실행된다. location.reload(); 인수에 true를 전달하면 브라우저의 캐시..
2022.06.16 -
[JavaScript] 자바스크립트로 HTML 페이지 이동하기
095_자바스크립트로 HTML 페이지 이동하기 [적용] a 태그 이외의 방법으로 페이지를 이동하고 싶을 때 [문법] 속성 의미 반환 location.href 브라우저 URL 문자열 [내용] location.href 속성에 URL을 문자열로 대입한다. 대입한 타이밍에 맞춰 페이지 이동이 이루어진다. 상대 경로는 현재 페이지의 URL 주소가 기준점이 된다. a 태그의 href 속성과 비슷하다고 생각하면 이해하기 쉬우며, 해당 속성은 읽기와 쓰기가 모두 가능하다.읽기는 현재 페이지의 주소를 가져오며, 쓰기는 해당 페이지로 이동하는 작업을 실행한다. // 읽기 작업 console.log(location.href); // 결과: 현재 페이지의 URL // 쓰기 작업 location.href = 'another.h..
2022.06.16 -
[JavaScript] 자바스크립트에서 터치 디바이스 사용 확인하기
094_자바스크립트에서 터치 디바이스 사용 확인하기 [적용] 데스크탑과 모바일 브라우저에 따라 처리를 구분하고 싶을 때 [문법] 속성 의미 반환 window.ontoucjstart 터치 기능 시작 이벤트 함수 navigator.pointerEnabled 포인터 사용 가능 여부 진리값 navigator.maxTouchPoints 포인터의 최대치 숫자 [내용] 터치할 수 있는 대표적인 디바이스는 iOS와 안드로이드의 스마트폰이며, 마이크로소프트의 서피스(Surface)처럼 윈도우즈에서 터치 작업이 가능한 디바이스도 있다. 터치 사용 여부의 확인을 위해 다음과 같은 코드를 사용할 수 있다. const isSupported = !!( 'ontouchstart' in window || // iOS & 안드로이드 ..
2022.06.16 -
[JavaScript] 자바스크립트 캔버스(Canvas)에 디바이스 화소 맞추기
093_자바스크립트 캔버스(Canvas)에 디바이스 화소 맞추기 [적용] 캔버스 요소를 고해상도 디스플레이로 표시하고 싶을 때 [내용] 캔버스 요소는 화소의 비율 계산에 사용할 수 있다. 캔버스에 표시하고 싶은 사이즈에 화소비율을 곱해서 값을 설정한다. 표시 사이즈를 지정하는 스타일 시트를 확인해 보자. // 디바이스 화소 비율 가져오기 const dpr = window.devicePixelRatio; // 캔버스의 논리적 크기 const w = 200; const h = 200; // 캔버스 요소 사이즈 조정 const canvas = document.querySelector('canvas'); canvas.width = w * dpr; // 실제 크기는 배가 됨 canvas.height = h * d..
2022.06.16 -
[JavaScript] 자바스크립트에서 디바이스 화소 확인하기
092_자바스크립트에서 디바이스 화소 확인하기 [적용] 디바이스 화소 비율에 따라 제어 방식을 구분하고 싶을 때 고해상도 디바이스에서 큰 이미지를 사용하고 싶을 때 [문법] 속성 의미 반환 window.devidePixelRatio 화소 비율의 값 숫자 [내용] 고해상도 디바이스란 아이폰의 레티나(Retina) 디스플레이와 같이 화소 밀도(ppi)가 높은 디스플레이(HiDPI 디스플레이)를 말한다. 고해상도에 맞춰 처리 작업을 하지 않으면 해당 기기에서 사진 등이 뿌옇게 보이거나 화소가 깨져 보이는 현상이 발생할 수 있다. 디스플레이 해상도의 물리 화소 확인은 window 객체 devicePixelRatio 속성을 사용한다. const dpr = window.devicePixelRatio; 일반적인 디스..
2022.06.15 -
[JavaScript] 자바스크립트에서 윈도우 사이즈 확인하기
091_자바스크립트에서 윈도우 사이즈 확인하기 [적용] 화면을 브라우저 크기에 맞춰 표시하고 싶을 때 화면 폭에 맞춰 처리 작업과 레이아웃을 변경하고 싶을 때 [문법] 속성 의미 반환 window.innerWidth 브라우저 뷰포트(Viewport)의 가로 길이 숫자 window.innerHeight 브라우저 뷰포트(Viewport)의 세로 길이 숫자 [내용] 브라우저의 표시 영역 크기를 윈도우 사이즈라고 하며, 윈도우 창이 표시되는 사이즈는 innerWidth와 innerHeight를 사용해 가져올 수 있다. 사이즈 값은 주소창, 북마크, 개발자 도구 등 주변의 인터페이스는 포함되지 않은 순수한 화면의 사이즈다. 화면의 가로와 세로의 길이를 알게 되면 다양한 작업이 가능해진다. 예를 들어 동영상을 전체..
2022.06.14 -
[JavaScript] 자바스크립트 입력 프롬프트 표시하기 prompt()
090_자바스크립트 입력 프롬프트 표시하기 prompt() [적용] 유저로부터 문자를 입력받고 싶을 때 동기 형식의 작업을 하고 싶을 때 [내용] prompt()는 확인 버튼, 취소 버튼, 문자 입력창을 가진 알림창을 표시한다. 확인 버튼을 클릭하면 문자 입력창의 문자열이 반환되고, 취소 혹은 x를 누르면 null이 반환된다. 알림창을 단기 전까지 자바스크립트가 실행 중인 상태로 유지되며, 다른 작업이나 브라우저의 조작이 불가능하다. 유저로부터 문자를 입력받고 싶을 때 사용한다. const text = prompt('오늘의 날씨는 어떤가요?', '여기에 입력해 주세요'); console.log(text); // 결과: 유저가 입력한 문자열 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아케..
2022.06.14 -
[JavaScript] 자바스크립트에서 확인창 표시하기 confirm()
089_자바스크립트에서 확인창 표시하기 confirm() [적용] 선택 창을 표시하고 싶을 때 동기 형식으로 확인창을 표시하고 싶을 때 [문법] 메소드 의미 반환 confirm(내용) 확인창 표시 진리값 [내용] confirm()은 확인과 취소 버튼을 가진 확인창을 표시한다. 확인 버튼은 true, 취소는 false를 반환한다. 확인창을 닫기 전까지 자바스크립트가 실행 중인 상태로 유지되며, 다른 작업이나 브라우저의 조작이 불가능하다. 주로 유저에게 확인을 요청하고 싶을 때 confirm()을 사용한다. // 버튼을 참조 const btn = document.querySelector('button'); // 버튼 클릭시 작업 btn.addEventListner('click', (event) => { //..
2022.06.13 -
[JavaScript] 자바스크립트에서 경고 표시하기 alert()
088_자바스크립트에서 경고 표시하기 alert() [적용] 알림창을 표시하고 싶을 때 동기 형식으로 유저에게 메시지를 표시하고 싶을 때 [문법] 메소드 의미 반환 alert(내용) 알림창 표시 없음 [내용] alert()은 메시지 내용과 OK 버튼으로 이루어진 알림(경고)창을 표시한다. 창이 닫히기 전까지 자바스크립트가 실행 중인 상태로 유지되므로 OK 버튼을 눌러 창을 닫기 전까지는 다른 작업이나 브라우저의 조작이 불가능하다. 알림창 메시지 내용의 줄바꿈은 \n과 템플릿 문자열을 사용한다. // 버튼 참조 const btn = document.querySelector('button'); // 버튼 클릭시 작업 btn.addEventListener('click', (event) => { // 알림창 표..
2022.06.13