본문 바로가기

Dev. Front-End/JavaScirpt

[Javascript] 기본문법 ( 표현식, 주석, 출력-alert, 각종 자료형, 이스케이프문자 )

 

 

자바 스크립트를 실습하기 위해서 editor가 필요합니다.

 

아래 링크를 클릭하고 설치방법을 통해 설치하고 실습하시면 됩니다!

(아래 아톰 에디터 설치방법 참고)

https://choseongho93.tistory.com/entry/HTML-아톰atom설치방법-및-설정-출력해보기-무료-웹-에디터

 

[HTML] 아톰(atom)설치방법 및 설정 & 출력해보기 (무료 웹 에디터)

▶ 아톰(atom)설치방법 및 설정 & 출력해보기 (무료 웹 에디터) ● 아톰(Atom)이란? : 다양한 프로그래밍 언어의 편집이 가능한 편집기입니다. 패키지를 통해 사용자 편의에 맞도록 커스터마이징할 수 있습니다. (..

choseongho93.tistory.com

 

 


기본 용어

- 표현식 : 값을 만들어 내는 간단한 코드

- 문장 : 하나 이상의 표현식이 모여 구성되는 코드를 읽어 들이는 단위가 되는것

- 키워드 : 프로그래밍 언어가 처음 만들어질때 정해진 특별한 의미가 있는 단어

- 식별자 : 이름을 붙일 때 사용하는 단어

- 주석 : 문자를 표현할 때 사용하는 자료형

- 숫자 : 숫자를 표현할 때 사용하는 자료형

- 불 : 참과 거짓을 표현할 때 사용하는 자료형

- 변수 : 값을 저장할 때 사용하는 식별자

 

 

 

 

주석

: 프로그램 코드를 설명하는 데 사용하며, 프로그램 진행하는데에는 전혀 영향을 주지않습니다.

사용방법은 HTML태그 주석은 입니다.

자바 스크립트에서는 // 또는 /* */으로 표현됩니다.

<!<!DOCTYPE html>
<<!DOCTYPE html>
<html>
  <head>
<!-- 주석 -->
<script type="text/javascript">
  // 주석
  /* 주석 */
  
</script>
  </head>
  <body>
    
  </body>
</html>

 

 

 

 

출력

: alert()함수를 사용하면 웹브라우저에 경고창을 띄울수있습니다.

 

<!<!DOCTYPE html>
<<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      alert('Hello JavaScript!!!');
    </script>
  </head>
  <body>
    
  </body>
</html>

위처럼 경고창이 뜨는걸 확인하실 수 있습니다.

Hello JavaScript!!! 와같은걸 문자열 자료형이라고 합니다. 즉, 문자를 표현할때 사용합니다.

 

 

 

 

 

 

문자열 자료형 (이스케이프 문자 사용)

: 문자열 자료형은 위에서 언급했듯이 Hello JavaScript!! 와같은 것을 말합니다.

이스케이프 문자는 특수한 기능을 수행하는것 입니다. ( 여기서 \은 역슬래쉬입니다. )

 

<html>
  <head>
    <script type="text/javascript">
      alert('이것은 \n string입니다.');
      alert('이것은 \t string입니다.');  
      alert('이것은 \' string입니다.');  
      alert('이것은 \" string입니다.');  
      alert('이것은 \\ string입니다.');  
    </script>
  </head>
  <body>
    
  </body>
</html>

위 소스를 통해 실습해보시면 확인이 가능합니다.

 

 

 

 

 

 

 

 

숫자 자료형

: 정수와 유리수의 구분 없이 모두 같은 자료형으로 인식합니다.

<html>
  <head>
    <script type="text/javascript">
      alert(5+3*2);  
      alert((5+3)*2);
    </script>
  </head>
  <body>
    
  </body>
</html>

위연산자는 우선순위가 있습니다.

왼쪽사진은 5+3 *2의 연산결과이고, 오른쪽사진은 (5+3)*2의 연산결과입니다.

나머지 연산자(%)는 10%7로 입력하면 3이라는 출력이 뜹니다.

즉, 좌변을 우변으로 나눈 나머지라고 생각하면 됩니다.

 

 

 

 

 

 

 

 

불 자료형

: true과 false라는 값을 표현할때 bool 자료형을 사용합니다.

아래는 '비교 연산자'입니다.

 

 

 

 

 

 

<html>
  <head>
    <script type="text/javascript">
      if (50>20) {
        alert("20보다 50이 큽니다.")
      }else {
        alert("20보다 50이 작습니다.")
      }
    </script>
  </head>
  <body>
    
  </body>
</html>

 

위에서는 현재 if문을 사용했습니다. 아직 생소하신 분들도 계시겠지만,

만약에 50>20이 참이라면 alert("20보다 50이 큽니다.")라는 문구가 출력됩니다.

즉, 맞는 말이기에 alert("20보다 50이 큽니다.")라는 사진과같이 출력됩니다.

if문은 다음편에서 소개해드리겠습니다.