[JavaScript] 기초1

---

목차

• 자바스크립트란?
  • 프로그래밍에 대하여
  • ECMAScript에 대하여
  • 특징
• 변수와자료형
  • 소스코드 작성방법
  • 변수사용하기
  • 자료형 변수에 할당하기
• 표현식과연산자
  • 산술 단항연산자
  • 문자열 연산자
  • 논리 연산자와 관계 연산자
  • 기타 연산
• 제어구문
  • 조건문( if / else 문 )

---

 

 

 

 

ㅁ자바스크립트란?

객체 기반의 스크립트 언어이다. HTML로는 웹의 구조와 내용을 제작하고, CSS는 웹을 디자인하며,

Javascript는 웹의 동작 및 기능을 구현할 수 있도록 한다.

구체적으로는 HTML의 내용, 속성, 스타일을 변경할 수 있다.

 

자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버측 프로그래밍에서도

사용할 수 있다. 

 

---

*참고 프로그래밍에 대해서

개발자는 문법을 지켜서 코딩하고 소스파일을 만든다. 이를 컴퓨터에게 명령해서 컴퓨터는 소스파일을 실행한다.

 

1. 스크립트 언어(JavaScript / Python ...) : 소스파일을 작성후 곧바로 실행이 된다. 속도가 느리다.

2. 컴파일 언어(Java / C ...) : 소스파일을 컴파일해서 실행 파일을 만들고 실행을 시킨다. 속도가 빠르다.

 

각 언어에 따라 실행환경이 다르다.

-Javascript 

       1. 브라우저에서 사용가능(프로그램 해석기)

       2. 윈도우에 별도 설치(Node.js)

 

해석기는 v8 엔진이라고 부른다.

v8 엔진이란 자바스크립트 엔진이란 자바스크립트 코드를 마이크로프로세서가 이해할 수 있는 더 낮은 수준의 언어

혹은 기계어로 변환해주는 역할을 합니다.

 

다른 말로는 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터를 말한다. 이는 웹브라우저와 node.js에서도

사용할 수 있다.

 

* ECMAScript에 대해서

ECMAScript 5는 2009년에 나온 구형이며 ECMAScript 6는 2016년에 나왔고 5 버전에 문법을 추가한 버전이다.

보통 2016년이면 ECMAScript 7, 2017년이면 ECMAScript 8 이라고 한다.

 

ECMAScript는 Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언이이다.

여기서 Ecma는 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구이고

여기서 만든 규격 ECMA-262는 범용목적의 스크립트 언어에 대한 명세를 담고 있다.

 

즉 JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어이다.

따라서 ECMAScript 문서를 읽게 되면 어떻게 스크립트 언어가 만들어졌는지 알 수 있고,

JavaScript 문서를 읽게 되면 어떻게 스크립트 언어을 쓸 수 있는지 알 수 있다.

 

 

*문법의 구조

1. 자료(변수, 표현식, 연산자 등)

2. 처리흐름(제어구문 등)

3. 사용자 라이브러리(함수 등)

 

---

 

ㅇ특징

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

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

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

 

 

-공부사이트

www.tcpschool.com/

코딩교육 티씨피스쿨

 

ㅁ변수와 자료형

ㅇ소스코드 작성방법

HTML 안에 코드를 작성하고 실행은 브라우저에서한다.

 

-콘솔에 출력하기

출력 코드는 아래와 같다. 자바스크립트는 대소문자를 다르게 인식하므로 확인해야 한다.

console.log('내용');

 

개발자모드 콘솔에서 출력 내용을 확일할 수 있다.

브라우저 'F12' 개발자모드에서 'Console'클릭

 

 

보통 헤드태그 안에 쓰면 선언적인 의미를 가지고

바디 태그 안에 쓰면 실행적인 의미를 가진다.

 

 

-외부에서 .js파일 불러와서 사용하기

default.js 파일

 

-html 문서에 출력하기

 

document.write('내용'); 에다가 html 태그를 같이 사용할 수 있다. 위에 예제에서는 <b> 태그를 사용했다.

 

보통 console 출력은 디버깅하는 용도로 쓰이고 document.write 출력은 결과를 출력한다.

ㄻ

 

 

-화면에 테이블 출력하기

 

 

ㅇ변수 사용하기

변수를 선언할 때 사용하는 선언자는 var이다.

처음 변수를 할당할 때를 변수의 초기화라고 한다.

 

 

변수의 초기화와 할당을 동시에 하려면 아래와 같이 작성한다.

var num1 = 10;

만약 초기화 되지 않으면 undefined 에러가 나온다.

 

 

-var 사용하지 않고 변수 선언 및 할당

num3 = 30;

이라고 해도 선언 및 할당은 되지만 console.log(num3); 을 입력하면 에러가 나온다.

var을 사용하지 않아도 자바스크립트 엔진이 그 변수를 자동으로 전역 변수로 선언하기 때문이다.

 

ECMAScript 5부터 추가된 strict 모드를 완벽한 문법으로 코딩할 수 있도록한다.

아래와 같이 "use strict"를 사용하면 변수 선언자 var을 꼭 써야한다.

 

 

-let 과 const 

let 은 변수이고 var의 변형이다. let문은 블록 유효 범위를 갖는 지역변수를 선언한다.

const 는 블록 유효 범위를 가지면서 한 번만 할당할 수 있는 변수(상수)를 선언한다.

 

이들은 중복선언은 안된다. 아래는 중복선언 및 let 선언자 사용예시

    let book1 = 'testbook';
    console.log(book1)
    let book1 = 'samplebook';  //에러
    console.log(book1)

따라서 최초 선언할 때만 let을 사용하고 그 이후에는 바로 변수명에 변수값을 대입시키면 된다.

    let book1 = 'testbook';
    console.log(book1)
    book1 = 'samplebook';   //정상 실행
    console.log(book1)

 

 

const 선언자 사용도 let과 동일하다. 하지만 const문으로 선언한 상수 값은 수정할 수 없다.

또한 반드시 초기화해야한다.

그러나 상수 값이 객체이거나 배열일 경우에는 프로퍼티 또는 프로퍼티 값을 수정할 수 있다.

    const book2 = 'testbook';
    console.log( book2 );

 

 

ㅇ자료형 변수에 할당하기

-숫자 형태의 자료 저장(Number)

 

 

 

진수표현도 가능하다.

 

 

-문자열 형태(String)

문자열을 "" 쌍따옴표나 '' 작은따옴표 모두 사용가능하다.

 

-템플릿 문자열 사용하기

문자열을 사용할 때 엔터키를 쳐서 문단을 나누고 싶을 때 ` 키로 문자열을 묶어주면 된다.

 

 

-논리형 자료(Boolean)

 

 

ㅁ표현식과 연산자

ㅇ산술 단항 연산자

    let n3 = 1;
    let n4 = 1;
    let n31 = n3++;
    let n41 = ++n4;

    console.log(n3);
    console.log(n4);
    console.log(n31);
    console.log(n41);

위 코드의 출력결과는 아래와 같다.

n31 = n3++; 은 n3의 값(1)이 먼저 n31에 저장되고나서 n3을 1 올려주는 것이고,

n41 = ++n4;는 먼저 n4의 값을 1 올리고나서 n41에 할당하는 것이다.

 

 

ㅇ문자열 연산자

-문자열 연결

+연산자는 문자열을 서로 연결한다.

 

만약 문자열과 숫자를 함께 +연산자로 사용하면 문자열로 인식해서 출력한다.

 

 

,콤마 사용해서 연결하기

,콤마를 사용하면 공백이 생긴 다음 문자열이 연결되고 +연산자는 문자열을 바로 연결시킨다.

 

-문자열 연결해서 HTML 문서 작성하기

변수명 html에 html태그들을 모두 적어서 한꺼번에 출력시킨다.

 

 

-템플릿 문자열로 HTML 문서 작성하기

대부분 템플릿 문자열을 이용해서 HTML 문서를 작성한다.

 

 

ㅇ논리 연산자와 관계 연산자

-동일 연산자 (==)

좌변과 우변의 피연산자가 같은지 판별한다.

만약 좌우 피연산자의 타입 다를 경우 아래 규칙에 따라 판별한다.

 

- undefined와 null은 같은 것으로 친다.

null == undefined  //true

- 한쪽이 숫자고 다른 한쪽이 문자열이면 문자열을 숫자로 변환해서 비교한다.

1 == '1'  //true

- 둘 중에 한쪽이 논리값이면 true는 1, false 는 0으로 변환해서 비교한다.

true == 1  //true
true =='1' //true

- 한쪽이 객체고 다른 한쪽이 숫자 또는 문자열이면 객체를 toString이나 valueOf메소드를 사용해서 원시

  타입으로 변환한 다음에 비교한다.

(new String("a")) == "a"  //true
(new Number(2)) == 2      //true

 

 

ㅇ기타 연산

-typeof

 

이는 단항 연산자이며 피연산자의 데이터 타입을 뜻하는 문자열을 반환한다.

 

-조건연산자(삼항연산자)

 

주어진 조건의 참과 거짓에 따라 값을 선택한다.

var partity = ( a % 2 == 0 ) "짝수" : "홀수";

 

 

 

 

ㅁ제어구문

제어구문은 순차적 실행 흐름을 변화시키는 문장을 의미하고

 

조건문과 반목문, 점프문이 있다.

 

- 조건문 : 조건에 따라 처리를 분기 

- 반목문 : 조건에 따라 처리 횟수를 지정

- 점프문 : 프로그램의 다른 위치로 이동

ㅇ조건문(if/else문)

조건문의 조건에는 비교 또는 논리 연산자만 들어갈 수 있다.

 

-현재시간을 받아와서 오전 오후 나누기

이번에는 현재시간을 받아와서 오전과 오후를 나눠보자.

-중첩 if문 사용

if문과 else문 사이에 추가로 if문을 중복해서 사용할 수 있다.

 

 

중첩 if문을 사용해서 학점을 나타내는 기능을 구현한다.

두 가지 버전이 있다.

 

 

-사용자에게 점수를 입력받고 학점을 출력하는 기능 만들기

 

 

 

 

 

[참고]

www.tcpschool.com/javascript/js_intro_basic  

wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html(쉽게 설명)