[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 13~14

13 자바스크립트와 첫 만남

웹 플랫폼을 사용자와 연결해주는 매개체가 웹 브라우저임

브라우저에서 프로그래밍 할 수 있는 언어 중 하나가 자바스크립트

 

자바 스크립트로 무엇을 할까

1. 웹 요소를 제어

-웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음

-웹 사이트 ui 부분에 많이 활용 (예. 마우스 포인터를 올렸을 때 펼쳐지는 메뉴, 한 화면에서 탭을 눌러 내용만 바뀌도록 하는 컨텐츠)

2. 웹 애플리케이션을 만듦

-최근의 웹 사이트는 단순 정보 제공만이 아니라 사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작( 온라인 지도의 길찾기 서비스, 데이터 시각화 서비스 등)

3. 다양한 라이브러리를 사용할 수 있음

웹을 중심으로 하는 서비스가 늘어나며 브라우저가 처리할 일들이 늘어났고

이를 처리하기 위해 라이브러리, 프레임워크가 계속 등장함(예. 시각화를 위한 d3.js, 머신러닝을 위한 tensorflow.js, DOM 조작을 위한 jQuery 등) (예. 웹 애플리케이션 계발을 위한 React, Angular, Vue 등)

4. 서버를 구성하고 서버용 프로그램을 만들 수도 있음

-node.js : 프론트엔드 개발에 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있게 만든 프레임워크

 

웹 브라우저가 자바스크립트를 만났을때

1. 웹 문서 안에 자바스크립트 작성하기

<script> 태그와 </script> 태그 사이에 자바스크립트 소스를 작성함

자바스크립트 소스가 있는 위치에서 바로 실행됨

소스는 웹 문서 안의 어디든 위치할 수 있지만 주로 </body> 앞에, 즉 거의 마지막에 넣어줌.

2. 외부 스크립트 파일 연결해서 작성하기

자바스크립트 소스를 별도의 파일(*.js)로 작성, 저장 후 웹문서에 연결해서 쓸 수도 있음

[기본형] <script src="외부 스크립트 파일 경로"></script>

 

스크립트 소스를 여러 파일에서 사용하고 싶은 경우에 외부 파일로 사용하는 것이 편리하고, 소스의 중복을 줄일 수 있음

 

자바스크립트의 간단한 입출력 방법

alert()

특정 변수를 확인하고 싶다면 괄호안에 변수 넣어주면 되고, 특정 텍스트를 표시하고 싶다면 따움표 안에 넣어주면 됨

알림창에는 단순 '확인' 버튼만 나타남

 

var toDay= new Date();

alert(toDay); ->알림창 안에 toDay값이 표시됨

 

alert("안녕하세요!") -> 알림창 안에 텍스트 표시됨

 

confirm()

'확인' 버튼과 '취소' 버튼 두 개가 뜸.

접속한 사용자가 누르는 버튼에 따라 결과값이 달라짐

 

confirm("글자색을 정말 바꾸시겠습니까?") -> 사용자가 '확인'을 누르는지, '취소'를 누르는지에 따라 실행될 프로그램이 달라짐

 

prompt()

사용자가 직접 입력할 수 있는 한 줄짜리 텍스트 필드를 표시해줌

 

prompt("당신의 이름을 알려주세요") -> 사용자의 이름을 입력받을 수 있는 텍스트필드가 표시되고, '확인' 을 누르면 어딘가 지정한 곳으로 입력한 값이 넘어감, '취소'를 눌러 창을 닫을 수도 있음

 

 

출력 결과를 팝업창이 아니라 웹 브라우저 화면에 출력하는 방법 - 웹브라우저 화면/콘솔창

document.write()

괄호 안에 텍스트나 변수 입력하면 웹브라우저창에 표시됨

document.write("안녕하세요?");

colsole.log()

콘솔창에 출력됨

colsole.log("안녕하세요?"); -> 개발자도구 창의 콘솔 탭에 표시됨

콘솔창 : ctrl+shitf+j

 

자바스크립트 스타일 가이드

자바스크립트 소스를 작성할 때 지켜야 할 기본 규칙

1. 가독성을 위해 들여쓰기를 함. 보통 2칸 들여쓰기를 많이 사용함.

2. 세미콜론으로 문장을 구분함. 붙이는 것을 권장, 소스는 한줄에 하나만 작성하는게 좋음

3. 공백을 넣어 읽기 쉽게 작성한다. 식별자나 연산자, 값 사이에 공백을 넣자

var sum=num+10; (x)

var sum = num + 10; (o, 권장함)

4. 코드를 설명하는 주석을 작성하자

한줄 주석 : //

여러줄 주석 : /* ~~~ */

5. 식별자(변수이름 등)는 정해진 규칙을 지켜 작성하자

첫글자는 반드시 영문자, 언더스코어(_)

두 단어 이상이 하나의 식별자를 만들때는 단어사이에 공백을 둘 수 없음, 하이픈으로 연결하거나 두번때 단어 첫글자를 대문자 사용

예약어는 식별자로 사용할 수 없음(var 등)

---

14-1 자바스크립트 기본 문법

변수, 자료형, 연산자, 조건문, 반복문

 

변수 알아보기

변수(variable)란

값이 여러번 바뀔 수 있는 데이터. 달라지는 값을 저장함.

*상수(constant) : 값을 한 번 지정하면 바뀌지 않는 데이터

 

변수 선언의 규칙

영어문자, 언더스코어( _ ), 숫자를 사용함

첫 글자는 영문자, _, $기호를 사용함

띄어쓰기나 다른 기호($, _, - 이외)는 허용하지 않음

대소문자를 구별함

예약어는 변수 이름으로 사용할 수 없음

여러 단어를 연결할 때는 하이픈(-)이나 언더스코어(_)를 사용하거나 뒷단어의 첫글자를 대문자로 씀

변수 이름은 의미있게 작성함

 

변수 선언 및 할당

-변수 선언하기

앞으로 이 변수를 사용하겠다고 프로그램에게 알려주는 것

var 뒤에 변수이름 작성(ES5에서 사용. ES6에서는 let 을 사용함.)

var를 한번만 쓰고 뒤에 여러 개의 변수를 한꺼번에 선언할 수도 있음

[기본형] var 변수명

 

-변수에 값 할당

실제로 사용할 값을 넣어주는 것

= 뒤에 값 써줌

 

*변수 선언과 값 할당을 동시에 할 수도 있음

*콘솔에서 변수명을 입력하고 엔터를 치면 할당된 값이 출력됨

 

자료형

종류		설명	예시
기본 유형	숫자형	따옴표 없이 숫자로만 표기함	var birthYear = 2000;
	문자열	작은 따옴표(' ')나 큰 따옴표(" ")로 묶어서 나타냄 숫자를 따옴표로 묶으면 문자로 인식함	var greeting = "Hello!"; var birthYear = "2000";
	논리형	참(true)과 거짓(false) 두 값만 있음. * true와 false는 소문자로만 표시함	var isEmpty = true;
복합 유형	배열	하나의 변수에 여러 개의 값을 저장함	var seasons = ['봄', '여름', '가을', '겨울'];
	객체	함수와 속성을 함께 포함함	var date = new Date();
특수 유형	undefined	자료형이 지정되지 않았을 때의 상태. 변수 선언만 하고 값을 할당하지 않은 변수 등.
	null	값이 유효하지 않을 때의 상태. 예) prompt창에서 사용자가 취소를 눌렀을때

typeof 변수 ->변수의 자료형을 알려줌

예)

var currentYear = 2021

typeof currentYear

>"number" // 변수 currentYear의 자료형은 숫자

 

typeof 123

>"number" //123 의 자료형은 숫자

 

typeof "안녕하세요"

>"string" // "안녕하세요"의 자료형은 문자열(string)

 

typeof (1 > 10)

>"boolean" // 논리형 1>10은 false, false의 자료형은 논리형(boolean)

 

var seasons = ['봄', '여름', '가을', '겨울']

typeof seasons

>"object" // 배열도 object의 일종임

 

var userName = prompt("Type your name"); <- userName은 아직 할당되지 않은 상태. undefined. 

-> 사용자가 이름을 입력하지 않고 '취소'를 누를 시 유효하지 않은 값이 돌아옴

-> userName에는 null이 저장됨

---

14-2 자바스크립트 기본 문법

산술연산자+, - *, /, %

간단한 계산은 괜찮지만 복잡한 실수 계산은 자바스크립트에서 하지 않는 것이 좋음

나머지 연산자 % : 5 % 2 = 1, 5를 2로 나눴을때의 나머지 값인 1이 출력됨

 

할당연산자(대입연산자) =

* 연산의 대상인 변수와 값이 대입될 변수가 같을 때 산술연산자와 할당연산자를 붙여서 쓸수도 있음

x += 10; // x = x + 10; 

 

연결연산자

둘 이상의 문자열을 붙여서 하나의 문자열로 만드는 연산자

var currentYear = 2021;

document.write(currentYear + "년");

: currentYear의 값인 2021과 년 을 연결해줌

 

* 자바스크립트와 형변환

10 + 10 // 20

10 + "10" // 1010

자바스크립트에서, 숫자와 문자열이 만나면 자동형변환이 일어남

앞에 있는 숫자가 문자열이 됨.

 

비교연산자

크기값의 대소비교에 사용함

자바스크립트에서 같다/다르다를 비교할때, 같다에는 ==, ===가 있고, 다르다에는 !=, !==의 두가지가 있음

3 == "3" // true, 등호 2개 ==는 값만 비교함

3 === "3" // false, 등호 3개 ===는 값&자료형까지 비교함. 값과 자료형이 다 같아야 true를 반환.

3 != "3" // false, 값만 비교하므로 둘은 같음. 따라서 false

3 !== "3" // true, 값은 같지만 자료형이 다름. 따라서 true

 

자바스크립트에서는 안에서 자동적으로 자료형 변환이 일어나므로 유연하지만, 예상치못한 오류가 있을 수 있으므로 항상 자료형을 꼼꼼히 체크해야함

---

14-3 자바스크립트 기본 문법

조건문 알아보기

if문과 if ~else문

if문은 조건이 true일 때 명령을 실행함

if ~else 문은 조건이 true일때와 false일때에 나눠 명령을 실행함

 

예)

<script>
    var userNumber = prompt("숫자를 입력하세요.");
    if (userNumber % 3 === 0) {
    	alert("3의 배수입니다.");
    } else {
    	alert("3의 배수가 아닙니다.");
    }
</script>

prompt에서 입력한 값이 userNumber에 저장되는데,

사용자가 취소를 누른 경우 null이 저장되게 됨

* 자바스크립트에서 null에 산술연산을 수행하면 null은 0으로 변환됨(* undefined에 산술연산 수행 시 결과는 NaN)

null % 3 // 0 % 3 == 0

따라서, 위의 조건문은 또 다른 조건인 if (userName !== null) 로 판단 후 수행되어야 함

<script>
    var userNumber = prompt("숫자를 입력하세요.");
    if (userName !== null) {
        if (userNumber % 3 === 0) {
            alert("3의 배수입니다.");
        } else {
            alert("3의 배수가 아닙니다.");
        }
    }
</script>

사용자가 취소 누른 경우 실행되지 않고 그대로 종료됨

 

if문과 논리연산자

종류	기호	설명
OR 연산자	||	피연산자 중 하나만 ture 여도 true가 됨
AND 연산자	&&	피연산자가 모두 true일때만 true가 됨
NOT 연산자	!	피연산자의 반댓값을 지정함

예)

사용자가 입력한 숫자가 하나만 10미만인지, 둘다 10미만인지 나타내자

둘 중 하나라도 null이 있으면 안됨 => 둘다 null이 아니라는 조건이 필요( A가 null이 아님 &&(그리고) B가 null이 아님)

<script>
    var numberOne = prompt("숫자를 입력하세요");
    var numberTwo = prompt("숫자를 입력하세요");
    
    if (numberOne !== null && numberTwo !== null) {
    	if(numberOne < 10 || numberTwo < 10) {
        	alert("둘중의 적어도 하나는 10보다 작습니다");
        } 
        else {
        	alert("10보다 작은 숫자가 없습니다");
        }
    }
</script>

 

switch문

따질 조건의 옵션이 많을 때

if문의 경우, else if문이 많아지면 복잡하고 불편함. 이런 경우 switch문으로 바꾸는 게 좋음

 

옵션을 따질 조건을 switch 옆의 괄호에 적어주고,

옵션 값을 case에 따라 적어주고 각 case문에는 break를 써줘야 다음 case의 명령까지 수행되는 걸 막을 수 있음

해당되는 옵션이 없는 경우 실행할 명령은 default에 적어줌

<script>
    var session = prompt("관심 세션을 선택해주세요. 1-마케팅, 2-개발, 3-디자인");
    
    switch(session) {
    	case "1" : 
        	document.write("마케팅 세션은 201호에서 진행됩니다.");
        	break;
        case "2" :
        	document.write("개발 세션은 202호에서 진행됩니다.");
        	break;
        case "3" :
        	document.write("디자인 세션은 203호에서 진행됩니다.");
        	break;
    	default : alert("잘못 입력했습니다.");
    }
</script>

---

14-4 자바스크립트 기본 문법

반복문이 필요한 이유

: 어떤 명령이 반복적으로 필요한 경우 비슷한 코드를 여러번 작성하지 않고 간단히 나타내기 위함

자주 사용되는 반복문에는 for문, while문, do while문이 있음

 

for문

[기본형]

for (초기값; 조건; 증감식) {

    실행할 명령

}

 

예) 1부터 5까지 숫자 더하기

<script>
    var i;
    var sum = 0;
    
    for (i = 1; i < 6; i++) {
    	sum += i;
    }
    
    document.write("1부터 5까지 더하면" + sum);
</script>

초기값의 상태 > 조건 확인 후 명령 수행 > 증감식 수행

> 조건 확인 후 명령 수행 후 증감식 수행 or 조건이 참이 아니면 반복문 종료

 

중첩된 for문

안쪽 for문부터 수행 후 바깥쪽 for문 수행

<script>
    var i, j;
    
    for (i = 2; i <= 9; i++) {
    	document.write("<div>");
        document.write("<h3>" + i + "단</h3>");
        for (j = 1; j <=9; j++) {
        	document.write(i + "X" + j + " = " + i*j + "<br>");
        }
        document.write("</div>");
    }
</script>

 

while문과 do while문

while문

조건을 체크하고, true라면 { } 안의 명령 실행

-> 조건이 false라면 명령은 한 번도 실행하지 않을 수 있음

[기본형]

while (조건) {

    실행할 명령

}

 

do while문

일단 { } 안의 명령을 한 번 실행

-> 조건을 체크

-> 조건이 true면 명령을 수행, false면 { } 를 빠져나옴

조건이 false라도 명령을 최소한 한 번은 수행할 수 있음 

[기본형]

do {

    실행할 명령

} while (조건)

 

예)

프롬프트 창에서 입력받은 값까지의 팩토리얼 값을 계산해보자

<script>
    var n = prompt("숫자를 입력하세요", "10");
    var msg = "";
    
    if (n !== null) { // '취소' 버튼을 누르지 않았는지 체크
    	var nFact = 1; // 결과 값. 미리 1로 초기화함
        var i = 1; // 카운터
        
        while (i <= n) {
        	nFact *= i;
            i++;
        }
        msg = n + "! = " + nFact; // 결과깂을 출력할 문자열
    }
    else {
    	msg = "값을 입력하지 않았습니다";
    }
    
    document.write(msg); // 결과 출력
</script>