Insert title here

2개의 주사위

버튼을 클릭하면 2개의 주사위가 랜덤됩니다.

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>2개의 주사위</h1>
버튼을 클릭하면 2개의 주사위가 랜덤됩니다.<br><br>
<img alt="" src="./images/sai_1.gif" id="d1">
<img alt="" src="./images/sai_6.gif" id="d2"><br><br>
<p id="dic1">합계</p><br>

<script type="text/javascript">
function dice() {
	// ceil : 올림
	let r1 = Math.ceil(Math.random()*6);
	let r2 = Math.ceil(Math.random()*6);
	
//	document.getElementById("d1").src="./images/sai_"+r1+".gif";
//	document.getElementById("d2").src="./images/sai_"+r2+".gif";
	// 이런식으로도 접근 가능
	document.images[0].src = "./images/sai_"+r1+".gif";
	document.images[1].src = "./images/sai_"+r2+".gif";
}
</script>
</body>
</html>

해석

이 코드는 주사위 이미지명의 끝번호가 1~6일 경우 유효한 예제이다.

Math.random()*6을 올림처리하여 1~6까지 랜덤의 수를 구하고,

img태그의 id값이나 images의 요소번호로 img태그에 접근하여 이미지 주소값의 마지막 번호롤 바꿔준다.

이미지 주소값이 일정하지 않을 경우 예제

</script>
<h2>4번문제</h2>
<h1>2개의 주사위</h1>
버튼을 클릭하면 2개의 주사위가 랜덤됩니다.<br><br>
<img alt="" id="random1" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvLgiT%2Fbtq6LVk7fAX%2FkJ2Ktj0dkd7VkOmrxnLFkK%2Fimg.gif">
<img alt="" id="random2" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvLgiT%2Fbtq6LVk7fAX%2FkJ2Ktj0dkd7VkOmrxnLFkK%2Fimg.gif"><br><br>
<button type="button" onclick="radom()">주사위를 굴린다</button>
<script type="text/javascript">
function radom() {
	let randomNum1 = Math.round(Math.random()*6);
	let randomNum2 = Math.round(Math.random()*6);
	if(randomNum1 == 1){
		document.getElementById("random1").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvLgiT%2Fbtq6LVk7fAX%2FkJ2Ktj0dkd7VkOmrxnLFkK%2Fimg.gif"
	}else if(randomNum1 == 2){
		document.getElementById("random1").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhnQZy%2Fbtq6LW5qS62%2FAOJu3uPFLeaVVkjAkZVUs1%2Fimg.gif"
	}else if(randomNum1 == 3){
		document.getElementById("random1").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbYRuiD%2Fbtq6HQd0tDp%2Fhs6OP3kdsLqWKV5bHWZzbK%2Fimg.gif"
	}else if(randomNum1 == 4){
		document.getElementById("random1").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbG8rVr%2Fbtq6JxZz1hP%2F3WhKeYaAKkL6S11B3LPfuk%2Fimg.gif"
	}else if(randomNum1 == 5){
		document.getElementById("random1").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEMxkY%2Fbtq6Gp8KkpC%2FFKtnqwR5HBXMkGjzxgclfK%2Fimg.gif"
	}else if(randomNum1 == 6){
		document.getElementById("random1").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FNdGpW%2Fbtq6DRYA7iQ%2FPxZBpN1flIbnRi17XxtiF1%2Fimg.gif"
	}
	if(randomNum2 ==1){
		document.getElementById("random2").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvLgiT%2Fbtq6LVk7fAX%2FkJ2Ktj0dkd7VkOmrxnLFkK%2Fimg.gif"
	}else if(randomNum2 == 2){
		document.getElementById("random2").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhnQZy%2Fbtq6LW5qS62%2FAOJu3uPFLeaVVkjAkZVUs1%2Fimg.gif"
	}else if(randomNum2 == 3){
		document.getElementById("random2").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbYRuiD%2Fbtq6HQd0tDp%2Fhs6OP3kdsLqWKV5bHWZzbK%2Fimg.gif"
	}else if(randomNum2 == 4){
		document.getElementById("random2").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbG8rVr%2Fbtq6JxZz1hP%2F3WhKeYaAKkL6S11B3LPfuk%2Fimg.gif"
	}else if(randomNum2 == 5){
		document.getElementById("random2").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEMxkY%2Fbtq6Gp8KkpC%2FFKtnqwR5HBXMkGjzxgclfK%2Fimg.gif"
	}else if(randomNum2 == 6){
		document.getElementById("random2").src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FNdGpW%2Fbtq6DRYA7iQ%2FPxZBpN1flIbnRi17XxtiF1%2Fimg.gif"
	}
}

'IT > JSON' 카테고리의 다른 글

[Html+JavaScript] 스크립트에서 테이블 생성하여 JSON 데이터 넣기/XML 데이터 넣기 (0)	2021.06.08
[Html+JS+JSON] html에서 json 데이터 불러오기(접근방법) (0)	2021.06.08
[Html+JS+JSON] JSON정의/JSON파일 예시/html 접근 예시/json → String형변환(stringify)/String → json(parse) (0)	2021.06.08
[Html+JavaScript] 배열의 연산/getElementsByTagName (0)	2021.06.08
[Html+JavaScript] 환영합니다 현재 시각은 (0)	2021.06.07

Insert title here

미술관 및 박물관 링크

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>미술관 및 박물관 링크</h1>
<select id="links" onchange="golink()">
	<option>대상을 선택</option>
	<option value="https://sema.seoul.go.kr/">・서울시립미술관</option>
	<option value="https://www.sac.or.kr/">・국립현대미술관</option>
	<option value="https://www.museum.go.kr/">・예술의전당</option>
	<option value="https://museum.seoul.go.kr/">・국립중앙박물관</option>
	<option value="https://museum.seoul.go.kr/">・서울역사박물관</option>
	<option value="https://www.nfm.go.kr/">・국립민속박물관</option>
</select>
<script type="text/javascript">
function golink() {
	// select index 번호 구하기
	let selectIndex = document.getElementById("links").selectedIndex;
	// 선택된 index value값 가져오기
	let url = document.getElementById("links").options[selectIndex].value;
	if(selectIndex != 0){
		location.href = url;
	}
}
</script>
</body>
</html>

설명

option을 선택할 때 onchange 이벤트가 발생하여 golink함수로 이동한다.

select태그의 id명으로 option의 index번호를 구한다.

index번호로 option의 value값(링크)을 구한다.

location.href 사용하여 클릭 링크로 이동한다.

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] NodeList/getElementsByTagName (0)	2021.06.08
[Html+JavaScript] DOM/childNodes/appendChild/insertChild/insertBefore/removeChild/createElement/createTextNode (0)	2021.06.08
[Html+JavaScript] onload 이벤트/신문 자동 스크롤 내리기/window.scroll/setTimeout (0)	2021.06.07
[Html+JavaScript] onkeydown / onkeypress 이벤트 keyCode얻기 (0)	2021.06.07
[Html+JavaScript] mouse이벤트/ onmousedown/onmouseup/onmouseover/onmouseout (0)	2021.06.07

onload : 이벤트 객체가 로드될 때 이벤트가 발생한다.

신문 자동 스크롤 내리기 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onload="viewScroll()">
<pre> 신문내용을 넣으세요. </pre>
<script type="text/javascript">
let posY = 0;
function viewScroll(){
	window.scroll(0, posY);
    
	posY = posY + 2;
	if(posY == 300) posY = 0;   // 300이 되면 초기화(맨 위로 올라간다.) 
    						 // 화면이 꽉 차면 움직이지 않는다.
	
	setTimeout( "viewScroll()", 100); // 0.1초마다
}
</script>
</body>
</html>

설명

pre태그 안에 신문 내용을 넣고, 코드를 실행하면 0.1초마다 스크롤이 내려간다.

body태그가 실행될 때 onload 이벤트가 발생하여 viewScroll함수를 실행한다.

함수설명

window.scroll(x-coord, y-coord) : 대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생시키거나 강제로 스크롤 이벤트를 발생시키는데 사용(x = 가로, y = 세로)

setTimeout("함수명()", 지연시간(ms)) : 시간 지연 함수, 지연시간 후 실행시킬 때 사용

※ 실행화면을 올리고 싶었는데.. 같은 코드를 실행시 티스토리가 스크롤링이 되어 올리지 못했다...

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] DOM/childNodes/appendChild/insertChild/insertBefore/removeChild/createElement/createTextNode (0)	2021.06.08
[Html+JavaScript] 미술관 및 박물관 링크 이동하기 (0)	2021.06.07
[Html+JavaScript] onkeydown / onkeypress 이벤트 keyCode얻기 (0)	2021.06.07
[Html+JavaScript] mouse이벤트/ onmousedown/onmouseup/onmouseover/onmouseout (0)	2021.06.07
[Html+JavaScript] onblur / onchange 이벤트 (0)	2021.06.07

onkeydown : 키보드에서 키를 눌렀을 때 이벤트 발생

온키다운 키코드 :

예제

온키다운 키코드 : <input type="text" name="title1" size="5">
<script type="text/javascript">
document.getElementsByName("title1")[0].onkeydown = function (event) {
	alert("keycode : " + event.keyCode) // event 매개변수로 넘어온다. 
}
</script>

설명

text란에 값을 넣어주면 keyCode의 값을 반환하여 경고창에 출력된다.

onkeypress : 키보드에서 키를 눌렀을 때 이벤트 발생

온키프레스 키코드 :

예제

온키프레스 키코드 : <input type="text" name="title2" size="5">
<script type="text/javascript">
document.getElementsByName("title2")[0].onkeypress = function (event) {
	alert("keycode : " + event.keyCode) // event 매개변수로 넘어온다. 
}
</script>

설명

text란에 값을 넣어주면 ascii 코드의 값을 반환하여 경고창에 출력된다.

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 미술관 및 박물관 링크 이동하기 (0)	2021.06.07
[Html+JavaScript] onload 이벤트/신문 자동 스크롤 내리기/window.scroll/setTimeout (0)	2021.06.07
[Html+JavaScript] mouse이벤트/ onmousedown/onmouseup/onmouseover/onmouseout (0)	2021.06.07
[Html+JavaScript] onblur / onchange 이벤트 (0)	2021.06.07
[Html+JavaScript]a href vs form action vs location.href 사용법 (feat.jsp) (0)	2021.06.07

mouse이벤트

onmousedown : 마우스 포인터가 요소 안으로 들어올 때 (마우스 클릭 시)

onmouseup : 마우스 버튼을 올릴 때(클릭한 걸 뗄 때)

onmouseover : 마우스 포인터가 요소 안으로 들어올 때 (마우스 올려놨을 때)

onmouseout : 마우스 포인터가 요소 밖으로 나갈 때 (마우스 뜻을 때)

Insert title here

예제

<input type="image" src="images/san0.gif" 
					onmousedown="mouseDown(this)" 
					onmouseup="mouseUp(this)"
					onmouseover="mouseOver(this)"
					onmouseout="mouseOut(this)">
					
<script type="text/javascript">
function mouseDown(obj) { // 마우스 포인터가 요소안으로 들어올 때 (마우스 클릭시)
	obj.src = "images/san1.gif";
}
function mouseUp(obj) { // 마우스 버튼을 올릴 때(클릭한 걸 뗄 때)
	obj.src = "images/san0.gif";
}
function mouseOver(obj){ // 마우스 포인터가 요소안으로 들어올 때 (마우스 올려 놨을 때)
	obj.src = "images/san2.gif";
}
function mouseOut(obj){ // 마우스 포인터가 요소 밖으로 나갈 때 (마우스 땟을때)
	obj.src = "images/san0.gif";
}
</script>

설명

input type을 img로 묶어 이벤트 발생 시마다 함수를 지정한다.

이벤트가 발생할 경우 지정 함수로 이동하여 이미지를 바꿔준다.

Insert title here

onmouseover, onmouseout 사용예제

<a href="#" onmouseover="document.box.src='images/surprise.gif'" 
			onmouseout="document.box.src='images/box.gif'">
			<img alt="" src="images/box.gif" name="box">

설명

마우스를 그림(요소) 안으로 올리면 onmouseover 이벤트가 발생하여 그림이 바뀌고

마우스가 그림 밖으로 나가면 onmouseout 이벤트가 발생하여 원복이 된다.

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] onload 이벤트/신문 자동 스크롤 내리기/window.scroll/setTimeout (0)	2021.06.07
[Html+JavaScript] onkeydown / onkeypress 이벤트 keyCode얻기 (0)	2021.06.07
[Html+JavaScript] onblur / onchange 이벤트 (0)	2021.06.07
[Html+JavaScript]a href vs form action vs location.href 사용법 (feat.jsp) (0)	2021.06.07
[Html+JavaScript] 라면 타이머 만들기/clearInterval/setInterval/window.close/option value 접근 예시 (0)	2021.06.07

onblur : 포커스를 잃었을 때 실행된다.

Insert title here 나이 : 세

예제

나이 : <input type="text" onblur="inRegNum()" size="10" maxlength="2">세<br><br>
<script type="text/javascript">
function inRegNum() {
	alert('onblur 실행됨'); // 포커스가 딴 곳으로 가면 실행됨.
}

설명

포커스 영역은 text영역이고 text영역을 벗어날 때 이벤트가 발생합니다.

onchage : 포커스가 바뀌었을 때 실행된다.

예제

<select id="sel" onchange="chageVal()">
 	<option value="apple">사과</option>
 	<option value="pear">배</option>
 	<option value="banana">바나나</option>
</select>

<script type="text/javascript">
function chageVal() {
	let val = document.getElementById("sel").value;
	alert(val); // 선택한 value값이 출력된다.
}
</script>

설명

포커스 영역은 option안이고, option 클릭이 바뀔 때마다 이벤트가 발생합니다.

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] onkeydown / onkeypress 이벤트 keyCode얻기 (0)	2021.06.07
[Html+JavaScript] mouse이벤트/ onmousedown/onmouseup/onmouseover/onmouseout (0)	2021.06.07
[Html+JavaScript]a href vs form action vs location.href 사용법 (feat.jsp) (0)	2021.06.07
[Html+JavaScript] 라면 타이머 만들기/clearInterval/setInterval/window.close/option value 접근 예시 (0)	2021.06.07
[Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name (0)	2021.06.07

link : 이동시키는 것

앵커 태그 : href

폼 태그 : action

자바스크립트 : location.href

NewFile.jsp로 이동

a href 예제

<a href="NewFile.jsp?name=홍길동&age=24">NewFile.jsp로 이동</a>

설명

name=홍길동&age=24 파라미터 값으로 '홍길동'과 '24'를 NewFile.jsp로 넘겨준다.

NewFile.jsp 예제

<% // 스크립트 립 : 자바의 영역, DB와 연동가능
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
out.println("이름 : " + name + "<br>");
out.println("나이 : " + age +  "<br>");
%>

설명

request.getParameter : 파라미터명으로 접근하여 데이터를 넘겨받는다.

파라미터명이 name이라면 '홍길동'을 넘겨받게 된다.

링크 클릭 후 실행화면

form action 예제

<form action="NewFile.jsp">
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<input type="submit" value="이동">
</form>

설명

form태그는 a태그와 달리 값을 입력받을 수 있다. form 영역에 input 태그를 묶는다.

NewFile.jsp에 name명으로 접근하여 값을 넘겨준다.

Insert title here 이름 :
나이 :

location.href 예제

이름 : <input type="text" id="name">
<br>
나이 : <input type="text" id="age">
<br>
<button type="button" onclick="move()">이동</button>

<script type="text/javascript">
function move() {
	let name = document.getElementById("name").value;
	let age = document.getElementById("age").value;
	// 스페이스바 주의 null값 우려
	location.href ="NewFile.jsp?name="+ name +"&age="+ age; 
}	
</script>

설명

button 클릭 시 move() 함수로 이동하여 text의 입력값을 각 변수에 넣어준다.

a href와 비슷한 방식으로 location.href에 값을 주어 NewFile.jsp에 접근한다.

※ 이동을 눌러도 jsp파일이 없어서 실행되지 않습니다..

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] mouse이벤트/ onmousedown/onmouseup/onmouseover/onmouseout (0)	2021.06.07
[Html+JavaScript] onblur / onchange 이벤트 (0)	2021.06.07
[Html+JavaScript] 라면 타이머 만들기/clearInterval/setInterval/window.close/option value 접근 예시 (0)	2021.06.07
[Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name (0)	2021.06.07
[Html+JavaScript]체크박스에 체크를 하면 금액이 포함되게 하기/Array/checked/form (0)	2021.06.07

* 티스토리에서 wav파일 접근 경로를 파악하지 못하여 알람은 울리지 않습니다. ㅠㅠ

라면 타이머 예제 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="" name="frm">
<div align="left">
<strong>라면 타이머</strong>
<br><br>
<!-- id와 name 같은이름 사용가능 -->
<select id="selid" name="selid">
	<option value="180">시간 선택(기본:3분)</option> 
	<option value="300">5분</option>
	<option value="180">3분</option>
	<option value="120">2분</option>
	<option value="60">1분</option>
	<option value="30">30초</option>
</select>

<input type="button" value="Timer Start" onclick="noodle()">
<br><br>

<!-- CSS 묶을 때 많이 사용한다 -->
<span id="countdown">time selected</span>
<br><br>

<button type="button" onclick="window.close()">close</button>

</div>
</form>
<script type="text/javascript">

let index = 0; // 다른 함수에서도 사용하기 위해 
let value = 0;
let time = 0;

function noodle() {
	clearInterval(time); // timer 초기화
	index = document.frm.selid.selectedIndex; // index 번호를 가져온다.
	value = parseInt(document.frm.selid.options[index].value);
	time = setInterval('noodleTimer()', 1000); // 1초마다 noodleTimer()함수 호출
}

function noodleTimer() {
	value = value - 1; // 1씩 빼나가도록 한다.
	// 1초마다 실행
	document.getElementById('countdown').innerHTML = "완료까지 <b>" + value + "</b>초 남았습니다";
	
	if(value == 0){
		clearInterval(time);
		
		let audio = new Audio('AlarmClockBell.wav');
		audio.play();
	}
}

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

함수 설명

clearInterval() : 매개변수로 변수명과 함수명을 받으며 사용 시 매개변수가 종료됩니다.(초기화)

setInterval('함수명', 시간 간격) : 일정한 시간간격으로 값을 갱신해 줍니다.

window.close() : 현재 실행창이 닫힙니다.

option value 접근 예시

	// id로 직접 접근해서 가져오는 방법
	let value = document.getElementById("selid").value;
    
	// name으로 접근해서 가져오는 방법
	value = document.frm.selid.value;
    
	// 네임 안에 option들을 가져온다(배열 = index로 되어 있음)
	// parseInt 시간이 흘러가도록 숫자로 변경하여야 한다.
	value = parseInt(document.frm.selid.options[index].value);

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] onblur / onchange 이벤트 (0)	2021.06.07
[Html+JavaScript]a href vs form action vs location.href 사용법 (feat.jsp) (0)	2021.06.07
[Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name (0)	2021.06.07
[Html+JavaScript]체크박스에 체크를 하면 금액이 포함되게 하기/Array/checked/form (0)	2021.06.07
[Html+JavaScript] 계산기(feat.Dom) (0)	2021.06.06

식별자 (==Access Attribute (접근 속성))

id : 고유한 식별을 목적으로 하는 경우, javascript에서 접근하기, 검사용, html 파일당 한 개만 유효(중복 불가)

class : 재사용을 목적으로 하는 경우, CSS에서 디자인적인 요소, 다중 설정이 가능(중복 허용)

name : form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성, 다중 설정 가능(중복 허용)

※ 동일한 id명은 불가하지만, id=name명이 같은 경우는 허용된다.

id 사용예제 1

<p id="pid">p tag id pid</p>
<p id="pid">p tag id pid</p>

<script type="text/javascript">
	document.getElementById("pid").innerHTML = 'p태그 입니다';
</script>

실행화면

p tag id pid

설명

동일한 id로 두 개의 태그에 사용할 경우 처음 설정된 p태그만 변경된 것을 볼 수 있다.

id는 고유하기 때문에 한 페이지당 1개만 사용 가능! 중복이 불가하다.

id 사용예제 2

<div id="demo" style="background-color: #ffffff">Hello JS CSS</div>
<button type="button" onclick="func()">적용</button>
<script type="text/javascript">
function func() {
	// div태그의 통째를 가져온다(인스턴스)
	let obj = document.getElementById("demo");
	// div태그에 모든 요소에 접근 할 수 있다.
	obj.style.color = "white";
	obj.style.backgroundColor = "blue";
	obj.style.textAlign = 'center';
	obj.style.borderStyle = 'double';
	obj.style.borderColor = "red";
	obj.style.fontFamily = "MS PGothic";
	obj.style.fontStyle = 'italic';
	obj.style.fontSize = '24pt';
}
</script>

실행화면

Insert title here

Hello JS CSS

설명

div태그에 id값 설정 후 JS 함수 안에서 div태그의 id를 불러오면 div태그의 모든 요소에 접근이 가능하다.

class 사용예제

<p class="cls"> p tag class cls</p>
<p class="cls"> p tag class cls</p>
<h2 class="cls"> h2 tag class cls</h2>
<script type="text/javascript">
	document.getElementsByClassName('cls')[0].innerHTML = 'class는 cls입니다';
	document.getElementsByClassName('cls')[1].innerHTML = 'class는 cls입니다';
</script>

실행화면

p tag class cls

h2 tag class cls

설명

class는 index 번호로 접근을 할 수 있다. 모든 index에 접근하고 싶다면 for문을 사용하면 된다. 중복 사용 가능!

name 사용 예제

<p name="name">p tag name name</p>
<h2 name="name">p tag name name</h2>
<script type="text/javascript">
document.getElementsByName('name')[1].innerHTML = "name 입니다";	
</script>

실행화면

p tag name name

설명

name는 index 번호로 접근을 할 수 있다. 모든 index에 접근하고 싶다면 for문을 사용하면 된다. 중복 사용 가능!

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript]a href vs form action vs location.href 사용법 (feat.jsp) (0)	2021.06.07
[Html+JavaScript] 라면 타이머 만들기/clearInterval/setInterval/window.close/option value 접근 예시 (0)	2021.06.07
[Html+JavaScript]체크박스에 체크를 하면 금액이 포함되게 하기/Array/checked/form (0)	2021.06.07
[Html+JavaScript] 계산기(feat.Dom) (0)	2021.06.06
[Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert (0)	2021.06.06

Insert title here

PC방 이용요금

기본 사용료 1시간 : 1000원

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>PC방 이용요금</h1>
기본 사용료 1시간 : 1000원
<br><br>
<form name="pc">
	<input type="checkbox" onclick="sum(0)" id="hour1" value="1000">1시간추가 : 1000원<br> 	<!-- 0번요소 -->
	<input type="checkbox" onclick="sum(1)" id="hour3" value="2700">3시간추가 : 2700원<br> 	<!-- 1번 요소 -->	
	<input type="checkbox" onclick="sum(2)" id="hour5" value="4200">5시간추가 : 4200원<br><br>	<!-- 2번 요소 -->
	합계금액 : <input type="text" id="total" value="1000" size="5">원정						<!-- 3번요소 -->
</form>

<script type="text/javascript">
	let values = new Array(3); // 배열을 선언하여 값 불러오기
	values[0] = parseInt(document.getElementById('hour1').value);
	values[1] = parseInt(document.getElementById('hour3').value);
	values[2] = parseInt(document.getElementById('hour5').value);
	
	let total = parseInt(document.getElementById('total').value);

	function sum(num) {
		if(document.pc.elements[num].checked == true){
			total = total + values[num];
		}else{
			total = total - values[num];
		}
		document.pc.elements[3].value = total;	
	}
</script>

</body>
</html>

설명

input태그를 form태그로 묶을 경우 input태그는 form태그의 요소가 된다.

script 태그 안에서 배열을 선언 하여 체크박스의 값을 넣어준다.

document.pc.elements[num].checked == true

form태그의 name은 pc이고 pc의 요소가 체크될 경우(checked) true를 반환한다.

document.pc.elements[3].value = total;

form태그의 3번째 요소 = total에 값을 넣어준다.(요소 시작 번호 : 0)

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 라면 타이머 만들기/clearInterval/setInterval/window.close/option value 접근 예시 (0)	2021.06.07
[Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name (0)	2021.06.07
[Html+JavaScript] 계산기(feat.Dom) (0)	2021.06.06
[Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert (0)	2021.06.06
[Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert (0)	2021.06.06

분류 전체보기

2개의 주사위

'IT > JSON' 카테고리의 다른 글

미술관 및 박물관 링크

'IT > JavaScript' 카테고리의 다른 글

onload : 이벤트 객체가 로드될 때 이벤트가 발생한다.

함수설명

'IT > JavaScript' 카테고리의 다른 글

onkeydown : 키보드에서 키를 눌렀을 때 이벤트 발생

text란에 값을 넣어주면 keyCode의 값을 반환하여 경고창에 출력된다.

onkeypress : 키보드에서 키를 눌렀을 때 이벤트 발생

text란에 값을 넣어주면 ascii 코드의 값을 반환하여 경고창에 출력된다.

'IT > JavaScript' 카테고리의 다른 글

mouse이벤트

onmouseover, onmouseout 사용예제

'IT > JavaScript' 카테고리의 다른 글

onblur : 포커스를 잃었을 때 실행된다.

onchage : 포커스가 바뀌었을 때 실행된다.

'IT > JavaScript' 카테고리의 다른 글

link : 이동시키는 것

a href 예제

NewFile.jsp 예제

form action 예제

location.href 예제

※ 이동을 눌러도 jsp파일이 없어서 실행되지 않습니다..

'IT > JavaScript' 카테고리의 다른 글

라면 타이머 예제 코드

함수 설명

option value 접근 예시

'IT > JavaScript' 카테고리의 다른 글

식별자 (==Access Attribute (접근 속성))

id 사용예제 1

id 사용예제 2

class 사용예제

h2 tag class cls

name 사용 예제

p tag name name

'IT > JavaScript' 카테고리의 다른 글

PC방 이용요금

설명

'IT > JavaScript' 카테고리의 다른 글

티스토리툴바