Lazy Loading
편의상 <script>를 아래에 적는 것
이렇게 하면 html이 먼저 실행된다. 화면은 먼저 보이지만 기능은 나중에 구성됨.
48.chard.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 실습</title>
<!-- 구글 웹 폰트를 사용을 위한 CDN -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<!-- 내가 만든 CSS 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- jquery cdn -->
<!-- Javascript 작성 공간 -->
<script>
$(function(){
//canvas 제어 방식
//- canvas는 Javascript API로 제어한다.
//- canvas의 그림 그리는 도구를 context 또는 graphics 라고 부름
var canvas = document.querySelector(".sketch"); //도화지를 가져옴
var context = canvas.getContext("2d");
context.fillStyle = "rgb(200, 0, 0)";
context.fillRect(10, 10, 50, 50);
context.fillStyle = "rgb(0, 200, 0)";
context.fillRect(30, 30, 50, 50);
});
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>캔버스 태그</h1>
</div>
<div class="row">
<canvas class="sketch" width="100%" height="200"></canvas>
</div>
</div>
</body>
</html>
48.chart.html
<div>
<canvas id="myChart"></canvas>
</div>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['일반회원', 'VIP', '관리자'],
datasets: [{
label: '인원수',
data: [153, 203, 72],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
--그룹(group by)
-- 특정 항목을 기준으로 하여 무언가를 집계할 경우 사용
-- 집계 함수를 사용한다. (count, sum, avg, min, max)
SELECT member_level, count(*) cnt
FROM MEMBER GROUP BY MEMBER_level;
그룹 실습
-- 포켓몬스터 속성별 마리수 출력(많은 것부터)
SELECT TYPE, count(*) cnt
FROM POCKETMON GROUP BY TYPE ORDER BY cnt desc;
별칭 통일
--그룹(group by)
-- 특정 항목을 기준으로 하여 무언가를 집계할 경우 사용
-- 집계 함수를 사용한다. (count, sum, avg, min, max)
-- 그룹 조건 추가 가능
SELECT member_level name, count(*) cnt
FROM MEMBER GROUP BY MEMBER_level;
-- 포켓몬스터 속성별 마리수 출력(많은 것부터)
SELECT TYPE name, count(*) cnt
FROM POCKETMON GROUP BY TYPE ORDER BY cnt desc;
-- 포켓몬스터 속성별 마리수 출력(150마리 이상인 그룹만)
SELECT
TYPE name, count(*) cnt
FROM POCKETMON GROUP BY TYPE HAVING count(*) >=150
ORDER BY cnt desc;
실행 순서
2번을 해석할 때는 3번이 생성되지 않았기 때문에 별칭을 쓰지 못 하는 것
