Post

js 공부 2024.04.26

Posted
js 로고 img
js 로고 img
By Jiwoon
22 min read

자바스크립트란?

  • java가 붙지만 java와는 관련이 없다. java가 당시 핫해서 가져다 쓴 거라는 썰이 존재.
  • HTML은 웹의 뼈대
  • CSS는 웹의 스타일
  • JavaScript(JS)는 웹의 동작을 구현

JavaScript는 주로 프론트엔드에서 사용되지만, Node.js 같은 프레임워크를 사용하면 백엔드에서도 사용 가능. 객체 기반의 스크립트 언어이자 인터프리터 언어이다.

  1. 스크립트 언어 (Scripting Language):
    • 프로그램을 빠르게 작성하고 실행할 수 있도록 설계된 고급 언어
    • 대부분 인터프리터 방식으로 실행되며, 컴파일 과정 없이 코드가 실행 시점에 해석됨 (예: Python, JavaScript)
  2. 인터프리터 언어 (Interpreted Language):
    • 소스 코드가 직접 실행 환경에서 한 줄씩 읽혀지고 해석되어 실행됨
    • 실행 시간이 상대적으로 느릴 수 있으나, 개발과 디버깅이 빠르고 편리함 (예: Python, Ruby)
  3. 컴파일 언어 (Compiled Language):
    • 소스 코드를 기계어로 변환하는 컴파일 과정을 거침
    • 한 번 컴파일을 마치면 실행 속도가 매우 빠름 (예: C, C++, Go)

객체 지향 프로그래밍에서 객체는 데이터(변수)와 기능(함수)을 결합한 개념. 객체들은 클래스라는 설계도를 기반으로 생성되며, 각각의 객체를 인스턴스라고 부른다.

함수형 프로그래밍은 모든 계산을 수학적 함수의 평가로 간주하고, 상태 변경이나 가변 데이터를 피한다. 함수를 일급 시민으로 취급하여 다른 함수에 인자로 전달하거나, 변수에 저장하거나, 다른 함수의 결과로서 반환할 수 있다.

예시 :

alt text

이런식으로 함수를 변수에 저장할 수 있다.

html에 링크

  • 헤더 안에 style처럼 넣을 수 있음

  • 자바스크립트… html도 한줄 씩 읽어옴 자바스크립트 놓는 위치는 헤더보다 바디 바닥에 두는게 권장됨. 딜레이가 존재할 수 있기 때문, 요즘에는 크롬이 알아서 최적화를 하기 때문에 괜찮긴 하는데 권장되는 방법을 쓰는게 나음 파일로 따로 빼려면 scripts에 src 에 파일 경로 주기

예시 :

alt text

자바스크립트로 할 수 있는것

  • html ‘내용’을 동적으로 변경 가능
  • html ‘속성’을 변경 가능
  • html ‘스타일’을 변경 가능
  • 브라우저 제어 (팝업, 쿠키, 인쇄, 전체화면 등)

내용바꾸기

1

<h1 id="title">안녕 제목이야</h1>

1

document.getElementById("title").innerText = "ㅎ헤";

안녕 제목이야라고 되어있는게 “ㅎ헤” 로 글이 바뀐다.

innerHTML vs innerText

1
2
3

function changeText() {
    document.getElementById("title").innerHTML = "제목을 <mark>바꿔보자</mark>";
  }

html태그를 사용이 가능.

속성바꾸기

1
2
3
4

function changeText() {
    document.getElementById("title").innerHTML = "제목을 <mark>바꿔보자</mark>";
    document.getElementById("img").src = "https://ssl.pstatic.net/melona/libs/1491/1491834/3d34105d80c435373d2f_20240425140651430.jpg";
  }

img의 src를 바꿀 수도 있음.

1

    document.getElementById("img").width = "1000";

너비도 바꿀 수 있음.

스타일바꾸기

1

document.getElementById("title").style.color = "red";

css의 색도 변경 가능. css쓰려면 style하고 .찍고 각 속성을 선언하면 된다.

브라우저제어

1

    <button onclick="print()">눌러보세요</button>

인쇄창을 띄우기

1

    <button onclick="window.open()">새창</button>

새창띄우기.

변수

const vs let vs var

  • const 는 안의 값을 바꿀 수 없다.
  • let은 블록 스코프를 따라 변수가 해당 블록 내에서만 접근 가능하며, 재선언이 불가능하다.
  • var은 함수 스코프를 가지고 있어 함수 내 또는 전역에서 접근할 수 있으며, 같은 스코프 내에서의 재선언이 허용된다. 호이스팅의 경우, var 선언은 스코프의 최상단으로 호이스팅되어 선언 이전에도 참조할 수 있지만, let은 선언 전에 참조하면 참조 에러가 발생한다. 이러한 특성으로 인해 현대 JavaScript 개발에서는 안정성과 예측 가능성을 위해 let 또는 const의 사용을 권장함.

  1. var의 사용 예시:

    1
2
3
4
5
6
7
8
9
10
11

     javascriptCopy code
 function varExample() {
     var x = 1;
     if (true) {
         var x = 2;  // 같은 변수 x를 재선언 및 재할당
         console.log(x);  // 출력: 2
     }
     console.log(x);  // 출력: 2 (함수 스코프 때문에 블록 내의 변경이 외부에도 영향)
 }
 varExample();

  2. let의 사용 예시:

    1
2
3
4
5
6
7
8
9
10
11

     javascriptCopy code
 function letExample() {
     let x = 1;
     if (true) {
         let x = 2;  // 새로운 블록 스코프 변수 x 선언
         console.log(x);  // 출력: 2
     }
     console.log(x);  // 출력: 1 (블록 스코프 변수는 외부 스코프에 영향을 주지 않음)
 }
 letExample();

  3. const의 사용 예시:

    1
2
3
4
5
6
7
8
9
10
11

     javascriptCopy code
 function constExample() {
     const x = 1;
     if (true) {
         const x = 2;  // 새로운 블록 스코프 상수 x 선언
         console.log(x);  // 출력: 2
     }
     console.log(x);  // 출력: 1 (블록 스코프 상수는 외부 스코프에 영향을 주지 않음)
 }
 constExample();

문법

  • 세미콜론(;)으로 구분
  • 대소문자구분
  • 변수이름은 카멜케이스로(constExample) 작성.

조건문과 전역변수

1
2
3
4
5
6
7
8
9
10

var text = '어떤 값';

function checkLen() {
    var text = document.getElementById('input').value;
    if(text.lenght < 5) {
        alert('5글자 이상으로 작성하셈');
        return false;
    }
    return true;
}

조건문

조건문 if, else if, else

  • if 문: 주어진 조건이 참(true)이면, if 블록 안의 코드가 실행됨.
  • else if 문: if 문의 조건이 거짓(false)일 때 추가적인 조건을 검사합니다. 이는 여러 조건을 순차적으로 검사할 때 사용됨.
  • else 문: 모든 if 및 else if 조건들이 거짓일 때 실행될 코드 블록.

예시 :

1
2
3
4
5
6
7
8
9

let age = 25;

if (age < 18) {
    console.log("미성년자입니다.");
} else if (age < 65) {
    console.log("성인입니다.");
} else {
    console.log("노인입니다.");
}

조건문 스위치

1
2
3
4
5
6
7
8
9
10
11
12
13

var option = 3;

switch(option) {
    case 1:
        console.log('1임');
        break
    case 2:
        console.log('2임');
        break
    case 3:
        console.log('3임');
        break
}

값에 맞으면 바로 종료

1
2
3
4
5
6
7
8
9
10

switch(option) {
    case 1:
        console.log('1임');
    case 2:
        console.log('2임');
        break
    case 3:
        console.log('3임');
        break
}

1일때 2까지가서 출력하고 종료

반복문

  • for문
  • for / in문
  • while문
  • do / while문

for문

  • 가장 일반적인 반복문으로, 초기식, 조건식, 증감식을 이용하여 반복을 제어.
  • 특정 횟수동안 반복 실행할 때 유용.

예시 :

1
2
3

for (let i = 0; i < 5; i++) {
    console.log("for 문 반복: " + i);
}

for / in문

  • 객체의 속성을 반복하여 열거할 때 사용.
  • 객체의 각 속성에 대해 반복 실행됨.

예시 :

1
2
3
4

const person = { firstName: "John", lastName: "Doe", age: 30 };
for (let key in person) {
    console.log(key + ": " + person[key]);
}

while문

  • 조건이 참(true)인 동안 코드 블록을 반복 실행한다.
  • 조건은 반복문의 시작 부분에서 평가됨.

예시 :

1
2
3
4
5

let i = 0;
while (i < 5) {
    console.log("while 문 반복: " + i);
    i++;
}

do / while문

  • while문과 유사하지만, 최소 한 번은 코드 블록을 실행한 후 조건을 평가한다.
  • 조건이 거짓이더라도 최소 한 번은 실행이 보장됨.

예시 :

1
2
3
4
5

let j = 0;
do {
    console.log("do/while 문 반복: " + j);
    j++;
} while (j < 5);

진리성(truthiness) 규칙

비어 있지 않은 문자열은 항상 true로 간주.

문자열 ‘false’는 불리언 값 false와 외형적으로 유사하지만, 실제로는 참(true)으로 평가. 이는 문자열 안에 실제 텍스트가 포함되어 있기 때문. 이러한 특징은 조건문에서 특히 주의가 필요하며, 오해를 불러일으킬 수 있다.

예시 코드:

1
2
3
4
5
6

if ('false') {
    console.log("이 코드는 실행됩니다.");  // 'false'는 참으로 평가되므로 이 코드는 실행됨
}
if (false) {
    console.log("이 코드는 실행되지 않습니다.");  // false는 거짓으로 평가되므로 이 코드는 실행되지 않음
}

입출력

  • window.prompt() 함수
  • input 태그의 value속성읽기
  • 개발자 도구 console

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 onclick="changeText()" id="title">안녕 제목이야</h1>
    <input id="input" type="text">
    <button onclick="getInputText()">input값 읽기</button>
    <button onclick="getPrompt()">prompt 읽기</button>
    <button onclick="alert(text)">text 변수</button>
    <button onclick="checkLen()">제출</button>
    <button id="submit">제출</button>
    <!-- ---------------------------------------------------- -->
    <input type="text" name="" id="input">
    <button onclick="printDoc()">누르면 프린트</button>
    <label for="">
        <input type="checkbox" id="check">
        이걸 체크 해야만 실행되는 기능
    </label>    
    <script src="main.js"></script>
  </body>
</html>

입력받아오기

  • input value 사용
1
2
3
4

function getInputText() {
    var text = document.getElementById('input').value;
    alert(text);
}
  • window.prompt 사용
1
2
3
4

function getPrompt() {
    var text = window.prompt('아무거나 쓰셈');
    alert(text);
}

출력하기

1

console.log(text);

입력하기

1
2

document.write('<h1>안녕하세요!</h1>');
document.write('<p>이 문장은 <strong>굵은 글씨</strong>로 표시됩니다.</p>');

연산자

연산자 유형연산자설명예시    
산술 연산자+두 수의 합x + y    
 -두 수의 차x - y    
 *두 수의 곱x * y    
 /두 수의 나눗셈x / y    
 %나머지 연산x % y    
증감 연산자++값을 1 증가x++ or ++x    
 –값을 1 감소x– or –x    
비교 연산자==값이 같은지 비교 (형변환 포함)x == y    
 ===값과 타입이 모두 같은지 비교x === y    
 !=값이 다른지 비교 (형변환 포함)x != y    
 !==값과 타입이 모두 다른지 비교x !== y    
 <더 작은지 비교x < y    
 >더 큰지 비교x > y    
 <=작거나 같은지 비교x <= y    
 >=크거나 같은지 비교x >= y    
논리 연산자&&논리곱 (AND)x && y    
    논리합 (OR)x y
 !부정 (NOT)!x    
비트 연산자&비트 ANDx & y    
 ``비트 OR    
 ^비트 XORx ^ y    
 ~비트 NOT~x    
 «좌측 시프트x « 2    
 »우측 시프트x » 2    
 »>부호 없는 우측 시프트x »> 2    
할당 연산자=값을 할당x = y    
 +=값을 더하고 할당x += y    
 -=값을 빼고 할당x -= y    
 *=값을 곱하고 할당x *= y    
 /=값을 나누고 할당x /= y    
 %=나머지를 구하고 할당x %= y    
삼항 연산자?:조건에 따라 두 값 중 하나를 선택x ? y : z    

비교 연산자 ===

JavaScript에서 === 연산자는 “엄격한 비교” 또는 “일치 연산자”라고 불림. 이 연산자는 두 값을 비교할 때 타입 변환 없이 두 값의 타입과 값이 모두 같은 경우에만 true를 반환한다. 이는 == 연산자와의 주요 차이점. == 연산자는 “동등 연산자”로서, 비교하는 두 값의 타입이 다른 경우 자동으로 타입을 변환하여 비교한다.

예시 :

1
2
3
4
5

let a = 3;
let b = "3";

console.log(a === b); // 출력: false, 타입이 다르기 때문입니다 ('number' vs 'string')
console.log(a == b);  // 출력: true, 자동 타입 변환으로 인해 '3'이 숫자 3으로 변환되어 값이 같다고 평가됩니다.

조기 반환

함수가 더 이상 진행될 필요가 없을 때 즉시 종료하여, 불필요한 연산을 줄이고 코드의 복잡성을 감소시키는 데 유용하다. 가드 클로즈는 특히 조건이 많거나 복잡한 함수에서 코드의 가독성을 향상시키고, 에러 상황을 빠르게 처리하거나 요구 사항을 충족하지 않는 입력을 신속하게 걸러내는 데 도움을 준다.

예시 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function printDoc() {
    var yn = confirm('진짜로 인쇄 할랴요?');
   
    if(!yn ){
        return;
    }
    window.print();
     // if(yn) {
    //     window.print();
    //     /*
    //     겁나긴코드
    //     겁나긴코드
    //     겁나긴코드
    //     겁나긴코드
    //     겁나긴코드
    //     겁나긴코드
    //     겁나긴코드
    //     겁나긴코드
    //     겁나긴코드
    //     겁나긴코드
    //     */
    // }
}

alt text

value에 아무것도 없으면 false가 들어간다.

익명함수, 전역실행함수

전역변수는 콘솔에서 바꿀 수 있기 때문에 보안에 취약

alt text

그래서 익명함수로 만들고 즉시실행을 시켜준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

(function () {
  var text = "어떤 값";

  //버튼에 이벤트 바로 연결
  document.getElementById("submit").onclick = checkLen;
  function checkLen() {
    var text = document.getElementById("input").value;
    console.log(text);
    document.write(text);
    document.write('test');


    if (text.length < 5) {
      alert("5글자 이상으로 작성하셈");
      return false;
    }
    return true;
  }

  function getInputText() {
    var text = document.getElementById("input").value;
    alert(text);
  }
  function getPrompt() {
    var text = window.prompt("아무거나 쓰셈");
    alert(text);
  }
})();

  1. 익명함수(Anonymous Function): 이름이 없는 함수로, 주로 이벤트 핸들러나 콜백 함수로 사용. 익명함수는 변수에 할당되거나 다른 함수에 직접 전달될 수 있으며, 일반적으로 한 번만 사용.

    1
2
3
4

     setTimeout(function() {
     console.log("익명 함수 실행");
 }, 1000);

  2. 즉시실행함수(IIFE): 정의되자마자 즉시 실행되는 함수로, 외부에서 접근할 수 없는 프라이빗 변수를 만들 때 유용. IIFE는 함수를 괄호 ()로 감싸고, 끝에 ()를 추가하여 바로 호출한다.

    1
2
3
4
5

     (function() {
     var privateVar = "비공개";
     console.log("즉시 실행: " + privateVar);
 })();

이 구조는 코드의 전역 범위를 오염시키지 않으면서 데이터를 캡슐화하고, 초기화 코드를 관리하는데 효과적이다.

숙제

  • 구구단
1
2
3
4
5

for (var 단 = 1; 단 < 10; 단++){
    for (var i = 1; i < 10; i ++) {
        console.log(`${단} x ${i} = ${단 * i}`);
    }
}
  • 키오스크 반복문
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

var n = 10;
for (var i = 0; i < n; i++) {
document.getElementById("menus").innerHTML += tmplate;
}
2
// 수식
var x = -n % 3 + 3;

// 삼항연산자
var x = -n % 3 + 3;
x = (x === 0) ? 0 : (x === 1) ? 2 : 1;

// 스위치 

switch (x) {
    case 0:
        x = 0;
        break;
    case 1:
        x = 2;
        break;
    case 2:
        x = 1;
        break;
}

for (var i = 0; i < x; i++) {
document.getElementById("menus").innerHTML += `<div></div>`;
}
폴리텍, web
js
This post is licensed under CC BY 4.0 by the author.