인라인 자바스크립트
CSS스타일처럼 자바스크립트도 inline, internal, External 이 세 방식으로 작성할 수 있다. Style과 마찬가지로 inline 자바스크립트는 적용할 태그안에 직접 작성하는 것이다.
하이퍼링크를 걸 때 문장이나 단어처럼 일부분에만 넣을 수 있는 <a>태그 말고 다른 태그로 만든 영역 중 아무곳이나 클릭할 수 있게 해주는게 인라인 자바스크립트의 onclick 속성이다.
*주의
같은 기능을 수행하기 위해<a>태그로<section>등 블록요소를 감쌀 수 없다
■ 자바스크립트 이전 페이지로 이동하는 방법 : history.go(), history.back()
histroy.go(-1);
// 이전 페이지... 즉 한단계 뒤로 돌아가기
histroy.go(-2);
// 두단계 이전의 페이지로 이동
histroy.go(-3);
// 세단계 이전의 페이지로 이동
history.back();
// history.go(-1)과 동일한 기능
history.forward();
// history.go(1)과 동일하며 앞으로 이동■ HTML에 적용하기
현재 탭
<div onclick="location.href='http://www.daum.net'">DIV</div>
새로운 탭
<div onclick="window.open('http://www.daum.net','_blank')">DIV</div>
<a href="javascript:history.back()">뒤로 이동</a>
<a href="javascript:history.forward()">앞으로 이동</a>
<button onclick="javascript:history.back()">뒤로 이동</button>
<a href="javascript:location.reload()">새로고침</a>
<a href="javascript:window.close()">창닫기</a>
<button onclick="javascript:location.href='http://www.daum.net', '_blank'">
다음사이트 바로가기</button>실습
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple Landing</title>
<link rel="stylesheet" href="./assets/css/style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="wrap">
<header>
<nav>
<div class="nav1">
<a href="#none"><i class="fa fa-apple"></i></a>
<a href="#none">Mac</a>
<a href="#none">iPad</a>
<a href="#none">iPhone</a>
<a href="#none">Watch</a>
<a href="#none">Music</a>
<a href="#none">Customer Support</a>
<a href="#none"><i class="fa fa-search"></i></a>
</div>
</nav>
</header>
<section class="Welcome" onclick="location.href='iphonex.html'"
style="cursor: pointer;">
<div class="heading">
<h3>iPhone X</h3>
<a href="iphonex.html">Encounter Whith Future</a>
</div>
</section>
<section class="brand1">
<h3>iPhone8</h3>
<a href="">A new generation of iPhone</a>
</section>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>필수 자바스크립트 정리</title>
<style>
a, button {
display: block;
margin: 10px;
}
</style>
</head>
<body>
<a href="javascript:history.back()">뒤로 이동</a>
<a href="javascript:history.forward()">앞으로 이동</a>
<button onclick="javascript:history.back()">뒤로 이동</button>
<button onclick="javascript:history.forward()">앞으로 이동</button>
<a href="javascript:location.reload()">새로고침</a>
<a href="javascript:window.close()">창닫기</a>
<button onclick="location.href='http://www.daum.net'">현재 탭에서 오픈</button>
<button onclick="window.open('http://www.daum.net')">새 탭에서 오픈</button>
<!--
■ 자바스크립트 이전 페이지로 이동하는 방법 : history.go(), history.back()
histroy.go(-1);
// 이전 페이지... 즉 한단계 뒤로 돌아가기
histroy.go(-2);
// 두단계 이전의 페이지로 이동
histroy.go(-3);
// 세단계 이전의 페이지로 이동
history.back();
// history.go(-1)과 동일한 기능
history.forward();
// history.go(1)과 동일하며 앞으로 이동
-->
</body>
</html>