1일차

https://cyannara.github.io/

웹개발언어

  • html : 내용
  • css : 모양
  • js : 동적 제어
    1. DOM : 이벤트, 태그 추가/삭제/변경, 스타일 변경
    2. AJAX(비동기통신) : 페이지 이동없이 서버로부터 데이터(string, xml, json)만 받아서 페이지 일부분만 교체하는 기술. XmlHttpRequest 객체와 fetch() 이용
    3. validation : 입력값 검증
    4. BOM : 브라우저객체 (window , location, history, document, screen, navigator)
  • 자바스크립트 프레임워크
    1. front : react, vue, angular
    2. back : node.js
  • jquery
    1. 크로스 브라우징
    2. js 라이브러리
    3. ajax함수 : $.ajax(), $.post() 등
    4. jquery를 사용 안하는 추세 : 부트스트랩 4(jquery 필수) -> 5(순수 js)

DOM

  • 태그추가
  • 태그삭제
  • 태그내용변경
  • 스타일변경

이벤트

  • 이벤트 전파(propagation) / 중지
  • 이벤트 지정
  • event객체
    • Event(target), KeyboardEvent(keyCode), MouseEvent(clientX, clientY)
  • 이벤트타겟, 리스너(핸들러)
  • 그룹이벤트(이벤트위임)

실습

  1. 덧셈 계산기
  2. accordion

과제

  1. mdn사이트 guess number
  2. carRace 게임 : 2마리 -> 랜덤으로 이동 -> 결승 통과하면 승부를 출력
  3. 라이브러리와 프레임워크 차이점

2일차

github 연동하기

  1. git
  2. egit
  3. vscode git
  4. branch

ajax

  • XmlHttpRequest
  • fetch()
  • 전송방식과 request 파라미터 형식
request method 형식
query String get ?n1=v1&n2=v2
form data post ?n1=v1&n2=v2
payload post, put, delete {“n1”:”v1”,”n2”:v2}

RESTful

기존 method rest method
/todoSelset : get /todo : get
/todoSelset?id=1 : get /todo/1 : get
/todoInsert : post /todo : pos
/todoUpdate : post /todo : put
/todoDelete?no=1: get /todo/1 : delete

실습

  1. json
  2. todo list 실습
  3. pet 실습 및 과제

과제

  1. REST / RESTful / REST api
  2. 비동기(async)란
  3. CORS

3일차

jquery란

  • 선택자.함수() : $(“#id”).show()

jQyery 특징

1.js dom 예제 → jquery 변환 :

//js함수와 jq함수 구분할 것
//js객체    --->  jQuery 객체   : $(   )로 감싸면 됨		
$(document.body)         
$( $("td").get(i) ).html()

//js객체    <---  jQuery 객체   :  get() , []
$("td").get(i).innerHTML
$("td")[i]

//for
for(i=0; i<scores.length; i++) {
 $(scores[i] ).html()
 $(scores.get(i) ).html()
 scores[i].innerHTML
}

for(score of scores) {
 score.js함수또는속성
 $(score).제이쿼리함수
}

$.each(scores, function(i, obj){    })
scores.each(funcion(i, obj){})

2.하나의 함수로 setter/getter 기능이 됨 | 구분 | getter | setter | | :——————- | :———————————- | :———————————— | | 태그내용조회/변경 | content = $태그.html() | $태그.html(“내용변경”) | | 스타일속성조회/변경 | color = $태그.css(“backgroundColor”)| $태그.css(“backgroundColor”,”yellow”) | | 텍스트필드조회/변경 | value = $(“#txt”).val() | $(“#txt”).val(“10”) | | 이벤트선언/호출 | $태그.click(function(){}) | $태그.click(); |

3.이벤트, 그룹이벤트 4.data()함수 5.js fetch() -> jquery ajax 함수로 변환 6.users(ajax)예제

4일차

javascript 심화학습

  • function
    • 함수파라미터
    • spread operator
    • prootype
    • 변수의 scope
    • 클로져(closure)
    • 화살표함수
    • 커링함수
  • class
  • array
  • promise
  • async/await