(1) script tag의 위치
<html>
<head>
<meta charset="UTF-8">
<title>exam</title>
<script>
// if () {}
console.log("출력1"); // 출력 1
</script>
</head>
<body>
<script>
console.log("출력2"); // 출력 2
</script>
<h1>요점 정리 - 1.script 태그</h1>
<script>
console.lag("출력3"); //Uncaught TypeError: console.lag is not a function
console.log("출력4"); // 출력 안됨
</script>
</body>
</html>-
스크립트 태그는 헤드 혹은 바디 태그 안에 있어야 한다.
-
스크립트 태그는 위에서 아래로 실행된다.
-> 즉, 윗문장에서 에러 발생하면 아래문장을 실행 안한다. -
ex)
<script>
console.log("h1 태그 읽기 전")
console.log(document.getElementById("t1")) // null
</script>
<h1 id="t1">자바스크립트 코드 실행 순서</h1>
<script>
console.log("h1 태그 읽은 후")
console.log(document.getElementById("t1")) // <h1 id="t1">자바스크립트 코드 실행 순서</h1>
</script>(2) static type binding 과 dynamic type binding
(3) parameter와 argument
(4) 함수 이름과 함수 객체
<script>
function plus(a, b) {
return a + b;
}
console.log(plus(10, 20));
var ok = plus;
console.log(ok(100, 200));
var haha = ok;
console.log(haha(1000, 2000));
ok = "Hello";
ok(100,200);
</script>-
1) plus라는 함수 객체가 생성된다. 동시에 함수 객체의 주소를 갖는 레퍼런스가 생성된다.
(편의상 주소를 200이라 함) -
2) ok라는 변수가 plus 함수의 주소값을 참조한다. 이때 plus함수의 기능을 사용 가능하다.
-
3) haha라는 변수가 ok가 참조하는 주소값을 참조한다. 이때 plus함수의 기능을 사용 가능하다.
-
4) ok라는 변수가 "Hello"의 주소값을 참조한다. 이는 다른 주소값이므로, 더이상 plus라는 함수를 호출할 수 없다.
(5) 설계도 기반 객체 생성과 프로토 타입 기반 객체 생성
-
자바와 같은 설계도 기반 객체 생성의 경우, 처음부터 다 만들어줘야 한다.
-
자바스크립트와 같은 프로토 타입 기반 객체 생성의 경우, 원형 객체에 계속 + 해줄수 있다.
(6) JavaScript 지연 발생
- Javascript
<html>
<head>
<meta charset="UTF-8">
<title>ex01</title>
<script src="/javascript/ex01/exam05_1"></script>
</head>
<body>
<script>
console.log("--------------")
</script>
<h1>script 태그의 위치</h1>
<script>
console.log("--------------")
</script>
<script src="/javascript/ex01/exam05_2"></script>
</body>
</html>- Java
package com.eomcs.web.javascript;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class Ex01Controller {
@RequestMapping("/javascript/ex01/exam05_1")
public Object exam05_1() throws Exception{
Thread.sleep(10000); // 10초동안 기다렸다가 작업을 재개한다.
return"alert('okok')"; // 자바스크립트 코드 조각을 리턴한다.
}
@RequestMapping("/javascript/ex01/exam05_2")
public Object exam05_2() {
return"alert('nono')"; // 자바스크립트 코드 조각을 리턴한다.
}
}-
위의 코드의 경우 head에서 실행되는 script tag에 10초의 지연이 발생한다.
-
JavaScript는 위에서 아래로 순서대로 실행하기 때문에 다음 script 태그는 body 태그를 실행하기 전에 먼저 실행한다. 따라서 다음 script 태그를 실행하는데 시간이 오래 걸릴수록 body의 내용 출력도 지연된다.
-
따라서 body 전에 script를 실행할 때는 가능한 시간이 적게 걸리는 작업을 수행하는 것이 좋다.
끝없는 대양에서의 항해를 위해