리팩토링(refactoring)이란 외부 동작 변화 없이 내부 구조(코드)를 더욱 간단하고 효율적으로 개선하는 작업이라고 했으며 저희는 변수와 함수, 객체를 사용해서 리펙토링 처리를 완료 했습니다. 이번 시간에는 다음 사진과 같이 다른 웹페이지로 넘어가는 링크에 대해 알아 볼 것입니다 WEB 링크를 누르면 WEB에 관한 페이지로, HTML 링크를 누르면 HTML에 대한 페이지로 넘어갈 것입니다. 넘어간 웹 페이지에서도 저희가 설정한 버튼이 작동 하도록 만들 것입니다. 그러기 위해서는 저희가 만든 자바 스크립트를 모든 웹 페이지에 복사 붙여넣기를 해주어야합니다. 이럴 경우 물론 실행은 정상적으로 잘 되지만 단점이 있습니다. 만약 이 코드의 일부분을 수정 하고 싶으면 직접 이 코드를 필요로 하고 있는 웹 페..

이번엔 전 시간에 배웠던 함수와 객체를 사용해서 리팩토링을 해볼 것입니다. 리팩토링을 할 코드는 저번에 리팩토링을 한번 거친 리팩토링(refactoring) 코드를 사용할 것입니다 이 코드를 함수와 객체를 사용해서 두번째 리팩토링을 진행해 보도록 하겠습니다 우선 중독되는 코드를 함수로 만들어 주겠습니다 하지만 실행 결과 버튼을 처음 클릭시 아무 반응이 없고 두번째 클릭하니 배경과 글자색은 바뀌지만 버튼명은 안바뀌는것을 확인 할 수 있습니다 왜 이런걸까요? 함수를 만들기 전까지 사용했던 this는 태그 안에서 특정 값들을 읽을때 사용가능한 것이였습니다 하지만 함수로 만든 후에는 태그를 벗어났기 때문에 사용할 수 없는것입니다. 그럼 함수에 매개변수를 주고 함수가 태그안에서 불러질때 매개변수에 this가 적용..

함수(Function)란 특정 역할을 하는 코드를 미리 짜서 사용하는 것입니다 매개변수라는 입력값을 받으면 코드가 짜여진대로 실행이 된 후 결과를 반환해줍니다 함수 선언 방법: function 함수명(매개변수){코드} 함수를 사용하는 이유 중복되는 코드가 발생했을떄, 그 코드를 함수로 만들어서 중복을 줄일때 사용합니다 특정 코드를 반복해주고 싶지만 연속적으로 반복하지 않을때 예) 1,2,1,2,1,2가 아닌 1,2,3,1,2,4,1,2,5와 같이 반복하려는 코드 중간 중간에 다른 코드가 있는 경우 반복문을 사용하지 못합니다 가독성을 높여주고 함수명을 통해 코드가 무슨 역할을 하는지 알 수 있습니다 예) sum() : 더하기 수칙을 하는 함수, mul() : 곱셈을 하는 함수 객체(Object)란 서로 연..

1. 배열(Array)이란 동일한 성격의 데이터를 관리하기 쉽도록 하나로 묶는 일 입니다 JS에서 배열은 다음과 같이 선언합니다 var 변수명 = ["데이터","데이터"]; 예) var fruit = ["apple","watermelon","mango"] 선언한 배열의 데이터는 배열명[인덱스]를 통해 가져 올 수 있습니다 예) fruit[0] = apple, fruit[1] = watermelon, fruit[2] = mango 배열에 데이터가 여러개가 들어 있을 경우 length를 사용하여 몇개의 데이터가 들어있는지 확인 할 수 있습니다 예) fruit.length = 3 2. 반복문(For, While) var 변수명 = 초기화값; while(변수명

리팩토링(refactoring)이란? 외부 동작 변화 없이 내부 구조(코드)를 더욱 간단하고 효율적으로 개선하는 작업입니다 예를 들면 중복된 코드들을 줄이고 가독성을 높여주는 작업이라고 생각하면 됩니다 이 작업을 틈틈히 해줘야 새로운 기능을 추가하거나 오류를 수정할때 용이하고 좋은 프로그램을 만들 수 있습니다 그럼 실제로 전에 만들었던 '버튼 클릭시 에 적용되는 CSS 변경하기' 코드를 리팩토링 해보겠습니다 저희는 이 코드를 리팩토링 할것입니다 먼저 태그 안에 id 속성을 넣어 그 값으로 태그 안의 value 값을 불러 오는 것을 확인 할 수 있습니다. document.querySelector('#night_day').value 태그내에서 자신의 태그 속성 값을 불러 올때는 this 명령어를 사용하면 됩..

그럼 본격적으로 JS를 사용해 보도록 하겠습니다. 저희는 우선 night와 day라는 이름을 가진 두 개의 버튼을 만들 것입니다. 아직 이 두 버튼은 아무런 역할을 하지 못합니다 말 그대로 버튼만 생성했기 때문입니다 이제 이 버튼을 클릭했을 때 어떠한 사건, 이벤트가 일어날 수 있도록 만들 것입니다. JS에는 이벤트를 발생 시키는 속성 들은 여러개 있습니다. 그중 가장 대표적으로 사용되는 기본적인 3가지의 이벤트만 먼저 배워보도록 하겠습니다 1. onclick : HTML 요소를 사용자가 클릭을 했을때 예시) 사용자가 버튼을 클릭 했을때 2. onchange : HTML 요소에 변화가 생겼을때 예시) 텍스트 내용값이 변했을때 3. onkeydown : 사용자가 키보드의 키를 눌렀을때 예시) 키보드의 아무..