웹개발 프로젝트(CSS/HTML)-#11 JAVA Script(동적 인터렉션) 기초

웹 개발은 html, css java script가 담당한다

 

그중 html과 css 는 각각 뼈대와 디자인을 담당하는것이고

 

java script는 영혼을 불어넣는 역할 , 동적인 효과를 넣는 역할을 한다.

 

자바 스크립트는 매우 다양하게 활용되고있다.

 

프레임워크도 들어봤을법한 vue.js, node.js등등 많다.

 

자바 스크립트를 추가해보는것부터 배워보겠다.

 

자바스크립트 코드는 html파일에서 body태그 최하단에 추가해줘야한다.

 

이때 추가하는 태그는 script태그이다.

 

다시말해서 html파일에서 head태그가 아닌 body태그가 끝나기 직전에 script태그를 추가해서

 

자바스크립트를 적용할수있다.

 

저번 포스팅에서 외부 라이브러리를 이용하여 아이콘을 만든 그 버튼에

 

자바스크립트를 적용해서 동적 효과를 넣어보겠다.

 <script>
      function getTextFile(){
        var input = document.createElement("input");
        input.type = "file";
        input.accept = "text/plain";
        input.onchange = function(event){
          processFile(event.target.files[0]);
        };
        input.click();
      }
      function processFile(file){
        var reader = new FileReader();
        reader.readAsText(file, "UTF-8");

        reader.onload = function(){
          document.getElementById("secret-diary").innerText = reader.result;
          document.getElementById("secret-box").style.display = "block";
        };
      }
    </script>

이것이 body태그 맨 밑에 추가해준 자바스크립트 코드이다.

 

일단 getTextFile 함수를 호출하기위해서 이전 포스팅에서 다뤘던 html코드에서

 

버튼 태그에 onclick속성을 추가해줘야한다.

<button onclick="getTextFile()">
   <i class="fas fa-lock icon">
       비밀다이어리 펼쳐보기
   </i>
</button>

이렇게

 

그럼 버튼이 클릭됐을때 getTextFile함수가 호출되면서 스트립트 태그에서 정의된 getTextFile함수를 읽는다.

 

자바스크립트에서 변수를 선언하는 var 로 input이라는 변수를 선언한다.

 

var input = document.createElement("input") 에 대해서 해석해보자면

 

html파일에서의 태그를 정의하는 문장이라고 보면된다.

 

<input>이라는 태그를 input이라는 이름으로 정의한것이다.

 

var apple = document.createElement("h1") 가 의미하는것은

 

h1태그의 이름을 apple로 하겠다는것이다.

 

apple.type="file" -> h1태그인 apple의 형식을 file로 하겠다

 

이런식으로 활용하는것이다.

 

 

그럼이제 다시 코드로 돌아오면 input이라는 이름을 가진 input태그에 대해서

 

type, accept를 각각 file, text/plain으로 설정해주고

 

그 input에 change가있을경우(파일 열기 버튼을 눌러서 파일이 추가되었을때)에는 processFile함수가 호출되는것이다.

 

그럼 그 밑에 설정된 processFile 함수로 넘어오게 될것이다. 

 

processFile함수를 보면 먼저

 

FileReader의 클래스에서 reader라는 객체를 생성하고

 

readAsText라는 함수를 호출했다. 파일을 읽어서 표시하는 메소드이다.

 

그리고 텍스트 파일을 불러들여 읽을때 가장 핵심인 부분인 

 

reader.onload = function(){

          document.getElementById("secret-diary").innerText = reader.result;

          document.getElementById("secret-box").style.display = "block";

        };

 

이 부분을 보자

 

reader가 파라미터로 전달받은 file을 읽으면 이 부분이 실행된다.

 

secret-diary라는 아이디를 가진 요소를 찾아서 그 요소안의 text부분에 reader가 읽어낸 결과값을 대입한다.

 

좀 어렵다.

 

secret-diary라는 id를 가진 곳이 어디냐면 우리가 동적효과를 주는 바로 그 곳이다.

 

다시말해서 그곳에 자바스크립트에서의 동적효과를 적용한것이다.

 

실제로 이렇게 코드를 짜고 크롬을 열어보자

 

동그라미 쳐져잇는 네모박스가 버튼에 해당하는 부분인데 아무것도 안했을때는 위의 사진처럼 가만히 있따가

 

마우스를 올려놓는 순간 (cursor:hover) 설정해준 텍스트가 보인다 까지가 저번 포스팅 내용이었고

 

오늘은 이 버튼을 눌렀을때 실제 비밀일기(텍스트)가 보이게 하는 동적효과를 자바스크립트로 구현해보겠다

 

가 오늘 배운 내용이다.

 

실제로 저 버튼을 클릭해보면 어떤 파일을 가져올건지에 대한 창이 뜰것이다. 메모장에 미리 저장해둔 텍스트가 있다면

 

아무거나 선택해주면

이렇게 비밀일기를 볼수있는것이다.

 

끝