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

자바 스크립트는 웹 브라우저 전용 언어라 웹 개발자들이 많이 사용한다. 

 

사용법은 간단하다. script 태그 안에  자바 스크립트 문법을 넣으면 된다. 

 

예를 들어서 

    <script>
        // javascript coding 가능...
        window.alert('안녕하세요, 시작합니다.');
    </script>

이렇게 쓰면 안내창이 뜬다. 사이트 들어가서 뜨는 알람창은 저 문장을 사용해서 하는 것이다. 

 

저 문장을 어디에 쓰는지에 따라서 효과가 조금 다른가 보다. 

 

파일 안에 쓸수도 있고 외부에서 쓸 수도 있다.

 

<script type="text/javascript" src="scripts/hello_external_jsfile.js"></script>

외부에서 쓰는 경우 src를 이용해서 파일의 위치를 지정해주면되는데 저 파일 안에 있는 코드는 다음과 같다. 보통 이런 식으로 사용한다.

// window.alert은, 지정된 문자열을 대화 상자 표시를 위한 명령이다.
window.alert('안녕하세요, 자바 스크립트!');

 

# 변수 선언하기 

## var 명령

초기 값이 없이 변수명만 선언하면 undefined값이 할당된다. 

중복을 허용하기에 오류가 발생할 가능성이 있다.

## let 명령

변수의 중복이 허용되지 않는다. 

또한 c++처럼 블록 스코프를 인식한다. {}안의 지역 변수를 만들 수 있다. 

## const 명령

변수명은 대문자로 표기하고, 두 단어 이상인 경우에 단어 사이에 _를 붙인다는 특징이 있다. 

USER_NAME과 같은 형식으로 사용한다. 

// Javascript에서는 정수, 실수, string, array등 모든 data type의 변수를 선언할 때
// var keyword 사용
// javascript에서는 변수가 선언된 때, 초기값을 보고 어떤 data type이라는 것을 유추
var a = 10;     // java => int a = 10;
var b = 32.5;   // java => float b = 32.5;
var c = [1,2,3];    // java => int[] c = [1,2,3];

// msg변수를 var로 선언하지 않고 사용해도 error 발생 않함 
// => javascript가 암묵적으로 변수에 처음 값이 대입되는 시점에 var 변수 선언함
// => 변수선언 필수 아님
msg = '안녕하세요、JavaScript！';
console.log(msg);

var x = 10;
console.log(x);

// x를 여러번 var로 선언해도 error 발생 않함
var x = 20;
console.log(x);

// number data 타입에서 문자열(string) data type으로 변경도 가능
x = "data type 변경도 가능";
console.log(x);

// 변수만 선언하고 값을 할당않하면 y값에 undefined 로 들어감
var y;
console.log(y);

다음 코드는 자바 스크립트 변수에 관한 코드이다. 이 코드를 실행하면 아무것도 보이지 않는다. 

하지만 개발자 모드로 들어가서 보면 log가 찍혀있다.

이런식으로 찍혀 있는 것을 볼 수 있다. 초기화를 하지 않으면 undefined로 저장된다. 

var를 쓸 경우에 파이썬과 비슷하게 데이터 타입을 따로 지정해주지 않아도 된다. 

 

하지만 좀 더 근본 없는게 타입을 자기 맘대로 바꾼다. 한번 결정된 타입을 번복한다....

또한 같은 변수 이름으로 변수를 또 만들 수 있다. 이게 무슨 말인가;;

 

그래서 Let이라는 타입이 나왔고 프로그래머의 상식과 비슷하게 동작한다.

 

// var과 마찬가지로 let도 모든 data type을 선언할 수 있음
let test= 10;
console.log(test);
test = 20.5;
console.log(test);
test = "this is test";
console.log(test);

let msg;
// let msg= 10;    // let은 동일 변수명으로 중복 선언을 불가

let x, y;

let greeting = '안녕하세요、자바스크립트！';

console.log(greeting);

// let greeting = "중복값 할당하면 에러 발생";

// let은 block scope을 지원
{
    let z = 2;
}
// console.log(z); // error 발생

// 원래 es5, javascript는 block scope을 지원 않함
{
    var a = 10; //global scope 처럼 인식
}
console.log(a);

let은 블록 스코프를 지원한다고 한다. 때문에 블록 안에서 선언된 변수를 밖에서 호출하면 에러가 발생한다. 

 

var의 경우에는 근본 없이 글로벌 스코프로 동작한다. 파이썬이라고 해도 블록 안에 있는 것은 블록 안에서만 동작하는데...

 

추가적으로 const를 지원한다. 

 

// const : 상수 선언
const TAX = 1.08;
var price = 100;
console.log(price * TAX);

# 리터럴

## 탬플릿 문자열 리터럴

`로 감싸서 사용하면 변수를 넣을 수 있다.

## 배열 리터럴 

var data = ['JavaScript', ['jQuery', 'prototype.js'], 'ASP.NET']; 와 같이 사용할 수 있다.

참고로 파이썬과 비슷하게 참조형임. 참조형은 const도 뚫고 새로 만들 수 있음.

var data2 = ['JavaScript', ['jQuery', 'prototype.js'], 'ASP.NET']; 로 만들었을 때,

data != data2이다. 왜냐하면 다른 참조를 하고 있기 때문이다. 약간 특이한 점임. 하지만 기본형은 상관없는 이야기임.

## 객체 리터럴

{} 쓰는 애들

## 함수 리터럴 

function() { ... }를 변수 값에 할당하는 방법

 

let name = '하은';
// ` : backquote : enter key 사용 가능, ${name} => 외부 변수값을 가져올 수 있음
let str = `안녕하세요, ${name}씨.
오늘도 좋은 날씨네요!`;
console.log(str);

// string에서는 enter key 사용 불가
let str1 = "안녕하세요, 하은씨, \n 오늘도 좋은 날씨네요!";
console.log(str1)

개인적으로 마음에 드는 기능이다. 파이썬의 fstring과 비슷한 기능을 하고 있다. 

하지만 string의 경우에는 이것이 안 되고 `를 쓰는 문장으로 가능하다. 

 

var data = ['JavaScript', 'Ajax', 'ASP.NET'];
console.log(data[0]);

// Java, C++ 배열 원소의 data type이 동일해야만 함.
var data = ['JavaScript', ['jQuery', 'prototype.js'], 'ASP.NET'];
console.log(data[1][0]);

// 배열 원소의 data type이 서로 틀려도 상관 없음
var data = [15, 'Ajax', 35.6, function() {console.log('hello')}];
console.log(data[0]);
console.log(data[1]);
console.log(data[2]);
console.log(data[3]() );

이 코드는 꽤 상식적으로 동작한다. 파이썬과 비슷한 느낌이다. 

 

자바 스크립트 제이쿼리 15 아작스 35.6 hello 순으로 동작한다.

 

여기서 함수가 등장하는데 이것은 자바 스크립트의 특징이라고 한다.

 

솔직히 이것도 조금 근본이 없는게 아닌가 하는 생각이 들기도 하고 유튜브로 지나가다 쓰지 말라 한 것 같기도...

 

나중에 더 자세하게 다룰 것이다.

 

var obj = { x:1, y:2, z:3 };
console.log(obj.x);
console.log(obj['x']);

이건 파이썬의 딕셔너리와 비슷하다. 오브젝트라고 부른다. 

.x로 호출해도 되고 ['x'] 로 호출해도 된다.

 

// 변수 선언할 때 정수값, 실수값 등을 초기화 하는 것과 같이 
// 변수 선언할 때 함수를 변수 초기값으로 넣는 것이 가능
var myFunc = function() {
  console.log('function literal execution');
};
var x = 10;

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

함수는 이런식으로 쓴다. 실행하면 로그 안에 있는 문장이 로그로 찍힌다. 

 

대충 감이 온다. 

 

// 변수 선언만 하고 초기화 하지 않으면 변수에 undefined값이 들어감
var x;
console.log(x);
var obj = { a:12345 };
// obj의 b라는 key가 없는데 사용 => Java, C++에서는 syntax error
console.log(obj.b); // undefined


// null : 비어 있다라는 의미, 특히 object(객체) 초기화할 때 사용

// number 변수 초기화
var data1 = 0;

// string 변수 초기화
var data2 = "";

// boolean 변수 초기화
var data3 = false;

// object 변수 초기화
var data4 = null;

이건 꽤 상식적으로 움직인다. 초기화 안하면 undefined 들어가는 것도 알겠다.

 

없는데 호출했을 때 undefined를 출력하는 것도 꽤나 유연하네 하고 이해할 수 있다.

 

물론 다른 언어였으면 없다고 오류 떴겠지만 말이다. 

 

null은 오브젝트 객체를 초기화할 때 많이 쓴다고 한다. 기억해주면 언젠가 쓰겠지..

 

console.log(10 + 1);
// javascript : 문자열 + 숫자 => 연산 가능(숫자를 문자열로 자동형변황), 
// '10' + '1' => '101' : Javascript에서는 문자열에 + 연산 가능
console.log('10'+ 1);
var today = new Date(); // today return값이 문자열
console.log(1234 + today);

let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;
console.log(text3);

var x = 5 + 5;
console.log(x);
// 두번째 operand 숫자 5가 문자열 "5"로 data type 자동 변경(conversion)됨
var y = "5" + 5;
console.log(y);
var z = "Hello" + 5;
console.log(z);

x = 5 ** 2;
console.log(x);

// increment ++
var x = 3;
var y = x++;
console.log(x);
console.log(y);
var x = 3;
var y = ++x;
console.log(x);
console.log(y);


// 0.2 * 3을 연산하면, 오차 때문에 정확히 0.6이 나오지 않음
console.log(0.2 * 3);
console.log(0.2 * 3 === 0.6);

// 소숫점 연산 가이드
// => 소숫점 값을 일단 정수로 바꾼뒤에 연산을 행하고, 다시 소수로 변환
console.log(((0.2 * 10) * 3) / 10);
console.log((0.2 * 10) * 3 === 0.6 * 10);

자바 스크립트가 하는 연산들이다. 지들끼리만 쓰는 룰이 꽤 많아서 조금 복잡하다. 

 

1+ 1+1 은 3이다. '11' + 1 은 '111'이다. string이 더 쎈가보다. 

 

자바 스크립트에서 new Date()를 하면 오늘 날짜 같은게 나온다. 이것도 1234가 스트링이 되어서 

1234 날짜 이런식으로 나온다. [1234Fri Nov 04 2022 15:40:20 GMT+0900 (한국 표준시)]

 

하지만? let이 들어간다면 이런 이상한 것들이 안 된다. c에서 다른 타입끼리 연산이 가능하겠나??

 

 ++x, x++은 좀만 생각하면 이해할 수 있다.

 

아! 그리고 역시 소수점 오차를 생각해주어야 한다. 왜 오차가 생기는지는 컴퓨터가 소수를 표현하는 방법을 검색하자.

 

그럼 어떻게 하는냐? 정수로 올려치기를 한 다음에 소수로 계산하자. 그럼 정확한 계산이 된다.

 

var x = 1;
var y = x;
x = 2;
console.log(y); // y == 1
// 참조 객체 값 변경
var data1 = [0, 1, 2];
// data2에는 data1의 값이 들어가는데, data1의 값은 [0, 1, 2]값이 들어가 있는 메모리 address
var data2 = data1;
data1[0] = 5;
console.log(data2);


const TAX = 1.0;
// 상수 변수에 값을 변경하면 error 발생
// TAX = 1.1;

const data = [1,2,3];
// console.log(data);
// 참조형 data type의 원소에 값을 변경해도 됨
data[1] = 10;
console.log(data);
// 하지만, 새로운 data 객체를 넣으면 error 발생
// data = [4,5,6];

// const : 변수명에 선언된 값을 고정시키고, 변경시킬 경우 에러 발생
// 기본형 : 값, => 값을 변경 에러
// 참조형 : 어드레스 => 어드레스를 변경시키지 않고, 객체의 개별 원소값 변경은 가능

이것도 그냥 이해하면 평하다. 배열을 출력하면 어떻게 될까? 하는 문제이다. 

0: 5

1: 1

2: 2

length: 3

 

이렇게 예쁘게 나온다. 

 

// destructuring assigment (배열)
var data = [56, 40, 26, 82, 19, 17, 73, 99];
var [x0, x1, x2, x3, x4, x5, x6, x7] = data
console.log(x0);
console.log(x1);
console.log(x2);
console.log(x3);
console.log(x4);
console.log(x5);
console.log(x6);
console.log(x7);

// destructuring assigment에 ...(spread operator) 사용
var data = [56, 40, 26, 82, 19, 17, 73, 99];
var [x0, x1, x2, ...other] = data
console.log(x0);
console.log(x1);
console.log(x2);
console.log(other);
// 값 치환
var x = 1;
var y = 2;
[x, y] = [y, x];
console.log(x, y);

// destructuring assigment (객체)
var book = { title: 'Java포켓 레퍼런스', publish: '기술평론사', price: 2680 };
var { price, title, memo = '없음' } = book;
console.log(title);
console.log(price);
console.log(memo);

// 중첩된 객체 분해
var book = { title: 'Java포켓 레퍼런스 ', publish: '기술평론사', price: 26800,
  other: { keywd: 'Java SE 8', logo: 'logo.jpg' } };
var { title, other, other: { keywd } } = book;
console.log(title);
console.log(other);
console.log(keywd);

// 변수 publish의 별명을 company로 지정
var book = { title: 'Java포켓 레퍼런스', publish: '기술평론사' };
var { title: name, publish: company } = book;
console.log(name);
console.log(company);

---

# 연산자 

## 등가 연산자 ==

문자열을 숫자로 변환하면서까지 비교를 한다. 

예를 들어서, '3.14E2' == 314이고, '0x10' == 16이고, '1' == 1이 모두 참이다.

## 동치 연산자 ===

얘는 그래도 타입까지 신경써주어서 계산한다. 위에 것들 다 틀림.

## 조건 연산자 ?

var x = 80; console.log((x>=70) ? '합격' : '불합격');과 같은 형식으로 사용한다.

## 논리 연산자 || 와 &&

얘네들은 응용이 특이하다. &&는 IF문과 비슷하게 활용된다.

x === 1 && console.log('안녕하세요')는 앞에 것이 참일 때만 뒤에 것이 실행된다.

## typeof 연산자

typeof num, typeof str과 같이 그냥 띄어쓰기로 쓴다. 

## delete 연산자 

배열이나 객체에서 삭제할 수 있다. 하지만 인덱스가 변하는 것은 안된다.

또한 특이하게 var로 선언한 것은 삭제가 안되고 그냥 선언한 것은 삭제가 가능하다.

---

# 함수 [ch05-84 p]

## 정의 방법

1. function명령으로 정의한다. 2. Function constructor 경유로 정의한다. 3. literal 표현으로 정의한다. 4. arrow함수로 정의한다. 

1.

function get(base, height) {

   return base * height / 2;

}

와 같은 형식으로 사용한다.

2. 권장하지 않는다고 한다. var get = new Function('base', 'height', 'return base * height / 2;');로 사용한다. 

3. 함수도 리터럴로 만들 수 있다. 따라서 

var get = function(base, height) {

   return base * height / 2;

}

get (5,2); 하면 된다.

4. let get = (base, height) => {

   return base * height / 2;

};

로 만들 수 있다. 왜 이렇게 하는거지?

## 주의 사항 

1. 함수는 data type들 중의 하나이다. 

2. 정의보다 실행이 먼저여도 정상 동작한다. 왜냐면 알아서 위로 올려주기 때문이다.

3. 리터럴/Function 생성자는 실행할 때 판단이 된다. 그래서 권장 안하는 건가보다.

## 변수 scope

글로벌 스코프가 있고 로컬 스코프가 있고 블록 스코프가 있다.

로컬 변수는 함수의 첫 부분에서 선언하는 것이 좋다. 안 그러면 오류 생길 가능성 높음.

---

# 객체지향 구문

## 생성자로 초기화 하기

var Member = function(firstName, lastName) {

   this.firstName = firstName;

   this.lastName = lastName;

   }

};

var mem = new Member('철수', '강');

와 같은 형식으로 할 수 있다.

 

한가지 재밌는 점은 동적으로 매소드를 추가할 수 있다는 점이다. 

mem.getName = function() {

      return this.lastName + ' ' +this.firstName;

}

으로 사용할 수 있다. 또한 delete로 지울 수도 있다.

그래서 동일 클래스라도 동일한 인스턴스가 아닐 수 있다.

 

 

## call

var data = 'Global data';

var obj1 = {data : 'obj1 data'};

var obj2 = {data:'obj2 data'};

 

function hoge() {

 console.log(this.data);

}

 

hoge.call(null);

hoge.call(obj1);

hoge.call(obj2);

 

## class

class Member {

 constructor(firstName, lastName) {

  this.firstName = firstName;

  this.lastName = lastName;

 }

 getName () {

  return this.lastName + this.firstName;

 }

}

let mem = new Member('현우', '정');

과 같은 형식으로 사용한다.

 

상속 키워드는 extends, super 등이 있다. 오버라이딩 할 수 있음.

---

document.getElementById(id)

document.getElementByTagName(name)

document.getElementByClassName(name)