왕진 블로그
JavaScript 링크에서 실행 —
href="javascript:..."와 외부 JS 완전 정리
링크(<a>)는 원래 다른 페이지로 이동시키는 태그다. 그런데 href에 URL 대신 javascript:로 시작하는 문자열을 넣으면, 페이지 이동 대신 자바스크립트 코드가 그 자리에서 실행된다. 아래는 클릭하면 alert() 창을 띄우는 가장 단순한 예제와, 이미지를 마우스오버로 바꿔주는 lib.js 파일이다.
화면에는 밑줄 쳐진 텍스트 링크 하나만 보인다. 클릭하는 순간 페이지 이동 없이 브라우저 알림창이 뜬다.
클릭해보세요 ← 실제로는 여기 클릭 시 아래 알림창이 뜸
<a href="...">의 href는 본래 이동할 주소, 즉 URL을 적는 자리다. http://, https://, #처럼 브라우저가 알아듣는 여러 스킴(scheme) 중 하나가 바로 javascript:다. 브라우저는 href 값이 javascript:로 시작하면 "이건 페이지 주소가 아니라 실행할 코드구나"라고 판단하고, 링크 이동 대신 그 뒤에 적힌 코드를 그대로 실행한다.
<a href="javascript:alert('안녕')">는 "안녕이라는 코드로 이동해줘"가 아니라 "페이지 이동은 하지 말고 alert('안녕')을 실행해줘"라는 뜻이다.alert()는 브라우저가 기본으로 제공하는 팝업창 함수다. 괄호 안에 넣은 문자열을 그대로 화면에 띄워준다. 별도의 CSS나 HTML 요소를 만들 필요 없이 "지금 이 코드가 실행됐다"를 즉시 눈으로 확인할 수 있어서, 자바스크립트가 실제로 동작하는지 테스트할 때 가장 먼저 배우는 함수다.
함수 하나 정도는 HTML 안 <script>에 그냥 써도 동작한다. 하지만 같은 함수를 여러 페이지에서 반복해서 써야 한다면 이야기가 다르다. 페이지마다 같은 코드를 복사-붙여넣기 하면, 나중에 함수 하나만 고쳐도 모든 페이지를 일일이 찾아다니며 수정해야 한다. 이럴 때 함수를 lib.js 같은 외부 파일로 분리해두면, 파일 하나만 고치면 그 파일을 불러 쓰는 모든 페이지에 수정 사항이 한 번에 반영된다.
수정 시 모든 페이지 다시 열어야 함
파일이 길어지고 관리 어려움
여러 페이지가 같은 파일 공유
lib.js 하나만 고치면 전체 반영
- 재사용 — 함수를 한 번 만들어 여러 페이지에서 호출
- 유지보수 — 버그 수정·기능 추가가 파일 하나로 끝남
- 가독성 — HTML은 구조만, JS는 동작만 담당해 코드가 깔끔해짐
외부 .js 파일을 만들었다고 저절로 실행되지는 않는다. HTML의 <head>나 <body> 안에서 <script src="lib.js"></script>처럼 src 속성으로 경로를 지정해야, 브라우저가 그 파일을 읽어와서 안의 함수들을 현재 페이지에서 쓸 수 있게 등록한다.
src="lib.js"는 현재 HTML 파일과 같은 폴더에 lib.js가 있다는 뜻이다. 다른 폴더에 있다면 js/lib.js처럼 상대 경로를 정확히 맞춰줘야 한다.lib.js의 over(), out() 함수는 매개변수로 받은 obj(이미지 요소)의 src 속성을 바꾼다. <img> 태그는 src가 가리키는 경로의 그림을 화면에 그리는데, 자바스크립트로 이 src 값을 실시간으로 바꾸면 브라우저가 즉시 새 이미지를 다시 불러와 화면을 갱신한다. 이 원리를 마우스 이벤트와 연결하면 "마우스를 올리면 그림이 바뀌는" 효과가 만들어진다.
마우스를 올리기 전 / 올린 상태를 이미지 대신 색상 블록으로 표현
lib.js의 함수는 obj라는 매개변수를 받아서 obj.src를 바꾼다. 그런데 함수 안에는 "어떤 이미지를 바꿀지" 정보가 없다. 그 정보를 채워주는 것이 호출할 때 넘기는 this다. onmouseover="over(this)"에서 this는 이벤트가 걸린 바로 그 <img> 태그 자신을 의미하므로, 여러 개의 이미지가 있어도 각자 자기 자신만 바뀐다.
- 함수가 "어떤 img인지" 알 수 없어 에러 발생
- this 대신 고정된 id를 써버리면 이미지가 하나만 있을 때는 되지만, 여러 개로 늘리면 재사용이 안 됨
- this(obj)를 넘기는 방식이라야 같은 함수 하나로 몇 개든 이미지를 처리 가능
href="javascript:..."와 onmouseover="..."처럼 HTML 태그 속성 안에 직접 코드를 적는 방식을 "인라인 이벤트 핸들러"라고 부른다. 배우기는 쉽지만, HTML(구조)과 JS(동작)가 뒤섞여 코드가 지저분해지고, 링크가 실제로는 아무 데도 이동하지 않아 스크린 리더 등 접근성 도구가 혼란을 겪을 수 있다. 요즘은 HTML에는 순수한 구조만 남기고, 동작은 별도의 script에서 addEventListener로 연결하는 방식을 권장한다.
<img onmouseover="over(this)">
HTML과 JS가 한 줄에 섞임
btn.addEventListener('click', ...)
HTML과 JS가 분리되어 관리 쉬움
과거 방식이든 현대적 방식이든, 결국 "이벤트 발생 → 함수 실행"이라는 흐름 자체는 같다. 차이는 그 연결을 어디에 적어두느냐뿐이다.
| 실수 | 증상 | 해결 |
|---|---|---|
| href="javascript:"를 아무 링크에나 남발 | 실제 이동 주소가 없어 접근성·SEO 저하, 우클릭 "새 탭에서 열기"도 무의미 | 가능하면 addEventListener + 실제 href(또는 #) 사용 |
| <script src="lib.js"> | 경로가 틀려 함수 not defined 에러 | 파일 실제 위치 확인, 상대 경로 재점검(js/lib.js 등) |
| 따옴표 중첩 오류 | href="javascript:alert("안녕")" 처럼 큰따옴표 두 번 사용 시 문자열이 중간에 끊김 | 바깥은 큰따옴표, 안쪽 문자열은 작은따옴표로 구분 |
| onmouseover="over()" 처럼 this 생략 | 어떤 이미지를 바꿀지 몰라 함수 내부에서 오류 | onmouseover="over(this)"로 자기 자신을 넘김 |
| <script src="lib.js">를 head 맨 위에 배치 | 본문 로딩보다 먼저 실행돼 페이지 렌더링 지연 | body 끝 또는 defer 속성으로 로딩 시점 조정 |
핵심 한 줄 요약
Tags
'php' 카테고리의 다른 글
| JavaScript 비교·논리 연산자 완전 정리 (0) | 2026.07.03 |
|---|---|
| JavaScript if-else — 학점 매기기 완전 정리 (0) | 2026.07.03 |
| JavaScript 리터럴 — 숫자·불리언·문자열 완전 정리 (0) | 2026.07.03 |
| JavaScript 산술 연산 — +·-·*·/·% 완전 정리 (0) | 2026.07.02 |
| JavaScript 변수 선언 — let · 전역/지역/블록 스코프 완전 정리 (0) | 2026.07.02 |
댓글