코딩 공부 두번째

35051 단어 jqueryJavaScriptajaxJavaScript

js, jquery, ajax의 기초를 공부하고 json자료를 받아와 분석하는 법을 배웠다.

Javascript, jQuery, Ajax 공부

Javascript 복습

홀/짝 판단법

let count = 1;
function hey() {
if (count % 2 == 0) {
alert('짝');
} else {
alert('홀');
}
count += 1;
}

jQuery 기초

jQuery 란?

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리.

"jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜
둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)"

예시

Javascript

document.getElementById("element").style.display = "none";

jQuery

$('#element').hide();

jQuery 사용하기

jQuery시작하기-w3schools

head안에 작성 후 사용

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

자주 쓰이는 jQuery

1.input 박스의 값 가져오기

$('#post-url').val();

2.div 보이기 / 숨기기

// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();

3.css의 값 가져와보기 (display 속성을 예시로)

$('#post-box').hide();
$('#post-box').css('display');
$('#post-box').show();
$('#post-box').css('display');

4.태그 내 텍스트 입력하기

1) inputbox

$('#post-url').val('여기에 텍스트를 입력하면!');

2) 다른 것들 (예시는 버튼)

$('#btn-posting-box').text('포스팅 박스 닫기');

5.태그 내 html입력하기

<div id="cards-box" class="card-columns">
<div class="card">
<img class="card-img-top" src="img_url"
<div class="card-body">
<a href="https://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사 내용</p>
<p class="card-text comment">코멘트</p>
</div>
</div>
</div>

1) 버튼 넣기 (예시)

let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);

2) 카드 넣기

주의: 홑따옴표(')가 아닌 backtick()으로 감싸야 합니다.
숫자 1번 키 왼쪽의 버튼을 누르면 backtick()이 입력됩니다.
backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.

let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '기사 제목';
let desc = '기사의 요약 내용';
let comment = '코멘트';
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_html);

6.jQuery 연습

<!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() {
// 1. input-q1의 입력값을 가져온다.
let value = $('#input-q1').val();
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
if (value == '') {
// 3. alert('입력하세요!') 띄우기
alert('입력하세요!');
} else {
// 4. alert(입력값) 띄우기
alert(value);
}
}
function q2() {
// 1. input-q2 값을 가져온다.
let email = $('#input-q2').val();
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 찾아보자!)
if (email.includes('@')) {
// 3. [email protected] -> gmail 만 추출해서
// 4. alert(도메인 값);으로 띄우기
let domainWithDot = email.split('@')[1];
let onlyDomain = domainWithDot.split('.')[0];
alert(onlyDomain);
} else {
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
alert('이메일이 아닙니다.');
}
}
function q3() {
// 1. input-q3 값을 가져온다.
let newName = $('#input-q3').val();
if (newName == '') {
alert('이름을 입력하세요');
return;
}
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
let temp_html = `<li>${newName}</li>`;
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
$('#names-q3').append(temp_html);
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#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>

서버-클라이언트 이해하기

JSON이해하기

서울시 미세먼지 OpenAPI
미세먼지

JSON VIEW - 크롬 익스텐션
JSON View

"JSON은, Key:Value로 이루어짐. 자료형 Dictionary와 유사"

GET 요청 이해하기

  • GET → 통상적으로! 데이터 조회(Read)를 요청할 때
    예) 영화 목록 조회
  • POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
    예) 회원가입, 회원탈퇴, 비밀번호 수정

GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)

Ajax 기초

Ajax 기본 골격

$.ajax({
	type: "GET",
	url: "여기에URL을입력",
	data: {},
	success: function(response){
		console.log(response)
	}
})

미세먼지 값 찍어보기

$.ajax({
	type: "GET",
	url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
	data: {},
	success: function (response) {
		let mise_list = response["RealtimeCityAir"]["row"];
		for (let i = 0; i < mise_list.length; i++) {
			let mise = mise_list[i];
			let gu_name = mise["MSRSTE_NM"];
			let gu_mise = mise["IDEX_MVL"];
			console.log(gu_name, gu_mise);
		}
	},
});
확장 기능
MyBatis Log 플러그인이 SQL 문장을 표시할 수 없는 이유 확인

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage