[js]자바 스크립트: 연산자, 조건문, 반복문, 함수, 익명(무명) 함수, 오버로딩, onClick()
자바 스크립트 연산: 산술 연산, 증감 연산, 논리 연산, 비교 연산, 삼항 연산
<html>
<head>
<meta charset="UTF-8">
<title>ex01</title>
</head>
<body>
<script>
var num;
var obj = null;
document.write('100(숫자): ' + typeof 100 + "<br>");
document.write('10.5(숫자): ' + typeof 10.5 + "<br>");
document.write('"홍길동"(문자): ' + typeof "홍길동" + "<br>");
document.write("'홍길동'(문자): " + typeof '홍길동' + "<br>");
document.write('true(논리형): ' + typeof true + "<br>");
document.write('[1,2,3](객체): ' + typeof [1,2,3] + "<br>");
document.write('{name:"홍길동"}(객체): ' + typeof {name:"홍길동"} + "<br>");
document.write('num(정의되지 않았음): ' + typeof num + "<br>");
document.write('obj=null(객체): ' + typeof obj + "<br>");
console.log('hello')
</script>
</body>
</html>
클라이언트(웹 브라우저)가 서버에게 요청을 보낸 후 서버로부터 자바스크립트 코드를 전달받아서 실행한다.
자바스크립트 코드에서 console.log로 작성된 내용은 클라이언트의 개발자 도구 콘솔 탭에서 확인할 수 있다.
'', ""는 문자열을 의미한다. 이 둘의 차이점은 없다.
자바 스크립트는 다른 언어와 달리 변수를 생성할 때 자료형(data type)을 따로 명시하지 않는다.
변수를 생성할 때 var를 생략할 수 있다.
js에서의 정수와 실수 즉 숫자는 number라는 자료형이다.
정의되지 않은 객체의 type은 undefined이고, 참조 값(주소)이 정의되지 않은 객체의 타입은 object이다.
<html>
<head>
<meta charset="UTF-8">
<title>ex02</title>
</head>
<body>
<script>
num = 10;
document.write("num 변수: " + typeof num + "타입<p/>");
num = '홍길동';
document.write("--- 데이터 값 변경 후 ---<p/>");
document.write("num 변수: " + typeof num + "타입<p/>");
</script>
</body>
</html>
자바 스크립트는 자료형을 명시하지 않고 변수를 만든다. 대입되는 값에 따라 변수의 type이 변경된다.
증감/대입/산술 연산자
<script>
var data = 1;
data++;
document.write("data++ = "+ data +"<br>");
data--;
document.write("data-- = "+ data +"<br>");
var tmp;
tmp = 16 % 3;
document.write("16 % 3 = " + tmp +"<br>");
tmp = data * 5;
document.write("data * 5 = "+ tmp +"<br>");
</script>
자바와는 달리 자바 스크립트에서 정수 / 정수가 실수이다.
논리/삼항 연산자
<script>
var x = 5, y = 7;
document.write("(x < 10 && y > 10): " + (x < 10 && y > 10) + "<br>");
document.write("(x < 10 || y > 10): " + (x < 10 || y > 10) + "<br>");
document.write("!(x < 10 && y > 10): " + !(x < 10 && y > 10) + "<br>");
result = (x > y)? x : y;
document.write("큰 값: " + result + "<br>");
result = (x > y)? x - y : y - x;
document.write("큰 값 - 작은 값: " + result + "<br>");
</script>
자바 스크립트에서도 산술 연산자, 증감 연산자, 논리 연산자, 비교 연산자, 삼항 연산자를 사용할 수 있다.
<script>
var x = 5, y = "5";
document.write(typeof (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>");
</script>
자바 스크립트도 자바와 같이 문자열과 숫자(정수, 실수)의 +연산 결과는 문자열이다.
즉, 문자열이 숫자(number)보다 우선순위가 높다.
자바 스크립트에서는 type이 다른 변수와의 비교 연산이 가능하다.
type이 다를 때는 데이터 값으로 비교를 한다.
따라서 5 > "5"은 5 > 5와 같은 의미이므로 false이다.
자바 스크립트는 type이 다른 변수와도 비교 연산을 할 수 있기 때문에 ===, !===라는 독특한 연산자를 갖는다.
===는 type과 데이터 값이 모두 같을 때 true를 그렇지 않으면 false를 반환하고, !===는 type과 데이터 값이 모두 다를 때 true를 그렇지 않으면 false를 반환한다.
조건문: if문, switch문
반복문: for문, while문
if문
<script>
var tmp = "check";
var age = 18;
if(tmp == "check"){
if(age == 19) result = "고3입니다.";
else if(age > 19) result = "성인입니다.";
else result = "미성년자입니다.";
}
document.write("당신은 " + result + "<p/>");
</script>
자바 스크립트도 숫자 0은 false를, 0을 제외한 나머지 숫자는 true를 나타낸다.
switch문
<script>
var day;
var week = new Date().getDay(); //0(일요일)~6(토요일)
switch(week){
case 0: day = "일요일"; break;
case 1: day = "월요일"; break;
case 2: day = "화요일"; break;
case 3: day = "수요일"; break;
case 4: day = "목요일"; break;
case 5: day = "금요일"; break;
case 6: day = "토요일"; break;
//default: day = "없는 요일";
}
document.write("오늘은 <b>" + day + "</b>입니다. <p/>");
</script>
for문
<script>
var x, y;
for(x = 2; x <= 5; x++) {
document.write("<b> ---[" + x + "단]--- </b><br>");
for(y = 1; y <= 9; y++) {
document.write(x + " * " + y + " = " + (x * y) + "<br>");
}
}
</script>
while문
<script>
var x = 1;
var sum = 0;
while(x <= 100) {
sum += x;
x++;
}
document.write("1~100까지의 합: <b>" + sum + "</b>")
</script>
함수
자바 스크립트의 함수 역시 매개변수와 반환 값의 자료형을 명시하지 않는다.
선언식은 스크립트 실행 전 초기화 단계에서 생성되고, 함수 표현식은 스크립트가 실행되면서 특정 구문에 도착하면 생성된다.
자바스크립트 내부 알고리즘에 의해 스크립트 실행 전 선언된 함수를 찾아 생성하기 때문에 함수 선언 전에도 해당 함수를 호출하여 생성할 수 있다.
즉, 자바스크립트의 함수는 어디서나 호출이 가능한 특징을 갖는다.
<script>
var data1= 1234;
var data2 = "함수 선언 후 호출";
printMsg(data1); //함수 선언 전 호출
function printMsg(msg) {
document.write('함수 호출 메시지: ' + msg + '<br>');
return "반환 데이터";
}
returnData = printMsg(data2);
document.write('반환 데이터: ' + returnData + '<br>');
</script>
익명(무명) 함수
구조
var 변수명 = function( 매개변수 )
{
실행문;
};
자바스크립트 익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다.
익명 함수 호출 시 변수명을 함수명처럼 사용하면 된다.
<script>
var printMsg = function(msg) {
document.write("익명(무명) 함수: " + msg + "<br>");
}
printMsg("호출");
</script>
오버로딩(Overloading)
자바 스크립트에서의 함수명과 변수는 동일하므로 구현 코드만 다른 함수를 동시에 정의할 수 없다.
따라서 함수 내부에서 넘겨진 arguments의 수나 type으로 함수를 구분하여 오버로딩을 구현해야 한다.
이때, 전달받지 못한 매개변수의 값은 undefined이다. 함수의 매개변수는 순차적으로 대입된다.
arguments의 수로 함수를 구분하는 방식
function add() {
if(arguments.length == 1) return arguments[0];
else if(arguments.length == 2) return arguments[0] + arguments[1];
else if(arguments.length == 3) return arguments[0] + arguments[1] + arguments[2];
else return arguments[0] + arguments[1] + arguments[2] + arguments[3];
}
type으로 함수를 구분하는 방식
<script>
function add(data1, data2, data3, data4) {
if(data2 == undefined && data3 == undefined && data4 == undefined) total = data1;
else if(data3 == undefined && data4 == undefined) total = data1 + data2;
else if(data4 == undefined) total = data1 + data2 + data3;
else total = data1 + data2 + data3 + data4;
return total;
}
document.write(add(2) + "<br>");
document.write(add(2, 3) + "<br>");
document.write(add(2, 4, 6) + "<br>");
document.write(add(2, 4, 6, 7) + "<br>");
</script>
이벤트 처리 함수: onClick()
onclick속성은 주어진 요소의 클릭 이벤트를 처리하기 위한 이벤트 핸들러이다.
하나의 객체에는 하나의 onclick 속성만 존재할 수 있다.
document.getElementById(아이디): id로 객체를 찾는 함수
객체.value: 객체의 값에 접근
document.getElementById(아이디)를 통해 html 요소에 접근해서 다양한 속성들에 접근하고 변경할 수 있다.
<html>
<head>
<meta charset="UTF-8">
<title>ex14</title>
<script>
function display() {
nameObj = document.getElementById('name') //객체의 참조 값을 저장
data = nameObj.value //값에 접근
document.getElementById('name').value = ""
document.getElementById('name2').value = data
}
</script>
</head>
<body>
name: <input type="text" id="name"><br>
name2: <input type="text" id="name2"><br>
<input type="button" value="버튼" onClick="display()">
</body>
</html>
버튼이라는 값을 가진 button을 누르면 지정해둔 onclick속성에 의해 display()가 호출된다.
display()에서는 document.getElementById()를 통해 id가 name인 객체를 찾고, 참조 값을 nameObj라는 참조 변수에 저장한다.
nameObj.value를 통해 해당 객체의 값에 접근하고 이를 data라는 변수에 대입한다.
마지막으로, data를 id가 name2인 객체의 값으로 설정한다.
display()는 버튼이 클릭되었을 때, 첫 번째 textfield가 사용자로부터 입력받은 데이터를 두 번째 textfield의 값으로 설정하는 기능을 수행하는 함수이다.
<html>
<head>
<meta charset="UTF-8">
<title>ex17</title>
<script>
function textstyle() {
document.getElementById("msg").style.color = "blue"
document.getElementById("msg").style.fontSize = "30px"
document.getElementById("msg").style.fontStyle = "italic"
}
function texthidden() {
document.getElementById("msg").style.visibility = "hidden"
}
function textvisible() {
document.getElementById("msg").style.visibility = "visible"
}
</script>
</head>
<body>
<p id="msg">문서 객체 스타일 변경하기</p>
<input type="button" onclick="textstyle()" value="텍스트 스타일 변경">
<input type="button" onclick="texthidden()" value="텍스트 숨기기">
<input type="button" onclick="textvisible()" value="텍스트 보이기">
</body>
</html>
<참고>
자바스크립트: 함수 선언, 표현, 콜백
함수의 기본 - 정의: 프로그램을 구성하는 주요 구성 요소로, 유사한 동작을 하는 코드를 중복 코드 없이 간편하게 호출하기 위한 장치 - 함수 선언(function declaration) 문법: function 키워드, 함수 이
fickly.tistory.com
https://velog.io/@blackb0x/%EC%9D%B5%EB%AA%85%ED%95%A8%EC%88%98Anonymous-function
익명함수(Anonymous function)
자바스크립트 익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다. 익명 함수의 소스 코드는 변수값이므로 끝에 세미콜론 ; 을 대입한다. 익명 함수는 호출 시 변수명을 함
velog.io