SELECT
COUNT(DISTINCT NAME)
FROM
ANIMAL_INS
WHERE
NAME IS NOT NULL;
oracle에서 중복 제거시에는 DISTINCT를 사용한다.
GROUP BY > 고양이와 개는 몇 마리 있을까?
SELECT
ANIMAL_TYPE
, COUNT(*) COUNT
FROM
ANIMAL_INS
GROUP BY
ANIMAL_TYPE
ORDER BY
ANIMAL_TYPE ASC
;
ANIMAL_TYPE 에 대해 COUNT를 해야되기 때문에 GROUP BY ANIMAL_TYPE 를 해준다.
CAT, DOG 순서로 배열해야되기 때문에 ORDER BY ANIMAL_TYPE 을 해준다.
ORDER BY의 기본 설정은 ASC이기 때문에 생략 가능하다.
GROUP BY > 동명 동물 수 찾기
SELECT
NAME, COUNT(*)
FROM
ANIMAL_INS
GROUP BY
NAME
HAVING COUNT(NAME) >= 2
ORDER BY
NAME
;
GROUP BY 의 조건은 HAVING을 사용하여 두 번 이상 쓰인 이름을 검색한다.
GROUP BY > 입양 시각 구하기(1)
SELECT
TO_CHAR(DATETIME, 'HH24'), COUNT(*)
FROM
ANIMAL_OUTS
WHERE
TO_CHAR(DATETIME, 'HH24') BETWEEN 9 AND 20
GROUP BY
TO_CHAR(DATETIME, 'HH24')
ORDER BY
TO_CHAR(DATETIME, 'HH24')
;
09:00 부터 19:59 까지의 시간대 별로 입양 건수를 조회하기 때문에 DATETIME 컬럼의 시간만 확인 가능하도록 TO_CHAR을 사용한다.
문서의 각 요소(element 또는 tag)는 요소 노드(element node), 텍스트 노드(text node)로 변환하여 처리
이 트리 구조를 사용하여 자바 스크립트로 문서를 제어
문서 객체 생성
요소 노드 생성
createElement()
텍스트 노드 생성
createTextNode()
body에 요소 노드 추가
appendChild()
요소 노드 생성 단계
1. 텍스트 노드 생성 → 요소 노드 생성
2. 요소 노드에 텍스트 노드 추가 → body에 요소 노드 추가
노드 생성 예제)
<button onclick="add()">추가</button>
<script>
function add(){
//h3 요소 노드 생성
var header3 = document.createElement('h3');
//텍스트 노드 생성
var textNode = document.createTextNode('추가된 요소');
document.body.appendChild(header3);
header3.appendChild(textNode);
}
</script>
<script>
var gValue1; //전역변수 선언.
gValue2; //전역변수 선언. var 생략
function func(){
var lValue1; //지역변수 선언.
lValue2; //지역변수 선언. var 생략
gValue1 = 5; //전역변수 사용.
var gValue2; //전역과 이름이 같은 지역변수.
gValue2 = 20; //지역변수 사용.
lValue1 = 10; //지역변수 사용.
}
gValue2 = 100; //전역 변수 사용.
lValue2 = 1000; //지역 변수 사용 - error!!!!
</script>
예제)
function getGrede(){
var kor = 95;
return kor;
}
var kor = 100;
document.write("점수 : " + kor + "<br>");
지역변수를 사용하고 난 뒤 결과값을 가지고와서 써야할 경우 return으로 결과값을 사용함.
function getGrade2(){
kor2 = 80;
}
var kor2 = 100;
getGrade2();
document.write("점수 : " + kor2 + "<br>");
전역변수는 함수안에서 함께 사용 가능
function getGrade3(){
var kor3 = 70;
}
getGrade3();
document.write("점수 : " + kor3 + "<br>");
데이터가 들어있지않기때문에 undefined
값을 다른 곳에서 쓰면 return 사용
함수 인자의 처리
function add(){
var sum = 1;
return sum;
}
function add(x){
var sum = x + 1;
return sum;
}
function add(x, y){
var sum = x + y;
return sum;
}
var r0 = add();
var r1 = add(10);
var r2 = add(10, 20);
document.write("r0 : " + r0 + "<br>");
document.write("r1 : " + r1 + "<br>");
document.write("r2 : " + r2 + "<br>");
오버 로딩이 되지 않기 때문에 r0, r1은 NaN의 결과가 나옴
최종 결과값인 r2의 결과만 나옴
function add2(x, y, z){
var sum;
if((x === undefined) && (y === undefined) && (z === undefined)){
sum = 1;
}
else if((y === undefined) && (z === undefined)) {
sum = x + 1;
}
else if(z === undefined){
sum = x + y;
}
else{
sum = x + y + z;
}
return sum;
}
var a2r0 = add2();
var a2r1 = add2(1);
var a2r2 = add2(1, 2);
var a2r3 = add2(1, 2, 3);
document.write("a2r0 : " + a2r0 + "<br>");
document.write("a2r1 : " + a2r1 + "<br>");
document.write("a2r2 : " + a2r2 + "<br>");
document.write("a2r3 : " + a2r3 + "<br>");
최대한 3개까지 받아서 처리할 수 있는 함수
=> 오버로딩 해결 방법. NaN이 뜨지 않는다.
function add3(){
var i, sum = 0;
for(i = 0; i < arguments.length; i++){
sum = sum + arguments[i];
}
return sum;
}
var a3r0 = add3();
var a3r1 = add3(1);
var a3r2 = add3(1, 2);
var a3r3 = add3(1, 2, 3, 4, 5, 6);
document.write("a3r0 : " + a3r0 + "<br>");
document.write("a3r1 : " + a3r1 + "<br>");
document.write("a3r2 : " + a3r2 + "<br>");
document.write("a3r3 : " + a3r3 + "<br>");
arguments : 자동으로 생성되는 파라미터 변수
매개변수의 더 많은 값이 들어가더라도 arguments가 받아서 처리하기 때문에 오류가 나지 않음
undefined와 null의 차이점
undefined
자료형이 정해지지않은 상태
null
자료형이 정해진 상태
배열(array)
여러개의 데이터(원소)를 저장하는 공간
인덱스 : 0번부터 시작.
자바스크립트의 배열은 다른 타입의 데이터도 함께 저장할 수 있음
크기를 지정하지 않음
공백 리터럴도 포함할 수 있음.
배열의 길이 : 배열명.length
var 배열명 = [원소1, 원소2, ...];
var 배열명 = [];
배열명[0] = 원소1;
배열명[1] = 원소2;
예제)
var city = ['Seoul', 'Busan', 'Incheon'];
function printArray(){
var i;
for(i = 0; i < city.length; i++) {
document.write("[" + i + "]"
+ city[i] + "<br>");
}
}
printArray();
var city2 = [];
city2[0] = '서울';
city2[1] = '인천';
city2[2] = '부산';
printArray2();
function printArray2(){
var i;
for(i = 0; i < city2.length; i++){
document.write("[" + i + "]"
+ city2[i] + "<br>");
}
document.write("<br>");
}
city2[3] = '대구';
printArray2();
배열의 새로운 데이터 입력 후 함수를 다시 호출하여 변경된 내용을 확인할 수 있다.
var city3 = ['서울', , '인천', , '부산'];
function printArray3(){
var i;
for(i = 0; i < city3.length; i++){
document.write("[" + i + "]"
+ city3[i] + "<br>");
}
}
printArray3();
city3[1] = '대전';
printArray3();
var arr1 = [1, 2, "3"];
function printArray3() {
var i;
for (i = 0; i < city3.length; i++){
document.write("[" + i + "]" + city3[i] + "<br>");
}
}
공백도 데이터로 입력되기 때문에 undefined 처리된다.
function addAll(){
var sum = 0, i;
for(i = 0; i < arr1.length; i++){
var r = typeof arr1[i];
sum += arr1[i]
}
document.write("총합 : " + sum);
}
배열의 갯수를 구하는 잘못된 예제.
문자 + 숫자 => 형변환이 되어 문자열이 만들어지기때문에 원하는 결과를 얻지 못한다.
function addAll(){
var sum = 0, i;
for(i = 0; i < arr1.length; i++){
var r = typeof arr1[i];
if(r != "string"){
sum += arr1[i]
}
}
document.write("총합 : " + sum);
}
문자열 타입이 아닐 경우에만 계산해준다.
배열을 활용한 자료구조
push()
배열의 마지막 위치 다음에 원소 추가
pop()
배열의 마지막 위치의 값을 꺼내옴
마지막꺼를 꺼내와서 사용하는 용도, 두가지르 사용가능
unshift()
배열의 맨 앞에 원소를 추가
shift()
배열의 맨 앞의 원소를 꺼내옴
예제)
push()
function arrPush(){
arrNum.push(i);
i++;
}
pop()
function arrPop(){
var r = arrNum.pop();
arrNum.pop();
console.log(arrNum);
}
unshift()
function arrUnshift(){
arrNum.unshift(i);
i++;
console.log(arrNum);
}
shift()
function arrShift(){
var r = arrNum.shift();
console.log(r);
console.log(arrNum);
}
배열용 함수들
병합
join()
제거
del()
예제)
function join(){
var arr = ["A", "B", "C", "D", "E"];
var arrStr = arr.join("-");
console.log(arrStr);
console.log(arr);
}
function del(){
var arr = ["A", "B", "C", "D", "E"];
delete arr[2];
console.log(arr);
arr[2] = "F";
console.log(arr);
}
arr.join을 통해 배열의 데이터 병합이 가능함. 사이에 원하는 문자를 넣어서 병합하는 것도 가능함
delete를 통해 배열을 아예 지울 수 있음. 함수가 아닌 명령어
삭제한 부분에 원하는 데이터 삽입이 가능함.
부분삭제
spliceDel()
위치지정추가
spliceAdd()
범위자르기
sliceEx()
예제)
var arry = ['가', '나', '다', '라', '마'];
function spliceDel(){
arry.splice(1,3);
console.log(arry);
}
function spliceAdd(){
var r = arry.splice(2, 0, "C", "D");
console.log(arry);
}
function sliceEx(){
sarry = [0, 1, 2, 3, 4, 5];
var newArr = sarry.slice(1, 3);
console.log(newArr);
console.log(sarry);
}
splice는 꺼내오고, 지우는 역할.
slice는 복사해서 꺼내오기때문에 원본을 지우지 않음.
splice(2, 2)
(시작할 인덱스 번호, 삭제할 인덱스 갯수)
splice(2, 0, "C", "D")
(시작할 인덱스 번호, 변경할 인덱스 갯수, 추가할 원소1, 추가할 원소2, ...)
splice
시작지점 위치 정보, 갯수
slice
시작지점 위치, 끝나는 위치(지정된 번호의 앞 순번까지)
slice 함수
지정된 범위의 원소들을 복사하여 새로운 배열로 생성
배열명.slice(n, m)l
n번 원소부터 m-1번 원소까지 복사.
정렬
sortEx()
역순
reversEx()
예제)
var sortArr = [6, 2, 1, 4, 3, 5];
function sortEx(){
sortArr.sort();
console.log(sortArr);
}
function reverseEx(){
sortArr.reverse();
console.log(sortArr);
}
sortEx()는 순서대로 정렬, reversEx()는 역순으로 정렬.
forEach
forEachEx()
every
everyEx()
예제)
var nums = [1, 2, 3, 4, 5];
function forEachEx(){//익명 함수 작성법 적용 방식
nums.forEach(function(num){
var result = num * num;
console.log(num, result);
});
}
// function square(num){
// var result = num * num;
// consol.log(num, result);
// }
function everyEx(){
var even = nums.every(isEven);
console.log(even);
}
function isEven(num){
return num % 2 == 0;
}
배열에서 하나씩 꺼내와서 순서대로 넣어 곱해주었기 때문에 배열의 제곱 결과를 구할 수 있음.
<script type="text/javascript">
/* 범위 주석 */
//자바스크립트 코딩 영역
function func1(){
var r = confirm('메시지 출력');//r은 변수
console.log(r);//변수 r에 저장된 값을 콘솔에 출력
if(r == true){
alert("확인을 누르셨습니다.");
}
else{
alert("취소를 누르셨습니다.");
}
}
function func2(){
var r2 = prompt("이름을 입력하세요.");
alert(r2 + "님 환영합니다.");
}
</script>
예제 결과)
확인/취소 대화상자로 입력확인/취소 대화상자로 입력 - 확인 눌렀을 경우확인/취소 대화상자로 입력 - 취소 눌렀을 경우
입력(문자열) 대화상자로 입력입력한 내용에 대한 출력 결과
스크립트 작성 위치
자바스크립트 실행 순서는 작성 순(위에서 아래) 분할된 스크립트 영역은 한 문서이기 때문에 하나의 문서 영역으로 통합되어 사용.
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트 위치</title>
<!-- 자바스크립트 실행 순서는 작성 순(위에서 아래)
분할된 스크립트 영역은 한 문서이기 때문에
하나의 문서 영역으로 통합되어 사용.
-->
<script type="text/javascript">
//head 영역 1
var num = 0;
document.write("head 태그 내 실행 : "+ num + "<br>");
</script>
<script type="text/javascript">
//head 영역 2
num = 1;
document.write("head 태그 내 실행 : "+ num + "<br>");
</script>
</head>
<body>
<script type="text/javascript">
//body 영역 1
num = 2;
document.write("body 태그 내 실행 : "+ num + "<br>");
</script>
<div></div>
<script type="text/javascript">
//body 영역 2
num = 3;
document.write("body 태그 내 실행 : "+ num + "<br>");
</script>
</body>
<script type="text/javascript">
//제 3의 영역
num = 4;
document.write("/body 태그 내 실행 : "+ num + "<br>");
</script>
</html>
외부 스크립트 불러오기
ex_js.html에서 외부 스크립트(myscript.js)를 사용한다면 외부 스크립트(myscript.js)에서 불러온 외부 스크립트(myscript2.js)를 사용 가능함.
document.write("<div style='color:blue; font-size:24px;'>외부 자바스크립트 출력</div>");
function ck01(ival){
alert(ival);
}
변수
명명 규칙
문자(알파벳), 밑줄('_'), 달러기호('$')로 시작
대소문자 구분
한글도 사용 가능(하지만 영문자 권장)
<script type="text/javascript">
document.write("변수에 대한 문법적 오류");
//var 7num = 100; - 숫자로 시작하는 변수
//var &num = 1000; - $가 아닌 특수 문자로 시작
//var true = 0; - 예약어 사용 금지
//var a+b = 10; - 좌변에 연산식 사용 금지
//사용 가능한 코드
var 홍길동 = 'name';//한글 사용은 가능
console.log(홍길동);
var x, y, z = 10;//z에만 10이 들어감.
//나머지 x, y는 undefined
console.log(x, y, z);
var a = b = c = 10;//a, b, c에 같은 값 입력.
console.log(a, b, c);
</script>
<script type="text/javascript">
var num = '10';
document.write(typeof num + '<br>');
num = true;
document.write(typeof num + '<br>');
num = [1, 2, 3];
document.write(typeof num + '<br>');
num = {name:'홍길동', age:25};
document.write(typeof num + '<br>');
</script>
연산자
문자열 병합 연산자
+
산술연산자
+, -, *, /, %(나머지), ++, --
비교연산자
<, <=, >, >=, ==, !=,
자바스크립에만 있는 비교연산자
=== : 값과 타입이 같으면 true
!== : 값 또는 타입이 다르면 true
논리연산자
&&, ||, !
조건연산자
(조건식) ? A : B;
거짓이면 참(true)이면 A 실행, 거짓이면 B 실행
<script type="text/javascript">
var x = 5;
var y = "5";
var result = (x == y);
document.write(result + "<br>");
result = (x === y);
document.write(result + "<br>");
result = (x !== y)
document.write(result + "<br>");
result = (x != y)
document.write(result + "<br>");
</script>
x는 숫자형 타입의 5이고, y는 문자열 타입의 5이기 때문에 값은 같지만 타입이 다르기 때문에 위와 같은 결과가 나온다.
<button onclick="printMsg('버튼으로 출력')">출력</button>
<script type="text/javascript">
var text1 = "함수 선언 전 호출";
var text2 = "함수 선언 후 호출";
printMsg(text1);
function printMsg(msg){
document.write("메시지: " + msg + "<br>");
}
printMsg(text2);
</script>
익명 함수 사용 예제)
<script type="text/javascript">
var text1 = "선언 전 호출";
var text2 = "선언 후 호출";
//pm(text1);
//익명 함수 선언
var pm = function(msg){
document.write("메시지: " + msg + "<br>");
}
pm(text2);
var s = "100";
document.write(typeof s + "<br>");
var n = Number(s);
document.write(typeof n);
</script>
