글 작성자: juyoungit

JavaScript 관련 글을 시작하기에 앞서...

이제 JavaScript 입니다. 사실 이전에 포스팅한 HTML, CSS 관련 글들의 퀄리티가 너무 많이 떨어지는 것 같아서

이를 갈아엎는 과정이 필요하다고 생각했지만 당장 이 글들을 모두 수정하는 것보다는

공부와 포스팅을 이어가면서 지속적으로 수정해나가는 것이

더 효율적일 것 같아서 이렇게 이전의 글들을 수정하기 전에

먼저 JavaScript에 대한 포스팅을 하기로 결정하였습니다.

(HTML과 CSS는 최대한 빠른 시일내에 더 좋은 퀄리티의 글로 다시 돌아올 수 있도록 노력하겠습니다!)

 

자바스크립트(JavaScript)란?

자바스크립트는 웹 개발자가 배워야하는 3가지 언어 중의 하나로서 이전에 살펴본 HTML, CSS에

이은 세번째 언어에 해당합니다.

HTML이 웹페이지의 내용을 정의하고, CSS가 웹페이지의 레이아웃과 디자인을 지정하는 역할을 했다면

자바스크립트는 웹 페이지의 동적인 요소 즉, 웹 페이지의 동작을 기술합니다.

 

자바스크립트는 원래 html을 프로그래밍적으로 조작하기 위해서 만들어졌고 또 사용되었는데 시간이 지나면서

웹의 영역뿐만 아니라 보다 다양한 영역에서 사용되게 됩니다.

 

현재 관점에서 바라보았을 때 자바스크립트는 사실 웹페이지에만 사용되는 언어가 아닙니다.

실제로 많은 데스크탑 및 서버 프로그램이 자바스크립트를 사용합니다. (대표적으로 Node.js가 있습니다.)

또한 일부 데이터베이스도 프로그래밍 언어로 자바스크립를 사용하는 것으로 알려져 있습니다.

 

 

자바(Java)와 자바스크립트(JavaScript)의 관계?

사실 저도 공부를 하기 앞서서 이 부분이 굉장히 궁금했었습니다. 둘다 동일한 프로그래밍 언어이고 같은 "Java" 라는 키워드를 공유하기 때문에 이 둘 사이에 어떤 관계가 있을 것이라고 생각했습니다. 하지만 실제로 이 둘은 전혀 관계가 없습니다.

자바와 자바스크립트는 개념과 설계에 있어서 완전히 다른 언어입니다.

 

사실 지금의 자바스크립트는 라이브스크립트(LiveScript)라는 이름을 가지고 있었습니다. 이 라이브스크립트가 탄생되는 당시 Java가 시장에서 굉장한 인기를 끌고 있는 상황이었는 데 시장에서 Java의 인기에 대한 효과를 활용하고자 이름을 자바스크립트로 변경했다고 합니다. (자바스크립트의 역사에 대해서는 가능하다면 추후에 더 구체적으로 다루도록 해보겠습니다.)

 

물론 자바스크립트를 만드는 과정에서 자바와 유사한 문법을 사용하도록 설계방향을 잡고 만들었기 때문에 자바스크립트는 자바와 유사한 문법구조를 사용한다는 특징이 있지만 이정도 만으로 자바와 자바스크립트가 밀접한 연관성을 가지고 있다고 보기는 어렵습니다.

 

결론적으로 자바와 자바스크립트는 개념과 설계에 있어서 전혀 연관성이 없는 완전히 다른 언어 입니다.

 

자바스크립트를 사용하는 방법

그렇다면 자바스크립트를 어떻게 사용할 수 있을까요? 자바스크립트도 CSS와 동일한 형식으로 사용이 가능합니다.

  1. Internal - HTML 문서내에 영역을 구분해서 기술

  2. External - 외부에 자바스크립트만 모아놓은 파일을 불러오는 방식으로 사용

  3. inline - 태그안에 직접 기입하는 방식

살펴보면 CSS에서 CSS를 사용하는 방법을 설명할 때와 동일함을 알 수 있을 겁니다.

하지만 CSS에서도 언급했던 것처럼 inline 방식을 사용하는 것은 HTML, CSS, JavaScript를 섞이기게 만들어 소스의 가독성을

떨어뜨리고 유지보수 측면에서도 불리하기 때문에 별로 권장되지 않습니다.

 

   1. Internal 방식을 사용하여 자바스크립트 사용하기

<script>
// 자바스크립트에 대한 내용이 기록되는 부분
</script>

HTML 문서 내에서 <script> </script> 태그 사이에 들어오는 내용이 자바스크립트 부분에 해당합니다.

HTML 내에서 자바스크립트는 <head>, <body>에 관계없이 배치가 가능하고 또한 원하는 수만큼 배치할 수 있습니다.

 

 

HTML 문서 내에 자바스크립트 코드를 배치할 때 사용하는 Script 코드는 웹 페이지의 로딩속도를 지연시키기 때문에

<script> 태그를 배치할 때 <body> 요소의 맨 아래에 스크립트를 배치함으로서 로딩속도 지연을 최소화 할 수 있습니다.

 

  2. External 방식을 사용하여 자바스크립트 사용하기

자바스크립트 파일의 확장자는 .js 입니다. 외부에 있는 자바스크립트 파일을 사용하고 싶은 경우 다음과 같이

스크립트 파일 이름을 <script> 태그의 src 속성에 넣으면 됩니다.

<script src="myScript.js"></script>

자신의 웹 저장소에 저장되어 있는 js 파일을 사용한다면 src에 파일의 경로를 전달하면 되고

만약 다른 서버에 존재하는 js 파일을 사용한다면 url을 전달하여 사용할 수 있습니다.

 

 

다음과 같이 외부 스크립트를 사용하면 다음과 같은 장점이 있습니다.

  1. HTML과 자바스크립트 코드를 분리할 수 있습니다.

  2. HTML과 자바스크립트 코드를 쉽게 읽을 수 있고 유지보수가 용이해집니다.(코드가 완전히 분리되기 때문에)

  3. 페이지 로딩속도를 향상 시킬 수 있습니다.

그리고 부가적으로 외부스크립트를 작성 시에는 <script> 태그를 사용하지 않음을 기억하시기 바랍니다.

 

  3. inline 방식을 사용하자 자바스크립트 사용하기

<input type="button" onclick="alert('Hello World!')" value="click me!" />

위의 코드에서 onclick 속성은 이벤트(Event)와 관련된 약속되어 있는 속성으로서 해당 속성의 속성값으로 오는 것은

자바스크립트 코드라는 것이 약속되어 있습니다. 그래서 다음과 같이 onclick 속성의 속성값으로 자바스크립트 코드를

전달해서 태그 내에서 자바스크립트를 기술하는 것도 가능합니다.

 

위의 코드를 보면 느낄 수 있겠지만 HTML코드와 자바스크립트 코드가 섞여서 코드의 가독성이 떨어진다는 점을 느낄 수

있을 겁니다. 그래서 보통 이러한 이유 때문에 inline 방식으로 자바스크립트를 사용하는 경우는 많지 않습니다.

'Web Basic > JavaScript' 카테고리의 다른 글

자바스크립트 문자열(String)  (0) 2020.07.27
자바스크립트 이벤트(Event)  (0) 2020.07.27
자바스크립트 객체(Object)  (2) 2020.07.27
자바스크립트 함수(Function)  (2) 2020.07.27
자바스크립트 문  (0) 2020.07.27

티스토리툴바