TIL LIST/JavaScript (21) 썸네일형 리스트형 OTT풍 배경화면 애니메이션 원래는 예고편 감상 버튼을 누르면 팝업 비디오가 뜨는 OTT풍 웹 사이트를 디자인 및 개발 중이었는데 욕심이 생겨 배경 이미지가 시간에 따라 변경되며 움직이는 자바스크립트 소스를 짰다. (디자인) 피그마 파일 https://www.figma.com/file/w3InywIpC2MNjVbF1b2Pdb/Untitled?node-id=0%3A1 자바스크립트 소스 function randomBackground() { let random = Math.floor(Math.random() * 6); let backgroundImg = ['url("images/bg01.jpeg")', 'url("images/bg02.jpeg")', 'url("images/bg03.jpeg")', 'url("images/bg04.jpeg.. 공부하면서 헷갈렸던 구문 1. JavaScript를 이용해 숫자 증감하기 연산자를 이용해 변수를 증감할 수 있다. i++ // 는 i = i + 1 // 과 같다 i-- // 는 i = i - 1 // 과 같다 2. 증감 덧셈을 이용한 복합 할당 myVar = myVar + 5; let myVar = 1; myVar += 5; // 6 let a = 3; let b = 17; let c = 12; // Only change code below this line a += 12; // a = a + 12; b += 9; // b = 9 + b; c += 7; // c = c + 7; // 증강 뺄셈은 -= // 증강 곱셈은 *= // 증강 나눗셈 /= 3. if/else 문과 switch 문 function chainToSwitch.. Color Changer rgb(255, 255, 255) Click @import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap'); body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-flow: column; letter-spacing: -1px; } h1 { font-family: 'Poppins', sans-serif; font-weight: 500;.. pokemon demo loop를 이용해 많은 샘플을 만들고 동적으로 이미지를 제어할 수 있다. Look at my pokemon .pokemon {display: inline-block; text-align: center;} .pokemon img {display: block;} // http://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png const container = document.querySelector('#container'); const baseURL = 'http://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/' for(let i = 1; i < 899; i.. 7시간 짜리 코드 const n = 'new'; const l = 'list'; const c = 'clear'; const q = 'quit'; const toDoLists = []; let command = prompt("오늘 무슨 일을 시작할 건가요?") while (command !== q) { if (command === q) { break; } else if (command === n) { let toDo = prompt("새로운 리스트를 추가하세요."); toDoLists.push(toDo); } else if (command === l) { for(let i = 0; i < toDoLists.length; i++) { console.log(`${i}: ${toDoLists[i]}`); } } else if .. [chrome app 코딩 챌린지] 5. 위치 정보 가져오기(API) API는 직접 구현하기 힘든 서비스를 구현할 수 있게 해주는 프로그래밍 인터페이스다. 홈페이지에 카카오맵 또는 구글맵을 넣어 실시간 위치를 보여줄 수 있고, 카카오톡 API를 통해 메세지를 보낼 수도, 페이스북이나 인스타그램 API를 통해 게시글을 공유할 수도 있다. 위치, 소셜 뿐만 아니라 API는 다양한 방면에서 쓰이고 있다. mdn Web API 모음: https://developer.mozilla.org/ko/docs/Web/API 여기에서는 위치 API인 Geolocation API로 사용자의 위치 정보를 받아오고, 그 좌표를 open Weather API 에 입력해 현재 날씨 데이터를 실시간으로 업데이트 해준다. 코드 리뷰 function onGeoSuccess(position) { const.. [chrome app 코딩 챌린지] 4. 시스템 시간 가져오기 JavaScipt에선 Date 라는 객체가 있다. 해당 객체는 UNIX 타임스탬프를 담는데, 1970년 1월 1일 자정부터 지난 시간을 밀리초로 나타내는 값이다. Date.now()를 호출하면 어떤 식으로 출력되는 지 알 수 있다. new Date() 생성자로 호출할 경우 현재 날짜와 시간을 나타내는 문자열 형태로 새로운 Date 객체를 반환한다. 내가 표현하고 싶은 것은 저 중 18:47 부분, 즉 분과 초다. 위 처럼 해당 date를 변수로 설정해 값을 저장해준 뒤 getHours()와 getMinutes() 메서드를 이용하면 값을 반환한다. 그 값을 string 형태로 출력해주는 함수를 작성해보도록 하겠다. 코드 리뷰 00:00 const clock = document.querySelector("... [chrome app 코딩 챌린지] 3. 로그인 값 기억하기 localStorage는 web storage 중 하나로 서버에 데이터를 저장하는 방식이 아닌 웹 브라우저 상에서 데이터를 저장할 수 있는 방식이다. 키와 값으로 데이터가 이루어져 있으며 이런 형식으로 이루어져 있다. localStorage.setItem("key", value); // > setItem // > getItem, removeItem("key"); // > clear(); 클리어 로그인 화면에서 이름 데이터 값을 localStorage에 저장하고, 그 저장한 값을 불러들여 화면에 출력하는 방식을 사용하면 매커니즘 자체는 어렵지 않으나 후술할 문제 때문에 꽤 오랜 시간이 걸렸다. 코드 리뷰 - Weather 00:00 const loginName = document.querySelector(.. 이전 1 2 3 다음
