[웹 프로그래밍] 자바 스크립트

크롬등 웹 브라우저에 자바스크립트 언어를 지원해주고 있음.

자바 스크립트는 단순히 웹 브라우저에서 정적인게 아니라 동적인 화면을 구현함.

 

Ajax 기술을 통해 자바 스크립트가 랭귀지로 인정받게 되고 점점 발전된다. 

웹소켓은 통신을 실시하기 위한 API임. 

 

SPA(Single Page Application) 

단일 페이지로 구성된 웹 어플리케이션을 말한다.

맨 처음 한번 서버 접근로 우선적으로 웹 페이지(모든 실행파일) 취득해서, 이후 갱신은 자바 스크립트가 함.

모든 실행 파일 : 자바 스크립트, html, image, ... 

 

두번째부터는 필요한 데이터만 웹 브라우저로 가져온다.

웹 브라우저의 다운된 자바 스크립트 파일들에서 html 문서를 다이나믹하게 만들고, 웹 브라우저 화면에 html 문서를 display

 

자바스크립트는 인터프리터 언어임. 웹 브라우저등에서 언어를 바로 읽으면서 실행한다. 

 

ECMA라는 단체에서 표준화를 하면서 발전함. 

ES5? ES6? 자바 스크립트 버전임. 

 

웹 프로그래밍할 때, 웹 브라우저마다 자바 스크립트 문법 지원 범위가 다 틀림. 

크롬도 100퍼센트가 아닌 98퍼센트임. 에버 발생 가능성

 

해결책 : 자바 스크립트할 때 ES6문법으로 하기.

babel.js 바벨탑처럼 무너지지 않게 해주는 것.

 

<script>
 window.alert("안녕하세요");
 <script>

바디 태그 안에 어느 위치라도 스크립트 태그를 통해서 넣어줄 수 있음.  헤드에서도 가능함.

 

문법 규칙은 세미 콜론 붙이기를 기본으로 함. 

 

문장 도중에 공백이나 개행, 탭을 포함해도 됨. 문법 느슨함.

 

자바 스크립트는 사소한 문법 오류에 대해서 거의 대부분이 에러를 발생시키지 않고 정상 동작함.

나중에 큰 문제를 발생시킬 수 있음. 때문에 조심해야 함.

 

**대소문자는 엄밀하게 구분됨**

이건 사실 당연한거지...

 

변수는 var를 사용해서 함. 

 

외부에 파일을 만들어서 사용할 수도 있음.

 

// 모든 변수들은 다 var임. 구분 없음. 파이썬과 비슷함.
// 변수가 선언될 때, 초기값을 보고 어떤 데이터 타입인지 유추하는데...
var a = 10;
var b = 32.5;
var c = [1, 2, 3];

// mag 변수를 var 선언을 사용하지 않아도 err 발생이 안된다. 
// 변수 선언 필수가 아님...
msg = "하이연";
console.log(msg);

// 콘솔 로그는 디버깅할 떄 기본적으로 사용하는 방식이다. 
var x = 10;
console.log(x);

// 타입 바꾸어도 됨.
var x = "hi hello";
console.log(x);

// undefined가 들어감..?
var y;
console.log(y);

let 은 ES6에서 나와서 문제점을 좀 해결했음.

얘는 변수 중복을 허용하지 않는다. 

블럭 스코프 인식? 

// 에러가 발생하는 코드
// 이게 오히려 좋음 지역변수처럼 쓰는 것임.
{
	let z = 2;
}

console.log(z) 

// 에러가 발생하지 않는 코드
// 왜냐면 클로벌 스코프처럼 인식됨. 
{ 
	var z = 2;
}

console.log(z)

// 원래 ES5, 자바스크립트에서는 블럭 스콥을 지원 안함.

// let도 모든 변수 타입으로 선언가능함.
let msg;
let msg=10; // let은 동일 변수명으로 중복선언이 불가함.

const? 상수처럼 만들 수 있는 명령어. 

 

number : int, short, byte, float, double, char, ...

var a = "hello"; (자바스크립트는 문자열 기본형)

자바는 클래스인 스트링임. 

null 대신에 undefined가 있음. 

 

자바 스크립트도 객체 지향 언어라고 하는데... 

 

자바스크립트의 꽃은 함수가 데이터 타입임. 

함수를 이해하면, 자바스크립트의 반을 이해하는 것임. 

 

기본형 : 변수값이 메모리에 직접 저장됨.

참조형 : 변수값이 실제 데이터가 있는 주소를 갖고 있음. 

 

리터럴 : 정수 리터럴, 부동 소수점 리터럴 , 문자열 리터럴 (주의점! '하이', "하이" 둘 다 되는데 '하'이' 는 안됨. "하'이"는 됨.)

**템플릿 문자열 리터럴** : ` 를 사용하면 여러 줄을 활용할 수 있음. 엔터키 활용할 수 있음 또한 $를 사용해 외부 변수값을 가져올 수 있음.

let name = "하은";

// 얘는 되는데
let str = `안녕하세요, ${name}씨.
오들도 좋은 날씨네요!`;
console.log(str);

// 이거 안됨
let str = "안녕하세요, 하은씨,
오늘도 좋은 날씨네요!"

string에서는 엔터키 사용이 안된다. 굳이 하고 싶으면 \n을 해야함. 한줄로 쓸 것!

 

// datatype이 동일할 필요가 없음.
var data1 = ['java', ['jquery', 'prototype.js'], 'asp.net'];

var data2 = [15, 'ajax', 35.6, function() {console.log("hello")}];
console.log(data2[3]);


// 객체 리터럴 : 파이썬의 딕셔너리와 유사함
var obj = {x:1, y:2, z:3};
console.log(obj.x);
console.log(obj['x']);

개별 데이터는 프로퍼티라고 부름. 

 

함수도 데이터 타입이라. 함수가 배열안에 들어갈 수 있음 ㄷㄷ......

 

함수 리터럴 : 자바 스크립트는 함수도 데이터 타입 중 하나임. 

// 얘는 함수 끝에도 세미콜론을 넣는구나? 아니 리터럴이라 그런가?
var myFunc = function() {
	console.log('function literal execution');
};

var x = 10;

myFunc(); // 함수를 실행할 경우에 반드시 사용

undefined : 어떤 변수가 선언 완료된 상태에서 값을 부여하지 않은 경우

// 선언만 하고 초기화 안 하면 undefined가 들어감
var x ;
console.log(x);
var obj = {a:123};
// 없는데 부르면 어떻게 될까? undefined가 나옴.
console.log(obj.b);

산술연산 : 자바스크립트는 문자열 + 숫자 등이 가능함.

console.log('10' + 1);  // 출력은 101 왜냐면 1을 문자로 바꾸고 연산하기 때문이다. 
var today = new Date(); // 이건 뭔데
console.log(1234 + today); //1234fridat ......

// 오차가 생기는 경우
console.log(0.2*3);
console.log(0.2*3 === 0.6); // False가 나옴 왜냐면 소수점 오차

// 정수로 바꾸고 연산한 다음에 다시 소수로 변환하면 피할 수 있음.
console.log(((0.2*10) * 3) / 10);
console.log((0.2*10) *3 === 0*6*10);

// 대입 연산자 
var data1 = [0,1,2];
var data2 = data1; // data2는 메모리의 주소가 들어가있음...?

참조형은 변경해도 되는데, const는 변경해서는 안됨. 대신 참조형은 주소를 변경시키면 안됨. 새로운 리스트를 넣을 수는 없음....

 

분할대입 : ???

 

등가 연산자 == : 얘는 ===랑 다른게 뭐지? value만 같으면 트루임.

=== : value와 data type이 동일해야 참이다. 그래서 === 사용을 권장함.

 

// null 이랑 undefined는 같은건가봄.
console.log(null==null); 
console.log(undefined == undefined);
console.log(undefined == null); // true 특이하니까 암기해요.

// 하지만 
console.log(undefined === null); // False 임. 헷갈리네...

// 객체간 비교는?
// address로 비교해서 다른 객체면 다르게 나옵니다.
var data1 = ['a', 'b', 'c'];
var data2 = ['a', 'b', 'c'];
cosole.log(data1 == data2); // False

// 등가 연산자 : 한쪽이 문자열이고 한쪽이 숫자면 문자열 -> 숫자
console.log('3.14E4' == 314); // True 왜? 숫자로 변환 가능한 부분까지만 숫자로 변환함.
console.log('0x10' == 16); // True 
console.log('1' == 1); // True

// 얘는 그럼 모두 False 값이겠지? why? 데이터 타입이 다르잖아.
console.log('3.14E4' === 314); // False
console.log('0x10' === 16); // false
console.log('1' === 1); // false

// 부등호 연산자.
console.log(2 < 12); //true
console.log(2 < "12"); //true
console.log(2 < "John"); //False 왜냐면 john은 NaN이 되기 때문에 무조건 거짓을 반환함.

// string 비교는? 문자열의 첫번쨰 문자값의 아스키 코드값이 큰 것 기준임.
console.log("2" < "12");
console.log("2" > "12");
console.kog("2" == "12");

// 3항 연산자
var x = 80;
console.log((x>=70) ? '합격' : '불합격');

 

암묵적으로 false로 인정되는 것들 : "", 0, NaN, null, undefined (외우셈.. 중요하대)

 

조건 연산자 : && 만약 좌측이 true이면 우측식은 무조건 실행시킨다는 특징이 있음.

이를 이용하면,, if(x===1){console.log("hi");} 와 x===1 && console.log('hi');는 동일한 식임.

 

일단 보고 판단하겠다는 것이다. 

 

var x = 1;
var y = 2;

console.log(x===1 && y===1);
console.log(x===1 || y===1);

var x=1;

if(x===1) {console.log('hi');}
x === 1 && console.log('hi');

// 얘는 A가 거짓이면 B를 강제로 실행한다. 참이면 앞에 것이 들어가게 된다.
var msg = ''; // false를 암시하는 것이었음...
msg = msg || 'javascript';
console.log(msg);

 실제 자바 스크립트를 코딩할떄 많이 사용하는 기법

 

delete : 객체의 프로퍼디나 배열의 요소를 삭제... 성공하면 true 실패하면 false

배열 요소 삭제한 경우 : 해당 요소 삭제 하지만 인덱스는 불변

프로퍼티 삭제한 경우 : 프로퍼티 삭제 하지만 객체 삭제 안됨

var로 명시적으로 선언된 변수는 삭제 불가능함 

 

var ary = ['a', 'b', 'c'];
console.log(delete ary[0]); // true
console.log(ary); // result : [1:'b', 2:'c']

var obj = {x:1, y:2};
console.log(delete obj.x); //true
console.log(obj.x);	// result : undefined

var obj2 = {x:obj, y:2};
console.log(delete obj2.x); // true
console.log(obj); // ?? : {y:2}

var data1 = 1;
console.log(delete data1); // false
console.log(data1); // 1

data2 = 10; // 아니 뭐야 이건 된다고???
console.log(delete data2); // true
console.log(data2); // err (없으니까)

typeof : 스트링, 숫자, 불리안은 식별하나, 배열 등등은 모두 오브젝트로 퉁 친다. 

 

# 제어 구문 

switch 를 조심하라고? 

for in 은 배열에 사용가능하나 사용하지 말라고 함. obj만 쓰라는건가?

배열인 경우에는 for()문을 사용하라고 한다. 

 

// 객체 for in
var data = {apple:150, orange:100, banana:120};
for (var key in data) {
	console.log(key + "=" + data[key]);
}

// 배열 for in
var data = ['apple', 'orange', 'banana'];
for (var key in data) {
	console.log(data[key]);
}

var data = ['apple', 'orange', 'banana'];
Array.prototype.hoge = function () {}
// for in 사용할 떄 위 함수 호출 => 배열은 for in 사용 권장 안 함
for (var key in data) {
	console.log(data[key]);
}

var data = ['a', 'b', 'c'];
for (var i=0, len=data.length; i<len;, i++) {
	console.log(data[i]);
}