728x90
반응형
자바스크립트 사용 방식 3가지
1. inline : 앞에 on이 붙은 HTML 속성(attribute)에 사용
<li onmouseover="this.style.color = 'red';"
onmouseleave="this.style.color = 'black';">inline : 앞에 on이 붙은 HTML 속성(attribute)에 사용</li>
2. internal : script 태그로 페이지 내부에서 사용
<script>
// console.log() : 자바스크립트의 sysout
console.log(document);
// console.dir() : 요소를 전달하면 좀 더 계층적으로 보여주는 sysout
console.dir(document);
console.dir(document.body);
</script>
3. external : script 태그로 다른 파일을 불러와서 사용
<script src="./assets/js02.js"></script>console.log('A message from js02.js');
< 웹 브라우저로 상세히 보기 >
<!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>02_자바스크립트 사용법.html</title>
</head>
<body>
<h3># 사용 방식 3가지</h3>
<ul id="abc" name="abc">
<li onmouseover="this.style.color = 'red';"
onmouseleave="this.style.color = 'black';">inline : 앞에 on이 붙은 HTML 속성(attribute)에 사용</li>
<li>internal : script 태그로 페이지 내부에서 사용</li>
<li>external : script 태그로 다른 파일을 불러와서 사용</li>
</ul>
<!-- internal script -->
<script>
// console.log() : 자바스크립트의 sysout
console.log(document);
// console.dir() : 요소를 전달하면 좀 더 계층적으로 보여주는 sysout
console.dir(document);
console.dir(document.body);
</script>
<!-- external script -->
<script src="./assets/js02.js"></script>
</body>
</html>
728x90
반응형
'Javascript' 카테고리의 다른 글
| [JS] 조건문 (0) | 2023.06.11 |
|---|---|
| [JS] 연산자 (0) | 2023.06.11 |
| [JS] 데이터 타입 (0) | 2023.06.11 |
| [JS] 변수 (0) | 2023.06.11 |
| [JS] Javascript란 (0) | 2023.06.11 |
