Web/javascript
[자바스크립트] scrollY vs pageYOffset 무엇을 써야하나?
scrollY vs pageYOffset 스크롤 값을 얻을 때 둘 다 작동은 하지만, 어떻게 다른지 궁금해서 검색해보았다. 둘 다 스크롤 Y 값을 얻는다는 것은 동일하지만, scrollY는 IE에서 동작하지 않는다고 한다. MDN에서는 노후 환경을 신경 쓰지 않아도 된다면 둘 중 아무거나 사용해도 괜찮다고 한다. 하지만 나는 IE를 버릴 수 없기 때문에 scrollY만 쓰는 건 지양해야겠다. 결론은 구형 브라우저 신경안써도 되면 scrollY 쓰고, 구형 브라우저까지 신경써야 한다면 pageYoffset을 쓴다. 아니면 조건문 걸어서 둘 다 쓰던지. 아래처럼. window.scrollY || window.pageYOffset window.pageYOffset || document.documentEleme..
[자바스크립트] 원시타입 참조타입
자바스크립트의 자료형에는 두가지 형태가 존재한다. 원시타입: 숫자(Number), 문자열(String), 논리형(Boolean), Null, Undefined, Symbol(ES6에서 추가) 참조타입: 함수(Function), 배열(Array), 객체(Object) 이 둘의 차이점은 참조타입의 경우 원본이 바뀌면 복사본도 똑같이 바뀌지만, 원시타입은 그렇지 않다. - 원시타입은 값을 복제하기 때문에, 원본이 바뀌어도 복제된 값은 바뀌지 않는다. - 원본 값과 복제된 값은 별개의 값이된다. - obj1의 값을 변경하니 obj2의 값도 자동으로 바뀐다. - 참조타입은 값을 참조 하기 때문에 원본값이 바뀌면 참조하는 값도 바뀐다. - 참조 값은 별개의 값이 아니라 원본의 값을 향하고 있는 것이다.
[자바스크립트] script의 async와 defer 속성
'async'와 'defer' 는 ' 스크립트 파일이 비동기적으로 로드되며, 로드가 완료되면 즉시 실행된다. HTML 파싱을 중단하지 않고 스크립트 파일을 로드하므로, 다른 리소스롸 병렬로 로드 될 수 있다. 스크립트의 실행 순서가 보장되지 않는다. 여러 개의 'async' 스크립트가 있을 경우 로드 완료 순서에 따라 실행된다. 주로 독립적인 스크립트 또는 분석 코드 등에 사용된다. 주의) 여러 개의 'async' 스크립트가 있을 경우, 로드가 완료되는 대로 실행될 수 있으므로 순서에 주의한다. defer 속성 : 스크립트 파일이 비동기적으로 로드되지만, HTML 파싱이 완료된 후에 실행된다. 즉, 스크립트 실행은 문서의 로딩이 완료되기 직전에 발생한다. 스크립트의 실행 순서가 보장된다. 여러 개의 'd..
[자바스크립트] requestAnimationFrame
일반적으로 JS에서 애니메이션을 만들 때는 'setInterval' 함수를 사용하여 일정한 간격으로 코드를 실행시키는 방식을 사용할 수 있다. 그러나 'setInterval'은 정확한 타이밍으로 실행되지 않을 수 있고, 브라우저의 성능에 따라 애니메이션이 부드럽지 않게 나올 수 있다. 이에 반해 'requestAnimationFrame' 은 웹브라우저에서 제공하는 메서드로, 웹 애니메이션을 부드럽게 처리하기 위해 사용된다. 이 메서드를 사용하면 애니메이션을 구성하는 함수가 브라우저의 리플로우(reflow)와 리페인트(repaint) 주기에 맞춰 호출된다. 브라우저는 모니터의 주사율에 맞게 애니메이션을 업데이트하므로, 성능에 따라 알맞은 주기로 실행된다. 기본적인 'requestAnimationFrame'..
[자바스크립트] PC, MOBILE 구별하기
2020.12.01 댓글에 이렇게 써져 있어서 참고할겸 캡쳐했다. 어차피 실제 사이트에서는 저런 소스 안쓴다. 개발자가 알아서 조절한다. 단지 저런게 있구나. 하고 알 겸 쓴건데. 환장한다며 쓰지마라고 누가 만들어서 퍼트리니 마니 그러니까 혹시나 내 블로그 보고 따라 쓸 것 같아서 맨위에 올려둔다. 알아서 걸러 보길.. * 스크립트로 PC와 MOBILE 구별 할 때. "win16|win32|win64|mac|macintel"; Win16 : 16비트 윈도위기반 컴퓨터 Win32 : 32비트 윈도위기반 컴퓨터 Win64 : 64비트 윈도위기반 컴퓨터 Mac : 매킨토시컴퓨터 MacIntel : 인텔CPU 를 가진 매킨토시 컴퓨터 // 모바일 위주로 구별 var mobileKeyWords = new Arra..
[자바스크립트] 자바스크립트 스터디
* 패스트캠퍼스 자바스크립트 강의 내용 *자바스크립트 - 스크립트 언어 - 인터프리터 언어 - 웹브라우저에서 주로 사용 - ECMA script *실습환경 만들기 - 크롬과 node.js 설치 *Expression - 표현식은 값을 만들어내기 때문에 함수의 인자로 사용할 수 있다. *Statement - 하나 혹은 여러 개의 표현식이 모여 문장을 이룬다. - 모든 표현식은 문장이 될 수 있다. - (보통) 문장의 끝에는 세미 콜론을 붙인다. - 조건문(if)과 반복문(for)도 문장이다. 이 경우 마지막 } 뒤에 세미콜론을 붙이지 않는다. => 표현식이 모여 문장이 되고 문장이 모여 만들고자 하는 프로그램이 된다. *키워드와 예약어(keywords & Reserved Words) 키워드 - 자바스크립트에..
[자바스크립트] 쿠키 굽기
닫기 쿠키 사용해서 이벤트 제어하기. setCookie로 쿠키를 설정하고 getCookie로 쿠키를 굽는다. 쿠키 이벤트를 줄 태그에 onclick을 추가. 함수로 제어한다. 위 소스는 토글 이벤트에 쿠키를 적용한거다. 카카오톡 아이콘이 처음엔 보여지고 닫기를 누르면 다시 오픈을 누르기 전까지 계속 닫힌 상태여야 한다. 그러다가 다시 오픈을 하면 또 오픈한 상태로 유지한다.
[자바스크립트] 스코프
스코프란 '변수가 스크립트 안의 어떤 곳에서 참조할 수 있는가'를 결정하는 개념이다. - 함수의 바깥에서 선언한 변수 => 글로벌 변수 - 함수의 안에서 선언한 변수 => 로컬 변수 그러나 var 명령을 사용하지 않고 선언된 변수는 모두 글로벌 변수로 간주한다. 때문에 var 명령으로 정의된 변수는 정의한 장소에 따라 변수의 스코프가 정해진다. 즉 로컬 변수를 정의하려면 반드시 var 명령을 사용해야 한다. 위와 같은 이유로 괜한 혼란의 소지를 만들지 말고 모든 변수에 var를 붙인다. 로컬 변수의 유효범위는 어디까지인가? var scope = 'Global variable'; function getValue(){ console.log(scope);//1 var scope = 'Local variable..
[자바스크립트] 함수를 정의할 때 주의할 네 가지
1. return 명령은 도중에 개행(표시 위치를 다음 행의 동일 위치로 이동시키는 동작) 하지 않는다. var getTriangle = function(base, height){ return// X base * height / 2;// X return base * height / 2 // O } + 위와 동일한 이유로 다음과 같은 문장에서도 명령 직후에 개행을 해서는 안 된다. - 레이블문과 함께 기술된 break / continue 명령 - throw 명령 - ++, - 연산자(후치) 특히 복잡한 루프인 경우는 return 명령 이상으로 문제를 발견하기 어렵게 될 가능성이 있다. 2. 함수는 데이터형의 하나다. Java Script에서 '함수는 데이터형의 일종'이다. 함수를 정의한다는 것은 실은 '변..
[자바스크립트] Javascript를 사용하여 현재 페이지 새로 고침하기
출처 : https://www.thewordcracker.com/jquery-examples/refresh-current-page-using-javascript/ 여러 가지 방법을 사용하여 현재 페이지를 새로 고침(리로드)할 수 있습니다.window.location.reload() 사용:history.go() 사용:window.location.href=window.location.href 사용:참고로 페이지가 자동으로 새로 고침되도록 하려면 다음과 같은 meta 태그를 head 태그 사이에 추가하면 됩니다.그러면 15초마다 페이지가 자동 새로 고침(리로드)됩니다. 가령 주식 정보 등을 일정 시간 동안 갱신해야 하는 경우에 이 방법을 사용할 수 있습니다.jQuery로 페이지를 리로드(새로 고침)하려는 경우..