자바스크립트 검색 결과
5 개의 검색 결과가 있습니다.
Javascript

[JavaScript] 창과 요소의 크기, 너비값, 높이값, 좌표 구하기

viewport의 크기 구하기 뷰포트는 화면상의 화상표시 영역을 뜻합니다. 사용자가 디스플레이를 볼 때 켜져 있는 브라우저에서 실시간으로 보고 있는 영역을 뜻합니다. 뷰포트의 너비와 높이값은 각각 window객체의 window.innerWidth와 window.innerHeight로 받아올 수 있습니다. 단위는 px입니다. 웹페이지에서 내용이 길어지면 스크롤이 생깁니다. 스크롤에는 상하스크롤과 좌우 스크롤이 있습니다. 보통 상하 스크롤은 뷰포트에서 가장 우측에, 좌우 스크롤은 뷰포트에서 가장 아래쪽에 생깁니다. 뷰포트에서 우측에 있는 상하 스크롤의 영역을 뺀 너비값은 document.documentElement.clientWidth, 뷰포트에서 밑에 있는 좌우 스크롤의 영역을 뺀 높이값은 document..

2021. 11. 1. 08:00
Javascript

[웹 개발] 스크롤 방향 판별 및 스크롤 내릴 때에만 헤더 감추기

pageYOffset으로 스크롤 방향 판별하기 스크롤 방향 판별을 하기 위해 사용할 수 있는 여러 내장 프로퍼티들이 있지만 그중에 크로스 브라우징 문제가 없는 pageYOffset을 이용한 방법을 소개하겠습니다. 이것도 IE8이하에서는 작동하지 않지만, 저 정도의 구버전은 굳이 챙기지 않도록 하겠습니다. 먼저, 스크롤이 발생 중인 상태를 탐지하는 이벤트 리스너가 필요합니다. 이에 따라 필요한 이벤트는 "scroll" 입니다. 만들어야 하는 코드는 "scroll" 이벤트를 등록하는 이벤트 리스너와 이벤트가 발생할 때마다 호출될 이벤트 핸들러(콜백 함수)입니다. * 예시 코드 var prevScrollTop = 0; document.addEventListener("scroll", function(){ var..

2021. 10. 25. 08:00
Javascript

Javascript 배열 제대로 다루는 방법

배열 생성하는 방법 자바스크립트에서 배열을 생성하는 방법은 두 가지가 있습니다. 1. 배열 리터럴로 생성하는 방법 var abc = ["a", "b", "c"]; [] 안에 각 원소를 , 로 구분해서 값을 직접 명시해주어 생성하는 방법입니다. abc 배열은 "a", "b", "c" 원소를 각각 0, 1, 2번 인덱스에 가지게 됩니다. 2. Array() 생성자 함수로 생성하는 방법 // ex1 var abc = new Array(3); // ex2 var abc = new Array("a", "b", "c"); ex1처럼 배열을 선언하면 배열의 각 원소들의 값은 undefined입니다. Array() 안에 쓰인 숫자 3은 배열의 길이를 나타냅니다. 즉, abc는 길이가 3인 빈 배열이 됩니다. ex2처럼..

2021. 9. 20. 08:00
Javascript

Javascript 객체 제대로 다루는 방법

자바스크립트에서 객체를 생성하는 3가지 방법 1. 객체 리터럴 이용하기 2. Object() 객체 생성자 함수 이용하기 3. 생성자 함수 이용하기 자바스크립트에서 객체를 생성하는 방법은 위와 같이 3가지 방법이 있습니다. 다음은 각 방법별로 실제 코드를 어떻게 쓰는지 보겠습니다. 1. 객체 리터럴 이용하기 객체 리터럴이란 객체의 property, value를 명시하여 생성하는 표기법입니다. 객체 리터럴로 객체를 만드는 방법은 다음과 같습니다. var obj = { property1 : value1, property2 : value2 } 객체에는 속성(property)과 속성에 담는 값(value)을 담을 수 있습니다. 이 값에는 원시 데이터 타입인 숫자, 문자열, 불리언, null 등도 담을 수 있고 참..

2021. 9. 13. 08:00
Log

토이 프로젝트 후기 - Electron으로 To do list 만들기

(이 글은 이전 블로그에서 백업한 글을 불러서 가공한 글입니다. 원글의 작성 시기는 대략 2020년 5월쯤이고, 이 프로젝트를 진행한 시기는 2020년 4월 약 2주간입니다.) 프로젝트의 시작 계기 to do list를 만들어보고자 처음 시도했을 때에는 그저 바닐라 자바스크립트를 연습을 하는 것이 목적이었습니다. 하나의 프로젝트가 될 거라고 생각하지 않았죠. 하지만 일이 진행될수록 점점 불만이 생겼고 그것을 개선하고자 하는 욕구가 커졌죠. "할 일을 적는데 왜 날짜랑 시간이 없어?", "CRUD를 하는데 저장 데이터가 없어? node.js와 json을 써야겠네", "앱을 쓸 때마다 로컬 서버를 켜야 하나? 그냥 exe포맷의 데스크톱 앱으로 만들어보고 싶다." 그래서 자바스크립트로 데스크톱 앱을 만드는 방..

2020. 10. 9. 16:45