개발브롞으

이번 글은 아래 강의 내용을 바탕으로 작성된 글입니다.(생활코딩)https://www.youtube.com/watch?v=hZdBDoYHd7E&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=23  그리고 아래 블로그글에 나온 코드의 내용을 이어서 디벨롭하는 과정입니다.https://hwangseoyoung.tistory.com/147 [생활코딩] JavaScript 왕기초 7장 - Visual Studio Code / 리팩토링(refactoring) - 중복 제거이번 글은 아래 강의를 바탕으로 작성되었습니다.(생활코딩)https://www.youtube.com/watch?v=vwRkFRke7ls&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&i..

이번 글은 아래 강의 내용을 바탕으로 작성되었습니다.(생활코딩)https://www.youtube.com/watch?v=BjkfkKdlvLo&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=22  [ 반복문과 배열 실습 개요 ]아래 실행결과 사진은 아래 코드를 실행한 결과이다.아래 실행결과 사진만 보면 과일 이름을 반복적으로 리스트(list) 태그의 형태로 작성하고 있는 것을 확인할 수 있다. 따라서 해당 실습을 만들기 위해서는 먼저 과일이름들은 배열(array)를 통해 서로 연관된 데이터를 배열로 묶어줘야한다.그리고 해당 배열을 순차적으로 꺼내서 태그를 붙여주는 형식으로 반복문을 만들어 출력시켜주면 된다. Loop & Array ..

이번 글은 아래 강의를 바탕으로 작성되었습니다.(생활코딩)https://www.youtube.com/watch?v=vwRkFRke7ls&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=18     [ 리팩토링이란? ]리팩토링(refactoring)은 결과의 변경 없이 코드의 구조를 재조정하여 중복된 코드의 중복을 최소화하고 불필요한 부분들을 생략해주는 것이다.이로 인해, 우리는 더 깔끔한 코드를 만들어 낼 수 있다.    [ 리팩토링 실습 1 - this ]아래 코드를 보면 document.querySelector('#night_day') 이 부분이 계속 반복되는 것을 알 수 있다.하지만 document.querySelector('#night_day') 부분의 경우 해당..

이번 글은 아래 강의 내용을 바탕으로 작성되었습니다.(생활코딩)https://www.youtube.com/watch?v=Gt2iGEEKXww&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=17   아래 실행결과 영상에 대한 실습이다.버튼을 눌러 night 버튼을 누르면 검정 배경에 흰 글씨로 day 버튼을 누르면 흰 배경에 검정 글씨로 변경된다.전체 코드는 다음과 같다. 안녕하세요   우선 이 실습의 경우 if문으로 night의 여부에 대해 참인지 거짓인지 판단을 해줘야한다.그리고 night 여부를 판단하기 위해 지금 현재 value 값이 무엇인지 알아내야한다.현재 value값을 알아내는 코드의 부분은 아래의 코드이다.if(document.querySele..

이번 글은 아래 강의 내용을 바탕으로 작성된 글입니다.(생활코딩)https://www.youtube.com/watch?v=wjlbT3hvDMc&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=16    [ 조건문 if ]아래 실습은 조건문 if에 대한 내용이다.if는 결과값이 true면 첫줄을 if에 해당하는 첫번째 부분을 실행시키고 false면 그 다음 부분인 else에 해당하는 부분을 실행시킨다.그래서 if의 괄호 안에는 boolean데이터 타입이 작성된다.그래서 아래 실행결과와 같이 1 2 3 4 순으로 출력되어야할 문자가 true일 경우 첫번째만 실행하여 1 2 4가 출력되고 false의 경우 첫번째가 아닌 else부분인 그 다음을 실행하여 1 3 4가 출력된다...

이번 글은 아래 강의 내용을 바탕으로 작성되었습니다.(생활코딩)https://www.youtube.com/watch?v=A2qp-jpk_XA&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=15   [ 비교연산자 === ]===은 동등비교연산자로서 좌항과 우항의 값이 같은지 다른지에 따라 같으면 결과값으로 true를 다르면 false를 배출한다. 여기서 true와 false는 Boolean에 해당된다.   [ 실습 1 ]아래 실습을 보면 1과 1은 같기 때문에 1===1을 하면 true가 되고 1===2를 하면 false가 된다.  코드에서 write()는 해당 괄호 안의 결과값을 출력하는 역할을 한다. Comparision operators & Boolean ..

이번 글은 아래 강의를 바탕으로 작성되었습니다.(생활코딩)https://www.youtube.com/watch?v=5tqfbgfA1LY&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=12  [ 실습 결과 ]아래 영상 결과와 같이 night버튼을 누르면 배경이 검정색이 되면서 야간모드가 실행되고 day버튼을 누르면 다시 화면이 흰색으로 변하면서 원래대로 돌아온다.전체 코드는 아래와 같다. 안녕하세요    [ 실습 설명 ]먼저 버튼을 누르면 변경되는 것이므로 버튼을 생성해준 이후 value 값으로 night버튼인지 day버튼인지 표시해준다.그리고 만든 버튼을 누를 시에 실행되는 것은 이벤트이므로 onclick 이벤트를 사용해주고 이벤트 내용에 대해서는 ..

이번 글은 아래 강의 내용을 바탕으로 작성되었다.(생활코딩)https://www.youtube.com/watch?v=-hdtrReY9Zw&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=4    [ Event란? ]이벤트는 JavaScript와 사용자가 상호작용하는데 사용되는 것으로어떤 일이 발생했을 때 이후에 나오는 결과값을 이벤트(event)라고 한다.    [ Event의 종류 - onclick ]아래 코드를 실행하면 실행결과 영상과 같이 버튼 클릭 시 알림창이 뜨게 된다.우선 input type="button"으로 버튼을 만들어주고 value 속성을 통해 버튼 안에 들어가고자하는 글자를 넣는다.그리고 onclick 속성을 통해 알림창을 만들어주는 alert()를 ..