CONTENTS
JavaScript
4.변수
5.연산자
-------------------------------------
JavaScript
4.변수
◎부울형
-.ture와 false 두 값 중 하나만 기억함. 일반적으로 부울형은 비교 연산 결과값을 기억함. 주로 조건문에서 실행 조건을 제어하기 위해 사용됨
데이터에 따른 자료형_부울형
<script>
var boolean01 = true;
var boolean02 = false;
var boolean03 = 12;
var boolean04 = 0;
var boolean05 = NaN;
var boolean06 = "abc";
var boolean07 = "";
var boolean08 = null;
var boolean09 ;
document.write(boolean01 + " " + boolean02 + "<br>");
document.write(!!boolean03 + " " + !!boolean04 + "<br>");
document.write(!!boolean05 + " " + !!boolean06 + "<br>");
document.write(!!boolean07 + " " + !!boolean08 + "<br>");
document.write(!!boolean09);
//!!는 이중 부정 연산자로, 사용하지 않으면 변수에 들어간 값이 출력되어, ture/false 값을 명확하게 확인하기 위함
</script>
1)숫자: 0ㅇ이나 NaN이면 'false', 그 외엔 'true'
2)문자: 빈 문자면 'false', 그 외엔 'true'
3)기타: null과 undefined는 'false'
◎null과 undefined형
-undefined: 변수는 선언되었으나 어떤한 값도 할당되지 않은 변수. 데이터가 있는지 여부를 모름(현재는 없음)
-null: 명시적으로 값이 없음을 표현
*1+null에서 null은 '0'으로 변환됨
*1+undefined는 연산 불가능이라 NaN(숫자가 아님)으로 변환됨
*문자열+null/undefined는 묹 그대로 반영되어 결합됨
◎객체형
-실제 세계에서 모든 사물은 하나의 객체에 해당하며, 자바스크립트에서 프로그래밍에 필요한 가장 기본적인 단위
-각 개체는 고유한 특성 값을 가지며, 고유한 행동을 함(속성과 메서드)
데이터에 따른 자료형_객체형
<script>
//객체 변수 선언과 초기화 방법1
var myCar01={model:"BMW", color:"gray", speed:150};
// myCar01.model="accent"; 속성 바꿀 때
document.write(myCar01 + "<br>")//값없을 때 데이터타입 나옴
document.write(myCar01.model + "<br>");
document.write(myCar01.color + "<br>");
document.write(myCar01.speed + "<br>");
document.write(typeof myCar01 + "<br>")
//객체 변수 선언과 초기화 방법2
var 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>");
document.write(typeof myCar02 + "<br>")
//선언하는 변수명이 같으면 안됨
</script>
◎배열
-연관된 데이터를 하나로 모아서 관리하기 쉽게 하는 자료형
-배열은 대괄호([]) 안에 콤마 (,)로 구분된 값의 리스트로 구성, 인덱스는 '0'부터 시작
데이터에 따른 자료형_배열
<body>
<p id="demo"></p>
<script>
var cars = ["speed", "volvo", "BMW"];
document.querySelector("#demo").innerHTML=cars[0];
</script>
</body>
*프로그램언어 시작은 "0"임
◎형 변환
-데이터 타입을 강제 변환(명시적으로 형 변환) 시키는 것
-자바스크립트는 저장된 자료에 따라 자료형이 자동으로 변경됨, 그러나 입력 창을 통해 입력된 임의의 숫자는 문자로 인식되기 때문에 단순히 덧셈을 할 경우에는 의도치 않은 결과를 가져올 수 있음
-이 때 두 수를 덧셈할 경우 강제 변환(명시적으로 형 변환)을 시켜야 함, Boolead(), String(), Number() 함수를 이용함
형 변환
<script>
document.write(123+234+"<br>"); //두 숫자의 덧셈 = 숫자 **하나라도 문자열이 들어가면 문자열 결합을 수행함.
document.write(123 + "234" + "<br>"); //숫자와 문자의 덧셈 = 문자
document.write(false + 123 + "<br>"); //boolean과 숫자의 덧셈 = 숫자 (false는 0)
document.write(123 + String(234) + "<br>"); //숫자와 형변환 문자의 덧셈 = 문자
document.write(123 + Number("234") + "<br>"); //숫자와 형변환 숫자의 덧셈 = 숫자
document.write(Boolean(1) + "<br>"); //숫자의 형변환 boolean = boolean (ture)
document.write(Boolean(0)); //숫자의 형변환 boolean = boolean (false)
</script>
◎데이터 입출력 방식
<자바스크립트의 데이터 입출력 방식>
| 데이터 출력 방식 | 설명 |
| innerHTML속성 | 문서 객체에 HTML 문자열을 속성값으로 삽입하는 방식 선택한 요소의 자식에 삽입 |
| document.write() | document(문서영역=body)에 HTML로 작성하는 방식 |
| window.alert() | 창의 경고창으로 띄우는 방식 |
| console.log() | 콘솔 브라우저에 표시하는 방식 *[f12]->console 탭에 뜸, 진행상황파악에 좋음 |
| confirm() | 사용자에게 확인 대화 상자를 표시(확인/취소버튼 있음) 확인: ture 반환, 취소: false 반환 |
| 데이터 입력 방식 | 설명 |
| prompt() | 사용자에게 입력을 요청하는 대화 상자를 표시하는 방식 prompt('질문텍스트', '예시텍스트'); 입력된 데이터는 문자열로 인식함 |
| 요소의 value로 입력하기 | document.querySelector("css선택자")로 요소 선택 후 value 속성에 값 입력 dociment.querySelector('#demo').value="입력값"; |
HTML 데이터 출력 방법_innerHTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 출력</title>
<script>
window.onload = function(){//준비구문, HTML보다 먼저 로딩되므로 필요
document.querySelector('#demo').innerHTML='innerHTML 테스트';
}
</script>
</head>
<body>
<h1 id="demo"></h1>
</body>
</html>
HTML 데이터 출력 방법_document.write()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 출력하기</title>
<script>
document.write('<h1>document.write 테스트</h1>');
</script>
</head>
<body>
</body>
</html>
HTML 데이터 출력 방법_alert()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 출력하기</title>
<script>
window.alert('alert 테스트');
alert('alert 테스트2');
</script>
</head>
<body>
</body>
</html>
HTML 데이터 출력 방법_개발자모드 console
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 출력하기</title>
<script>
console.log('console 테스트');
</script>
</head>
<body>
</body>
</html>
*따로 코드에 영향x
HTML 데이터 출력 방법_confirm()
<script>
if(confirm("제출하시겠습니까?")){
alert("정상적으로 제출되었습니다");
}else{
alert("제출실패");
}
</script>
*조건문: ture/false
HTML 데이터 입력 방법_prompt()
<script>
var age = prompt("나이를 입력하시오", "숫자를 입력하시오");
document.write(age);
</script>
HTML 데이터 입력 방법_요소 선택
<script>
function inputFun(){
var x = document.querySelector("#input_id").value;
document.querySelector("#output_id").value=x;
}
</script>
</head>
<body>
<input type="text" id="input_id" size="10">
<input type="text" id="output_id" size="10">
<button onclick = "inputFun()">클릭</button>
</body>
◎입력값의 형변환
-prompt() 함수를 이용하여 숫자를 입력받으면 문자열로 인식됨, 숫자의 산술 연산을 하려면 문자를 숫자로 변환하여 연산해야함
가족들의 나이를 입력받아 평균값을 출력
가족구성: 아빠, 엄마, 나, (형제)
입력방식: prompt()
형변환 함수: parselnt(), Number()
*가족 나이의 합(+), 인원수(/)=평균값
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var count = 0;
var father = prompt("숫자를 입력하세요","아버지의 나이를 입력하세요");
var ageFater = parseInt(father);
count = count + 1;
var mother = prompt("숫자를 입력하세요","어머니의 나이를 입력하세요");
var ageMother = parseInt(mother);
count = count + 1;
var brother = prompt("숫자를 입력하세요","형의 나이를 입력하세요");
var ageBrother = parseInt(brother);
count = count + 1;
var me = prompt("숫자를 입력하세요","나의 나이를 입력하세요");
var ageMe = parseInt(me);
count = count + 1;
var ageFamily = parseInt(father) + parseInt(mother) + parseInt(brother) + parseInt(me);
console.log(ageFamily);
document.write(ageFamily/count);
</script>
</body>
<!-- 1. 아빠 나이를 담을 변수,
엄마 나이 담을 변수,
형의 나이를 담을 변수,
나의 나이 담을 변수
인원수 담을 변수,
결과값을 담을 변수
2.각각 변수에 prompt(); 써서 값을 입력
3.인원수 변수 +1 증가
4.아빠 나이+엄마 나이+나의 나이 >결과값
-이때 형변환 필요
4.document.write(결과값/인원수 3 )
-->
</html>
5.연산자
◎산술연산자
-수치 데이터를 처리하기 위해 사용하는 기본적인 연산자
| 연산자 | 설명 |
| + | 더하기 연산자 |
| = | 빼기 연산자 |
| * | 곱하기 연산자 |
| / | 나누기 연산자 |
| % | 나머지 연산자 |
사칙연산
<script>
var num01 = 7;
var num02 = 5;
document.write("num01 + num02= " + (num01 + num02) + "<br>");
document.write("num01 - num02= " + (num01 - num02) + "<br>");
document.write("num01 * num02= " + (num01 * num02) + "<br>");
document.write("num01 / num02= " + (num01 / num02) + "<br>");
document.write("num01 % num02= " + (num01 % num02) + "<br>");
</script>
◎연결연산자
-숫자가 아닌 값을 +연산자로 처리시 값을 연결하는 연산처리함
| 연산자 | 설명 |
| + | 수식이 아닌 값을 +연산자로 처리할 경우 값이 연결됨 |
| += | 수식이 아닌 값을 +=연산자로 처리할 경우 변수 값이 추가적으로 연결됨 |
◎ 비교연산자
-좌변과 우변을 비교해서 true 혹은 false 결과를 도출하는 연산자
| 연산자 | 설명 |
| > | 좌변이 우변보다 크다 |
| < | 좌변이 우변보다 작다 |
| >= | 좌변이 우변보다 크거나 같다 |
| <= | 좌변이 우변보다 작거나 같다 |
| == | 좌변과 우변이 같다 (항등연산자-데이터유형이 달라도 값이 같으면 true ex)문자'123', 숫자 123) |
| != | 좌변과 우변이 같지 않다 (데이터 유형이 같아도 값이 다르면 true) |
| === | 좌변과 우변이 같다 (완전항등연산자-데이터유형과 값이 모두 같아야 true) |
| !== | 좌변과 우변이 같지 않다 (데이터유형과 값 모두 같아야 false) ex)5!==5 |
비교 연산
<script>
var x = 10;
var y = 20;
// var x_str = String(10);
// var y_str = String(20);
document.write("x == y:"+(x == y)+"<br>");
document.write("x != y:"+(x != y)+"<br>");
document.write("x > y:"+(x > y)+"<br>");
document.write("x < y:"+(x < y)+"<br>");
document.write("x >= y:"+(x >= y)+"<br>");
document.write("x <= y:"+(x <= y)+"<br>");
document.write()
</script>
</script>
*주의: 띄어쓰기 안하면 태그로 인식
◎대입 연산자
-변수에 값을 대입(할당)하는 연산자
| 연산자 | 예시 수식 | 설명 | 같은 수식 |
| = | x = 5; | 변수 x에 5라는 값을 대입 | x = 5; |
| += | x += 5; | 기존 변수 값에 5라는 값을 더해서 대입 | x = x + 5; |
| -= | x -= 5; | 기존 변수 값에 5라는 값을 빼서 대입 | x = x - 5; |
| *= | x *= 5; | 기존 변수 값에 5라는 값을 곱해서 대입 | x = x * 5; |
| /= | x /= 5; | 기존 변수 값에 5라는 값을 나눠서 대입 | x = x / 5; |
| %= | x %= 5; | 기존 변수 값에 5를 나눠 나머지를 구함 | x = x % 5; |
대입 연산
<script>
var num = 10;
document.write("처음값:" + num + "<br>");
num = 20; //num값을 20으로 변경
document.write("=처리 후:" + num + "<br>");
num += 10;
document.write("+=처리 후:" + num + "<br>");
num -= 10;
document.write("-=처리 후:" + num + "<br>");
num *= 5;
document.write("*=처리 후:" + num + "<br>");
num /= 20;
document.write("/=처리 후:" + num + "<br>");
num %= 3;
document.write("%=처리 후:" + num + "<br>");
</script>
◎증감연산자
-1씩 증가하거나 감소시키는 연산자
| 연산자 | 설명 |
| ++변수명 | 해당 줄에서 변수 값이 1만큼 증가 |
| 변수명++ | 코드의 다음 줄부터 변수 값이 1만큼 증가 |
| --변수명 | 해당 줄에서 변수 값이 1만큼 감소 |
| 변수명-- | 코드의 다음 줄부터 변수 값이 1만큼 감소 |
증감 연산
<script>
var num = 10;
document.write("처음값:" + num + "<br>");
num++
document.write("num++:" + num + "<br>");
num--
document.write("num--:" + num + "<br>");
var num02 = 10;
var num03 = 10;
document.write("후처리:" + num02++ + "<br>");
document.write("전처리:" + ++num03 + "<br>");
</script>
◎논리연산자
-결과값이 true 혹은 false로 나오는 논리적 연산자
| 연산자 | 설명 |
| && | 논리곱연산자-모든 조건이 맞으면 true 반환 |
| || | 논리합연산자-조건 중 하나라도 맞으면 true 반환 |
| ! | 부정연산자-값이 ture면 false, false면 true 반환 |
논리 연산
<script>
var test01 = 10 > 5;
var test02 = 10 < 5;
document.write("&&: " + (test01 && test02) + "<br>"); //and
document.write("||: " + (test01 || test02) + "<br>"); //or
document.write("!: " + !test01 + "<br>"); //반대로 출력
</script>
*컴퓨터는 보통 틀리면 0, 0이 아니면 맞다고 처리함
◎연산자 기본원칙
1.모든 연산에서 괄호 연산은 가장 먼저 계산함
2.우선순위가 동일한 연산자는 좌에서 우로 진행되면서 연산이 이루어짐
3.이항 연산보다 단항 연산의 연산이 먼저 이루어짐
4.산술 연산자>비교 연산자>논리 연산자 순으로 우선순위가 주어짐
5.대입 연산자는 우선 순위가 가장 낮음
<우선순위표>
| 우선순위 | 연산자 | 비고 |
| 1 | (), [] | 괄호 연산자 |
| 2 | !, ++, -- | 논리, 산술 연산자 |
| 3 | *,/,% | 산술 연산자 |
| 4 | +,- | 산술 연산자 |
| 5 | <,<=,>,>= | 비교 연산자 |
| 6 | ==, ===, !=, !== | 비교 연산자 |
| 7 | && | 논리 연산자 |
| 8 | || | 논리 연산자 |
| 9 | =, +=, *=등 | 대입, 복합 연산자 |
'웹프로그래밍 > JavaScript' 카테고리의 다른 글
| 프로그래밍 언어 응용 29일차 (24/12/19) (4) | 2024.12.19 |
|---|---|
| 프로그래밍 언어 응용 28일차 (24/12/18) (0) | 2024.12.18 |
| 프로그래밍 언어 응용 27일차 (24/12/17) (0) | 2024.12.17 |
| 프로그래밍 언어 응용 26일차 (24/12/16) (0) | 2024.12.16 |
| 프로그래밍 언어 응용 24일차 (24/12/12) (0) | 2024.12.12 |