자바스크립트
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 |