<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* 20.07.15 추가사항 */
==(동등연산자), !=(부등연산자) -> 자료형이 일치하지 않는 경우, 자료형을 일치시킨후 비교함.
===(일치연산자), !==(불일치연산자) -> 자료형변환없이, 엄격히 비교함.
so, ===(일치연산자), !==(불일치연산자) 을 사용하자!!!
/*비교연산자*/
/*0 ''(공백) false의 비교는 true(같다고 인식이 됨)*/
alert('' == false); // true
alert('' == 0); // true
alert(0 == false); // true
alert('273' == 273); // true , 비교시 숫자로 변환
alert(0 == null); // false
alert(0 == undefined); // false
alert(null == undefined); // true, 직접 비교시 결과다름.
/*일치연산자 : 자료형과 값 일치여부 -> 자료형과 값이 모두 일치*/
alert('' === false); // false
alert('' === 0); // false
alert(0 === false); // false
alert('273' === 273); // false
alert(null === undefined); // false
/*if조건문*/
var date = new Date();
var hour = date.getHours();
if(hour<11){
alert('아침 먹을 시간입니다.');
} else if(hour<15){
alert('점심 먹을 시간입니다.');
} else{
alert('저녁 먹을 시간입니다.');
}
/*switch 조건문*/
var input = Number(prompt('숫자를 입력하세요.', '숫자'));
switch(input % 2){
case 0:
alert('짝수입니다.');
break;
case 1:
alert('홀수입니다.');
break;
default:
alert('숫자가 아니올시다.');
break;
}
/* for반복문 */
var array = ['포도', '사과', '바나나', '망고'];
for(var i = array.length - 1; i>=0; i--){
alert(array[i]);
}
/* for in 반복문 */
var array = ['포도', '사과', '바나나', '망고'];
for(var i in array){
alert(array[i]);
}
/*while 반복문*/
var value = 0;
var startTime = new Date().getTime();
while(new Date().getTime() < startTime + 1000){
value++;
}
/*For문 예제 - label */
outerloop:
for(var i =0; i<10; i++){
innerloop:
for(var j = 0; j < 10; j++){
if(j > 3) break;
if(i == 2) break innerloop;
if(i == 4) break outerloop;
console.log("i=" + i + "j=" + j);
}
}
console.log("Final i = " + i + "j = " + j);
/* 배열의 내장함수 */
var array = ['포도', '사과', '바나나', '망고'];
/*forEach : 각각의 function 기능을 각각 실행 - for문대신 써도됨.*/
array.forEach(function(item){
console.log(item);
});
/*Symbol.iterator 속성을 가지는 컬렉션 전용*/
for(var i of array){
alert(i);
}
/*기존 기능에 영향을 주지 않으면서 새로운 property 추가*/
var mySymbol1 = Symbol('mySymbol');
var mySymbol2 = Symbol('mySymbol');
mySymbol1 === mySymbol2; //false
var prop2 = Symbol('prop2');
var obj = {
prop1: 1,
[prop2]: 2,
};
for(var key in obj){
console.log(key); // prop1만 출력됨
}
obj[prop2]; // 2, 대괄호[]로만 접근가능
/* 배열예제 1*/
var arrayA = [0,1,2,3];
arrayA.push(4); // 맨뒤에 추가
arrayA.pop(); // 맨뒤항목 제거 후 반환
arrayA.unshift(-1); // 맨앞에 추가
arrayA.shift(); // 맨앞에 항목제거 후 반환
delete arrayA[0]; // 첫번째 요소를 undefined로 변환 -> object에서는 속성제거
arrayA.splice(1,2); //인덱스 1위치에서 2개의 항목제거
arrayA.splice(1,2, 'four', 'five'); // 항목을 제거하고 2개의 항목을 인덱스 1에 추가
var arrayB = [4, 5, 6];
var arrayC = arrayA.concat(arrayB); // array 연결하기
var arrayD = arrayB.slice(1,2); // 원본은 유지하고 인덱스 1에서 2개의 항목으로 배열을 만들어 리턴
/* 배열예제 2*/
var numbers1 = ["apple", 1, 2, 3];
var numbers2 = numbers1.map(myFunction); // 함수로직을 반영한 새로운 배열을 리턴
var numbers3 = numbers1.filter(myFunction); // 함수가 true인 요소들의 새로운 배열을 리턴
var numbers4 = numbers1.every(myFunction); // 모든 요소가 함수의 조건을 만족하는지 check, some 존재
var a = numbers1.indexOf("apple"); // 0, lastIndexOf 존재
document.getElementById("demo").innerHTML = "Apple is found in a position" + a;
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array){
return value *2;
}
document.getElementById("demo").innerHTML = numbers3;
function myFunction(value, index, array){
return value > 18;
}
document.getElementById("demo").innerHTML = numbers4;
function myFunction(value, index, array){
return value > 18;
}
/* 배열예제 3*/
var arrayA = ['b', 'c', 'a'];
arrayA.sort(); //정렬하기 - 함수넣을수 있음. comparable과 같다고 보면 됨.
arrayA.reverse(); // 역순으로 정렬하기
arrayA.sort(function(a,b){return a - b}); // 정렬기준 함수를 매개변수로 전달
var txt=""; // 전역변수
var numbers = [0, 1, 2];
numbers.forEach(myFunction); // 각요소별 함수호출
numbers.first(myFunction); // 함수조건을 만족하는 첫번째 요소값, findindex존재(index 리턴)
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array){ // value(요소), array(전체배열)
txt = txt + value + "<br>";
}
//배열처럼 작동하는 유사배열을 내부적으로 많이 사용
var a = {};
// 1. 유사배열을 만들기 위해 property 추가
var i = 0;
while(i < 10){
a[i] = i * i;
i++;
}
a.length = i;
//2. 실제 배열인 것처럼 사용
var total = 0;
for(var j=0; j<a.length; j++)
total+= a[j];
// 메소드를 변수로 넘긴다!!!!!!!!
// 1. 배열a의 각 원소중 filter함수를 만족하는 요소만을 새로운 배열로 리턴
function filterArray(/*array*/a, /*Boolean function*/predicate){
var results = [];
var length = a.length; // 술어 함수가 배열의 길이를 반환할 경우에 대비하여
for(var i =0; i<length; i++){
var element = a[i];
if(predicate(element)) results.push(element);
}
return results;
}
// 2. 배열 a의 각 원소를 지정된 함수f로 전달하여 얻은 결과들을 원소로 하는 배열을 반환
function mapArray(/*array*/a, /*function*/f){
var r = [];
var length = a.length; //함수 f가 배열 길이를 변환할 경우에 대비하여
for(var i = 0; i < length; i++) r[i] = f(a[i]);
return r;
}
// 3. 피라미드 출력하기: alert or console.log 사용
function pyramid(){
var max = 10;
for(var i = 0; i <= max; i++) {
var print = "";
for(var j = max; j>i; j--) {
print+=" ";
}
for(var j = 0; j<2*i - 1; j++) {
print+="*";
}
console.log(print);
}
}
pyramid()
// 함수예제
// 함수를 전역변수에 할당
function square(x){return x*x;}
var a = square(4);
var b = square; // b는 함수를 가리킨다.
var c = b(5); // 자바스크립에서는 틀린 문법이 아님.
// 함수를 객체property에 할당
var o = new Object();
o.square = function(x){return x*x;}
var y = o.square(16);
// 배열원소에 함수 할당
var a = new Array(3);
a[0] = function(x){return x*x;}
a[1] = 20;
a[2] = a[0](a[1]);
// 객체의 property를 배열로 전달
function copyPropertyNamesToArray(o, a){
if(!a) a = []; // if구문이고 많이 쓰임. 요걸로 대체가능 ( a = a|| []; )
// !a는 !undefined 이므로 true임.
// ||연산자: 첫번째가 true거나 true로 반환되는 값이면
// 반환 아니면 두번째 반환
for(var property in o) a.push(property);
return a;
}
// 함수를 데이터로 사용하기(많이 쓰는 함수들이므로 알아두면 좋다....)
function add(x,y){return x+x;}
function subtract(x,y){return x-x;}
function muptiply(x,y){return x*x;}
function divide(x,y){return x/x;}
//위의 함수를 전달인자로 받아서 사용 -> 한줄로 끝낸다는 javascript의 장점 -> 많이쓰일수밖에 없다...
function operate(operator, operand1, operand2){
return operator(operand1, operand2);
}
// 객체로 구성하기
var i = operate(add, operate(add, 2, 3), operate(multiply, 4, 5));
var operations = {
add: function(x,y){return x+y;},
subtract: function(x,y){return x-y;},
muptiply: function(x,y){return x*y;},
divide: function(x,y){return x/y;},
pow: Math.pow // 이미 정의된 함수도 사용
}
function operate2(op_name, operand1, operand2){
if(typeof operators[op_name] == 'function'){
return operators[op_name](operand1, operand2);
} else throw 'unknown operator'; // 알수없는 연산자
}
var j = operate2('add', 'hello', operate2('add', '', 'world'));
var k = operate2('pow', 10, 2);
// 메소드로서의 함수
var calculator = {
operand1: 1;
operand2: 1;
// 함수는 this라 property를 통해 자신이 속한 객체에 접근할 수 있다.
compute:function(){
this.result = this.operand1 + this.operand2;
}
};
calculator.compute();
console.log(calculator.result); // 결과를 출력
// 함수 property: length => 정의된 함수 매개변수 갯수
function check(args){
var actual = args.length; // 실제로 전달받은 매개변수 갯수
var expected = args.callee.length; // 함수가 기대하는 매개변수 갯수
// arguments.callee 는 함수 자기자신을 가리킴(문법)
if(actual != expected){
throw new Error('Wrong number of arguments');
}
}
function f(x,y,z){
//함수가 기대하는 전달인자를 받았는지 검사
check(arguments);
return x+y+z;
}
// 함수 property 추가하기
//함수의 정적property를 생성하고 초기화
uniqueInteger.counter = 0;
//호출할때 마다 다른 값을 리턴
function uniqueInteger(){
return uniqueInteger.counter++;
}
// 객체 property를 전달인자로 사용하기(개발방식 중 하나)
function arraycopy(from, from_start, to, to_start, length)
function easycopy(args){
arraycopy(args.from, args.from_start || 0, args.to, args.to_start || 0, args.length);
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="document.getElementById('demo').innerHTML=over18">Click !</button>
</body>
</html>/*For문 예제 - label */
'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글
| IBSheet 그리드 특강 (0) | 2019.09.26 |
|---|---|
| 미니 프로젝트 (0) | 2019.09.17 |
| 12일차 jQuery (0) | 2019.09.16 |
| 11일차 jQuery (0) | 2019.09.11 |
| JavaScript - LinkedList, nodeType(재귀), Event 핸들러, DOM (0) | 2019.09.10 |
