210831 개발일지

JANE Jeong·2021년 8월 31일

CSS JavaScript html 대구AI스쿨 실습 웹프로그래밍

대구 AI 스쿨

목록 보기

45/51

📌 학습한 내용

전체 코드 1 : 💾

JavaScript 기본 실습

1. 버튼 클릭시 랜덤으로 배경 색상 변경 & 해당 헥스코드 노출

1) html코드 먼저 작성 후, `<script>`로 js파일 연결하기 (html이 우선 존재해야 js에서 불러올 수 있음)

<body>
	<!-- 버튼 클릭시 body의 배경색 변경, 해당 색상코드 반환 -->
	<h1>HEX Color : <span id="hex"></span></h1>
	<button id="btn" type="button">Click Here!</button>

	<!-- html 코드를 작성한 뒤, js에서 작업할 태그를 가져오는 순서  -->
	<script src="js/main.js"></script>
</body>

2) js에서 작업할 영역 가져오기 (이벤트 발생 지점 선택)

var hex = document.getElementById('hex');
var btn = document.getElementById('btn');

3) 이벤트 설정

// 두 번째 인수로 익명 함수를 전달해 다이렉트로 기능 만들기 
btn.addEventListener('click', function() {
})

4) 이벤트 실행시, 호출할 함수 생성

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"] 
// 헥스코드 조합에 필요한 요소들로 배열 만들기
var color = '#';  // 고정값

	for(var i = 0; i < 6; i++) {
		var random = Math.floor(Math.random() * arr.length);
      	       // arr 배열 내에서 랜덤한 숫자를 뽑는 변수 생성 (arr의 길이를 곱해줌으로써 램덤 숫자의 범위를 0 ~ arr 데이터 길이 까지로 설정)
		color += arr[random];
               // 6번 반복으로 color값 뽑아내기
    }
});

4) 생성된 color값을 html 태그에 적용

// <body>에 color값 적용
document.body.style.backgroundColor = color;
// #hex 요소 에 글자 삽입
hex.textContent = color;

textContent : js를 이용해 html에 문서에 글자를 삽입할 때 사용하는 프로퍼티

추가 방법 (실무형)

: 버튼 클릭시, 두 번째 인수로 전달한 함수를 호출 (호출 기호 x, 결과적으로는 콜백함수로 볼 수 있음)

btn.addEventListener('click', createColor);

function createColor() {

	var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"]
	var color = '#';

	for(var i = 0; i < 6; i++) {
		var random = Math.floor(Math.random() * arr.length);
		color += arr[random];
	}

	document.body.style.backgroundColor = color;
	hex.textContent = color;
}

전체 코드 2 : 💾

2. 버튼 클릭시 랜덤한 인용문구 출력하기

1번 실습과 유사

var quote = document.getElementById('quote')
var author = document.getElementById('author')
var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
	
	var random = Math.floor(Math.random() * arr.length);
  
	// 배열에 접근하는 공식과 객체에 접근하는 공식 결합
	quote.textContent = arr[random].quote;
	author.textContent = arr[random].author;

});

전체 코드 3 : 💾

3. 사용자가 `<input>` 입력한 결과 화면에 출력, 글자가 없는 경우 error문구 출력

1) 이벤트 발생지점 선택

<form id="form">
	<input type="text" id="msg">
	<button type="submit" id="btn">입력</button>
</form>

<h1 class="feedback">Input 값을 입력하세요.</h1>
<h2 id="txt">입력된 텍스트가 출력되는 영역</h2>

var form = document.getElementById('form');
var input = document.getElementById('msg');

var feedback = document.querySelector('feedback');
var txt = document.getElementById('txt');

querySelector('태그명/#id/.class') : 자바스크립트에서 css의 요소 접근 방식으로 접근하기 위한 방식

2) 이벤트 설정

form.addEventListener('submit', function(e) {
	e.preventDefault();
  
  	var msg = input.value
    //value 프로퍼티: <input>에 입력되는 글자만을 가져올 때 사용
})

<form>에 type="submit" 속성을 가진 버튼이 있다면 js의 'sbmit' 이벤트가 작동.
단, 'submit' 이벤트는 동작이 됌과 동시에 브라우저를 새로고침하는 기능을 갖고 있다.
-> 해당 기능을 꺼주기 위해 두 번째 인수로 전달한 콜백함수에 e (a, b, c... 관계x) 라고 하는 매개변수를 전달 후, 이벤트 객체에 내장된 e.preventDefault()메서드 적용
e : 이벤트 객체 ?

3) `<input>`으로 입력받은 값 분기처리

입력받은 텍스트가 있는 경우 / 비어있는 경우
: 문자열이 빈 값이 아니라면 true / 빈 문자열은 false로 처리되는 특성을 이용해 if로 경우의 수를 나눔

if(msg) {
  // true인 경우(텍스트가 있는 경우)
} else {
  // false인 경우(텍스트가 없는 경우)
}

입력받은 텍스트가 있는 경우, 해당 텍스트를 표시한 후 form.reset()으로 <form> 안의 모든 <input>을 초기화

if(msg) {
 	txt.textContent = msg;
 	form.reset()  // 입력받은 텍스트 초기화
}

입력받은 텍스트가 비어있는 경우, 'feedback' 부분에 class를 추가해 노출했다가 1초후에 class를 다시 삭제해 화면에 보이지 않게 함

else {
  	// 빈 값인 경우 feedback에 .show 클래스 추가
	feedback.classList.add('show');
  
  	// 2초 후에 .show 클래스 삭제
	setTimeout(function() {
		feedback.classList.remove('show');
		}, 2000);
}

classList.add() : 특정 영역에 class를 추가할 때 사용
classList.remove() : 특정 영역에 class를 제거할 때 사용
setTimeout(콜백함수, 시간) 메서드 : 타이머가 만료된 뒤, 함수나 지정된 코드를 실행하는 타이머를 설정 (1000ms = 1sec)

전체 코드 4 : 💾

4. 좌/우 버튼 클릭 시, 이미지와 설명 변경

1) btn 클래스를 가진 모든 요소 호출

document.querySelectorAll('.btn').forEach(function(element, index) {
	element.addEventListener('click', function(e) {
		e.preventDefault();
	});
});

document.querySelectorAll('.btn')
: .btn이라는 클래스명을 가진 모든 영역을 배열과 같은 형태로 가져옴
가져온 각각의 개체에 이벤트를 적용하기 위해 forEach를 사용
<a>가 가진 본연의 기능을 막아주기 위해 e.preventDefault() 메서드 적용

2) 가져온 버튼 구분 prev/next

// 클릭한 영역에 어떤 클래스가 있는지 분기 처리
if(e.target.classList.contains('prevBtn')) {
	console.log("prev");
} // 선택한 요소가 prevBtn 클래스를 가지고 있음

if(e.target.classList.contains('nextBtn')) {
	console.log("next");
} //선택한 요소가 nextBtn 클래스를 가지고 있음

e.target : 클릭한 영역을 호출
classList : html태그의 클래스 목록을 가져온다.
contains() : 인수에 들어간 요소(class)가 포함되어 있는지의 여부를 논리값(boolean)으로 반환

3) 버튼에 따른 페이지 변경 설정

이미지와 이미지 정보를 담은 객체들을 배열로 저장

var arr = [
	{
		img : "img/img-0.jpg",
		name : "puppy 0",
		txt : "puppy description 0"
	},
	{
		img : "img/img-1.jpg",
		name : "puppy 1",
		txt : "puppy description 1"
	},
	{
		img : "img/img-2.jpg",
		name : "puppy 2",
		txt : "puppy description 2"
	},
	{
		img : "img/img-3.jpg",
		name : "puppy 3",
		txt : "puppy description 3"
	},
];

객체에 접근할 인덱스를 저장할 변수 생성

var i = 0; // 기준점

prev/next 에 따라 인덱스 값 조정

if(e.target.classList.contains('prevBtn')) {
	// console.log("prev");
  
		if(i === 0) {
			i = arr.length;
          	// 현재 배열의 length 는 4
		}
			i--;
  			
  			document.getElementById('img').src = arr[i].img;
			document.getElementById('name').textContent = arr[i].name;
			document.getElementById('txt').textContent = arr[i].txt;
		}

if(e.target.classList.contains('nextBtn')) {
	// console.log("next");

		if(i === arr.length -1) {
				i = -1;
			}

			i++; // 이 지점에서 i가 0으로 감

			document.getElementById('img').src = arr[i].img;
			document.getElementById('name').textContent = arr[i].name;
			document.getElementById('txt').textContent = arr[i].txt;

		}
	});
});

📌 학습내용 중 어려웠던 점

3, 4번째 실습에서 원리가 이해가 되지 않는 부분이 많았다.

📌 해결방법

https://pythontutor.com/visualize.html#mode=edit 해당 사이트를 이용해 코드가 어떤 식으로 작동하는지 다시 한 번 공부해야겠다.

📌 학습소감

아직까지 객체와 메서드 들의 기능을 확실하게 이해하지 못해서 어려운 부분이 가장 크다. 전체적으로 자바스크립트 강의들을 따라간 뒤에 다시 한 번 처음부터 복습하는 것이 이해에 도움이 될 듯 하다. 또한 이번 개발일지를 작성하면서 다른 참가자들의 일지를 많이 참고 했다. 다른 사람이 이해한 내용과 비교해가며 들으니 시간은 조금 더 걸렸지만 훨씬 도움이 된 것 같다. 그래도 아직까지는 여전히 어려운 자바스크립트 화이팅 😂

JANE Jeong

늘 새로운 배움을 추구하는 개린이 🌱

이전 포스트

210830 개발일지

다음 포스트

210831 개발일지

대구 AI 스쿨

📌 학습한 내용

전체 코드 1 : 💾

JavaScript 기본 실습

1. 버튼 클릭시 랜덤으로 배경 색상 변경 & 해당 헥스코드 노출

1) html코드 먼저 작성 후, `<script>`로 js파일 연결하기 (html이 우선 존재해야 js에서 불러올 수 있음)

2) js에서 작업할 영역 가져오기 (이벤트 발생 지점 선택)

3) 이벤트 설정

4) 이벤트 실행시, 호출할 함수 생성

4) 생성된 color값을 html 태그에 적용

추가 방법 (실무형)

전체 코드 2 : 💾

2. 버튼 클릭시 랜덤한 인용문구 출력하기

전체 코드 3 : 💾

3. 사용자가 `<input>` 입력한 결과 화면에 출력, 글자가 없는 경우 error문구 출력

1) 이벤트 발생지점 선택

2) 이벤트 설정

3) `<input>`으로 입력받은 값 분기처리

전체 코드 4 : 💾

4. 좌/우 버튼 클릭 시, 이미지와 설명 변경

1) btn 클래스를 가진 모든 요소 호출

2) 가져온 버튼 구분 prev/next

3) 버튼에 따른 페이지 변경 설정

📌 학습내용 중 어려웠던 점

📌 해결방법

📌 학습소감

210830 개발일지

210901 개발일지

0개의 댓글

210831 개발일지

대구 AI 스쿨

📌 학습한 내용

전체 코드 1 : 💾

JavaScript 기본 실습

1. 버튼 클릭시 랜덤으로 배경 색상 변경 & 해당 헥스코드 노출

1) html코드 먼저 작성 후, <script>로 js파일 연결하기 (html이 우선 존재해야 js에서 불러올 수 있음)

2) js에서 작업할 영역 가져오기 (이벤트 발생 지점 선택)

3) 이벤트 설정

4) 이벤트 실행시, 호출할 함수 생성

4) 생성된 color값을 html 태그에 적용

추가 방법 (실무형)

전체 코드 2 : 💾

2. 버튼 클릭시 랜덤한 인용문구 출력하기

전체 코드 3 : 💾

3. 사용자가 <input> 입력한 결과 화면에 출력, 글자가 없는 경우 error문구 출력

1) 이벤트 발생지점 선택

2) 이벤트 설정

3) <input>으로 입력받은 값 분기처리

전체 코드 4 : 💾

4. 좌/우 버튼 클릭 시, 이미지와 설명 변경

1) btn 클래스를 가진 모든 요소 호출

2) 가져온 버튼 구분 prev/next

3) 버튼에 따른 페이지 변경 설정

📌 학습내용 중 어려웠던 점

📌 해결방법

📌 학습소감

210830 개발일지

210901 개발일지

0개의 댓글

1) html코드 먼저 작성 후, `<script>`로 js파일 연결하기 (html이 우선 존재해야 js에서 불러올 수 있음)

3. 사용자가 `<input>` 입력한 결과 화면에 출력, 글자가 없는 경우 error문구 출력

3) `<input>`으로 입력받은 값 분기처리