본문 바로가기
KOSA FullStack 교육/front

KOSA fullstack 교육(Javascript Basic, Chart JS)

로미로미로 2025. 6. 13. 11:15
    Basic JS
    1. DataType
<!-- 
자바스크립트는 화면을 변경하는 이벤트 처리를 담당하는 기술 

자바스크립트에서 사용되는 데이터타입
총 6개의 데이터 타입이 있다.

number
string
boolean
function---함수형
object ----객체형
undefined
 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1. 변수 선언
var variable; /* 변수 선언(값의 타입이 없다.) */

var stringvar = "stringvar"; /* 값을 넣고 나서 나중에 변수 type이 결정된다. */
var numbervar = 254;
var booleanvar = true;
var functionvar = function(){}; /* 함수명이 없음 -> 익명함수 이건 이름이 없기 때문에 변수로 할당해서 사용함.*/
var objectvar= {};/* javascrip에 나오는 객체는 여러개가 있는데 가장많이 쓰는건 jason이다. */

//2. 변수 안에 들어있는 값을 출력 
/* alert(variable);
alert(stringvar);
alert(numbervar);
alert(booleanvar);
alert(functionvar);
alert(objectvar); */

//3. 변수타입 알아보기 
alert(typeof variable);
alert(typeof stringvar);
alert(typeof numbervar);
alert(typeof booleanvar);
alert(typeof functionvar);
alert(typeof objectvar); 
</script>
</head>
<body>

</body>
</html>

 

2. function 함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function func(){
	alert("func A ....");
}
//오버라이딩 가능
function func(){
	alert("func B ....");
}

//익명함수 정의
func();
var func = function() {
	alert("func C...");
}

var func = function() {
	alert("func D...");
}
func();

</script>
</body>
</html>

 

 

익명 함수는 메모리에 먼저 올려야 사용할 수 있는 함수이다.

즉, 함수를 선언한 이후에 호출해야 하며, 일반적으로 변수에 할당하여 사용하는 방식이다. 

 

반면 선언적 함수(선언식 함수)는 호이스팅(hoisting) 덕분에,

코드의 순서와 상관없이 먼저 메모리에 등록되기 때문에 함수를 선언하기 전에 호출해도 정상적으로 실행된다.

 

함수는 오버라이딩이 가능하다.

 

3. arrowFunction

	<script type="text/javascript">
		var func =()=> {
			alert("익명함수 호출");
		}
	</script>

es6문법인 arrow함수이다. 의미는 달라지지 않는다. 

 

	<script type="text/javascript">
		var func =()=> {
			alert("익명함수 호출");
		}
		
		function func(){
			alert("선언적 함수 호출...");
		}
		
		func();
	</script>

실행하면 익명함수가 호출된다. 

순서가 '선언적 함수 -> 익명함수 -> 호출' 인 것을 확인할 수 있다.

 

4. variable

<script>
var name = "쿠로미";
stuName = "마이메로";

console.log(name);
console.log(stuName);

showInfo();
</script>

var을 하지 않아도 출력이 된다. 

 

 

<script>
var name = "쿠로미";
stuName = "마이메로";

console.log(name);
console.log(stuName);

showInfo();

function showInfo(){
	var address = "혜화동";
	myAddr = "사당동";
	/* console.log("이름: "+name+", 주소: "+address);
	console.log("이름: "+stuName+", 주소: "+myAddr); */
}
console.log("이름: "+name+", 주소: "+address);
console.log("이름: "+stuName+", 주소: "+myAddr);
</script>

 

error가 난다. 왜냐하면 var address는 지역변수이기 때문이다. 

하지만 

//console.log("이름: "+name+", 주소: "+address);
console.log("이름: "+stuName+", 주소: "+myAddr);

다음과 같이 호출하면 잘 출력이 된다. 두 변수가 전역변수이기 때문이다. 

 

즉, JavaScript에서는 변수의 선언 방식과 위치에 따라 지역변수와 전역변수가 나뉘지만,

코드 구조에 따라 이 구분이 모호하게 느껴질 수 있다.

특히 var는 함수 스코프만 가지기 때문에, 다른 언어에 비해 지역성과 전역성의 경계가 더 흐릿하게 느껴질 수 있다.

 

 

const, let을 구분해서 쓴다면? 

<script>
const name = "쿠로미";
const stuName = "마이메로";

console.log(name);
console.log(stuName);

showInfo();

function showInfo(){
	let address = "혜화동";
	let myAddr = "사당동";
	/* console.log("이름: "+name+", 주소: "+address);
	console.log("이름: "+stuName+", 주소: "+myAddr); */
}
/* console.log("이름: "+name+", 주소: "+address); */
console.log("이름: "+stuName+", 주소: "+myAddr);
</script>

 

 

myAddr은 지역변수이기 때문에 에러 나는것을 볼 수 있다. 

 

5. onload

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>복합연산자</title>
<script>
var list = '';
list += '<ul>'; 
list += '<li>아메리카노</li>'; 
list += '<li>카페라떼</li>'; 
list += '<li>자바칩프라푸치노</li>'; 
list += '<li>말차라떼</li>'; 
list += '</ul>'; 
//2. html wrap 부분에 부착
// wrap부분을 Document에서찾아서 해당 부분에 부착
document.getElementById("wrap").innerHTML = list;

</script>
</head>
<body>
<h2 align="center">=========onload==========</h2>
<div id = "wrap">

</div>
</body>
</html>

실행이 되지 않는다. 이유는?

스크립트가 DOM이 완전히 생성되기 전에 실행되었기 때문

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>복합연산자</title>
</head>
<body>
<h2 align="center">=========onload==========</h2>
<div id = "wrap">

</div>
</body>
</html>

<script>
var list = '';
list += '<ul>'; 
list += '<li>아메리카노</li>'; 
list += '<li>카페라떼</li>'; 
list += '<li>자바칩프라푸치노</li>'; 
list += '<li>말차라떼</li>'; 
list += '</ul>'; 
//2. html wrap 부분에 부착
// wrap부분을 Document에서찾아서 해당 부분에 부착
document.getElementById("wrap").innerHTML = list;

</script>

 

이렇게 하면 실행이 되는 것을 볼 수 있다. 

 

window의 onload 함수 사용 버전

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>복합연산자</title>
<script>
window.onload=()=>{
	var list = '';
	list += '<ul>'; 
	list += '<li>아메리카노</li>'; 
	list += '<li>카페라떼</li>'; 
	list += '<li>자바칩프라푸치노</li>'; 
	list += '<li>말차라떼</li>'; 
	list += '</ul>'; 
	//2. html wrap 부분에 부착
	// wrap부분을 Document에서찾아서 해당 부분에 부착
	document.getElementById("wrap").innerHTML = list;
}
</script>
</head>
<body>
<h2 align="center">=========onload==========</h2>
<div id = "wrap">

</div>
</body>
</html>

 

브라우저 메모리에 html document가 다 로드될때까지 이 부분이 작동하지 않는다. 

 

//document.getElementById("wrap").innerHTML = list;
document.querySelector("#wrap").innerHTML = list;

다음과같이 두 메서드가 동일하게 작동하는 것을 볼 수 있다. 

전문가들은 둘 다 쓰기 때문에 둘 다 알고 있어야 한다. 

https://letsplaycoding.tistory.com/31

 

jQuery 최신 CDN 주소 모음/ 공식홈페이지, 구글, MS, cloudflare

CDN이란? cdn이란 콘텐츠 전송 네트워크의 약자로 데이터 사용량이 많은 페이지 웹페이지의 로드 속도를 높이기 위해 연결된 서버 네트워크이다. 사용자가 웹 사이트를 방문하면 데이터를 주고

letsplaycoding.tistory.com

위의 블로그를 참고하여 jQeury CDN google 버전을 사용하였다. 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>복합연산자</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	var list = '';
	list += '<ul>'; 
	list += '<li>아메리카노</li>'; 
	list += '<li>카페라떼</li>'; 
	list += '<li>자바칩프라푸치노</li>'; 
	list += '<li>말차라떼</li>'; 
	list += '</ul>'; 
	//2. html wrap 부분에 부착
	// wrap부분을 Document에서찾아서 해당 부분에 부착
	//document.getElementById("wrap").innerHTML = list;
	document.querySelector("#wrap").innerHTML = list; 
});
</script>
</head>
<body>
<h2 align="center">=========onload==========</h2>
<div id = "wrap">

</div>
</body>
</html>

 

 

6. querySelector

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function showBtn(){
	document.querySelector(".alert-box").style.display='block';
}
function hiddenBtn(){
	document.querySelector(".alert-box").style.display='none';
}
</script>
</head>
<body>
<h2>display 속성 잘 이용하기</h2>
<div id="alert" class="alert-box">Alert Button</div>
<br>
<button onclick="showBtn()">열기</button>
<button onclick="hiddenBtn()">닫기</button>
</body>
</html>

닫기를 누르면 내용물이 없어지고, 열기를 누르면 내용물이 다시 생긴다. 

 

코드를 조금 간단하게 인자값을 넣어서 줄여보면, 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function showBtn(command){
	document.querySelector(".alert-box").style.display=command;
}
</script>
</head>
<body>
<h2>display 속성 잘 이용하기</h2>
<div id="alert" class="alert-box">Alert Button</div>
<br>
<button onclick="showBtn('block')">열기</button>
<button onclick="showBtn('none')">닫기</button>
</body>
</html>

 

이렇게 쓴다. 

 

혹은 setAttribute(속성의 이름, 속성의 값); 함수도 많이 쓴다. 

<script type="text/javascript">
function showBtn(command){
	document.querySelector(".alert-box").setAttribute('style','display:'+command);
}
</script>

 

예제

<!--

1. 버튼을 클릭하면 span영역이 보이도록 작성

2. 아이디가 today인 영역의 내용을 Hello Everyone으로 변경

3. id 가 edu인 영역의 내용을 ChartJS 수업으로 변경, 글자색은 Blue

-->

<script type="text/javascript">
const push =()=> {
	document.querySelector(".edit").setAttribute('style','display: block');
	document.getElementById("today").innerHTML = "Hello EveryOne!!";
	document.getElementById("today").style.color = "blue";
	
	document.getElementById("edu").innerHTML = "ChartJS";
	document.getElementById("edu").style.color = "blue";
}
</script>

 

간단하게 변수에 넣어서 짜보자

<script type="text/javascript">
const push =()=> {
	document.querySelector(".edit").setAttribute('style','display: block');
	let today = document.getElementById("today");
	today.innerHTML = "Hello EveryOne";
	today.style.color = 'blue';
	
	let edu = document.getElementById("edu");
	edu.innerHTML = "ChartJS";
	edu.style.color = 'blue';
}
</script>

 

입력된 값을 받아올때 이렇게 사용한다. 

 

 

실행하면 이렇게 실행된다.

 

 

workshop 문제 풀이

<!DOCTYPE html>
<html>
<head>
<meta charset="euc-kr">
<title>Dynamic Table</title>
 <!-- Link CSS -->
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
 <!-- Main Data Table -->
        <div class="mainTable">
            <h1>Employee Information</h1>
            <table id="table" border="1" id="table">
                
                <tr>
                    <th>Employee Number</th>
                    <th>Employee Name</th>
                    <th>JOB</th>
                    <th>Address</th>
                    <th>Phone Number</th>
                </tr>
                
                <tr>
                    <td>7736</td>
                    <td>Davidson </td>
                    <td>Marketing</td>
                    <td>United State</td>
                    <td>11223344</td>
                </tr>
                
                <tr>
                    <td>7902</td>
                    <td>Vito </td>
                    <td>Education</td>
                    <td>Thailand</td>
                    <td>987654321</td>
                </tr>
                
                <tr>
                    <td>2390</td>
                    <td>Johnson </td>
                    <td>Manager</td>
                    <td>France</td>
                    <td>568925795</td>
                </tr>
                
                <tr>
                    <td>7987</td>
                    <td>Peter  </td>
                    <td>SalesMan</td>
                    <td>Germany</td>
                    <td>437496478</td>
                </tr>
                
                <tr>
                    <td>5320</td>
                    <td>Edward </td>
                    <td>Engineer</td>
                    <td>Argentina</td>
                    <td>764326899</td>
                </tr>
                
                <tr>
                    <td>7777</td>
                    <td>김믿음 </td>
                    <td>Programmer</td>
                    <td>Korea</td>
                    <td>578854268</td>
                </tr>
                
                <tr>
                    <td>1289</td>
                    <td>Smith </td>
                    <td>Marketing</td>
                    <td>Australia</td>
                    <td>357882579</td>
                </tr>               
              
            </table>
        </div>
        
        <!-- Update Button -->
        <div class="updateBtn">
            <button  onclick="editTableDisplay()">Update data</button>
        </div>     
		
		 <!-- Edit table -->
        
</body>
</html>

 

문제

const editTableDisplay 함수

//1. editTable 이 부분을 보이도록 display:block

//2. table 요소를 가져와서 row 수를 alert

 

const editRow 함수 

//2. 하나의 행에 cell을 추가(5개의 cell,column이 추가됨)

//3. 각각의 cell에 입력된 값을 받아와서 테이블을 구성

//4. clear함수 호출

 

clear 함수 

//최종적으로 입력된 값을 clear 시킴

 

 

 

답안

<script type="text/javascript">
const editTableDisplay =()=>{
//1. editTable 이 부분을 보이도록 display:block
document.querySelector(".editTable").setAttribute('style','display: block');
//2. table 요소를 가져와서 row 수를 alert
let table = document.querySelector(".mainTable table");
let count = table.rows.length-1;
alert("행의 개수: " + count);
}
//table 영역.rows.length table영역


const editRow=()=>{
//1. 하나의 행을 table에 추가 
let table = document.querySelector(".mainTable table");
let newRow = table.insertRow();

const newCell1 = newRow.insertCell(0);
const newCell2 = newRow.insertCell(1);
const newCell3 = newRow.insertCell(2);
const newCell4 = newRow.insertCell(3);
const newCell5 = newRow.insertCell(4);

newCell1.innerText = document.getElementById("number").value;
newCell2.innerText = document.getElementById("name").value;
newCell3.innerText = document.getElementById("job").value;
newCell4.innerText = document.getElementById("country").value;
newCell5.innerText = document.getElementById("phone").value;
//2. 하나의 행에 cell을 추가(5개의 cell,column이 추가됨)
//3. 각각의 cell에 입력된 값을 받아와서 테이블을 구성
//4. 최종적으로 입력된 값을 clear 시킴d
clear();
}

function clear(){
	document.getElementById("number").value="";
	document.getElementById("name").value="";
	document.getElementById("job").value="";
	document.getElementById("country").value="";
	document.getElementById("phone").value="";
}
</script>

 

 

Chart JS

https://www.chartjs.org/

 

Chart.js | Chart.js

Chart.js Welcome to Chart.js! Why Chart.js Among many charting libraries (opens new window) for JavaScript application developers, Chart.js is currently the most popular one according to GitHub stars (opens new window) (~60,000) and npm downloads (opens ne

www.chartjs.org

차트를 어떻게 쓰는지가 정말 중요하다. 

 

chartJS는 차트를 만드는 자바스크립트 라이브러리

라이브러리 연결

1) 압축파일을 우리 프로젝트에 저장

2) 라이브러리가 들어있는 사이트 주소를 바로 연결하는 방법 --- CDN

 

CDN 방법으로 사용해보자.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>
<body>
<div>
	<canvas id="myChart"></canvas>
</div>
</body>
</html>
<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

 

차트 생성 기본

외부 스크립트 링크를 달고 

new Chart로 차트를 생성한다. 

bar와 같이 차트 타입을 선택하고

labels 지정한다. 

label에 해당하는 데이터를 기입한다

(라벨 : 데이터 갯수 일치해야함)

 

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar', //bar, line, pie, scatter가 대표적
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], //x축의 범례
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3], //labels의 갯수와 일치, y축의 값 
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

 

 

 

 

line 차트 생성해보자

 

<script>
const ctx = document.querySelector("#line-chart");
new Chart(ctx, {
	type: 'line',
	data:{
		labels: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
		datasets: [{
			label:'월별에 따른 승객 수(백만단위)',
			data:[100,98,80,89,98,100,140,150,90,80,60,111],
		}],
	},

11월 보면 6천만인데도 불구하고 최저이기 때문에 0처럼 보인다. 

이렇게되면 안된다. 이를 위해 y축의 scale를 넓혀줘야 한다. 

linear type은 일정한 간격으로 증가하는 수직축을 의미한다. 

<script>
const ctx = document.querySelector("#line-chart");
new Chart(ctx, {
	type: 'line',
	data:{
		labels: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
		datasets: [{
			label:'월별에 따른 승객 수(백만단위)',
			data:[100,98,80,89,98,100,140,150,90,80,60,111],
		}],
	},
	options:{
		scales:{
			y:{
				type:'linear',
				min: 20,
				max: 210
			}
		}
	}
});
</script>

 

 

세 번째 차트(bar) 실습을 해보자. 우선 아래와 같이 기본 틀을 만든다.

 

안에 데이터를 채운다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

</head>
<body>
	<div class="chart-container">
		<canvas id="bar-chart"></canvas>
	</div>

	<script>
		const ctx = document.getElementById("bar-chart");
		new Chart(ctx, {
			type : 'bar',
			data : {
				labels : [ 'SMITH', 'FORD', 'TURNER', 'KING', 'ADAMS' ],
				datasets : [ {
					label : 'Employee Salary',
					data : [ 800, 2300, 2100, 5000, 3000 ],
				} ]

			}
		})
	</script>
</body>
</html>

 

 

화면 가득 채워지는 것을 볼 수 있다. 

css로 한 번 줄여보자.

 

<style type="text/css">
.chart-container {
	width: 500px;
	height: 500px;
	margin: 0 auto;
    margin-top: 40px;
}
</style>

 

 

배경 색도 입혀보자

이렇게 아래로 늘여지게 된다.

이를 해결하기 위해서 options을 새로 준다. 

maintainAspectRatio : 부모 요소의 width / height에 맞춰서 차트를 꽉 채울 수 있게 해줄지 여부를 설정

	<script>
		const ctx = document.getElementById("bar-chart");
		new Chart(ctx, {
			type : 'bar',
			data : {
				labels : [ 'SMITH', 'FORD', 'TURNER', 'KING', 'ADAMS' ],
				datasets : [ {
					label : 'Employee Salary',
					data : [ 800, 2300, 2100, 5000, 3000 ],
				} ]

			},
			options:{
				maintainAspectRatio:false
			}
		});
	</script>

 

 

그래프 안에 배경색을 넣고, 테두리를 지정해보자

 

	<script>
		const ctx = document.getElementById("bar-chart");
		new Chart(ctx, {
			type : 'bar',
			data : {
				labels : [ 'SMITH', 'FORD', 'TURNER', 'KING', 'ADAMS' ],
				datasets : [ {
					label : 'Employee Salary',
					data : [ 800, 2300, 2100, 5000, 3000 ],
					backgroundColor: 'rgba(255,0,0,0.3)',
					borderColor: 'rgb(200,0,0)',
					borderWidth: 2
				} ]

			},
			options:{
				maintainAspectRatio:false
			}
		});
	</script>

borderWidth를 지정하지 않으면 나오지 않는다.

이번에는 datasets에 data를 추가해보자.

<script>
		const ctx = document.getElementById("bar-chart");
		new Chart(ctx, {
			type : 'bar',
			data : {
				labels : [ 'SMITH', 'FORD', 'TURNER', 'KING', 'ADAMS' ],
				datasets : [ {
					label : 'Employee Salary',
					data : [ 800, 2300, 2100, 5000, 3000 ],
					backgroundColor : 'rgba(255,0,0,0.3)',
					borderColor : 'rgb(200,0,0)',
					borderWidth : 2
				}, {
					label : 'Employee Bonus',
					data : [ 100, 50, 70, 0, 60 ],
					backgroundColor : 'rgba(0,0,255,0.5)',
					borderColor : 'rgb(0,0,200)',
					borderWidth : 2
				} ]

			},
			options : {
				maintainAspectRatio : false
			}
		});
	</script>

 

 

 

 

'KOSA FullStack 교육 > front' 카테고리의 다른 글

KOSA fullstack 교육(JQuery form, LocalStorage)  (2) 2025.06.18
JQuery Template 설정(이클립스 환경)  (0) 2025.06.18
KOSA full stack 교육(JQuery)  (1) 2025.06.17
KOSA fullstack 교육(ChartJS, event)  (2) 2025.06.16

'KOSA FullStack 교육/front' Related Articles

티스토리툴바