2023-07-11 38일차

2023. 7. 11. 19:42

자바스크립트

Math 객체

100 나올 때까지 출력하기

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// 100 나올 때까지 출력

while(true){

let v = Math.floor(Math.random() * 100 + 1);

if( v === 100){

break;

}else{

document.write(`${v}, `);

}

</script>

</body>

</html>

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

<!DOCTYPE html>

<head>

<style>

h1 {

border:1px solid black;

padding:10px;

text-align:center;

background:#eee;

}

</style>

</head>

<body>

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>

<head>

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

<ul>

</ul>

</div>

</body>

</html>

팝업창 연결

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<p>문서를 열면 팝업 창이 표시됩니다.</p>

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>

<head>

</head>

<body>

<p>문서를 열면 팝업 창이 표시됩니다.</p>

let popWin = window.open("doit-event.html", "popup", "width=750, height=600");

popWin.opener = self;

</script>

</body>

</html>

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

<!DOCTYPE html>

<head>

<style>

#container

{

width:600px;

margin:10px auto;

padding:10px;

text-align:center;

}

</style>

</head>

<body>

</div>

function loadURL(url){

alert(url);

window.opener.location = url;

window.close();

}

</script>

</body>

</html>

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

<!DOCTYPE html>

<head>

<style>

#container{

width:750px;

margin:0 auto;

text-align:center;

}

</style>

</head>

<body>

</div>

</body>

</html>

location 객체

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

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

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>

<head>

<title>Document</title>

</head>

<body>

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>

<head>

<title>Document</title>

</head>

<body>

// 1초 마다 시간 표시

setInterval(() => {

console.log(new Date());

}, 1000);

</script>

</body>

</html>

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

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

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

CO_JUN 개발일지