본문 바로가기

분류 전체보기515

[JavaScript] 객체의 기본적인 정의 및 형태 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 오늘은 객체의 기본적인 정의 및 형태에 대하여 포스팅 해보는 시간을 갖도록 하였습니다. * 객체의 정의 프로그래밍을 하다보면 코드가 많아지며, 코드를 정리 정돈하기 위해 함수를 사용함수를 많아지면 함수와 연관 되어 있는 변수들이 많아지므로, 복잡도의 한계에 도달하게 됨. 기본적인 정의 : 이러한 한계 상황에서 서로 연관된 함수와 연관된 변수를 동일한 이름으로 그룹화하여 정리 정돈하기 위한 도구 이전 포스팅에서 작성한 코드 중 var alist ~ i = i +1 ; 까지의 코드가 if절과 else 절에 반복되는 것을 최소화하고 싶었습니다. 해당 부분은 함수를 통하여 반복 되는 코드를 아래와 같이 해결할 수 있었습니다. setColor라는 함수를 이용하여 코.. 2021. 9. 15.
[JavaScript] 함수의 활용 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 오늘은 저번 포스팅에 함수의 개념과 원리를 사용하여 nightDayHandler 함수를 만들어 보았습니다. 이와 같이 nightDayHandler 함수를 만든 후 실행을 해보니, 하기와 같은 에러가 발생하였습니다. 버튼을 처음 클릭했을 때 아무 변화가 없었으며, 두 번째 클릭을 하니 그제야 변경 또다시 클릭을 하니 backgroundColor와 color들은 변경이 되었지만, 버튼의 value값의 변동이 없음 문제 해결 전 에러가 발생되는 이유 : oncilck이라는 이벤트 안에서의 this라는 값은 를 가리키도록 약속되어있음. 따라서 독립된 함수를 만들게 되면 (nightDayHandler) function 값 안에 있는 this는 input 버튼이 아님.. 2021. 9. 14.
[JavaScript] 함수 Basic / 매개변수와 인자 / 리턴 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 오늘은 함수에 대하여 개념 정리를 해보려고 합니다. 챕터는 총 3개로 나뉘어 있습니다. * Basic (함수의 원리) 함수를 사용하는 이유 코드에 대한 함수 이름을 지정하여 동일한 코드가 반복되지 않고 최소한으로 간단하게 만들어주기 위함 코드가 변경되었을 때 (ex. color:red; -> color:blue;) 함수 내에서만 변경해주면 일일이 수정 필요 없이 변경 가능 반복문 사용이 불가할 때 (비연속적으로 반복될 때, 반복되는 중복이 굉장히 많을 때) 함수를 이용하여 해결 가능 function 함수 이름() { ~ }을 이용하여 함수 설정 { ~ }에 기입되어있는 코드를 함수로 설정하여 비연속적 반복문 해결 가능 * 매개변수와 인자 (Parameter.. 2021. 9. 14.
[JavaScript] 배열과 반복문 활용하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 저번 포스팅을 통하여 버튼을 클릭하였을 때 backgroundColor와 color의 값이 변경되는 야간/주간 모드 버튼을 제작하였는데요, 다만, a 태그가 되어있는 값들은 color의 값이 변경되지 않는 오류가 발생되었습니다. a 태그의 값도 같이 변경시켜줄 수 있게끔 배열과 반복문을 활용하여 문제 해결을 해주었습니다. 문제 해결에 앞서 배열과 반복문의 개념을 정리해보았습니다. var [ ] 값의 list 값을 입력한 후 배열 이용하여 리스트 완성 while( ) { ~ } 반복문 이용하여 출력 i = 0; 배열의 첫 번째 (chany) index 값 = 0 i = i + 1; 을 통하여 차례대로 index 값을 불러옴 i = 0 --> index 값이 .. 2021. 9. 14.
[JavaScript] 조건문 활용하여 야간모드/주간모드 변경하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 조건문을 활용하여 버튼을 클릭하였을 때 야간모드/일반으로 변경되게끔 작업해보았습니다. if절의 경우, if(블리언) { ~ }의 개념을 갖고 있습니다. 블리언 값이 True 라면 첫 번째 절의 값을 실행하며, 만일 False 라면 두 번째 절 (else) 값을 실행합니다. 따라서 블리언의 값에 document.querySelector('#night_day'). value === 'night' id 값인 #night_day가 document의 value 값이 'night'와 같다면 (===) ~ 을 통하여 블리언의 값을 유도해주었습니다. 실행 후 value의 값을 'day'로 재지정을 해주지 않는다면 현재 'night'로 설정되어있는 블리언 값이 계속 Tru.. 2021. 9. 14.