221109 JavaScript - form을 이용한 이벤트활용

오늘 내가 배운 것

1. script 태그

2. 이벤트

3. Element 생성

1. script 태그

javascript 파일을 외부 파일로 적용시켜서 사용하게 된다면

<script src="경로" type = "text/javascript"></script>

를 넣어주여야 하는데 첨부하는 위치에 따라서 자바스크립트를 읽는 시간과 렌더 영역에 보이는 시간이 달라진다.

<head>에 넣는 경우

웹페이지를 열어 html파일을 읽을 때 제일 위에서 코드가 실행되면서 내려오다가 `script` 태그를 만나게 되면 실행되던 html이 멈추고
javascript 파일을 다운받은 뒤 실행시키고 나서 그 뒤 남은 html을 실행시키게 된다.

js 파일을 다운받기 위해서 멈춰 있는 시간 때문에 사용자가 그 사이트를 이탈할 수 있다. 사용자가 웹사이트가 열리기까지 3초가 넘으면 그 사이트의 이탈자가 많다는 통계가 있다. 그렇기 때문에 빠른 시간 내에 보이는 부분을 다 보여주는 것이 좋을 것 같다.(상황에 따라 다를 수도 있겠지만..)

<body>에 넣는 경우

HTML 파일을 다 실행한 후에 마지막에 js파일을 다운받고 실행하게 된다. 장점은 사용자에게 빨리 보여줄 수 있어서 사용자는 이 페이지의 구성이나 기본적인 내용은 어떤 게 있는지 빨리 볼 수 있지만 html의 파일이 커서 js파일을 실행하는 데까지 시간이 걸리게 된다면 js를 이용한 컨텐츠나 페이지 구성이 오래 걸릴 것이다.

두 가지 방법에 속성을 넣어서 순서를 병렬적으로 바꿔주는 것이 있는데 그건 다시 찾아볼 예정이다.
일단 head에 넣을 수 있고 body에도 넣을 수 있다는 걸 알고 있자.

2. 이벤트

Form 태그

<form method="get" id="loginForm" action="./">
    <input type="text" id="uid" name = 'userid' value="">
    <input type="password" id="upw" name="userpw" value="">
    <button type="submit">
        로그인
    </button>
</form>

value는 입력창에 초기에 적혀 있는 값을 말한다. focus해도 변화가 없고 쓰여 있는 게 실제로 쓴 것과 같은 느낌이다.

(placeholder와는 다르니 밑에 포스팅에서 다시 확인하자. )
form 이전 포스팅 : https://baekspace.tistory.com/39

HTML - form / 데이터 수집

HTML-form 태그 form 태그 : 사용자가 제공하는 데이터를 서버에 저장시키기 위해 사용하는 태그 (사용자의 데이터를 수집한다.) 로그인 아직도 회원이 아니신가요? 회원가입 input 태그를 이용할 때 f

baekspace.tistory.com

function submitHandler(){
    alert("!!!!")
}
function init(){
    const form = document.querySelector("#loginForm")  //form을 loginForm id를 
    form. addEventListener("submit", submitHandler) 
    //submit 이벤트는 form 엘리먼트에서만 이벤트 등록이 가능하다.
}

document.addEventListener("DOMContentLoaded", init)

DOMContentLoaded : 'HTML의 파일이 다 로드 된 후' 를 의미하는 이벤트

위에 코드는 HTML이 다 로드 된 후에 init() 함수를 발동하고 init 함수는 submit에 의해 버튼을 활성화 할 때 submitHandler 함수가 실행되면서 alert("!!!!")이 결과로 나온다.

function submitHandler(e){
    e.preventDefault()
}    
function init(){
    const form = document.querySelector("#loginForm")
    form. addEventListener("submit", submitHandler) 
}
document.addEventListener("DOMContentLoaded", init)

submit 이벤트가 없을 때

1. 브라우저에서 submit 버튼을 누르면
2. 내용을 만들어서 (queryString) Action 값에 있는 url 이동

submit 이벤트가 있을 때

1. 브라우저에서 submit 버튼을 누르면
2. submit 이벤트를 발동시킴, 이후 submitHandler 함수가 호출 되고 호출이 끝나면
3. 내용을 만들어서 (queryString) Action 값에 있는 url 이동

Action 값으로 이동 정지

Action 값에 있는 URL 이동을 막고 싶을 때,
Handler함수 안에서 이벤트 객체 `e`를 받아서 `e.preventDefault()`를 작성하면
` 3. 내용을 만들어서 (queryString) Action 값에 있는 url 이동`이 실행이 안됨.
submit으로 submitHandler의 함수는 실행하지만, 창의 이동은 멈추게 하고싶은 것이기 때문에 submitHandler의 코드블럭 안에 작성한다.

preventDefault()

1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고 싶을 경우 (submit은 작동됨)

코드 정리

HTML

<form method="get" id="loginForm" action="./">
    <input type="text" id="uid" name = 'userid' value="">
    <input type="password" id="upw" name="userpw" value="">
    <button type="submit">
        로그인
    </button>
</form>

JavaScript

//uid, upw에 값이 있는지 없는지 확인하는 방법 ....비어있다면 True, 값이 있다면 False
function submitHandler(e){
    e.preventDefault()
    
    const uid = document.querySelector("#uid")
    const upw = document.querySelector("#upw")
    
    console.log("아이디는 : ", uid.value === "" )   
    console.log("비밀번호는 : " , upw.value === "") 
}
function init(){
    const form = document.querySelector("#loginform")
    form.addEventListener("submit", submitHandler)
}
document.addEventListener("DOMContentroaded", init)

3. Element 생성

1. 어디에 추가할거냐 (HTML에서의 위치를 찾기)
2. 어떤 엘리먼트를 추가할 것이냐
3. 추가한 엘리먼트의 내용
4. 어디에 그 추가한 엘리먼트를 넣을 것이냐..

<form method="get" id="loginForm" action="./">
    <input type="text" id="uid" name = 'userid' value="">
    <input type="password" id="upw" name="userpw" value="">
    <button type="submit">
        로그인
    </button>
</form>
<ul id="userList">
</ul>

// 아이디,비밀번호의 input이 둘다 값이 있다면 input 밑에 값을 li로 넣어주기
function submitHandler(e){
    e.preventDefault()
    
    const uid = document.querySelector("#uid")
    const upw = document.querySelector("#upw")

    //uid, upw에 값이 있는지 없는지 확인하는 방법 ....비어있다면 True, 값이 있다면 False
    console.log("아이디는 : ", uid.value === "" )   
    console.log("비밀번호는 : " , upw.value === "") 

    if(uip.value !== "" && upw.value !== ""){
        const userList = document.querySelector("#userList")
        const li = document.createElement('li')  // li 엘리먼트 생성
        li.innerHTML = uid.value + " " + upw.value //li 안에 내용 작성
        userList.append(li)  // userList 에 li를 추가한다.(push와 비슷.)

        uid.value = ""    // li 추가 후 input 비우기
        upw.value = ""    // li 추가 후 input 비우기
    } else { 
        alert ("아이디와 비밀번호를 확인해주세요")
    }
    uid.focus()  // 다시 uid로 커서 이동
}
function init(){
    const form = document.querySelector("#loginform")
    form.addEventListener("submit", submitHandler)
}
document.addEventListener("DOMContentroaded", init)

createElement() : Element 생성 메서드 인자 값은 원하는 element(string타입)
append() : userList에 li를 추가한다.(push와 비슷한 느낌이다.)

Q. 추가 기능

만약 alert가 뜰 때 *"아이디랑 패스워드를 기입하시오"*를 렌더 영역에 표시하려면?

input과 아까 추가했던 li사이에 표시하고 싶다.
1. <div></div>를 <form>과 <ul> 사이에 작성하고,

2. id를 "error"로 기입한다

3. js파일에서 error로 <div id="error">를 선택해준다.

const error = document.querySelector("#error")

이후 if문에서

True(둘다 값이 있을 때) 일 때는 `"display : none"`
False 일 때는 `"display:block"`

조건을 넣어주면 된다.

두가지 항목을 다 적어서 로그인을 누르면 밑에 li생성하여 기록이 된다.

'시작 > TIL(Today I Learned)' 카테고리의 다른 글

221111 실전예제 - 웹페이지 메인 이미지(Visual) 영역 만들기 (0)	2022.11.13
221110 JavaScript - setTimeout과 setInterval, 동기와 비동기, 싱글스레드,이벤트 루프(event loop) (0)	2022.11.11
221108 JavaScript - 이벤트 (EVENT) (0)	2022.11.09
221107 JavaScript - DOM과 BOM , 배열 연습, 간단한 알고리즘 문제(선형검색, 완전탐색), 로또 번호 생성기 만들기 (0)	2022.11.08
221104 - JavaScript - prototype, 메서드 Date, indexOf, 삼항연산자 (0)	2022.11.05