[참고 영상] POST Form Data With JS Fetch API HTML 삽입 미리보기할 수 없는 소스 더보기 HTML 삽입 미리보기할 수 없는 소스 1. 유효성 검사 후 서버로 전송하는 함수 정의. 1-1. 정규식(Regular Expression) 패턴 정의 정규식을 이용하여 아이디, 비밀번호, 이메일 등의 패턴을 제한. 위 정규식 패턴에 일치하지 않을 경우 if, else if 문 등을 통해, 적절한 값을 넣어 입력 형식에 올바른 경우, 혹은 유효하지 않을 경우의 안내문구, CSS 스타일을 적용할 클래스 등을 넣어주는 코드를 작성한다. 1-2. new FormData() & fetch API를 이용하여 서버로 입력값 전송 정규식 패턴이 전부 유효한 값인 경우 (나의 경우 모든 인풋 태그 안..

https://www.youtube.com/playlist?list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI JavaScript Promise (callback & async) www.youtube.com 위 수업을 통해 알 수 있는 것. Asynchronous(비동기)에 대한 이해 코드의 비동기(병렬)적 실행을 위한 callback 함수의 이해 Promise 객체와 Response 객체에 대한 이해 then, catch, finally 메서드에 대한 이해 Promise 네트워크 를 위한 AJAX , 그중 fetch API() 에 대한 이해 fetch 메서드에 대한 이해 문법적 단순함을 위한 async, await 에 대한 이해 평범한 함수를 Promise 객체를 리턴해주는 함수로 ..

HTML 삽입 미리보기할 수 없는 소스 HTML DOM Event 에는 다양한 타입들이 있다. 마우스 클릭, 키보드 누르기, 인풋 창에 포커스가 되거나, 문서 로드가 완료되는 등 웹페이지 상에서 사용자에 의해 이벤트(event)가 발생할 때, 특정 함수를 할당하여 실행해줄 수 있는데 이것을 이벤트 핸들러라 한다. 요소 안에 onclick=" " 속성을 넣어 이벤트 핸들러를 지정해줄 수 있고 이외에도 다양한 방법이 있다.

HTML 삽입 미리보기할 수 없는 소스 Style 제어 ..style.선언(속성 = "지정할 스타일 값") 속성은 카멜 케이스로 작성하거나 background-color -> backgroundColor 혹은 대괄호로 표현한다 ["margin-left"] ex) document.getElementById("box").style.backgroundColor = "White" Class 제어 ..className = "클래스명" 지정한 클래스명을 특정 요소에 넣어줄 때 사용한다. 하지만 새로 넣어줄 때 직전에 className으로 넣어준 클래스는 사라지게 된다. 이 경우 직전 클래스도 함께 유지시키기 위해 직전 클래스와 함께 작성해주어야 하므로 거의 사용하지 않는다. ..classList = "클래스명" c..

HTML 삽입 미리보기할 수 없는 소스 - Text Node 값(value)에 접근 documnet.getElementById('blue').firstChild.nodeValue - text node 값(value)수정하기 documnet.getElementById('blue').firstChild.nodeValue = '수정값' nodeValue는 text node가 아니면 null 반환함. - 요소 생성 document.createElement('태그') - element node 텍스트 입력하기 [innerHTML]을 이용 선택자 내부에 마크업 태그를 포함한 텍스트 입력: document.getElementById('아이디').innerHTML = '입력값' 마크업 태그 생성 후 텍스트 입력 후 선..

HTML 삽입 미리보기할 수 없는 소스 - DOM과 Node Documnet Object Model의 약자로, HTML 문서의 각 요소들을 tree 형식으로 표현해준다. JS를 이용해 생성, 수정, 삭제 할 수 있다. 위 이미지에서 하나하나의 객체를 Node라 부르며 위쪽은 부모 노드, 아래쪽은 자식 노드가 된다. chrome에서 개발자도구를 열었을 때 Elements 영역이 DOM이다. - Node 종류 : element(태그/요소)노드 attribute(속성)노드 text노드 주석노드 document노드 - 노드에 접근하기 document.documentElement HTML에 접근할 수 있다. document.태그명(element명) ex) document.body / document.head 각 ..