<!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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <style>
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 700px;
            height: 700px;
            border: 1px solid red;
        }

        .box {
            /* display: grid; */
            padding: 10px;
            width: 600px;
        }

        .card {
            border-bottom: 1px solid gray;
            padding: 10px;
            margin: 5px;
        }

        .btn {
            display: flex;
            width: 100px;
            margin-bottom: 10px;
        }
        .through{
            text-decoration-line: line-through;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>todo리스트 띄우기</h1>
        <button onclick="render()" class="btn">가져오기</button>
        <div class="box" id="outerBox"></div>
    </div>

    <script>

        function render() {
            $.ajax({
                type: "get",
                url: "https://jsonplaceholder.typicode.com/posts",
                contentType: "application/json; charset=utf-8",
            }).done((data, textStatus, xhr) => {
                let todo = xhr.responseJSON;
                for (let i = 0; i < 10; i++) {
                    $("#outerBox").append(`<div class="card"> <input type="checkbox"
                        onclick="lineToggle(${i})"> <span class="line" id="${i}">${todo[i].title}</span> </div>`);
                }
            }).fail((error) => {
                console.log("error : " + error);
            });
        }
        function lineToggle(i){
            let line = document.getElementById(`${i}`);
            line.classList.toggle('through')    
        }

    </script>
</body>

</html>

 

 

'JS' 카테고리의 다른 글

비동기 통신  (0) 2023.05.08
제이쿼리 기본 문법 사용해보기  (0) 2023.05.08
제이쿼리란  (0) 2023.05.08
핵심 부분을 예제문제 풀어보기  (0) 2023.05.08
예제 (값 받아오기)  (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>Document</title>
</head>
<body>
    <button onclick="test1()">Promise1 Test</button>
    <button onclick="test2()">Promise2 Test</button>
    <button onclick="test3()">Promise3 Test</button>
    <button onclick="test4()">Promise4 Test</button>
    <script>
        function test1(){
            console.log("test1 start");
            setTimeout(() => { // Tast Queue 등록
                console.log("통신 요청 start");
                console.log("통신 완료 end");
            }, 2000);
            console.log("test1 end");
        }
        function test2(){
            let data;
            console.log("test2 start");
            setTimeout(() => { // Tast Queue 등록
                console.log("통신 완료");
                data = 200;
            }, 2000);
            console.log("test2 end");
            console.log("값 : "+ data);
        }
        
        function test3(){
            //resolve
            //reject
            console.log("test3 start");
            let response = new Promise((resolve,reject) => {
                setTimeout(() => { // Task Queue 담김
                    console.log("통신완료");
                    let data = 10;
                    resolve(data);
                },2000);
            });
            console.log("값 : "+ response);
            console.log("test3 end");
        }
        
        async function test4(){
            //resolve
            //reject
            //await 가 컴파일 시점에 확인 된다.
            //await 가 있으면 async 라는 예약어를 함수앞에 지정해 주어야 한다.
            console.log("test4 start");
            let response = await new Promise((resolve,reject) => {
                setTimeout(() => { // Task Queue 담김
                    console.log("통신완료");
                    let data = 10;
                    resolve(data);
                },2000);
            });
            console.log("값 : "+ response);
            console.log("test4 end");
        }
    </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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

</head>
<body>
    <script>
        $(document).ready(function(){
            //jquery 통신 코드 사용 방법
            // $("#okBtn").on('click',() => {
            //     //만들어 두고 시작 $.ajax().done().fail()
            //     $.ajax({
            //         //통신 설정 : header , body 설정 등등..
            //     }).done((data,textStatus,xhr) =>{
            //         // 통신성공 하면 콜백 들어옴
            //     }).fail((error) => {
            //         //통신 실패시 콜백 들어옴
            //     });
            // });
            $("#okBtn").on('click',() => {
                $.ajax({
                    type : "get",
                    url : "https://jsonplaceholder.typicode.com/posts/1",
                    contentType : "application/json; charset=utf-8",
                }).done((data,textStatus,xhr) =>{
                    // console.log("data "+ data);
                    // console.log(typeof data);
                    // console.log(textStatus);
                    // console.log(xhr);
                    // console.log(xhr.responseJSON);
                    //let todo = JSON.parse(JSON.stringify(data));
                    let todo = xhr.responseJSON;
                    console.log(todo);
                    $("#result").append(`"title" : "${todo.title}"`);
                }).fail((error) => {
                    console.log("error : "+ error);
                });
            });
        });
    </script>
    <div id="result"></div>
    <button id="okBtn">통신요청</button>
</body>
</html>

 

 

'JS' 카테고리의 다른 글

Ajax 비동기 통신 예제풀이  (0) 2023.05.08
제이쿼리 기본 문법 사용해보기  (0) 2023.05.08
제이쿼리란  (0) 2023.05.08
핵심 부분을 예제문제 풀어보기  (0) 2023.05.08
예제 (값 받아오기)  (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>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function(){
            $("#btn1").on('click',function(){
                let mText = $("#test").text();
                alert(mText);
            });
            $("#btn2").on('click',function(){
                
                //alert($("#test").html());
                let node1 = $("#test").html();
                let node2 = document.querySelector("#test");
                console.log(typeof node1);
                console.log(typeof node2);
            });
            $("#btn3").on('click',function(){
                
                alert($("#input-test").val());
            });
        });
    </script>
    <p id="test">후미진 <input type="text" id="input-test" value="그늘진어느언덕"></p>
    <button id="btn1">글자 가지고 오기</button>
    <button id="btn2">HTML 요소 가지고 오기</button>
    <button id="btn3">value 요소 가지고 오기</button>
</body>
</html>

 

'JS' 카테고리의 다른 글

Ajax 비동기 통신 예제풀이  (0) 2023.05.08
비동기 통신  (0) 2023.05.08
제이쿼리란  (0) 2023.05.08
핵심 부분을 예제문제 풀어보기  (0) 2023.05.08
예제 (값 받아오기)  (0) 2023.05.08 
적게 작성하고 더 많이 수행하는 경량 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

+ Recent posts

티스토리툴바