본문 바로가기

TIL/Javascript18

/JavaScript/반복문 반복문(Loop) 프로그램을 만들다 보면 상황에 따라 특정 코드가 여러 번 반복해야 될 때가 있을 것이다. 그 상황에서 특정 코드를 복사-붙여 넣기를 통해 해결할 수도 있겠지만 너무 많아질 경우 한계가 있을 것이다. 그러한 문제를 해결해줄 수 있는 것이 반복문이다. 예제를 먼저 보자. 이렇게 순서대로 실행되는 프로그램의 코드가 있다고 하자 저 코드에서 2번째와 3번째 코드가 반복해서 실행되어야 한다는 가정하 코드를 작성해보자 다음과 같이 해당 반복되어야 할 코드에 while이라는 코드가 보일 것이다. 반복문의 기본형식이다. while의 () 안에는 boolean데이터 타입을 사용한다. (if문과 같다) 실행되는 과정은 다음과 같다. while문의 데이터 값을 확인해 true일 경우, while문 안쪽의 .. 2021. 12. 27.
/JavaScript/배열 배열(Array) 프로그래밍을 하는데에 많은 데이터를 사용하게 된다. 발생한 데이터는 서로 성격이 다르고 많아지면 많아질수록 정리하기 힘들고 복잡해진다. 이러한 문제를 해결하기 위해 배열이란 것을 사용함으로 정리정돈이 가능하다. 형식 문자를 입력할 때에 " "를 사용하여 출력시킬 수 있었다. 하지만 배열은 대괄호[ ]를 이용하여 나타낼 수 있으며 대괄호 사이에 여러 가지의 데이터를 넣을 수 있다. 예를 들면 이와 같이 대괄호 사이에 데이터 값을 넣어주고 배열의 값과 값 사이에는 , 로 구분 지어주고 따라서 만들어진 배열을 test이라는 변수에 넣어준 것이다. 이렇게 만들어진 배열은 여러 가지 명령어를 통해 사용이 응용할 수 있다. 먼저 배열의 값을 꺼내보자 document.write(test [0]);를.. 2021. 12. 26.
/JavaScript/리팩토링 Refactoring 코딩하고 나면 코드가 비효율적인 면이 있다. 동작하는 것은 그대로 두고 코드 자체만 효율적으로 만들어서 가독성을 높이고 유지 보수하기 편하게 만들어 중복된 코드를 낮추는 것으로 코드를 다시 개선하는 작업을 리팩터링이라 한다. 활용 저번에 만들었던 버튼을 가지고 예시를 들어보자. 똑같은 코드를 사용하여 같은 버튼을 하나 더 만들어보면 작동은 하지만 처음에 만든 버튼만 value가 변하는 것을 볼 수 있다. 이런 식으로 변하는 걸 확인할 수 있다. 두 번째 버튼도 첫 번째 버튼처럼 사용하려면 다음과 같이 하면 된다. 이와 같이 id값을 구분해줘야 정상적으로 사용이 가능하다. 아주 사소한 예를 들어 보았지만 이러한 코드를 사용한 버튼이 여러 개일 경우 모두 다 바꿔줘야 하는 불편함이 있다.. 2021. 12. 25.
/JavaScript/조건문 활용 조건문 활용 조건문은 if의 ( ) 안에 true or false 값이 오면 상황에 따라 실행되는 코드가 달라지는 걸 알게 되었다. 이러한 사용 방법과 형식에 대해 알게 되었으니 사용해보자. IF 지난번엔 버튼 1과 2를 만들어서 각각의 버튼을 클릭하였을 때 웹페이지의 배경색이 바뀌도록 만들어 보았다. 이번엔 버튼 1개만으로 배경색을 변경할 수 있게 해 보았다. 좋은 예시로 들 수 있는 건 주간 모드와 야간모드를 설정하는 버튼을 만들어보는 것이다. 위와 같이 만들게 되면 웹브라우저에 night라는 버튼이 생길 것이다. 눌렀을 때 배경색은 검정으로 변하고 텍스트가 있다면 하얀색으로 변경될 것이다. 그럼 다시 주간 모드로 바꿔야 할 텐데 그러면 버튼을 하나 더 만들어야 할 것이다. 하지만 if문(조건문)을 .. 2021. 12. 24.