Javascript // 9일차 [DOM-]

목차

 1. DOMContentLoaded

 2. Form

---

 1. DOMContentLoaded

 

브라우저가 로드가 끝나면 자동적으로 실행시키게 하는 코드.  "최초에 한 번"만 발동하고

메서드 호출 자체가 로드가 끝나면 >>> 실행되게 한다.

 

HTML은 html을 다 읽었을 때 실행이 된다.

html의 로드가 끝나면 사용자는 html을 볼 수 있게 된다. 

하지만 html  안에 java가 있다면 html은 java + html 이 다 실행이 돼야 화면이 뜨게 된다.

html이 로드되고 java가 실행된다면 html의 실행시간을 조금 더 줄일 수 있게 된다.

이러한 일을 가능하게 해주는 것이 DOMContentLoaded 이다.

---

 2. Form

 

value  = 기본적으로 가지고 있는 값들이다.

 

submit을 누르면 기본적으로 url이 바뀌게 된다. (querystring)

js에서 원하는 설정을 하고 url을 바꾸는 것을 목적으로 한다.

submit 이벤트는 form엘리먼트에서만 등록이 가능하다.

 

**

submit 이벤트 없으면

 

브라우저에서 submit 버튼을 누르면

내용을 만들어서 action 값에 있는 url로 이동

 

**

submit 이벤트 있다면

 

브라우저에서 submit 버튼을 누르면

submit 이벤트를 발동 시킴. 이후 submitHandelr 함수가 호출되고 호출이 끝나야 

내용을 만들어서 action 값에 있는 url로 이동

 

**Handler 함수는 이벤트 값을 받는다. 보통 e하나 써 놓는다(event라는 의미)

 

 

e.prevenDefault() // 사용하면 엘리먼트가 가진 기능을 막는 메서드이다

ex) a태그의 링크 이동, action 값에 있는 url 이동 등을 막는다.

 

e.target // 이벤트를 발동시킨 엘리먼트를 가져오는 코드다

 

그렇다면 뭐하러 일부러 막는가?

 

A. 내가 원하는 시점에서 submit을 날리고 싶다면 막고 내 마음대로 조작을 가능하게 한다.

 

 

**

만약에 input이 비어있다면. submit 안 날리고 이벤트 실행

value 값이 비어있다 = 값이 없다.라는 뜻
uid인 input 가져오기

 const uid = document.querySelector("#uid")
    console.log(uid.value)

input에 넣은 값을 value 값을 가져온다.

if (uid.value !== "" && upw.value !== "") {
        e.target.submit()
    } else {
        alert("아이디나 패스워드 입력하세요!!")
    }

 

js로 elment 만들기

document.createElement(엘리먼트이름)
document.createElement('li') li 엘리먼트를 만들어줍니다.

 

둘 다 값이 비어있으면 경고창
둘 다 입력이 되어 있다면 url 연결

아이디나 패스워드 비어있는 거 따로 만들어보기