자바스크립트의 역사 및 기초문법

자바스크립트의 역사

1993년 Mosaic Web Browser를 만든 마크 앤더슨이 넷스케이프사를 설립한 후 이 브라우저를 업그레이드하여 Netscape Navigator라는 웹브라우저를 만들게 되었고, 전 세계 시장점유율 80%를 가지게 된다. 이후 웹브라우저에서 동적인 웹사이트 구현을 위해 브랜든 아이히를 영입, 10일만에 프로토타입에 기반한 Mocha라는 언어를 만들게 되고, 이를 LiveScript 라는 언어로 이름을 바꾸어 Netscape Navigator에서 작동시킬 수 있게 된다.

마크 앤더슨은 이를 더 유명하게 만들기 위해 Java에 편승하여 썬마이크로시스템과 마케팅 조약 체결 후 Javascript로 최종 이름으로 결정하여 승승 장구한다. 이 때 마이크로소프트사에서 JavaScript를 리버스 엔지니어링 기법으로 분석해 자사 인터넷 익스플로러 웹브라우저에 도입하여 동적인 웹서비스를 할 수 있도록 하고, 또한 자사의 OS에 무료로 끼워팔기 하여 시장 점유율을 높이게 되면서 넷스케이프사는 역사의 뒤안길로 사라지게 된다.

- 브랜든 아이히에 의해 모카라는 이름으로 탄생

- 라이브스크립트(LiveScript)라는 이름으로 개발

- 넷스케이프와 썬 마이크로시스템의 마케팅 조약 체결

- Java + LiveScript -> JavaScript (자바와 자바 스크립트는 완전히 다른 프로그래밍 언어)

- 유럽 컴퓨터 제조 협회에서 ECMAScript(Ecma 인터내셔널, JavaScript와 같은 스크립트 언어의 표준) 라는 이름으로 표준화 했으나 JavaScript를 포함하여 각 회사마다 다른 이름으로 사용

- ECMA-262, (표준 JavaScript)는 10개의 판 출판되었으며, Java언어에 가까워지도록 노력하고 있다.

- 자바스크립트의 라이브러리와 프레임워크 : react, vue, angular

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide

자바스크립트 특징

- 모든 웹브라우저에 자바스크립트 해석기 내장(버전에 영향받음, 최신버전의 코딩 기법은 웹브라우저 엔진이 해석 못할 수 있다.)

- 인터프리터 언어

- 동적인 웹페이지 작성을 위해 사용되는 클라이언트측 프로그램 언어

- 제어문은 Java의 제어문과 거의 동일

- JavaScript의 기본자료형은 문자열 String,숫자 Number,불린 Boolean,언디파인드 undefined,널 null이 있지만 모두 가변자료형으로 사용되어진다. 즉, 자료형을 따로 정해서 쓰지 않는다.

- 변수 선언은 3가지 방법을 사용

var : 변수 선언, 추가로 동시에 값 초기화 (전역변수)

let : 블록 범위(scope) 지역변수 선언, 추가로 동시에 값 초기화(let을 전역변수처럼 쓰면 에러)

const: 블록 범위 읽기 전용 상수 선언

자바스크립트의 자료형 분류

기본타입 - 문자열 String, 숫자 Number, 불린 Boolean, 널 null, 언디파인드 undefined

참조 타입 - 객체 - 배열, 함수, 정규표현식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>typeof_test</title>
<script type="text/javascript">
var x1 = '김철수';
//문자열 - 작은 따옴표, 큰 따옴표 무관 (유연)
var x2 = 99;
var x3 = true;
var x4; //선언

alert(typeof(x1)); //경고창
alert(typeof(x2));
alert(typeof(x3));
alert(typeof(x4));
	
	
	
</script>
</head>
<body>

</body>
</html>

자바스크립트의 활용

jQuery : 자바스크립트의 라이브러리

JSON(JavaScript Object Notation) : 자바스크립트의 객체 표기법, 서로 다른 기종간의 데이터 전송용으로 XML을 대체하여 많이 사용한다.

자바스크립트의 작성 방법

1) 인라인 자바스크립트 : 태그 내부에 직접 작성

<태그 이벤트="자바스크립트 코드">

2) 내부 자바스크립트 코드

<head> 태그 또는 <body> 태그 내부에 작성 ( 둘 다 가능 )

자바스크립트 코드

3) 외부 자바스크립트 코드

자바스크립트의 대화상자

- alert("메시지"); 단순 메시지박스로, 메시지를 띄워준다.

- var 변수 = prompt("메시지","기본값"); 입력받은 값을 변수에 저장할 때

- 만일, prompt(); 함수만 사용한다면 그저 문자열을 입력받는다. - prompt("메시지"); 함수를 사용한다면 입력과 동시에 메시지를 띄워준다.

- confirm("메시지"); 사용자의 확인을 받을 경우로, 메시지를 띄워주고 확인 또는 취소의 값을 받는다.

HTML 요소에 접근하는 방법

- id로 접근 : document.getElementByID("태그의 id")

- name으로 접근 : document.getElementsByName("태그의 name")

- class로 접근 : Document.getElementsByClassName("태그의 class")

-> class와 name은 중복가능하므로 getElements이지만 id는 중복불가이므로 getElement

배열

1) 배열 선언 방법

var 배열 = ["값, "값", "값"];

var fruits = ["apple", "banna", "mango"];

2) 배열 선언 방법

var fruits = new Array();

fruits[0] = "apple";

fruits[1] = "banana";

fruits[2] = "peach";

함수

1. 함수 이름이 있는 경우

function 함수이름(){
함수몸체;
}

2. 함수 이름이 없는 경우(무명함수)

function() {
함수몸체;
};
* 끝에 세미콜론 존재 *

3. 매개변수가 있는 함수

function 함수이름(매개변수){
함수몸체;
}

4. 내부함수 :

함수 코드 내부에 정의된 함수

function 외부함수(){
function 내부함수1(){실행문장}
function 내부함수2(){실행문장}
실행문장
}

- 외부함수 내에서 내부함수가 다른 외부 함수보다 우선(변수와 동일)

- 내부 함수를 포함하는 외부 함수에서만 사용이 가능하다.

- 외부 함수의 변수에 접근이 가능하다.

5. 자기호출함수 :

- 생성과 동시에 실행되는 함수

- 함수를 다시 호출할 수 없다(익명함수)

- 최초 한번의 실행만을 필요로 하는 초기화 코드 부분에 사용

( function() {
실행코드
}) ();

6. 콜백함수

: 함수는 객체 자료형 중 하나이기 때문에 매개변수로 사용 가능

: 함수를 매개변수로 전달하는 함수

7. 함수를 리턴하는 함수

: 함수를 매개변수로 사용할 수 있다는 것은 함수를 리턴값으로 사용할 수 있다는 것을 의미

8. 클로저

: 위의 함수를 리턴값으로 사용하는 원리를 활용해 클로저 기법을 구사할 수 있다.

- 클로저는 자바스크립트의 함수중첩 기법 내에서, 내부함수가 외부함수의 멤버에는 접근할 수 있지만 반대로 외부함수는 내부함수의 멤버에 접근할 수 없는 특징을 가진다. (내부->외부 가능, 외부->내부 불가능)

이는 내부 함수의 변수에 대해 일종의 캡슐화를 제공하는데, 이런 특징을 살려 내부함수를 호출하여 이미 종료된 외부함수의 지역변수와 같은 멤버들을 활용할 수 있다. 이렇게 되면 내부 함수가 외부 함수의 수명을 초과하여 생존하게 되는 것과 같은 결과를 초래하게 되는데, 클로저는 내부함수가 어떻게든 외부 함수 범위 밖의 모든 범위에서 사용이 가능해지면 생성된다.

단 이 때 내,외부함수의 모든 환경을 메모리가 기억하고 있기 때문에 메모리 소모가 다소 많아진다.

HTML문서에 출력

document.write("문장");

'WEB > JAVASCRIPT' 카테고리의 다른 글

가위바위보 게임 및 간이 계산기 만들기 (0)	2022.06.27
자바스크립트 예제 - 객체 (1) (0)	2022.06.27
자바스크립트 예제 및 함수 (0)	2022.06.23
자바스크립트 예제 - 제어문과 배열 알아보기 (0)	2022.06.22
이클립스 코드 어시스턴트 설치 및 설정 (0)	2022.06.21

ADUNG_DEVELOP

자바스크립트의 역사 및 기초문법