정리정돈 개발블로그~
[55일차] 국비 교육 본문
애플페이 : NFC통신 (Near Field Communication), 쌍방향 -> 기기가 따로 필요함
rfid : 고속도로 하이패스 통신, 단방향(읽기만 함)
MST(Magnetic Secure Transmission) : 삼성페이, 기기 따로 필요없음
NFC 기반 어플 개발이 활발해 질수도???
개발 + NFC관련 기술 알고 있으면 수월할 듯
<!-- 1. Html5 DOCTYPE과 head, body 기본 구조 기술 -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- 2. -->
<!-- ../../상위의 상위 폴더
../ 상위 폴더 -->
<!-- <script src="../../자바스크립트/sample.js.txt"></script> -->
<script src="../js/test.js"></script>
<script src="../../js/test.js"></script>
</body>
</html>
<!-- 3. input 태그 속성을 5가지 이상 : text, password, email, tel, url, radio,
checkbox, submit, img-->
<!-- 4. 웹 표준 관련 기술 3가지 기술 : html5, css3, javascript-->
<!-- 5. 자바스크립트를 작성하는 3가지 방식 : 인라인 방식, internal 방식, external 방식 -->
<!-- 6. 자바스크립트에서 태그 앨리먼트의 객체정보를 가져오는 document 메소드 사용 구문 2가지기술
getElementById, get -->
<!-- getElementById -->
<!-- document.getElementById("id")
document.getElementsByClassName("class")
document.getElementsByTagName("tag") -->
// 6. 자바스크립트에서 태그 앨리먼트의 객체정보를 가져오는 document 메소드
// 사용 구문 2가지기술:getElementById
// document.getElementById("id")
// document.getElementsByClassName("class")
// document.getElementsByTagName("tag")
// 7. HTML의 영역을 구분하는 태그 중에 div 태그와 span태그의 차이점
// span: 자기 구성 요소만 영역을 가짐
// div: 문단 전체 영역을 가짐
// 8. NaN : Not-A-Number, 연산 결과가 숫자가 아님을 의미
// 9. 배열 만드는 2가지 방법
// let arr = [];
// let arr2 = new Array(개수);
// 10. 전역객체(Window)의 Infinity 속성에 대해 서술 : 숫자를 0으로 나누면 발생
// 11. 자바스크립트의 스코프 중 functional scope에 대해서 설명 : 변수가 선언된 함수에서만 접근 가능
// function test() {
// let kkk = 10;
// console.log(kkk);
// }
// test();
// console.log(kkk); => 함수내에서 선언되어 있으면 부를 수 없음(오류 뜸)
// 12. 블록스코프 : 블록 안에서만 변수에 접근할 수 있는 스코프
// {
// // var은 블록 밖에서 에러나지 않음
// let kkk = 1000;
// console.log(kkk);
// }
// 블록 밖에서 let은 에러남
// console.log(kkk);
// 13.자바스크립트 원시타입 3가지 이상 : boolean, number, string, null, undefined(값이 없는 상태)
// console.log(test);
// var test = 100;
// 호이스팅 때문에 선언만 되어있고 값이 비어 있음
// 14.원시타입과 참조타입의 차이점 : 값을 저장하는지, 값의 주소를 저장하는지
// 15.js에서 변수에 담겨있는 값의 타입을 알기 위해 사용하는 연산자과 사용하는 방법
// typeof(변수명);
// 16.인자로 전달받은 문자열을 자바스크립트 코드로 변환하여 실행하는 전역함수의 명칭과 사용법
// eval(문자열로 된 코드); => ES5부터 사용하지 않는 함수임
// 17. undefined : 변수를 선언하고 값을 할당하지 않으면 자동으로 할당되는 값
// *querySelector 관련 문제있음
// 18. window 객체의 onload 속성에 대해 서술 : 페이지에 load이벤트가 발생했을 때 호출되는 콜백함수
// (html이 없을때 js를 부르면 오류가 남)
// (body 밑에 js를 넣으므로 화면이 이미 그려져 있기때문에 쓰지 않음)
// 자바스크립트의 브라우저 객체 모델에 속한 객체 3개 이상 : window, location, histoty, navigaton, screen<포트폴리오 참고 자료>
https://hansoul.tistory.com/100
javascript 빈칸 검사
로그인 회원가입 Forgot Password? formname을 설정 해주고 onsubmit를 추가 해준다 submit로 값을 넘겨주기 때문에 보내기전에 검사를 진행 하고 값을 넘겨준다 maxlength는 설정해주면 최대 입력갑 지정 가
hansoul.tistory.com
<포트폴리오>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<fieldset>
<div id="container">
<div id="line">
<label for="idInput"> 아이디
<input type="text" id="idInput" autofocus>
</label>
</div>
<p class="idfailure-message hide">필수 입력 항목 입니다.</p>
<div id="line">
<label for="pwInput"> 패스워드
<input type="password" id="pwInput" onclick="pw_click()">
</label>
</div>
<p class="pwfailure-message hide">필수 입력 항목 입니다.</p>
<p class="pwClick-message hide">영문자 대/소문자, 숫자 포함 8~32자</p>
<div id="line">
<label for="pwInput"> 패스워드 확인
<input type="password" id="pwrightInput" onclick="pw_clickright()">
</label>
</div>
<p class="pwrightfailure-message hide">필수 입력 항목 입니다.</p>
<div id="line">
<label for="emailInput">이메일</label>
<input type="email" onclick="email_click()">@<input type="email"></input>
</div>
<div id="line">
<label for="emailInput">주소</label>
<input type="text" id="aderInput">
<div><input type="text" id="address"></div>
</div>
<br>
<button id="join">가 입</button>
</div>
</fieldset>
</form>
<script src="./join.js"></script>
</body>
</html>
#container{
border: 1px solid #ccc;
/* width: 900px;
height: 700px; */
width: 470px;
height: 600px;
padding: 70px 15px 15px 15px;
background-color: white;
}
label{
font-weight: bold;
/* margin-right: 10px; */
}
p{
margin-top: -7px;
font-size: 13px;
text-align: right;
}
input{
border: 0px none;
border-bottom: 2.2px dashed black ;
font-weight: bold;
margin-bottom: 20px;
/* margin-left: 20px; */
/* text-align: right; */
}
fieldset{
width: 900px;
height: 700px;
border: 1px solid rgb(55, 55, 190);
background-color:rgb(202, 235, 255);
/* text-align: left; */
display: flex;
align-items: center;
justify-content: center;
}
#address{
margin-left: 70px;
width: 350px;
}
#join{
width: 460px;
height: 50px;
margin: 0 4px;
background-color: rgb(187, 250, 150);
border: none;
color: darkgreen;
font-weight: bold;
font-size: 15px;
margin-top: 150px;
}
.hide{
display: none;
/* text-align: right; */
}
#idInput{
width: 300px;
margin-left: 68px;
}
#pwInput {
width: 300px;
margin-left: 55px;
}
#pwrightInput{
width: 300px;
margin-left: 20px;
}
#aderInput{
margin-left: 30px;
width: 350px;
}
// 입력 값 가져오기
let id = document.querySelector("#idInput");
let pw = document.querySelector("#pwInput");
let pwRight = document.querySelector("#pwrightInput");
// 메세지 뿌리기
// 아이디
let elIdClickmessage = document.querySelector(".idfailure-message");
let elPwClickmessage = document.querySelector(".pwClick-message");
// 비밀번호
let elPwFailuremessage = document.querySelector(".pwfailure-message");
// 비밀번호 확인
let elPWrightCilckmessage = document.querySelector(".pwrightfailure-message");
function pw_click(){
if(id.value == "") {
elIdClickmessage.classList.remove('hide');
}else{
elIdClickmessage.classList.add('hide');
}
elPwClickmessage.classList.remove('hide');
}
function pw_clickright(){
if(pw.value == ""){
elPwFailuremessage.classList.remove('hide');
}else{
elPwFailuremessage.classList.add('hide');
}
}
function email_click(){
if(pwRight.value == ""){
elPWrightCilckmessage.classList.remove('hide');
}else{
elPWrightCilckmessage.classList.add('hide');
}
}
'국비학원 교육 일지' 카테고리의 다른 글
| [57일차] 국비 교육 (0) | 2022.10.13 |
|---|---|
| [56일차] 국비 교육 (0) | 2022.10.12 |
| [54일차] 국비 교육 (1) | 2022.10.06 |
| [53일차] 국비교육 (1) | 2022.10.05 |
| [52일차] 국비 교육 (1) | 2022.10.04 |
'국비학원 교육 일지' Related Articles
more
