JavaScript - 1103

일정)

월	화	수	목	금
7 jQuery 시작	8 JS 실습			11 jQuery 실습
14 JSP 시작		16 JSP 보강		18 JSP 시험

---

JS Function

JS는 function scope으로
function 안에서 선언된 변수는 function안에서만 존재함.

+) Java는 {}안에서 선언된 변수는 {}안에서만 존재함.

ex) function scope 예시

<script>
function A() {
  var a = 10;
  function B() {
    var b = 20;
  }
}
</script>

• 변수 a는 function A()안에서만 존재함.
  변수 b는 function B()안에서만 존재함.

+) 다음 예시가 Java 코드라면, A() 안에 B()가 존재함으로 A() 안에서 b를 사용할 수 있음.

closures

closure 성립 조건
1) 부모 function에서 자식 function을 return.(high order function)
2) 부모 function에서 선언된 변수를 자식 function에서 사용.

closure 효과
: 부모 function에서 선언된 변수를 private scope으로 사용 가능함.

+) Java의 private으로 선언된 변수를 관리하는 효과를 갖음.

• counter값은 오직 add()함수를 실행할 때만 변경 가능하다는 의미.
  (기타 다른 방법으로 counter변수값을 직접 수정 불가함.)
• 부모function에서 선언된 변수를 자식 함수에서 사용함으로서 자식 함수에만 부모의 변수를 사용하는 겻을 closure(폐쇄,포함)라고함.
  • 수학에서 close와 같은 개념임.

add function : function을 리턴함.
=> higer order function : function의 parameter로 function을 대입하거나, function을 리턴함.

<script>
const add = (function () {
	let counter = 0;
    return function () { counter += 1; return counter;}
})();

function myFunction() {
	document.getElementById("demo").innerHTML = add();
}
</script>

• IIFE(Immediately Inviked Function Expression)
  : function을 선언함과 동시에 즉시 실행
  -> (funtion(){})()

• add = function() {counter += 1; return counter;};

  • add의 부모의 function에서 선언된 메모리에 존재하는 counter 변수에 대하여 연결고리를JS엔진이 만들어줌.
  • add() 함수를 실행할 때, 연결고리를 가진 부모function에서 선언된 counter변수의 값을 계속 변경 가능하게 만듦.

---

JS Class

inheritance

JS의 inheritance(상속)은 Java와 유사함.

class Model extends Car
-> 부모 Car, 자식 Model

<script>
class Car {
	constructor(brand) {
    this.carname = brand;
	}
	present() {
		return 'I have a ' + this.carname;
    }
}

class Model extends Car {
	constructor(brand, mod) {
    	super(brand);
    	this.model = mod;
	}
    show() {
    	return this.present() + ', it is a ' + this.model;
	}
}

let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
</script>

getter setter

<script>
class Car {
	constructor(brand) {
	this.carName = brand;
	}

	// getter method
	get cNam() {
		return this.carName;
	}
	// setter method
	set cNam(x) {
		this.carName = x;
    }
}

let myCar = new Car("Ford");

document.getElementById("demo").innerHTML = 
  "My car name is " + myCar.cNam;
</script>

static method

<script>
class Car {
	constructor(name) {
    this.name = name;
    }
    static hello() {
    	return "Hello!"
	}
}

let myCar = new Car("Ford");

//You can call 'hello()' on the Car Class:
document.getElementById("demo").innerHTML = Car.hello();

// But NOT on  a Car Object:
document.getElementById("demo").innerHTML = myCar.hello();
// this will raise an error.
</script>

---

JS Anync

Callback

callback function
: function의 parameter에 넘긴 function을 말함.
=> parameter로 넘긴 function은 내부에서 다시 실행함.(call back)

<script>
function myDisplayer(something) {
	document.getElementById("demo").innerHTML = something;
}
    
function myCalculator(num1, num2, myCallback){
	let sum = num1 + num2;
    myCallback(sum); 
  	// myCallback은 myDisplayer(something)으로 웹브라우저에 dispaly될 부분임.
}

// parameter로 function을 넘김.(-> high order function)
myCalculator(5, 5, myDisplayer);
</script>

Asynchronous

Asynchronous(비동기)와 Synchronous(동기) 특징

	Asynchronous	Synchronous
의미	비동기;동시에 일어나지 않는.. -> 요청을 보낸 후, 다음 일을 처리하면서 결과를 기다림.	동기; 동시에 일어나는.. ->요청을 보낸 후, 결과가 돌아올 때까지 기다림.
요청&결과 동시 발생	O	X
장점	결과가 주어지는 시간동안 다른 작업이 가능함. -> 자원을 효율적으로 사용할 수 있음.	설계가 매우 간단함(직관적 설계).
단점	동기보다 설계가 복잡함.	결과가 나올 때까지 대기해야 함. -> 자원을 효율적으로 사용할 수 없음.

setTimeout
: Asynchronous 방식을 지원하는 함수
=> 다른 명령어와 겹치면 정확하게 n초 후에 실행되지 않음.

<script> 
// setTimeout(myFunction, 3000) : myFunction()을 3000ms 후에 실행하라는 명령어
setTimeout(myFunction, 3000);   // 3초 뒤에 생성됨.

function myFunction() {
	document.getElementById("demo").innerHTML = "I love You !!";
}

document.getElementById("demo2").innerHTML = "before SetTimeout function execution.";
</script>

익명함수로 setTimeout function 사용하기.
=> 실제로 많이 사용하는 방식임.

<script> 
	setTimeout(function() {document.getElementById("demo").innerHTML = "I love You !!";}, 3000);   
</script>

setInterval(function명,n밀리초)
: paramter로 입력된 함수를 n밀리초마다 반복 실행함.

<script>
// myFunction을 1초마다 반복 실행시킴.
setInterval(myFunction, 1000);  

function myFunction() {
	let d = new Date();
    document.getElementById("demo").innerHTML = 
    	d.getHours() + " : " +
        d.getMinutes() + " : " +
        d.getSeconds();
	}
</script>

---

JS DOM

HTML DOM(Document Object Model)
: html 각 element들의 interface 사양서(method)를 정리한 문서

getElements

getElementsByTagName("tag명")
: return html Collection객체로 return됨.

querySelectorAll("css selector")
: 선택한 css를 찾아옴.

forms object {frm1:object, frm2:obeject}
: from태그 안에 있는 모든 자식 객체들을 갖고 있음.

onsubmit attribute
: event로 submit 버튼을 클릭히면 실행되는 attribute
=> onsubmit="true"이면 서버로 date전달,
onsubmit="false"이면 서버로 date전달 안함.
+) 통상 id와 name를 같게 만들어줌.