html 태그코드에 자바 변수를 적용할려면?

html에서 자바를 선언 하려 하면 우선 자바스크립트 태그로 선언 하고 난뒤 사용한다.

<script type="text/javascript"></script>

마무리는 자바스크립트태그로 해 줘야 하고. 

그렇다면 이 안에 갇힌 자바의 변수를 html에서 사용 하려 하면 어떻게 해야 할까?

물론 함수를 이용하여 집어 넣으면 된다. 예를 들어,

 <button onclick=’java();’/> 이렇게 만들면 된다.(java()의 상세 내용은 생략)

 

하지만 자바스크립트 內에 있는 변수를 이 코드에서 이용하려면???

 

해당 태그에 아이디를 부여하여 스크립트 내에서 getElementById()를 이용하여 값을 받아내면 된다.

는 이론을 어딘가에서 본적이 있으나 더 간단한 방법이 있어 소개하려 한다.

 

document.write();

스크립트 안에서 이 함수 안에 html 태그 코드를 집어 넣으면 그대로 출력 해 준다.

 

2019/03/10 - [각 종 it/티스토리 등 프로그래밍] - JavaScript 변수를 코드 속에 넣어보자.

지난번에 사용한 동적변수 사용법도 그대로 적용 되고 

id를 부여하여 속성을 지정, 집어 넣는 방식과 달리 원하는 곳, 

즉, 코드 중간에도 변수를 집어 넣을 수 있어 유용한 방법이라 생각한다.

 

location.document.write(‘<button onclick=’+a+’’/>‘);

 

이에 대한 결과물은,

2018/12/23 - [잡's생각/애니, 영화 등 추천 및 비 추천] - 무료 애니스트리밍 추천 anirush(구 anitoday) & aniday, ani24 && 애니검색창

에서 확인하면 된다. 마지막 어른아이닷컴에 검색창에 사용한 방법은 순수 자바스크립트이고 나머지는 스크립트와 html 태그를 섞어 만 든 것이다.

유튜브 플레이어 작성 시에도 사용하였는데,

2018/08/01 - [각 종 it] - 유튜브로 실시간 최신가요 순위를 알아보고 다운도 받아볼까?

랜덤 함수를 섞어 코드를 구성하여 해당 게시글에 씌운 것이다.

또 다른 예로는,

그렇지 않아도 오른쪽 하단에 있는 오로치마루 덕분에 모바일 환경에 있어 보는게 불편 할 수도 있는데 왼쪽 위에 벚꽃으로 인해 더 시인성이 좋지않아 가지 좀 쳤다. pc 환경에서는 조금 크게 모바일 환경에서는 사쿠라가 작아지도록 적당히 변수를 써서 만들어 놓았다. 물론 기존의 fade기술로 조건이 되면 큰 나무를 사라지게 만들고 작은 나무가 자라도록 만들면 되지만... 메모리를 너무 잡아 먹을가 염려 되어 자바스크립트 內에서 html을 구현하기로 했다.