BOM
history.go()
앞으로
history.go(-1)
뒤로
Onload
사용
<body onload="">window.onload
innerHTML - 태그까지 전부 추출해줌
Window onload
중요함!! 실수하는 사람 많대!!
- 굳이 함수안에 있을 필요 없음. 함수 밖에 있어도 됨
innertext - > 문자열로 인식
-> html태그로 인식시킴
- 특정태그의값을 추출하고싶을때
on- 으로 시작하는건 다 이벤트
이벤트 버블링 - 이벤트 시작하면 부모 따라가며 같은 클릭이벤트들이 자동으로 호출됨.
ex) span태그 클릭하면 div태그, h1태그 다 순서대로 진행됨
이벤트 캡처링 - 반대로 부모 > 자식 순으로 클릭이벤트가 자동으로 호출됨
그래서 이벤트 버블링을 강제적으로 막아줘야 함
버블링 강제로 막는법
e.cancelBubble = true이벤트 추가
addEventListener()이벤트 삭제
removeEventListener()form tag 어떻게 사용하는지 배움
폼태그 목적 : 사용자 정보를 서버에 보냄
- 서버가 html태그들을 클라이언트에 전달해줌
- 클라이언트가 서버에 요청할 때 자신이 가진 임의의 값들을 서버쪽에 전달하기 위한 수단 : 폼태그
- 이때 요청하는게 필요함. 그 요청과 관련된 속성이 'action'임
<form action="exam08.html">
> 의 뜻 : exam08.html을 서버에 요청그러면 submit 누르는 순간 요청한 결과가 화면에 출력됨
전달할 때 쓰는 키워드 : ?
?를 쓰면 클라이언트가 서버에 뭔가 전달하겠다는 뜻을 가짐
그런데 전달하려는 데이터가 하나가 아닌 두 개 이상일 때, 서버 입장에선 어떤게 id, pw인지 모르기 때문에 'name'이라는 속성을 반드시 이용해야 함
name속성은 value값을 받기 때문!!
활용예시
아이디 : <input type="text" name="id"><br>전달되는 내용 - url을 통해 확인할 수 있음
exam08.html?id=aaa&pwd=123&pwdCheck=123
*& : 구분자. queryString이라고 부름
&name=value <의 form을 가짐하지만 클라이언트-서버간 요청 횟수를 최대한 줄이는 게 좋음(io를 많이 사용하면 속도가 저하됨)
디폴트로는 tcp형태고, 동기화형태임(한번 응답 오기 전까지 아무것도 못함)
클라이언트-서버의 응답-요청을 1회로 줄이는 게 관건
이런 요청-응답을 줄이기 위한 동적 체크를 하는게 자바스크립트임
데이터를 필수 입력하라고하는속성은 정적인 required로도 충분
like this
아이디 : <input type="text" name="id" required><br>onsubmit : submit했다는 걸 알리는 이벤트
형태
<form action="exam08.html" onsubmit="return true">
> 서버에 제출됨
<form action="exam08.html" onsubmit="return false">
> 서버에 제출되지 않음
<form action="exam08.html" onsubmit="return whenSubmit()">
> 아예 함수를 호출할 수도 있음 - 이땐 whenSubmit() 이라는 함수를 function whenSubmit() {} 의 형태로 따로 만들어주어야 함function whenSubmit() {
return false
}
--------------------------------------
> 이러면 위에서 whenSubmit() 함수 호출해도 return값이 false라 제출 안됨
이것의 쓰임은
-----------------------
if(id.value == "") {
alert('아이디를 입력하세요')
return false
}
-------------------------------------
이와 같이 id의 value값이 비었을 때 다시 돌려보내는 역할을 할 수 있음form태그만 유일하게 name속성에 접근 가능
console> document.inputForm.id로 접근 가능하다는 뜻!
name이 id인 것의 value값 추출하는 방법
> document.inputForm.id.valuelet f = document.inputForm처리해서 f 변수에 넣어주면
위에 있던 -----------------------if(id.value == "") { alert('아이디를 입력하세요') return false}-------------------------------------이거를-----------------------if(f.id.value == '') { alert('아이디를 입력하세요') return false}-------------------------------------처럼 쓸 수 있음이런식으로 formtag는 id대신 name속성을 사용함
exam10.html
체크박스와같이 name값은 모두 같을 수 있지만 value가 다른 것들은
value값들을 따로따로 정리해야 함
결과값 보여주기
function showInfo() { alert('!!!')}<input type="button" value="결과보기" onclick="showInfo()">체크박스 체크되었는지 표시
> document.inputForm.hobby[0].checked> document.inputForm.hobby[1].checked전체클릭버튼 - checked의 값을 모두 true로 바꿈
function selectAll() { let length = document.inputForm.hobby.length for (let i = 0; i < length; i++) { document.inputForm.hobby[i].checked = true }}<input type="button" value="전체선택" onclick="selectAll()">전체선택해제버튼 - checked의 값을 모두 false로 바꿈
function deselectAll() { let length = document.inputForm.hobby.length for (let i = 0; i < length; i++) { document.inputForm.hobby[i].checked = false }}<input type="button" value="전체선택해제" onclick="deselectAll()">좀 더 간단하게 하자면
function toggle(check) { let length = document.inputForm.hobby.length for(let i = 0; i < length; i++) { document.inputForm.hobby[i].checked = check }}<input type="button" value="전체선택" onclick="toggle(true)"><input type="button" value="전체선택해제" onclick="toggle(false)">function toggle() { let check = true let hobby = document.inputForm.hobby let cnt = 0 for(let i = 0; i < hobby.length && hobby[i].checked; i++) { cnt++ } if (cnt == hobby.length) check = false for(let i = 0; i < hobby.length; i++)\ hobby[i].checked = check}selectedIndex - 현재 선택한것이 인덱스의 몇 번째인지 추출> document.searchForm.searchType.selectedIndexfocus() - 정확히 어떤 항목이 누락되었는지 표시
if(form.searchType.selectedIndex == 0) { alert('검색항목을 선택하세요') form.searchType.focus() return false}if(form.searchType.selectedIndex == 0) { alert('검색어를 입력하세요') form.searchWord.focus() return false}'Markdowns' 카테고리의 다른 글
| ConnectionFactory.java (0) | 2021.07.01 |
|---|---|
| SCOTT계정 EMP 테이블 다시 살리는 쿼리 (0) | 2021.06.28 |
댓글