브라우저의 개발자모드를 통해 자바스크립트로 화면을 제어할 수 있음을 확인
변수명으로 예약어를 사용할 경우
변수 선언과 데이터 저장
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 변수 선언</title>
<script type="text/javascript">
var box; //box라는 명칭으로 메모리 공간 할당;
box = 10;
box = 30;
document.write(box);
/*
자료형은 변수의 값에 의해 지정된다.
자료형에는 문자형, 숫자형, 논리형, null, undefined가 있다.
typeof는 자료형을 확인할 때 사용하는 키워드.
undefined : 기본적으로 메모리는 할당되었지만 값이 없을 경우. (자바에서의 null)
null : 자바스크립트에서는 강제로 값을 비울 때 사용.
값의 존재 확인> 공백/null/undefined 체크
*/
var ex01 = '홍길동';
var ex02 = 10;
var ex03 = true;
var ex04 = undefined;
var ex05 = null;
/*
브라우저 내에서 함수 로그를 확인할 수 있도록 제공되는 메서드
console 객체의 log 메서드를 활용하여 확인가능
log 출력시 %라는 키워드가 붙어 인수값이 작성될 경우
순차적으로 추가된 인수값이 치환되어 출력된다.
%s 문자열
%d 숫자
*/
console.log('ex01 - type : %s - %s', ex01, typeof ex01);
console.log('ex02 - type : %d - %s', ex02, typeof ex02);
console.log('ex03 - type :', ex03, typeof ex03);
console.log('ex04 - type :', ex04, typeof ex04);
console.log('ex05 - type :', ex05, typeof ex05);
</script>
</head>
<body>
</body>
</html>document.write(box); 출력
consol 객체의 log 메서드를 통해 브라우저 내에서 함수 로그를 확인
자바스크립트 연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 연산자</title>
<script type="text/javascript">
/*
산술 연산자 : -, +, *, /, %
*/
var num1 =15;
var num2 =2;
console.log('+ 연산자 : ', num1 + num2);
console.log('- 연산자 : ', num1 - num2);
console.log('* 연산자 : ', num1 * num2);
console.log('/ 연산자 : ', num1 / num2);
console.log('% 연산자 : ', num1 % num2);
/*
문자열 연산자
*/
var str1 = '한국스마트';
var str2 = "정보교육원";
var num3 = 10;
var num4 = '1000';
var result = str1 + str2;
console.log('문자열 연산자1 : ', result);
console.log('문자열 연산자2 : ', str1 + '정보교육원');
console.log('문자열 연산자3 : ', '한국스마트' + str2);
console.log('문자열 연산자4 : ', '한국스마트' + '정보교육원');
console.log('문자열 연산자5 : ', str1 + str2);
console.log('문자열 연산자6 : ', result + num3);
console.log('문자열 연산자7 : ', num3 + num4); //숫자+문자열 => 문자열
/*
대입 연산자
값을 대입
=, -=, +=, *=, /=, %=
*/
var n1 = 10; //기본적인 대입 방식
var n2 = 20;
n2 += n1;//n2= n1+ n2
//n2= 20 + 10
console.log('대입 연산자1 : ', n1);
console.log('대입 연산자2 : ', n2);
/*
증감 연산자
증감 연산자는 선증가, 후증가, 선감소, 후감소가 있다.
이 연산자는 해당 기호를 만났을 시 1씩 감소 혹은 증가시킨다.
*/
var a = 10;
var b = 20;
var c = b++;
var d = ++b;
console.log('증감연산자 후 증가', c); // c=20 대입후 b=21증가
console.log('증감연산자 선 증가', d); // b=21 증가후 대입 d=22
a++ ; // a+1증가;
console.log('증감연산자 후 증가', a);
a++ ;
a++ ;
a++ ;
console.log('증감연산자 후 증가', a);
</script>
</head>
<body>
</body>
</html>
산술연산자와 문자열연산자를 console.log를 이용해 브라우저 내에서 확인
연산자가 누락되어 연산이 되지 않았거나 인수값이 분리되지 않아 에러
연산자를 이용하거나 인수값을 ,로 분리해주기
자바스크립트 연산자 실습1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 연산자 실습1</title>
<script type="text/javascript">
var str1 = '한국스마트';
var str2 = '교육원';
var n1 = 20;
var n2 = 2;
/*
실습1. 위 변수에 지정된 값을 연산시켜 아래의 최종 결과물을 만들어 콘솔에 출력시켜라.
완료 결과물 : 한국스마트정보교육원23
사용 연산자 : 문자열 결합연산자, 증감연산자, 대입연산자
*/
n1 += ++n2;
var re = str1+'정보'+str2+n1;
console.log('완료 결과물 : ',re);
</script>
</head>
<body>
</body>
</html>
자바스크립트 연산자2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 연산자2</title>
<script type="text/javascript">
/*
비교 연산자 - 비교 연산자는 참 또는 거짓의 결과값을 반환한다.
true or false 의 논리형 데이터 반환 (boolean type)
>, <, >=, <=, ==, !=, ===, !==
A > B : A는 B보다 크다.
A < B : A는 B보다 작다.
A >= B : A는 B보다 크거나 같다.
A <= B : A는 B보다 작거나 같다.
A == B : A와 B는 같다.
A != B : A와 B는 같지 않다.
A === B : A와 B는 값과 자료형이 모두 같다.
A !== B : A와 B는 값과 자료형이 같지 않다.
*/
/* 문자열 비교하기 */
var str1 = '한국';
var str2 = '한국';
var str3 = '교육원';
var str4 = '한국교육원';
console.log( 'str1 == str2 : ' , str1 == str2);
console.log( 'str1 != str2 : ' , str1 != str2);
console.log( 'str1 == str3 : ' , str1 == str3);
console.log( 'str1 + str3 == str4 : ' , str1 + str3 == str4);
if(str1 + str3 == str4){
console.log('위의 문자열 연산자의 값이 같습니다.');
}else {
console.log('위의 문자열 연산자의 값이 다릅니다.');
}
console.log( 'str1 === str4 : ', str1 === str4);
console.log( 'str1 !== str4 : ', str1 !== str4);
/* 숫자 비교하기 */
var n1 = 10;
var n2 = 20;
var n3 = 30;
var n4 = 11;
var result = 0; //result변수 선언시 변수의 초기값을 0으로 초기화 시킴.
console.log('n1 > n2 : ', n1 > n2);
console.log('n1 < n2 : ', n1 < n2);
console.log('n1 + n2 == n3 : ', n1 + n2 == n3);
console.log('n1 <= n4 : ', n1 <= n4);
if(n1 < n2){ //우선 순위 조건 판단.
result = n1 + n2;
} else if ( n1 + n2 == n3) { //우선 순위 조건이 맞지 않을 시 조건 판단.
result = n1 + n2 + n3;
} else { //위의 조건이 모두 거짓일 때
result = n1 - n2;
}
console.log('숫자 비교 후 연산 결과 : ', result);
</script>
</head>
<body>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [JavaScript] 함수 (1) | 2020.03.10 |
|---|---|
| [JavaScript] 객체 Object (0) | 2020.03.10 |
| [JavaScript] 배열 객체 (0) | 2020.03.09 |
| [JavaScript] JavaScript 기초문법 ② (0) | 2020.03.05 |