기록

동적 해석형 언어 : 미리 컴파일되지 않았음

전송 중 컴파일링 되기 때문에 런타임에 코드가 평가되고 실행되는데,

코드가 런타임에서 변경될 수도 있음을 의미한다.

코드 내에서 다른 프로그래밍 언어에서는 허용되지 않는 작업을 수행할 수도 있다.

자바스크립트에서는 데이터 유형을 동적으로 전환할 수 있다.

처음에는 변수에 텍스트를 저장했다가 추후 동일한 변수에 숫자를 저장할 수도 있다.

자바스크립트에서 동적이라는 것은 런타임에 분석, 해석을 하여 컴파일하기 때문에

특정 작업이 수행이 가능해진다.

가장 중요한 점은 수행 중 컴파일링, 해석이라는 점이다.

약형 :

다른 언어에서는 변수에 숫자가 들어갈지, 문자가 들어갈지 미리 데이터 유형을 정의해야 하고,

그렇지 않으면 오류가 발생하지만

자바스크립트에서는 알려줄 필요가 없다.

데이터 유형을 가정해 자동으로 유추하기 때문이다.

한 줄마다 변경될 수도 있다는 동적 특성과도 관련이 있다.

따라서 데이터 유형은 고정되어 있지 않고, 바뀔 수도 있다.

<script src="assets/scripts/app.js" defer></script>

페이지가 모두 로드된 후 해당 외부 스크립트가 실행된다는 것을 명시

boolean 속성으로, 명시하지 않으면 자동으로 false 값을 가지고,

명시한 경우 true 값으로 처리된다.

외부 스크립트를 참조하는 경우에만 사용할 수 있어서

src 속성을 반드시 함께 사용해야 한다.

참조된 외부 스크립트 파일은 여러 가지 방법으로 실행시킬 수 있다.

async 속성은 다운로드가 끝나면 바로 js 코드를 실행하기 때문에

어느 시점에 실행될지 알 수 없다.

<script async src="./script.js"></script>

여러 개의 스크립트 파일을 순차 실행할 때에는 defer가 좋다.

여러개의 독립된 js 파일을 삽입하는 경우에는 async를 사용하는 것이 성능 면에서 유리하다.

다운로드 완료 즉시 실행되기 때문이다.

1. async 속성이 명시된 경우

  브라우저가 페이지를 파싱하는 동안에도 스크립트 실행

2. async 속성은 명시X, defer 속성만 명시

  브라우저가 페이지의 파싱을 모두 끝내면 스크립트 실행

3. async 속성과 defer 속성이 모두 명시 X

  브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킨다

http://www.tcpschool.com/html-tag-attrs/script-defer

https://www.daleseo.com/js-script-defer-async/

wrtie 페이지에서 input type="text" 로 입력란을 생성해

사용자에게 url 을 입력받아 DB에 저장,

그것을 jsp 화면으로 불러와 a 태그로 링크를 걸어주어야 하는 상황.

<%=  %> 로 db에서 사용자가 입력한 url 을 가져올 땐 잘 가져와지고, 그 주소를 직접 타이핑해서 들어갈 땐 잘 연결이 되는데,

내가 링크를 걸면 프로젝트 명이 포함되어 버려서 곤란했다.

www.daum.net 에 커서를 올리면 아래 캡쳐와 같이 프로젝트 명이 같이 연결되어 버렸다.

검색해보니까 프로젝트의 설정을 변경하라는데 그걸 내 마음대로 할 수 있는 상황이 아니었음

<!-- String rurl 에 주소값을 저장 -->

<a href ="<%=rurl %>" target="_blank">
    <%=rurl %>
</a>

사용자 입력 란에는 placeholder를 이용하여 http://를 제외하고 입력받고 다음과 같이 내용을 구성하여 해결했다.

<a href ="http://<%=rurl %>" target="_blank">
    <%=rurl %>
</a>

target="_blank" 를 a 태그 안에 추가하면 새 탭을 열어 링크 이동한다.

_blank와 blank 에는 차이점이 있는데,

_blank는 링크를 계속 클릭하면 계속 새 창을 연다

blank는 최초 한번만 새 창을 열고 계속 클릭하면 새로 열었던 그 창에서 계속 이동한다.

프로젝트에 직접 import하는 방법과 CDN 두가지 방법이 있는데 나는 CDN으로 사용했다.

https://select2.org/

CDN

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

스크립트 영역에 다음과 같이 작성해주면

id 값을 불러와서 해당 select 박스에 자동 적용된다.

<script>
    $(function() {
        $("#coffee").select2();
    });
</script>

<select id="coffee" name="coffe">
    <option>아메리카노</option>
    <option>카페라떼</option>
    <option>바닐라라떼</option>
</select>