코딩기록

반복문 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파일을 만들어보면 될 듯 하다.

1."따옴표 사용했을 때" const name = "Alice"; const greeting = "Hello, " + name + "!"; console.log(greeting); // 출력값: "Hello, Alice!" 2. `백틱 사용했을 때` const name = "Alice"; const greeting = `Hello, ${name}!`; console.log(greeting); // 출력값: "Hello, Alice!" - `` 백틱을 사용하면 코드를 더 간결하게 쓸 수 있고 html작성할 때의 구조로도 작업 가능함. 예제는 gpt에서 가져옴,,

요즘은 var를 권장하지 않는다. var를 사용하면서 발생하는 문제점 ​ 1. 상수인지 변수인지 구분이 안된다. ​ 2. 변수는 let으로 사용한다. var a = "1"; var a = "10"; var는 위에서 1이라고 정의했어도 아래에서 10이라고 재정의가 가능해 스크립트 오류가 발생할 확률이 높다. 3. scope의 차이 var x = 1; if (true) { var x = 2; console.log(x); // 출력값: 2 } console.log(x); // 출력값: 2 let x = 1; if (true) { let x = 2; console.log(x); // 출력값: 2 } console.log(x); // 출력값: 1 var는 블록문 안에서 선언되었어도 밖에서 참조할 수 있고 let이..

▶HTML EventHandler - if(elName.value.length < 5) //요소. 입력내용. 글자 수 elMsg.textContent = '이름은 5글자 이상 써주세요!'; : 사용자 이름 5글자 이하일 때 경고창 뜸. ▶다른방식 매개변수 추가 IE 구버전 ▶커서 포커스 - 화면이 로드될 때 자동으로 커서가 움직임.

▶form_출석체크 - A.append(b); //부모요소A에 자식 요소를 추가 (마지막 부분) - A.prepend(b); //부모요소A에 자식 요소로를 추가 (첫번째 부분) - A.before(B); //A요소의 바로 앞에 B를 추가 - A.after(B); //A요소의 바로 뒤에 B를 추가 - A.insertbefore(B); //A요소의 바로 앞에 B를 추가 - A.insertafter(B); //A요소의 바로 뒤에 B를 추가 ▶form_약관동의 - all.onclick = function(){ terms1.checked = this.checked; terms2.checked = this.checked; } : 모든 약관 동의 - overflow: auto; : 영역 안의 글자 자동으로 스크롤 생..

▶classList add/remove/contains - 사이트를 열었을 때 사이드바가 안보이는 상태이기 때문에 !(부정) 사용 - toggle 을 사용하지 않았을 때의 방법으로 if 사용해봄. ▶classList add/remove - 버튼이 여러개라서 querySelectorALL 사용 - function의 bb를 그대로 사용하지 못해서 변수값 let num=0 지정 ▶classList add/remove - .list img의 개수가 여러개기 때문에 querySelectorALL 사용 - .list img의 이미지를 onclick하면 클래스 active 발생 - elpopImage.src = this.src : 팝업창이 이미지 주소는 내가 클릭하는 이미지 - num = bb : 몇번째 배열의 아이..