IT/JavaScript
[자바스크립트] HTML에 자바스크립트를 삽입할수 있는 세가지 방법
김숭늉이
2023. 8. 24. 21:40
728x90
HTML에 자바스크립트를 삽입할수 있는 세가지 방법에 대해서 알아 보겠습니다.
먼저 첫번째방법은 "인라인(Inline) 자바스트립트"의 방식입니다. html 내부 <body>에 onload 를 추가하여 자바스크립트를 실행시키는 방식입니다. 이 방식은 디버그가 어렵기 때문에 가능하면 사용하지 않습니다 :)
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body onload="alert('hello')"> //////// 인라인으로 작성한 onload 를 통해 자바스크립트 실행합니다
</body>
</html>
실행을 시키면 아래와 같이 alert 가 생성됩니다!
✅ 참고
쌍따옴표가 아래와 같이 중복일 경우에는 쌍따옴표가 중복되지 않도록 하위는 작은 따옴표로 처리 해줍니다.
<body onload = "alert('Hello')" alert 문구는 작은따옴표로 작성
///// <body onload = "alert("Hello")> 쌍따옴표를 중복으로 사용하지 않아요
두번째 방법은 내부 자바스트립트 (internal javascript) 입력 방식이예요!
<body> 내부에 script type 형식으로 작성합니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script type="text/javascript"> //// body 안에 script type으로 작성합니다!
alert("Hello");
</script>
</html>
마지막 세번째방법은 일반적으로 사용하는 외부 자바스크립트 (external javascript) 입력 방식입니다!
외부 소스를 가진 스크립트 태그를 가지며, src 내부에서 경로를 특정하게 되며,
css 등 다른 코드가 모두 실행된후 가장 마지막순서로 자바스크립트가 실행될수 있도록 <body>가장 하단에 작성합니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<script src="index.js" charset="utf-8"></script> /// src를 통해 파일을 특정합니다 :) body 하단에 작성
</body>
</html>
읽어주셔서 감사합니다아 :)
728x90
반응형