2023-07-10 37일차

2023. 7. 10. 18:28

자바스크립트

버튼 클릭해서 글자색 바꾸기

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

CSS

		#item {
			position:relative;
			width:500px;
			height:auto;
			padding:15px 20px;
			margin:auto;
		}
		button {
			background-color:rgba(255,255,255,0.7);;
			padding:5px;
			border:1px solid #ccc;
			font-size:0.8em;			
		}
		.over {
			position:absolute;
			left:30px;
			bottom:30px;
		}
		.detail {
			width:400px;
			text-align:left;			
			line-height:1.8;
			display:none;
		}

마무리 문제

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>

배열을 만들고 요소 표시하기

<!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>
    <h2>배열의 각 요소</h2>
    <script>
    
    let numbers3 = ["one", "two", "three"];// 배열 선언
    
    for(i = 0; i < numbers3.length; i++){
        document.write(`<p>${numbers3[i]}</p>`);
    }



    </script>

</body>
</html>

배열 2개를 합쳐서 새로운 배열 만들기 ( concat() 메서드 )

<!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 nums = [1, 2, 3];
    let chars = ["A", "B", "C"];

    let numsChars = nums.concat(chars);
    let charsNums = chars.concat(nums);
    document.write(`nums에 chars 합치면: ${numsChars} <br> chars에 nums 합치면: ${charsNums}`);
    



    </script>

</body>
</html>

새로운 요소를 추가하는 push(). unshift() 메서드

배열 맨 끝에 요소를 추가하려면 push() 메서드 사용

배열 맨 앞에 요소를 추가하려면 unshift() 메서드 사용

배열에 새로운 요소 추가하기

<!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 nums = [1,2,3];

        let ret1 = nums.push(4, 5);
        document.write(`length: ${ret1} | 배열: ${nums}`);
        document.write("<br>");

        let ret2 = nums.unshift(0);
        document.write(`length: ${ret2} | 배열: ${nums}`);

    </script>
</body>
</html>

배열에서 요소를 꺼내는 pop(), shift()

두 메서드는 꺼낸 요솟값을 반환하며 기존 배열은 꺼낸 요소가 빠진 상태로 변경된다.

<!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 chars = ["A", "B", "C", "D"];

        let popped1 = chars.pop(); // 마지막 요소 꺼냄
        document.write(`꺼낸 요소: ${popped1} | 배열: ${chars}`);
        document.write("<br>");

        let popped2 = chars.shift(); // 1번째 요소 꺼냄
        document.write(`꺼낸 요소: ${popped2} | 배열: ${chars}`);

    </script>
</body>
</html>

splice()메서드의 인수가 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 numbers = [1,2,3,4,5];
        let newNumbers = numbers.splice(2);//인덱스 2인 요소부터 마지막 까지 삭제
        document.write(`반환된 배열: ${newNumbers} <br> `);
        document.write(`변경된 배열: ${numbers} `);


    </script>
</body>
</html>

splice()메서드의 인수가 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 study = ["html", "css", "web", "jquery"];
        let newStudy = study.splice(2,1);// 인덱스값이 2인 요소(web)부터 요소를 1개 삭제
        document.write(`반환된 배열: ${newStudy} <br> `);
        document.write(`변경된 배열: ${study} `);


    </script>
</body>
</html>

날짜 계산하는 프로그램 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>독서 챌린지</title>
  <style>
    #container{
      margin:50px auto;
      width:300px;
      height:300px;
      border-radius:50%;
      border:2px double #222;
      background-color:#d8f0fc;
      text-align: center;
    }
    h1 {
      margin-top:80px;
    }
    .accent {
      font-size:1.8em;
      font-weight:bold;
      color:red;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>책 읽기</h1>
    <p><span class="accent" id="result"></span>일 연속으로 <br> 책 읽기를 달성했군요.</p>
    <p>축하합니다!</p>
  </div>  

  <script>
    let now = new Date("2022-07-10");// 오늘 날짜를 객체로 지정
    let firstDay = new Date("2022-07-01");// 시작 날짜를 객체로 지정 

    let toNow = now.getTime();// 오늘까지 지난 시간 (밀리초)
    let toFirst = firstDay.getTime();// 첫날까지 지난 시간 (밀리초)
    let passedTime = toNow - toFirst;// 첫날부터 오늘까지 지난 시간 (밀리초)

    passedTime = Math.round(passedTime/(1000*60*60*20));// 밀리초를 일수로 계산하고 반올림

    document.querySelector('#result').innerText = passedTime;

  </script>

</body>
</html>

오라클

비등가 조인

비등가 조인은 등가 조인 방식 외의 방식을 의미한다. 전에 배웠던 등가 조인은 모두 EMP 테이블과 DEPT테이블을

사용했지만, 이번에는 급여 등급 데이터를 가지고 있는 SALGRADE테이블과 EMP테이블을 조인해보겠다.

급여 범위를 지정하는 조건식으로 조인하기

select *
    from emp e, salgrade s
    where e.sal between s.losal and s.hisal;

외부 조인

두 테이블간 조인 수행에서 조인 기준 열의 어느 한쪽이 NULL이어도 강제로 출력하는 방식을 외부 조인이라고 한다.

왼쪽 외부 조인 사용하기 ( 상급자가 존재하지 않는 사장님 출력 )

select e.empno, e.ename, e.mgr, c.empno, c.ename
from emp e, copy_emp c
where e.mgr = c.empno(+)
order by e.empno;

오른쪽 외부 조인 사용하기 ( 부하직원이 없는 사원들 출력 )

select e.empno, e.ename, e.mgr, c.empno, c.ename
from emp e, copy_emp c
where e.mgr(+) = c.empno
order by e.empno;

저작자표시

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

2023-07-13 40일차 (0)	2023.07.13
2023-07-11 38일차 (1)	2023.07.11
2023-07-07 36일차 (0)	2023.07.07
2023-07-06 35일차 (0)	2023.07.06
2023-07-05 34일차 (0)	2023.07.05

CO_JUN 개발일지