반응형
11. 자바스크립트 객체 다루기
3) 표준 내장 객체(standard built-in object)
: 자바스크립트에 기본으로 내장된 객체, 스코프의 위치를 따지지 않고 모든 영역에서 공통으로 사용할 수 있다.
| String | 기본 자료형 중 문자열과 관련 있는 속성과 메서드가 정의된 객체 |
| Array | 기본 자료형 중 배열과 관련 있는 속성과 메서드가 정의된 객체 |
| Date | 날짜 및 시간과 관련 있는 속성과 메서드가 정의된 객체 |
| Math | 수학 연산과 관련 있는 속성과 메서드가 정의된 객체 |
4) 브라우저 객체 모델(BOM, Browser Object Model)
: 자바스크립트 언어 사양에 포함되지 않고 웹 브라우저에서 제공하는 객체
12. 문서 객체 모델과 이벤트 다루기
문서 객체 모델 (DOM, Document Object Model)
웹 브라우저에 표시되는 문서를 자바스크립트가 이해할 수 있도록 객체화한 모델 구조
- DOM 트리를 구성하는 노드 타입
- 문서 노드(Node.DOCUMENT_NODE) : 최상위 document 객체의 노드 타입
- 요소 노드(Node.ELEMENT_NODE) : h1.p 태그와 같은 요소의 노드 타입
- 속성 노드(Node.ATTRIBUTE_NODE) : href.src와 같은 속성의 노드 타입
- 텍스트 노드(Node.TEXT_NODE) : 텍스트에 해당하는 노드 타입
- 주석 노드(Node.COMMENT_NODE) : 주석에 해당하는 노드 타입
셀프 테스트
1. 아이디가 입력됐는지 확인하기
2. 이메일 형식 확인하기
3. 비밀번호가 입력됐는지 확인하기
4. 비밀번호 길이가 5자리 이상 입력했는지 확인하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 UI</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="login" action="#">
<fieldset>
<legend>로그인</legend>
<button type="button">
Log in with Google
</button>
</fieldset>
<p>or</p>
<fieldset>
<legend>일반 로그인</legend>
<label for="username">
<input type="text" id="username" name="username" placeholder="Username">
</label>
<label for="password">
<input type="password" id="password" name="password" placeholder="Password">
</label>
<button type="submit">
LOGIN
</button>
</fieldset>
<a href="#">Forgot your password?</p>
</form>
<script src="main.js"></script>
</body>
</html>index.html
document.forms[0].addEventListener("submit", function(e){
e.preventDefault();
const idEl = document.forms[0].username;
const idValue = idEl.value.trim();
const pwEl = document.forms[0].password;
const pwValue = pwEl.value.trim();
if(idValue === ""){
alert("아이디를 입력해 주세요.");
idEl.focus();
return;
}
if(idValue.indexOf("@") === -1){
alert("아이디는 이메일 형식으로 입력해 주세요.");
idEl.focus();
return;
}
if(pwValue.trim() === ""){
alert("비밀번호를 입력해 주세요.");
pwEl.focus();
return;
}
if(pwValue.trim().length <= 4){
alert("비밀번호는 5자리 이상 입력해 주세요.")
pwEl.focus();
}
this.submit();
});main.js
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:"Roboto", sans-serif;
}
#login{
width:304px;
height:390px;
padding:28px 38px;
border:1px solid #000;
margin:100px auto;
}
#login fieldset{
border:none;
}
#login fieldset legend{
position:absolute;
top:-99999px;;
}
#login button{
width:228px;
height:44px;
border:1px solid #000;
background-color:white;
font-weight:bold;
}
#login input{
width:228px;
height:44px;
border:1px solid #000;
padding:0 10px;
margin-bottom:21px;
background-color:#eaeaea;
}
#login > fieldset + p {
margin:24px 0;
font-size:16px;
font-weight:bold;
text-align:center;
}
#login button[type="submit"]{
background-color:#373f3c ;
color:white;
margin-bottom:27px;
font-weight:normal;
cursor:pointer;
}
#login a{
text-decoration:none;
color:#2c3432;
font-size:14px;
text-align:center;
display:block;
}style.css
13. HTML+CSS+자바스크립트로 완성하는 최종 프로젝트
헤더 영역 만들기
메인 영역 만들기
섹션 영역 만들기 - About Me
섹션 영역 만들기 - What I Do
섹션 영역 만들기 - PortFolio
섹션 영역 만들기 - Contact With Me
유효성 검증하기
마지막으로 유효성에 적합한지 확인하기
반응형
'Web > HTML+CSS+JS' 카테고리의 다른 글
| [코딩 자율학습 HTML+CSS+자바스크립트] 3주차 학습 (1) | 2025.01.20 |
|---|---|
| [코딩 자율학습 HTML+CSS+자바스크립트] 2주차-3 학습 (0) | 2025.01.14 |
| [코딩 자율학습 HTML+CSS+자바스크립트] 2주차-2 학습 (2) | 2025.01.14 |
| [코딩 자율학습 HTML+CSS+자바스크립트] 2주차-1 학습 (1) | 2025.01.13 |
| [코딩 자율학습 HTML+CSS+자바스크립트] 1주차 학습 (0) | 2025.01.06 |