JavaScript 기초 (2) : 함수, 내장 객체, 화면 출력
부트캠프(END)/Web2022. 8. 2. 15:35
함수
자바스크립트에서도 사용자 정의 함수를 만들 수 있다.
매개변수와 리턴형을 반드시 가지지는 않으며 둘 다 없어도 가능하다.
자바와 달리 리턴형과 매개변수의 타입을 표기하지 않는다.
매개변수O, 리턴형O : function func_name(id, pwd){ return value; }
매개변수O, 리턴형X : function func_name(id, pwd){}
매개변수X, 리턴형O : function func_name(){return value;}
매개변수X, 리턴형X : function func_name(){}
→ 함수는 기능 처리를 위해 이용되며 태그에서 많이 호출한다.
//함수 정의는 세 가지 형태로 가능하다.
function func_name1(매개변수){
return 값;
}
let func_name2=function(){}
let func_name3=()=>{}
브라우저 내장 객체
window : 브라우저를 제어한다.
window.onload = function(){}
== 자바에서의 main함수와 같은 역할.
브라우저가 로딩이 완료되면 실행하도록 할 수 있다.
document : 출력 및 태그 제어
location : 화면 이동
history : 뒤로가기 등에 활용된다.
화면 출력
자바스크립트를 이용해서 화면에 출력하는 방법은 여러 가지가 있다.
| alert("value") | 팝업창을 띄워 value를 그 안에 출력한다. |
| document.write("value") | 브라우저에 value 를 출력한다. 자바의 out.print와 비슷함! |
| 태그.innerHTML | 해당 태그의 위치에 출력한다. AJAX에서 사용됨. |
| console.log() | 브라우저의 콘솔창에 출력한다. 자바의 System.out.println()과 비슷하다. |
태그 읽기
getElementById() : 태그의 id 속성값으로 요소를 선택한다.
getElementByName() : 태그의 name속성값으로 요소를 선택한다.
querySelector("SELECTOR") : 태그의 selector로 요소를 선택한다.
click : 어떤 요소를 클릭했을 때 특정 함수를 실행하도록 한다.
<input type="button" click="func_name">hover(=onmouseover) : 해당 요소에 마우스가 올라갈 때마다 특정 기능을 실행한다.
change : 값이 변경될 때마다 특정 기능을 실행한다.
keyup : 입력창에 값이 입력되는 순간순간 기능을 실행한다.
예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
let movie = [{
"startYearDate": "2022.07.31",
"endYearDate": "2022.07.31",
"startDate": "2022년 07월 31일(일)",
"endDate": "2022년 07월 31일(일)",
"movieCd": "20209343",
"showDt": "20220731",
"thumbUrl": "/common/mast/movie/2022/07/thumb/thn_6ecaea887d6242b3a27c11ce960ed45b.jpg",
"movieNm": "한산: 용의 출현",
"movieNmEn": "Hansan: Rising Dragon",
"synop": "나라의 운명을 바꿀 압도적 승리의 전투가 시작된다!\r\n\r\n1592년 4월, 조선은 임진왜란 발발 후 단 15일만에 왜군에 한양을 빼앗기며 절체절명의 위기에 놓인다.\r\n조선을 단숨에 점령한 왜군은 명나라로 향하는 야망을 꿈꾸며 대규모 병역을 부산포로 집결시킨다.\r\n\r\n한편, 이순신 장군은 연이은 전쟁의 패배와 선조마저 의주로 파천하며 수세에 몰린 상황에서도\r\n조선을 구하기 위해 전술을 고민하며 출전을 준비한다.\r\n하지만 앞선 전투에서 손상을 입은 거북선의 출정이 어려워지고,\r\n거북선의 도면마저 왜군의 첩보에 의해 도난 당하게 되는데… \r\n\r\n왜군은 연승에 힘입어 그 우세로 한산도 앞바다로 향하고,\r\n이순신 장군은 조선의 운명을 가를 전투를 위해 필사의 전략을 준비한다.\r\n\r\n1592년 여름, 음력 7월 8일 한산도 앞바다, \r\n압도적인 승리가 필요한 조선의 운명을 건 지상 최고의 해전이 펼쳐진다.",
"prdtYear": "2021",
"indieYn": null,
"artmovieYn": null,
"multmovieYn": null,
"showTm": "129",
"showTs": "30",
"director": "김한민",
"prNm": "(주)빅스톤픽쳐스",
"dtNm": "롯데컬처웍스(주)롯데엔터테인먼트",
"repNationCd": "한국",
"movieType": "장편",
"moviePrdtStat": "개봉",
"genre": "액션,드라마",
"watchGradeNm": "12세이상관람가",
"openDt": "20220727",
"salesAmt": 7043693621,
"audiCnt": 655712,
"scrCnt": 2132,
"showCnt": 10095,
"rank": 1,
"rankInten": 0,
"rankOldAndNew": "OLD",
"rownum": 1
}]
// [{},{},{}.....]
// [] => List
// {} => ~VO
window.onload=function(){
movies();
}
let movies=()=>
{
// for(Movie V :list )
let index=0;
let data="";
movie.map((m)=>{
data+="<tr onmouseover=print("+index+")>"
+"<td class=text-center><img src=https://www.kobis.or.kr"+m.thumbUrl+" width=30 height=30></td>"
+"<td>"+m.movieNm+"</td>"
+"<td>"+m.director+"</td>"
+"<td>"+m.genre+"</td>"
+"<td>"+m.watchGradeNm+"</td></tr>"
index++;
})
let tbody=document.querySelector("#tb");
tbody.innerHTML=data;
}
let print=(index)=>{
//alert("index:"+index)
let m=movie[index];
let img=document.querySelector("#mimg");
img.src="https://www.kobis.or.kr"+m.thumbUrl;
let title=document.querySelector("#title");
title.innerHTML=m.movieNm;
}
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.container{
margin-top: 50px;
}
.row{
margin: 0px auto;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="col-sm-4">
<table class="table">
<tr>
<td rowspan="7" width=30%>
<img src="" id="mimg" style="width: 100%">
</td>
<td colspan="2">
<h3 id="title"></h3>
</td>
</tr>
<tr>
<td width=20%>감독</td>
<td width=50%></td>
</tr>
<tr>
<td width=20%>장르</td>
<td width=50%></td>
</tr>
<tr>
<td width=20%>등급</td>
<td width=50%></td>
</tr>
<tr>
<td width=20%>개봉일</td>
<td width=50%></td>
</tr>
<tr>
<td width=20%>제작상태</td>
<td width=50%></td>
</tr>
<tr>
<td width=20%>영화구분</td>
<td width=50%></td>
</tr>
</table>
</div>
<div class="col-sm-8">
<table class="table">
<tr class="success">
<th class="text-center"></th>
<th class="text-center">영화명</th>
<th class="text-center">감독</th>
<th class="text-center">장르</th>
<th class="text-center">등급</th>
</tr>
<tbody id="tb">
</tbody>
</table>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.container{
margin-top: 50px;
}
.row{
margin: 0px auto;
width:800px;
}
</style>
<script type="text/javascript">
let index=1;
let prev=()=>{
let img=document.querySelector("#mimg");
if(index>1)
{
index--;
img.src="m"+index+'.jpg';
}
}
let next=()=>{
let img=document.querySelector("#mimg");
if(index<7)
{
index++;
img.src="m"+index+'.jpg';
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<img src="m1.jpg" width=300 height="350" id="mimg">
</div>
<div class="row">
<input type=button class="btn btn-lg btn-danger" value="이전" onclick="prev()">
<input type=button class="btn btn-lg btn-danger" value="다음" onclick="next()">
</div>
</div>
</body>
</html>
'부트캠프(END) > Web' 카테고리의 다른 글
| JavaScript (3) : jQuery 라이브러리 이벤트 처리 + Ajax (0) | 2022.08.04 |
|---|---|
| JavaScript 기초 (1) : 변수, 연산자, 제어문 (0) | 2022.08.01 |
| MyBatis : 기초 (0) | 2022.07.29 |
