웹 문서에 글과 숫자 출력하기 - String, Variable, boolean

1. 웹문서에 글자 출력하기

 innerHTML 에 이벤트로 아래와 같이 자바스크립트 문서를 만들고 저장합니다. 그리고 HTML 문서에서 하이퍼 링크 또는 버튼에 id를 넣고 호출해 줍니다. 이때 id로 부터 값을 가져온다는 의미의 document.getElementById 를 적어줍니다.

 

자바스크립트

html 문서

 

아래와 같이 HTML 문서에 적어줍니다. 버튼을 누르면 문서에 글자가 나타납니다. 

<p id="special">이곳이 바뀝니다.</p> <button id="btn-change-text">Click Me!</button>   <script src="scripts/hello-world.js"></script>

다음과 같이 자바스크립트안에 HTML 태그를 넣어 출력되는 글자의 스타일을 지정해 줄 수도 있습니다. 

 

 

<p id="special">이곳이 바뀝니다.</p> <button id="btn-change-text">Click Me!</button> <script src="scripts/comments.js"></script>

2. 변수를 활용한 텍스트 출력하기 - Variable

자바 스크립트 변수는 "var", "let"또는 "const"변수를 사용하여 설정할 수 있습니다.

var, let 및 const를 사용하는 경우
var : 2015 년 이전 브라우저에서 스크립트가 실행될 것으로 예상되는 경우 var를 사용하십시오. 이것은 주로 IE10,9 및 8입니다.
let : 스크립트가 실행되는 동안 변수 값이 변경되면 let을 사용하십시오.
const : 스크립트가 실행되는 동안 변수 값이 변경되지 않으면 const를 사용합니다.

 

저는 항상 const를 항상 먼저 사용하고 스크립트를 실행하는 동안 변수 값이 변경 될 경우에만 let을 사용합니다. 아래와 같이<p>태그안에  id를 넣습니다.

 

 

<p id="p-01">...Output variables here...</p> <p id="p-02">...Output variables here...</p> <p id="p-03">...Output variables here...</p>

그리고, 자바스크립트에서 만들어 놓은  id를 호출하고 다음, 그 안에 적용할 변수를 설정합니다.

var userAge = 27;을 설정하고

let pet = 'cat'; 으로 변수값이 변경될 경우 이름을 설정합니다. 

 

 

아래과 같이 실행해보면 웹문서에 출력되는 변수들을 볼 수 있습니다. 

const p01 = document.getElementById('p-01'); const p02 = document.getElementById('p-02'); const p03 = document.getElementById('p-03'); var userAge = 27; let pet = 'cat'; pet = 'dog'; const manitobaCapitalCity = 'sydney';   p01.innerHTML = userAge; p02.innerHTML = pet; p03.innerHTML = manitobaCapitalCity;

 

3. String 변수를 활용한 텍스트 출력하기 

HTML문서에 아이디를 정해 주고 자바스크립트에 다음과 같이 적습니다. 자바스크립트에 String 변수(문자열) 을 만들어 줍니다. 그리고 웹문서를 실행해 보면 정해주었던 문자열이 출력되는것을 볼 수 있습니다. 

 

<p id="p-04">...Output variables here...</p>

 

 

const firstname = '철수'; const lastname = '김';   const fullname = firstname + ' ' + lastname; // -> Joe Smith -> Correct!   p04.innerHTML = fullname;

4. String 변수를 활용한 숫자 출력하기 

HTML문서의 태그에 'p-01'~'p-06' 까지 아이디를 정해 주고 자바스크립트에 다음과 같이 적습니다. 자바스크립트에 String 변수(숫자열) 을 만들어 줍니다. 그리고 웹문서를 실행해 보면 정해주었던 숫자열이 계산되어 출력되는것을 볼 수 있습니다. 숫자와 연산기호를 활용해 계산식을 구할 수 있습니다.

 

더하기는 ${변수 이름} + ${변수 이름}, 빼기는 ${변수 이름} - ${변수 이름}, 곱하기는 ${변수 이름} * ${변수 이름}, 나누기는 ${변수 이름} / ${변수 이름}로 적어봅시다.

 

 

웹문서를 실행해보면 계산식이 출력되는 것을 볼 수 있습니다. 

const p01 = document.getElementById('p-01'); const p02 = document.getElementById('p-02'); const p03 = document.getElementById('p-03'); const p04 = document.getElementById('p-04'); const p05 = document.getElementById('p-05'); const p06 = document.getElementById('p-06'); const numA = 23; const numB = 23.5723;   p01.innerHTML = numA; p02.innerHTML = numB;   const numC = 51; const numD = 27.78;     // Add p03.innerHTML = `${numC} + ${numD} = ${numC + numD}`;   // Subtract p04.innerHTML = `${numC} - ${numD} = ${numC - numD}`;   // Multiplication p05.innerHTML = `${numC} × ${numD} = ${numC * numD}`;   // Division p06.innerHTML = `${numC} ÷ ${numD} = ${numC / numD}`;

5. String-number 변수를 활용한 계산폼 만들기

같은방법으로 HTML의 form tag 안에 이름(id)을 정해주고 자바스크립트에 호출해서 계산식을 만들어 줍니다. 

 

 

실행해보면 다음과 같은 간단한 계산기 형태의 폼 양식을 할 수 있습니다. 

<form action="#0" id="add-numbers-form"> <div class="input-group number"> <label for="num-01">Number 01: </label> <input type="number" id="num-01"> </div> <div class="input-group number"> <label for="num-02">Number 02: </label> <input type="number" id="num-02"> </div>   <div class="input-group submit"> <input type="submit" id="submit" value="Add Two Numbers"> </div> </form>   <p id="p-01">...aa..</p>   <p id="p-02">...bb...</p>   <p id="p-03">...cc...</p>   <p id="p-04">...dd ...</p>   <p id="p-05">...ee...</p>   <script src="scripts/javascript-string-numbers.js"></script>

6. Boolean 변수를 활용한 계산폼 만들기

같은방법으로 HTML의 P태그에 'p-01'이라고 이름을 정해주고 아래와 같이 자바스크립트를 적어줍니다. Boolean은 true 또는 false 값을 출력합니다. 아래와 같이 조건문을 사용해서  true 또는 false 인지 확인해줍니다. 

 

 

스크립트에서 const userCanVote = true;로 지정해 주었으므로 글자가 그대로 출력되었습니다.

const p01 = document.getElementById('p-01');   const userCanVote = true;   if(userCanVote == true){ p01.innerHTML = 'The user can vote.'; }else { p02.innerHTML = 'The user cannot vote.'; }