바닐라코딩 사전학습/코드연습, 퀴즈, 과제9 Calendar ** 자세한 코드는 GitHub kkomabono/vanilla_practice: Practice for vanilla_prep. (github.com) 에 업로드 아이디어 오늘의 요일, 날짜, 월, 연도 표기 - Date()메서드를 이용해서 현재시간을 받아온 후 textContent로 할당, 요일과 월은 해당 요일과 월이 숫자로 나오므로 함수를 작성해서 숫자로 나올 수 있도록 변환해서 출력하였다. 일~토 요일 라벨링 표기 - 태그를 새로 만들고 부모요소에 추가시켜준다. 이를 for문으로 반복 현재 월의 1일 판단 - 달력은 7일을 한 행으로 만드는 점에 착안해서 오늘 날짜를 받아서 7로 나눈 값과 오늘의 요일을 비교해서 1일을 판단했다. -> 그러나 이후에 좀 더 쉬운 방법을 찾아내어 작성한 코드는 더.. 2021. 12. 28. Number Baseball **작성한 코드내용은 길이 관계상 GitHub에 업로드하였다. kkomabono/vanilla_practice: Practice for vanilla_prep. (github.com) 1) 게임 시작 버튼 만들기 - HTML로 작성 2) 게임 시작 버튼 클릭시 랜덤한 세 자리 숫자 만들기 - click 이벤트로 연결. Math.random()을 써서 랜덤숫자 생성, 세 자리 숫자이므로 0~9까지 출력하면 되는데 Math.floor()와 조합해서 Math.floor(Math.random())으로 0~9까지의 숫자 생성 3) 게임 시작 버튼을 누르면 2)를 수행하고 바로 숫자 입력칸이 팝업되도록 만들기 - prompt를 이용. 4) 만약 3)에서 잘못된 숫자를 입력하면 제대로 된 숫자를 입력할 때 까지 반복.. 2021. 12. 28. JavaScript Koans-master 바닐라코딩 사전학습가이드에서 기본적인 사항을 공부 후에 Koans퀴즈를 추천하였다. Koans퀴즈를 통해 JavaScript를 확인하고 어떻게 사용되는지 학습할 수 있었다. 처음에는 갑자기 길어진 코드와 지금까지는 보지 못했던 테스트코드가 포함되어 있어서 어디서부터 봐야할지도 막막하였다. 하나씩 분석하면서 테스트코드는 어디서부터 어디까지이고 문제는 어디인지 알 수 있었고, 테스트에 대한 기본적인 사항도 알 수 있었다. Koans관련 코드는 GitHub를 통해 GIt에 업로드하였다. 이 글에서는 Koans를 공부하던 중에 더 정리해야 할 사항들을 적고 다른 글에서 정리하겠다. 1) expect expect().tobe() 시리즈 정리, 정규식 정리. https://jestjs.io/docs/expect 2.. 2021. 12. 28. Primitive / Reference 퀴즈 Q1) const person = { age: 30 }; const something = person.age; person.age = 50; console.log(something); // ? 예상 답 : 30 예상 이유 : person은 참조형타입인 객체이고 person.age는 원시타입인 숫자이다. 따라서 sometihg에도 원시타입인 30이 저장되고 이후에 person.age값이 바뀌어도 따라서 바뀌지 않는다. 정답 : 30 Q2) let one = { name: "one" }; const two = { name: "two" }; const something = one; one = { name: "ONE" }; console.log(something); // ? 예상 답 : "ONE: 예상 이유 :.. 2021. 12. 27. Scope Quiz Q1) function foo () { var a = 5; for (var i = 0; i < a; i++) { console.log(a); } console.log(i); // 무엇이 출력될까요? } foo(); 예상 답 : 5 예상 이유 : 함수 foo()가 실행되면 a가 선언되고 5가 할당된다. for문에서 i가 선언되고 a가 필요하므로 a를 찾는다. 같은 scope에 a가 선언되어 있으므로 a의 값을 가져와서 for문을 돌린다. console.log(i)에서 i를 찾게되는데 for문은 함수가 아니기 때문에 i는 console.log(i); 문과 같은 scope에 있다. 따라서 error가 아닌 i가 출력된다. 정답 : 5 Q2) var a = 1; function bar () { function .. 2021. 12. 27. Craousel 아이디어 1) 뼈대를 HTML로 작성 2) 화살표를 누르면 이미지 바뀌도록 JS 작성 2-1) button.addEventListner("click", function ButtonClick(){}) 를 사용해서 화살표를 누르면 다음 이미지로 넘어가도록 작성, 배열에 이미지를 넣어서 배열에 담긴 이미지를 순차적으로 보이도록 해보자. 2-2) 좌우 화살표와 아래 라디오버튼 동기화. -> 3-1)에서 선언한 $input 변수를 이용해서 $input[].checked = "checked";로 라디오버튼을 체크하였다. 3) 아래 버튼에 해당하는 상호작용 JS작성 3-1)버튼을 누를 때마다 배열의 인덱스를 재설정, JS의 number를 index로 지정. 정리할 것 Array() 생성자->배열 리터럴과 비교해서 정.. 2021. 12. 24. 이전 1 2 다음
