일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 프로세스
- prettier-plugin-tailwindcss
- type assertion
- github actions
- React.memo
- Headless 컴포넌트
- useMemo
- linux 배포판
- 좋은 PR
- AJIT
- 주니어개발자
- Compound Component
- react
- task queue
- Render Queue
- useEffect
- TypeScript
- Microtask Queue
- JavaScript
- CI/CD
- useCallback
- Event Loop
- docker
- CS
- 타입 단언
- useLayoutEffect
- Sparkplug
- 암묵적 타입 변환
- 명시적 타입 변환
- Custom Hook
- Today
- Total
구리
TIL_210513_자바스크립트 본문
목차
자바스크립트를 이용한 객체 생성
자바스크립트 객체 생성자 및 멤버변수
innerText
자바스크립트 배열
자바스크립트 이벤트 부여 방법
자바스크립트를 이용한 객체 생성
var 변수명(객체명) = {변수명:값, 변수명:값};
예시
var member = {
id : 123,
name : "너굴이",
age : 25,
address : "서울"
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>member 객체 : quiz-1.html</title>
</head>
<body>
<script src="js/quiz-1.js"></script>
<script>
document.write("<h2>" + member.name + "</h2>");
document.write("<ul><li>아이디 : " + member.id + "</li>");
document.write("<li>나이 : " + member.age + "</li>");
document.write("<li>주소 : " + member.address + "</li></ul>");
</script>
</body>
</html>
document.write 코딩을 html 파일이 아닌 js 파일로 옮겨서 실행해도 된다
자바스크립트 객체 생성자 및 멤버변수
(자바스크립트를 이용한 프레임워크 개발시 주로 사용)
생성자 생성
function 생성자(매개변수){
this.멤버변수명;
this.메서드명 = function() {}
}
객체 생성 방법
var 객체명 = enw 생성자(전달값);
객체 변수 사용법
객체명.멤버변수명 = 값;
객체 메서드 호출 방법
객체명.메서드명();
자바스크립트를 이용한 원의 반지름 입력 받아 둘레와 넓이 구하기
var circle1 = new Circle(r); // 아래 생성자를 이용한 객체 생성
document.write("반지름이 " + r + "cm일 때" + "<br>원의 둘레 : 약 " + circle1.circumference() + "cm<br>원의 넓이 : 약" + circle1.area()+"cm<sup>2</sup>");
// Circle 객체 생성자 선언
function Circle(radius){
// Cilcle 객체 멤버 변수 선언
this.radius = radius;
// Circle 객체 메서드 선언
// 자바스크립트 변수엔 데이터 타입이 지정 X, 따라서 함수도 저장 가능
this.circumference = function(){
return Math.floor(this.radius*2*Math.PI);
}
// Circle 객체 메서드 선언
this.area = function(){
return Math.floor(Math.pow(this.radius, 2) * Math.PI);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Circle 객체 : 원의 반지름 입력 받기</title>
</head>
<body>
객체 생성 및 생성자 선언<br />
멤버 변수, 메서드 선언<br />
<br />
<script>
var r = prompt("원의 반지름을 입력");
</script>
<script src="js/quiz-2.js"></script>
</body>
</html>
참고로 원의 반지름을 입력해야만 계산이 되기에 'var r = prompt("원의 반지름을 입력");' 스크립트 태그를 <script src="js/quiz-2.js"></script>태그보다 아래에 작성하면 r=null값으로 오류 발생한다
자바스크립트를 이용한 사용자 정의 객체 선언 및 생성
var toyRobot = { // toyRobot 객체 선언 후 멤버변수와 메서드 정의
productId : "123-12",
name : "Robot",
price : "25,000",
madeIn : "Korea",
quantitiy : 10,
showStock : function(){
document.querySelector("#display").innerHTML = this.name + " 제품은 " + this.quantitiy + "개 남았습니다.";
},
showPrice : function() {
alert(this.name + " 제품의 가격은 " + this.price + "입니다");
}
};
toyRobot.showStock();
toyRobot.showPrice();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사용자 정의 객체 : object-result</title>
</head>
<body>
<div id="display"></div>
<script src="js/object-result.js"></script>
</body>
</html>
참고로 위 자바스크립트 코딩을 보면 toyRobot 객체 안에 변수, 메서드 정의할 때 하나 정의할 때마다 , 콤마로 마친다 (자바와 다른 점)
자바스크립트를 이용한 간단한 도서 관리 프로그램 예시
function Book(title, author, volume, price){
this.title = title;
this.author = author;
this.volume = volume;
this.price = price;
}
var html = new Book('웹 표준의 정석','Ko','608','28,000');
var youtube = new Book('유튜브 영상 만들기','Kim','368','16,000');
var python = new Book('점프 투 파이썬','Park','352','18,000');
var bookList = [html,youtube,python];
document.write("<h1>책 제목으로 살펴보기</h1>");
for(var i=0;i<bookList.length;i++){
document.write("<p>"+bookList[i].title+"</p>");
}
document.write("<h1>책 저자로 살펴보기</h1>");
for(var i=0;i<bookList.length;i++){
document.write("<p>"+bookList[i].author+"</p>");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>도서 관리 프로그램 - 객체 만들기</title>
</head>
<body>
<script src="js/book-result.js"></script>
</body>
</html>
책의 정보를 담고 있는 Book 생성자 선언 후 인스턴스 생성하여 책의 정보들을 작성한다, 그리고 Book 인스턴스들을 배열로 묶어서 for문을 이용해 책의 정보를 출력하는 코드다참고로 자바스크립트는 배열 생성시 [] 대괄호 사용 (자바처럼 {} 블록 사용 X)
innerText
HTML 태그가 삽입될 경우, 태그 없이 텍스트만 출력 (html 태그 사용시 태그 그대로 출력)
자바스크립트를 이용한 d-day 계산기 프로그램
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans|Jua');
/*get방식 : 웹주소줄 ㅣ http://~~/프로젝트명/대상.jsp?no=1*/
/*다른 사람의 css를 사용할때*/
* {
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;
}
var now = new Date();
var firstDay = new Date("2018-06-03");
var toNow = now.getTime();
// 오늘 날짜를 밀리초로 바꿈
var toFirst = firstDay.getTime();
var passedTime = toNow - toFirst;
var passedDay = Math.round(passedTime/(1000*60*60*24));
// 밀리초를 일로 변환 후 반올림 : 24:1일 / 60:분 / 60:초 / 1000:milisecond
document.querySelector('#accent').innerText = passedDay + "일";
function calcDate(days){
var future = toFirst + days*(1000*60*60*24);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth();
var date = someday.getDate();
document.querySelector("#date"+days).innerText = year + "년" + month + "월" + date + "일";
}
calcDate(100);
calcDate(200);
calcDate(365);
calcDate(500);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>D-DAY for love</title>
<link rel="stylesheet" href="css/d-day.css">
</head>
<body>
<div class="container">
<div class="day1">
<h3>우리가 만난지</h3>
<p id="accent" class="accent">며칠?</p> <!-- css - style class, js : id로 적용 -->
</div>
<div class="bar">기념일 계산</div>
<div class="day2">
<ul>
<li class="item-title">100일</li>
<li class="item-date" id="date100"></li>
</ul>
<ul>
<li class="item-title">200일</li>
<li class="item-date" id="date200"></li>
</ul>
<ul>
<li class="item-title">1년</li>
<li class="item-date" id="date365"></li>
</ul>
<ul>
<li class="item-title">500일</li>
<li class="item-date" id="date500"></li>
</ul>
</div>
</div>
<script src="js/dday-temp.js?ver=1"></script>
</body>
</html>
자바스크립트를 이용한 여행 물품 리스트 작성 코드
/*input.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 { /*폼태그의 버튼이나 submit이 눌려진 후 */
content:"";
display:table;
clear:both;
}
/*list.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; /*(색변화 hover 효과)효과 시간은 0.2초로 마무리*/
}
ul li:nth-child(odd) { /*하나 걸러 하나씩 색이 달라져 (odd) 홀수?*/
background-color:#f9f9f9;
}
ul li:hover {
background-color:#ddd; /*마우스 올렸을 때 효과*/
}
.close { /*close style tag*/
position:absolute;
right:0; /*오른쪽 끝에 붙어라*/
top:0;
padding:12px 16px;
border:none; /*테두리 제거*/
background:rgba(255,255,255,0)
}
.close:hover {
background-color:#007acc;
color:white;
}
var itemList=[]; // 사용자가 입력한 항목들 저장하는 배열 (처음엔 입력값이 없기에 비어있음)
// 버튼에 이벤트 부여해주는 함수 (일단 버튼 찾아서 변수에 저장)
var addBtn = document.querySelector("#add"); // '추가' 버튼을 변수에 저장
addBtn.addEventListener("click", addList); // addBtn 클릭시 addList 함수 호출하는 "click" 이벤트 실행
function addList(){
var item = document.querySelector("#item").value; // 텍스트 필드 값 저장
if(item != null){ // 사용자가 입력을 했다면
itemList.push(item); // itemList의 맨 뒤에 item값 추가
document.querySelector("#item").value = ""; // 입력창 초기화
document.querySelector("#item").focus(); // 입력창 포커스
}
showList();
}
function showList(){
var list = "<ul>";
for(var i=0;i<itemList.length;i++){
list = list + "<li>" + itemList[i] + "<span class='close' id=" + i + ">X</span></li>";
}
list = list + "</ul>";
document.querySelector("#itemList").innerHTML = list;
var remove = document.querySelectorAll(".close"); // class="close" 인 요소들 (<span~~ >X</span>)
// 각 li태그 마다 span class='close' 를 가지고 있기에 remove는 배열로 됨
for(var i=0;i<remove.length;i++){
remove[i].addEventListener("click", removeList); // <span~>X</sapn> 클릭시, removeList 함수 호출
}
}
function removeList(){
var id = this.getAttribute("id"); // click 이벤트를 발생시킨 요소의 id값을 추출하여 저장
itemList.splice(id,1); // itemList의 요소 중 id값에 해당하는 요소 1개를 삭제
showList(); // 변경된 itemList를 다시 출력
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- index-1.html 요청했을 때, 요청한 기기의 가로 사이즈 -->
<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로 text 입력 받는 값을 div id="itemList"에 추가할 예정-->
</div>
<script src="js/checklist-1.js"></script>
</body>
</html>
해당 코드는 목록을 추가했을 시 현재 화면에서 추가되는 것이 아니라 아예 refresh 되어 새화면으로 이동하는 것이다
그리고 자바스크립트에서 배열은 자바의 ArrayList처럼 변수를 저장할 때 push() 메소드 사용하면 된다
코드 설명
<meta name="viewport" content="width=device-width">
index-1.html 요청했을 때, 요청한 기기의 가로 사이즈
<input type="text" autofocus="true">
autofocus 자동으로 포커스 되게 하는 속성
<button> 태그
<input type="button" />와 동일하나 button 태그의 value는 시작태그와 닫는 태그 사이에 명시, input button 태그는 value값을 시작태그에 명시함
위 프로젝트 오류 사진
이런 오류 발생시 의미는 checklist.js 파일내의 addList라는 변수가 없거나 변수 내의 문법적 오류가 있을 시 발생하기에 해당 오류 라인, 해당 오류값의 내부를 다 살펴봐야 한다
자바스크립트 배열
var 배열명 = []; // 텅빈 배열
var 배열명 = [1,23,435,11]; // 초기값을 갖는 배열
자바스크립트 배열의 요소 일부분 삭제할 시
배열명.splice(시작 index번호, 갯수);
자바스크립트 이벤트 부여 방법
// 1. HTML 태그 선택
document.querySelector("#아이디");
document.querySelector(".클래스속성명");
document.querySelectorAll(".클래스속성명"); // 동일 요소 모두 선택
// 2. addEventListener() 호출
document.querySelector("#아이디").addEventListener("이벤트명", 이벤트 발생시 호출할 함수명);
혹은
var in = document.querySelector("#아이디");
in.addEventListener("이벤트명", 이벤트 발생시 호출할 함수명);
//이벤트 발생시 호출되는 함수 선언
function 함수명(){
// 이벤트 발생 시킨 요소는 this를 사용
// 동일 이벤트가 여러 요소에서 발생할 경우 id 이용하여 구별 가능
this.getAttribute("id");
}
자바스크립트를 이용해 랜덤으로 글귀 출력하기
var quotes=[];
quotes[0] = "당신은 지금도 최고고, 이전에도 최고였으며 앞으로도 최고일 것입니다.";
quotes[1] = "성공하는 사람은 실패하는데 익숙한 사람이다.";
quotes[2] = "후회를 최대한 이용하라. 깊이 후회한다는 것은 새로운 삶은 산다는 것이다.";
quotes[3] = "가짜 친구는 소문을 믿고 진짜 친구는 나를 믿는다.";
quotes[4] = "성공이라는 못을 박으려면 끈질김이라는 망치가 필요하다.";
quotes[5] = "인생이란 결코 공평하지 않다. 이 사실에 익숙해져라.";
quotes[6] = "'언젠가'라는 날은 영원히 오지 않는다.";
quotes[7] = "문제점을 찾지 말고 해결책을 찾으라.";
quotes[8] = "착한 일은 작다 해서 아니하지 말고, 악한 일은 작다 해도 하지 말라.";
quotes[9] = "자존심은 어리석은 자의 소유물이다";
var index = Math.floor(Math.random()*10);
document.write("<b>"" + quotes[index] + ""</b>");
// " 따옴표 출력 도움
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- initial-scale=1.0 휴대폰으로 볼 때 화면 조정 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 브라우저에 대한 호환성 -->
<title>연습문제</title>
<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script" rel="stylesheet">
<style>
body {
font-family:'Nanum Pen Script', "맑은 고딕";
padding-top:20px;
font-size:2.5em;
text-align: center;
}
</style>
</head>
<body>
<script src="js/sol-2.js"></script>
</body>
</html>
자바스크립트를 이용한 커피 쇼핑몰 상세 페이지 예시
#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;
}
var bigPic = document.querySelector("#cup");
var smallPics = document.querySelectorAll(".small");
for(var i=0;i<smallPics.length;i++){
smallPics[i].addEventListener("click",changePic);
}
function changePic(){
var newPic = this.src; // <img src="~~" 작은 사진 클릭시 해당 태그의 img src 속성 불러옴>
bigPic.setAttribute("src", newPic);
}
var view = document.querySelector("#view");
view.addEventListener("click",showDesc);
var isOpen= false; // 처음엔 닫혀있는 상태
function showDesc(){
if(isOpen == false){
document.querySelector("#detail").style.display="block";
view.innerHTML = "상세설명 닫기";
isOpen = true;
}else{
document.querySelector("#detail").style.display="none";
view.innerHTML = "상세설명 열기";
isOpen = false;
}
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
<link rel="stylesheet" href="css/product.css">
</head>
<body>
<div id="container"> <!-- 전체 레이아웃 시작 -->
<h1 id="heading">에디오피아 게뎁</h1>
<!-- 화면왼쪽 이미지들 구성 -->
<div id="proc-pic">
<img src="images/coffee-pink.jpg" width="200" height="200" id="cup" />
<div id="small-pic">
<img src="images/coffee-pink.jpg" class="small">
<img src="images/coffee-blue.jpg" class="small">
<img src="images/coffee-gray.jpg" class="small">
</div>
</div>
<!-- 화면 오른쪽 요약 구성 -->
<div id="desc">
<ul원>
<li>상품명 : 에디오피아 게뎁</li>
<li class="bluetext">판매가 : 9,000원</li>
<li>배송비 : 3,000원 (50,000원 이상 무료)</li>
<li>적립금 : 180원(2%)</li>
<li>로스팅 : 2021.05.12</li>
<button>장바구니</button>
</ul>
<a href="#" id="view">상세 설명 보기</a>
</div>
<!-- 보이지 않다가 상세 설명 보기 클릭시 나타날 영역 -->
<div id="detail">
<hr>
<h2>상품 상세 정보</h2>
<ul>
<li>원산지 : 에디오피아</li>
<li>지 역 : 이르가체프 코체레</li>
<li>농 장 : 게뎁</li>
<li>고 도 : 1,950 ~ 2,000 m</li>
<li>품 종 : 지역 토착종</li>
<li>가공법 : 워시드</li>
</ul>
<h3>Information</h3>
<p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
<h3>Flavor Note</h3>
<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
<!-- 나타날 영역 끝 -->
</div> <!-- 전체 레이아웃 끝 -->
<script src="js/showBig-result.js"></script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
[JavaScript] Iterable, Iterator 그리고 Generator (0) | 2023.07.23 |
---|---|
[JavaScript] Symbol을 사용하는 이유 (0) | 2023.07.20 |
TIL_210517_자바스크립트 슬라이드 쇼 예제 (0) | 2021.05.17 |
TIL_210514_자바스크립트 이용한 form,input 태그 활용 예제 (0) | 2021.05.14 |
TIL_210512_JavaScript 기초, 문법 및 예제 (0) | 2021.05.12 |