[Javascript] 자바스크립트 기초

자바스크립트(Javascript) 소개

자바스크립트란 객체 기반의 스크립트 언어로, 웹 브라우저에서 동작되는 스크립트 언어입니다.

HTML은 정적인 레이아웃을 표현한다면, 자바스크립트(JavaScript)는 동적인 기능을 표현하는 언어입니다.

모든 브라우저에서 지원하며, 다양한 라이브러리 지원되는 언어입니다.

 

자바스크립트의 요소

ECMAScript

ECMA스크립트, 혹은 ES란 ECMA-262의 기술 규격에 따라 표준화된 스크립트 프로그래밍 언어를 말합니다.

ECMA는 자바스크립트를 표준화시키기 위해 만들어졌습니다.

ECMA는 버전이 여러가지가 있습니다. 현재 ES11까지 나왔으나, 기업에서 가장 선호하는 건 ES6 입니다.

* 이유는 react.js와 Vue.js가 ES6 기반으로 만들어졌기 때문입니다.

 

클라이언트 측 자바스크립트

클라이언트 자바스크립트란 웹 브라우저에서 작동하는 자바스크립트입니다. 웹 브라우저 API와 ECMAScipt가 규정한 언어로 구성되어 있습니다.

• Window 인터페이스 : 자바스크립트로 브라우저를 조작하는 기능을 제공
• DOM : 자바스크립트로 HTML 문서를 조작하는 기능을 제공
• XMLHttpRequest : 자바스크립트로 서버와 비동기로 통신하는 기능을 제공

서버 측 자바스크립트

웹 서버에서 작동하는 자바스크립트를 서버 측 자바스크립트라고 합니다. 

• Node.js : 구글이 개발한 자바스크립트 실행 환경
• Rhino : 모질라가 개발한 자바스크립트 실행 환경
• Aptana Jaxer : 압타나가 개발한 자바스크립트 실행 환경

 

 

자바스크립트의 기초 문법

주석처리

/* 여러 줄에 주석을 적용하는 경우 */
// 한 줄에 주석을 적용하는 경우

자바스크립트에 주석처리하여 코드에 설명을 추가 할시에는 위의 코드를 사용하여 주석처리합니다.

 

 

대문자와 소문자

자바스크립트는 대소문자를 구별합니다. date와 Date는 각각 다른 문자열로 처리됩니다.

날짜 객체 생성 : New date();(X)
날짜 객체 생성 : new Date();(O)

 

객체 선택

자바스크립트는 css와 다르게 문자열 사이에 '-' 를 사용하지 않습니다.

document.getElementById('id명')
document.getElementsByClassName('class명')
document.getElementsByTagName('태그명')  /* 예시 : 'h1', 'div' */
document.getElementsByName('name명')
document.querySelector('header > a')
document.querySelectorAll('header a')

위의 예제를 보면 이해가 쉬우실 거예요."getElementById" 와 같이 문자열의 시작부근에 대문자로 시작합니다.

자바스크립트의 중요하지만 기본적인 문법이니 꼭 기억해두세요.

 

기초 예제1

아래의 예제는 별도의 스크립트 파일을 연결하거나, html 문서내의 <script></script> 태그사이에서 자바스크립트를 사용하는 방법입니다.

<script>
document.getElementById('div').style.backgroundColor='#000000';
</script>

* 자바스크립트 풀이

document : HTML 문서를 말한다

getElementByID('div') : id가 div인 html요소를 선택한다.

style.backgroundColor="#000000" : 함수실행, #div 요소의 배경색을 #00000으로 바꿔라.

 

기초 예제2

아래의 예제는 문서내의 요소에 inline으로 자바스크립트를 사용하는 방법입니다.

<button type="button" onclick="document.getElementById('abc').innerHTML='자바스크립트 사용'">버튼</button>

* 자바스크립트 풀이

* onClick="버튼을 클릭했을 때 자바스크립트가 실행된다.

document : HTML 문서를 말한다

getElementByID('div') : id가 abc인 html요소를 선택한다.

innerHTML : 함수실행, #abc 요소의 html안에 있는 text를 변경한다.

 

 

기초 예제3

아래의 예제는 onClick 이벤트에 '함수명'을 넣어 JavaScipt 함수를 호출하여 동작시키는 방법입니다.

<button id="button1" onclick="button1_click();">버튼1</button>
<script>
function button1_click() {
	alert("버튼1을 누르셨습니다.");
}
</script>

* 자바스크립트 풀이

* onClick="버튼을 클릭했을 때 자바스크립트가 실행된다.

function : 함수를 호출한다.

button1_click(): 사용자가 onClick="" 이벤트에 정의한 함수명

alert : 함수실행, alert창이 생성된다.