자바스크립트
자바스크립트 변수, 이렇게 사용하세요.
1. 전역 변수는 최소한으로 사용
2. var 변수는 함수의 시작 부분에서 선언
3. for 문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않는다. ( let 사용 )
4. ES6를 사용한다면 예약어 var보다 let를 사용하는 것이 좋다.
재사용할 수 있는 함수 만들기
함수를 선언할 때 부터 외부에서 값을 받ㅇ ㅏ줄 변수를 미리 만드는게 매개변수라고 하고 함수를 호출할 때
괄호 안에 매개변수의 이름을 넣는다.
매개변수는 선언된 함수 안에서만 사용, 여러 개 사용할 때는 매개변수 이름 사이에 쉼표( , )를 찍어 나열
매개변수 기본값 지정하기
함수에서 매개변수 b와 c의 변숫값을 넘겨받지 못했을 때 기본값을 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function multiple(a, b = 5, c = 10){
return a * b + c;
}
console.log(multiple(5, 10));
console.log(multiple(5, 10, 20));
console.log(multiple(10, 20));
console.log(multiple(30));
</script>
</body>
</html>
함수 표현식
함수 이름을 지정하지 않고 사용하거나, 함수를 호출하지 않고 바로 실행하는 방법도 있다.
익명함수
<!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 sum = function(a, b){
return a+b;
}
document.write(`함수 결과 ${sum(10, 20)}`);
</script>
</body>
</html>
즉시 실행 함수
한 번만 실행하는 함수라면 함수를 정의하면서 동시 실행할 수 있는게 즉시 실행 함수
<!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>
( function() {
var userName = prompt("이름을 입력하세요.");
document.write("안녕하세요? <span class = >" + userName + "</span>님!");
}())
</script>
</body>
</html>
매개변수가 있는 즉시 실행 함수 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
(function(a, b){
sum = a+b;
}(100, 200));
document.write(`<h1>결과 ${sum}</h1>`)
</script>
</body>
</html>
화살표 함수
해당 함수로 함수선언을 좀 더 간단하게 작성할 수있다.
<!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>
// 매개변수가 없는 함수
// const hi = function(){
// return "안녕하세요";
// }
// 매개변수가 없는 화살표 함수
// const hi = () => {
// return "안녕하세요";
// }
//매개변수가 없는 화살표 함수 (중괄호 생략)
// const hi = () => "안녕하세요";
// 매개변수가 1개인 함수
// let hi = function(user){
// document.write(`${user} + 님, 안녕하세요?`)
// }
// 매개변수가 1개인 화살표 함수
//let hi = user => { document.write(`${user} + 님, 안녕하세요?`) }
// 매개변수가 2개인 함수
// let sum = function(a, b){
// return a + b;
// }
// 매개변수가 2개인 화살표 함수
// let sum = (a, b) => a + b;
</script>
</body>
</html>
iframe ( inline frame의 약자)
효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로
iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다.
<!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>
<iframe src="https://hrd.go.kr" width="800" height="300"></iframe>
</body>
</html>
버튼을 클릭하면 배경색 바꾸기
a 태그를 빼면 글씨 누르지않고 버튼 전체 눌렀을때 변경 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/function.css">
</head>
<body>
<ul>
<li onclick="changeBg('Green')">Green</li>
<li><a href="#" onclick="changeBg('Orange')">Orange</a></li>
<li><a href="#" onclick="changeBg('Purple')">Purple</a></li>
</ul>
<div id="result"></div>
<script>
function changeBg(color){
let result = document.querySelector('#result');
result.style.backgroundColor = color;
}
</script>
</body>
</html>
Ajax 기본 틀
<!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 deptno = document.querySelector("#deptno");
console.log(deptno.options[deptno.selectedIndex].value);
let xhr = new XMLHttpRequest();
let btn = document.querySelector("#btn");
// 오류체크 할 필요가 없다면 onload로 사용
xhr.onload = () => {
// xhr.onreadystatechange = function(){
if(xhr.status === 200){
console.log("성공");
}else{
console.log("실패");
}
}
// true 비동기 방식 / false 동기
xhr.open('get', 'iframe.html', true);
xhr.send();
</script>
</body>
</html>
type 종류 테스트 (JSP )
form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="result.jsp">
<input type="text" name="item"/><br>
<input type="submit"/>
<input type="reset" />
</form>
</body>
</html>
result.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String str = request.getParameter("item");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%=str %>
</body>
</html>
오라클
퀴즈 1 ( 부서 번호, 평균 급여, 최고 급여, 최저 급여, 사원 수 출력 ) 평균 급여는 소수점을 제외
select deptno, TRUNC(avg(sal)), max(sal), min(sal), COUNT(*)
from emp
group by deptno
퀴즈 2 ( 같은 직책에 종사하는 사원이 3명 이상인 직책과 인원수 출력 )
select job, count(*)
from emp
group by job
having COUNT(*) >= 3
퀴즈 3 ( 사원들의 입사연도를 기준으로 부서별로 몇 명이 입사했는지 출력 ) 입사년도 내림차순
select to_char(hiredate, 'YYYY'), deptno, COUNT(*)
from emp
group by to_char(hiredate, 'YYYY'), deptno
order by to_char(hiredate, 'YYYY') DESC, deptno
퀴즈 4 ( 추가 수당을 받는 사원 수와 받지 않는 사원 수를 출력 )
select nvl2(comm, 'O', 'X') EXIST_COMM, count(*) CNT
from emp
GROUP BY nvl2(comm, 'O', 'X')
조인
조인은 두 개 이상의 테이블을 연결하여 하나의 테이블처럼 출력할 때 사용하는 방식
보통 inner join 많이 사용
SELECT절의 여러 열을 구분할 때와 마찬가지로 FROM절에 여러 테이블을 명시할 때 쉼표(,)를
구분자로 사용
각 집합을 이루는 모든 원소의 순서쌍을 데카르트 곱(카테시안 곱)이라고 하고
조인 이름으로는 크로스 조인 또는 교차 조인이라고 한다.
FROM절에 여러 테이블 선언하기
select *
from emp, dept
order by empno EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO DEPTNO DNAME LOC
---------- ---------- --------- ---------- ---------- ---------- ---------- ---------- ---------- -------------- -------------
7369 SMITH CLERK 7902 1980/12/17 800 20 10 ACCOUNTING NEW YORK
7369 SMITH CLERK 7902 1980/12/17 800 20 30 SALES CHICAGO
7369 SMITH CLERK 7902 1980/12/17 800 20 20 RESEARCH DALLAS
7369 SMITH CLERK 7902 1980/12/17 800 20 40 OPERATIONS BOSTON
7499 ALLEN SALESMAN 7698 1981/02/20 1600 300 30 20 RESEARCH DALLAS
7499 ALLEN SALESMAN 7698 1981/02/20 1600 300 30 30 SALES CHICAGO
7499 ALLEN SALESMAN 7698 1981/02/20 1600 300 30 40 OPERATIONS BOSTON
7499 ALLEN SALESMAN 7698 1981/02/20 1600 300 30 10 ACCOUNTING NEW YORK
7521 WARD SALESMAN 7698 1981/02/22 1250 500 30 10 ACCOUNTING NEW YORK
7521 WARD SALESMAN 7698 1981/02/22 1250 500 30 40 OPERATIONS BOSTON
7521 WARD SALESMAN 7698 1981/02/22 1250 500 30 20 RESEARCH DALLAS
EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO DEPTNO DNAME LOC
---------- ---------- --------- ---------- ---------- ---------- ---------- ---------- ---------- -------------- -------------
7521 WARD SALESMAN 7698 1981/02/22 1250 500 30 30 SALES CHICAGO
7566 JONES MANAGER 7839 1981/04/02 2975 20 10 ACCOUNTING NEW YORK
7566 JONES MANAGER 7839 1981/04/02 2975 20 40 OPERATIONS BOSTON
7566 JONES MANAGER 7839 1981/04/02 2975 20 30 SALES CHICAGO
7566 JONES MANAGER 7839 1981/04/02 2975 20 20 RESEARCH DALLAS
7654 MARTIN SALESMAN 7698 1981/09/28 1250 1400 30 30 SALES CHICAGO
7654 MARTIN SALESMAN 7698 1981/09/28 1250 1400 30 20 RESEARCH DALLAS
7654 MARTIN SALESMAN 7698 1981/09/28 1250 1400 30 10 ACCOUNTING NEW YORK
7654 MARTIN SALESMAN 7698 1981/09/28 1250 1400 30 40 OPERATIONS BOSTON
7698 BLAKE MANAGER 7839 1981/05/01 2850 30 40 OPERATIONS BOSTON
7698 BLAKE MANAGER 7839 1981/05/01 2850 30 10 ACCOUNTING NEW YORK
EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO DEPTNO DNAME LOC
---------- ---------- --------- ---------- ---------- ---------- ---------- ---------- ---------- -------------- -------------
7698 BLAKE MANAGER 7839 1981/05/01 2850 30 20 RESEARCH DALLAS
7698 BLAKE MANAGER 7839 1981/05/01 2850 30 30 SALES CHICAGO
7782 CLARK MANAGER 7839 1981/06/09 2450 10 10 ACCOUNTING NEW YORK
7782 CLARK MANAGER 7839 1981/06/09 2450 10 30 SALES CHICAGO
7782 CLARK MANAGER 7839 1981/06/09 2450 10 40 OPERATIONS BOSTON
7782 CLARK MANAGER 7839 1981/06/09 2450 10 20 RESEARCH DALLAS
7788 SCOTT ANALYST 7566 1987/07/13 3000 20 20 RESEARCH DALLAS
7788 SCOTT ANALYST 7566 1987/07/13 3000 20 40 OPERATIONS BOSTON
7788 SCOTT ANALYST 7566 1987/07/13 3000 20 10 ACCOUNTING NEW YORK
7788 SCOTT ANALYST 7566 1987/07/13 3000 20 30 SALES CHICAGO
7839 KING PRESIDENT 1981/11/17 5000 10 20 RESEARCH DALLAS
EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO DEPTNO DNAME LOC
---------- ---------- --------- ---------- ---------- ---------- ---------- ---------- ---------- -------------- -------------
7839 KING PRESIDENT 1981/11/17 5000 10 40 OPERATIONS BOSTON
7839 KING PRESIDENT 1981/11/17 5000 10 10 ACCOUNTING NEW YORK
7839 KING PRESIDENT 1981/11/17 5000 10 30 SALES CHICAGO
7844 TURNER SALESMAN 7698 1981/09/08 1500 0 30 20 RESEARCH DALLAS
7844 TURNER SALESMAN 7698 1981/09/08 1500 0 30 10 ACCOUNTING NEW YORK
7844 TURNER SALESMAN 7698 1981/09/08 1500 0 30 30 SALES CHICAGO
7844 TURNER SALESMAN 7698 1981/09/08 1500 0 30 40 OPERATIONS BOSTON
7876 ADAMS CLERK 7788 1987/07/13 1100 20 20 RESEARCH DALLAS
7876 ADAMS CLERK 7788 1987/07/13 1100 20 30 SALES CHICAGO
7876 ADAMS CLERK 7788 1987/07/13 1100 20 40 OPERATIONS BOSTON
7876 ADAMS CLERK 7788 1987/07/13 1100 20 10 ACCOUNTING NEW YORK
EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO DEPTNO DNAME LOC
---------- ---------- --------- ---------- ---------- ---------- ---------- ---------- ---------- -------------- -------------
7900 JAMES CLERK 7698 1981/12/03 950 30 30 SALES CHICAGO
7900 JAMES CLERK 7698 1981/12/03 950 30 20 RESEARCH DALLAS
7900 JAMES CLERK 7698 1981/12/03 950 30 10 ACCOUNTING NEW YORK
7900 JAMES CLERK 7698 1981/12/03 950 30 40 OPERATIONS BOSTON
7902 FORD ANALYST 7566 1981/12/03 3000 20 30 SALES CHICAGO
7902 FORD ANALYST 7566 1981/12/03 3000 20 20 RESEARCH DALLAS
7902 FORD ANALYST 7566 1981/12/03 3000 20 10 ACCOUNTING NEW YORK
7902 FORD ANALYST 7566 1981/12/03 3000 20 40 OPERATIONS BOSTON
7934 MILLER CLERK 7782 1982/01/23 1300 10 30 SALES CHICAGO
7934 MILLER CLERK 7782 1982/01/23 1300 10 20 RESEARCH DALLAS
7934 MILLER CLERK 7782 1982/01/23 1300 10 10 ACCOUNTING NEW YORK
EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO DEPTNO DNAME LOC
---------- ---------- --------- ---------- ---------- ---------- ---------- ---------- ---------- -------------- -------------
7934 MILLER CLERK 7782 1982/01/23 1300 10 40 OPERATIONS BOSTON
56개 행이 선택되었습니다.이렇게 출력하면 생각보다 많은 양의 데이터가 출려된다. 이는 FROM절에 명시한 각 테이블을 구성하는 행이 모든 경우의
수로 조합되어 출력되기 때문이다.
위에 2개의 테이블 구조를 보면 EMP테이블에 14개 행 DEPT 테이블에 4개 행이 가로로 조합되어 출력된다는 뜻이다.
즉 조인한 결과 값의 행 수는 14에 4를 곱한 56개가 된다.
따라서 서로 다른 테이블인 EMP 테이블과 DEPT 테이블에 같은 이름의 DEPTNO 열을 구별하는 방법이 필요하다.
이때 사용하는 것이 열 앞에 테이블 이름을 명시하여 특정 열이 어느 테이블에 속한 열인지 구별하는 방식이다.
테이블 이름.열이름
열 이름을 비교하는 조건식으로 조인하기
select *
from emp, dept
where emp.deptno = dept.deptno
order by empno
해당 방식이 현업에서도 가장 많이 다루게 될 대표적인 조인 방식
테이블의 별칭 설정
FROM절에 지정한 테이블에는 SELECT절의 열에 사용한 것처럼 별칭을 지정할 수 있다.
테이블에 별칭을 지정할 때는 명시한 테이블 이름에서 한 칸 띄운 후에 지정한다.
FROM 테이블이름1 별칭1, 테이블이름2 별칭2.....지정한 별칭은 테이블의 열을 지칭하는 데 사용할 수 있다.
밑에 실습은 EMP 테이블과 DEPT 테이블의 별칭을 각각 E, D로 지정한 결과다.
테이블 이름을 별칭으로 표현
select E.ename, E.deptno, D.dname, D.loc
from emp E, dept D
where E.deptno = D.deptno
order by empno
조인 종류
조인은 대상 데이터를 어떻게 연결하느냐에 따라 등가 조인, 비등가 조인, 자체 조인, 외부 조인 등으로 구분
데이터 중복
데이터 중복 해결법
등가 조인
등가 조인은 내부 조인(inner join) 또는 단순 조인으로 부른다. 등가 조인은 일반적으로 가장 많이 사용되는 조인 방식
'프로젝트 기반 자바(JAVA) 응용 SW개발자 취업과정' 카테고리의 다른 글
| 2023-07-11 38일차 (1) | 2023.07.11 |
|---|---|
| 2023-07-10 37일차 (0) | 2023.07.10 |
| 2023-07-06 35일차 (0) | 2023.07.06 |
| 2023-07-05 34일차 (0) | 2023.07.05 |
| 2023-07-04 33일차 (0) | 2023.07.04 |
