피곤한 월요일 😪
disabled는 text 입력창을 비활성화함
<input type="text" value="입력하세요!" disabled="disabled">removeAttr() : 속성 값을 삭제
remove() : 자기 자신과 자신의 후손을 모두 삭제
empty() : 자기 자신을 삭제하지 않고 후손만 삭제
function my_func() {
$('[type=text]').val('소리없는 아우성!!'))
$('[type=text]').attr('value', '변경변경!')
$('[type=text]').attr('disabled', 'disabled')
$('[type=text]').removeAttr('disabled') //disabled 속성 삭제
$('ul').remove()
$('ul').empty()
}새로운 Element 만들 때는 여는·닫는 Tag 모두 써줘야 함. text() 메서드로 안에 값 넣어주기
img 같이 닫는 Tag 없을 경우, '<~ />'로 Tag 만들고 attr() 메서드로 출처와 이미지 파일 연동해주기
Element를 만들기만 하면 화면 상에 보이지 않기 때문에, 추가 메서드를 사용하여 표시함
append(), prepend(), before(), after()
function my_func() {
// 새로운 Element 만들기. Selector를 사용하지 않음
$('<li></li>').text('신사임당')
$('<img />').attr('src', 'img/bear.jpg')
// 새롭게 만든 Element 넣기. append(), prepend(), after(), before()
let li = $('<li></li>').text('신사임당') // 변수에 넣고
$('ui').append(li) // 맨 마지막 자식으로 넣음
$('ul').prepend(li) // 맨 처음 자식으로 넣음
$('ul > li:last').before(li) // 형제로 추가하고 바로 앞에 넣음
$('ul > li:eq(1)').after(li) // 형제로 추가하고 바로 뒤에 넣음
}Event : 사용자가 하는 모든 행위. ex) click, dblclick(double click), keypress(키보드 누름), mousemove, mouseenter(영역 내로 마우스가 진입), mouseleave(영역 내에서 마우스가 이탈), ready
Event Source : 현재 Event가 발생한 객체. ex) HTML Element
Event Handler : Event가 발생됐을 때 특정 처리를 하는 JavaScript 함수. ex) my_func
Event Attribute : HTML의 속성으로 Event 처리를 지정하기 위해서 사용, on+Event. ex) onclink, onchange
Delegation Model : HTML Element에 Event 속성을 이용해서 Event가 발생됐을 때 수행되는 Handler를 지정, Event Source가 직접 Event를 처리하지 않음
on() : Event 처리를 등록
function my_func() {
$('ul > li:eq(1)').on('click', function () {
alert($(this).text()) // jQuery Event 처리 방식
})
}Event Handler를 지정하지 않고 Event Source가 직접 Event를 처리하게 만들려면 jQuery Event 처리 방식을 사용하면 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/jQuery08.js"></script>
</head>
<body>
<ul>
<li>아이유</li>
<li>김연아</li>
<li>홍길동</li>
<li>신사임당</li>
</ul>
<!--<input type="button" value="클릭클릭" onclick="my_func()">-->
</body>
</html>jQuery Event 처리 방식
$(document).on('ready', )= $()
$(document).on('ready', function () { // document 화면이 준비(ready)되면 (Event Handler 없이)
$('ul > li').each(function (idx, item) { // jQuery Event 처리 방식을 실행
// 해당 영역 내에 마우스가 진입하면 mouseenter, 밖으로 나가면 mouseleave
$(item).on('mouseenter', function () {
$(this).css('color', 'blue')
})
$(item).on('mouseleave', function () {
$(this).css('color', 'black')
})
})
})
// 위 코드를 축약형태로 사용
$(function () { // $() = document ready
$('ul > li').each(function (idx, item) {
// 해당 영역 내에 마우스가 진입하면 mouseenter, 밖으로 나가면 mouseleave
$(item).on('mouseenter', function () {
$(this).css('color', 'blue')
})
$(item).on('mouseleave', function () {
$(this).css('color', 'black')
})
})
})
Ajax(Asynchronous JavaScript and XML) : 비동기 JavaScript 통신 방법. 비동기적인 웹 애플리케이션의 제작을 위해 HTML, CSS, DOM, JS, XML, XSLT, XMLHttpRequest을 이용하는 웹 개발 기법
CGI(Common Gateway Interface) : 웹 서버 상(Dynamic Web)에서 사용자 프로그램을 동작시키기 위한 조합. 웹 서버와 외부 프로그램 사이에서 정보를 주고받는 방법이나 규약들
WAS(Web Application Server) : 웹 애플리케이션과 서버 환경을 만들어 동작시키는 기능을 제공하는 소프트웨어 프레임워크
Round-Trip Application : 브라우저는 첫 HTML 페이지를 서버에 요청하고 수신하고 링크 클릭이나 폼 제출 등 사용자의 행위가 일어나면, 브라우저는 다시 완전히 새로운 HTML 콘텐츠를 요청하고 수신함
Single-Page Application : 애플리케이션을 초기화하는 브라우저 작업은 처음 한 번만 수행되며, 애플리케이션이 실행된 후에는 데이터나 콘텐츠에 대한 요청과 사용자 행위에 대한 응답이 모두 백그라운드에서 수행함. 사용자의 행위는 HTML의 작은 조각이나 데이터 집합에 삽입할 일부 데이터만을 위한 HTTP 요청을 발생시킴
URL(request) : 기본 URL + 요청 parameter
Query String : ?변수=값&변수=값&변수=값
영화진흥위원회 일별 박스오피스 API 서비스 응답 예시↓
http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20120101
function my_func() {
$.ajax({ // .ajax() 메서드로 AJAX 호출
async: true, // 동기 or 비동기 방식인지 명시
url: 'http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json', // 기본 URL
data: { // 입력 Parameter. Query String 쓰지 않음
key: '67c59b547b84d9de7658ebb921457f4c',
targetDt: '20220206'},
method: 'GET', // 호출 방식
timeout: 3000, // response를 받을 시간 제한 설정. 밀리세컨즈 단위 1/1000초
dataType: 'json', // 결과로 전달되는 JSON은 처리하기 힘든 문자열이므로, JS 객체로 변환함
success: function(result) { // 위의 요청이 성공하면 아래의 함수가 호출됨
alert('성공성공!')
console.log(result)
},
error: function() { // 위의 요청이 실패하면 아래의 함수가 호출됨
alert('뭔가 이상해요!')
}
});
}
<서로 다른 process 간에 편하게 data를 주고받기 위한 방식들>
- CSV(comma separated value) : redundant(부가적인) data가 적어 대용량 data 처리에 적합하나, data parser(구분자)를 직접 구현해야 하고 data 구조를 표현하거나 유지 보수하기 어려움
- XML(Extended Markup Language) : data parser가 이미 존재하므로 유지 보수하기 좋음, data 구조화 가능하나, 부가적인 data가 커짐
- JSON(JavaScript Object Notation) : 유지 보수하기 좋음, data 구조화 가능, XML에 비해 data size가 적음
| 1. 1/17 월 | 2. 1/18 화 | 3. 1/19 수 | 4. 1/20 목 | 5. 1/21 금 |
| 취업 특강 | 파이썬 환경 설정 (파이참, 아나콘다, 주피터 노트북) |
파이썬 데이터 타입 (list, tuple) |
파이썬 데이터 타입 (range, string, dictionary, set, bool) |
파이썬 사용자 정의 함수, 객체지향, 사용자 정의 클래스 |
| 6. 1/24 월 | 7. 1/25 화 | 8. 1/26 수 | 9. 1/27 목 | 10. 1/28 금 |
| 파이썬 사용자 정의 클래스, 사용자 정의 모듈 |
DB(MySQL) DBMS, MySQL 환경 설정, DB/테이블 생성, DB 입력·활용, Index |
DB(MySQL) View, 백업과 복원, DB 모델링, 관계(PK, FK), DML(CRUD), 데이터 타입 |
DB(MySQL) DML(CRUD), WHERE 조건, 패턴 매칭, SubQuery, 정렬, 그룹핑, 집계 함수, 트랜잭션(ACID 특성) |
DB(MySQL) JOIN, UNION, NOT IN, WEB |
| 11. 2/3 목 | 12. 2/4 금 | 13. 2/7 월 | 14. 2/8 화 | 15. 2/9 수 |
| WEB WebStorm 환경 설정, HTML, CSS, JavaScript, jQuery CDN |
WEB jQuery 문법, Selector, Method |
WEB jQuery Method, Event, AJAX |
GitHub 특강 | GitHub 특강 |
* Delegation Model, jQuery Event 처리 방식, Ajax 이해하기!
