개주 훈련일지/🏋️ 전집중 호흡 훈련

버튼 클릭 시 이동하기&뒤로가기

lshfood2 2025. 11. 16. 23:26

버튼 클릭 시 이동하기 기능을 구현하고

히스토리 -1 문법을 통해 뒤로가기를 구현해보자.

 

▼ A페이지 버튼 클릭하면, B페이지로 이동하기

<head>
<meta charset="UTF-8">
<title>실습01</title>
<script type="text/javascript">
	//함수는 스크립트로 위에 선언해두자 (가시성)
	//밑에 있어도 호이스팅 때문에 올라가긴한다.
	function goToB(){
	//B페이지로 이동하는 함수
		location.href = "NewFile1.html";
		//Newfile1.html로 이동시키는 기능
		//(하이퍼레퍼런스와 비슷하다)
	}
</script>
</head>
<body>
	<button onclick="goToB()">A 페이지 버튼</button>
	//버튼 만들기!
	//클릭 시 B로 가도록 설정하자(go to B)
</body>

 

▼ B페이지 버튼누르면 다시 A페이지로 이동

(=뒤로가기)

<head>
<meta charset="UTF-8">
<title>실습02</title>
<script type="text/javascript">
	function goToA(){
	//A페이지로 이동하는 함수
		history.go(-1); 
		// 뒤로가기 문법이다.
		// A페이지에서 B페이지로 넘어왔으니
		// 뒤로가기가 적용되면 다시 A페이지로 이동된다.
	}
</script>
</head>
<body>
	<button onclick="goToA()">B 페이지 버튼</button>
	//버튼 클릭 시 A페이지로 이동한다! 
</body>