[HTUN] Chapter 2. JavaScript 기초 (1)

🎐 JavaScript의 코딩 방법

Javascript는 html 문서 안에서 작동합니다.

우선 htun1.html 이라는 파일을 만들어 주겠습니다.

htun1.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How To Use JavaScript? 1</title>
</head>
<body>
    <script>
        
    </script>
</body>
</html>

네 이렇게 html 기본 문서를 작성하고, javascript 문법을 사용하는 방법은,

위 코드처럼 script 태그 안에 작성하시면 됩니다.

이제부터 모든 javascript 문법은 위 코드의 <script> ... </script> 안에 작성하시면 됩니다.

(html 태그는 <script> 로 열면 </script> 로 닫아야 함)

🎐 Step 1. 출력문

Javascript에는 문자를 사용자에게 보여줄 수 있는 여러가지 방법이 있습니다.

우선 아래의 코드를 script 태그 안에 작성해 봅시다.

alert("Hello JavaScript World!");
console.log("Hello JavaScript Wolrd?");
document.write("Hello JavaScript World.");

위와 같이 작성한 후, htun1.html 파일을 실행해 보면 아래와 같은 결과가 나옵니다.

네 위 사진처럼, 끝 특수문자가 '!' 인것과 '.' 인게 두개 나옵니다.

근데 빠진게 있는거 같죠? '?' 문자가 있는 문장은 어디를 봐도 출력되지 않았습니다.

console.log() 함수는 콘솔에 문자를 출력하는 함수로서,

f12 (개발자도구)에 들어가셔서, console 탭에 들어가시면 예상했던 것 처럼 문장이 출력되어 있습니다.

* alert() : 안내창을 띄우는 함수

* console.log() : 콘솔에 문자를 출력해주는 함수 (f12, 개발자도구)

* document.write() : HTML의 body 태그 내에 문자를 출력해주는 함수,

🎭 Step One Quiz 🎭

- html의 body 태그 안에 'A' 를 출력하고, 안내창에 'b'를 출력하고, 콘솔에 'cdefg' 를 출력하세요

🎐 Step 2. 입력문, 변수

입력문을 사용하면, 안내창에서 사용자로부터 값을 입력받을 수 있습니다.

기존 코드를 지우고, 아래의 코드를 입력 해 봅니다.

var num = prompt("숫자 하나 입력");
document.write(num);

위 코드를 실행하면 아래와 같은 결과가 나옵니다.

감이 오신 분들이 계시겠지만, 설명해 보겠습니다.

prompt()는 입력창이 팝업되고, 값을 입력받을 수 있는 창이 나타납니다.

앞에 붙는 var num = 부분은 num 이라는 변수를 선언하여 입력받은 값을 넣어두도록 한 것 입니다.

document.write를 할 때에, 문자와 변수값을 함께 출력하는 방법에 대해서 알아봅시다.

매우 쉽습니다.

var num = prompt("숫자 하나 입력");
document.write(`그가 입력한 숫자는 ${num}`);

위처럼 출력에 ` ` 를 감싸주시고, 출력할 변수를 ${ } 에 감싸주시면 됩니다.

변수의 종류는 const, let, var 가 있습니다.

이들의 차이를 간단한 실습으로 알아보겠습니다.

var name = 'Hello ';
alert(name);

var name = 'javascript ';
alert(name);

var name = 'World ';
alert(name);

위처럼 var로 변수를 만들고, 그 안에 각각의 값을 넣었을 때,

정상적으로 값이 출력되는 것을 볼 수 있습니다.

아직까지는 차이를 잘 모르겠죠? let을 통한 실습을 해봅시다.

// Uncaught SyntaxError: Identifier 'name' has already been declared
let name = 'Hello ';
alert(name);

let name = 'javascript ';
alert(name);

주석은 구지 작성하지 않으셔도 됩니다만,

어쨋든 저런 식으로 작성하게 되면 오류가 나게 됩니다.

무슨 차이인지 감이 오시나요? 오류 메세지를 해석하면 "name은 이미 선언되었다" 입니다.

네. var은 재선언이 가능한 변수의 형식이고,

let은 재선언이 불가능한 형식이기 때문에 let a = 2; let a = 3; 의 형식으로 작성할 수 없습니다.

그럼 어떻게 해야 맞는 출력일까요?

let name = 'Hello ';
alert(name);

name = 'javascript ';
alert(name);

네. let 이라는 타입을 쓰지 않으면 이미 선언된 변수의 값만 바꾼다는 의미가 됩니다.

(참고로 var 타입도 위와 같은 방법으로 사용할 수 있습니다)

그러면... const는 도대체 뭘까요?

우선 또 코드를 작성해 봅시다.

const name = 'hello';
console.log(name);

// Uncaught SyntaxError: Identifier 'name' has already been declared
const name = 'javascript';
console.log(name);

//Uncaught TypeError: Assignment to constant variable.
name = 'wolrd';
console.log(name);

네. 감이 오신분도 계시겠지만, const 타입은 let 타입과 다르게

재선언 (같은 변수를 다시 선언하는 것)과 재할당 (변수에 값을 다시 넣는 것)을 모두 할 수 없습니다.

그냥 하나의 고정된 상수의 개념이라 보시면 되겠습니다.

어쨋든 다시 본론으로 돌아와서, var num = prompt(); 라는 것은,

사용자로부터 값을 입력받아서 num 이라는 변수에 저장하겠다는 의미 입니다.

이제 prompt와 비슷하면서도 아예 다른 confirm 이라는 것을 배워보겠습니다.

아래 코드를 실습해 보겠습니다.

var yesorno = confirm('Are You Ready?');
alert(yesorno);

위 코드를 실행했을 때, Are You Ready? 라고 뜨며, 예 / 아니오를 누를 것을 요구합니다.

네. confirm 함수는 사용자로부터 예 / 아니오 를 요구하여

예 는 true, 아니오는 false 로 처리하여 값을 반환하는 함수입니다.

선택지를 요구할 때 좋은 함수가 되겠습니다.

🎐 Step 3. 오늘의 최종 퀴즈!

1. name 변수를 let 타입으로 선언하여 사용자로부터 이름을 입력받아 저장합니다.

2. age 변수를 var 타입으로 선언하여 사용자로부터 나이를 입력받아 저장합니다.

3. isstd 변수를 const 타입으로 선언하여 사용자로부터 학생입니까? 를 예/아니오 로 입력받아 저장합니다.

4. 최종적으로 입력된 값을 html의 body태그 안에 모두 출력합니다.

--> 각각의 항목 마지막에 <br /> 을 넣을 것.

let name = prompt("당신의 나이는?");
var age = prompt("당신의 나이는?");
const isstd = confirm("학생입니까?");

document.write(`그의 이름은 ${name} 이다. <br />`);
document.write(`그의 나이는 ${age} 이다. <br />`);
document.write(`그가 학생인가? : ${isstd} <br />`);

이번 강좌 실습하느라고 수고하셨습니다.

다음 강의에선 반복문과 조건문, 배열에 대해서 알아보겠습니다.

좋은 호스팅이 있어서 추천드립니다.

채팅으로 사용자가 원하는 맞춤형 서버 호스팅을

이용 하실수 있습니다.

타 업체 보다 더욱 뛰어난 성능 과 가성비 와

합리적인 가격으로 RTGROUP 디도스 이용 하시길 바랍니다.

rtg.kr

저작자표시

'Web > Node.JS' 카테고리의 다른 글

[HTUN] Chapter 2. JavaScript 기초 (2) (2)	2020.06.25
[HTUN] Chapter 1. 기존 강좌를 개편합니다. (0)	2020.06.24

Yubin Heo

[HTUN] Chapter 2. JavaScript 기초 (1)

🎐 JavaScript의 코딩 방법

🎐 Step 1. 출력문

🎐 Step 2. 입력문, 변수

🎐 Step 3. 오늘의 최종 퀴즈!

'Web > Node.JS' 카테고리의 다른 글

댓글

티스토리툴바

[HTUN] Chapter 2. JavaScript 기초 (1)

🎐 JavaScript의 코딩 방법

🎐 Step 1. 출력문

🎐 Step 2. 입력문, 변수

🎐 Step 3. 오늘의 최종 퀴즈!

'Web > Node.JS' 카테고리의 다른 글

관련글

댓글

티스토리툴바