적게 작성하고 더 많이 수행하는 경량 javaScript 라이브러리 입니다. 
jquery 리 목적은 웹사이트에서 js 훨씬 더 쉽게 사용할 수 있도록 하는 것입니다. 
HTML/DOM 처리 CSS 핸들링 가능 이벤트 등록 및 삭제 핸들링 가능 애니메이션 처리를 
쉽게 사용 AJAX (비동기 통신 처리 가능)

jQuery 이벤트 메서드

자바스크립트 Promise는 비동기 작업을 처리하기 위한 객체입니다. 
Promise는 어떤 작업의 결과를 반환하는 객체로서, 이를 통해 비동기적으로 실행되는 
작업을 처리하고 그 결과를 콜백 함수 등을 이용해 처리할 수 있습니다.

Promise는 총 3가지 상태를 갖습니다.

1. 대기(pending): Promise 객체가 생성되었으나 아직 처리가 진행되지 않은 상태입니다.
2. 이행(fulfilled): Promise 객체가 처리를 완료하여 결과를 반환한 상태입니다.
3. 거부(rejected): Promise 객체가 처리를 실패하였거나 오류가 발생한 상태입니다.

자바스크립트 엔진은 싱글 스레드로 동작하며, 이벤트 루프를 통해 비동기 작업을 처리합니다. 

이벤트 루프는 Call Stack, Task Queue, Event Loop로 구성되어 있습니다.
Call Stack은 현재 실행 중인 함수를 기록하는 스택입니다.
Message Queue는 비동기 작업이 완료되었을 때 등록되는 작업 목록입니다.

Event Loop는 Call Stack과 Message Queue를 주시하면서 Call Stack이 비어있을 때
Message Queue에서 작업을 꺼내와 실행합니다.
AJAX는 "Asynchronous JavaScript and XML"의 약자로, 
자바스크립트를 사용하여 비동기적으로 서버와 데이터를 주고받는 기술입니다.

기존에는 웹 페이지에서 사용자 입력을 받고, 서버로 데이터를 전송하여 새로운 페이지를 받아와서 
보여주는 방식이었습니다. 이러한 방식은 화면이 깜빡이는 등의 불편한 경험을 제공하며,
데이터의 양이 많아지면 더욱 느려질 수 있습니다.

AJAX는 이러한 문제점을 개선하기 위해, 웹 페이지에서 동적으로 데이터를 가져오거나 업데이트하는 기술입니다.
AJAX를 사용하면, 서버와 비동기적으로 데이터를 주고받아 필요한 부분만 화면을 갱신할 수 있으며, 
화면 전환이 발생하지 않아 사용자가 불편한 경험을 하지 않습니다.

AJAX는 자바스크립트를 사용하여 서버에 요청을 보내고, 이에 대한 응답을 처리합니다. 
이를 위해 XMLHttpRequest 객체를 사용하여 서버와 통신합니다. 
최근에는 fetch API를 사용하는 방법이 많이 사용되고 있습니다.

AJAX를 사용하면 사용자 경험이 개선되고, 서버의 부하가 감소하여 웹 애플리케이션의 성능을 개선할 수 있습니다

 

'JS' 카테고리의 다른 글

비동기 통신  (0) 2023.05.08
제이쿼리 기본 문법 사용해보기  (0) 2023.05.08
핵심 부분을 예제문제 풀어보기  (0) 2023.05.08
예제 (값 받아오기)  (0) 2023.05.08
BOM  (0) 2023.05.08

반복문 활용해서 카드 리스트 만들어보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>카드리스트만들어보기</title>
    <style>
        .box {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            border: 1px solid black;
            padding: 10px;
        }
        .card {
           border: 1px solid lightcyan; 
           box-shadow: 0 4px 4px 0 gray;
           padding: 10px;
           margin: 5px;
           border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>반복문으로 리스트 만들어보기</h1>
    <button onclick="render()"> render</button>
    <div class="box" id="outerBox"></div>
    <script>
        function render() {
            let el = document.querySelector("#outerBox");
            // 반복문 통해서 E 요소 생성 
            for(let i = 0; i < 10; i++) {
               el.append(makeCard(i)); 
            }
        }
        function makeCard(id) {
            let card = document.createElement("div");
            card.setAttribute("class", "card");
            card.setAttribute("id", "card--"+id);

            card.innerHTML = `
                <h3>제목 ${id} 입니다</h3>
                <p>내용 ${id} 입니다</p>
                <button onclick="del(${id})">삭제</button>
            `;
            return card;
        }
        function del(id) {
            let el = document.querySelector("#card--" + id);
            el.remove();
        }
    </script>
</body>
</html>

토글 기능 만들어 보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .like--heart {
            font-size: 150px;
            color: gray;
            cursor: pointer;
        }
        .like--heart.liked {
            color: red;
        }
    </style>
</head>
<body>
    <span class="like--heart" onclick="likeToggle()">&#10083;</span>
    <script>
        function likeToggle() {
            let likeHeart = document.querySelector(".like--heart");
            console.log(likeHeart);
            console.log(likeHeart.classList);
            likeHeart.classList.toggle('liked');
            
        }       
    </script>
    
</body>
</html>

 

 

'JS' 카테고리의 다른 글

제이쿼리 기본 문법 사용해보기  (0) 2023.05.08
제이쿼리란  (0) 2023.05.08
예제 (값 받아오기)  (0) 2023.05.08
BOM  (0) 2023.05.08
이벤트 등록 처리  (0) 2023.05.04

이미지와 같이 만들어보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul{
            list-style: none;
        }
        legend{
            font-size: 1.2em;
            font-weight: bold;
            margin-left: 20px;
        }
        form{
            width: 520px;
            height: auto;
            padding-left: 10px;
            margin: 50px auto;
        }
        fieldset{
            border: 1px solid #c0c0c0;
            padding: 30px 20px 30px 20px;
        }
        .field{
            width: 350px;
            height: 35px;
            border: 1px solid #aaa;
            padding: 5px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .input--box{
            float: left;
            width: 60px;
            margin-right: 15px;
            line-height: 55px;
        }
        .order--btn{
            width: 100%;
            padding: 20px;
            margin-top: 10px;
            border: 1px solid #aaa;
        }
    </style>
</head>
<body>
    <div id="container">
        <form name="order">
            <fieldset>
                <legend>주문정보</legend>
                <ul>
                    <li>
                        <label for="" class="input--box">이름 : </label>
                        <input type="text" class="field" id="billingName" name="billingName">
                    </li>
                    <li>
                        <label for="" class="input--box">연락처 : </label>
                        <input type="text" class="field" id="billingTel" name="billingTel">
                    </li>
                    <li>
                        <label for="" class="input--box">주소 : </label>
                        <input type="text" class="field" id="billingAddr" name="billingAddr">
                    </li>
                    
                </ul>
            </fieldset>
        </form>

        <form name="ship">
            <fieldset>
                <legend>배송정보</legend>
                <ul>
                    <li>
                        <input type="checkbox" id="shippingInfo" name="shippingInfo">
                        <label for="shippingInfo">주문 정보와 배송 정보가 같습니다.</label>
                    </li>
                    <li>
                        <label for="" class="input--box">이름 : </label>
                        <input type="text" class="field" id="shippingName" name="shippingName">
                    </li>
                    <li>
                        <label for="" class="input--box">연락처 : </label>
                        <input type="text" class="field" id="shippingTel" name="shippingTel">
                    </li>
                    <li>
                        <label for="" class="input--box">주소 : </label>
                        <input type="text" class="field" id="shippingAddr" name="shippingAddr">
                    </li>
                    
                </ul>
            </fieldset>
            <button type="submit" class="order--btn">결제하기</button>
        </form>
    </div>
    <script>
        // 체크 여부 확인
        let check = document.querySelector("#shippingInfo")
        check.addEventListener("click",function() {
            if(check.checked == true){
                document.querySelector("#shippingName").value = document.querySelector("#billingName").value
                document.querySelector("#shippingTel").value = document.querySelector("#billingTel").value
                document.querySelector("#shippingAddr").value = document.querySelector("#billingAddr").value
            }else{
                document.querySelector("#shippingName").value = "";
                document.querySelector("#shippingTel").value = "";
                document.querySelector("#shippingAddr").value = "";
            }
        });
        document.forms[0].elements[1].value = "안녕";
        console.log(document.forms[0].elements[1].value);
    </script>
</body>
</html>

 

 

'JS' 카테고리의 다른 글

제이쿼리란  (0) 2023.05.08
핵심 부분을 예제문제 풀어보기  (0) 2023.05.08
BOM  (0) 2023.05.08
이벤트 등록 처리  (0) 2023.05.04
DOM 접근 기술  (0) 2023.05.04

 

'JS' 카테고리의 다른 글

핵심 부분을 예제문제 풀어보기  (0) 2023.05.08
예제 (값 받아오기)  (0) 2023.05.08
이벤트 등록 처리  (0) 2023.05.04
DOM 접근 기술  (0) 2023.05.04
문서 객체 모델  (0) 2023.05.04 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <form action="/account" method="get">
            <img src="../js/img1.png" style="width: 200px; height: 200px;" alt="">
            <br><br>
            <button onclick="return false;" id="btnChange">이미지 변경하기</button>
        </form>
    </div>
    <script>
        let isImageChage = false; 
        let btnChangeNode = document.querySelector("#btnChange");
        // 이벤트 유형, 함수, 캡처 여부(생략 가능)
        btnChangeNode.addEventListener("click", changeImage, false);
        btnChangeNode.addEventListener("mouseover", changeImage, false);
        btnChangeNode.addEventListener("mouseout", changeImage);

        function changeImage() {
            let imgNode = document.querySelector("img");
            if(isImageChage) {
                imgNode.src = "../js/img1.png";
            } else {
                imgNode.src = "../js/img2.png";
            }
            isImageChage = !isImageChage;
        }
    </script>
</body>

</html>

 

'JS' 카테고리의 다른 글

예제 (값 받아오기)  (0) 2023.05.08
BOM  (0) 2023.05.08
DOM 접근 기술  (0) 2023.05.04
문서 객체 모델  (0) 2023.05.04
배열  (0) 2023.05.04

id 선택자로 접근

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <h1 id="heading" style="color: aqua;">
            후미진언덕그어디
        </h1>
        <div id="prodImg"></div>
    </div>
    <script>
        // ID 선택자로 노드 접근 해보기 
        let node1 = document.getElementById("heading");
        console.log(node1); 
        console.log(node1.textContent); 
        let headingStyle =  node1.style;
        console.log(headingStyle.color); 
    </script>
</body>
</html>

class 선택자로 접근

<script>
  // getElementsByClassName 
  // HTML 컬렉션 타입으로 접근이 된다 !!! 
  // class 선택자로 노드 접근 해보기 
  let headingNode = document.getElementsByClassName("m--heading");
  console.log(headingNode[0].textContent);
  console.log(headingNode[0].style.color);
</script>

태그 선택자를 사용해서 노드 접근

<script>
    // getElementsByTagName 
    // HTML 컬렉션 타입으로 접근이 된다 !!! 
    // 태그 선택자로 노드 접근 해보기 
    let headingNode = document.getElementsByTagName("h1");
    console.log(headingNode);
    console.log(headingNode[0].textContent);
    console.log(headingNode[0].style.color);
</script>

querySelector 사용해서 노드에 접근하기

<body>
    <div id="container">
        <h1 id="heading" class="m--heading" style="color: aqua;">
            후미진언덕그어디그기억
        </h1>
        <h2>구름나드리</h2>
        <article>오늘날씨는좀그래</article>
    </div>
    <script>
        let divContainerNode = document.querySelector("#container");
        console.log(divContainerNode);
        let h1Node = divContainerNode.querySelector("h1");
        h1Node.textContent = "그늘진그언덕그어디";
        // 문제 : h2  노드에 접근해서 문자열 변경해 보기 
    </script>    
</body>

querySelectorAll 사용해서 노드에 접근하기

<body>
    <div id="container">
        <h1 id="heading" class="m--heading" style="color: brown;">
            후미진언덕그어디그기억
        </h1>
        <h2>구름나드리</h2>
        <article>오늘날씨는좀그래</article>
    </div>
    <script>
        let divContainerNode = document.querySelectorAll("#container");
        console.log(divContainerNode);
        // h1 태그에 문자열 변경 (divContainerNode 시작하기)
        divContainerNode[0]
        .querySelector("h1")
        .textContent = "힘내요~ 내일 휴무 하지만 과제 있습니다";
    </script>    
</body>

 

'JS' 카테고리의 다른 글

BOM  (0) 2023.05.08
이벤트 등록 처리  (0) 2023.05.04
문서 객체 모델  (0) 2023.05.04
배열  (0) 2023.05.04
객체  (0) 2023.05.04

DOM 트리

  • DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분
  • 웹 문서 구조를 부모/자식 관계로 표시하면 나무를 꺼꾸로 뒤집어 놓은 모습 →DOM 트리

 

'JS' 카테고리의 다른 글

이벤트 등록 처리  (0) 2023.05.04
DOM 접근 기술  (0) 2023.05.04
배열  (0) 2023.05.04
객체  (0) 2023.05.04
마우스 클릭 이벤트 활용  (0) 2023.05.04 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let number = ["one", "two", "three", "four"]; // 리터럴을 사용한 배열 
        let number2 = new Array("one", "two", "three", "four") // Array 객체를 사용한 배열
        console.log(number.length);
        for(let i = 0; i < number2.length; i++) {
            console.log(number2[i]);
        }
    </script>
</body>
</html>

'JS' 카테고리의 다른 글

DOM 접근 기술  (0) 2023.05.04
문서 객체 모델  (0) 2023.05.04
객체  (0) 2023.05.04
마우스 클릭 이벤트 활용  (0) 2023.05.04
이벤트  (0) 2023.05.04

+ Recent posts

티스토리툴바