[Javascript] 2. 기본적인 표기

🏃Dekay (JuniorDeveloper)·2021년 9월 9일
0

Javascript

목록 보기
2/8
post-thumbnail

어제 자바스크립트에 대해 살펴보고 오늘부터 기초를 탄탄하게 하기 위해서 기본 문법부터 차근히 살펴보기로 했다.
아이디어를 모두 표현할 수 있는 자바스크립트를 자유롭게 사용하기 위해 열심히 공부해야겠다.

1. Javascript를 HTML 파일 안에 집어넣기

  • Javascript 코드를 HTML 파일에 집어넣으려면 <script> 요소를 사용하면 된다.
<script type="text/javascript">
  Javascript Code
</script>
  • type 속성은 스크립트의 종류를 나타낸다. 일반적으로 [text/javascript] 이외를 사용하는 일은 없다.
    * HTML5에서는 [text/javascript]가 기본값으로 되어 있으므로 생략해도 된다.

<script> 요소를 기술하는 장소

  • <script> 요소를 기술하는 장소는 크게 3개로 분류할 수 있다.

1.1 <body> 요소의 안 (임의의 위치)

<script> 요소에서의 처리 결과를 웹 페이지에 직접 출력할 때 사용한다.
하지만, 요즘은 콘텐츠와 코드가 혼재하게 되면 코드의 가독성이 떨어지기 때문에 거의 사용하지 않는 것 같다.

1.2 <body> 요소의 안 (</body> 직전)

일반적으로 브라우저에서는 스크립트의 로딩이나 실행이 끝날 때까지 화면을 갱신을 하지 않는다.
이러한 이유로 로딩이나 실행에 오랜 시간이 걸리는 스크립트인 경우 그만큼 화면 갱신이 지연된다.
이런 문제점을 해결하기 위해 웹 페이지의 말미(</body> 직전)<script>태그를 배치한다.
즉, 웹 페이지의 화면 갱신이 끝난 후 스크립트를 로딩/실행할 수 있기 때문에 실제로 사용자에게 보이는 화면 갱신 속도가 개선된다.

1.3 </head> 요소의 안

웹 페이지 말미에 배치했을 때 오류가 발생할 수 있는데, 그 이유는 Javascript에서는 함수를 호출하기 위한 <script>요소보다 함수 정의를 위한 <script> 요소를 먼저 정의해야 하기 때문이다.
예를 들어, <body> 요소 내에서 호출해야하는 함수는 <head> 요소 내에서 미리 정의되어 있어야한다.

  • 또한, 스크립트에서 스타일 시트를 출력해야 하는 상황에서도 마찬가지로 본문의 출력보다 미리 <head> 요소 내에서 <script> 요소를 정의해야 한다.

  • 기본적인 방법은 웹 페이지의 말미에 선언하여 사용하고 예외 상황에서는 </head> 요소의 안에 정의하는 방법을 사용하면 될 것 같다.


2. 외부 스크립트 Import하기

  • Javascript 코드는 별도의 외부 파일로도 정의가 가능하다.
<script type="text/javascript" src="path" [charset="encoding "]>
</script>
		path: 스크립트 파일의 경로
        	encoding : 스크립트 파일에서 이용하고 있는 문자 코드
  • 코드를 외부 파일로 정의하면 아래와 같은 장점이 있다.
    1. 레이아웃과 스크립트를 분할함으로써 코드를 재이용하기 쉽다.
    2. 스크립트를 외부 파일화함으로써, HTML 파일의 가독성이 좋아진다.

3. 외부 스크립트와 인라인 스크립트를 병용하는 경우 주의할 점

  • 외부 스크립트인라인 스크립트를 병용하는 경우, 아래와 같은 코드는 사용할 수 없으므로 주의 해야한다.
<script type="text/javascript" src="lib.js">
window.alert("text!");	//무시된다
</script>
  • src 속성을 지정한 경우 <script> 요소 안에 콘텐츠는 무시된다.
  • 만일 외부 스크립트인라인 스크립트를 병용할 경우에는 아래와 같이 <script> 요소를 분리해야 한다.
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript">
window.alert("text!");
</script>

Anchor 태그에 스크립트 집어넣기 - Javascript 의사 포로토콜

  • <script> 요소에 정의하는 것 외에도 Anchor 태그의 href 속성에 'Javascript:~'의 형식으로 스크립트를 사용할 수 있다.
  • 이러한 기법을 Javascript 의사 프로토콜이라고 한다.
<a href="Javascript:스크립트 코드"> 링크 텍스트 </a>
  • 예를 들어 '링크 클릭 시, 대화상자를 표시하고 싶은'경우에는 아래와 같이 사용한다.
<a href="Javascript:window.alert("text!");"> 대화상자 표시 </a>

4. 문장의 규칙

  • Javascript의 코드는 일반적으로 하나 이상의 문장(Statement)으로 구성되어 있다.
  • 예시를 위해서, window.alert("text!");의 문장을 예시로 사용한다.

4.1 문장의 맨 끝에 세미콜론(;)을 붙인다

  • 세미콜론생략하는 것도 가능하지만, 문장의 단락이 불명확해지므로 좋은 방법은 아니다.

4.2 문장 도중에 공백이나 개행, 탭을 포함하는 것도 가능하다

  • 하나의 문장이 긴 경우, 문장 도중에 적절한 개행이나 인덴트(탭/공백)를 넣어서 표현할 수 있다.
window.
  alert
    ("Text!");
  • 위의 코드는 개행을 추가해 오히려 코드가 거대해지기만 했을 뿐 별다른 의미는 없다.
  • 하지만, 개행할 수 있는 것은 단어(키워드)기호의 뒤에서만 가능하다.
win
dow.alert("text!"); // Window라는 단어의 중간에서 줄을 바꾸었으므로 오류다.

4.3 대문자/소문자 구별

  • Javascript의 문장은 대문자소문자가 엄격하게 구별된다.
window.Alert("text!"); // 오류
  • 위의 코드에서 alertAlert는 각각 별개의 명령으로 인식된다.

4.4 복수의 문장을 단일행으로 작성이 가능하다.

  • 세미콜론으로 문장의 종료를 나타내면 하나의 행에 복수의 문장을 포함하는 것도 가능하다.
window.alert("text!"); window.alert("text1!");
  • 하지만, 코드의 가독성이 떨어지기 때문에 사용하지 않는다.

5. 주석

  • 주석(Comment)이란, 코드에 영향을 미치지 않는 메모와 같은 정보를 뜻한다.
  • Javascript에서는 주석을 3가지 기법으로 표현한다
기법개요
// Comment단일행 주석. //부터 해당 행의 끝까지 주석으로 인식한다.
/* Comment */복수행 주석. /*~*/으로 둘러싸인 블록을 주석으로 인식한다.
/** Comment */문서화 주석. /**~*/으로 둘러싸인 블록을 주석으로 인식한다.

보면 볼수록 Python하고 비슷한 것 같다. 생각보다 어렵다기 보다는 체계가 확실히 잘 잡혀있는? 언어라는 생각이 들어서 거부감이 들지 않는다.

end

profile
Believe you can & you're half way there 🙏

0개의 댓글