<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수</title>
<link rel="icon" href="data:,">
</head>
<body>
<h1>변수</h1>
- 변할 수 있는 데이터를 메모리 공간에 저장 <br>
- var 혹은 let 키워드로 변수 선언한다. 상수: const<br>
- 자바스크립트는 저장된 값에 의해 자료형이 결정된다. <br>
- 자료형의 기본은 문자형, 숫자형, 논리형이 있다. <br>
- 변수 선언 후 기본값은 undefined 이다. <br>
- 변수명(식별자)은 예약어를 사용 할 수 없다. <br> l
(예약어 -> 프로그램에서 사용하고 있는 토큰(단어)) <br> Fn
- 변수명(식별자)는 _, $의 특수기호만 제외한 나머지는 사용할 수 없다. <br>
- 변수명(식별자) 한글로 사용 금지 <br>
- 상수 선언 키워드는 const 이다. <br>
- 자바스크립트의 자료형 확인 키워드는 typeof로 한다. <br>
<h2>var 와 let</h2>
<script type="text/javascript">
/**
* 변수 선언 시 키워드 : var, let, const
* 변수 재할당 가능 : var, let
* 변수 재선언 가능 : var ->즉, 재할당 및 재선언 가능
* 변수 재할당 재선언 불가 : const
*/
var name='홍길동';
let name='홍길동';
const memberName=홍길동;
// name ='김철수'; //var재선언 가능
// name='김미영'; //var재할당 가능
// let nameMember='김철수'; //let재선언 불가능
// nameMember='김철수'; //let재할당 가능
// memberName='김철수'; //const(상수)로 선언되었기 때문에
console.log(name,nameMember,memberName);
</script>
<h2>var, function 호이스팅</h2>
- 사전적인 의미 : 끌어 올리다.
- 적용 대상 : var, function
<script type="text/javascript">
// 함수:function키워드 시작하는 함수 선언문
fn();
console.log(memberId,'memberId');
// 변수:var 키워드 시작하는 변수 선언
var memberId;
memberId='id001';
console.log(memberId,'memberId');
function fn(){
console.log('함수실행');
}
console.log(memberLevel,'<-memberLevel');
let memberLevel;
console.log(memberLevel,'<-memberLevel');
memberLevel='관리자'
console.log(memberLevel,'<-memberLevel');
// const memberIdNum;상사는 선언과 초기값이 필수
const memberIdNum='040101-3258'
</script>
<h2>변수 선언 방식</h2>
<script type="text/javascript">
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 표기법 (네이밍 명명규칙)</title>
<link rel="icon" href="data:,">
</head>
<body>
<h1>변수 표기법</h1>
- 변수명(식별자)는 의미있는 단어로 할 것 <br>
- 표기법을 지켜서 변수명(식별자) 작성할 것
<h2>메서드 단어의 사전적인 의미</h2>
- get -> return -> 값을 가지고 온다.
- set -> 해당 객체의 필드에 값을 삽입한다.
- to -> 메서드 뒤에 오는명에 맞는 형으로 변환하여 반환
- is -> boolean 형태의 값을 반환
- add -> 데이터 누적
<h2>변수명(식별자) 표기법</h2>
<h3>상수명 표기법</h3>
- 모든 단어 대문자, 단어 구분은 '_'
- member name -> MEMBER_NAME
<h3>카멜표기법</h3>
- 모든 단어는 소문자로 표기하되 단어와 단어 사이의 조합시 다음 단어의 첫 스펠링 대문자 <br>
예) member name -> memberName <br>
- 메서드명, 필드명, 변수명(식별자)
<h2>파스칼 표기법</h2>
- 모든 단어는 소문자로 표기하되 모든 단어의 처음 스펠링은 대문자 <br>
예) member name -> MemberName <br>
- class명, 생성자 함수 -> (new 연산자를 쓰는 대상)
<h2>스네이크 표기법</h2>
- 모든 단어는 소문자로 표기하되 단어와 단어사이를 언더바로 표기
<h2>헝가리안 표기법</h2>
- 카멜표기법과 유사하지만 변수명(식별자) 앞에 형에관련된 단어 포함
예) 문자열 strUserName
문자열 strUserLevel = '관리자';
strUserLevel = 1;
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자료형</title>
<link rel="icon" href="data:,">
</head>
<body>
<h1>자료형</h1>
- 값에 의하여 자료형이 결정된다.
<h2>typeof 자료형 확인</h2>
- typeof 키워드로 자료형을 확인 할 수 있다.
- parser 함수로 자료형을 변환 할 수 있다.
<h2>문자형</h2>
<script type="text/javascript">
</script>
<h2>숫자형</h2>
<script type="text/javascript">
let num1 = 100;
let num2 = Number(200); //명시적으로 형변환
let num3 = +'300';
console.log(typeof num1,typeof num2,typeof num3);
let num4= Number('가');
console.log(num4,'숫자로 형변환 불가 NaN');
console.log(typeof num4,'NaN의 타입?');
console.log(parseInt(num5),'소수점 자리 절삭');
let num6=-10.34
console.log(parseInt(num6),'소수점 자리 절삭');
// parseInt() vs Math.floor()
consoloe.log(parseInt(num5),parseInt(num6),
'<-parseInt()');
consoloe.log(parseInt(num5),parseInt(num6),
'<-parseInt()');
</script>
<h2>논리형</h2>
- 논리형은 true 혹은 false 값이 담긴다.
<script type="text/javascript">
let isBoolean1 = true;
let isBoolean2 = false;
let isBoolean3 = 0;
let isBoolean4 = 1;
let isBoolean5 = '가';
let isBoolean6 = '';
let isBoolean7 = NaN;
let isBoolean8 = null;
let isBoolean9= undefined;
if(isBoolean9){
console.log(isBoolean9);
}else{
console.log(isBoolean9);
}
</script>
<h2>null</h2>
- 변수는 존재하나, null로 할당된 상태 <br>
- null : '메모리에 할당된 공간을 더이상 참조하지 않겠다' 라는 의미
<script type="text/javascript">
let exNull=null;
console.log(typeof exNull,'null의 데이터 타입?');
console.log(typeof exNull=='null');
console.log(null==exNull);
</script>
<h2>undefined</h2>
- 변수는 존재하나(메모리에 할당된 공간), 초기값이 자바스크립트 엔진에 의해 undefined 값을 할당한 상태
<script type="text/javascript">
let exNndefined= undefined;
console.log(typeof exNndefined,'undefined의 데이터타입');
console.log(typeof exNndefined=='undefined');
console.log(undefined==exNndefined);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연산자</title>
<link rel="icon" href="data:,">
</head>
<body>
<h1>연산자</h1>
<h2>산술연산자</h2>
- +, -, *, /, % <br>
<script type="text/javascript">
let num1 = 5;
let num2 = 2;
let result1 = 5 + 2;
let result2 = 5 - 2;
let result3 = 5 * 2;
let result4 = 5 / 2;
let result5 = 5 % 2;
console.log(`result1의 결과값: ${result1}`);
console.log(`result2의 결과값: ${result2}`);
console.log(`result3의 결과값: ${result3}`);
console.log(`result4의 결과값: ${result4}`);
console.log(`result5의 결과값: ${result5}`);
</script>
<h2>문자결합연산자</h2>
- '문자' + 1 , 1 + '문자' => 문자열 연결 <br>
<script type="text/javascript">
let exString = '1';
let num3 = 3;
let result6 = exString + num3;
let result7 = num3 + exString;
/**
* ``, '', "" => 문자열 표현
* `` => `문자열${자바스크립트코드를 쓸 수 있다}`
*/
console.log(`0${+num3}`);
console.log(result6);
console.log(result7);
</script>
<h2>대입 연산자 및 복합 대입 연산자</h2>
- 일반적인 산술연산자를 간소화시켜 쓰는 방식 <br>
- =, +=, -=, *=, /=, %=<br>
<script type="text/javascript">
let digit = 5; // 5를 대입, 할당
digit += 5; // 10 , digit = digit + 5;
// ${digit += 5} : 자바스크립트 영역이므로 연산된 결과를
// 문자열로 반환
// console.log(`digit = digit + 5의 결과값:${digit += 5}`);
console.log(`digit = digit + 5의 결과값:${digit}`);
digit -= 5; // 5 , digit = digit - 5;
console.log(`digit = digit - 5의 결과값:${digit}`);
digit *= 5; // 25 , digit = digit * 5;
console.log(`digit = digit * 5의 결과값:${digit}`);
digit /= 5; // 5 , digit = digit / 5;
console.log(`digit = digit / 5의 결과값:${digit}`);
digit %= 5; // 0 , digit = digit % 5;
console.log(`digit = digit % 5의 결과값:${digit}`);
</script>
<h2>증감연산자</h2>
- ++, -- <br>
<script type="text/javascript">
let sumResult = num1++;
console.log(sumResult, num1);
sumResult = ++num1;
console.log(sumResult, num1);
sumResult = --num1;
console.log(sumResult, num1);
sumResult = num1--;
console.log(sumResult, num1);
</script>
<h2>비교연산자</h2>
- 두개의 데이터를 비교하여 결괏값을 논리형으로 받는다.
- ==(값만 비교), ===(값과 타입모두 비교), !=, !== <br>
<!-- >= , <=, >, < -->
<script type="text/javascript">
let comNum1 = '10';
let comNum2 = 10;
console.log(comNum1 == comNum2, 'comNum1과 comNum2 비교?');
console.log(comNum1 === comNum2, 'comNum1과 comNum2 비교?');
</script>
<h2>논리연산자</h2>
- 2개 이상의 결괏값 혹은 비교연산자를 동시에 비교 <br>
- and -> 2개 이상의 비교값이 모두 참일 경우 참 <br>
- or -> 2개 이상 중 하나라도 참이면 참 <br>
- not -> 결괏값의 반대
<script type="text/javascript">
let courseA = 'ICT융합자바스프링개발자양성과정A';
let courseD = 'ICT융합자바스프링개발자양성과정D';
let student46 = '홍길동';
let student47 = '홍길동';
if(courseA !== courseD && student46 === student47){
console.log('참');
}else{
console.log('거짓');
}
</script>
<h2>삼항조건연산자</h2>
- 조건식을 비교하여 참일 경우와 거짓일 경우 판별하여 각각의 값을 반환
<script type="text/javascript">
let isValid = false;
let resultValid = isValid ? 'true' : 'false';
console.log(resultValid);
let comNum3 = 4;
let comNum4 = '4';
let compareResult = (comNum3 == comNum4) ? true : false;
console.log(compareResult);
/**
* 실습1. 회원로그인시 회원일 경우 '홍길동님 로그인하셨습니다.'
* 회원이 아닐 시 '등록된 회원의 정보가 없습니다.'
* loginResult
*/
let userIdDB = 'id001';
let userPwDB = 'pw001';
let userNameDB = '홍길동';
let inputDataId1 = 'id001';
let inputDataPw1 = 'pw002';
let inputDataId2 = 'id002';
let inputDataPw2 = 'pw001';
let inputDataId3 = 'id001';
let inputDataPw3 = 'pw001';
let loginResult =
(userIdDB == inputDataId3 && userPwDB == inputDataPw3)
? `${userNameDB}님 로그인하셨습니다.`
: '등록된 회원의 정보가 없습니다.';
console.log(loginResult);
// 실습2. 아이디가 틀렸다면 '일치하는 아이디가 없습니다.'
// 비밀번호가 틀렸다면 '비밀번호가 일치하지 않습니다.'
loginResult = (userIdDB == inputDataId3)
? (userPwDB == inputDataPw3)
? `${userNameDB}님 로그인하셨습니다.`
: '비밀번호가 일치하지 않습니다.'
: '일치하는 아이디가 없습니다.';
console.log(loginResult);
</script>
</body>
</html>
