js01_변수

A. javascript를 정의하는 방법

1. html파일의 script블럭안에 정의하는 방법

- 스크립트블럭은 html파일 어디나 위치할 수 있다.

- 하지만, 주의할 점은 html은 처음부터 순차적으로 실행된다.

2. html의 요소에 정의하는 방법 inline

3. 외부파일 정의하는 방법

B. JavaScript 기본문법

1. 자바스크립트는 실행문장 끝에 세미콜론(;)으로 닫아 줘야 한다.

2. 변수의 선언방법

- 변수란 하나의 저장장소를 의미한다.

- 선언하는 방법은 var, let, const or 정의하지 않거나

- var은 제한 없이 변수를 재선언 및 값 재정의가 가능

- let은 선언된 변수는 재선언할 수 없다. 값은 재정의가 가능

- const 선언된 변수는 재선언 및 값변경을 할 수가 없다.

- 변수선언의 규칙

- 영어문자, 언더스코어(_), 숫자를 사용한다.

- 첫 글자는 반드시 영문자, 언더스코어, $기호 시작해야 한다.

- JavaScript에서 사용하는 예약어(if, let, cont, for...)는 사용불가

- 변수명은 첫 글자는 소문자, Camel Case of 단어 중간에 _로 구분해서 정의하는 것이 관례

- 스타일 가이드 규칙에 의거 작성하는 것이 관례

- 구글 자바스크립트 스타일 가이드 :

- 에어비앤비 자바스크립트 스타일 가이드 : github.com/

3. 문자열의 선언은 큰 따옴표, 작은 따옴표 구분없이 정의가 가능하다.

4. 큰 따옴표 안에는 큰 따옴표 또는 작은 따옴표 안에는 작은 따옴표 사용불가

- 큰 따옴표 안에는 작은 따옴표, 작은 따옴표 안에는 큰 따옴표 사용 가능

- 큰(작은) 따옴표 안에 큰(작은) 따옴표를 사용하려면 이스케이프문자(\)사용

5. 백틱(`)을 사용하여 문자열을 간단하게 표현할 수 있다.

6. 자바스크립트는 대소문자를 구분한다.

- 예를 들어 sum, Sum, SUM은 서로 다른~

C. 이스케이프 문자(\)

\n : 줄바꿈

\t : tab키

\' : 작은 따옴표

\" : 큰 따옴표

\\ : 역슬래쉬 문자 즉 \문자를 의미

//alert('1. 안녕하세요??? 반갑습니다');

//alert("제 이름은 김연수입니다");

a = "김연수";

alert("제 이름은 a입니다");

alert("제 이름은 " + a + "입니다"); // + 숫자일 때는 더하기, 문자일 때는 연결

var a = "xxx";

let b = "소농민";

const c = "이강인";

d = "김민재";

d = '김민재';

e = '이강"인';

f = "이강\인";

g = "이강'인'";

console.log(a, b, c, d, c, f, g);

console.log('제 이름은 ' + a + '입니다')

console.log(`제 이름은 ${a} 입니다`); //백틱

// 변수명 선언 규칙

// let 1a = '값1'; (x)

// let @a = "값1"; (x)

let _a;

let $a;

let adfgfdgfdfdg;

let helloWorld = "카멜케이스방식";

let hello_world = "스네이크방식";

</script>

// 실습문제

// h1 tag : 제 이름은 본인이름 입니다.

// h3 tag : 나이는 99살입니다.

// document.write, prompt를 이용해서 출력해보기

// 변수선언 name, age라는 변수를 prompt(메세지, 기본값)를

// 이용해서 이름과 나이를 전달 받아서 출력

let name = prompt("이름을 입력하세요", "홍길동");

let age = prompt("나이를 입력하세요", 18);

console.log(`제 이름은 ${name} 입니다`);

console.log(`제 나이는 ${age} 입니다`);

document.write(`<h1>제 이름은 ${name} 입니다</h1>`);

document.write(`<h3>제 나이는 ${age} 입니다</h3>`);

</script>

</head>

<body>

<button onclick="alert('2. inline-javascript: Hello Javascript');">경고메세지</button>

<h1>제 이름은 김연수입니다.</h1>

</script>

</body>

// 호이스팅

// ECMA2015 이전에는 변수를 선언할 때 var예약어를 사용했다.

// 변수에 var로 사용해서 선언하면 호이스팅(hoisting)이라는 개념에

// 주의해야 한다. 호이스팅은 '끌어 올린다'라는 의미

// 상황에 따라 변수의 선언 부분을 '스코프의 가장 위쪽으로 끌어올린다'

// 는 것이다. 실제로 소스 코드위로 올린다는 것이 아니라 자바스크립트

// 에서는 소스를 이런 식으로 해석한다는 의미이다.

// var과 다르게 let과 const를 사용할 경우에는 변수를 선언하기 전에

// 사용하면 에러가 발생하는데 에러가 발생하면 프로그램에서 유지보수

// 하는데 쉽게 확인할 수가 있지만 var 사용할 경우에 선언 전에 변수를

// 사용하면 결과값이 예상과 다르게 나타나기 때문에 에러를 찾기가

// 어렵게 된다.

// 예약어 선언하지 않고 사용할 경우 재선언 재할당

// var 오류가 없음(호이스팅) o x

// let 오류발생 x o

// const 오류발생 x x

// var x = 10;

// var sum = x + y;

// var y = 20;

// console.log(sum);

var x = 10;

var y;

var sum = x + Y;

var y = 20;

console.log(sum);

</script>

연산자

1. 4칙연산 : +, -, *, /

2. 나머지연산 : %

// let a = 10 + 10;

// console.log('더하기 = ',a, typeof(a));

// a = a - 5;

// console.log('빼기 = ',a, typeof(a));

// a = a * 5;

// console.log('곱하기 = ',a, typeof(a));

// a = a / 5;

// console.log('나누기 = ',a, typeof(a));

// a = a % 6;

// console.log('나머지 = ',a, typeof(a));

// const pi = 3.141592

// console.log('PI = ',pi, typeof(pi));

// // 자바스크립트등의 프로그램언어에서는

// // 정밀한 계산에서 실수연산은 적합하지가 않다. 2진법 때문. 10나눠서 정수로 바꿔서 계산해야함

// let b = 0.1 + 0.2;

// console.log('실수의 연산은?', b);

// b = (0.1 * 10) + (0.2 * 10);

// b = b / 10;

// console.log('실수의 연산은?', b);

// // 문자와 숫자의 연산 결과는?

// // 문자열의 연산

// let str = '문자열';

// let num = 10;

// let result = num + str;

// console.log('문자열 연산 결과는?', result, typeof(result));

// 실습, 두사람의 나이를 입력받아서 결과를 prompt, document.write를 이용해서

// 출력해 보세요

let name1 = prompt('이름을 입력하세요!', '홍길동');

let age1 = prompt('나이를 입력하세요!', 18);

let name2 = prompt('이름을 입력하세요!', '홍길순');

let age2 = prompt('나이를 입력하세요!', 17);

// console.log(name1, name2, age1, age2);

// console.log(typeof(age1), typeof(age2));

let sum = age1 + age2;

console.log('두 사람의 나이 합 = ', sum);

age1 = parseInt(age1);

age2 = parseInt(age2);

console.log(typeof(age1), typeof(age2));

sum = age1 + age2;

console.log('두 사람 나이의 합 = ', sum)

document.write(`<h3>${name1}의 나이는 ${age1}살 입니다.</h3>`)

document.write(`<h3>${name2}의 나이는 ${age2}살 입니다.</h3>`)

document.write(`<h3>두 사람의 나이 합은 ${sum}살 입니다.</h3>`)

document.write('<hr>');

// document.write()

</script>

</head>

<body>

<!-- <script>

let a = prompt('홍길동 나이를 입력하세요', 18);

let b = prompt('홍길순 나이를 입력하세요', 17);

c = a + b;

console.log(`홍길동의 나이는 ${a}입니다`, typeof(a));

console.log(`홍길순의 나이는 ${b}입니다`);

console.log(`두 사람 나이의 합은 ${c}입니다`, typeof(c));

document.write(`<h3>홍길동의 나이는 ${a}입니다</h3>`);

document.write(`<h3>홍길순의 나이는 ${b}입니다</h3>`);

document.write(`<h3>두 사람 나이의 합은 ${c}입니다</h3>`);

</script> -->

// 실습2. 두사람의 나이를 입력받아서 결과를 출력해보시오

// document.querySelector함수를 이용

let person1 = document.querySelector('#person1');

let person2 = document.querySelector('.person2');

let total = document.querySelector('#total');

person1.innerHTML = `2${name1}의 나이를 ${age1}살 입니다!!`;

person2.innerHTML = `2${name2}의 나이를 ${age2}살 입니다!!`;

total.innerHTML = `2두 사람 나이의 합은 ${sum}살 입니다!!`;

</script>

자료형

1. 숫자형 : 정수형(integer), 실수형(float)

2. 문자형 : 작은, 큰 따옴표로 감싼 데이터 string

3. 논리형 : 참(true), 거짓(false)

console.log(10, typeof(10));

console.log(3.14, typeof 3.14);

console.log('문자열', typeof'문자열');

console.log('', typeof'');

console.log('3.14', typeof '3.14');

console.log(true, typeof true);

console.log(false, typeof false);

// console.log(True, typeof True); True 선언되지 않은 변수

console.log(true + 1); // 결과 2 -> true는 내부적으로 1이라는 값을 가지고 있고

console.log(false + 1); // 결과 1 -> false는 0이라는 값을 가지고 있다.

</script>

비교연산자

==, === : 동등연산자(==는 값만 비교, ===는 값과 자료형까지 비교)

!=, !== : 같지 않다.

>= : 크거나 같다.

<= : 작거나 같다.

< : 크다

> : 작다

console.log(true == 1); //결과는 true

console.log(true === 1); //결과는 false

console.log(false == 0); //결과는 true

console.log(false === 0); //결과는 false

console.log(5 == 0); //결과는 false

console.log(5 == 5); //결과는 true

console.log(5 > 5); //결과는 false

console.log(5 >= 5); //결과는 true

console.log(5 >= '5'); //결과는 true

console.log(5 == '5'); //결과는 true

console.log(5 === '5'); //결과는 true

console.log(5 != '5'); //결과는 false

console.log(5 !== '5'); //결과는 true

console.log(30 > 20); //결과는 true

console.log(30 > 20 > 10); //결과는 true는 내부적으로 1이라는 값을 가지고 있고

console.log(30 > 20 > 0); //결과는 false는 0이라는 값을 가지고 있다.

</script>

논리연산자

! : not, 부정연산자

&& : and, 논리곱연산자

|| : or, 논리합연산자

console.log(true);

console.log(!true);

console.log(!5 > 2);

console.log(!(5 > 2));

console.log(!false);

console.log(30>20 && 20>10);

console.log(30>20 && 20<10);

console.log(30>20 || 20>10);

console.log(30>20 || 20<10);

</script>

let age = 20;

console.log(age >= 18);

if(age >= 18) {

console.log('성인입니다');

}else {

console.log('미성년자 입니다');

}

</script>

복합대입연산자

+= : a += 1 -> a = a + 1;

-= : a -= 1 -> a = a - 1;

*= : a += 1 -> a = a * 1;

/= : a /= 1 -> a = a / 1;

let a; //선언

a = 10; //초기화

let b = 10; //선언과 동시에 초기화;

b += 10; // b = b + 10;

console.log('+=', b)

b -= 5; // b = b - 5;

console.log('-=', b);

b *= 5; // b = b * 5;

console.log('*=', b);

b /= 3; // b = b / 3;

console.log('/=', b);

증감연산자

++a : a = a + 1; // 전위증가연산자

--a : a = a - 1; // 전위감소연산자

a++ : a = a + 1; // 후위증가연산자

a-- : a = a - 1; // 후위감소연산자

let number = 10;

number++; // number = number + 1;

console.log('++ =', number); // 11

number--; // number = number - 1;

console.log('-- =', number); // 10

++number; // number = number + 1;

console.log('++ =', number); // 11

--number; // number = number - 1;

console.log('-- =', number); // 10

//주의할 점

console.log('후위연산자(++) =', number++); // 10을 출력하고 후에 1 증가 11

console.log('전위연산자(++) =', ++number); // 먼저 1을 증가 후에 출력

number = 10;

document.write(number++ + '<br>'); // 10 -> 11

document.write(++number + '<br>'); // 12

document.write(number-- + '<br>'); // 12 -> 11

document.write(--number + '<br>'); // 10

</script>

데이터 타입

1. 원시형(기본형) : 숫자형, 문자형(string), 논리형(boolean),null, undefined

undefined : 값이 할당되지 않고 선언만 되어 있는 변수, 값이면서 동시에 자료형

빈값인지 유효한 값인지 아직 정해지지 않은 상태

null : 값이 없거나 유효하지 않은 값이라는 의미

2. 참조형 :

1) 원시형을 제외한 모든 유형이 참조타입이다.

2) 대표적인 참조타입은 Array(배열, []), object(객체, {}), Function(function(),{})

3. 객체(object{})

객체란 여러개의 자료형을 하나로 저장할 수 있는 자료형이다.

객체와 배열의 차이점은 객체는 key와 값을 한쌍으로 갖는 자료형이라면 배열은 값만

저장할 수 있는 자료형이다.

객체는 중괄호{}로 선언하는데 키와 값한쌍을 객체의 속성(property)이라고 한다.

객체는 자료에 접근하려면 key로 접근한다. 접근방법은 다음과 같다.

객체명, 속성 of 객체명['속성']형태로 접근한다.

key는 중복할 수 없다. 값은 중복가능하다.

4. 배열(Array[])

//하나의 변수에 여러개의 값을 저장할 수 있는 자료형

//배열의 선언은 대괄호([])로 선언한다.

//배열은 자바스크립트의 모든 자료형을 복수로 저장할 수 있다.

//배열의 각 요소는 인덱스(index, 주소의미)로 접근할 수 있다.

//배열의 index는 0부터 시작한다.

5. 함수(function)

함수는 익명함수와 이름이 있는 함수

함수의 선언

a. function 함수명(매개값1,...) { 실행문 ... }

b. cont 변수명 = function (매개값1...) { 실행문}

함수의 호출

a. 함수명();

b. 변수명();

// 객체

let obj = {};

obj = {

name: '홍길동',

age: 999,

addr: '조선 한양',

fn: function (){

console.log('나는 함수입니다.');

xxx: function (a, b) {

return a * b;

};

console.log(obj.name, obj['age']);

console.log(

`객체안에 있는 함수(매개변수와 return이 없는 함수)의 호출 결과는 ${obj.fn()}`

);

console.log(

`객체안에 있는 함수(매개변수, return이 있는 함수)의 호출 결과는 ${obj.xxx(10, 10)}`

);

// 배열

let arr = [];

arr = [1,2,3,4,'문자열', undefined, null];

console.log(arr[0], arr[2]);

// 함수 function

function add(a, b){

return a + b;

}

let a = 10;

let b = 10;

let aaa = add(a, b);

console.log( `${a} + ${b} = ${aaa}`);

//익명함수

const bbb = function (a, b) {

return a - b;

};

console.log(`${a} + ${b} = ${bbb(a, b)}`);

</script>

함수(function)

함수의 선언은 'function'키워드로 선언하며 함수의 매개변수들은 소괄호()로 묶고

쉼표로 구분한다. 함수의 실행문은 중괄호{}로 묶고 중괄호 블럭안에 실행문을 정의한다.

함수는 함수표현식(function expression)으로도 만들 수 있ㄴ느 데 이 함수를 익명함수라고 한다.

즉,

const square = function(num) {return num * num;} 형태로 선언되는 함수를 말한다.

함수는 정의만 해서는 사용할 수 없고 함수를 사용하기 위해서는 함수를 호출해야 한다.

함수의 호출은 '함수명(매개변수1...)'의 형태로 호출한다. 또한, 함수는 반환 값이 있는

경우가 있고 즉, return문이 있는 함수와 없는 함수가 있다.

return이 없는 함수를 호출할 경우 반환값은 'undefined'가 반환된다.

함수를 호출할 때는 스코프(범위)안에 있어야 한다. 만약, 함수가 스코프 안에 없을 경우에

변수처럼 호이스팅이 될 수 있다.

// console.log(square); //square는 초기값으로 undefined 를 가지고 호이스트 된다.

// console.log(`${square(5)}`);// TypeError 발생 이 시점에서 square는 함수가 아니다.

const square = function (num) {

return num * num;

};

let name = prompt("이름을 입력하세요", "홍길동");

console.log(`${name}`);

console.log(prompt);

console.log(`${square(5)}`);

console.log(square);

//함수는 변수로 선언해서도 사용할 수 있다.

let pmt = prompt;

let sqr = square;

console.log('prompt함수 = ', pmt);

console.log('square함수 = ', sqr);

//자바스크립트에서는 주의해야할 사항이 있다.

console.log('prompt는 함수일까요?', typeof prompt);

prompt = '함수일까요? 아니면 무엇일까요?'

console.log('prompt는 함수일까요?', typeof prompt);

//prompt = "함수일까요? 아니면 무엇일까요?"

prompt = pmt;

console.log('prompt는 함수일까요?', typeof prompt);

</script>

1. 외부입력함수 : alert: 경고창, prompt: 외부에서 데이터입력, confirm: 확인(true, false)결과

2. 형변환함수 : Number(), String(), Boolean();

// 1. Number(문자열)

// 조건 : 매개변수인 문자열은 숫자로 변환이 가능한 문자열이어야 한다.

let age = prompt("나이를 입력하세요", 18);

console.log(typeof age);

console.log(`${age = age + 1}`);

Number(age);

console.log(typeof age);

console.log(`${age = age + 1}`);

age = Number(age);

console.log(typeof age);

console.log(`${age = age + 1}`);

let num = '100';

console.log(`${Number(num) + 1}`);

num = '100a';

console.log(`${Number(num) + 1}`); // 결과는 NaN 즉, '100a'문자열은 숫자변환불가

// 2. String()

// Number, Boolean등의 값을 문자열로 변환

num = 100;

String(num);

console.log(typeof num);

console.log(`${++num}`);

let a = true;

console.log(typeof a);

a = String(a);

console.log(typeof a);

console.log(`${a}`);

num = '100a';

console.log(`${Number(num) + 1}`);

//Number(true)

let 참 = true;

console.log(typeof 참);

참 = Number(참);

console.log(typeof a);

console.log(`${a}`);

console.log('----------------------------------');

// 3. boolean(숫자)

let b = 0;

Boolean(b);

console.log(typeof b, ' = ', b); // 0 = false

b = Boolean(b);