>자바스크립트(Javascript)의 역사
넷스케이프에서의 시작
최초 웹인 www(Nexus)의 창시자가 더 발전된 브라우저를 만들기 위해 웹의 오픈소스를 개방을 했다. 이를 통해 최초로 대중적인 그래픽 웹 브라우저인 모자이크를 출시하게 되었다. 또한 이 회사의 한 직원이 회사를 설립하여 또 다른 브라우저를 내게 되었는데 그것이 nescape browser이다. 이 회사는 웹이 더 동적으로 변화할 필요가 있음을 실감하여 이미지,플러그인 등의 요소를 쉽게 조합할 수 있는 글루 언어가 필요했다고 믿었다.
1995년에는 스킴 프로그래밍 언어를 넷스케이프 내비게이터에 임베디드하기 위해 브렌든 아이크를 영입하였다.그는 무려 10일만에 언어를 완성했다. 이름은 mocha -> livescript 를 거쳐서 Javascript 라고 지금은 부른다. Java와는 다른 언어이다.
스크립트 표준화
자바스크립트가 나온 이후 인기를 끌자 Microsoft 사에서 비슷하게 JScript 라는 매우 비슷한 언어를 만들게 된다. IE 외에도 다양한 브라우저들이 개별적으로 자바스크립트 문법을 만들자 각 브라우저 간 호환성을 위해 개발자들은 많은 고생을 해야했다고 한다.
표준화를 하기 위해 넷스케이프 사는 표준화 기구인 ECMA International에 요청했고 처음엔 자신만의 길을 가던 Microsoft 사도 ECMA script5 버전부터 함께 참여하기 시작했다. 그래서 우리는 자바스크립트를 어떤 브라우저에서든 사용할 수 있게 되었다.
자바스크립트의 역사적인 사건
1995년 IE5에서 소개된 XMLHttpRequest APL가 나오며 클라이언트 측 스크립트를 http 혹은 https로 서버에게 요청하고 텍스트 형식으로 데이터 받는 것을 가능하게 했다.
2021년, 더글러스 크락포드가 텍스트 형식으로 데이터를 저장하는 자바스크립트 문법을 'JSON'이라고 명명하여 문서를 만들었다.JSON은 마크업이 아닌 구조적인 데이터를 표현할 때 사용되며 XML의 대안으로 자바스크립트와 함께 대중적인 인기를 얻었다.
2005년, Ajax를 이용해 구글이 구글Maps를 소개하여 이것의 인기가 많아지기 시작했고 JSON을 사용하는 개발자들이 더 많아졌다.
2008년, 구글이 크롬 웹브라우저를 소개하면서 V8이라고 부르는 빠른 자바스크립트 엔진을 소개했고 자바 스크립트가 느리다는 인식을 바꾸게 되었다.
2009년, Node.js 가 등장하면서 자바스크립트의 영역을 서버사이드로 더욱 넓힐 수 있게 되었다. Node.js의 장점은 친숙한 언어로 프로그래밍을 할 수 있다는 것이다. 클라이언트에서만 쓰는게 아니라 서버에서도 같은 언어로 구현할 수 있기 때문에 프론트엔드,백엔드 둘다 개발할 수 있는 개발자들이 증가하게 되었다.
(출처:https://edu.goorm.io/learn/lecture/ )
>자바스크립트의 특징
- 웹 브라우저에 자바스크립트의 엔진이 내장되어 있기 때문에 사용이 가능하다.
- 웹의 동작(동적)을 구현하기 위한 언어
- 객체 기반의 스크립트 언어
- HTML 문서 내에서 <script>~</script> 태그 안에 작성.
>자바스크립트의 출력
1. 문서 출력
document.write() 함수를 통해 <body>에 출력
2. 알람 출력
window.alert() 함수를 통해 대화상자로 출력
3. 콘솔 출력
console.log() 함수를 통해 웹 브라우저 콘솔에 출력
>외부 자바스크립트 파일로 적용
- script 태그 안에 자바 스크립트의 내용을 모두 작성하다 보면 복잡한 로직의 경우 코드가 매우 길어진다. 따라서 외부에 .js 파일을 만들어서 자바스크립트 문법들을 사용하고, 사용되어야 할 HTML 파일에서 연결하는 식으로 사용한다.
# defer
- <script>는 다운로드와 실행이 순차적으로 진행되는 것과 달리 <script defer> - defer 속성을 가진 스크립트는 브라우저가 여는태그를 만났을 때 다운로드를 시작하지만, html 파싱(해석)을 막지 않고 </html>을 만났을때 실행
>변수(variable)
-저장공간
<변수의 선언>
종류: let, var, const
- var는 예전에 사용했던 변수 선언방법, 현재는 사용하지 않음
<var를 사용하지 않는 이유>
1. 같은 이름의 변수를 선언할때 오류가 발생하지 않음
2. 지역변수와 전역변수의 구별이 모호
*let 과 const는 중복 선언이 불가능하여 코드의 안정성을 높여준다.
*const(상수)
- 선언시에 값을 대입하여 만들어야 하며 한번 선언된 상수는 재정의 할 수 없고 ,값도 재할당 할 수 없다
| 종류 | let | var | const |
| 중복선언 가능 여부 | X | O | X |
| 재할당 가능 여부 | O | O | X |
| 변수 스코프 유효범위 | 블록 내부에서 선언된 변수까지도 지역변수로 인정하는 블록 레벨 스코프이다. | 함수 제외한 영역에서 var로 선언한 변수는 '전역변수'로 취급된다. 그래서 그 그 영역을 벗어나도 참조가 가능하다.(함수 레벨 스코프이다.) | 블록 내부에서 선언된 변수까지도 지역변수로 인정하는 블록 레벨 스코프이다. |
| 변수 호이스팅 방식 | 변수 선언만 해두며 초기화는 코드실행 과정에서 변수 선언문을 만날때 수행 | 변수를 선언과 초기화(undefined로) 같이 시켜버림. | 변수 선언만 해두며 초기화는 코드실행 과정에서 변수 선언문을 만날때 수행 |
| 전역객체 프로퍼티 여부 | 전역객체의 프로퍼티가 아니다. | 전역객체의 프로퍼티이다. | 전역객체의 프로퍼티가 아니다. |
*호이스팅이란?
자바스클립트는 코드를 실행하기 전, 일종의 '코드 평가 과정'을 거치는데,
이 때 '변수 선언문'을 미리 실행두기 때문에 뒤에서 선언된 변수도 앞의 코드에서 참조할 수 있게 된다.
이를 변수 호이스팅이라고 한다. (모든 변수들 앞으로 모여봐라~ 오호 a 변수가 있구만 그래~)
<let/const 와 var 호이스팅의 차이 예 >
1.var
console.log(a)
var a = 1
console.log(a)
----------------------
--> 호이스팅시 변수의 선언과 초기화(undefined으로 ) 같이 시켜버림.
↓아래와 같은 과정이라고 생각하면 된다.
var a ;
a = undefined
console.log(a) // undefined
a = 1
console.log(a) // 1
2.let/const
console.log(a)
let a = 1
console.log(a)
--------------------------
let a ;
console.log(a) // referenceError
a = 1;
console.log(a)
->temporal death zone(TDZ)가짐 . a가 호이스팅된건 맞지만 a선언문이 나오기전까지는
접근할 수 없다. 그것이 죽은 존이다라는 뜻.
# 결론(제안)
1순위: const를 최우선적으로 사용한다.
2순위: let은 변수 값을 재할당할 필요가 있을 때만 사용한다.
3순위: var는 ES6 이후 부터... 특별한 경우를 제외하곤 쓸 필요가 없어 보인다.
출처: https://curryyou.tistory.com/192 [카레유]
>자료형
1.숫자형(정수+실수)
2.문자열형
3.객체형
Key-Value 구조의 여러 속성과 여러 값들을 하나의 변수에 저장할 수 있도록 해주는 타입
4.심볼형
유일하고 변경 불가능한 기본값을 만들음
5.undefined, null
undefined : 타입이 정해지지 않은 것을 의미
null : 값이 정해지지 않은 것을 의미, null로 변수를 초기화 한 경우
6.typeof() : 자료형 확인하는 함수
>형변환
1.자동 형변환
다른값 + 문자열 ----> 문자열
숫자*문자열
숫자-문자열 ----> 숫자
숫자/문자열
- 연산 실패시 NaN(Not a Number)
: 정의되지 않은 값이나 표현할 수 없는 값
: 숫자로 변환할 수 없는 연산을 시도한 경우
2.강제 형변환'
Number() 문자열 ->숫자
String() 숫자, 불린 -> 문자열
Object() 모든 자료형 -> 객체
Boolean() 모든 자료형 ->불린
parseInt() 문자열 -> 정수형
parseFloat() 문자열 -> 실수형
>대화상자
1. window.alert("출력할 문자열")
사용자에게 메세지를 보여주고 확인을 기다림
2. window.confirm("출력할 문자열")
사용자에게 메세지를 보여주고 확인이나 취소를 누르면 그 결과를 불린 타입으로 변환
: 사용부분 통째로 true/false 값
3. window.prompt("출력할 문자열")
사용자에게 메세지를 보여주고 사용자가 입력한 문자열을 반환
: 사용부분 통째로 사용자가 입력한 문자열 값
>연산자
:자바스크립트는 ==만 쓰는 경우 알아서 형변환을 해주면서 연산을 해준다. 그러므로 타입과 값을 모두 비교하고싶을때는 "==="를 써야한다.
'3' == 3 --> true
'3' === 3 --> false
===: 같다(타입과 값이 모두 같아야 참)
!==: 다르다(값, 타입 둘 중 하나만 달라도 참)
>배열(Array)
-자바스크립트의 배열은 Array 타입의 객체
1.배열의 선언
let 배열명 = [값1,값,...];
let 배열명 = new Array(값1,값2,...);
2.자바스크립트 배열의 특징
: 배열 요소의 타입이 고정되어 있지 않음
: 배열 요소의 인덱스가 연속적이지 않아도 됨
3.Array 객체의 메소드
push() 배열의 요소를 추가
pop() 배열의 마지막에 있는 값을 제거
shift() 배열의 첫번째에 있는 값을 제거
concat() 두개의 배열을 연결하여 새로운 배열을 생성
join() 배열 요소 사이에 원하는 문자를 삽입해 문자열로 만듦
reverse() 배열을 역순으로 재배치
sort() 배열을 정렬
>빠른 FOR문
1. for in문
: 변수가 뒤에 오는 객체의 key를 꺼내오며 반복
for(변수선언 in 객체){
}
2. for of문
: 변수가 뒤에 오는 반복자의 값들을 꺼내오며 반복
* 단순 객체는 반복자 형태가 아니므로 쓸 수 없다.
for(변수선언 in 반복자){
}
<예제1>
1.프롬프트 창을 띄워라
2.숫자를 입력했다면 '숫자'라고 새겨진 버튼 문서에 만들기
3.문자열을 입력했다면 '문자'라고 써진 파란색 텍스트 작성하기
<body>
<p id="txt"></p>
</body>
<script>
let answer = window.prompt("값을 입력하세요");
let pTag = document.getElementById("txt");
if(isNaN(answer)){
pTag.innerHTML = "문자";
pTag.style.color ='blue';
}else{
pTag.innerHTML = "<input type='button' value='숫자'>";
}
</script>
--------------------------------------------------------------------------------
<예제2>
1.table 만들기
2.아동,청소년,성인 선택하게 하기
3.선택한 나이에 따라 box 색 바뀌게 하기, ★붙이게 하기
'프로그래밍 > Javascript' 카테고리의 다른 글
| Javascript 5일차 - 이벤트, jquery (0) | 2022.01.14 |
|---|---|
| Javascript 4일차 -노드생성_복제_제거, 폼객체 (0) | 2022.01.13 |
| Javascript 3일차 -window객체,Date객체,DOM, 노드 (0) | 2022.01.12 |
| Javascript 2일차 - 함수,객체 (0) | 2022.01.12 |