2023-07-06 35일차

2023. 7. 6. 18:12

자바스크립트

마무리 문제

1. 4의 배수인지 확인하는 프로그램

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        h3 {
            text-align: center;
        }

    </style>
</head>
<body>
    <h1 style="text-align: center;">4의 배수일까 아닐까?</h1>
    <script>
        var n = prompt("숫자를 입력하세요.");
        

        if(n !== null){
            if(n % 4 === 0 ){
                document.write(`<h3>${n}는 4의 배수입니다.</h3>`);
            }else{
                document.write(`<h3>${n}는 4가 아닙니다.</h3>`);
            }
        }else{
            document.write("다시 입력해주세요.");
        }
        
    </script>
</body>
</html>

1. 숫자 입력 후 1부터 그 숫자까지 3의 배수 모두 출력 / 3의 배수 갯수까지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    h3{
        color: red;
        text-align: center;
    }
</style>
    
</head>
<body>
    <h1 style="text-align: center;">3의 배수 찾기</h1>
    <script>
        var n = prompt("몇 까지 3의 배수를 찾을까요?");
        var sum = 0;
        var str = "";
        if(n != null){
            for(i = 1; i <= n; i++){
                if (i % 3 == 0){
                    document.write(`${i}  ,`);
                        

                    sum++;

                    

                }
                }
        }
            document.write(`<h3><br>${n}까지 3의 배수의 개수 : ${sum}</h3>`);
        
    </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 addNumber(a, b){ 
            var sum = a + b;
            alert(sum);
        }
        // 함수 호출
        addNumber(12, 56);

    </script>

</body>
</html>

var를 사용한 변수의 특징

변수의 적용 범위 스코프

변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프라고 한다. ( 변수 유효 범위 )

한 함수안에서만 사용할 수 있는 변수를 지역변수 또는 로컬 변수라고 하고,

스크립트 소스 전체에서 사용할 수 있는 변수를 전역 변수 또는 글로벌 변수라고 한다.

var 예약어로 지역 변수 선언하기 ( 오류 발생 sum이 지역 변수이기 때문에 )

<!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 addNumber(){
           var sum = 10 + 20;

        }
        addNumber();
        console.log(sum);
    </script>

</body>
</html>

var 예약어로 지역 변수 선언하기 ( sum이 전역 변수이기 때문에 출력 가능)

<!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 addNumber(){
            sum = 10 + 20;

        }
        addNumber();
        console.log(sum);
    </script>

</body>
</html>

var와 호이스팅

호이스팅이란 '끌어올린다'를 뜻한다. 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로

끌어올리는 것이다. 끌어올린다는 뜻은 실제로 코드를 끌어올리는 것은 아니고 자바스크립트가 소스를 그런 식으로 해석

한다는 의미이다.

변수와 호이스팅

<!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>

        var x = 10;

        function displayNumber(){
            console.log("x is " + x)
            console.log("y is " + y)
            var y = 20;
        }
        displayNumber();

    </script>

</body>
</html>

해당 처럼 결과가 나오는 이유는 자바스크립트 해석기는 함수 소스를 훑어보면서 var를 사용한 변수는 따로 기억해 둔다.

즉, 변수를 실행하기 전이지만 '이런 변수가 있구나' 하고 기억해 두기 때문에 마치 선언한 것과 같은 효과가 있는 것

var 예약어를 사용한 변수의 재할당과 재선언

<!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 addNumber(num1, num2){
            return num1 + num2; // 2개의 수 더하기
        }
        
        var sum = addNumber(10, 20);// sum 변수 선언, 함수 호출
        console.log(sum);
        sum = 50; // 변수 재할당
        console.log(sum);
        var sum = 100;// 변수 재선언
        console.log(sum);

    </script>

</body>
</html>

let와 const의 등장

let을 사용한 변수의 특징

ES6에서는 변수를 선언하기 위한 예약어로 let와 const가 추가되었고, 되도록이면 var예약어는 사용하지 않을 것을 권장

예약어 var와 let, const의 가장 큰 차이는 스코프의 범위이다. var는 함수 영역(레벨)의 스코프를 가지지만,

let와 const는 블록 영역의 스코프를 가진다.

블록 안에서만 쓸 수 있는 변수

let 예약어로 선언한 변수는 변수를 선언한 블록 { } 에서만 유효하고 블록을 벗어나면 사용할 수 없다.

블록 변수 선언하기

<!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 calcSum(n){
            let sum = 0; // 변수 sum의 적용 범위 ( for문빼고 전체 ) 

            for(let i = 1; i < n + 1; i++){
                sum += i; // 변수 i 적용 범위 ( for문 안에서만 )
            }
            console.log(sum);
        }
        calcSum(10);

    </script>

</body>
</html>

전역 변수 선언하기

만약 전역 변수를 선언하고 싶다면 let 예약어를 쓰지 않고 변수이름과 초깃값만 할당하면 된다.

<!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 calcSum(n){
            sum = 0; // 전역 변수 선언

            for(let i = 1; i < n + 1; i++){
                sum += i; 
            }
            
        }
        calcSum(10);
        console.log(sum); // 전역 변수 사용
    </script>

</body>
</html>

Ajax 기본 개념 ( JSP 테스트 )

밑에 코드는 클릭 이벤트가 발생하면 서버로부터 데이터를 비동기적으로 가져와서 웹 페이지에 표시하는 예제

클라이언트 측 코드

1. 사용자가 "클릭" 버튼을 클릭하면 ajax() 함수가 실행

2. ajax() 함수 내에서 XMLHttpRequest 객체를 생성하여 비동기 요청을 처리

3. xhr.onreadystatechange 이벤트 핸들러를 등록하여 서버의 응답 상태를 감지

4. xhr.open("get", "add.jsp?name=김길동", true)에서 GET 방식으로 "add.jsp" 페이지에 "name" 파라미터를 전달

5. xhr.send()를 호출하여 서버로 요청을 보낸다.

6. 서버로부터 응답이 도착하면 xhr.onreadystatechange 이벤트 핸들러가 호출되고, 상태가 4 (완료)이고 상태 코드가 200 (성공)인 경우에만 응답 데이터를 처리하고 웹 페이지에 표시

서버 측 코드

1. add.jsp" 페이지에서는 request.getParameter("name")을 사용하여 "name" 파라미터의 값을 가져온다.

2. out.println()을 사용하여 가져온 "name" 파라미터 값을 출력

<%@page import="java.util.ArrayList"%>
<%@ 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>
<div id="result"></div>
<button id="btn" onclick = "ajax()">클릭</button>
    <script>
        // A가 붙으면 비동기
        function ajax(){
            var res = document.getElementById("result");
            //var btn = document.getElementById("btn");
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status === 200){
                        console.log(xhr.responseText);
                        res.innerHTML = xhr.responseText;
                    }
                }
            };

            xhr.open("get", "add.jsp?name=김길동", true);
            xhr.send();
        }
	
    </script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
out.println(request.getParameter("name"));
%>

오라클

PIVOT, UNPIVOT 함수 ( 서로 반대 )

PIVOT 함수는 기존 테이블 행을 열로 바꾸고, UNPIVOT 함수는 기존 테이블 열을 행으로 바꿔서 출력한다.

밑에 예제 비교

기본 GROUP BY절을 활용해서 부서별, 직책별로 그룹화하여 최고 급여 데이터 출력하기

SELECT deptno, job, MAX(sal)
from emp 
GROUP BY deptno, job
ORDER BY deptno, job;

PIVOT 함수를 사용하여 직책별, 부서별 최고 급여를 2차원 표 형태로 출력

SELECT *
FROM(SELECT deptno, job, sal FROM emp)
 PIVOT(MAX(sal) FOR deptno in(10, 20, 30))
ORDER BY job;

PIVOT 함수를 사용하여 부서별, 직책 최고 급여를 2차원 표 형태로 출력

SELECT *
FROM(SELECT job, deptno, sal FROM emp)
 PIVOT(MAX(sal) FOR job in('CLERK' 
                        , 'SALESMAN'
                        , 'MANAGER'))
ORDER BY deptno;

저작자표시

'프로젝트 기반 자바(JAVA) 응용 SW개발자 취업과정' 카테고리의 다른 글

2023-07-10 37일차 (0)	2023.07.10
2023-07-07 36일차 (0)	2023.07.07
2023-07-05 34일차 (0)	2023.07.05
2023-07-04 33일차 (0)	2023.07.04
2023-07-03 32일차 (0)	2023.07.03

CO_JUN 개발일지