코딩기록

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..

반복문 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..

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..

혼자 해보려고 했지만 대실패,, 코드 받아쓰기에 현타가 와서 자바스크립트를 좀 더 공부한 다음에 챌린지에 도전하기로 함..

순서대로 첫 번째부터 하려했지만 오디오 파일이 안나와서 두 번째부터 시작 //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..

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

새로고침할 때마다 배경 바꾸기 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..

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...

//html 간단한.... form과 h1에 hidden 클래스 넣어주기 //javascript const loginForm = document.getElementById('login_form'); const loginInput = loginForm.querySelector('input'); const greeting = document.querySelector('#greeting') // 이렇게도 가능! // const loginInput = document.querySelector('#login_form input'); // const loginButton = document.querySelector('#login_form button'); const HIDDEN_CLASSNAME = 'hidden'..

const title = document.querySelector("button"); function titleClick() { const clickedClass = "active" if(title.classList.contains(clickedClass)) { title.classList.remove(clickedClass); } else { title.classList.add(clickedClass); } } title.addEventListener("click", titleClick);// title.onclick = titleClick 같은 방법 className을 사용하면 기존에 가지고 있던 클래스도 없애버려서 사용불가 clickedClass 대신에 'active'를 넣어도 되지만 오류의 위험이..