자바스크립트를 이용한 객체 생성
=> var 변수명 { 객체명 } => {변수명:값, 변수명:값,~~~ };
ex)
회원 객체
var member={name:"홍길동", age:33~~ };
자바 스크립트 객체의 생성자 및 멤버변수, 메소드 선언방법
생성자)
function 생성자 (매개변수){
this.멤버변수명;
this.메소드명 = function(){
}
}
객체 생성 방법
=> var 객체명 = new 생성자(전달값);
객체의 변수 사용방법
=> 객체명.멤버변수=값;
객체의 메소드 호출방법
=> 객체명.메소드명();
자바 스크립트 객체, 멤버변수, 메소드 선언시,
{ } 을 이용하는 방법 (필요할 경우에만 간단하게 선언하여 사용)
var 객체명 = {
멤버변수:값
멤버변수:값,
멤버변수:값,
메소드명:function(){
this.멤버변수 = 값;
}
}
객체의 멤버변수 사용
=> 객체명.멤버변수명 = 값;
객체의 메소드 호출 방법
=> 객체명.메소드명;
값 추가
값을 입력했을때 아래쪽에 입력한 값이 추가 될 것이다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>여행 준비물 점검 목록</title>
<link rel="stylesheet" href="css/input.css">
<link rel="stylesheet" href="css/list.css">
</head>
<body>
<div id="wrapper">
<h2>여행 준비물 점검 목록</h2>
<form>
<input type="text" id="item" autofocus="true">
<button type="button" id="add" class="addBtn">추가</button>
</form>
<div id="itemList"></div>
</div>
<script src="js/checklist-1.js"></script>
</body>
</html>
입력창 CSS
* {
box-sizing:border-box;
}
#wrapper {
width:600px;
margin:0 auto;
}
h2 {
text-align:center;
}
form {
background-color:#007acc;
padding:30px 40px;
color:white;
text-align:center;
}
input {
border:none;
width:440px;
padding:10px;
float:left;
font-size:16px;
}
.addBtn {
padding:10px;
width:50px;
border:none;
background-color:#fff;
box-shadow:1px 2px 4px #167dae;
color:#555;
text-align:center;
font-size:14px;
cursor:pointer;
transition:0.3;
}
form::after {
content:"";
display:table;
clear:both;
}
form::after {
content:"";
display:table;
clear:both;
}
=> form태그가 실행 된 후에 관한 CSS이다.
리스트 CSS
form::after {
content:"";
display:table;
clear:both;
}
ul{
margin:0;
padding:0;
list-style: none;
}
ul li{
cursor:pointer;
position:relative;
padding:12px 8px 12px 40px;
background: #eee;
font-size:18px;
transition: 0.2s;
}
ul li:nth-child(odd) {
background-color:#f9f9f9;
}
ul li:hover {
background-color:#ddd;
}
.close {
position:absolute;
right:0;
top:0;
padding:12px 16px;
border:none;
background:rgba(255,255,255,0)
}
.close:hover {
background-color:#007acc;
color:white;
}
ul li:hover {
background-color:#ddd;
}
리스트 텍스트에 마우스 커서를 올려놨을때 색이 배경색이 변한다.
ul li:nth-child(odd)
odd => 홀수번째 엘리먼트에만 적용!!
자바 스크립트
값을 입력시에 아래쪽에 추가된다.
이제 이 값을 지울수 있는 자바스크립트 작성
showList함수에 텍스트를 지우는 x값 추가
list += "<li>"+ itemList[i] + "<span class='close' id="+ i +">X</span></li>";
X 를 클릭시에 지울수 있게 할 것이다.( 아직 값을 지우는 함수는 만들지 않았다.)
마우스 커서를 올리면 배경색 변함(CSS 적용)
추가 및 수정된 자바스크립트
배열에 맨뒤에 데이터 추가
=> 배열명.push(추가할데이터);
배열의 특정 index에 값을 설정
=> 배열명[index]=데이터;
배열의 요소 중 일부분을 삭제할 경우
=> 배열명.splice(시작 index,개수);
** 시작 index에서부터 몇개를 삭제할지
자바 스크립트를 이용하여 이벤트 부여
HTML태그를 선택
=> document.querySelector("#아이디");
=> document.querySelector(".클래스속성명");
=> document.querySelectorAll(".클래스속성명"); ** 동일한 요소 모두 선택
//메모리 효율
1. document.querySelector("#아이디").addEventListener("이벤트명", 이벤트 발생시 호출할 함수명);
//가독성
2. var in = document.querySelector("#아이디");
in.addEventListener("이벤트명",호출함수명);
기념일 계산
사용된 CSS
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans|Jua');
* {
box-sizing: border-box;
}
.container{
width:450px;
margin:0 auto;
/* background:url(images/heart.png) no-repeat 5px -100px;
background-size:500px; */
border:1px solid #ccc;
border-radius:2%;
box-shadow:2px 2px 5px #333;
}
.day1{
padding-top:20px;
text-align:center;
}
.day1 h3 {
font-size:1.2em;
color:#666;
}
.accent{
margin-left:10px;
margin-right:10px;
margin-top:10px;
font-family: 'Jua', sans-serif;
font-weight:bold;
font-size:3.5em;
color:#222;
}
.bar {
width:100%;
margin:60px auto 0 auto;
padding-left:15px;
height:40px;
background:#747474;
color:#fff;
font-size:1.2em;
line-height:40px;
}
.day2 {
width:420px;
margin:20px auto 20px auto;
}
.day2 ul {
list-style: none;
border-bottom:1px dashed #ccc;
height:60px;
}
.day2 ul:last-child {
border-bottom:none;
}
.item-title {
float:left;
width:160px;
font-weight:bold;
font-size:1.5em;
line-height:60px;
}
.item-date {
float:left;
margin-left:60px;
font-size:1.2em;
color:#222;
text-align:right;
line-height:60px;
}
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans|Jua');
외부 CSS 사용 => 구글api 사용
자바스크립트
<p id="accent" class="accent"> 아래 쪽에 자바스크립트 추가
<p id="accent" class="accent">d_day.js"></script>
calcDate(100);
calcDate(200);
calcDate(365);
calcDate(500);
함수 호출 코드를 빠뜨렸다. 중간에 넣어주자.
랜덤
새로고침 할때마다 문구가 바뀔것이다.
사용된 html
자바스크립트
아래 작은 이미지 클릭시 위의 큰 이미지와 자리를 바꿔 줄 자바스크립트
상세 설명 보기 클릭시 설명이 아래 나오게 자바 스크립트 적용
사용된 HTML
CSS
#container {
width: 600px;
margin: 0 auto;
}
#prod-pic, #desc {
float: left;
}
#prod-pic {
margin: 20px 20px auto 10px;
padding: 0;
}
#cup {
box-shadow: 1px 1px 2px #eee;
outline: 1px dashed #ccc;
outline-offset: -7px;
}
#small-pic {
margin-top: 20px;
list-style: none;
padding: 0;
}
#small-pic>li {
float: left;
margin-right: 10px;
}
.small {
width: 60px;
height: 60px;
}
#small-pic img:hover {
cursor: pointer;
}
#desc {
width: 300px;
padding-top: 20px;
margin-bottom: 50px;
}
.bluetext {
color: #4343ff;
font-weight: bold;
}
#desc button {
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
padding: 10px;
}
#desc ul {
list-style: none;
}
#desc li {
font-size: 0.9em;
line-height: 1.8;
}
#desc a {
text-decoration: none;
font-size: 0.9em;
color: blue;
padding-left: 40px;
}
hr {
clear: both;
border: 1px dashed #f5f5f5;
}
#detail {
padding-top: 10px;
display: none;
}
#detail li {
font-size: 0.9em;
line-height: 1.4;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
color: #bebebe;
font-weight: normal;
}
h3 {
font-size: 1.1em;
color: #222;
}
p {
font-size: 0.9em;
line-height: 1.4;
text-align: justify;
}
이미지에 관한 자바 스크립트
버튼에 클릭 이벤트 부여
이미지 클릭시 클릭한 이미지로 메인 이미지가 변경된다.
상세 설명 보기
상세 설명 보기를 클릭하면 내용이 나올 것이다.
내용이 나오면서 상세설명보기 -> 상세설명닫기로 바뀐다.
상세설명 자바스크립트
'Learn > KH정보교육원' 카테고리의 다른 글
| [JavaScript] 브라우저 환경 체크 (0) | 2021.05.14 |
|---|---|
| [KH 정보교육원 당산] 47일차(자바스크립트 - 주문폼, onchange 속성 , 체크 박스 계산, 시계,숫자맞히기 게임) (0) | 2021.05.14 |
| [KH정보교육원 당산] 45일차 (JavaScript 시작) (0) | 2021.05.12 |
| [KH정보교육원 당산] 44일차 (파일 업로드) (0) | 2021.05.11 |
| [KH정보교육원 당산] 42일차 (쇼핑몰 - 주문) (0) | 2021.05.07 |