Q1 급여(SAL)가 2000 초과인 사원들의 부서 정보, 사원 정보를 출력 ( 테이블 2개 )
select e.deptno, d.dname, e.empno, e.ename, e.sal
from emp e join dept d on(e.deptno = d.deptno)
where e.sal > 2000
order by e.deptno
Q2 각 부서별 평균 급여, 최대 급여, 최소 급여, 사원수 출력 ( 테이블 2개 )
SQL-99 이전 방식
select e.deptno, d.deptno, trunc(avg(sal)), max(sal), min(sal), count(*)
from emp e, dept d
where e.deptno = d.deptno
group by e.deptno, d.deptno
SQL - 99 방식
select e.deptno, d.dname, trunc(avg(sal)), max(sal), min(sal), count(*)
from emp e join dept d on (e.deptno = d.deptno)
group by e.deptno, d.dname
Q3 모든 부서 정보, 사원 정보를 부서 번호, 사원 이름순으로 정렬해서 출력 ( 테이블 2개 )
SQL-99 이전 방식
select d.deptno, d.dname, e.empno, e.ename, e.job, e.sal
from emp e, dept d
where e.deptno(+) = d.deptno
order by d.deptno
SQL-99 방식
select d.deptno, d.dname, e.empno, e.ename, e.job, e.sal
from emp e right join dept d on(e.deptno = d.deptno)
order by d.deptno
Q3 모든 부서 정보, 사원 정보, 급여 등급 정보, 각 사원의 직속 상관의 정보를 부서번호 사원번호 순서로 정렬
( 테이블 4개 )
SQL-99 이전 방식
select d.deptno, d.dname, e1.empno, e1.ename, e1.mgr, e1.sal, e2.deptno,
s.losal, s.hisal, s.grade, e2.empno, e2.ename
from emp e1, emp e2, dept d, salgrade s
where e1.deptno(+) = d.deptno
and e1.sal between s.losal(+) and s.hisal(+)
and e1.mgr = e2.empno(+)
order by e1.deptno
SQL-99 방식
select d.deptno, d.dname, e1.empno, e1.ename, e1.mgr, e1.sal, e2.deptno,
s.losal, s.hisal, s.grade, e2.empno, e2.ename
from emp e1 right join dept d on (e1.deptno = d.deptno)
left join salgrade s on (e1.sal between s.losal and s.hisal)
left join emp e2 on (e1.mgr = e2.empno)
order by e1.deptno
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 이벤트</title>
<link rel="stylesheet" href="css/function.css">
</head>
<body>
<button id="change">글자색 바꾸기</button>
<p>Reprehenderit tempor do quis sunt eu et exercitation deserunt. Laboris adipisicing est sint aliquip nulla pariatur velit irure elit qui id. Dolore aliquip dolore eu ut irure sint Lorem reprehenderit velit. Duis veniam irure cillum anim excepteur culpa pariatur sunt esse. Eu nulla commodo velit ex id dolore incididunt mollit incididunt nisi labore culpa qui ea. Commodo veniam veniam in ipsum ad minim occaecat qui pariatur adipisicing laborum quis.</p>
<script>
// 방법 1 : 웹 요소를 변수로 지정 & 미리 만든 함수 사용
// var changeBttn = document.querySelector("#change");
// changeBttn.onclick = changeColor;
// function changeColor() {
// document.querySelector("p").style.color = "#f00";
// }
// 방법 2 : 웹 요소를 따로 변수로 만들지 않고 사용
// document.querySelector("#change").onclick = changeColor;
// function changeColor() {
// document.querySelector("p").style.color = "#f00";
// }
// 방법 3 : 직접 함수를 선언
document.querySelector("#change").onclick = function() {
document.querySelector("p").style.color = "#f00";
};
</script>
</body>
</html>
버튼을 클릭해서 상세 설명 표시하거나 닫기 ( DOM 이벤트 처리기 연결 )
HTML + JavaScript
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 이벤트</title>
<link rel="stylesheet" href="css/event.css">
</head>
<body>
<div id="item">
<img src="images/flower.jpg" alt="">
<button class="over" id="open" >상세 설명 보기</button>
<div id="desc" class="detail">
<h4>등심붓꽃</h4>
<p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다. 길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고 있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다. </p>
<button id="close">상세 설명 닫기</button>
</div>
</div>
<script>
document.querySelector('#open').onclick = function(){
document.querySelector('#desc').style.display = "block"; // 상세 설명 부분을 화면에 표시
document.querySelector('#open').style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤
}
document.querySelector('#close').onclick = function(){
document.querySelector('#desc').style.display = "none"; // 상세 설명 부분을 화면에서 감춤
document.querySelector('#open').style.display = "block"; // '상세 설명 보기' 단추를 화면에 표시
}
</script>
</body>
</html>
Quiz - 1 ( 사용자한태 입력받아서 두 수의 값이 같으면 곱하기, 두 수의 값이 다르면 더하기 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let x = parseInt(prompt("x값"));
let y = parseInt(prompt("x값"));
function subMulti(x, y){
if(x === y){
return x * y
}else{
return x + y
}
} console.log(subMulti(x,y));
</script>
</body>
</html>
Quiz - 2 ( 사용자한태 입력받아서 두 수의 값을 비교 후 알럿 띄우기 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num1 = parseInt(prompt("비교할 첫 번째 숫자"));
let num2 = parseInt(prompt("비교할 두 번째 숫자"));
function subMulti(num1, num2){
if(num1 === num2){
alert("두 수가 같습니다.");
}else if(num1 > num2){
alert(`${num1}가 ${num2}보다 큽니다.`);
}else if(num1 < num2){
alert(`${num2}가 ${num1}보다 큽니다.`);
}
}subMulti(num1, num2);
</script>
</body>
</html>
객체 알아보기
문서 객체 모델(DOM)
웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드등도 모두 객체이다.
일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있다.
브라우저 관련 객체
웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다.
사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등이 있다.
내장 객체
웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 함
예를 들어 날짜, 시간과 관련된 프로그램을 개발하려면 Date 객체를 가져와 쉽게 사용 가능하다.
Date 객체의 인스턴스 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let now = new Date(); // Date 인스턴스 만들고 변수에 저장하기
document.write("현재 시각은" + now)
</script>
</body>
</html>
로컬 형식으로 현재 시각 표시하기 ( toLocaleString() )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let now = new Date(); // Date 인스턴스 만들고 변수에 저장하기
document.write("현재 시각은" + now.toLocaleDateString());
</script>
</body>
</html>
자바 스크립트의 내장 객체 ( Array 객체 )
Array 객체로 배열 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 초기값이 없는 경우
let numbers = new Array();
let numbers2 = new Array(4);
// 초기값이 있는 경우
let numbers3 = ["one", "two", "three"];// 배열 선언
let numbers4 = Array("one", "two", "three"); // Array 객체를 사용한 배열 선언
</script>
</body>
</html>
