Salted Caramel

[수업 40일차] 21.10.06 / 05_JavaScript_ 05_Array, 06_Function, 07_Object, 08_BOM 본문

coding/[2021.08.02~2022.01.24] 수업복습

[수업 40일차] 21.10.06 / 05_JavaScript_ 05_Array, 06_Function, 07_Object, 08_BOM

꽃무늬라떼 2021. 10. 7. 00:49

 

05_Array
Ex01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	/* 
	자바스크립트에서 배열 생성 방법- 3가지
	1. let 배열명 = new Array(원소1, 원소2, 원소3....,원소n)
	2. let 배열명 = [원소1, 원소2, 원소3,..., 원소n];
	3. let 배열명 = new Array();
	※ 자바스크립트에서의 배열은 모든 데이터 타입(자료형)을 다 담을 수 있음.
	
	
	*/
	// 방법 1. let 배열명 = new Array(원소1, 원소2, 원소3ㅣ....,원소n)
	let arr1 = new Array("홍길동", "hong", 27, true);
	
	document.write(arr1 + "<br>");		// 전체 요소 출력
	
	document.write("<hr>");
	
	document.write(arr1[2]]);			// 특정 요소만 출력
	
	document.write("<hr>");
	
	for(let i=0 ; i<arr1.length; i++) {
		document.write("arr1["+i"] >>> "+ arr1[i]+"<br>");
		
	}
	
	document.writw("<hr>");
	
	//자바에서의 단축for문
	for(let k in arr1) {
		document.write("arr1 배열 요소 >>> "+arr1[k]+"<br>");
	}

	document.write("<hr>");
	
	// 방법2 - let 배열명 = [원소1, 원소2, 원소3,..., 원소n];
	let arr2 = ["홍길동","hong",27,true];
	
	document.write(arr2+"<br>");
	
	document.write("<hr>");
	
	//방법3- let 배열명 = new Array();
	let arr3 = new Array();
	arr3[0] = "홍길동";
	arr3[1] = "hong";
	arr3[2] = 27;
	arr3[3] = true;
	
	document.write(arr3+"<br>");
	
	document.write(arr3[4]+"<br>");			// undefined
	
	
</script>
</head>
<body>

</body>
</html>
05_Array
Ex02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	// 자바는  배열의 크기가 한 번 정해지면
	// 데이터를 새로 추가하는 것이 안 되었음.
	// 하지만 자바스크립트는 배열 객체에 요소를 추가할 수 있음.
	
	let arr = [10, 20, 30];
	
	document.write(arr+"<br>");
	
	document.write("<hr>");
	
	// push(요소) : 배열에 데이터 추가하는 방법 - 맨 뒤에 요소를 추가
	// 요소는 배열의 값이 되는 것
	
	arr.push(40);
	
	document.write(arr+"<br>");
	
	document.write("<hr>");
	
	// 배열에 데이터를 추가 시 복수 개의 데이터를 추가하는 방법(여러개의 데이터 추가)
	// concat([추가할 원소1, 추가할 원소2,....,추가할 원소n]);
	arr = arr.concat([50,60,70,80]);
	
	document.write(arr + "<br>");
	
	document.write("<hr>");
	
	// 일반 for문을 이용하여 arr 배열 요소 출력해 보기
	
	for(let i=0; i<arr.lenght; i++) {
		document.write("arr["+i"] >>> "+ arr[i]+"<br>");
	}
	document.write("<hr>");
	
	
	// 단축 for문을 이용하여 arr 배열 요소 출력해 보기
	
	for(let k in arr) {
		document.write("arr 배열요소 >>> " +arr[k]+"<br>");
	}
	
	document.write("<hr>");
</script>

</head>
<body>

</body>
</html>

 

05_Array
Ex03

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	let arr = ["a","b","c","d","e"];
	
	document.write(arr +"<br>");
	
	document.write("<hr>");
	
	// unshift(추가할 요소) : 배열의 맨 앞(0번째 index)에 추가하는 방법
	// 기존에 있던 요소들은 인덱스가 하나씩 뒤로 밀림/
	arr.unshift("z");
	
	document.write(arr+"<br>");
	
	document.write("<hr>");
	
	
	//shift() : 배열의 맨 처음 요소를 삭제(제거)하는 방법
	arr.shift();
	
	document.write(arr+"<br>");
	
	document.write("<hr>")
	
	
	// pop() : 배열의 맨 마지막 요소를 제거하는 방법.
	arr.pop();
	document.write(arr + "<br>");
	

</script>
</head>
<body>

</body>
</html>

 

 

05_Array
Ex04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	let arr = ["c","d","b","a","e"];
	
	// sort() : 배열의 요소를 정렬하는 방법- 오름차순으로 정렬
	arr.sort();
	
	document.write(arr+"<br>");
	
	document.write("<hr>");
	
	// reverse() : 배열의 요소를 역순(내림차순)으로 정렬하는 방법
	arr.reverse();
	
	document.write(arr+"<br>");
	
	document.write("<hr>");
	

</script>
</head>
<body>

</body>
</html>
06_Function
Ex01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	/* 
	함수(function) : 기능을 정의해 놓은 것.
	- 함수의 하나의 로직을 재사용할 수 있도록 하는 것으로 코드의 재 사용성을 높여줌.
	- 형식) function 함수이름(매개변수1, 매개변수2) {
		함수 호출 시 실행될 문장;
		return 반환값;
	 	}
	
	- 함수 사용시 장점
	1. 코드의 중복 제거 및 코드 재사용 가능.
	2. 유지보수 용이성.
	
	- 자바스크립트 함수의 종류
	1. 사용자 정의 함수 : 사용자가 직접 만들어 놓은 함수,
	2. 내장 함수 : 자바스크립트에서 자체적으로 제공해 주는 함수.

	*/
	
	function hello() {
		alert("안녕하세요??? 방가방가");
		
	}
	 hello();


</script>
</head>
<body>

</body>
</html>

 

06_Function
Ex02

덧셈 뺄셈 연산자를 호출받기

키보드로 입력 받는 방법 ==> prompt 입력받기

let su1 = Number(prompt("첫번째 숫자를 입력하세요"));

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	// [문제] 키보드로 두 수와 연산자를 입력받아서
	//		연산자에 해당하는 함수를 호출하여 화면에 출력해 보세요.
	function plus(su1, su2) {
		document.write("두 수의 덧셈 >>> "+(su1 + su2)+"<br>");
	}
	function minus(su1, su2) {
		document.write("두 수의 뺄셈 >>> "+(su1 - su2)+"<br>");
	}
	function mul(su1, su2) {
		document.write("두 수의 곱셈 >>> "+(su1 * su2)+"<br>");
	}
	function divide(su1, su2) {
		document.write("두 수의 나눗셈 >>> "+(su1 / su2)+"<br>");
	}
	function mod(su1, su2) {
		document.write("두 수의 나눗셈 후 나머지 >>> "+(su1 % su2)+"<br>");
	}
	
	
	
	let su1 = Number(prompt("첫번째 숫자를 입력하세요"));
	let su2 = Number(prompt("두번째 숫자를 입력하세요"));
	let operator = prompt("연산자 입력");
	
	switch(operator) {
		case "+" :
			plus(su1,su2);
			break;
		case "-" :
			minus(su1, su2);
			break;
		case "*" :
			mul(su1,su2);
			break;
		case "/" :
			divide(su1, su2);
			break;
		case "%" :
			mod(su1,su2);
			break;
		default :
			alert("잘못된 연산자를 입력하셨습니다. 다시 입력해 주세요...")
	}
	
	




</script>
</head>
<body>

</body>
</html>

 

 

06_Function
Ex03

 

구구단 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	// 함수 외부에서 함수 내부로 값을 전달하는 방법이 바로 매개변수를 이용.
	// 매개변수는 일종의 외부 데이터를 함수 내부로 전달하는 매개체 역할을 하는 변수.
	// 매개변수는 변수의 종류임.
	
	function gugudan(dan) {
		document.write("***"+dan+"단 ***<br>")
		for(let i=1; i<=9; i++) {
			document.write(dan+ " * "+i+" = " +(dan+i)+"<br>");
		}
	}
	
	let dan = Number(prompt("구구단의 단을 입력하세요."));
	
	gugudan(dan);
	


</script>
</head>
<body>

</body>
</html>

 

 

 

06_Function
Ex04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	/* 
	
	리턴(return)? 
	함수 내부에는 포장이 되어 있기 때문에 한번 실행이 되면 외부에서 접근이 불가능함.
	이때 매개변수를 활용을 하면 함수 내부로 데이터 전달이 가능하다고 하였음.
	리턴 값은 매개변수와는 반대되는 개념임. 매개변수 값이 함수 외부에서 함수 내부로 
	들어오는 값이라면, 리턴값은 함수 내부에서 처리된 결과값을 함수 외부로 전달하기 
	위해 사용되는 일종의 출력값을 의미함. 이때 사용되는 키워드가 return 임.
	
	*/

	// [문제] 키보드로 두 수와 연산자를 입력받아서
	//		연산자에 해당하는 함수를 호출하여 화면에 출력해 보세요.
	function plus(su1, su2) {
		return su1 + su2;
	}
	function minus(su1, su2) {
		return su1 - su2;
	}
	function mul(su1, su2) {
		return su1 * su2;
	}
	function divide(su1, su2) {
		return su1 / su2
	}
	function mod(su1, su2) {
		return su1 % su2
	}

	let su1 = Number(prompt("첫번째 숫자를 입력하세요"));
	let su2 = Number(prompt("두번째 숫자를 입력하세요"));
	let operator = prompt("연산자 입력");
	
	switch(operator) {
		case "+" :
			document.write(su1+" + "+su2+" = "+plus(su1,su2)+"<br>");
			break;
		case "-" :
			document.write(su1+" - "+su2+" = "+minus(su1,su2)+"<br>");
			break;
		case "*" :
			document.write(su1+" * "+su2+" = "+mul(su1,su2)+"<br>");
			break;
		case "/" :
			document.write(su1+" / "+su2+" = "+divide(su1,su2)+"<br>");
			break;
		case "%" :
			document.write(su1+" % "+su2+" = "+mod(su1,su2)+"<br>");
			break;
	}




</script>
</head>
<body>

</body>
</html>

 

06_Function
Ex05

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	// 함수를 정의하는 방법(두번째) - 무명(익명)함수
	// 무명함수는 이름이 없는 함수를 말함. 이벤트 처리 등에 자주 사용이 됨.
	// 함수를 무명으로 만드는 경우에는 주로 함수를 재사용하지 않는 경우에 사용됨.

	let numbering = function() {
		
		for(let i=1; i<=10; i++){
			document.write("i>>>"+i+"<br>");
			
		}
	}
	
	numbering();


</script>
</head>
<body>

</body>
</html>

 

 

06_Function
Ex06

 

toUpperCase ==> 소문자를 대문자로 바꿔주는 메서드.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	function get_members() {
		return ["Java","javascript","html","css"]
	}
	
	let members = get_members();
	
	for(let i=0; i<members.length; i++) {
		document.write("members["+i+"] >>> " + members[i] + "<br>");
	}
	
	document.write("<hr>");

	for(let i=0; i<members.length; i++) {
		document.write
			("members["+i+"] >>> " + members[i].toUpperCase() + "<br>");
	}
	
	
	
</script>
</head>
<body>

</body>
</html>

 

 

 

06_Function
Ex07

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">


	function hap() {
		
		let sum = 0, count = 1;
		
		while(true) { //무한반복
			let value = Number(prompt("수 입력"));
			
			if(value == 0) {
				document.write("종료합니다.~~~<br>");
				return;			//함수를 탈출하는 명령어.
			}
		
			sum += value;
			
			// 매번 입력된 값을 출력해 보자.
			document.write(count+" / "+ value + "/ " + sum + "<br>");
			
			count++;
			
		}
	}


	hap();

</script>
</head>
<body>

</body>
</html>

 

 

06_Function
Ex08

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	
	//콜백함수 : 함수 호출시 매개변구로 넘어가는 값이 함수인 경우를 말함.
	function callTenTime(callback) {
		
		for(let i=1; i<=10; i++) {
			callback();
		}
	}
	
	
	let callback = function() {
			alert("함수 호출!!!");
			}
	callTenTime(callback);

</script>
</head>
<body>

</body>
</html>

 

06_Fuction
Ex10

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	// setInterval() 함수는 함수가 지속적으로 실행이 되므로
	// 컴퓨터의 자원을 소비하게 됨
	// 따라서 지속적으로 실행이 되는 것을 막기 위하여
	// clearInterval() 함수를 사용해야함.
	
	let intervalID = setInterval(function() {
		document.write("<p>"+ new Date()+ "</p>");
	},1000);

	// 20초 후에 clearInterval() 함수를 호출하여
	// setInterval() 함수를 종료시켜야 한다.
	setTimeout(function() {
		clearInterval(intervalID);
	}, 20000)
	

</script>
</head>
<body>

</body>
</html>

 

 

 

07_Object
Ex01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	//"",'' 상관업음, 더이상 속성이 없으면 ,를 빼면 됨
	// 자바스크립트에서의 객체 생성 방법
	let product = {
			name: 'Galaxy S21',
			type: '핸드폰',
			company: '삼성'
			
	}
	document.write("제품 이름>>> "+product["name"]+"<br>");
	document.write("제품 type>>> "+product["type"]+"<br>");
	document.write("제품 제조사>>> "+product["company"]+"<br>");

	document.write("<hr>");
	
	for(let k in product) {
		document.write(k+"의 value >>> "+product[k]+"<br>")
	}
	//k가 속성의 이름들을 말함.
	
</script>
</head>
<body>

</body>
</html>

 

07_Object
Ex02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	let person ={
			
			name : "홍길동",
			eat : function(food) {
				document.write(this.name+"이 "+food+" 을(를) 먹습니다.");
				
			}
			
			
	}
// 기능은 fuction이라는 키워드를 작성해서 인자가 넘아갈 수도 있고 안넘어갈 수도 있음

	person.eat("밥");
	
</script>
</head>
<body>

</body>
</html>

 

07_Object
Ex03

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	let product = {
			"제품명" : "LG 냉장고",
			"입고가격" : 15000000,
			"출고가격" : 2500000,
			"제조사" : "LG"
			
	}

	document.write("<ul>");
	
	for(let k in product) {
		document.write("<li>"+k+" : "+product[k]+"</li><br>");
	}
	document.write("</ul>");

</script>
</head>
<body>

</body>
</html>

 

07_Object
Ex04

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

// 동적할당으로 키보드로 입력받은
	let student = {};
	
	student.name = prompt("학생 이름을 입력하세요.");
	student.hakbun = prompt("학생 학번을 입력하세요.");
	student.major= prompt("학생 학과를 입력하세요");
	student.phone = prompt("학생 연락처를 입력하세요.");
	student.addr = prompt("학생 주소를 입력하세요.");

	document.write("<ul>");
	
	for(let k in student) {
		document.write("<li>"+k+" : "+student[k]+"</li><br>");
	}
	
	document.write("</ul>");

</script>
</head>
<body>

</body>
</html>

 

07_Object
Ex01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	// 자바스크립트 내장 객체 : 자바스크립트에서 제공해 주고 있는 객체.
	// Date 객체 : 날짜와 시간과 관련된 정보를 제공해 주는 객체.
	let date = new Date();
	
	// getYear() : 1900년을 기준으로 하고 있음. -0 이라고 인식을 함.
	//				1901 년 ==> 1을 반환해 줌.
	document.write("현재 년도: "+ (date.getYear()+ 1900) +"년<br>");
	
	document.write("현재 년도: "+ date.getFullYear() +"년<br>");

	document.write("현재 월 : "+(date.getMonth()+1)+ "월<br>");
	
	document.write("현재 일 : "+ date.getDate()+"일<br>");
	
	document.write("<hr>");
	
	// getDay() : 현재 요일 확인하는 함수. ==> 정수값 반환(0[일요일] ~ 6[토요일])
	let day = date.getDay();
	
	switch(day) {
		case 0 : 
			document.write("현재 요일은 일요일입니다.<br>");
			break;
		case 1 : 
			document.write("현재 요일은 월요일입니다.<br>");
			break;
		case 2 : 
			document.write("현재 요일은 화요일입니다.<br>");
			break;
		case 3 : 
			document.write("현재 요일은 수요일입니다.<br>");
			break;
		case 4 : 
			document.write("현재 요일은 목요일입니다.<br>");
			break;
		case 5 : 
			document.write("현재 요일은 금요일입니다.<br>");
			break;
		case 6 : 
			document.write("현재 요일은 토요일입니다.<br>");
			break;
	
	}
	
	// 현재 시간도 받아와 보자. - 시:분:초 형태로 받아오게 됨.
	document.write("현재 시간 : "+date.getHours()+" : ");
	document.write(date.getMinuites()+ " : ");
	document.write(date.getSeconds()+ "<br>");
	
</script>
</head>
<body>

</body>
</html>

 

 

07_Object
Ex06

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	/* 자바스크립트 내장 객체 - Math(수학) 
	   수학 내장 객체와 관련된 함수
	   - abs(숫자) : 숫자의 절대값을 반환하는 함수
	   - max(숫자1,....,숫자n) : 숫자 중 가장 큰 값을 반환하는 함수
	   - min(숫자1,....,숫자n) : 숫자 중 가장 작은 값을 반환하는 함수.
	   - pow(숫자,제곱값) : 숫자의 거듭제곱한 값을 반환하는 함수.
	   - radom(숫자) : 0 ~ 1 사이의 난수를 발생시키는 함수. 
	   - round(숫자) : 소수점 첫째 자리에서 반올림하여 정수를 반환하는 함수
	   - ceil(숫자) : 소수점 첫째 자리에서 무조건 올림해서 정수를 반환하는 함수.
	   - floor(숫자) : 소수점 첫째 자리에서 무조건 잘라내어 정수를 반환하는 함수.
	   - sqrt(숫자) : 숫자의 제곱근 값을 반환하는 함수.
	*/

	document.write("최대값 >>> " +
			Math.max(30,47,8,97,81)+"<br>");
	   
	document.write("<hr>");
	
	document.write("최소값 >>> " +
			Math.min(30,47,8,97,81)+"<br>");

	document.write("<hr>");
	
	let num = 2.1234;
	
	document.write(Math.round(num)+"<br>")

	document.write("<hr>");
	
	document.write(Math.ceil(num)+"<br>");
	
	document.write("<hr>");
	
	document.write(Math.floor(num)+"<br>");
	
	document.write("<hr>");
	
	
</script>
</head>
<body>

</body>
</html>

 

 

08_BOM
Ex01

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">



	/* 
		BOM(Browder Object Model) : 브라우저 객체 모델
		- 브라우저 내에 내장된 객체
		- BOM 객체의 최상위 내장 객체는 window 객체임.
		
		*window 객체의 주요 함수
		- open() : 새로운 창을 띄우고자 할 때 사용하는 함수
		- alert() : 알림/ 경고 창을 띄울때 사용하는 함수
		- prompt() : 질의 창을 띄울 때 사용하는 함수 
		- confirm() : 확인/ 취소 창을 띄울 때 사용하는 함수
		- moveTo() : 창의 위치를 이동시킬 때 사용하는 함수
		- resizeTo() : 창의 크기를 변경시킬 때 사용하는 함수
		- setInterval() : 일정간격으로 지속적으로 실행문을 실행시킬때 사용하는 함수
		- setTimeout() : 일정 간격으로 한번만 실행문을 실행시킬 때 사용하는 함수.
		
		* screen 객체: 사용자의 모니터 정보(속성)를 제공해 주는 객체
		  screen 객체의 주요 속성
		  - screen.width : 화면의 너비값을 반환하는 속성
		  - screen.height : 화면의 높이값을 반환하는 속성
		  - screen.availWidth : 작업표시줄을 제외한 화면의 너비값을 반환하는 속성
		  - screen.availHeight : 작업표시줄을 제외한 화면의 높이값을 반환하는 속성
		  - screen.colorDepth : 사용자 모니터가 표현가능한 컬러 bit 를 반환하는 속성.
		
	*/
	
	document.write("화면 너비 >>> " +screen.width + "<br>");
	document.write("화면 높이 >>> "+ screen.height+"<br>")
	document.write("작업표시줄을 제외한 화면 너비 >>> "+
			screen.availWidth +"<br>");
	document.write("작업표시줄을 제외한 화면 높이 >>> "+ 
			screen.availHeight+"<br>");
	document.write("표현 가능한 컬러 >>> "+screen.colorDepth +"<br>");



</script>
</head>
<body>

</body>
</html>
08_BOM
Ex02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	/* 
	location 객체
	- 자바스크립트가 실행되고 있는 현재 브라우저의 주소 창에 
	표시된 주소 값에 관련된 내용을 다루는 객체.
	- 사용자 브라우저의 주소 창의 url에 대한 정보 (속성)와 
	새로고침 기능을 제공하는 객체
	- location 객체의 주요 속성 및 메서드
	* location.href : 브라우저 창의 url 값을 반환하는 속성.
	* location.reload() : 브라우저 창의 새로고침이 일어나게 하는 메서드.

	*/

	 document.write("url 정보 >>> "+ location.href+ "<br>");


</script>
</head>
<body>

</body>
</html>

 

08_BOM
Ex03

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

/* 
history 객체
- 브라우저가 페이지를 변경한 이력이 저장되어 있는 객체
- 사용자가 방문한 사이트 중 이전에 방문란 사이트와 다음 방문한
   사이트로 돌아갈 수 있는 속성과 메서드를 제공한느 객체
- history 객체의 속성과 메서드
* length : 방문 기록에 저장된 목록의 갯수를 반환하는 속성
* history.back() : 이전에 방문한 웹 페이지로 이동하는 메서드.
* history.forward() : 다음에 방문한 웹 페이지로 이동하는 메서드.
* history.go(숫자) : 이동 숫자만큼 페이지로 이동하는 메서드.

*/





</script>
</head>
<body>

</body>
</html>

 

08_BOM
Exam_01~04

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

	<a href="Exam_02.html">두번째 페이지</a>

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

	<h1>두번째 페이지</h1>
	
	<a href="Exam_03.html">세번째 페이지</a>
	
	<hr>
	
	<input type="button" onclick="history.back()" value ="이전 페이지">
	<input type="button" onclick="history.forward()"value ="다음 페이지">

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>세번째 페이지</h1>
	
	<a href="Exam_04.html">네번째 페이지</a>
	
	<hr>
	
	<input type="button" onclick="history.back()" value ="이전 페이지">
	<input type="button" onclick="history.forward()"value ="다음 페이지">
<!-- history.go(1) -->

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

<h1>네번째 페이지</h1>

<hr>

<input type="button" onclick="history.go(-1)" value="바로이전 페이지">
<input type="button" onclick="history.go(-3)" value="맨 처음 페이지">


</body>
</html>

 

 

 

저작자표시 (새창열림)

'coding > [2021.08.02~2022.01.24] 수업복습' 카테고리의 다른 글

[수업 42일차] 21.10.08 / 05_JavaScript_09_DOM(2) / 06_JQuery(1)  (0) 2021.10.08
[수업 41일차] 21.10.07 / 05_JavaScript_09_DOM(1)  (0) 2021.10.08
[수업 36일차] 21.09.29 , 01_HTML5  (0) 2021.10.06
[수업34~35차] 21.09.27~28 , 01_HTML4  (0) 2021.09.29
21.09.13~21.09.27 자바 프로젝트  (0) 2021.09.29
'coding/[2021.08.02~2022.01.24] 수업복습' Related Articles more