이번의 목표 01. onchange 에 대해 알아보자. 02. onchange 와 onBlur 의 차이점에 대해 알아보자 onchange는 객체의 값이 변경되고 포커스를 잃었을 때에 작동하는 이벤트 입니다. 입력한 값이 변경되지 않고 포커스만 잃었을 때에는 작동하지 않습니다. 기능 설명으로만 봤을때에 onchange는 언뜻 onBlur와 기능적으로 차이를 느끼지 못할 수 도있습니다. onBlur는 포커스를 잃은 모든 시점에 이벤트가 작동합니다. 값의 변경이 없어도 작동 합니다. 하지만 onchange는 값이 변경되지 않았다면 포커스를 잃어도 작동하지 않습니다. 01. 코드 02. 실행 화면 01. 코드 onchange 의 사용 예제 onBlur 의 사용 예제 . onchange와 비교해봅시다. 02. 실..

이번의 목표 01. onclick 이벤트를 사용하여 의 src를 변경해보자. 지난 시간까지는 , , 등의 태그의 출력값을 바꾸는 것을 연습했습니다. 이번에는 이벤트를 활용하여 이미지를 클릭했을 때, 이미지가 변경되는 것을 연습해보겠습니다. 태그는 텍스트가 없고 src 속성을 이용해 이미지의 주소를 받아와서 출력합니다. 때문에 이미지를 바꾸기 위해서는 src 속성을 변경할 이미지의 주소로 변경해주어야 합니다. 예제로 사용할 이미지는 임의로 아무거나 사용하셔도 좋습니다. 01. 코드 02. 실행 화면 01. 코드 02. 실행 화면 ① 이미지를 클릭하기 전의 이미지 ② 이미지를 클릭한 후의 이미지

이번의 목표 01. onBlur 를 사용해보자 02. ID하나로 다수의 객체의 값을 바꿀 수 있을지 알아보자 onBlur 를 사용하면 객체가 포커스를 잃었을 때에 이벤트가 작동합니다. 마우스로 다른 객체를 클릭하거나, TAB을 누르거나, ENTER를 눌러서 포커스가 변경되는 경우가 그 예시입니다. 그리고 코드를 작성하며 제가 범했던 오류 한가지를 알아볼 것입니다. span, p, div, label의 id를 같게하여 하나의 함수안에서 id를 통해 값을 모두 바꾸고자 했습니다. 하지만 값이 변경 되는것은 가장 첫번째로 위치한 객체의 값만 변경되어 혼란을 겪었습니다. 이를 해결하고자 각각의 객체에 id를 다르게 했고, 각각의 값을 바꿔주는 방법으로 하여 해결할 수 있었습니다. 글로는 설명이 장황하니 코드를 ..

이번의 목표 01. getElementById()를 통해 의 출력을 변경해보자. 지난 시간에는 getElementById()를 이용하여 의 데이터를 변경하는 것을 알아보았습니다. 이번에는 의 데이터를 변경하는 것을 알아보겠습니다. 같은 경우에는 value 값이 그대로 출력되기 때문에 value 값을 변경하였습니다. 하지만 , , , 등의 경우에는 여는 태그와 닫는 태그 사이에 문자를 입력하는 것으로 출력이 되기 때문에 value를 수정하는 것으로는 출력값을 바꿀 수가 없습니다. 이때에는 innerHTML() 을 사용하여 변경할 수 있습니다. 01. 코드 02. 실행 화면 01. 코드 name : 02. 실행 화면 ① name에 값을 입력후 버튼을 클릭하면 아래에 위치해있던 에 문구가 출력되는 것을 확인할..

이번의 목표 01. 의 데이터에 접근하여 수정해보자. document.getElementById() 를 이용하면 객체의 id를 이용하여 요소에 접근 할 수 있습니다. 이를 이용하여 의 value를 변경하는 함수를 만들어 보겠습니다. 그리고 함수를 사용하기 위해서는 이벤트를 사용해야 합니다. 이벤트의 종류로는 onclick, onkeyup, onmouseenter 등이 있습니다. 더 많은 이벤트의 종류에 대해 알아보기 위해서는 검색해보거나 on까지 입력후 Ctrl+Space를 통하여 관련된 기능이 무엇이 있는지 차근차근 알아보는 것도 좋습니다. 01. 코드 02. 실행 화면 01. 코드 name : name2 : 02. 실행 화면 ① 기본 화면 ② name 에 값을 입력하고 버튼을 누르면 name 안의 값..

이번의 목표 01. 함수(function)의 매개변수에 대해 알아보자 지난 시간까지 함수의 선언에 대해 알아보았습니다. 함수의 선언시에는 매개변수를 정한다고 했습니다. 이때 사용자가 매개변수의 갯수를 초과해서 적거나 부족하게 적었을 때에도 에러는 발생하지 않습니다. 단, 그러기 위해서는 함수의 내부에 조건식을 사용하여 상황에 따른 실행문을 지정해주어야만 합니다. 01. 코드 02. 실행 화면 01. 코드 02. 실행 화면 매개변수가 3개를 입력하는 함수를 선언 후, 사용했습니다. ① 매개 변수를 1개 입력했을 때에 출력 값 ② 매개 변수를 2개 입력했을 때의 출력 값 ③ 매개 변수를 3개 입력했을 때의 출력 값 ④ 매개 변수를 초과했을 때에는 3개를 넘는 매개 변수의 값이 버려지는 것을 확인할 수 있습니다.