웹 개발의 기초 2
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>