폼(19)
-
[JavaScript] 자바스크립트에서 데이터 형식으로 파일 읽어오기
162_자바스크립트에서 데이터 형식으로 파일 읽어오기 [적용] DataURL을 가져오고 싶을 때 [문법] 메소드 의미 반환 readAsDataURL(파일) DataURL*읽어 오기 없음 * MIME 타입 포맷을 가지는 데이터 문자열 [내용] FileReader 객체를 사용해서 input 요소로 선택한 파일 데이터에 접근할 수 있다. FileReader 객체의 readAsDataURL()를 사용해 파일을 DataURL 형식으로 읽을 수 있다. 비동기 형식이므로 addEventListener()를 사용해 읽기 작업 완료 이벤트인 load를 감시한다. load 이벤트 완료 후 데이터에 FileReader 객체의 result 속성으로 접근할 수 있다. HTML index.html JavaScript main.j..
2022.07.14 -
[JavaScript] 자바스크립트에서 텍스트 형식으로 파일 읽어오기
161_자바스크립트에서 텍스트 형식으로 파일 읽어오기 [적용] 유저가 선택한 파일을 텍슽 형식으로 읽어오고 싶을 때 [문법] 메소드 의미 반환 readAsText(파일) 텍스트로 읽어 오기 없음 [내용] FileReader 객체를 사용해 input 요소로 선택한 파일 데이터에 접근할 수 있다. FileReader 객체의 readAsText()를 사용해 파일을 텍스트 형식으로 읽을 수 있다. 비동기 형식이므로 addEventListener()를 사용해 읽기 작업 완료 이벤트인 load를 감시한다. load 이벤트 완료 후 데이터에 FileReader 객체의 result 속성으로 접근할 수 있다. HTML index.html JavaScript main.js const element = document.qu..
2022.07.13 -
[JavaScript] 자바스크립트에서 파일정보 읽어오기
160_자바스크립트에서 파일정보 읽어오기 [적용] 파일 선택 기능을 표시하고 싶을 때 [문법] 속성 의미 타입 input요소.files 선택된 파일 배열 배열 # input 요소는 [내용] input 요소의 type 속성을 file로 설정하면 파일 선택 폼이 표시된다. 파일 선택 폼을 사용하여 파일을 임의로 선택할 수 있다. 자바스크립트는 change 이벤트가 발생하면 event.target.files 속성을 참조하여 input 요소에 지정된 파일 리스트를 가져올 수 있다. multiple 속성을 지정하면 하나가 아닌 여러 파일의 작업도 가능하면, files 속성의 배열도 여러 개의 요소를 가진다. HTML index.html JavaScript main.js // input 참조 const elemen..
2022.07.13 -
[JavaScript] 자바스크립트에서 체크박스 상태 변경 확인하기
159_자바스크립트에서 체크박스 상태 변경 확인하기 [적용] 체크박스 변경 시 작업을 처리하고 싶을 때 [문법] 이벤트 의미 change input 요소 변경 시 이벤트 [내용] 체크박스 상태의 변경은 change 이벤트로 감시가 가능하다. addEventListener()를 사용해 이벤트 핸들러를 설정한다. 이벤트 핸들러 내부 함수는 다음의 링크에 있는 체크박스 상태 읽어오기 방법을 사용한다. https://stonefree.tistory.com/345 [JavaScript] 자바스크립트에서 체크박스 상태 읽어오기 158_자바스크립트에서 체크박스 상태 읽어오기 [적용] 체크박스 상태를 확인하고 싶을 때 체크박스 상태를 변경하고 싶을 때 [문법] 속성 의미 타입 input요소.checked 선택 상태 확..
2022.07.13 -
[JavaScript] 자바스크립트에서 체크박스 상태 읽어오기
158_자바스크립트에서 체크박스 상태 읽어오기 [적용] 체크박스 상태를 확인하고 싶을 때 체크박스 상태를 변경하고 싶을 때 [문법] 속성 의미 타입 input요소.checked 선택 상태 확인 진리값 [내용] input 요소의 type 속성을 checkbox로 설정하면 체크박스가 표시된다. 체크박스는 유저가 on/off 상태를 전환할 수 있다. 자바스크립트에서 checked 속성을 사용해 요소에 접근이 가능하다. checked 속성 타입은 Boolean이다. 다음은 체크박스 B(#cbB)에 checked 속성을 부여해 true를 확인하는 예시이다. HTML index.html 체크박스 A 체크박스 B 체크박스 C JavaScript main.js const cbA = document.querySelect..
2022.07.13 -
[JavaScript] 자바스크립트에서 텍스트 영역 값 변경 확인하기
157_자바스크립트에서 텍스트 영역 값 변경 확인하기 [적용] 텍스트 영역 변경 시 작업을 처리하고 싶을 때 [문법] 이벤트 의미 change 텍스트 영역 요소 변경 시 이벤트 input 텍스트 영역 요소 키 입력시 이벤트 [내용] 텍스트 영역 폼의 데이터 변경 여부는 change와 input 이벤트로 감시가 가능하다. addEventListener()를 사용해 이벤트 핸들러를 설정한다. 이벤트 핸들러 내부 함수는 앞서 기술한 텍스트 영역 값 읽어 오기 방법을 사용한다. input 이벤트는 키 입력 발생과 함께 발생하지만, change 이벤트는 일정 시간 지연 후 발생한다. HTML index.html JavaScript main.js // textarea 참조 const element = documen..
2022.07.13 -
[JavaScript] 자바스크립트에서 텍스트 영역(Textarea)값 읽어오기
156_자바스크립트에서 텍스트 영역(Textarea)값 읽어오기 [적용] 텍스트 영역의 문자열을 확인하고 싶을 때 텍스트 영역의 문자열을 변환하고 싶을 때 [문법] 속성 의미 타입 텍스트영역요소.value 입력 폼의 문자열 문자열 [내용] textarea 요소는 여러 줄 입력이 가능한 텍스트 폼을 표시한다. 텍스트 영역은 줄바꿈을 포함해 자유로운 문자의 입력이 가능하다. 자바스크립트에서는 value 속성을 통해 요소에 접근할 수 있다. value 속성의 타입은 문자열(string)이다. HTML index.html 오늘의 날씨는 맑음 JavaScript main.js // textarea 참조 const element = document.querySelector('#myText'); // 데이터 값 가져..
2022.07.13 -
[JavsScript] 자바스크립트 텍스트 박스 값 변경 확인하기
155_자바스크립트 텍스트 박스 값 변경 확인하기 [적용] 텍스트 입력 폼의 변경을 감시하고 싶을 때 [문법] 이벤트 의미 change input 요소 변경 시 이벤트 input input 요소 키 입력 시 이벤트 [내용] 텍스트 입력 폼의 데이터 변경 여부는 change와 input 이벤트로 감시가 가능하다. addEventListener()를 사용해 이벤트 핸들러를 설정한다. 이벤트 핸들러 내부 함수는 앞서 기술한 텍스트 박스 값 읽어 오기 방법을 사용한다. input 이벤트는 키 입력 발생과 함께 발생하지만 change 이벤트는 enter 키 혹은 포커스가 벗어났을 떄 발생한다. HTML index.html JavaScript main.js // input 요소 참조 const element = d..
2022.07.12 -
[JavaScript] 자바스크립트에서 텍스트 박스 값 읽어 오기 input, text
154_자바스크립트에서 텍스트 박스 값 읽어 오기 input, text [적용] HTML 폼의 데이터 값을 가져오고 싶을 때 텍스트 입력 폼의 데이터를 변경하고 싶을 때 [문법] 속성 의미 타입 input요소.value 입력 폼의 문자열 문자열 * input 요소는 [내용] input 요소의 type 속성을 text로 설정하면 텍스트 입력 폼이 표시된다. 텍스트 입력 폼은 유저로부터 임의의 텍스트를 입력받는다. 자바스크립트는 value 속성으로 요소를 참조하여 데이터 값을 확인할 수 있으며, value 속성은 문자열(String)이다. HTML index.html JavaScript main.js const element = document.querySelector('#myText'); const val..
2022.07.12