html에서 javascript 를 사용하는 기본적인 방법을 설명드리겠습니다.
방법 1. <body>태그 안에 입력해서 사용하는 방법.
<script language="javascript">
내용
</script>
이 있지만, 진짜 간단한 코드가 아닌 이상 나중에 보기가 힘들어 질 거 같으니 간단하게만 설명하고 넘어가겠습니다.
<body> 태그 안이라고 하긴 했지만, 다른 곳에 들어가도 정상적으로 실행은 됩니다. <head> 태그 안에 입력을 해 놓고 함수를 불러와서 사용하는 방법이 제일 보편적일걸로 보이네요.
그런데 아까도 말했지만, 이런식의 코딩은 썩 좋은 코딩은 아니라고 생각됩니다. 페이지 하나를 만든다고 하더라도 수십줄의 코드가 들어가기 마련인데, 하나하나 찾는 데 상당한 시간을 소요하게 될 걸로 보이네요.
방법 2.
js 파일을 따로 만들고 불러와서 사용하는 방법, 외부js 파일을 불러와서 사용하는 방법입니다.
html 이 있는 폴더에 js라는 폴더를 만들고 그 안에 001.js 라는 파일을 만들어 주세요.
js 파일은 일반 텍스트 문서이기 때문에 아무 에디터로 편집이 가능합니다.
기본적인 사용방법은, html 본문에서 <head></head>안에
<script type="text/javascript" src="js/001.js"></script>
입력하여 사용하는 것입니다.
또는 <body></body> 사이에 적절한 위치에서 불러와서 사용 할 수도 있습니다..
주석 처리 방법.(c와 같음)
C에서 사용하던 것과 동일한 형태로 사용이 가능합니다.
// : 한줄에 대한 주석처리
/**/ : 영역에 대한 주석처리
방법1에 대한 예제
html 파일 하나에 스크립트를 그냥 입력해서 실행하는 방법입니다.
001.html 의 내용
<html>
<head>
<title>자바스크립트</title>
</head>
<body>
<script language="javascript">
document.write("자바스크립트의 출력문");
</script>
</body>
</html>
자바스크립트내의 document.write(""); 부분은 화면에 "" 안의 내용을 출력하는 함수입니다. ; 를 빠뜨리지 않게 주의해 주세요.
실행화면은 다음과 같습니다.
방법2에 대한 예제
001.html 의 내용
<html>
<head>
<title>자바스크립트</title>
<script type="text/javascript" src="JavaScript/001.js"></script>
</head>
<body>
<input type="button" value="외부파일 함수 테스트" onclick="test()">
</body>
</html>
001.js 의 내용
function test(){
document.write("js 파일내 test 함수 호출시 출력되는 문장")
}
html 파일에서 <head></head> 안에 스크립트를 불러오는 명령을 넣고, <body></body> 안에서 버튼을 만든 후 버튼 클릭시 스크립트가 실행되도록 한 것입니다.
실행화면은 다음과 같습니다.
버튼을 클릭하면 화면을 지우고 지정해둔 문구가 나오게 하는 간단한 스크립트입니다.
위 html 에서 사용된 <input> 태그는 입력을 받거나 특정 액션을 하게 하는 태그입니다.
글자입력을 받거나, 버튼을 만들거나, 리스트를 만드는 등 여러가지 항목들이 존재합니다.
은 버튼을 하나 만들고 버튼에 표시될 내용은 value="" 부분입니다.
text, password, radio, button, checkbox, select 등이 있으며 자세한 부분은 따로 정리하도록 하겠습니다.
input 태그에서 함수를 불러오는 부분은 onclick="" 부분입니다.
"" 안에 js 파일에서 선언해둔 함수의 이름을 적어두면 버튼을 클릭했을 때 해당 함수를 불러오는 액션을 하게 됩니다.
'Programming > Javascript & jQuery' 카테고리의 다른 글
| [jQuery] AJAX 기본 사용법 (0) | 2022.07.06 |
|---|---|
| [JavaScript/jQuery] 02. 문자열 다루기-1(합치기, 자르기, 나누기) (0) | 2022.06.29 |
| [JavaScript/jQuery] 01. 반복문 (0) | 2022.06.29 |
| [JavaScript/jQuery] 00. 자바스크립트 기본 사용법 (0) | 2022.06.27 |
| [JavaScript|CSS]모달 박스 띄우기 (0) | 2020.11.19 |