2021-12-14(화) 6주차 2일

eomcs-java 밑에 eomcs-web

http://localhost:8080/

script 태그는 head 태그나 body 태그 안에 넣어야 한다.

http://localhost:8080/javascript/ex00/exam01.html

script 태그는 위에서 아래로 실행한다.

script 태그를 실행하다가 중간에 예외가 발생하면 즉시 실행을 멈추고 다음 태그로 간다.
에러가 나면 현재 script 태그를 나간다.
밑에 있는 애들은 실행이 안 되고 나가진다.

static type binding과 dynamic type binding

Java
int a; // 고정(static) 변수 선언 시에 결정됨 → 변경 불가
a = 100; // OK
a = true; // 에러

JavaScript
동적(dynamic)
var a; // undefined
a = "hello"; // OK
a = true; // OK
값을 변수에 넣는 순간 변수의 타입이 결정된다
변수의 타입은 값에 따라 바뀔 수 있다

파라미터(parameter)와 아규먼트(argument)

function plus(a, b) {
  return a + b;
}

아규먼트를 받는 변수 => 파라미터
함수를 호출할 때 넘겨주는 값 => 아규먼트

파라미터 선언할 때 var 붙이는 거 아님

함수 이름과 함수 객체

http://localhost:8080/javascript/ex00/exam03.html

함수 이름은 변수이다.
함수 이름은 함수를 담는 변수이다.
함수 이름은 함수를 담는 상자이다.

function 함수이름() {

}

↑ ↓ 같다

let 함수이름 = function () {};

함수에 대한 정보와 코드를 담은 객체 생성

1개 이상의 값을 담는 상자

지갑 같은 거

동전과 지폐는 근본적인 값
근원의 원시의
primitive : byte, short,

자바스크립트는 전체가 Object

함수 객체의 주소를 갖고 있는 레퍼런스다.

고유 번호를 저장하는 게 변수다.

<script>
function plus(a, b) {
  return a + b;
}
console.log(plus(10, 20)); // 30

var ok = plus;
console.log(ok(100, 200)); // 300

var haha = ok;
console.log(haha(1000, 2000));

</script>

plus 라는 이름으로도 실행할 수 있고 ok 라는 이름으로도 haha 라는 이름으로도 실행할 수 있다.

거기 있는 함수 객체에 들어 있는 코드를 실행한다.

최초로 plus에서 정의한 함수를 호출하는 거

설계도 기반 객체 생성과 프로토 타입 기반 객체 생성

http://localhost:8080/javascript/ex00/exam04.html

자바는 설계 도면이 있어야 됨
자바스크립트는 설계 도면이 없음
Object 라는 원형 객체를 복제해와서 원형 객체를 기반으로 메모리를 덧붙이는 거

var obj1 = new Object();
원형 객체를 기반으로 기본 객체를 찍어낸다.

// Object라는 원형 틀을 기반으로 기본 객체를 생성한다.
var obj1 = new Object();

// 기본 객체에 프로퍼티를 덧붙인다.

http://localhost:8080/javascript/ex00/exam04.html

this.name
같은 상자에 존재하는 변수 중에서 name이라는 변수
함수와 같은 객체에 소속되어 있는 name이라는 변수

먼저 로컬 변수에서 찾는다
name이라는 변수가 선언되어 있는지 찾는다
함수 밖에 선언된 변수 중에 name이 있는지 찾는다
로컬에 name이라는 변수가 없으면 바깥에서 찾는다
바깥에서조차 없으면? 빈문자열
this를 붙이면 얘기가 달라짐
함수가 소속되어 있는 객체 안에서 찾음

obj2.hello();
obj2에 소속된 함수는 obj2를 적어줘야 됨

exam05_1.html

onclick : 태그를 클릭했을 때 웹 브라우저가 호출하는 함수

btnAddName.onclick = function() {
	inputNameIndex++;
	var e = inputNameDiv.cloneNode(true);
	e.querySelector(".name").innerHTML = "이름" + inputNameIndex;
	e.querySelector("input").name = "name" + inputNameIndex;
  e.querySelector("input").value = "";
	inputNameContainer.appendChild(e);
};

exam06

AJAX
스프링 부트
JSP
플러그인을 장착해야 한다

package com.eomcs.web.javascript;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class Ex00Controller {

  @RequestMapping("/javascript/ex00/exam06")
  public String exam06() {
    return "<p>안녕하세요!</p>"; // UI 조각을 만들어 던진다!
  }
}

↑ 서버 렌더링 방식

http://localhost:8080/javascript/ex00/exam06.html

xhr.open("GET", "/javascript/ex00/exam06", false);

  @RequestMapping("/javascript/ex00/exam06")
  public String exam06() {
    return "<h1>안녕하세요!</h1><input type='text'><br>"; // UI 조각을 만들어 던진다!
  }

정적 리소스나 동적 리소스나 URL을 지정할 수 있다

이게 AJAX야

  @RequestMapping("/javascript/ex00/exam06")
  public String exam06() {
    return "<ul><li>홍길동</li><li>임꺽정</li><li>유관순</li></ul>"; // UI 조각을 만들어 던진다!
  }

getElementById("x-name-list")

  @RequestMapping("/javascript/ex00/exam07")
  public Object exam07() {
    String[] names = {"홍길동", "임꺽정", "유관순"};
    return names; // 클라이언트에 보내는 것은 UI가 아니라 데이터이다.
  }

안드로이드, 아이폰, pc

http://localhost:8080/javascript/ex01/exam02.html

MIME
https://ko.wikipedia.org/wiki/MIME

크롬은 안 됨
파이어폭스는 잘 됨
가장 정확한 동작을 보여주는 건 파이어폭스

https://post.naver.com/viewer/postView.nhn?volumeNo=25256173

https://www.favicon-generator.org/

http://localhost:8080/favicon.ico

루트 : static 폴더

사용자가 가장 많이 쓰는 브라우저로 테스트 해야 됨

http://localhost:8080/javascript/ex01/exam04.html

script 태그 안에 있는 자바스크립트를 실행하는 중에 오류가 발생하면 즉시 script 태그의 실행을 중단하고 다음 태그로 간다.

v2는 undefined (변수는 있는데 값이 없다)

호이스팅

변수가 어디 선언되어 있든 실행하는 시점에 모든 변수 선언은 위로 올라간다

변수 선언이 위로 올라간다

script 태그 안에 변수 선언이 있으면 함수 정의가 있으면 위로 끌어올린다

할당문은 그 자리에 그대로 둔다

외부 소스와 실행

① 외부 자원 요청
② 응답
① src에 url을 지정하면 외부 자원은 정적 자원일수도 있고 동적 자원일수도
② 응답 결과가 들어간다

http://localhost:8080/javascript/ex01/exam05.html

package com.eomcs.web.javascript;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class Ex00Controller {

  @RequestMapping("/javascript/ex00/exam06")
  public String exam06() {
    return "<ul><li>홍길동</li><li>임꺽정</li><li>유관순</li></ul>"; // UI 조각을 만들어 던진다!
  }

  @RequestMapping("/javascript/ex00/exam07")
  public Object exam07() {
    String[] names = {"홍길동", "임꺽정", "유관순"};
    return names; // 클라이언트에 보내는 것은 UI가 아니라 데이터이다.
  }
}

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() {
    return "window.alert('okok')"; // 자바스크립트 코드 조각을 리턴한다.
  }

  @RequestMapping("/javascript/ex01/exam05_2")
  public Object exam05_2() {
    return "window.alert('nono')"; // 자바스크립트 코드 조각을 리턴한다.
  }
}

script 태그의 src는 자바스크립트를 리턴하는

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() {
    return "console.log('okok')"; // 자바스크립트 코드 조각을 리턴한다.
  }

  @RequestMapping("/javascript/ex01/exam05_2")
  public Object exam05_2() {
    return "console.log('nono')"; // 자바스크립트 코드 조각을 리턴한다.
  }
}

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 "console.log('okok')"; // 자바스크립트 코드 조각을 리턴한다.
  }

  @RequestMapping("/javascript/ex01/exam05_2")
  public Object exam05_2() {
    return "console.log('nono')"; // 자바스크립트 코드 조각을 리턴한다.
  }
}

늦어도 2초 넘으면 안 됨

script 태그를 밑으로 내린다
<script src="/javascript/ex01/exam05_1"></script> ← 이거 밑으로 내리기

사용자가 지루해 하지 않도록 하기 위해 일단 화면의 일부를 출력
script 태그를 body의 맨 끝에 둔다

http://localhost:8080/javascript/ex01/exam05_2.html

파이어폭스는 됨

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex01</title>
</head>
<body>
<h1>script 태그를 나중에 실행하는 예</h1>
<p>이번 달 이용 금액은 <span id="bill"></span> 원입니다.</p>

<script>
  // 서버에서 이용 금액 데이터를 가져와서 화면에 출력한다.
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    document.getElementById("bill").innerHTML = xhr.responseText;
  }
  xhr.open("GET", "/javascript/ex01/exam05_x", true);
  xhr.send();
</script>
</body>
</html>