자바스크립트

 

Math 객체

100 나올 때까지 출력하기

<!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>
        // 100 나올 때까지 출력
        while(true){
            let v = Math.floor(Math.random() * 100 + 1);
            if( v === 100){
                break;
            }else{
                document.write(`${v}, `);
            }
        }
    </script>

</body>
</html>

 

 

이벤트 당첨자 뽑기 프로그램

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>당첨자 발표</title>
    <style>
      h1 {
        border:1px solid black;
        padding:10px;
        text-align:center;
        background:#eee;
      }
    </style>
  </head>
  <body>    
    <h1>당첨자 발표</h1>

    <script>
      function getrandom(seed){
        return Math.floor((Math.random() * seed) + 1);
      }

      let seed = prompt("전체 응모자 수: ","");
      let count = prompt("당첨자 수?", "1");// 당첨자 수 지정
     

      document.write("전체 응모자 수: " + seed + "명");
      document.write("<br>");
      document.write("당첨자: ");
      for(let i=0; i < count; i++){
        let picked = getrandom(seed);
        document.write(picked + "번 ,");
      }
     

    </script>

  </body>
</html>

 

 

 

브라우저와 관련된 객체 ( window )

 

팝업창

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>공지사항</title>  
  <style>
    #content {
      border : 2px double skyblue;
      border-radius:10px;
      padding:10px;
    }
    ul {
      margin-left:15px;
      list-style-type:none;
    }
    ul li {margin : 10px 5px;}
    button{
      position:absolute;
      bottom:20px;
      right:20px;
    }
  </style>    
</head>
<body>
  <div id="content">
  <h1>공지사항</h1>
    <ul>
      <li>항목 1</li>
      <li>항목 2</li>
      <li>항목 3</li>
      <li>항목 4</li>
      <li>항목 5</li>
    </ul>    
    <button onclick="javascript:window.close();">닫기</button>
  </div>
</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 onload="openpopup()">
    <p>문서를 열면 팝업 창이 표시됩니다.</p>
    <script>
        function openpopup(){// 팝업창 연결
            let newWin =  window.open("notice.html", "test", "width= 400, height=400" );
        if(newWin == null){
            alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.")
        }
        newWin.moveBy(100, 100);// 팝업창 위치 지정
        }

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

 

 

팝업 창에서 클릭한 내용을 메인창에 나타내기

 

1. main.html ( 팝업창 열기 ) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>팝업 창 열기</title>
</head>
<body>
  <p>문서를 열면 팝업 창이 표시됩니다.</p>
  <script>
    let popWin = window.open("doit-event.html", "popup", "width=750, height=600");
    popWin.opener = self;
  </script>
</body>
</html>

 

2. doit-event.html ( 팝업창 ) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>이벤트 공지</title>
  <style>
    #container
    {
      width:600px;
      margin:10px auto;
      padding:10px;
      text-align:center;
    }        
  </style>
</head>
<body>
  <div id="container">
    <h1>이벤트 공지</h1>
    <img src="/0711/popup_click/doit.jpg">
    <p><a href="doit-main.html" onclick="loadURL(this.href); return false">자세히 보기</a></p>  
  </div>

  <script>
    function loadURL(url){
      alert(url);
      window.opener.location = url;
      window.close();
    }
  </script>
</body>
</html>

 

3. doit-main.html ( 팝업창에 자세히 보기 클릭 시 해당 url로 이동 ) 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Do it!</title>
  <style>
    #container{
      width:750px;
      margin:0 auto;
      text-align:center;
    }
  </style>
</head>
<body>
  <div id="container">
  </div>
</body>
</html>

 

 

 

 

 

location 객체

사이트 위치 고정하기 ( naver 버튼 클릭시 naver사이트로 이동 ) 

<!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>
    <div id="display">
        <button onclick="location.replace('http://www.naver.com')">네이버</button>
        <script>
            document.write("<p><b>location.href :</b>" + location.href + "</p>");
            document.write("<p><b>location.host :</b>" + location.host + "</p>");
            document.write("<p><b>location.protocol :</b>" + location.protocol + "</p>");
           
        </script>
    </div>
</body>
</html>

 

 

 

 

2초 뒤에 출력  ( 30  먼저 출력 후 13은 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 aaa = function (x,y){
            console.log(x+y);
        }
        // 화살표 함수
        let bbb = (x,y) => console.log(x+y);

        // add(3,10);
        // 40, 10 add에 값 넣어주기
        // 2초 뒤에 출력
        setTimeout(aaa, 2000, 3, 10);
        clearTimeout(bbb);

        bbb(10,20);
    </script>
</body>
</html>

 

 

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>
        // 1초 마다 시간 표시
        setInterval(() => {
           console.log(new Date());
        }, 1000);
       

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

 

 

2초마다 0~10 랜덤 값 출력

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

       
        //2 초마다 0~10 랜덤 값 출력
        setInterval(() => {
           console.log(Math.floor(Math.random()*10));
        }, 2000);
    </script>
</body>
</html>

 

 

 

 

 

 

 

오라클

 

오라클 퀴즈 풀기

 

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

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

2023-07-14 41일차  (0) 2023.07.14
2023-07-13 40일차  (0) 2023.07.13
2023-07-10 37일차  (0) 2023.07.10
2023-07-07 36일차  (0) 2023.07.07
2023-07-06 35일차  (0) 2023.07.06

+ Recent posts