용감하게 구글링으로 얼기설기 복사 붙여넣기 하면서 배운 자바스크립트를 체계적으로 다시 공부하면서 내가 나중에 찾아보려고 만든 게시물.
Inline 방식
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('hello world')" value="hello world" />
</body>
</html>
가장 간단한 방식. HTML 내에 자바스크립트가 적게 쓰일 때 활용할 수 있는 방법.
자바스크립트인지 확실히 티가 나지 않는다. 단점이다.
산업용으로 웹을 활용할 때 페이지 로드가 다 끝나기 전에 자바스크립트 작동이 필요한 경우는 Inline 방식으로 쓰는 것도 좋을 듯. (아래 Onload 방식 참조.)
Script 태그 이용
<!DOCTYPE html>
<html>
<body>
<input type="button" id ="hw" value="Hello world" />
<script type ="text/javascript">
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
</script>
</body>
</html>
<script type =”text/javascript”>는 <script> 로 생략가능. (HTML5문법)
Script 태그 사이에 필요한 자바스크립트를 몰아넣어서 유지 보수가 편리하다.
javascript를 외부 파일로 분리
<!DOCTYPE html>
<html>
<body>
<input type="button" id ="hw" value="hello world" />
<script src="./script.js"></script>
</body>
</html>
페이지마다 반복적으로 동일한 자바스크립트를 반복해서 사용한다면 아예 자바스크립트를 다른 파일로 분리해버리면 HTML만 로딩하고 js 파일은 클라이언트의 브라우저의 캐시에서 바로 불러서 사용할 수 있다.
자바스크립트가 장문인 경우 로딩 속도를 단축하고 HTML에는 자바스크립트가 아닌 정보만 남겨둘 수 있는 방법. SEO에 적합한 방법인 듯.
Onload 방식
<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById('focus').focus();
document.getElementById('focus').scrollIntoView(true);
};
</script>
웹 개발자들은 자바스크립트를 body 태그 맨 마지막 부분에 넣기를 권장한다.
onload는 자바스크립트를 html 파일의 초반에 넣을 때 주로 사용하는 코드이다.
위의 코드는 focus라는 ID를 가진 인풋 박스에 대한 자바스크립트인데 저 코드가 초반에 있다면 focus라는 ID를 가진 인풋 박스를 찾지 못하게 된다. 그래서 onload 안에 스크립트를 넣어버린 것.
onload 안에 스크립트를 넣어버리면 페이지 로딩이 완료가 된 후에 자바스크립트를 로딩한다.
내가 자바스크립트를 창고에서 바코드 리더를 물려서 산업용으로 활용할 때 페이지 로딩이 느려 페이지 로딩이 다 끝나길 기다리고 나서 바코드를 찍어야 제대로 입력이 됐었다.
자동으로 커서두는 자바스크립트를 onload 구문 안에 묶인 것으로 복사 붙여넣기를 했기 때문이다.
공정에 사용했던 PC가 셀러론 등 PC인데 웹캠까지 달아서 영상처리를 하면서 웹페이지 로딩까지 해서 로딩 속도가 많이 지체되었다.
산업용이든 업무용이든 연속 입력이 중요한 웹페이지에서는 인풋박스에 커서를 자동으로 두는 자바스크립트를 그냥 인풋 박스 바로 다음에다가 두는 것이 가장 좋은 선택인듯하다.
애플리케이션에 맞게 활용해야지.
아 진작 자바스크립트 제대로 공부할 걸
새로운 언어 하나 필요하면 일주일이라도 할애해서 기본 중의 기본이라도 배우는 게 여러모로 낫겠다.
