Study/JavaScript(73)
-
javascript url 파라미터 가져오기
javascript로 주소에 있는 파라미터 가져오기 url : http://test.com?brand=1 let query = window.location.search; let param = new URLSearchParams(query); let brand = param.get('brand'); console.log(brand); // 1 https://europani.github.io/javascript/2021/06/25/031-URL-parameter.html
2022.06.27
-
스크롤 방향에 따른 네비게이션 보이기, 감추기
HTML Logo 글로벌 네비게이션 menu1 menu2 menu3 menu4 menu5 CSS /* header */ header{position:fixed; left: 0; top: 0; width: 100%; z-index:99; background:none; transition:top .3s, background .3s;} header::after{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; background:linear-gradient(90deg, rgba(0,198,255,1) 55%, rgba(8,228,168,1) 100%); opacity: 0; transi..
2022.06.02
-
노드 복제와 템플릿 Node clone, template
참고 notion https://www.notion.so/mioksong/JavaScript-DOM-for-Vanilla-JS-c6edf7a6bbe2405595d91d21eda3bc1e#ed58eb48a5c3422db5d305e4127938d3 JavaScript & DOM for Vanilla JS 목차 www.notion.so JS window.addEventListener("load", function(){ var notices = [ {id:5, title:"추가한당~~~", regDate:"2019-01-26", writerId:"newlec", hit:"0"}, {id:6, title:"복제한당~~", regDate:"2019-01-26", writerId:"newlec", hit:"0"} ]..
2022.05.30
-
Timer 타이머
JS // timer function countdown( elementId, seconds ){ var element, endTime, hours, mins, msLeft, time; function updateTimer(){ msLeft = endTime - (+new Date); if ( msLeft < 0 ) { console.log('done'); } else { time = new Date( msLeft ); // hours = time.getUTCHours(); // mins = time.getUTCMinutes(); hours = String(time.getUTCHours()).padStart(2, "0"); mins = String(time.getUTCMinutes()).padStart(2..
2022.05.18
-
ES6 배열 내장 함수
ES6 배열함수 ES6에는 배열을 처리할 수 있는 여러 함수들이 있다. 1) forEach : 반환값이 없다, 단순 for문과 같이 작동한다. 2) map : 반환값을 배열에 담아 반환한다. ***** 3) filter : 조건에 충족하는(true) 아이템만 배열에 담아 반환한다. 4) some : 조건에 충족하는 아이템이 하나라도 있으면 true 반환, 아니면 false. 5) every : 모든 배열에 아이템이 조건을 충족하면 true 반환, 아니면 false. 6) find : 조건에 충족하는 아이템 하나만 반환(여러개라면 첫번째것만 반환) 7) findIndex : 조건에 충족하는 아이템의 인덱스값 반환 (여러개라면 첫번째아이템의 인덱스번호만 반환) 8) reduce : 배열의 각 요소에 대해 주..
2022.04.26
-
Momentum
바닐라 JS로 브라우저 크롬의 확장 프로그램인 Momentum을 구현하는 프로젝트 https://aluvy.github.io/www/momentum/ Momentum Momentum 00:00:00 aluvy.github.io local storage를 활용한 로그인, to do list 구현과 Math.random()을 활용한 랜덤 background 및 명언 출력 setInterval을 활용한 시계, openweathermap 을 활용한 날씨 API 등 index.html 헤더에 아이콘 사용을 위해서 폰트어썸 코드를 입력했다. Momentum 00:00:00 js/greeting.js 로그인 전을 위한 .form-wrap 영역과 로그인 후를 위한 .greeting 영역으로 분리되어 있다. userna..
2022.04.25