분류 전체보기 169

[javascript30] 05-flex panel gallery

Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion //css css는 기존에 있던 거에 flex로 배열을 맞춰주었다. .panel p:nth-child(1) {transform: translateY(-100%);} .panel p:nth-child(3) {transform: translateY(100%);} .panel.open { flex: 5; font-size: 40px;} .panel.open p:nth-child(1), .panel.open p:nth-child(3) {transform: translateY(0);} 글자 효과는 transform으로 위치를 바꿔주었고 panel에 flex:5를..

언어/JavaScript 2023.06.22

[javascript] 배열 split(), join(), 전개연산자

const data = 'new york;10.22;2000'; const transformData = data.split(';'); transformData[1] = +transformData[1] console.log(transformData); //(3) ['new york', 10.22, '2000'] split() - split(); (괄호)안에 구분자를 통해 문자열을 구분함. - transformData[1] = +transformData[1] -> 숫자로 변환 const nameFragments = ['max', 'anna']; const aaaa = ['123', 'dd'] const name = nameFragments.join('/ '); console.log(name); //max/ ..

언어/JavaScript 2023.06.20

[javascript] 배열 push(), unshift(), shift(), pop()

const hobbies = ['drawing', 'swimming', 'yoga', 'filiates']; 내 취미 hobbies.push('trip'); //배열의 맨 끝에 값을 추가 -> ['drawing', 'swimming', 'yoga', 'filiates', 'trip'] hobbies.unshift('coding'); //배열의 앞순서에 추가 -> ['coding', 'drawing', 'swimming', 'yoga', 'filiates', 'trip'] hobbies.pop(); //배열의 맨 끝의 값을 제거 -> ['coding', 'drawing', 'swimming', 'yoga']; hobbies.shift() // 배열의 맨 앞의 값을 제거 -> ['drawing','swimm..

언어/JavaScript 2023.06.19

[javaScript] 반복문의 차이( for, while)

반복문 for 반복문 for-of 반복문 for-in 반복문 while 반복문 for (let i = 0 i < 3; i++ { console.log(i) } for (const el of array) { console.log(el); } for (const key in obj) { console.log(key); console.log(obj[key]); } while (isLoggedIn) { .... } for 반복문 - for(변수를 초기화; 조건; 매 반복 이후에 실행할 코드) - 특정횟수만큼 코드를 실행하도록 함. - 보통은 매 반복마다 증가 또는 변화 - 세미콜론으로 구분 for-of 반복문 - 배열의 모든 요소에 대해 코드를 실행할 수 있도록 함. - of를 사용하여 상수를 생성 for in..

언어/JavaScript 2023.06.08

[javascript] 문법 정리

1. Shorthand property names const name = 'elle'; const age = '18'; const ell1 = { name: name, age: age } const ell2 = {name,age} ell1을 ell2처럼 축약 가능 콘솔로 찍어보면 {name: 'elle', age: '18'} 잘 나온다 2. Destructuring assignment //객체 const student = { name: 'anna', level: 1 } const name = student.name; const level = student.level; console.log(name, level); //축약 const {name, level} = student; console.log(nam..

언어/JavaScript 2023.05.28

[javascipt30]아날로그 시계 만들기

순서대로 첫 번째부터 하려했지만 오디오 파일이 안나와서 두 번째부터 시작 //html 12 3 6 9 //css .hand 시계바늘에 있는 transition을 삭제했다ㅜㅠ 원래 무소음 시계로 만드려고 움직임을 부드럽게 했다가 강력새로고침 할 때마다 0도에서 돌아오는 것 때문에 포기. 그냥 초침 효과만 주려고 transition을 넣었는데 0초가 되면 바늘 위치가 이상해지는 오류가 난다. 그래서 일단 삭제.. 나중의 내가 고쳐보기로 //js const hoursHand = document.querySelector('.hours'); const minutesHand = document.querySelector('.minutes'); const secondsHand = document.querySelecto..

언어/JavaScript 2023.05.27

[javascipt30]자바스크립트 30일 챌린지

자바스크립트 공부를 위해 이것저것 알아보던 중 좋은 사이트를 발견했다. https://javascript30.com/ JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com 사이트로 들어가면 간단한 이메일 가입을 통해 강의를 볼 수 있으며 깃허브도 존재한다. 근데 강의는 영어자막밖에 없어서 감안하고 봐야함.. 노마드코더 js강의를 듣고 다음은 어떤 강의를 들어야할까 고민했는데 예제 영상과 파일까지 있어서 혼자 연습해보기 딱일듯 파일을 보면 한 챌린지당 start와 ficished파일이 있는데 start파일에서 자바스크립트를 추가해서 finished파일을 만들어보면 될 듯 하다.

언어/JavaScript 2023.05.27

노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - 랜덤 배경, 랜덤 명언

새로고침할 때마다 배경 바꾸기 const images = ["0.png","1.png","2.png","3.jpg","4.png"]; const chosenImage = images[Math.floor(Math.random() * images.length)]; //images[내림(랜덤 숫자 * images의 길이)]; const bgImage = document.createElement('img'); //이미지 태그 추가 bgImage.src = `img/${chosenImage}`; //이미지 경로 bgImage.classList.add('bg_img'); document.body.appendChild(bgImage); body 안에 자식요소로 이미지태그 새로고침할 때마다 명언 바꾸기 const qu..

노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - 시계 만들기

const clock = document.getElementById('clock'); function getClock() { const date = new Date(); const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); clock.innerText = `${hours}:${minutes}:${seconds}` } getClock(); setInterval(getClock, 1000); // function sayHello(){ // clock...