웹 개발/웹개발종합

웹 개발의 기초 2

개발자명백 2023. 2. 28. 14:51

JS와 ajax

 

0. JS 복습하기

버튼을 누를 때마다 카운트를 1 씩 증가시키며 짝수인지 홀수인지 출력하는 페이지 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS 연습용</title>
    <style>
        .mybtn {
            width: 100px;
            height: 50px;

            background-color: black;
            color: white;

            border-radius: 30px;

            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
    <script>
        let count = 0;

        function hey() {
            count++;
            if(count % 2 == 0){
                alert("짝수입니다. " + count);
            } else {
                alert("홀수입니다. " + count);
            }
        }
    </script>
</head>
<body>
<div class="mybtn" onclick="hey()">
    <p>버튼</p>
</div>
</body>
</html>

 

1. JQuery 시작

jQuery란? HTML 요소를 편리하게 조작하기위한 자바스크립트 라이브러리

jQuery CDN : https://releases.jquery.com/  -> head 태그 안에 복사 붙여 넣기

 

요소 가져오기 : $('#id')
요소에 html 붙여 넣기 : $('#id').append(`<div>...</div>`)

input 태그에 값을 넣기 : $('#id').val('입력값넣기')
input 태그에 값을 가져오기 : $('#id').val()

요소 숨기기 : $('#id').hide()
요소 보이기 : $('#id').show()

 

2. 자바스크립트 문자열 - 백틱

자바스크립트의 문자열에는 세가지 형식이 있으며 인코딩 방식에 관계 없이 UTF-16 형식을 따릅니다. 

let single = '작은따옴표';
let double = "큰따옴표";
let backticks = `백틱`;

작은 따옴표와 큰 따옴표에는 기능적 차이가 없지만 백틱에는 표현식 ${...}로 감싸줌으로서 문자열 중간에 쉽게 변수를 삽입할 수 있습니다. 이러한 방식을 템플릿 리터럴(template literal)이라고 합니다. 

백틱은 템플릿 리터럴 말고도 여러 줄의 문자열을 만들 때에도 사용할 수 있습니다. 

function sum(a, b) {
	return a + b;
    }
alert(`1 + 2 = ${sum(1, 2)}.`);

let guestList = `손님 : 
 * Jnon
  * Pete
   * Mary
   `;
   
alert(guestList);

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴로서 표현식, 문자식, 여러줄 문자열, 문자열 형식화, 문자열 태깅 등의 기능을 제공합니다. ES2015의 사양명세서에는 template strings라고 불렸습니다. 템플릿 리터럴은 런타임 시점에서 문자열로 처리/ 변환됩니다. 프론트엔드에서 HTML 데이터와 결합해 DOM을 다시 그릴 때 빈번히 사용됩니다. 

let title = "타이타닉";
let temp_html = `<div id="movie_title">${title}</div>`;
$('#wrap').append(temp_html);

 

템플릿 리터럴에서 발전된 형태로 Tagged Template Literals가 있습니다. 

function transform(staticData, ...dynamicData) {
  console.log(staticData); // ["Hi, ", " and I am ", "."]
  console.log(dynamicData); // ["Mygumi", 20]
}

transform`Hi, ${userName} and I am ${age}.`;

함수 이름 뒤 백틱의 정적인 데이터와 동적인 데이터가 구분되어 파라미터에 저장이 됩니다. 정적인 데이터인 "Hi, " 와 " and I am "의 경우에 동적인 데이터( ${...} )에의해 구분되어 배열의 형태로 파라미터에 저장됩니다. 그 뒤에 오는 여러 인자들은 순서대로 동적인 데이터를 받습니다. 

참고 : 자바스크립트에서 length는 함수가 아닌 프로퍼티 입니다. 

참고 : https://mygumi.tistory.com/395  

 

 

3. JQuery 활용하기-1

JQuery를 활용하여 특정 컨텐츠가 사라지거나 나타나는 동작을 구현해 보았습니다. 

CSS에서 주의해서 볼 것은 .wrap 클래스입니다. display가 none 의 경우 visibility : hidden과 다르게 해당 레이어가 차지하는 공간까지 모두 숨깁니다. 반면 visibility hidden의 경우 width와 height가 설정된 경우 그 만큼의 공간은 남아 있습니다. 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.3.js"
            integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
    <title>Show and Hide</title>
    <style>
        .btn {
            display: flex;
            flex-direction: row;
        }

        .btn > div {
            width: 100px;
            height: 50px;
            background-color: black;
            color: white;
            margin: 20px;

            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;

        }

        .wrap {
            display: none;
        }

        .content {
            width: 200px;
            height: 100px;

            background-color: green;
            margin: 20px;
            color: white;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
        }
    </style>
    <script>
        function show_box() {
            $('.wrap').show();
        }

        function hide_box() {
            $('.wrap').hide();
        }
    </script>
</head>
<body>
<div class="btn">
    <div onclick="show_box()">
        show
    </div>
    <div onclick="hide_box()">
        hide
    </div>
</div>
<div class="wrap">
    <div class="content" id="box">Something to hide or show</div>
</div>
</body>
</html>

 

4. JQuery 활용하기 - 2 

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

    <script>
        function q1() {
            let str = $('#input-q1').val();
            if (str.length == 0) {
                alert('입력하세요!');
            } else {
                alert(`${str}`);
            }
        }

        function q2() {
            let str = $('#input-q2').val();
            if (str.includes('@')) {
                alert(`${str.split('@')[1].split('.')[0]}`);
            } else {
                alert('이메일이 아닙니다.')
            }
        }

        function q3() {
            let str = $('#input-q3').val();
            let temp_html = `<li>${str}</li>`;
            $('#names-q3').append(temp_html);
        }

        function q3_remove() {
            $('#names-q3').empty();
        }
    </script>
</head>

<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>

<div class="question-box">
    <h2>1. 빈칸 체크 함수 만들기</h2>
    <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
    <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
    <input id="input-q1" type="text"/>
    <button onclick="q1()">클릭</button>
</div>
<hr/>
<div class="question-box">
    <h2>2. 이메일 판별 함수 만들기</h2>
    <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
    <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
    <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
    <input id="input-q2" type="text"/>
    <button onclick="q2()">클릭</button>
</div>
<hr/>
<div class="question-box">
    <h2>3. HTML 붙이기/지우기 연습</h2>
    <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
    <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
    <input id="input-q3" type="text" placeholder="여기에 이름을 입력"/>
    <button onclick="q3()">이름 붙이기</button>
    <button onclick="q3_remove()">다지우기</button>
    <ul id="names-q3">
        <li>세종대왕</li>
        <li>임꺽정</li>
    </ul>
</div>
</body>
</html>