본문 바로가기

바닐라코딩 사전학습45

Background Changer 아이디어 1) 해당 웹페이지와 같은 형태를 HTML과 CSS로 작성 2) 랜덤한 Hex color code를 생성하는 함수 작성 2-1)math.random()과 math.floor()를 사용을 사용 2-2)for를 이용해서 6개의 문자열을 합치자 2-3)for문을 돌리고 해당 값을 hex_color에 넘겨 준 후에는 hex_color를 초기화시켜준다. 3) 해당 함수를 적용하여 버튼 클릭 시 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code수정 정리할 것: Math. 함수, Hex color code, HTML과 JS연결방법, 문자열에 변수 넣기 CLICK ME! const hex = "01233456789ABCDEF"; var hex_color = ""; c.. 2021. 12. 24.
appendChild()와 node참조 두 코드의 차이는? const something = document.createElement("p"); for (let i = 0; i < 5; i++) { something.textContent = i; document.body.appendChild(something); } //결과 : 4 for (let i = 0; i < 5; i++) { const something = document.createElement("p"); something.textContent = i; document.body.appendChild(something); } //결과 : //0 //1 //2 //3 //4 위의 코드는 createElement를 통해 p태그를 만들고 이후에는 반복문이 실행되면서 바뀐값이 appendCh.. 2021. 12. 24.
크롬 콘솔모드에서 let변수만 재선언이 되는 이유 비주얼 스튜디오 코드를 이용해서 코드를 작성하는 중에 내가 제대로 작성하고 있나 확인할 겸 크롬 콘솔모드에서 코드를 확인하곤 한다. 분명 let으로 선언한 변수는 재선언이 안된다고 했는데 에러메세지없이 그대로 재할당이 되었다! 왜 이러는지 구글링 한 결과 아래와 같은 답을 얻을 수 있었다. 일반 스크립트 실행과 콘솔 모드에는 약간의 문법 차이가 있다. 전자에서는 표준 JS문법을 따르기 때문에 let을 재선언하려고 하면 오류를 출력한다. 후자는 예외적으로 콘솔모드의 interactive한 특징 때문에 재선언을 허용한다. > let a; let a; // 한 줄에 재선언하는 경우는 재선언 불가 < Uncaught SyntaxError: Identifier 'a' has already been declared.. 2021. 12. 24.
크롬 개발자도구로 디버깅하기 디버깅은 개발자에게 코드의 흐름에 따라 변하는 변수나 값을 쉽게 알게해주는 강력한 개발도구이다. 1. 크롬 개발자도구 실행(F12) 2. 개발자도구 탭에서 소스탭 클릭 후에 디버깅을 원하는 파일에 가서 중단지점을 설정한다. 중단지점은 해당 line의 번호를 클릭하면 지정된다. 3. 코드를 실행하고 중단점을 만나게되면 아래와 같은 화면이 나오게 된다. 코드 수행중에 중단점을 만난 화면이므로, 원하는 변수의 값을 마우스오버하여 확인하자. 이후 확인이 끝났으면 다음 스텝에 가기 위해 재생버튼을 누르면 중단점에서 다시 멈춘다. 다시 확인한다. 2021. 12. 24.
Callback함수 이 글은 jason9319님의 티스토리를 참고하여 작성하였습니다. [JavaScript] 콜백(Callback)함수와 비동기 처리 (tistory.com) [JavaScript] 콜백(Callback)함수와 비동기 처리 (tistory.com) [JavaScript] 콜백(Callback)함수와 비동기 처리 자바스크립트에서 콜백 함수는 매우 중요한 개념이다. 콜백함수란? 콜백함수는 함수 내부에서 매개변수로 전달되어 특정 시점에 호출되는 함수를 말한다. 다음은 콜백함수의 예제이다. 간단하 jason9319.tistory.com Array를 공부하다 forEach메서드는 콜백함수를 사용한 메서드라는 것을 알게되었다. 그렇다면 콜백함수는 무엇일까? 콜백함수 파라미터로 함수를 전달받아서 함수의 내부에서 실행하는.. 2021. 12. 24.
김서방 찾기 / 가운데글자 가져오기 / 수박수박수박수 1. 김서방 찾기 function findKim(seoul){ var answer = seoul.indexOf('Kim'); return "김서방은 " + answer + "에 있다"; } 배열의 인덱스를 찾아서 출력하는 것이므로 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array 에서indexOf를 찾아서 사용하였다. 처음에는 위와같이 return 값에 문자열 + answer + 문자열을 return에 직접 입력하는 방식으로 풀이하였다. function solution(seoul) { var answer = `김서방은 ${seoul.indexOf("Kim")}에 있다`; return answer; } C언.. 2021. 12. 24.

티스토리툴바