개요부터 기본 작동까지
자바스크립트라는 언어 자체는 java와 굉장히 유사하여, 다른 부분만 짚어나가는 형식으로 수업이 진행되었고, 그 수업을 들은 내용을 정리한 포스팅이다. 때문에 자바스크립트를 구체적으로 설명하지는 않았다.
1. 개요
동적인 화면 구성에 도움을 주는 언어이며, 웹의 동작을 구현할 수 있다. 프로그램 언어 해석기(interpreter)가 코드를 직접 해석하여 바로 수행하는 형태로 진행된다. 컴파일 언어와 유사한 구조이다. 언어 해석기는 브라우저에 포함되어있으므로, 다양한 브라우저에서 실행해보는것도 중요한 포인트이다.
자바스크립트는 HTML의 내용, 속성, 스타일을 변경할수 있게 해준다. 실행 방식은 CSS처럼 내부 vs 외부가 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: coral;
cursor: pointer;
}
#image{
cursor: pointer;
}
</style>
<script type="text/javascript">
function changeColor(obj){
obj.style.backgroundColor="green";
}
</script>
</head>
<body>
<div id="box" onclick="changeColor(this)"></div>
<br>
<img id="image" alt="자바스크립트 실습사진" src="image/before.jpg">
<script type="text/javascript">
//요소의 선택, 클릭시 이름없는 함수가 작동될 예정
document.querySelector('#image').onclick=function(){
this.src="image/default.jpg";
}
</script>
</body>
</html>
2. 변수와 출력
1) 변수의 구분
자바스크립트에서 변수는 데이터타입(자료형)과 Scope(유효성)으로 구분할 수 있다.
①데이터타입(자료형)
String
number : 실수, 양수, 음수 모두 포함
boolean
Null : object 값이 없다는 뜻
object : 어떤 변수에 여러개의 값이 할당된 경우
undefined : 변수에 값이 할당되지 않은 상태로 값을 알 수 없는 경우이며, null과 다르다
②Scope(유효성)
지역변수 : 어떤 함수 내부에 선언되는 경우
전역변수 : 함수 외부에 단독으로 선언되는 경우
2) 변수의 선언과 형변환
* 변수의 선언방법은 다음과 같다 *
var 변수명 = '값';
//재선언과 값의 재할당이 가능하다.
let test(변수명) = '값';
//변수의 재선언이 불가능하지만, 값의 재할당이 가능하다.
//(let test는 되지 않지만, test=123은 된다.)
const 변수명 = '값';
//변수의 재선언, 재할당이 모두 불가능하며, 일반적으로 상수화할 목적으로 사용한다.
자바스크립트는 타입 검사가 매우 유연한 언어이다. 자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입하는것이 가능하다.
var num = 20; // Number 타입의 20
num = "이십"; // String 타입의 "이십"
자바스크립트는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동(묵시적)으로 타입을 변환하여 사용한다. 즉, 문자열 값이 오길 기대하는 곳에 숫자가 오더라도 자바스크립트는 알아서 숫자를 문자열로 변환하여 사용한다.
10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨.
"3" * "5"; // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨.
일반적으로 묵시적 타입변환이 적용되지만, 명시적 타입변환도 가능하도록 하고 있다. 관련 함수는 아래와 같다.
1. Number() : 해당 메서드에 0,1을 입력하면 불린타입으로 반환도 가능하다
2. String()
3. Boolean()
4. Object()
5. parseInt() : 진법의 정수를 반환함.
6. parseFloat() : 부동 소수점 수를 반환함
Number("10"); // 숫자 10
String(true); // 문자열 "true"
Boolean(0); // 불리언 false
Object(3); // new Number(3)와 동일한 결과로 숫자 3
숫자타입을 문자열타입으로 바꾸기 위해서는 아래의 메서드를 사용할 수 있다.
| 메서드 | 설명 |
| toExponential() | 정수 부분은 1자리, 소수 부분은 입력받은 수만큼 e 표기법을 사용하여 숫자를 문자열로 변환함. |
| toFixed() | 소수 부분을 입력받은 수만큼 사용하여 숫자를 문자열로 변환함. |
| toPrecision() | 입력받은 수만큼 유효 자릿수를 사용하여 숫자를 문자열로 변환함. |
3) 출력
자바스크립트에서의 출력은 총 4가지 방법이 있는데, 그중 자주 사용될 것 같은 3가지 방법에 대해서만 정리하여 다루어보았다.
| 메서드 | 설명 |
| alert() | 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달해 준다. |
| document.write() | 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력되므로, 주로 test나 디버깅을 위해 사용된다. |
| console.log() |
웹 브라우저의 콘솔을 통해 데이터를 출력한다. |
여기까지의 내용들을 바탕으로 실습 내용을 코드 첨부 하였다.
<script type="text/javascript">
// 웹브라우저의 f12 console에 로그를 띄울 목적이다.
var test='실습중!'; //전역변수
console.log(test);
function func(){//함수 선언, 정의
var test='지역변수';
console.log('지역변수 : ', test);
}
func(); //함수의 호출
console.log('전역변수 : ', test);
// 함수내부에서 호출될때, 지역변수의 우선순위가 높으므로 먼저 호출된다.
</script>//다양한 변수 사용 결과
<script type="text/javascript">
var test1;
console.log(test1);//undefind출력
var test2=null;
console.log(test2);//null출력
//console.log(test3);//err발생
console.log(10/0);//infinity(무한대)출력
console.log(10*'apple');//NaN(Not a Number의 표시)출력
//숫자인지 아닌지를 체크해주는 isNaN함수가 존재하며, true/false로 출력된다.
console.log(isNaN('banana'));
console.log(isNaN(3));
//비교연산자
//(대체적으로 JAVA와 동일하여 차이점이 있는 부분에 대해서만 설명하였다.)
var x=10;
//값과 타입이 모두 같은지/다른지 check하는 연산자표시
console.log('x!==\'10\' : ', x!=='10');
console.log('x===\'10\' : ', x==='10');
</script><script type="text/javascript">
var input=prompt('알파벳을 입력하세요');
if(input == 'a'){
console.log('A가 입력되었습니다.');
} else {
console.log('A가 입력되지 않았습니다.');
}
</script>
4) 예제
위의 내용들을 바탕으로 하여 두개의 예제를 풀어보았다.
① pw를 입력받고, 로그인 실패시 회수 제한을 구현할 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제1</title>
</head>
<body>
<script type="text/javascript">
var pw=1234;//응집도 향상을 위한 pw 변수화
var cnt=5;//로그인 실패 회수
//로그인 실패 제한회수(5회)만큼 반복
for(var i=0; i<5; i++){
var input=prompt('PW를 입력하세요');
if(input==pw){//1234로 입력되면
console.log('로그인에 성공하셨습니다.');
break;
}else{//아니라면
console.log('로그인에 실패하셨습니다. 남은기회 ',--cnt,'번');
}
}
//실패 제한회수 초과시
console.log('사용하실 수 없습니다.');
</script>
</body>
</html>
② 두자리의 랜덤수를 생성하고, 해당 값의 정답을 입력할 수 있도록 할 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제 2</title>
</head>
<body>
<script type="text/javascript">
// var num1=12;
// var num2=10;
/* 랜덤수 생성
*Math.random()사용시 실수의 랜덤수 반환됨
*랜덤수의 범위를 지정하는 공식(Math.random()*(max-min)+min)에 따라작성하고,
*반환된 랜덤 실수를 내림하여 random을 정수로 지정한다.
(이때 최대 소수가 0.0~99.99999..이기 때문에 내림시 100을 포함하지 않는다.)*/
var num1= Math.floor(Math.random()*(100-10))+10
var num2= Math.floor(Math.random()*(100-10))+10
while(true){//맞출때까지 반복
var input=prompt(num1+'*'+num2+'= ? ');
if(input==(num1*num2)){
console.log('정답입니다');
break;//정답이면 종료
}else{
console.log('오답입니다');
}
}
</script>
</body>
</html>
3. 함수
함수를 선언한다거나, 정리한다는 표현을 사용하며 Java에서의 함수 사용과 크게 다른점이 없기에 3개의 예제문제를 풀면서 내용을 확인하였다.
① 입력된 수의 팩토리얼을 반환하는 함수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>함수예제 1</title>
</head>
<body>
<script type="text/javascript">
var input = prompt('기준이 될 정수를 입력하세요');
function func(num){
if(num<=1) { // 1!은 1이므로
return 1; // 1을 반환한다
}
return num * func(num - 1);//재귀호출
}
//함수의 사용과 동시에 과정 출력
console.log(func(input));
</script>
</body>
</html>② 두 정수의 배수여부를 판단하는 함수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>함수 예제2</title>
</head>
<body>
<script type="text/javascript">
var inputNum1 = prompt('2개의 정수중 하나를 입력하세요');
var inputNum2 = prompt('2개의 정수중 하나를 입력하세요');
function func(num1,num2){
//처음 입력된 수가 더 작다는 가정으로 함수 시작
var min=num1;
var max=num2;
let flag;//플래그
//만약 뒤에 입력된 수가 더 작다면?
if(num1>num2){
min=num2;
max=num1;
}
//min, max설정 완료 후 결과 확인
if((max%min)==0){
flag=max+'는 '+min+'의 배수입니다';
}else{
flag=max+'는 '+min+'의 배수가 아닙니다';
}
//flag에 담아 결과 출력
return console.log(flag);
}
//함수 사용
func(inputNum1,inputNum2);
</script>
</body>
</html>③ 입력된 수에 맞춰 내리막길 별을 찍는 함수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>함수 예제3</title>
</head>
<body>
<script type="text/javascript">
var input = prompt('정수를 입력하세요');
function func(num){
//입력받은 숫자가 0이 될때까지 1씩 감소
for (var i=num; i>=1; i--) {
//문자열 *을.repeat( i번 반복 )
console.log('*'.repeat(i))
}
}
func(input);
</script>
</body>
</html>
4. String객체
자바스크립트에서 문자열은 보통 문자열 리터럴을 사용하여 표현한다. 하지만 문자열을 나타낼 때 new 연산자를 사용하여 명시적으로 String 객체를 생성할 수도 있다. 이러한 String 객체는 문자열 값을 감싸고 있는 래퍼(wrapper) 객체이다.
즉, 문자열을 만드는 방식은 literal 생성 방식, String 객체생성 방식 이렇게 총 두가지가 있으며, 이번 포스팅에서는 String객체 생성 방식에 대해 다루어보았다.
이 String객체를 사용하기 위해서는 생성자가 필수이며, new라는 연산자를 생성자 앞에 붙여 함께 사용한다.
var str1="apple";//문자열(이터럴)
var str2=new String("apple");//객체
위의 문자열에 대하여 다음과 같은 조건식을 달았을때의 출력 결과를 통해 두 문자열의 타입과 값이 같은지를 확인할 수 있다.
if(str1==str2){//동일 출력됨
console.log('동일');
} else {
console.log('동일하지 않음');
}
if(str1===str2){//동일하지 않음 출력됨
console.log('동일');
} else {
console.log('동일하지 않음');
}
값은 같으나, 타입까지 정확하게 일치하지는 않는 모습을 확인할 수 있다.
* 이 String객체는 java에서와 마찬가지로 속성(property / 멤버)과 기능(method)을 사용할 수 있다. *
속성/property/멤버 : 예시)length
기능/method : 예시)replace split substring substr toUpperCase concat slice indexOf 등
* 예제 *
전화번호 입력시 뒷자리를 마스킹하여 화면에 표시, 이메일 입력시 올바른 형식인지 아닌지의 여부를 확인하는 로직
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
// phone마스킹 함수
function inputPhone (phone){
document.write(phone.replace(phone.substring(9,13), '****'));
}
// 함수 사용
var phone=prompt('전화번호를 입력하세요. (ex) 010-0000-0000' );
inputPhone(phone);
// 정규식 사용
var email=prompt('이메일을 입력하세요.');
// 정규식(이메일 형식)
var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; // 정규식
//정규식은 match메서드와 세트로 사용된다
if(email.match(regExp) != null){
console.log('올바른 형식입니다');
} else{
console.log('올바르지 않은 형식입니다');
}
</script>
</body>
</html>