반응형
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- js
- JavaScript 내장객체
- progressive web app
- 프레임워크
- 자바스크립트
- 메이븐
- javascript
- SpringMVC
- 오라클
- TodayILearned
- maven
- tdd
- CSS
- javaprogramming
- 자바프로그래밍
- 국비지원
- 생활코딩
- web
- sql
- springaop
- TIL
- 프로그레시브웹앱
- Oracle
- HTML
- 서브쿼리
- mybatis
- 스프링
- sqldeveloper
- PWA
- framework
Archives
- Today
- Total
1cm
자바 프로그래밍_Day_56_자바스크립트 기본 문법 본문
반응형
2021. 11. 05
> 01_개요_실습문제.html
-> 전체코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>개요 실습 문제</title>
<style>
.div-test {
border: 1px solid;
width: 100px;
height: 100px;
background-color: black;
}
#area {
border: 1px solid;
width: 300px;
height: 200px;
margin-top: 5px;
}
td {
width: 50px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1>개요 실습 문제</h1>
<hr>
<h2>문제 1. 색상 조절하기</h2>
<p>
색상 선택 후 변경 버튼을 클릭하면 색상이 변경되도록 만들기
</p>
<div id="div1" class="div-test"></div>
<input id="selectColor" type="color">
<button onclick="changeColor();">변경</button>
<script>
function changeColor() {
var div1 = document.getElementById('div1');
var color = document.getElementById('selectColor').value;
// alert('color');
div1.style.backgroundColor = color;
}
</script>
<h2>문제 2. 크기 변경하기</h2>
<p>
버튼에 따라 크기 조절이 가능하도록 만들기
</p>
<div id="div2" class="div-test"></div>
<button onclick="setSize('1');">50X50</button>
<button onclick="setSize('2');">원본(100X100)</button>
<button onclick="setDoubleSize('3');">200X200</button>
<script>
// 함수밖에서 만들어졌기 때문에 전역 변수 역할을 한다.
var div2 = document.getElementById('div2');
// 함수 하나에 다 넣는 방법
function setSize(id) {
if(id == '1') {
div2.style.width = '50px';
div2.style.height = '50px';
} else if(id == '2') {
div2.style.width = '100px';
div2.style.height = '100px';
} else {
setDoubleSize()
}
}
// function setHalfSize() {
// // console.log(div2);
// div2.style.width = '50px';
// div2.style.height = '50px';
// }
// function setDefaultSize() {
// div2.style.width = '100px';
// div2.style.height = '100px';
// }
function setDoubleSize() {
div2.style.width = '200px';
div2.style.height = '200px';
}
</script>
<h2>문제 3. HTML 태그에 접근</h2>
<p>
텍스트 박스로 입력받은 데이터를 가져와서 출력하기 <br>
(단, 구매자는 태그이름, 상품명은 아이디, 구매가격은 name값으로 접근)
</p>
<label>구매자 : <input type="text" placeholder="구매자의 이름을 입력하세요."></label>
<br><br>
<label>상품명 : <input type="text" id="pName" placeholder="구매 상품명을 입력하세요."></label>
<br><br>
<label>가격 : <input type="text" name="price" placeholder="구매 가격을 입력하세요."></label>
<br><br>
<button onclick="printValue();">입력값 출력하기</button>
<div id="area"></div>
<script>
function printValue() {
var area = document.getElementById('area');
var name = document.getElementsByTagName('input')[1].value;
var pName = document.getElementById('pName').value;
var price = document.getElementsByName('price')[0].value;
console.log(name, pName, price);
area.innerHTML = `${name}님, 구매상품은 ${pName}, 구매가격은 ${price}원 입니다.`;
}
</script>
<hr>
<h2>문제 4. 테이블 만들기</h2>
<p>
prompt()로 사용자로부터 행과 열의 개수를 입력받아 테이블 만들기 <br>
아래의 div 태그에 innerHTML 속성을 사용해서 만들어진 테이블 포함한다.
</p>
<button onclick="makeTable();">테이블 생성</button>
<div id="div3" style="margin-top: 10px;"></div>
<script>
function makeTable() {
var count = 1;
var table = '<table border="1">';
var row = prompt('테이블의 행의 개수는?');
var col = prompt('테이블의 열의 개수는?');
console.log(row, col);
// 중첩 반복문
for (let i = 0; i < row; i++) {
table += '<tr>';
for (let j = 0; j < col; j++) {
table += `<td>${count}</td>`;
count++;
}
table += '</tr>';
}
table += '</table>'
// div3.innerHTML = table;
document.getElementById('div3').innerHTML = table;
}
// </table>이 자동으로 입력되어 원하는 모양으로 출력이 되지 않는다.
// function makeTable() {
// var count = 1;
// var div3 = document.getElementById('div3');
// var row = prompt('테이블의 행의 개수는?');
// var col = prompt('테이블의 열의 개수는?');
// console.log(row, col);
// div3.innerHTML += '<table border="1">';
// // 중첩 반복문
// for (let i = 0; i < row; i++) {
// div3.innerHTML += '<tr>';
// for (let j = 0; j < col; j++) {
// div3.innerHTML += `<td>${count}</td>`;
// count++;
// }
// div3.innerHTML += '</tr>';
// }
// div3.innerHTML += '</table>'
// }
</script>
<br><br><br><br><br>
</body>
</html>
-> 01_개요_실습문제.html
-> 문제 1. 색상 조절하기
<h1>개요 실습 문제</h1>
<hr>
<h2>문제 1. 색상 조절하기</h2>
<p>
색상 선택 후 변경 버튼을 클릭하면 색상이 변경되도록 만들기
</p>
<div id="div1" class="div-test"></div>
<input id="selectColor" type="color">
<button onclick="changeColor();">변경</button>
<script>
function changeColor() {
var div1 = document.getElementById('div1');
var color = document.getElementById('selectColor').value;
// alert('color');
div1.style.backgroundColor = color;
}
</script>
> 출력 결과
-> 문제 2. 크기 변경하기
<h2>문제 2. 크기 변경하기</h2>
<p>
버튼에 따라 크기 조절이 가능하도록 만들기
</p>
<div id="div2" class="div-test"></div>
<button onclick="setSize('1');">50X50</button>
<button onclick="setSize('2');">원본(100X100)</button>
<button onclick="setDoubleSize('3');">200X200</button>
<script>
// 함수밖에서 만들어졌기 때문에 전역 변수 역할을 한다.
var div2 = document.getElementById('div2');
// 함수 하나에 다 넣는 방법
function setSize(id) {
if(id == '1') {
div2.style.width = '50px';
div2.style.height = '50px';
} else if(id == '2') {
div2.style.width = '100px';
div2.style.height = '100px';
} else {
setDoubleSize()
}
}
// function setHalfSize() {
// // console.log(div2);
// div2.style.width = '50px';
// div2.style.height = '50px';
// }
// function setDefaultSize() {
// div2.style.width = '100px';
// div2.style.height = '100px';
// }
function setDoubleSize() {
div2.style.width = '200px';
div2.style.height = '200px';
}
</script>
> 출력 결과
-> 원본 : 100x100 사이즈에서 '200x200' 버튼을 누르면 크기가 변경되는 것을 확인할 수 있다.
-> 문제 3. HTML 태그에 접근
<h2>문제 3. HTML 태그에 접근</h2>
<p>
텍스트 박스로 입력받은 데이터를 가져와서 출력하기 <br>
(단, 구매자는 태그이름, 상품명은 아이디, 구매가격은 name값으로 접근)
</p>
<label>구매자 : <input type="text" placeholder="구매자의 이름을 입력하세요."></label>
<br><br>
<label>상품명 : <input type="text" id="pName" placeholder="구매 상품명을 입력하세요."></label>
<br><br>
<label>가격 : <input type="text" name="price" placeholder="구매 가격을 입력하세요."></label>
<br><br>
<button onclick="printValue();">입력값 출력하기</button>
<div id="area"></div>
<script>
function printValue() {
var area = document.getElementById('area');
var name = document.getElementsByTagName('input')[1].value;
var pName = document.getElementById('pName').value;
var price = document.getElementsByName('price')[0].value;
console.log(name, pName, price);
area.innerHTML = `${name}님, 구매상품은 ${pName}, 구매가격은 ${price}원 입니다.`;
}
</script>
<hr>
> 출력 결과
-> 구매자 : 태그이름 / 상품명 : 아이디 / 구매가격 : name 으로 접근.
-> console에도 찍힐 수 있게 해줌.
-> 문제 4. 테이블 만들기
<h2>문제 4. 테이블 만들기</h2>
<p>
prompt()로 사용자로부터 행과 열의 개수를 입력받아 테이블 만들기 <br>
아래의 div 태그에 innerHTML 속성을 사용해서 만들어진 테이블 포함한다.
</p>
<button onclick="makeTable();">테이블 생성</button>
<div id="div3" style="margin-top: 10px;"></div>
<script>
function makeTable() {
var count = 1;
var table = '<table border="1">';
var row = prompt('테이블의 행의 개수는?');
var col = prompt('테이블의 열의 개수는?');
console.log(row, col);
// 중첩 반복문
for (let i = 0; i < row; i++) {
table += '<tr>';
for (let j = 0; j < col; j++) {
table += `<td>${count}</td>`;
count++;
}
table += '</tr>';
}
table += '</table>'
// div3.innerHTML = table;
document.getElementById('div3').innerHTML = table;
}
// </table>이 자동으로 입력되어 원하는 모양으로 출력이 되지 않는다.
// function makeTable() {
// var count = 1;
// var div3 = document.getElementById('div3');
// var row = prompt('테이블의 행의 개수는?');
// var col = prompt('테이블의 열의 개수는?');
// console.log(row, col);
// div3.innerHTML += '<table border="1">';
// // 중첩 반복문
// for (let i = 0; i < row; i++) {
// div3.innerHTML += '<tr>';
// for (let j = 0; j < col; j++) {
// div3.innerHTML += `<td>${count}</td>`;
// count++;
// }
// div3.innerHTML += '</tr>';
// }
// div3.innerHTML += '</table>'
// }
</script>
> 출력 결과
-> 칸마다 번호가 입력되고,console 창에는 행과 열의 갯수가 출력된다.
기본 문법
> 주석 처리
| 주석 종류 | 설명 | |
| 자바스크립트 주석 |
한 줄 주석 | // 로 시작 |
| 여러 줄 주석 | /*로 시작하고 */로 끝남 | |
| HTML 주석 | <!-- 로 시작하고 -->로 끝남 - 자바스크립트나 스타일시트 태그 이외의 HTML태그에서는 이 주석 태그를 사용해서 주석 처리를 해주어야 함. |
|
> 변수
-> 변수 선언
-> 변수 종류 : 멤버 변수와 지역 변수
-> 멤버 변수 : 전역 변수, 기본적으로 window객체의 멤버 변수, 변수에 대한 자료형은 있으나 선언하지는 않음
| 형식 | 설명 |
| 변수명 = 값; | window.변수명 또는 this.변수명과 같은 의미 선언 시 변수 명에 var를 붙이지 않으면 전역변수로 간주 |
| var 변수명 = 값; | 변수 선언 시 변수명 앞에 var를 붙이면 지역변수 |
> 변수 명명 규칙
-> 영어 대/소문자, 숫자, _, $ 사용 가능
-> 첫 글자 숫자 사용 불가
-> 예약어 사용 불가
-> 한글 사용 가능
-> 생성자 함수는 항상 대문자로 시작
-> 변수, 인스턴스, 함수, 메소드는 항상 소문자로 시작
-> 이름에 의미있는 단어의 조합 권장
-> 두 단어 결합 시 낙타봉 표기법 권장
-> * 필수는 아니지만 관례적으로 사용하며, 대소문자를 구분하기 때문에 ex. AGE, age 변수는 서로 다른 변수이다.
> 변수 : typeof()
-> 값의 자료형을 확인하는 연산자. (데이터 타입 반환)
* 선언 시 자료형을 지정하지 않아 변수 명을 보고 데이터 확인 불가, 자료형 확인 시 자주 사용
-> typeof(“문자열값”) 또는 typeof(‘문자열값‘) -> string
-> typeof(숫자) -> number
-> typeof(참/거짓) -> Boolean
-> typeof(객체) -> object
-> typeof(초기값이 없는 변수) -> undefined
-> typeof(function) -> function
> 자료형 : 문자열(String)
-> “”, ‘’로 묶여있는 리터럴, 내장 객체로 String객체, 기본적인 메소드 존재
| 메소드 | 내용 |
|
toUpperCase()
|
모든 문자 대문자로 변환
|
|
toLowerCase()
|
모든 문자 소문자로 변환
|
|
length
|
글자 개수 조회용 멤버변수
|
|
indexOf()
|
찾는 문자이 순번(위치) 리턴
|
|
lastIndexOf()
|
뒤에서부터 찾는 문자의 순번 리턴
|
|
charAt()
|
찾는 위치의 문자 리턴
|
|
substring()
|
값을 일부분만 리턴
|
|
split()
|
토큰 문자로 분리한 문자열 배열 리턴
|
* 함수와 메소드
함수 : function 선언
메소드 : 객체 내부에 포함되어 있는 애들(객체에 대한 데이터, 조작 등)
> 자료형 : 숫자(number)
-> 정수형 숫자와 부동소수점 숫자로 구분, 내장 객체로 Math객체 제공, 기본 메소드 존재
| 메소드 | 내용 |
|
Math.abs()
|
절대값 리턴
|
|
Math.random()
|
임의의 난수발생 리턴(소수점)
|
|
Math.round()
|
반올림처리 후 리턴
|
|
Math.floor()
|
부동소수점 숫자를 정수로 리턴(소수점 자리버림)
|
|
Math.ceil()
|
소수점 자리에서 무조건 올림
|
* NaN(Not a Number) : 숫자가 아닌 데이터를 숫자처럼 사용할 때 출력
* 모든 수는 실수 처리가 된다.(정수형 숫자여도 실수임)
> 자료형 : 기타 자료형
-> 논리값(Boolean)
-> true, false 두 가지 값을 가짐
-> 객체(Object)
-> new로 선언된 사용자 객체와 자바스크립트 내장 객체
-> undefined
-> 변수 명이나 함수 명으로 선언되지 않은 식별자일 때 지정
-> 함수(function)
-> 함수(메소드)를 가지는 자료형
* 자바스크립트 엔진에 따라서 기타 자료형들은 각자 차지하는 메모리 공간이 다를 수 있다.
> 데이터 형변환
-> 숫자 -> 문자열
-> 숫자와 문자를 +(연결연산자)연산하게 되면 문자가 우선되어 숫자를 문자로 변환
-> 강제 형변환 : String()함수 이용
-> 문자열 -> 숫자
-> 숫자, 문자 + 이외의 사칙 연산 시 숫자가 우선돼 문자를 숫자로 변환
-> 강제 형변환 : Number(), parseInt(), parseFloat()함수 이용
* parseInt()함수는 인자가 2개로 문자열, radix(해당진수)를 선택할 수 있음
> 연산자
| 연산자 종류 | 연산자 |
|
최우선 연산자
|
(), [], .
|
|
단항 연산자
|
++, --, + sign, - sign
|
|
산술 연산자
|
+, -, *, /, %
|
|
관계 연산자
|
>, <, >=, <=, ==, !=, ===, !==
|
|
논리 연산자
|
&&, ||
|
|
대입 연산자
|
= |
|
복합대입연산자
|
+=, -=, *=, /=, %=
|
|
삼항 연산자
|
?: ;
|
* 연산자 우선순위 : 최우선 > 단항 > 산술 > 관계 > 논리 > 삼항 > 대입
> 제어문
-> 조건문
-> if, if~else, if~else if~else, switch문, 짧은 조건문(&&, ||)
-> 반복문
-> for, while, do~while, for in문
-> 분기문
-> continue, break문
> 실습 코드와 출력 결과
-> 02_기본문법.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 문법</title>
</head>
<body>
<h1 id="heading1">기본 문법</h1>
<script>
var h = document.getElementById('heading1');
// h.style.backgroundColor = 'red';
</script>
<hr>
<h2>1. 변수와 자료형</h2>
<h3>1) 변수 선언</h3>
<p>
- 함수 내부에서 'var 변수명;'으로 선언하면 함수에서만 사용 가능한 지역변수가 된다. <br>
- 함수 내부에서 '변수명;'으로 선언하거나 함수 밖에서 '변수명;' 또는 'var 변수명;'으로 선언하면 전역변수가 된다. <br>
- 전역변수와 지역변수가 동일한 이름인 경우, 함수 내부에서 호출하면 지역변수가 우선권을 가진다. <br>
- 전역변수 사용 시 'window.변수명' 혹은 'this.변수명'으로 표현해서 사용한다.(window, this 생략가능) <br>
- 전역변수는 해당 window 내에서 어디든 사용할 수 있고, 지역변수는 해당 함수 내에서만 사용이 가능하다. <br><br>
* 참고 - window 객체는 브라우저에서 제공하는 브라우저창(window)에 대한 정보를 담고 있는 객체이다.
</p>
-> 02_기본문법.js
// 1. 변수와 자료형
// 1) 변수 테스트
// 전역 변수 선언
str1 = '전역변수';
// 함수 외부에 선언한 변수는 var를 붙여도 전역변수이다.
var str2 = 'var 전역변수';
> 출력 결과
-> 02_기본문법.js
// html실행 순서에 따른 실행
// var h = document.getElementById('heading1');
// h.style.backgroundColor = 'red';
// console.log(str1);
// console.log(str2);
// 자바스크립트에서 페이지가 모두 로드되면 자동으로 실행되는 함수를 구현 시 사용한다.(이벤트)
window.onload = function () {
var str1 = '지역변수 1';
var str3 = '지역변수 2';
var str4;
// var h = document.getElementById('heading1');
// h.style.backgroundColor = 'red';
console.log(str1); // 지역 변수 1
console.log(this.str1); // 전역 변수
console.log(window.str1); // 전역 변수
console.log(str2); // var 전역 변수
console.log(this.str2); // var 전역 변수
console.log(window.str2); // var 전역 변수
console.log(str3); // 지역변수 2
console.log(this.str3); // undefined
console.log(window.str3); // undefined
console.log(str4); // undefined (선언 안된 변수)
console.log('---------------------------');
}
> 출력 결과
페이지가 로드되고 나서 console.log에 찍힐 수 있게 선언해주었다.
-> 02_기본문법.js
// var, let, const(상수)
// 1) 중복선언
// var : 중복 선언 가능, 마지막에 할당된 값으로 저장
var num = 0;
console.log(num);
var num = 10;
console.log(num);
var num = 20;
console.log(num);
// let : 중복 선언 불가, 코드의 안정성 높다.
let num2 = 10;
console.log(num2);
// let num2 = 20;
// console.log(num2);
const num3 = 10;
console.log(num3);
// const num3 = 20;
// console.log(num3);
// 값의 재할당이 불가능하다
num3 = 20;
console.log('---------------------------');
> 출력 결과
-> num3 값의 재할당이 불가능하기 때문에 에러가 발생한다.
-> 02_기본문법.js
// 2) 유효 범위(스코프)
// 함수 안에서 var 키워드로 선언된 변수는 함수 유효 범위를 갖는다.
if (true) {
var num4 = 10;
// 함수 내부에서 선언된 스코프
console.log(num4);
}
// 함수 외부에서 선언된 스코프
console.log(num4);
// 함수 안에서 let, const 키워드로 선언된 변수는 블록 유효 범위를 갖는다.({중괄호}안에서만 사용 가능)
if (true) {
let num5 = 20;
const num6 = 30;
console.log(num5);
console.log(num6);
}
// console.log(num5); // not defined
// console.log(num6);
> 출력 결과
-> 02_기본문법.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 문법</title>
<style>
.area {
width: 450px;
height: 200px;
border: 1px solid;
margin-top: 5px;
overflow: scroll;
}
</style>
</head>
<body>
<h1 id="heading1">기본 문법</h1>
<script>
var h = document.getElementById('heading1');
// h.style.backgroundColor = 'red';
</script>
<hr>
<h2>1. 변수와 자료형</h2>
<h3>1) 변수 선언</h3>
<p>
- 함수 내부에서 'var 변수명;'으로 선언하면 함수에서만 사용 가능한 지역변수가 된다. <br>
- 함수 내부에서 '변수명;'으로 선언하거나 함수 밖에서 '변수명;' 또는 'var 변수명;'으로 선언하면 전역변수가 된다. <br>
- 전역변수와 지역변수가 동일한 이름인 경우, 함수 내부에서 호출하면 지역변수가 우선권을 가진다. <br>
- 전역변수 사용 시 'window.변수명' 혹은 'this.변수명'으로 표현해서 사용한다.(window, this 생략가능) <br>
- 전역변수는 해당 window 내에서 어디든 사용할 수 있고, 지역변수는 해당 함수 내에서만 사용이 가능하다. <br><br>
* 참고 - window 객체는 브라우저에서 제공하는 브라우저창(window)에 대한 정보를 담고 있는 객체이다.
</p>
<h3>2) 자료형</h3>
<p>
자바스크립트에서는 변수에 별도로 자료형을 지정해 주지 않고 리터럴에 의해 자료형이 결정된다.
</p>
<ul>
<li>string(문자열)</li>
<li>number(숫자)</li>
<li>boolean(논리값)</li>
<li>object(객체)</li>
<li>function(함수)</li>
<li>undefined(초기화가 안된 변수)</li>
</ul>
<button onclick="typeTest();">자료형 테스트</button>
<div id="area1" class="area"></div>
-> 02_기본문법.js
// 2) 자료형 테스트
function typeTest() {
let name = '홍길동'; // 문자열
let age = 20; // 숫자
let height = 178.8; // 숫자
let check = false; // 논리값
let hobbies = ['축구', '야구', '영화감상']; // 배열
// 객체
let user = {
name:'홍길동',
age: 20,
height: 178.8,
id : 'mrhong',
// hobbies: ['축구', '야구', '영화감상']
// hobbies: hobbies
hobbies
};
// 함수
let testFunction = function(num1, num2) {
alert(num1 + num2);
};
// testFunction(10, 20);
// testFunction();
// console.log(hobbies);
// console.log(user);
// console.log(testFunction);
let area = document.getElementById('area1');
// typeof() 연산자
// 값의 자료형을 확인하는 연산자로
// 변수 선언 시 자료형을 지정하지 않기 때문에 변수 명만으로는 데이터의 자료형을 확인할 수 없다.
// 따라서 변수의 자료형을 확인하려면 typeof() 연산자를 사용해야 한다.
area.innerHTML = '<h4>안녕하세요.</h4>';
area.innerHTML += `${name}, ${typeof(name)} <br>`;
area.innerHTML += `${age}, ${typeof(age)} <br>`;
area.innerHTML += `${height}, ${typeof(height)} <br>`;
area.innerHTML += `${check}, ${typeof(check)} <br>`;
area.innerHTML += `${hobbies}, ${typeof(hobbies)} <br>`;
area.innerHTML += `${user}, ${typeof(user)} <br>`;
area.innerHTML += `${testFunction}, ${typeof(testFunction)} <br>`;
}
> 출력 결과
-> 값과 타입별로 출력
-> 02_기본문법.html
<h4>* infinity와 NaN</h4>
<p>
자바스크립트의 경우 어떤 수를 0으로 나누면 infinity라는 값이 들어가게 되고 <br>
자바스크립트가 표현할 수 없는 숫자는 NaN(Not a Number)로 표시된다.
</p>
<button onclick="opTest();">infinity, NaN 테스트</button>
<div id="area2" class="area"></div>
<hr>
-> 02_기본문법.js
function opTest() {
// Infinity : 양의 무한대
// -Infinity : 음의 무한대
// NaN : 산술 연산 불가
let num1 = 10 / 0;
let num2 = 10 / 'a';
let area = document.getElementById('area2');
area.innerHTML = `10 / 0 : ${num1} <br>`;
area.innerHTML += `10 / a : ${num2} <br>`;
area.innerHTML += `num1 == Infinity : ${num1 === Infinity} <br>`;
area.innerHTML += `isFinite(num1) : ${isFinite(num1)} <br>`;
// area.innerHTML += `num2 == NaN : ${num2 === NaN} <br>`; // isNaN으로 판별해야 한다.
area.innerHTML += `isNaN(num2) : ${isNaN(num2)} <br>`;
}
> 출력 결과
-> 02_기본문법.html
<h2>2. 데이터 형변환</h2>
<h3>1) 문자열과 숫자의 '+' 연산</h3>
<p>
문자열 + 숫자 = 문자열 <br>
숫자 + 숫자 + 문자열 = 문자열(숫자가 먼저 계산되고 뒤의 문자열과 합쳐진다.)
</p>
<button onclick="testPlus();">문자열과 숫자의 + 연산</button>
<div id="area3" class="area"></div>
-> 02_기본문법.js
// --------------------------------------------------
// 2. 데이터 형변환
// 1) 문자열과 숫자의 '+' 연산
function testPlus() {
let test1 = 7 + 7; // 14
let test2 = 7 + '7'; // '77'
let test3 = '7' + 7; // '77'
let test4 = '7' + '7'; // '77'
let test5 = 7 + 7 + '7'; // '147'
let test6 = 7 + '7' + 7; // '777'
let test7 = '7' + 7 + 7; // '777'
let test8 = '7' + (7 + 7); // '714'
let test9 = 7 * '7'; // 49
let test10 = '7' - 3; // 4
let test11 = 4 / '2' + 3;
let test12 = '3' * '7';
let test13 = '3' * 'a';
let area = document.getElementById('area3');
area.innerHTML = `test1 : ${test1} <br>`;
area.innerHTML += `test2 : ${test2} <br>`;
area.innerHTML += `test3 : ${test3} <br>`;
area.innerHTML += `test4 : ${test4} <br>`;
area.innerHTML += `test5 : ${test5} <br>`;
area.innerHTML += `test6 : ${test6} <br>`;
area.innerHTML += `test7 : ${test7} <br>`;
area.innerHTML += `test8 : ${test8} <br>`;
area.innerHTML += `test9 : ${test9} <br>`;
area.innerHTML += `test10 : ${test10} <br>`;
area.innerHTML += `test11 : ${test11} <br>`;
area.innerHTML += `test12 : ${test12} <br>`;
area.innerHTML += `test13 : ${test13} <br>`;
}
> 출력 결과
-> 02_기본문법.html
<h3>2) 강제 형변환</h3>
<p>
자바스크립트에서 문자형 => 숫자형 변환 시 <br>
Number 내장 객체 또는 parseInt(), parseFloat() 내장 함수를 이용하여 강제 형변환이 가능하다.
<br><br>
자바스크립트에서 숫자형 => 문자형 변환 시 <br>
String 내장 객체를 이용하여 강제 형변환이 가능하다.
</p>
<button onclick="castingTest();">casting 테스트</button>
<div id="area4" class="area"></div>
-> 02_기본문법.js
function castingTest() {
let area = document.getElementById('area4');
area.innerHTML = `${2 + '3'} <br>`; // 23
area.innerHTML += `${2 + Number('3')} <br>`; // 5
area.innerHTML += `${String(2) + Number('3')} <br>`; // 23
area.innerHTML += `${2 + parseInt('3')} <br>`; // 5
area.innerHTML += `${2 + parseFloat('3')} <br>`; // 5
area.innerHTML += `${parseInt('0xff', 16)} <br>`; // 255
}
> 출력 결과
> 실습 전체 코드
-> 02_기본문법.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 문법</title>
<style>
.area {
width: 450px;
height: 200px;
border: 1px solid;
margin-top: 5px;
overflow: scroll;
}
</style>
</head>
<body>
<h1 id="heading1">기본 문법</h1>
<script>
var h = document.getElementById('heading1');
// h.style.backgroundColor = 'red';
</script>
<hr>
<h2>1. 변수와 자료형</h2>
<h3>1) 변수 선언</h3>
<p>
- 함수 내부에서 'var 변수명;'으로 선언하면 함수에서만 사용 가능한 지역변수가 된다. <br>
- 함수 내부에서 '변수명;'으로 선언하거나 함수 밖에서 '변수명;' 또는 'var 변수명;'으로 선언하면 전역변수가 된다. <br>
- 전역변수와 지역변수가 동일한 이름인 경우, 함수 내부에서 호출하면 지역변수가 우선권을 가진다. <br>
- 전역변수 사용 시 'window.변수명' 혹은 'this.변수명'으로 표현해서 사용한다.(window, this 생략가능) <br>
- 전역변수는 해당 window 내에서 어디든 사용할 수 있고, 지역변수는 해당 함수 내에서만 사용이 가능하다. <br><br>
* 참고 - window 객체는 브라우저에서 제공하는 브라우저창(window)에 대한 정보를 담고 있는 객체이다.
</p>
<h3>2) 자료형</h3>
<p>
자바스크립트에서는 변수에 별도로 자료형을 지정해 주지 않고 리터럴에 의해 자료형이 결정된다.
</p>
<ul>
<li>string(문자열)</li>
<li>number(숫자)</li>
<li>boolean(논리값)</li>
<li>object(객체)</li>
<li>function(함수)</li>
<li>undefined(초기화가 안된 변수)</li>
</ul>
<button onclick="typeTest();">자료형 테스트</button>
<div id="area1" class="area"></div>
<h4>* infinity와 NaN</h4>
<p>
자바스크립트의 경우 어떤 수를 0으로 나누면 infinity라는 값이 들어가게 되고 <br>
자바스크립트가 표현할 수 없는 숫자는 NaN(Not a Number)로 표시된다.
</p>
<button onclick="opTest();">infinity, NaN 테스트</button>
<div id="area2" class="area"></div>
<hr>
<h2>2. 데이터 형변환</h2>
<h3>1) 문자열과 숫자의 '+' 연산</h3>
<p>
문자열 + 숫자 = 문자열 <br>
숫자 + 숫자 + 문자열 = 문자열(숫자가 먼저 계산되고 뒤의 문자열과 합쳐진다.)
</p>
<button onclick="testPlus();">문자열과 숫자의 + 연산</button>
<div id="area3" class="area"></div>
<h3>2) 강제 형변환</h3>
<p>
자바스크립트에서 문자형 => 숫자형 변환 시 <br>
Number 내장 객체 또는 parseInt(), parseFloat() 내장 함수를 이용하여 강제 형변환이 가능하다.
<br><br>
자바스크립트에서 숫자형 => 문자형 변환 시 <br>
String 내장 객체를 이용하여 강제 형변환이 가능하다.
</p>
<button onclick="castingTest();">casting 테스트</button>
<div id="area4" class="area"></div>
-> 02_기본문법.js
// 1. 변수와 자료형
// 1) 변수 테스트
// 전역 변수 선언
str1 = '전역변수';
// 함수 외부에 선언한 변수는 var를 붙여도 전역변수이다.
var str2 = 'var 전역변수';
// html실행 순서에 따른 실행
// var h = document.getElementById('heading1');
// h.style.backgroundColor = 'red';
// console.log(str1);
// console.log(str2);
// 자바스크립트에서 페이지가 모두 로드되면 자동으로 실행되는 함수를 구현 시 사용한다.(이벤트)
window.onload = function () {
var str1 = '지역변수 1';
var str3 = '지역변수 2';
var str4;
// var h = document.getElementById('heading1');
// h.style.backgroundColor = 'red';
console.log(str1); // 지역 변수 1
console.log(this.str1); // 전역 변수
console.log(window.str1); // 전역 변수
console.log(str2); // var 전역 변수
console.log(this.str2); // var 전역 변수
console.log(window.str2); // var 전역 변수
console.log(str3); // 지역변수 2
console.log(this.str3); // undefined
console.log(window.str3); // undefined
console.log(str4); // undefined (선언 안된 변수)
console.log('---------------------------');
// var, let, const(상수)
// 1) 중복선언
// var : 중복 선언 가능, 마지막에 할당된 값으로 저장
var num = 0;
console.log(num);
var num = 10;
console.log(num);
var num = 20;
console.log(num);
// let : 중복 선언 불가, 코드의 안정성 높다.
let num2 = 10;
console.log(num2);
// let num2 = 20;
// console.log(num2);
const num3 = 10;
console.log(num3);
// const num3 = 20;
// console.log(num3);
// 값의 재할당이 불가능하다
// num3 = 20;
console.log('---------------------------');
// 2) 유효 범위(스코프)
// 함수 안에서 var 키워드로 선언된 변수는 함수 유효 범위를 갖는다.
if (true) {
var num4 = 10;
// 함수 내부에서 선언된 스코프
console.log(num4);
}
// 함수 외부에서 선언된 스코프
console.log(num4);
// 함수 안에서 let, const 키워드로 선언된 변수는 블록 유효 범위를 갖는다.({중괄호}안에서만 사용 가능)
if (true) {
let num5 = 20;
const num6 = 30;
console.log(num5);
console.log(num6);
}
// console.log(num5); // not defined
// console.log(num6);
}
// 2) 자료형 테스트
function typeTest() {
let name = '홍길동'; // 문자열
let age = 20; // 숫자
let height = 178.8; // 숫자
let check = false; // 논리값
let hobbies = ['축구', '야구', '영화감상']; // 배열
// 객체
let user = {
name:'홍길동',
age: 20,
height: 178.8,
id : 'mrhong',
// hobbies: ['축구', '야구', '영화감상']
// hobbies: hobbies
hobbies
};
// 함수
let testFunction = function(num1, num2) {
alert(num1 + num2);
};
// testFunction(10, 20);
// testFunction();
// console.log(hobbies);
// console.log(user);
// console.log(testFunction);
let area = document.getElementById('area1');
// typeof() 연산자
// 값의 자료형을 확인하는 연산자로
// 변수 선언 시 자료형을 지정하지 않기 때문에 변수 명만으로는 데이터의 자료형을 확인할 수 없다.
// 따라서 변수의 자료형을 확인하려면 typeof() 연산자를 사용해야 한다.
area.innerHTML = '<h4>안녕하세요.</h4>';
area.innerHTML += `${name}, ${typeof(name)} <br>`;
area.innerHTML += `${age}, ${typeof(age)} <br>`;
area.innerHTML += `${height}, ${typeof(height)} <br>`;
area.innerHTML += `${check}, ${typeof(check)} <br>`;
area.innerHTML += `${hobbies}, ${typeof(hobbies)} <br>`;
area.innerHTML += `${user}, ${typeof(user)} <br>`;
area.innerHTML += `${testFunction}, ${typeof(testFunction)} <br>`;
}
function opTest() {
// Infinity : 양의 무한대
// -Infinity : 음의 무한대
// NaN : 산술 연산 불가
let num1 = 10 / 0;
let num2 = 10 / 'a';
let area = document.getElementById('area2');
area.innerHTML = `10 / 0 : ${num1} <br>`;
area.innerHTML += `10 / a : ${num2} <br>`;
area.innerHTML += `num1 == Infinity : ${num1 === Infinity} <br>`;
area.innerHTML += `isFinite(num1) : ${isFinite(num1)} <br>`;
// area.innerHTML += `num2 == NaN : ${num2 === NaN} <br>`; // isNaN으로 판별해야 한다.
area.innerHTML += `isNaN(num2) : ${isNaN(num2)} <br>`;
}
// --------------------------------------------------
// 2. 데이터 형변환
// 1) 문자열과 숫자의 '+' 연산
function testPlus() {
let test1 = 7 + 7; // 14
let test2 = 7 + '7'; // '77'
let test3 = '7' + 7; // '77'
let test4 = '7' + '7'; // '77'
let test5 = 7 + 7 + '7'; // '147'
let test6 = 7 + '7' + 7; // '777'
let test7 = '7' + 7 + 7; // '777'
let test8 = '7' + (7 + 7); // '714'
let test9 = 7 * '7'; // 49
let test10 = '7' - 3; // 4
let test11 = 4 / '2' + 3;
let test12 = '3' * '7';
let test13 = '3' * 'a';
let area = document.getElementById('area3');
area.innerHTML = `test1 : ${test1} <br>`;
area.innerHTML += `test2 : ${test2} <br>`;
area.innerHTML += `test3 : ${test3} <br>`;
area.innerHTML += `test4 : ${test4} <br>`;
area.innerHTML += `test5 : ${test5} <br>`;
area.innerHTML += `test6 : ${test6} <br>`;
area.innerHTML += `test7 : ${test7} <br>`;
area.innerHTML += `test8 : ${test8} <br>`;
area.innerHTML += `test9 : ${test9} <br>`;
area.innerHTML += `test10 : ${test10} <br>`;
area.innerHTML += `test11 : ${test11} <br>`;
area.innerHTML += `test12 : ${test12} <br>`;
area.innerHTML += `test13 : ${test13} <br>`;
}
function castingTest() {
let area = document.getElementById('area4');
area.innerHTML = `${2 + '3'} <br>`; // 23
area.innerHTML += `${2 + Number('3')} <br>`; // 5
area.innerHTML += `${String(2) + Number('3')} <br>`; // 23
area.innerHTML += `${2 + parseInt('3')} <br>`; // 5
area.innerHTML += `${2 + parseFloat('3')} <br>`; // 5
area.innerHTML += `${parseInt('0xff', 16)} <br>`; // 255
}
반응형
'국비지원_Java > Java Programming_1' 카테고리의 다른 글
| 자바 프로그래밍_Day_58_자바스크립트 함수, 객체 (0) | 2022.06.01 |
|---|---|
| 자바 프로그래밍_Day_57_자바스크립트 기본문법, 배열, 함수 (0) | 2022.06.01 |
| 자바 프로그래밍_Day_55_자바스크립트개요 (0) | 2022.05.31 |
| 자바 프로그래밍_Day_54_UI디자인 평가 (0) | 2022.05.30 |
| 자바 프로그래밍_Day_53_웹 문서 구조 (0) | 2022.05.30 |
'국비지원_Java/Java Programming_1' Related Articles
more
Comments