자바썸
자바랑 썸타는중
자바썸

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
자바썸

자바랑 썸타는중

Language/JavaScript

[JavaScript] 자바 스크립트 시작

2022. 6. 1. 17:17

자바 스크립트 문법 

var x = 10;
var result = x + 5;

자바 스크립트는 대소문자를 구분한다. 변수나 함수 이름, 예약어 등을 작성할 때는 대소문자 구별에 유의해야 한다. 

var javascript = 10; // 변수 javascript와 JavaScript는 서로 다른 두 개의 변수로 인식됨.
var JavaScript = 20;
Var Script = 30; // 변수의 선언은 var 키워드로만 할 수 있으면 Var는 동작하지 않음.

 

- 리터럴

리터럴은 직접 표현되는 값 그 자체를 의미한다.

12            // 숫자 리터럴
"JavaScript"  // 문자열 리터럴
'안녕하세요'  // 문자열 리터럴
true          // 불리언 리터럴

 

- 식별자

식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미한다. 영문자, 숫자, 언더바, $만을 사용한다.

숫자와 하이픈('-')은 사용할 수 없다. 

 

식별자 작성은 카멜 케이스 방식과 스네이크 케이스 방식이 있다. 관행적으로 카멜 케이스 방식을 많이 사용한다. 

 

- 키워드

미리 예약된 단어를 키워드 혹은 예약어라고 한다. 이러한 키워드들은 프로그램 내에서 식별자로 사용할 수 없다.

예를 들면, var 나 function는 예약어이므로 식별자로 사용할 수 없다. 

 

- 주석

코드 내에 삽입된 일종의 설명문이다. 주석 문은 나중에 작성자나 다른 개발자가 코드를 수정할 때 참고할 수 있으며, 웹 페이지 개발 시 디버깅에도 도움이 된다. 어느 곳에서도 작성될 수 있고 웹 브라우저가 동작하는데 전혀 영향을 미치지 않는다. 

 

자바와 동일하게 한 줄 주석 문은 // 로 표현하고 두 줄이 넘어가는 주석 문은 /* */ 로 표현한다. 

 

자바 스크립트 출력

1. window.alert() 메서드

2. HTML DOM 요소를 이용한 innerHTML 프로퍼티

3. document.write() 메서드

4. console.log() 메서드

 

- window.alert() 메서드 

 

브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달해준다. 

<script>
    function alertDialogBox() {
        alert("알림 ! ");
    }
</script>

 

- HTML DOM 요소를 이용한 innerHTML 프로퍼티

 

getElementByID()나 getElementsByTagName() 등의 메서드를 사용하여 HTML 요소를 선택한다.

<script>
    var str = document.getElementById("text");
    str.innerHTML = "change";
</script>

 

- document.write() 메서드

 

웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력한다. 그래서 대부분 테스트나 디버깅을 할 때 사용한다. 

<script>
    document.write(4 * 5);
</script>

 

- console.log() 메서드

 

웹 브라우저의 콘솔을 통해 데이터를 출력해준다. 

개발자 모드를 열고 콘솔 버튼을 클릭하면 콘솔 화면을 사용할 수 있는데 디버깅에 도움을 준다.

<p>F12를 눌러서 콘솔 화면을 열면 결과를 확인할 수 있습니다.</p>
<script>
    console.log(4 * 5);
</script>

 

자바 스크립트 적용

자바 스크립트를 적용하는 방법은 아래와 같이 두 가지 방법이 있다.

 

1. 내부 자바스크립트 코드로 적용

2. 외부 자바스크립트 파일로 적용 

 

내부에서 코드로 적용하는 방법은 <script> 태그를 활용해서 HTML 문서 안에서 코드를 작성하는 것이다. 이렇게 작성한 코드는 <head> 태그나 <body> 태그 둘 중 어느 곳에 위치해도 상관없다. 

 

외부에서 파일로 적용하는 방법은 HTML 문서 외부에 .js라는 확장자를 가진 파일을 만들고 그 파일에 코드를 작성한다. 

그리고 HTML 문서에서 해당 js 파일을 사용할 수 있도록 경로를 적어주면 된다.

 

2번 방법이 HTML과 자바 스크립트를 분리하기 때문에 가독성과 유지보수 측면에서 유리한 점을 보여준다. 그리고 웹 페이지의 로딩 속도 또한 빠르다는 장점이 있다. 

'Language > JavaScript' 카테고리의 다른 글

[JavaScript] 제어문과 배열  (0) 2022.07.25
[JavaScript] 타입  (0) 2022.06.03
    'Language/JavaScript' 카테고리의 다른 글
    • [JavaScript] 제어문과 배열
    • [JavaScript] 타입
    자바썸
    자바썸

    티스토리툴바