자바스크립트 기초 (9) - HTML,CSS 수정하기
자바스크립트를 사용하여 HTML 및 CSS를 수정하는 것은 동적인 웹 페이지를 만들고 상호작용성을 추가하는 데 매우 유용합니다. 아래에서는 자바스크립트를 사용하여 HTML 요소를 조작하고 CSS 스타일을 변경하는 방법에 대해 설명하겠습니다. 1. HTML 요소 선택하기 : 자바스크립트로 HTML 요소를 수정하기 전에 해당 요소를 선택해야 합니다. 일반적으로 document.querySelector() 또는 document.getElementById()와 같은 DOM 메서드를 사용하여 선택할 수 있습니다. 예를 들어, 아이디가 "myElement"인 요소를 선택하는 방법은 다음과 같습니다. - const element = document.getElementById("myElement"); 2. HTML 내..
2023.07.09
no image
자바스크립트 기초 (8) - 반복문
⭐️ 반복문 ? 반복문이란 말 그대로 반복, 중복되는 코드의 양을 굉장히 효과적으로 줄일 수 있다. 자바스크립트에는 다양한 종류의 반복문이 있습니다. 각각의 반복문은 특정한 조건을 만족할 때까지 코드 블록을 반복적으로 실행합니다. 이를 통해 코드를 단순화하고 반복 작업을 자동화할 수 있습니다. 💫 반복문의 종류 1. for 반복문 : for 반복문은 초기화식, 조건식, 증감식을 포함한 세 가지 부분으로 구성됩니다. 초기화식은 반복문의 시작 시점에서 한 번만 실행되며, 조건식은 반복문의 각 반복마다 평가되고 참일 경우 계속하고 거짓일 경우 반복을 종료합니다. 코드 블록 내의 실행문들이 실행된 후에는 증감식이 실행되어 반복문의 제어 흐름을 결정합니다. 2. while 반복문 : while 반복문은 조건식이 ..
2023.07.09
자바스크립트 기초 (7)
⭐️ 논리 연산자 && , || 조건문에 추가적으로 많이 사용되는 것이 논리 연산자이다. 자바스크립트에서는 논리 연산자를 사용하여 여러 개의 조건을 결합하고, 조건문이나 논리적인 판단을 수행할 수 있습니다. 주요한 세 가지 논리 연산자는 다음과 같습니다: 1. 논리곱 (AND) 연산자 (&&) : 논리곱 연산자는 두 개의 조건이 모두 참일 때 전체 식을 참으로 평가합니다. Ex1) if (조건1 && 조건2) { // 조건1과 조건2가 모두 참인 경우 실행되는 코드 } Ex2) if(a===3 && b===2) {}, a가 3이고 b가 2인 경우에만 코드 실행 2. 논리곱 (OR) 연산자 (||) : 논리합 연산자는 두 개의 조건 중 하나 이상이 참일 때 전체 식을 참으로 평가합니다. Ex1) if (조..
2023.07.05
no image
자바스크립트 기초 (6)
⭐️ 비교 연산자 자바스크립트에서는 다양한 비교 연산자를 사용하여 값 또는 표현식을 비교할 수 있습니다. 비교 연산자를 어떤 상황에서 많이 사용하느냐, 함수를 사용할 때 특정 조건에서만 호출되어 기능을 제공해줘야 하는 상황이 많이 있습니다. 그런 상황에서 특정 조건을 설정할 때 비교 연산자를 많이 사용합니다. 예를 들어, 달력을 통해 DB에서 데이터들을 가져오는 함수를 만든다고 가정했을 때 사용자가 입력한 날짜가 시스템 시간보다 더 미래의 날짜라면 DB에는 해당하는 데이터가 없으므로 잘못된 입력을 했다는 알림창을 띄우는 경우가 있습니다. 이렇게 조건문을 통해 비교 연산자 사용 예시를 알아봤습니다. 💫 비교 연산자에는 어떤 것들이 있을까요? 1. 동등 비교 (==) : 동등 비교 연산자 ==는 두 개의 값..
2023.07.05
no image
자바스크립트 기초 (5)
⭐️ 함수란? 함수는 코드 블록을 정의하고 재사용 가능한 기능 단위로 사용하는 데 사용됩니다. 함수는 특정 작업을 수행하고 값을 반환할 수 있습니다. 함수는 프로그래밍에서 중요한 개념 중 하나이며, 다양한 방식으로 정의하고 호출할 수 있습니다. 중복되는 기능을 하나의 메서드로 사용자 정의하여 호출하며 사용이 가능하다는 것 함수의 기본 형태는 여러 가지가 있습니다. 이 외에도 화살표 함수, 메서드 방식, 즉시 실행 함수 등 여러 형태가 있지만 주로 사용하는 것들을 예시로 들어봤습니다. 자바스크립트는 동적인 기능들을 만들다보니 특정 버튼을 누르면 이벤트가 일어나는 onclick이나 mouseover, onload 같은 이벤트 핸들러들을 많이 사용하게 됩니다. 클릭 이벤트가 발생했을 시 특정 함수를 호출하여 ..
2023.07.05
no image
자바스크립트 기초 (4)
⭐️ 객체 ( Object ) - 자바스크립트에서 객체는 속성과 메서드를 포함하는 데이터 구조입니다. 객체는 관련된 데이터와 해당 데이터를 조작하는 메서드를 논리적으로 그룹화할 수 있도록 해줍니다. 객체는 다른 데이터 유형을 포함하고 복합적인 동작을 수행할 수 있으며, 자바스크립트의 핵심 개념 중 하나입니다. 객체는 중괄호( {} )로 정의되며, 객체의 속성과 메서드는 이름과 값을 가집니다. 속성은 객체의 특징이나 상태를 나타내는 변수이고, 메서드는 객체가 수행할 수 있는 동작을 정의하는 함수입니다. 이러한 속성과 메서드는 객체 내에서 접근할 수 있는 특정 이름(키)를 가지고 있습니다. 💫 객체의 구조 name : key , car1 : value key와 value의 한 쌍으로 이루어집니다. 💫 객체에..
2023.07.04
no image
자바스크립트 기초 (3)
4️⃣ Method ( 메서드 ) ⭐️ Method란? 자바스크립트는 다양한 내장 메서드를 제공하여 데이터 처리, 문자열 조작, 배열 조작 등 다얀한 작업을 수행할 수 있습니다. 아래는 자주 사용되는 몇 가지 자바스크립트 메서드의 예시입니다. 1 ) 문자열 메서드 - length() : 문자열의 길이를 반환합니다. - toUpperCase() : 문자열을 모두 대문자로 변환합니다. - toLowerCase() : 문자열을 모두 소문자로 변환합니다. - indexOf() : 특정 문자열 또는 문자의 인덱스를 반환합니다. - substring() : 지정한 인덱스 범위 내의 문자열을 추출합니다. 2) 배열 메서드 - length : 배열의 길이를 반환합니다. - push() : 배열의 끝에 하나 이상의 요소..
2023.07.04
no image
자바스크립트 기초 (2)
3️⃣ 데이터 타입 ⭐️ Array ( 배열 ) - 자바스크립트에서 배열은 여러 개의 값을 하나의 변수에 저장하는 데이터 구조입니다. 배열을 사용하면 여러 값을 관리하고 접근할 수 있습니다. 자바스크립트에서 배열은 동적으로 크기를 조정할 수 있으며, 다양한 유용한 메서드와 속성을 제공합니다. - [], 대괄호로 사용 - 배열 각각의 데이터를 요소(Element)라고 부릅니다. - 배열의 각 요소는 index, 인덱스를 가집니다. 0부터 시작하며 1씩 더해져갑니다. ['test1', 'test2', 'test3', 'test4'] index 0 1 2 3 - index를 통해 각 요소에 접근이 가능합니다. Ex) test[0] = test1 , test[1] = test2, test[2] = test3, ..
2023.07.04

Table of contents

    자바스크립트를 사용하여 HTML 및 CSS를 수정하는 것은 동적인 웹 페이지를 만들고 상호작용성을 추가하는 데 매우 유용합니다.

    아래에서는 자바스크립트를 사용하여 HTML 요소를 조작하고 CSS 스타일을 변경하는 방법에 대해 설명하겠습니다.

     

    1. HTML 요소 선택하기 :

    자바스크립트로 HTML 요소를 수정하기 전에 해당 요소를 선택해야 합니다.

    일반적으로 document.querySelector() 또는 document.getElementById()와 같은 DOM 메서드를 사용하여 선택할 수 있습니다.

    예를 들어, 아이디가 "myElement"인 요소를 선택하는 방법은 다음과 같습니다.

    - const element = document.getElementById("myElement");

     

    2. HTML 내용 수정하기 :

    선택한 HTML 요소의 내용을 변경하려면 innerHTML 속성을 사용할 수 있습니다.

    예를 들어, 선택한 요소의 내용을 다른 내용으로 변경하는 방법은 다음과 같습니다.

    - element.innerHTML = "새로운 내용";

     

    3.CSS 스타일 변경하기

    자바스크립트를 사용하여 선택한 HTML 요소의 CSS 스타일을 변경할 수 있습니다.

    style 속성을 사용하여 스타일 속성을 직접 수정하거나 classList 속성을 사용하여 클래스를 추가하거나 제거할 수 있습니다.

    예를 들어, 선택한 요소의 배경색을 빨간색으로 변경하고 폰트 크기를 20픽셀로 변경하는 방법은 다음과 같습니다.

    - element.style.backgroundColor = "red;

    - element.style.fontSize = "20px";

     

    또는 클래스를 추가하거나 제거하여 CSS 클래스를 적용하거나 제거할 수 있습니다.

    "highlight" 클래스를 추가하는 방법은 다음과 같습니다.

    - element.classList.add("highlight");

     

    "highlight" 클래스를 제거하는 방법은 다음과 같습니다.

    - element.classList.remove("highlight");

     

     

    4. 이벤트 처리하기

    자바스크립트를 사용하여 HTML 요소에 이벤트 처리기를 추가할 수도 있습니다.

    이벤트 처리기를 사용하면 요소에 대한 상호작용 및 동적 동작을 정의할 수 있습니다.

    예를 들어, 버튼 클릭 이벤트에 대한 처리기를 추가하는 방법은 다음과 같습니다.

    const button = document.getElementById("myButton");
    button.addEventListener("click", function() {
      // 버튼이 클릭되었을 때 실행할 코드 작성
    });

    이벤트 처리가 함수 내에서 HTML이나 CSS를 수정하거나 다른 작업을 수행할 수 있습니다.

    728x90
    SMALL

    '자바스크립트' 카테고리의 다른 글

    자바스크립트 기초 (8) - 반복문  (0) 2023.07.09
    자바스크립트 기초 (7)  (0) 2023.07.05
    자바스크립트 기초 (6)  (0) 2023.07.05
    자바스크립트 기초 (5)  (0) 2023.07.05
    자바스크립트 기초 (4)  (0) 2023.07.04

    Table of contents

      ⭐️ 반복문 ?

      반복문이란 말 그대로 반복, 중복되는 코드의 양을 굉장히 효과적으로 줄일 수 있다.

      자바스크립트에는 다양한 종류의 반복문이 있습니다.

      각각의 반복문은 특정한 조건을 만족할 때까지 코드 블록을 반복적으로 실행합니다.

      이를 통해 코드를 단순화하고 반복 작업을 자동화할 수 있습니다.

       

      💫 반복문의 종류

      1. for 반복문 : for 반복문은 초기화식, 조건식, 증감식을 포함한 세 가지 부분으로 구성됩니다.

      초기화식은 반복문의 시작 시점에서 한 번만 실행되며, 조건식은 반복문의 각 반복마다 평가되고 참일 경우 계속하고

      거짓일 경우 반복을 종료합니다. 코드 블록 내의 실행문들이 실행된 후에는 증감식이 실행되어 반복문의 제어 흐름을 결정합니다.

      for 반복문 예시

      2. while 반복문 : while 반복문은 조건식이 참일 동안 코드 블록을 반복적으로 실행합니다.

      while 반복문은 초기화식이나 증감식이 없기 때문에 반복문 안에서 직접 변수를 업데이트 해야 합니다.

      조건식이 거짓이면 반복문은 실행되지 않습니다.

      while 반복문 예시

      3. do-while 반복문 : do-while 반복문은 코드 블록을 실행한 후에 조건식을 평가합니다.

      따라서 최소한 한 번은 코드 블록이 실행됩니다. 그 후 조건식이 참인 경우 반복을 계속하고, 거짓인 경우 반복문을 종료합니다.

      do-while 반복문 예시

      이 외에도 for...of 반복문과 for...in 반복문 등 다양한 반복문 유형이 있습니다.

      for...of 반복문은 배열이나 이터러블 객체를 순회하며

      반복합니다. for...int 반복문은 객체의 열거 가능한 속성들을 반복적으로 실행합니다.

      반복문은 굉장히 유용한 도구이며, 반복 작업을 효율적으로 처리할 수 있도록 도와줍니다.

      하지만 주의해야 할 점이 있습니다. 무한 루프에 빠질 수 있다는 것입니다.

      반복문의 무한 루프는 프로그램의 실행 흐름이 종료되지 않고 영원히 반복되는 상황을 말합니다.

      이는 프로그램의 동작을 멈추거나 정상적으로 제어할 수 없게 만들 수 있습니다.

      무한 루프는 실수로 코드를 작성할 때 발생할 수 있으며, 예상치 못한 결과를 초래할 수 있습니다.

      💫 무한 루프의 위험성과 방지

      무한 루프의 위험성은 다음과 같습니다.

       

      1. 무한한 실행 시간 : 무한 루프는 프로그램을 영원히 실행시키기 때문에, CPU 및 메모리 리소스를 지속적으로 소비하게 됩니다. 이는 시스템에 부하를 줄 뿐만 아니라, 루프 이후의 코드도 실행되지 않게 만들어 버그를 발생시킬 수 있습니다.

       

      2. 시스템 성능 저하 : 무한 루프로 인해 CPU 리소스가 과도하게 사용되면 다른 프로세스나 작업의 실행에 영향을 미칠 수 있습니다. 이는 시스템의 전반적인 성능 저하를 초래할 수 있습니다.

       

      3. 응답 없음 : 무한 루프에 빠지면 프로그램이 더 이상 응답하지 않는 상태가 됩니다. 사용자 입력에 대한 응답이 없고, 프로그램을 종료하거나 제어할 방법이 없게 됩니다. 

      이는 사용자 경험을 심각하게 저하시키고, 시스템을 강제로 종료해야 할 수도 있습니다.

       

      4. 데이터 손실 및 보상 : 무한 루프는 예상치 못한 데이터 손실이나 손상을 초래할 수 있습니다.

      루프 안에서 잘못된 조건 또는 잘못된 변수 조작으로 인해 데이터가 오염될 수 있습니다.

       

      그렇다면 무한 루프를 방지하기 위해 어떻게 해야할까요?

      1. 반복 조건 검사 : 반복문의 조건을 주의 깊게 검사하여 무한 루프에 빠질 가능성을 줄입니다.

      반복 조건이 항상 참이 되지 않도록 확인해야 합니다.

       

      2. 제한된 반복 횟수 설정 : 일정 횟수 이상의 반복을 허용하지 않도록 반복문을 작성합니다.

      이를 통해 무한루프의 위험을 줄일 수 있습니다.

       

      3. 디버깅 및 테스트 : 코드를 디버깅하고 테스트하여 무한루프를 찾고 수정할 수 있습니다. 특히, 대규모 프로젝트의 경우 코드 리뷰와 테스트 과정을 철저히 수행하는 것이 중요합니다.

       

       

      728x90
      SMALL

      '자바스크립트' 카테고리의 다른 글

      자바스크립트 기초 (9) - HTML,CSS 수정하기  (0) 2023.07.09
      자바스크립트 기초 (7)  (0) 2023.07.05
      자바스크립트 기초 (6)  (0) 2023.07.05
      자바스크립트 기초 (5)  (0) 2023.07.05
      자바스크립트 기초 (4)  (0) 2023.07.04

      Table of contents

        ⭐️ 논리 연산자 && , ||

        조건문에 추가적으로 많이 사용되는 것이 논리 연산자이다.

        자바스크립트에서는 논리 연산자를 사용하여 여러 개의 조건을 결합하고,

        조건문이나 논리적인 판단을 수행할 수 있습니다. 주요한 세 가지 논리 연산자는 다음과 같습니다:

         

        1. 논리곱 (AND) 연산자 (&&) : 논리곱 연산자는 두 개의 조건이 모두 참일 때 전체 식을 참으로 평가합니다.

        Ex1) if (조건1 && 조건2) { 

                   // 조건1과 조건2가 모두 참인 경우 실행되는 코드

                }

        Ex2) if(a===3 && b===2) {}, a가 3이고 b가 2인 경우에만 코드 실행

         

        2. 논리곱 (OR) 연산자 (||) : 논리합 연산자는 두 개의 조건 중 하나 이상이 참일 때 전체 식을 참으로 평가합니다.

        Ex1)  if (조건1 || 조건2) {

                    // 조건1 또는 조건2 중 하나 이상이 참인 경우 실행되는 코드

                }

        Ex2) if(a===3 || b===2) {}, a가 3이거나, b가 2인 경우에 코드 실행

         

        3. 논리 부정(NOT) 연산자 (!) : 논리 부정 연산자는 주어진 조건을 반대로 만듭니다.

        즉, 참을 거짓으로, 거짓을 참으로 변환합니다.

        Ex1) if (!조건) {

                   // 조건이 거짓인 경우 실행되는 코드

               }

        Ex2) if(!a===3) {}, a가 3이 아닌 경우에 코드 실행

         

        💫 조건문과 연결되어 실무, 코딩테스트에 많이 사용 !

         

         

        728x90
        SMALL

        Table of contents

          ⭐️ 비교 연산자

          자바스크립트에서는 다양한 비교 연산자를 사용하여 값 또는 표현식을 비교할 수 있습니다.

          비교 연산자를 어떤 상황에서 많이 사용하느냐,

          함수를 사용할 때 특정 조건에서만 호출되어 기능을 제공해줘야 하는 상황이 많이 있습니다.

          그런 상황에서 특정 조건을 설정할 때 비교 연산자를 많이 사용합니다.

          예를 들어, 달력을 통해 DB에서 데이터들을 가져오는 함수를 만든다고 가정했을 때

          사용자가 입력한 날짜가 시스템 시간보다 더 미래의 날짜라면 DB에는 해당하는 데이터가

          없으므로 잘못된 입력을 했다는 알림창을 띄우는 경우가 있습니다. 


          비교 연산자 사용, 조건문

          이렇게 조건문을 통해 비교 연산자 사용 예시를 알아봤습니다.


          💫 비교 연산자에는 어떤 것들이 있을까요?

           

          1. 동등 비교 (==) : 동등 비교 연산자 ==는 두 개의 값이 같은지 비교합니다. 

          데이터 타입의 동등성을 고려하지 않으며, 필요에 따라 자동으로 타입 변환을 수행합니다.

          예를 들어, 1 == "1"은 true를 반환합니다.

           

          2. 일치 비교 (===) : 일치 비교 연산자 ===는 값과 데이터 타입 모두를 비교합니다.

          즉, 두 개의 값이 정확히 같은지를 비교합니다.

          예를 들어, 1 === "1"은 false를 반환합니다.

           

          3. 부등 비교 (!=) : 부등 비교 연산자 !=는 두 개의 값이 다른지 비교합니다.

          동등 비교 연산자의 반대입니다. 

          예를 들어, 1 != 2는 true를 반환합니다.

           

          4. 불일치 비교 (!==) : 불일치 비교 연산자 !==는 값과 데이터 타입 모두를 비교하여 두 개의 값이 정확히 다른지를

          판단합니다. 일치 비교 연산자의 반대입니다. 예를 들어, 1 !== "1"은 true를 반환합니다.

           

          5. 대소 비교 (<, >, <=, >=) : 대소 비교 연산자들은 두 개의 값 간의 크기를 비교합니다.

          예를 들어, 5 > 3은 true를 반환합니다.

           

          비교 연산자는 불리언 (Boolean) 값을 반환합니다. 비교 결과가 참인 경우 true를 반환하고, 그렇지 않은 경우 false를 반환합니다.

          흔히 동등 비교 ==는 느슨한 비교, 일치 비교 ===는 엄격한 비교라고 한다.

          주의할 점은 동등 비교 연산자 ==와 부등 비교 연산자 !=는 자동 타입 변환을 수행하기 때문에 예상치 못한 결과를 초래할 수 있으므로, 가능한한 일치 비교 연산자 ===와 불일치 비교 연산자 !==를 사용하는 것이 좋습니다.


          ⭐️ 원시 타입, 참조 타입

          1) 원시 타입(원시값)

          Number(숫자) : 정수 및 부동 소수점 숫자를 나타냅니다. ex) 42, 3.14

          String(문자열) : 텍스트 데이터를 나타냅니다. ex) "Hello, world!", 'JavaScript'

          Boolean(불리언) : true 또는 false 값을 나타냅니다.

          null : 값이 없음을 나타내는 특별한 값입니다.

          undefined : 값이 할당되지 않은 상태를 나타냅니다.

          Symbol(심볼) : 유일하고 변경 불가능한 값을 나타냅니다.

          - 원시타입의 데이터는 변수에 직접 값을 할당하며, 해당 변수는 값을 보유합니다.

          즉, 원시값은 변수에 복사됩니다. 변수 간의 비교 시, 값 자체를 비교합니다.

           

          2. 참조 타입(참조값)

          Object(객체) : 여러 개의 속성과 메서드를 포함하는 컨테이너입니다. ex) {name:'John', age:25}

          Array(배열) : 순서가 있는 값들의 리스트입니다. ex) [1,2,3]

          Function(함수) : 코드 블록을 포함하는 재사용 가능한 코드 조각입니다.

          - 참조 타입의 데이터는 값 대신 메모리에 저장되며, 변수는 해당 메모리 위치를 참조합니다.

          따라서 변수 간의 비교 시, 메모리 위치를 비교합니다.

           

          참조 타입은 객체나 배열 등과 같이 복잡한 데이터를 다룰 수 있으며, 변수에 할당되는 것은 참조(메모리 위치)입니다.

          반면에 원시타입은 간단한 데이터를 나타내고, 변수에는 실제 값이 직접 저장됩니다.


          ⭐️ 조건문

          - 조건문은 특정 조건이 참인지 거짓인지를 평가하여 다른 코드 블록을 실행하거나 건너뛰는 제어 구조입니다.

          조건문은 프로그램의 흐름을 제어하는 데 사용되며, 다양한 상황에 따라 다른 동작을 수행할 수 있습니다.

           

          자바스크립트에서 사용되는 주요한 조건문은 다음과 같습니다:

          1. if 문 : if문은 주어진 조건이 참인 경우에 코드 블록을 실행합니다. 

          Ex) if(조건) {

                   // 조건이 참인 경우 실행되는 코드

                 }

           

          2. if...else 문 : if...else 문은 주어진 조건이 참인 경우에는 하나의 코드 블록을 실행하고,

          그렇지 않은 경우에는 다른 코드 블록을 실행합니다.

          Ex) if (조건) {

                   // 조건이 참인 경우 실행되는 코드

                } else {

                  // 조건이 거짓인 경우 실행되는 코드

                }

           

          3. if...else if...else 문 : if...else if...else문은 여러 개의 조건을 순차적으로 평가하고, 첫 번째로 참인 조건에

          해당하는 코드 블록을 실행합니다.

          Ex) if (조건1) {

                   // 조건1이 참인 경우 실행되는 코드

                } else if (조건2) {

                  // 조건2가 참인 경우 실행되는 코드

                } else {

                 // 모든 조건이 거짓인 경우 실행되는 코드

               }

           

          4. switch 문 : switch 문은 주어진 표현식의 값에 따라 여러 개의 경우(case)를 비교하고

          해당하는 경우에 대한 코드 블록을 실행합니다.

          Ex)  switch (표현식) {

                      case1: // 값1에 해당하는 경우 실행되는 코드 break;

                      case2: // 값2에 해당하는 경우 실행되는 코드 break;

                      default: // 모든 경우에 해당하지 않는 경우 실행되는 코드 break;

                 } 

          break 안해주면 계속 지 혼자 내려가면서 실행됨

           

          🌟 정리 : 조건문, 비교 연산자 또한 코딩테스트에서 굉장히 많이 쓰이고,

                            실무에서도 많이 쓰인다 실력 쌓으려면 기초가 상당히 중요한 것 같다..

          728x90
          SMALL

          '자바스크립트' 카테고리의 다른 글

          자바스크립트 기초 (8) - 반복문  (0) 2023.07.09
          자바스크립트 기초 (7)  (0) 2023.07.05
          자바스크립트 기초 (5)  (0) 2023.07.05
          자바스크립트 기초 (4)  (0) 2023.07.04
          자바스크립트 기초 (3)  (0) 2023.07.04

          Table of contents

            ⭐️ 함수란?

            함수는 코드 블록을 정의하고 재사용 가능한 기능 단위로 사용하는 데 사용됩니다.

            함수는 특정 작업을 수행하고 값을 반환할 수 있습니다.

            함수는 프로그래밍에서 중요한 개념 중 하나이며, 다양한 방식으로 정의하고 호출할 수 있습니다.

             

            중복되는 기능을 하나의 메서드로 사용자 정의하여 호출하며 사용이 가능하다는 것

            함수의 기본 형태는 여러 가지가 있습니다.

            함수 기본 형태 (1) - 함수 선언문
            함수의 기본형태 (2) - 함수 표현식

            이 외에도 화살표 함수, 메서드 방식, 즉시 실행 함수 등 여러 형태가 있지만 주로 사용하는 것들을 예시로 들어봤습니다.

            자바스크립트는 동적인 기능들을 만들다보니 특정 버튼을 누르면 이벤트가 일어나는

            onclick이나 mouseover, onload 같은 이벤트 핸들러들을 많이 사용하게 됩니다.

            클릭 이벤트가 발생했을 시 특정 함수를 호출하여 기능을 제공하는 것

             

            💫 자바스크립트에서 요소를 선택하고 조작하는 유용한 메서드 ( document 객체에서 제공되는 메서드들)

            - document.querySelector - 여러 요소를 선택할 수 있다.

            Ex) var element = document.querySelector(".my-class"); // 클래스 선택자

                 var element = document.querySelector("#my-id"); // 아이디 선택자

                 var element = document.querySelector("div"); // 요소 선택자 

                 var element = document.querySelector("[name='my-name']"); // 속성 선택자

             

            - document.querySelectorAll

            - document.getElementById - id를 사용하여 문서 내의 요소를 선택합니다.

            - document.getElementsByClassName - 클래스 이름을 사용하여 문서 내의 요소를 선택합니다.

            - document.getElementsByTagName - 요소 이름을 사용하여 문서 내의 요소를 선택합니다.

            - document.getElementsByName -이름 속성을 사용하여 문서 내의 요소를 선택합니다.

             

            💫  자바스크립트에서 날짜 관련 함수

            자바스크립트는 날짜와 시간을 다루기 위한 다양한 내장 함수와 객체를 제공합니다.

            다음은 주요한 자바스크립트 날짜 함수와 관련된 내용입니다

            1. Date() 생성자 : Date() 생성자는 현재 날짜와 시간을 나타내는 Date 객체를 생성합니다. Date() 생성자 사용 예시

            var currentDate = new Date(); // 현재 날짜와 시간을 가지는 Date 객체 생성

             

            var specificDate = new Date("2023-07-05); // 특정 날짜와 시간을 가지는 Date 객체 생성

             

            var specificDateTime = new Date(2023,6,5,10,30,0);

             

            2. getFullYear(), getMonth(), getDate(), getDay() 등 : Date 객체의 메서드 사용하여 날짜와 시간의

            다양한 부분 가지고 올 수 있다.

            var date = new Date();

            var year = date.getFullYear(); // 현재 연도 가져오기
            var month = date.getMonth(); // 현재 월 (0부터 11까지, 0은 1월을 의미)
            var day = date.getDate(); // 현재 일 가져오기

            var dayOfWeek = date.getDay(); // 현재 요일 (0은 일요일을 의미)

             

            3. setFullYear(), setMonth(), setDate(), setHours() 등 : Date 객체의 메서드를 사용하여 날짜와 시간의

            특정 부분을 설정할 수 있다.

            var date = new Date();

            date.setFullYear(2023); // 연도 설정
            date.setMonth(6); // 월 설정 (0부터 11까지)
            date.setDate(5); // 일 설정

            date.setHours(10); // 시간 설정

             

            4. toLocaleDateString(), toLocaleTimeString() 등 : Date  객체의 메서드를 사용하여 지역화된 날짜와 시간

            문자열을 가져올 수 있다.

             

            var date = new Date();

            var localDateString = date.toLocaleDateString(); // 지역화된 날짜 문자열 가져오기

            var localTimeString = date.toLocaleTimeString(); // 지역화된 시간 문자열 가져오기

             

            5. getTime(), setTime() : Date 객체의 메서드를 사용하여 날짜와 시간을 밀리초 단위의 숫자 값으로

            가져오거나 설정할 수 있다.

             

            var date = new Date();

            var timestamp = date.getTime(); // 현재 날짜와 시간의 밀리초 단위의 타임스탬프 가져오기
            var newDate = new Date(1625468300000); // 밀리초 단위의 타임스탬프로부터 새로운 Date 객체 생성
            이 외에도 Date 객체는 다양한 기능을 제공하고 있다.

            날짜와 시간을 비교, 연산, 형식화 등 작업이 가능하다. 

             

             

            728x90
            SMALL

            '자바스크립트' 카테고리의 다른 글

            자바스크립트 기초 (7)  (0) 2023.07.05
            자바스크립트 기초 (6)  (0) 2023.07.05
            자바스크립트 기초 (4)  (0) 2023.07.04
            자바스크립트 기초 (3)  (0) 2023.07.04
            자바스크립트 기초 (2)  (0) 2023.07.04

            Table of contents

              ⭐️ 객체 ( Object )

              - 자바스크립트에서 객체는 속성과 메서드를 포함하는 데이터 구조입니다.

              객체는 관련된 데이터와 해당 데이터를 조작하는 메서드를 논리적으로 그룹화할 수 있도록 해줍니다.

              객체는 다른 데이터 유형을 포함하고 복합적인 동작을 수행할 수 있으며, 자바스크립트의 핵심 개념 중 하나입니다.

               

              객체는 중괄호( {} )로 정의되며, 객체의 속성과 메서드는 이름과 값을 가집니다.

              속성은 객체의 특징이나 상태를 나타내는 변수이고, 메서드는 객체가 수행할 수 있는 동작을 정의하는 함수입니다.

              이러한 속성과 메서드는 객체 내에서 접근할 수 있는 특정 이름(키)를 가지고 있습니다.

               

              (1) 객체 생성 및 console.log로 확인


              💫  객체의 구조

              name : key , car1 : value

              key와 value의 한 쌍으로 이루어집니다.


              💫  객체에 데이터에 접근하는 방법

              - Dot notation

              Dot notation 사용 방법

               

              - Bracket notation

              Bracket notation 사용 방법

               

              개인적으론 Bracket notation보다 Dot notation을 많이 쓴다. 

              이유는.. 쓰기 편하다.

               


              💫   객체의 Method

              - Object.keys() : 주어진 객체의 key만을 가져와서 배열에 담아준다.

              Object.keys() 사용 방법

              - Object.values()

              Object.values() 사용 방법

              🌟  정리

              객체, 배열, 메서드 등 굉장히 기초적이지만 얘네 없으면 다른 것들 이해 안간다..

              최대한 충실하게 머리에 박아둡시다 !

              화이팅

              728x90
              SMALL

              '자바스크립트' 카테고리의 다른 글

              자바스크립트 기초 (6)  (0) 2023.07.05
              자바스크립트 기초 (5)  (0) 2023.07.05
              자바스크립트 기초 (3)  (0) 2023.07.04
              자바스크립트 기초 (2)  (0) 2023.07.04
              자바스크립트 기초 (1)  (0) 2023.07.04

              Table of contents

                4️⃣  Method ( 메서드 )

                ⭐️ Method란?

                자바스크립트는 다양한 내장 메서드를 제공하여 데이터 처리, 문자열 조작, 배열 조작 등 다얀한 작업을 수행할 수 있습니다.

                아래는 자주 사용되는 몇 가지 자바스크립트 메서드의 예시입니다.

                 

                1 ) 문자열 메서드 

                - length() : 문자열의 길이를 반환합니다.

                - toUpperCase() : 문자열을 모두 대문자로 변환합니다.

                - toLowerCase() : 문자열을 모두 소문자로 변환합니다.

                - indexOf() : 특정 문자열 또는 문자의 인덱스를 반환합니다.

                - substring() : 지정한 인덱스 범위 내의 문자열을 추출합니다.

                 

                2) 배열 메서드

                - length : 배열의 길이를 반환합니다.

                - push() : 배열의 끝에 하나 이상의 요소를 추가합니다.

                - pop() : 배열의 마지막 요소를 제거하고 반환합니다.

                - join() : 배열의 모든 요소를 문자열로 결합합니다.

                - indexOf() :특정 요소의 인덱스를 반환합니다.

                - includes() : 특정 배열에 주어진 데이터가 존재하는지 여부 확인, 반환 Boolean 타입 (true, false)

                 

                3) 숫자 메서드

                - toFixed() : 숫자를 지정된 소수 자릿수까지 반올림하여 문자열로 반환합니다.

                - toPrecision() : 숫자를 지정된 유효 자릿수로 반올림하여 문자열로 반환합니다.

                - parseInt() : 문자열을 정수로 변환합니다.

                - parseFloat() : 문자열을 부동 소수점 숫자로 변환합니다.

                 

                이 외에도 많은 메서드가 있으며, 특정 작업에 필요한 메서드는 해당 작업의 요구사항에 따라 선택하여 사용할 수 있습니다.

                아래 링크를 통해 더 많은 메서드나 자바스크립트의 내용을 확인할 수 있습니다.

                https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

                 

                💫 사용 예시

                - Array.push() 

                push() 메서드로 배열 끝에 요소 추가

                - Array.pop()

                pop() 메서드로 배열 마지막 요소를 제거

                - Array.includes()

                includes() 메서드로 요소가 배열 내 존재 하는지 확인

                🌟 정리

                - 메서드는 자바스크립트로 코딩테스트를 준비하는 사람에겐 꼭 필요하다.

                  당장 다 기억할 수는 없지만 꾸준히 쓰다보면 손에 익을 것이다.

                  화이팅 !

                728x90
                SMALL

                '자바스크립트' 카테고리의 다른 글

                자바스크립트 기초 (5)  (0) 2023.07.05
                자바스크립트 기초 (4)  (0) 2023.07.04
                자바스크립트 기초 (2)  (0) 2023.07.04
                자바스크립트 기초 (1)  (0) 2023.07.04
                자바스크립트 기초 (0)  (0) 2023.07.04

                Table of contents

                  3️⃣ 데이터 타입

                  ⭐️ Array ( 배열 )

                  - 자바스크립트에서 배열은 여러 개의 값을 하나의 변수에 저장하는 데이터 구조입니다.

                  배열을 사용하면 여러 값을 관리하고 접근할 수 있습니다.

                  자바스크립트에서 배열은 동적으로 크기를 조정할 수 있으며, 다양한 유용한 메서드와 속성을 제공합니다.

                   

                  - [], 대괄호로 사용 

                  배열 사용 예시

                  - 배열 각각의 데이터를 요소(Element)라고 부릅니다.

                  - 배열의 각 요소는 index, 인덱스를 가집니다.

                     0부터 시작하며 1씩 더해져갑니다.

                            ['test1', 'test2', 'test3', 'test4']

                  index     0         1            2            3

                   

                  - index를 통해 각 요소에 접근이 가능합니다.

                  Ex) test[0] = test1 , test[1] = test2, test[2] = test3, test[3] = test4

                  배열의 구조

                  💫 배열의 Property

                  Property : 배열이 가지고 있는 속성

                  - length : Array.length, 배열의 길이

                  Index는 0부터 시작하지만 length는 길이이기 때문에 1부터 시작합니다.

                  배열의 길이 출력

                  728x90
                  SMALL

                  '자바스크립트' 카테고리의 다른 글

                  자바스크립트 기초 (5)  (0) 2023.07.05
                  자바스크립트 기초 (4)  (0) 2023.07.04
                  자바스크립트 기초 (3)  (0) 2023.07.04
                  자바스크립트 기초 (1)  (0) 2023.07.04
                  자바스크립트 기초 (0)  (0) 2023.07.04