2024.12.13 JS 공부

프로그래밍 공부

2024.12.13 JS 공부

3452 2024. 12. 13. 15:59

백틱(`) & 템플릿 리터럴(${})

백틱 `(키보드 상단 숫자 1 왼쪽키)을 사용하면 js에서의 문자열 표현을 간단하게 할수있다.

예시)

let num01 = 123;

let num02 = 123.45;

let num03 = 123e2;

let num04 = 123e-3;

let num05 = 0xaf;

let num06 = 0o20;

let num07 = '123';

document.write("num01 = " + num01 + "," + "num02 = " + num02 + "<br>");

document.write("num03 = " + num03 + "," + "num04 = " + num04 + "<br>");

// document.write("num05 = " + num05 + "," + "num06 = " + num06 + "<br>");

document.write(`num05 = ${num05}, num06 = ${num06}<br>`);

document.write("num07 = " + num07);

</script>

document.write("num01 =" + num01 + "," + num02 = " + num02 + " <br>"); // 원문

document.write(`num01 = ${num01}, num02 = ${num02}<br>`) // 백틱, 템플릿 리터럴 적용

사용방법

문자열에 따음표 대신 백틱`을 앞뒤로 넣어주고, 일반적인 텍스트는 그대로 쓰고, 변수는 ${변수} 형태로 감싸준다.

템플릿 리터럴 안의 변수는 덧셈 뺄셈등의 연산이 가능하고, ${변수1 + 변수2}의 형태로 나타낸다.

장점 : 문자열이 간결해지고 알아보기 쉽다.

단점 : js에서만 사용가능하므로 자바에선 사용할수 없다.

Boolean()

true 또는 false 두가지 값중 하나만 기억한다. 일반적으로 비교 연산 결과값을 기억하며, 조건문 실행을 제어하기 위해 주로 사용한다.

true로 나타나는 값 : false가 아닌 모든 경우

false로 나타나는 값 : false, 0, -0, NaN, "", null, undefined

컴퓨터는 보통 true는 1, false는 0으로 인식한다.

이중부정연산자(!!) (=Boolean())

첫번째 !는 값을 boolean으로 변환한뒤 부정하고, 두번째 !는 한번 더 부정하여 truth 또는 falsy의 상태를 boolean으로 변환한다.

기호는 !!를 사용하고 !! 뒤에 오는 변수나 값의 true 또는 false로 나타낸다.

사용방법

document.write(Boolean(123));

document.write(!!123); // Boolean(123)과 동일

document.write(!!변수);

객체형

자바스크립트에서 프로그래밍에 필요한 가장 기본적인 단위로써, 각 개체는 고유한 특성 값을 가지고, 고유한 행동을 한다.

let myCar01 ={model : "BMW", color : "gray", speed : 150};

document.write(`${myCar01.model}<br>`);

document.write(`${myCar01.color}<br>`);

document.write(`${myCar01.speed}<br>`);

let myCar02 = new Object();

myCar02['model'] = "BENZ";

myCar02['color'] = "blue";

myCar02['speed'] = 100;

document.write(`${myCar02.model}<br>`)

document.write(`${myCar02.color}<br>`)

document.write(`${myCar02.speed}<br>`)

</script>

코드의 model, color, speed 등은 속성에 해당한다.

기본적인 코드라 메서드는 포함되어있지 않지만, 메서드는 함수가 객체의 속성으로 저장되어 동작을 제공한다.

배열

연관된 데이터를 하나로 모아서 관리하는 자료형이다. 배열은 대괄호 안에 콤마로 구분된 값의 리스트로 구성된다.

인덱스는 0부터 시작한다.

<body>

let cars = ['saab', 'volvo', 'bmw'];

document.querySelector('#demo').innerHTML = cars[0];

</script>

</body>

대괄호안의 값이 0이기 때문에 첫번째에 있는 saab가 출력 되고, 1이면 volvo, 2면 bmw가 출력된다.

형변환

자바스크립트는 저장된 자료에 따라 자료형이 자동으로 변환되는데, 입력창을 통해 입력된 숫자는 문자로 인식되어 단순한 계산을 할때도 의도치 않은 결과를 가져오기 때문에 강제변환을 시켜야한다.

Boolean, String, Number등의 함수를 활용한다.

document.write(`${123 + 234}<br>`)

document.write(`${123 + "234"}<br>`)

document.write(`${false + 123}<br>`)

document.write(`${123 + String(234)}<br>`)

document.write(`${123 + Number(234)}<br>`)

document.write(`${Boolean(1)}<br>`)

document.write(`${Boolean(0)}<br>`)

</script>

결과값은 순서대로 357, 123234, 123234, 357, true, false이다.

숫자에 ""를 붙이면 문자형으로 취급되어 계산되지 않고 그냥 붙어버린다.

데이터 입출력 방법

window.onload=function(){

document.querySelector('#demo').innerHTML = 'innerHTML 텍스트';

}

</script>

innerHTML : 문서객체에 HTML 문자열을 속성값으로 선택한 요소의 자식에 삽입한다.(덮어쓰기)

document.write('<h1>document.write 테스트</h1>')

</script>

document.write : 문서영역에 HTML로 작성하는 방식이다.

window.alert('alert 테스트');

alert('alert 테스트2')

</script>

alert(=window.alert) : 창의 경고창으로 띄우는 방식이다.

console.log('console 테스트');

</script>

console.log : 콘솔 브라우저에 표시하는 방식이다. (문서영역 미표시)

if(confirm('제출하시겠습니까?')){

alert('정상적으로 제출되었습니다.');

}else {

alert('제출실패');

}

</script>

confirm : 사용자에게 확인 대화를 표시한다.(확인/취소 버튼, 확인 : true, 취소 :false)

let age = prompt('나이를 입력하십시오', '숫자를 입력하시오');

</script>

prompt : 사용자에게 입력을 요청하는 대화 텍스트를 표시하는 방식으로 입력된 데이터는 문자열로 인식된다.

function inputFun() {

let x = document.querySelector('#input_id').value;

document.querySelector('#output_id').value=x;

}

</script>

</head>

<body>

</body>

요소의 value로 입력하는 방식 : #input_id의 밸류를 읽고 #output_id에 밸류값대로 표시했다.

프롬프트로 평균나이 구하기

let age_d = Number(prompt('아빠 나이를 입력하세요'));

let age_m = Number(prompt('엄마 나이를 입력하세요'));

let age_i = Number(prompt('내 나이를 입력하세요'));

let age_b = Number(prompt('형 나이를 입력하세요'));

function avg(a, b, c, d) {

return ((a+b+c+d)/4)

}

document.write(`평균 나이는 ${avg(age_d, age_m, age_i, age_b)} 살입니다.`);

</script>

동작설명

총 4번의 프롬프트로 아빠, 엄마, 나, 형의 나이를 기입받아 각각의 변수에 저장하고, 펑션을 통해 변수의 합을 4로 나누는 식을 만들고, document.write를 통해 그 식에 각각의 나이가 들어있는 변수를 대입하여 평균값을 표시한다.

이때 프롬프트로 입력받은 값은 문자열로 인식되므로 꼭 앞에 Number를 붙여서 숫자열로 바꿔줘야한다.

연산자

산술연산자

+ : 더하기 연산자

- : 빼기 연산자

* : 곱하기 연산자

/ : 나누기 연산자

% : 나머지 연산자(나누고 난 후의 나머지)

연결연산자

+ : 수식이 아닌 값을 +연산자로 처리할 경우 값이 연결된다

"123" + "234" = 123234

+= : 수식이 아닌 값을 += 연산자로 연결하면 변수값이 추가적으로 연결된다.

a += 3; → a = a + 3

비교연산자

> : 좌변이 우변보다 크다

< : 우변이 좌변보다 크다

>= : 좌변이 우변보다 크거나 같다

<= : 우변이 좌변보다 크거나 같다

== : 좌변과 우변이 같다(데이터 유형이 달라도 true)

!= : 좌변과 우변이 같지 않다(데이터 유형이 같아도 값이 다르면 true)

=== : 좌변과 우변이 같다(데이터 유형도 같아야 true)

!== : 좌변과 우변이 같지 않다(데이터유형과 값 모두 달라야 true)

대입연산자

= : 변수에 값을 대입

+= : 변수에 값을 더해서 대입

-= : 변수에 값을 빼서 대입

*= : 변수에 값을 곱해서 대입

/= : 변수에 값을 나눠서 대입

%= : 변수에 값을 나눠서 나머지를 구함

증감연산자

++변수 : 해당 줄에서 변수값이 1 증가

변수++ : 다음 줄에서 변수값이 1증가

--변수 : 해당 줄에서 변수값이 1감소

변수-- : 다음 줄에서 변수값이 1감소

논리연산자

&& : 논리곱연산자 모든 조건이 맞으면 true

|| : 논리합연산자 조건 중 하나라도 맞으면 true

! : 부정연산자 값이 true면 false, false면 true