-
javascriptJAVASCRIPT 2022. 1. 17. 21:59
form 객체
<body><form name="regForm">아이디: <input type="text" name="id"> <br>비밀번호: <input type="password" name="pw"> <br>번호:<div><select name="phone"><option>010</option><option>011</option><option>018</option></select>- <input type="text" name="phone2">- <input type="text" name="phone3"></div>자기소개: <br><textarea name="intro" cols="50" rows="5"></textarea><br>분야:<input type="checkbox" name="inter">Java<input type="checkbox" name="inter">DB<input type="checkbox" name="inter">Jsp<input type="checkbox" name="inter">JavaScript<button type="button" id="regist" onclick="check()">가입</button><script>/*- 폼 객체는 document 객체의 하위 객체 중 하나로 유일하게 name 속성만으로form 요소의 선택이 가능합니다.- form 에도 name이 있어야 하며, name으로 모두 접근할 수 있습니다.- document.폼 이름.input이름으로 접근합니다.value: 값을 반환checked: 체크되어 있다면 true, 아니라면 falsedisable: 비활성화하면 true, 아니라면 falselength: 요소의 길이 반환focus(): 요소에 포커싱submit():*/function check(){const $form = document.regForm;if($form.id.value === ''){alert('아이디는 필수입니다.');$form.id.focus();return; //조건 불만족 시 반드시 종료를 해야 합니다.} else if ($form.id.value.length < 4){alert('아이디는 4글자 이상이어야 합니다.');return;} else if($form.pw.value === ''){alert('비밀번호는 필수입니다.');return;} else if($form.pw.value.length < 8){alert('비밀번호는 8글자 이상으로 입력하세요.');return;} else {const $inter = document.getElementByName('inter');let flag = false;for(let $ele of $inter){if($ele.checked){flag = true;break;}}if(!flag){alert('분야를 한 개 이상 체크해 주세요.');return;}}if(confirm('회원가입 하시겠습니까?')){$form.submit();}else{return;}}document.getElementById('regist').onclick = check;</script></body>
날짜
<body><script>const millis = 1573735023000;let date = new Date(); //오늘 날짜를 가진 객체console.log(date.getTime()); //날짜를 밀리초로 구합니다.const today = new Date();console.log(today.getTime());console.log(today);console.log(today.getFullYear);console.log(today.getFullYear);console.log(today.getMonth() + 1);console.log(today.getDate());console.log(today.getHours());console.log(today.getSeconds());const gap = date.getTime() - millis;console.log(gap);let time;if(gap < 60 * 60 * 24 * 1000) { // 1일 전if(gap < 60 * 60 * 1000) { // 1시간 전time = '방금 전'} else{time = gap / (60 * 60 * 1000) + '시간 전';}} else{ //1일 이상이 넘어간 경우const checkTime = new Date(gap);// console.log(checkTime);time = `${checkTime.getFullYear() - 1970}년 전`;console.log(time);}</script></body>
BOM
(1) window 팝업
<body><button id="popup">새 창 열기</button><script>const $popup = document.getElementById('popup');$popup.onclick = function(){}</script></body>(2)window 인터벌
<body><button class="stopInterval">스탑!</button><script>//setInterval은 일정 시간마다 함수를 반복 실행합니다.//매개변수로 (실행함수, 인터벌시간)이 들어갑니다.const stop = setInterval (function(){console.log(1);}, 500);//clearInterval(인터벌 함수)는 인터벌을 중지합니다.document.querySelector('.stopInterval').onclick = function(){clearInterval(stop);}</script></body>(3) window 타임아웃<body><h3>이 버튼을 누르면 실행되지 않습니다.</h3><script>const stop = setTimeout(function(){alert('5초 후 경고창을 출력합니다.');}, 5000);const $stopTime = document.querySelector('.stopTime');$stopTime.onclick = function(){clearTimeout(stop);}</script></body>(4) nevigator 위도-경도<body><script>//성공시 실행할 콜백 함수function success(position){console.log(position);consoloe.log('위도:' + position.coords.latitude);consoloe.log('경도:' + position.coords.longitude);}//실패시 실행할 콜백 함수function fail(error){alert('위치 정보를 얻는데 실패했습니다. 위치 정보를 승인해 주세요.');console.log(error);}(function(){navigator.geolocation.getCurrentPosition(success, fail);})();</script></body>'JAVASCRIPT' 카테고리의 다른 글
javascript (0) 2022.01.18 javascript (0) 2022.01.14 javascript (0) 2022.01.13 javascript (0) 2022.01.12 javascript (0) 2022.01.12