// 배너
// 이미지 10개
// 사용할 예정
// 사운드를 삽입할 수도 있다. 이번에는 생략
// 필요한 부분들을 객체화
let banner = document.getElementById('banner');
let img = banner.getElementsByTagName('img'); // 베열형식, 동일한 태그를 배열로 가지고 온다
let toggle = document.getElementById('toggle');
// 배너의 높이 가지고 오기
// 높이에 따라 동작이 달라진다
// css 속성값을 가지고 올 수 있다
let banner_height = getComputedStyle(banner).height;
// 풍선을 객체형태로 만들어 관리해주기
// 여러가지 정보를 하나로 묶어서 실제 풍선이 움직일 때 동작을 해야한다.
// 전역변수
let cast = [];
// 객체생성방식
// 이렇게도 할 수 있지만 이번의 경우엔 다른 방식으로 해보겠다.
// let ballInfo = {
// x : x,
// y : y,
// size : size,
// angle : angle,
// speed : speed
// }
// 풍선 객체 생성 함수
// num -> 인덱스 번호
function set_balloon(num){
let x = Math.floor(Math.random() * (500 - 10) + 10); // x축 10 ~ 500
let y = Math.floor(Math.random() * (400 - 120) + 120); // y축 120 ~ 400
let size = Math.floor(Math.random() * (200 - 100) + 100); // 크기 범위 100 ~ 200
let angle = Math.floor(Math.random() * (360 - 0) + 0); // 회전하는 각도 범위 0 ~ 360
let speed = Math.random() * (2 - 0) + 0; // 속도 0 ~ 2
cast[num] = { // cast = [{},{},{},{},... {}]
x : x,
y : -y, // y축은 -일 수록 올라가고, +일 수록 내려간다
size : size,
angle : angle,
speed : speed
}
}
// 각각의 풍선 초기화 함수
function ball_init() {
for (let i = 0; i < img.length; i++) {
// 풍선 객체들을의 속성 초기화
set_balloon(i)
img[i].style.left= '-9999px'; // 풍선의 최초 x좌표 Object.style.css 속성 = "값을 줄 땐 문자열처리"
img[i].style.top = '-9999px'; // 풍선의 최초 y좌표
}
}
function animate_balloon() {
for (let i = 0; i < img.length; i++) {
// 풍선 속성 변경
img[i].style.left = cast[i].x + 'px'; // css 속성 문법에 맞춰 단위를 붙여야 함.
img[i].style.top = cast[i].y + 'px';
img[i].style.transform = 'rotate(' + cast[i].angle + 'deg)'; // 회전각 초기화
if (cast[i].y < parseInt(banner_height)){
// 풍선이 화면에 보임
// 1 ~ 3 하나의 풍선이 가지는 속도
cast[i].y += 1 + cast[i].speed;
cast[i].angle += cast[i].speed;
}else{
// 풍선이 배너 영역을 지나서 화면 밖으로 나갔을 때
set_balloon(i);
}
}
}
ball_init();
// (호출해서 실행하고 싶은 함수, 시간)
setInterval(function(){
animate_balloon();
}, 1000 / 30);
배너 열기, 닫기 기능 추가
toggle.onclick = function(){
// 속성(id, class 등) 중에 class 가 있으면 읽어와라
let attr = banner.getAttribute('class'); // class 속성이 가지고 있는 값을 읽어온다
if (attr === 'active'){
// 베너닫기
banner.removeAttribute('class'); // 해당 속성을 제거
toggle.innerHTML = '배너 열기';
return false; // a 태그에 링크속성 제거
}else {
banner.setAttribute('class', 'active'); // 해당 속성을 추가
toggle.innerHTML = '배너 닫기';
return false;
}
};
브라우저 콘솔창을 열어보면 배너를 열고 닫았을 때 active 속성이 사라지고, 추가되며 글씨가 바뀌는 것을 알 수 있다.
전체 코드 :
// 배너
// 이미지 10개
// 사용할 예정
// 사운드를 삽입할 수도 있다. 이번에는 생략
// 필요한 부분들을 객체화
let banner = document.getElementById('banner');
let img = banner.getElementsByTagName('img'); // 베열형식, 동일한 태그를 배열로 가지고 온다
let toggle = document.getElementById('toggle');
// 배너의 높이 가지고 오기
// 높이에 따라 동작이 달라진다
// css 속성값을 가지고 올 수 있다
let banner_height = getComputedStyle(banner).height;
// 풍선을 객체형태로 만들어 관리해주기
// 여러가지 정보를 하나로 묶어서 실제 풍선이 움직일 때 동작을 해야한다.
// 전역변수
let cast = [];
// 객체생성방식
// 이렇게도 할 수 있지만 이번의 경우엔 다른 방식으로 해보겠다.
// let ballInfo = {
// x : x,
// y : y,
// size : size,
// angle : angle,
// speed : speed
// }
// 풍선 객체 생성 함수
// num -> 인덱스 번호
function set_balloon(num){
let x = Math.floor(Math.random() * (500 - 10) + 10); // x축 10 ~ 500
let y = Math.floor(Math.random() * (400 - 120) + 120); // y축 120 ~ 400
let size = Math.floor(Math.random() * (200 - 100) + 100); // 크기 범위 100 ~ 200
let angle = Math.floor(Math.random() * (360 - 0) + 0); // 회전하는 각도 범위 0 ~ 360
let speed = Math.random() * (2 - 0) + 0; // 속도 0 ~ 2
cast[num] = { // cast = [{},{},{},{},... {}]
x : x,
y : -y, // y축은 -일 수록 올라가고, +일 수록 내려간다
size : size,
angle : angle,
speed : speed
}
}
// 각각의 풍선 초기화 함수
function ball_init() {
for (let i = 0; i < img.length; i++) {
// 풍선 객체들의 속성 초기화
set_balloon(i)
img[i].style.left= '-9999px'; // 풍선의 최초 x좌표 Object.style.css 속성 = "값을 줄 땐 문자열처리"
img[i].style.top = '-9999px'; // 풍선의 최초 y좌표
}
}
function animate_balloon() {
for (let i = 0; i < img.length; i++) {
// 풍선 속성 변경
img[i].style.left = cast[i].x + 'px'; // css 속성 문법에 맞춰 단위를 붙여야 함.
img[i].style.top = cast[i].y + 'px';
img[i].style.transform = 'rotate(' + cast[i].angle + 'deg)'; // 회전각 초기화
if (cast[i].y < parseInt(banner_height)){
// 풍선이 화면에 보임
// 1 ~ 3 하나의 풍선이 가지는 속도
cast[i].y += 1 + cast[i].speed;
cast[i].angle += cast[i].speed;
}else{
// 풍선이 배너 영역을 지나서 화면 밖으로 나갔을 때
set_balloon(i);
}
}
}
ball_init();
// (호출해서 실행하고 싶은 함수, 시간)
setInterval(function(){
animate_balloon();
}, 1000 / 30);
toggle.onclick = function(){
// 속성(id, class 등) 중에 class 가 있으면 읽어와라
let attr = banner.getAttribute('class'); // class 속성이 가지고 있는 값을 읽어온다
if (attr === 'active'){
// 베너닫기
banner.removeAttribute('class'); // 해당 속성을 제거
toggle.innerHTML = '배너 열기';
return false; // a 태그에 링크속성 제거
}else {
banner.setAttribute('class', 'active'); // 해당 속성을 추가
toggle.innerHTML = '배너 닫기';
return false;
}
};
처음에 배울때는 같은 코드를 안보고 칠 수 있을 정도로 계속 쳐보는 것이 더 좋다.
그러면서 이해하는 것.
강사님이 주는 코드는 최대한 분석해 놓을 것.
이번에는 제이쿼리로 위 코드를 바꿔 볼 것이다.
제이쿼리 ver.
let $banner = $('#banner');
let $img = $banner.find('img');
let $toggle = $('#toggle');
let $banner_height = $banner.css('height');
let cast = [];
function set_balloon(num){
let x = Math.floor(Math.random() * (500 - 10) + 10); // x축 10 ~ 500
let y = Math.floor(Math.random() * (400 - 120) + 120); // y축 120 ~ 400
let size = Math.floor(Math.random() * (200 - 100) + 100); // 크기 범위 100 ~ 200
let angle = Math.floor(Math.random() * (360 - 0) + 0); // 회전하는 각도 범위 0 ~ 360
let speed = Math.random() * (2 - 0) + 0; // 속도 0 ~ 2
cast[num] = { // cast = [{},{},{},{},... {}]
x : x,
y : -y, // y축은 -일 수록 올라가고, +일 수록 내려간다
size : size,
angle : angle,
speed : speed
};
}
function ball_init(){
// each 함수 사용
// 배열 $img 을 가지고 와 하나씩 확인
$img.each(function(i){
set_balloon(i);
$img.eq(i)
.css('left','-9999px')
.css('top', '-9999px')
});
}
function animate_balloon(){
$img.each(function(i){
$img.eq(i)
.css('left', cast[i].x + 'px')
.css('top',cast[i].y + 'px')
.css('transform', 'rotate(' + cast[i].angle + 'deg)');
if (cast[i].y < parseInt($banner_height)){
// 풍선이 화면에 보임
// 1 ~ 3 하나의 풍선이 가지는 속도
cast[i].y += 1 + cast[i].speed;
cast[i].angle += cast[i].speed;
}else{
// 풍선이 배너 영역을 지나서 화면 밖으로 나갔을 때
set_balloon(i);
}
});
}
ball_init();
// (호출해서 실행하고 싶은 함수, 시간)
setInterval(function(){
animate_balloon();
}, 1000 / 30);
문법을 익히기 위해 노력할 것.
스크립트에서 해당 메소드의 이름, 제이쿼리에서 메소드의 이름 이해
이걸 다 할 줄 알아야 진정한 기술탑재 프론트엔드 엔지니어
다음에 볼 시험) 자바스크립트로 프로그램짜기, 그걸 제이쿼리로 바꾸기
해 볼 것 : 계산기 자바스크립트 코드를 제이쿼리 방식으로 바꾸기
계산기 코드 :
// 변수 선언
//document.cal.result // 폼태그를 접근하는 방식 -> 여기서는 아이디나 클래스가 하나하나 선언되어있지 않아 사용 불가
let inp = document.forms['cal'];
let input = inp.getElementsByTagName('input'); // 배열형식으로 값을 가지고 온다
let cls_btn = document.getElementsByClassName('cls_btn')[0]; // 배열형식
let result_btn = document.getElementsByClassName('result_btn')[0]; //배열형식
// 버튼 3그룹
// 1. clear
// 2. 숫자버튼
// 3. 결과버튼
// 계산기 초기화(clear)
function clr(){
inp['result'].value = 0; // 결과창
}
// 계산기 입력 처리 함수
function calc(value){
// 입력이 들어가면 0을 지움
if (inp['result'].value == 0){
inp['result'].value = '';
}
// 입력값을 결과창에 출력
inp['result'].value += value;
}
// 계산 결과 처리 함수
function my_result(){
let result = inp['result'].value;
let cal = eval(result)
//결과창에 표시
inp['result'].value = cal;
}
// 이벤트 핸들러
// -------------------------------------------------------------------
// 숫자 및 사칙연산 버튼
for(var i = 0; i < input.length;i++){
// 숫자와 사칙 연산자만 입력 처리
if(input[i].value != '=' && input[i].value != 'clear'){
input[i].onclick = function(){
calc(this.value); // 숫자의 속성값 의미
};
}
} // end for
// 초기화 버튼
cls_btn.onclick = function(){
clr();
}
// 결과 버튼
result_btn.onclick = function(){
my_result();
}
오늘은 '자바스크립트를 이용한 cbt (전자문제풀이기) 프로그래밍'으로 그동안 배운 css와 자바스크립트의 문법을 정리했다.
'자바스크립트는 백엔드든 프론트든 아주 유용하니 꼭 공부를 많이 해둘 것' 이라는 강사님의 조언도 계속되었다.
화면구현할때
요소구성
css 디자인
스크립트 적용
위 순서로 진행되야 한다!
이렇게 css 를 하나하나 정리하는 과정이 정말 필요했다.
오늘 만들어 볼 것은 이런 틀을 가진 html, css 를 자바스크립트를 이용해 문제를 내보내고, 바꾸고, 점수를 매기며 동적으로 변화시키는 것.
-> css 를 정렬할 때는 그리드, 플렉스, 마진 등 하나를 정해서 만들어야 혼선이 생기지 않는다.
-> 자바스크립트에서 이벤트 주는 방식을 정리할 것.
-> 객체에 대한 이해가 있어야 함.
객체는 속성과 메서드로 되어있다.
- 속성은 특징, 메서드는 행위
- 메서드를 함수형태로 처리하는 것이 ‘기능’
- 뭘 객체로 봐야하는지 알아야 한다.
- 정답은 없음
완성된 코드와 결과 화면 :
// 메소드를 만들 때 1 메소드, 1 기능
// 너무 많은 메소드를 넣으면 유지보수가 어려움
// 문제 객체
// 세 개를 값으로 가지는 객체 생성
function Question(text, choice, answer){
this.text = text;
this.choice = choice;
this.answer = answer;
}
// 퀴즈 정보 객체
// 문제를 푸는 동안 점수 누적, 몇 문제 남았는지, 진행상황 등 정보 관리를 위한 객체
// 점수, 질문, 질문순서, 정답 확인
function Quiz(questions) {
this.score = 0; // 점수
this.questions = questions; // 질문
this.questionIndex = 0; // 질문 순서
// 정답 확인 기능
// 프로토타입으로 빼둔다.
// 메모리 한 번만 할당, 동일한 타입의 객체가 공유해서 사용할 수 있도록 한다. -> 자바의 static과 같은 의미
// 공유 -> 메모리 효율성이 높아진다
}
// 정답 확인 메소드
Quiz.prototype.correctAnswer = function(answer) {
// 사용자의 답과 해당 문제의 답 비교
return answer == this.questions[this.questionIndex].answer;
}
// 문제 데이터
// 배열로 만들어 값을 활용 -> text, choice, answer
// 배열은 세미콜론을 찍으면 안된다
let questions = [
new Question('다음 중 최초의 사용 웹 브라우저는?', ['모자이크', '인터넷 익스플로어', '구글 크롬', '넷스케이프 네비게이터'], '넷스케이프 네비게이터'),
new Question('웹 브라우저에서 스타일을 작성하는 언어는?', ['HTML', 'jQuery', 'CSS', 'XML'], 'CSS'),
new Question('명령어 기반의 인터페이스를 의미하는 용어는?', ['GUI', 'CLI', 'HUD', 'SI'], 'CLI'),
new Question('css 속성 중 글자의 굵기를 변경하는 속성은?', ['font-size', 'font-style', 'font-weight', 'font-variant'], 'font-weight')
];
// 퀴즈 객체 생성
let quiz = new Quiz(questions);
// 문제 출력 함수
// 문제를 계속 변경할 수 있어야 한다.
function update_quiz(){
let question = document.getElementById('question');
let choice = document.querySelectorAll('.btn'); // 배열 형식
let idx = quiz.questionIndex + 1; // 문제의 번호
// 문제 출력
question.innerHTML = '문제' + idx + ' ) ' + quiz.questions[quiz.questionIndex].text;
// 선택항목 출력
for(let i = 0; i < 4; i++) {
choice[i].innerHTML = quiz.questions[quiz.questionIndex].choice[i];
}
progress();
}
// 문제 진행 정보 표시(현재 문제 번호/총 문제수)
function progress(){
let progress = document.getElementById('progress');
progress.innerHTML = '문제 ' + (quiz.questionIndex + 1) + ' / ' + quiz.questions.length;
}
// 결과 표시
function result(){
let quiz_div = document.getElementById('quiz');
let per = parseInt(quiz.score*100) / quiz.questions.length;
let txt = '<h1>결과</h1>' + '<h2 id="score"> 당신의 점수 : ' + quiz.score + '/' +
quiz.questions.length + '<br><br>' + per + '점</h2>';
quiz_div.innerHTML = txt; // 결과 출력
if (per < 60){
txt += '<h2 style = "color:red"> 좀 더 분발하세요 </h2>'
quiz_div.innerHTML = txt;
} else if (per >= 60 && per < 80){
txt += '<h2 style = "color:red"> 무난한 점수입니다. </h2>'
quiz_div.innerHTML = txt;
} else if (per >= 80){
txt += '<h2 style = "color:red"> 훌륭합니다. </h2>'
quiz_div.innerHTML = txt;
}
}
//-----------------------------------------------
let btn = document.querySelectorAll('.btn'); // 배열 형식
// 입력 및 정답 확인 함수
function checkAnswer(i) {
btn[i].addEventListener('click',function(){
let answer = btn[i].innerText;
if(quiz.correctAnswer(answer)) {
alert("정답입니다.");
// 문제를 맞춘 갯수를 세서 *25로 점수를 환산할 예정
quiz.score++;
} else {
alert("오답입니다.");
}
// 다음 문제로 진행 처리
if (quiz.questionIndex < quiz.questions.length-1){
quiz.questionIndex++;
update_quiz();
}else{
result();
}
});
}
// 4개의 버튼 이벤트 처리
for (let i = 0; i < btn.length; i++) {
checkAnswer(i)
}
update_quiz();
자소서를 써야함.. 국비지원 수업을 20%쯤 진행하고 나니 우리학원에선 자소서를 쓰라고 한다.
자소서를 쓰기에 앞서 원하는 기업들을 쭉 살펴봤다.
원래는 어떤 기업을 가고 싶은지 살펴봤는데 어떤 개발을 하고 싶은지를 더 생각해봐야 하는 것 같다!
프론트엔드와 웹퍼블리셔 일이 나와 잘 맞을 거라 생각했는데 데이터분석을 이용한 인공지능쪽도 관심이 많이 간다.. 전에 일하던 곳에서 자폐스펙트럼 아이들을 보며 자폐스펙트럼어린이들의 사고방식이 인공지능이 만들어진 원리와 많이 비슷하다는 것을 느끼고 부터는 인공지능에 관심이 많이 생겼다..
관심분야가 넓다보니 뭘 배우고 파고 들어야 할지 고민이 많이 되는데
강사님의 조언은 그래도 언어는 선택해서 파고, 지금 그걸 고민하기 보단 얇고 넓게 프레임워크나 언어를 많이 접해보라는 것이었다!
강사님이 지금 하는 고민의 80%는 쓸모가 없다고ㅎㅎ 지금은 그냥 무조건 많이 열심히 공부하라고 하신다.
자바는 그냥 어떤 언어든 기본이고, 자바스크립트는 많이 알 수록 좋고 프론트에 관심이 있으면 뷰와 리액트를 더 공부해보라고 하셨다. 또, 수업에서는 자바와 스프링을 기본으로 가지고 가니 그 부분에 집중하면 좋을 거라고도 하셨다. 내가 할 수 있을 것 같은건 프론트인데 뭔가 이 분야에서 계속 오래 일한다면 파고 싶은건 인공지능 쪽인것 같다. 개발자 진로에 대해 대화를 하다보면 여실히 느껴진다. 할 수 있을 것 같은거에 집중하기 보단 하고 싶은 것에 집중하기 위해 지금은 기초를 다져야 할 때다.
정보처리산업기사는 일단 필기만 보고, 데이터 분석과 관련된 자격증을 좀 알아봐야겠다.
조급함을 가지지 말고 서서히 분야를 넓혀나가야겠다.
그래서 정리해보면 자바는 기본 중에 기본 그냥 한국사람의 한국어 느낌인거고 기업에서는 프레임워크를 다룰 줄 아는지를 중요하게 생각하므로 자바 스프링부트, 자바스크립트의 리액트, 제이쿼리 등을 추가로 공부할 것
그리고 관심분야로 확장을 위해 파이선을 배우고 데이터분석 자격증을 따 볼 것.
이 틀로 공부를 하다 뭔가 궁금하고 해보고 싶은 게 생기면 최대한 해 볼 것!
그리고 요즘 회사들은 자바스크립트를 타입스크립트로 바꾸는 일을 많이 하는 것 같다.
그리니 타입스크립트도 관심가지고 배워둘것. 이건 너무 부담가지지말고 자바를 좀 열심히 하다보면 금방 배울 수 있다고 하니 자바와 자바스크립트를 열심히 해야겠다.
