STS 123::자바스크립트 기초

1. 자바스크립트 개념이해


본 강좌에서는 자바스크립트를 배우게 됩니다. 자바스크립트는 정적인 HTML 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나 사용자와의 상호작용을 담당하게 됩니다. HTML이나 CSS와 달리 자바스크립트는 C언어, 자바와 같은 일반 프로그램언어와 비슷한 구조를 가지고 있습니다. 따라서 단순히 콘텐츠 제작만을 생각하는 프론트엔드 초보 개발자에게는 가장 어려운 부분이라 할 수 있습니다. 여기서는 자바스크립트의 기본 개념과 핵심 문법을 중심으로 HTML, CSS와의 상호작용을 위한 문서객체모델 등을 배우게 됩니다.

이 강의를 통해 웹개발자가 필수로 알아야하는 JavaScript 언어가 무엇인지, 어떤 특징을 가지고있는지, 기본 문법과 구문을 알아보고, JavaScript를 활용할 수 있습니다.


01: 자바스크립트란 ?

JavaScript는 객체(object) 기반의 스크립트 언어로 웹의 동작을 구현할 수 있습니다. JavaScript는 주로 웹 브라우저에서 사용되나 Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍에서도 사용할 수 있습니다. 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 JavaScript 인터프리터가 내장되어 있습니다.

js_1-1

동영상 강좌

참고 자료

퀴즈

1) 인터프리터 언어란 무엇인가요?

해답보기

컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어입니다

2) JavaScript는 HTML으로 작성한 내용을 숨기거나 바꿀 수 있다. (O/X)

해답보기

  • O

js_1-1



02. 기본 문법

HTML에서 JavaScript 코드는 반드시 <script>태그 사이에 작성해야합니다. JavaScript의 실행문은 세미콜론(;)으로 구분됩니다.

1) 변수 선언

var number, NUMBER;
number = 10;

2) string 변수

var string;
string = "Java Script";

3) 배열 선언

var korea = ['seoul', 'busan', 'incheon'];
alert(korea[1]); // 'busan'

4) 출력 방법

5) 연산자

Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
Operator Description
&& logical and
|| logical or
! logical not

6) 주석달기

// single-line comment

/* 
multi-line comment
multi-line comment
*/

7) 적용방법

내부 JavaScript

<script>
  alert('hello world');
</script>

외부 JavaScript

//external.js 파일
function printDate() {
  alert('hello world');
}
<head>
  <script src="../external.js"></script>
</head>

동영상 강좌

참고 자료

퀴즈

1) JavaScript에서 변수를 선언하는 키워드는 무엇입니까?

해답보기

  • var

2) JavaScript코드를 작성하기 위한 태그는 무엇입니까?

해답보기

  • <script> </script>

3) JavaScript에서 변수의 값을 출력하기 위한 코드 한줄을 작성하세요.

해답보기

<script>
  var a = "JavaScript";
  document.write(a);
</script>

03: 실습 예제

기본 실습은 통합실습페이지에서 한꺼번에 다루고 있습니다. 아래의 링크를 클릭하면 새창(탭)이 열리고 해당 예제로 이동하게 됩니다.

04: 참고 자료