자바스크립트 (1) 정의

자바스크립트를 배우기 전에 필요한 사전지식

- HTML
- CSS

 

---

 

자바스크립트

 

JavaScript는 객체(object) 기반의 스크립트 언어이다. 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. HTML로는 웹의 틀을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현한다. 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다. 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다.

 

클라이언트	서버
html	JSP	JAva(빈)
css	html
javascript	JSON - 안드로이드, 애플, pc 다 됨

 

 

자바스크립트의 역사

 

자바스크립트는 1995년에 Netscape의 브렌던 아이크(Brendan Eich)에 의해 만들어졌다. 처음에는 Mocha라는 이름으로 개발되었으나 이후 LiveScript, 최종적으로는 JavaScript라는 이름으로 변경.

 

 

 

 

자바스크립트의 언어적 특징

 

1. 자바스크립트는 객체 기반의 스크립트 언어

2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어

3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

 

 

 

자바스크립트로 할 수 있는 것

 

1. HTML의 '내용'을 변경

2. HTML의 '속성'을 변경

3. HTML의 '스타일'을 변경

 

출처 : 생활코딩

 

 

 

자바스크립트 문법

자바스크립트의 실행문은 세미콜론(;)으로 구분되며 대소문자를 구분한다.
마찬가지로 리터럴은 작은 따옴표를 사용.

 

 

 

식별자

변수나 함수의 이름을 작성할 때 사용하는 이름. 식별자는 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용한다. 식별자는 숫자와 식별자의 구별을 빠르게 할 수 있도록 숫자로는 시작할 수 없으며 유니코드를 사용한다.
식별자는 다음 두 가지 방법으로 사용할 수 있는데 1번 방식을 많이 이용한다.

1. Camel Case 방식

2. Underscore Case 방식

 

 

 

주석(comment)

 

// 주석문

 

위와 같이 사용하며 여러 줄 주석은 절대로 중첩해서 사용해서는 안 됩니다. 
중간에 끊길 수도 있는데 오류로 뜨지 않는 경우도 있기 때문.

 

 

 

 

자바스크립트에서 사용할 수 있는 출력 방법

 

1. window.alert() 메소드

자바스크립트에서 가장 간단하게 데이터를 출력할 수 있는 방법.
브라우저 위에 alert 대화상자(창)를 띄워 데이터를 전달한다.

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

가장 많이 사용되는 방법.
getElementByID()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택하고서 
innerHTML 프로퍼티를 이용하면 선택된 HTML 요소의 내용(content)이나 속성(attribute)값 등을 손쉽게 변경할 수 있다.

3. document.write() 메소드

웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력한다.
대부분 테스트나 디버깅을 위해 사용된다.
웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드가 실행되면,
웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하게 되어
테스트 이외의 용도로 사용할 때에는 충분히 주의해서 사용해야 한다.

4. console.log() 메소드

웹 브라우저의 콘솔을 통해 데이터를 출력한다.
대부분의 주요 웹 브라우저에서는 F12를 누른 후, 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용할 수 있다.

 

 

 

 

HTML 문서에 자바스크립트 코드를 적용하는 방법

 

1. 내부 자바스크립트 코드로 적용 : 주로 body 태그 끝부분이나 head 태그에 삽입

<script>

    document.getElementById("text").innerHTML = "환영합니다!";

</script>

 

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

 <script src="/examples/media/example.js"></script>

* 장점 : 유지보수가 편해지고 웹 브라우저가 외부 자바스크립트 파일을 미리 읽을 수 있어 페이지 로딩 속도가 빨라진다.