반응형

*자바스크립트 엔진이란?

우리의 코드를 전달받는 JS엔지는 [console]을 찍거나 [화면]을 그리거나 [네트워크 통신]하는 기능이 내부에 없다.

alert함수는 브라우저에서 제공하는 JS엔진의 날개 API(= Application Programming Interface) JS엔진 자체에 alert함수가 있는 것이 아니다.

1. 자바스크립트 클로저? 간단히 핵심만 파악하기

https://youtu.be/MbYShFxp-j0

2. 자바스크립트 대표적 클로저 실수를 let으로 해결?

https://youtu.be/RZ3gXcI1MZY

3. 코좀봐코 - 화살표 함수에서 간단히 객체 리턴할 때 왜 괄호()가 필요한 거죠?

https://youtu.be/sTMeRamEwwk

4. 자바스크립트 예외처리 1/4 - 예외란 무엇인가? throw?

https://youtu.be/EBmIHrLTVdg

5. 자바스크립트 예외처리 2/4 - try catch, Error 객체

https://youtu.be/wf6AlMj7TFA

6. 자바스크립트 예외처리 3/4 - promise의 catch함수

https://youtu.be/RRc_iVHdDKk

7. 자바스크립트 예외처리 4/4 - async/await의 예외

https://youtu.be/kngOWhzPHzg

8. 자바스크립트 promise? 나도 써보자, 기본 개념부터~

https://youtu.be/CA5EDD4Hjz4?list=PLuBMRNcyzsWxcnDdAmJWyWYXuExyP9aS1

9. ES6 화살표 함수에 없는 3가지?

https://youtu.be/4zjKltnIBug?list=PLuBMRNcyzsWxcnDdAmJWyWYXuExyP9aS1

10. 자바스크립트 개념잡기: 콜백 함수의 동기적 실행과 비동기적 실행

https://youtu.be/j0Viy3v97gY?list=PLuBMRNcyzsWxcnDdAmJWyWYXuExyP9aS1

11. 자바스크립트 타이머는 지각쟁이? 그 이유는 싱글 콜 스택?

https://youtu.be/iNH4UQxZexs?list=PLuBMRNcyzsWxcnDdAmJWyWYXuExyP9aS1

12. 자바스크립트 this? 간단히 핵심만 파악하기

https://youtu.be/PAr92molMHU?list=PLuBMRNcyzsWxcnDdAmJWyWYXuExyP9aS1 

---------------------------------------------------------------------------------------------------

var:  함수 scope
let:  중괄호 scope
scope: 변수의 값을 볼 때 참조하는 곳

*******************
main.js
*******************

var btns = [
  documents.getElementById('btn0'),
  documents.getElementById('btn1'),
  documents.getElementById('btn2')
];

function setClick() {
  for (var i = 0 ; i < 3; i++) {
    btns[i].onclick = function() {
console.log(i);
    }
  }
}

setClick();

-----------------------------------------------------------------

var btns = [
  documents.getElementById('btn0'),
  documents.getElementById('btn1'),
  documents.getElementById('btn2')
];

function setClick() {
  for (let i = 0 ; i < 3; i++) {
    btns[i].onclick = function() {
console.log(i);
    }
  }
}

setClick();

반응형
반응형
반응형
반응형

프론트엔드 공부 순서, 높은 연봉 받는 프론트엔드 개발자 되기 | 해외 개발자 선배가 알려드려요 ⭐️ (웹개발 공부 순서)

https://youtu.be/NeEaTeYcFhE?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y 

클론코딩 포트폴리오 반응형 웹사이트 따라 만들기 | HTML, CSS, JavaScript 프론트엔드 강의(드림코딩 아카데미 오픈)

https://youtu.be/v2Aw9f-MK5s?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

프론트엔드 강의, 프론트엔드 개발자가 되고 싶다면? 웹개발 입문자편 강의를 시작합다 ⭐️ (HTML, CSS, Javascript + 실전 프로젝트)

https://youtu.be/HBGN-jZDUrE?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

코딩을 빨리 배우는 법 (온라인 강의로 배울때 200% 효과적으로 배우기)

https://youtu.be/b79_XuSBqPY?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

HTML 기초, React 할때 꼭 필요한 팁! 쉽다고 무시하면 안돼요 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

https://youtu.be/i0FN-OwJ7QI?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

HTML 태그 완성, 웹 포트폴리오 만들기 전에 꼭 보세요 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

https://youtu.be/OoA70D2TE0A?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

CSS 셀렉터, 기초 이론 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

https://youtu.be/gGebK7lWnCk?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

CSS 레이아웃 정리 display, position 완성 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

https://youtu.be/jWh3IbgMUPI?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

https://youtu.be/7neASrWEFEM?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

비쥬얼 스튜디오 코드 설치 및 웹개발을 위한 필수 익스텐션 10개 추천 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

https://youtu.be/bS9yTI2fC0w?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

https://youtu.be/m7wsrVQsVjI?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

https://youtu.be/8-uJ_4136uI?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

프론트엔드 공부시 유용한 노트 작성법 및 비쥬얼 스튜디오 코드 코멘트 색상 변경 방법

https://youtu.be/2UaKfAz-eEI?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

https://youtu.be/X91jsJyZofw?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

https://youtu.be/67stn7Pu7s4?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

프론트엔드 개발자라면 필수로 알아야 하는 브라우저 101 필수 개념과 게임 프로젝트 

https://youtu.be/x2T2rDM-APM?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

개발자 취업을 위한 포트폴리오 만들기 | 취업에 성공하는 포트폴리오 관리법, 프론트엔드 공부 방법 https://youtu.be/KJUdqPDAtTI?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

프론트엔드 공부 방법 포트폴리오 만들면서 실력을 늘려가기 | 개발자로 취업에 성공하는 포트폴리오 관리법 + Javascript 공부법

https://youtu.be/3xRpjLZUBeo?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y 


비전공자, 프론트엔드 공부할때 자바를 배워야 할까? (자바와 자바스크립트 차이점, 자바가 프론트엔드 개발자에게 필수 언어일까?) [엘리와 고민상담]

https://youtu.be/LYQvmDuQAMI?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

자바스크립트를 이용한 미니게임 만들기 & 코드 리뷰, 코딩 팁 (여러분들의 코드를 드디어 리뷰해요 🙌)

https://youtu.be/6oGctyyeZ6E?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

프론트엔드 필수 반응형 CSS 단위 총정리 (EM과 REM) | Responsive CSS Units

https://youtu.be/7Z3t1OWOpHo?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

프론트엔드 필수 반응형 CSS 단위 em 과 rem | 예제 프로젝트를 통해 정리 하세요 

https://youtu.be/xWMKz9NCD0k?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

비쥬얼 스튜디오 코드 필수 단축키 정리 (Visual Studio Code 꿀템🍯🐝 )

https://youtu.be/EVxCdenPbFs?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

타입스크립트 + 객체지향 프로그래밍 강의 (두마리 토끼를 잡아요 🐰🐰)

https://youtu.be/ZZib1YpxNdg?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

API란? 개념 정리와 포트폴리오에 유용한 대박 사이트 공유 🙌

https://youtu.be/ogT267HvNuQ?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

PWA (Progressive Web App) 개념과 따라만들기 📲

https://youtu.be/FEBkne7Nyu4?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

자바스크립트 프로처럼 쓰는 팁 ✨ (+ 보너스 인터뷰 문제 하나!)

https://youtu.be/BUAhpB3FmS4?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

HTML 태그들, 헷갈리는거 정리해 보았다 🥳 (시맨틱 태그, 중요한 태그들 모음)

https://youtu.be/T7h8O7dpJIg?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

웹사이트, 모바일 앱 디자인 무료 툴 5가지 | 사이드 프로젝트 꿀템

https://youtu.be/0Pwxh1XL-Fk?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

웹개발 툴, 그것을 알려드림 (숨겨진 유용한 기능들🍯🐝)

https://youtu.be/q_rBbcTiSC4?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

 

반응형
반응형

자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)

https://youtu.be/wcsVjmHrUQg?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2 

자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)

https://youtu.be/tJieVCgGzhs?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2

자바스크립트 3. 데이터타입, data types, let vs var, hoisting | 프론트엔드 개발자 입문편 (JavaScript ES5+)

https://youtu.be/OCCpGh4ujb8?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2 

 

반응형
반응형


자바스크립트 중급 강좌 #1 - 변수, 호이스팅, TDZ(Temporal Dead Zone)

1. var : 함수 스코프(function-scoped)

2. let, const: 블록 스코프(block-scoped)

- 함수, if문, for문, while문, try/cathc문

https://youtu.be/ocGc-AmWSnQ?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4


자바스크립트 중급 강좌 #2 - 생성자 함수

https://youtu.be/8hrSkOihmBI?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #3 - 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)

https://youtu.be/6NZpyA64ZUU?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #4 - 심볼(Symbol)

https://youtu.be/E9uCNn6BaGQ?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #5 - 숫자, 수학 method (Number, Math)

https://youtu.be/ZI6TT93wggA?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #6 - 문자열 메소드(String methods)

https://youtu.be/G360D6lqrfo?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #7 - 배열 메소드1(Array methods)

https://youtu.be/pJzO6O-aWew?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #8 - 배열 메소드2 (sort, reduce)

https://youtu.be/RW25tEAMC9w?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #9 구조 분해 할당 (Destructuring assignment)

https://youtu.be/lV7ulA7R5Nk?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #10 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax)

https://youtu.be/lekNM8ldxno?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #11 클로저(Closure) 5분만에 이해하기

https://youtu.be/tpl2oXQkGZs?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #12 setTimeout / setInterval

https://youtu.be/nwk_aNbFEEc?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #13 call, apply, bind

https://youtu.be/KfuyXQLFNW4?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #14 상속, 프로토타입(Prototype)

https://youtu.be/ddJcDZHBRm0?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #15 클래스(Class)

https://youtu.be/OpvtD7ELMQo?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #16 프로미스(Promise)

https://youtu.be/3Ao3OroqQLQ?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #17 async, await

https://youtu.be/Uh8u20MD978?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

자바스크립트 중급 강좌 #18 Generator

https://youtu.be/qi24UqyJLgs?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4

ES2021 자바스크립트에 추가된 새로운 기능들을 알아보자!

https://youtu.be/CvKSR94D0QE?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4 

 

반응형
반응형

자바스크립트 기초 강좌 #1 - 변수

https://youtu.be/P0FY8k916e0?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #2 - 자료형

https://youtu.be/NrVs7ujs6xI?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI 

자바스크립트 기초 강좌 #3 - alert, prompt, confirm

https://youtu.be/4YK78dT4UUU?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #4 - 형변환

https://youtu.be/yib1zeYEQkQ?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #5 - 기본 연산자

https://youtu.be/51vNZFKZ_L8?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #6 - 비교 연산자, 조건문 (if, else)

https://youtu.be/ZErbVGpMSgg?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #7 - 논리 연산자 (AND, OR, NOT)

https://youtu.be/-Vn00BjS_5U?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #8 - 반복문(for, while, do while)

https://youtu.be/b1tZWuLAcQU?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #9 - switch문

https://youtu.be/9ggW0M7zNwI?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #10 - 함수(function)의 기초

https://youtu.be/HQGkiD-dXFI?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #11 - 함수 표현식, 화살표 함수(arrow function)

https://youtu.be/Zwaxqf1gsTg?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #12 - 객체(Object)

https://youtu.be/DuXA1t6hl3U?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #13 - 객체(Object) - method, this

https://youtu.be/ZXQA4gRHqe0?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #14 - 배열(Array)

https://youtu.be/z2d3cHX1eZg?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

자바스크립트 기초 강좌 #15 - 마치며

https://youtu.be/m2JKRp9l8aM?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI
 

 

반응형
반응형

자바스크립트 기초 강좌 : 100분 완성

https://www.youtube.com/watch?v=KF6t61yuPCY

 

반응형
반응형
반응형
반응형

Javascript 공부는 'Head First jQuery'로 시작해보는 것이 어떨지.. 생각해봅니다.

읽어 본 결과, 정말로 좋은 것 같습니다. Javascript 공부하기 전에 읽어보고 다른 책을 본다면 많은 도움이 될 듯 합니다.

아래의 내용은 저도 잘 못 하지만, 제가 모르는 책의 내용을 정리해보았습니다.

기본적인 내용입니다. 학생 혹은 Junior 개발자분들께서 한 번 읽어 보시면 좋을 듯 합니다.

-----------------------------------------------------------------------------------------------------

*window 객체의 onblur, onfocus 이벤트 핸들러를 이용하면 사용자가 브라우저를 어떻게 조작했는지 알 수 있어서 매우 편리하다.
*자바스크립트 windows객체의 onblur, onfocus 이벤트 핸들러를 jQuery의 .blur(), .focus() 메서드와 혼동하지 말라.
*jQuery의 .blur(), .focus() 메서드는 HTML 폼 필드를 비롯한 HTML 요소에 쓰라고 만든 거지 window 객체에 쓰라고 만든게 아니다.

*********************************************************************
window객체의 속성, 이벤트 핸들러, 메서드를 설명과 연결
*********************************************************************

window.name : 창의 이름에 접근할 수 있는 window객체의 속성
window.history : window객체의 속성이고 현재 창에서 열었던 URL을 저장하고 있음
window.document : window객체의 속성이고 현재 문서의 내용을 가리킴
window.onfocus : 클릭이나 키보드 입력, 기타 사용자가 입력하는 행위를 감지함
window.setTimeout() : window객체의 메서드이고 함수나 문장을 실행하기 전에 일정 시간 기다리도록 함
window.clearTimeout() : window객체의 메서드이고 기다리도록 예약한 타이머를 취소할 때 사용
window.setInterval() : window객체의 메서드이고 함수나 문장을 반복 실행하는 사이에 일정 시간 기다리게 함
window.clearInterval() : window객체의 메서드이고 반복 작업 사이에 기다리도록 만든 타이머를 취소함
window.onblur : window객체의 속성이고 현재 창이 포커스를 잃었음을 감지함

*window객체의 onfocus, onblur 이벤트 핸들러를 통해 현재 창이 포커스를 받거나 잃는 것을 감지할 수 있음

window.onfocus를 통해 창이 포커스를 받을 때를 알 수 있고 window.onblur를 통해 창이 포커스를 잃을 때를 알 수 있다.
window객체에는 사용자가 브라우저에서 무슨 일을 하고 있는지 알 수 있는 정보가 아주 많고 그런 정보에 따라 커스텀 함수를 실행항 수 있다.

window.onblur = blurResponse;
function blurResponse() {
}

window.onfocus = focusResponse;
function focusResponse() {
}


*******************************************************************************************
자바스크립트 => 시간에 따라 함수를 호출하는 타이머 메서드
*******************************************************************************************

setTimeout : 함수를 실행하기 전에 일정 시간 기다리게 하려면 저를 사용하세요.

setTimeout(myFunction, 4000);
myFunction : 타이머가 끝나면 실행할 함수
4000 : 타이머시간(밀리초)

setInterval : 나는 함수가 일정 시간마다 계속 실행되게 할 수 있어요
setInterval(repeatMe, 1000);
repeatMe : 일정 시간마다 실행할 함수
1000 : 함수 사이의 대기 시간(밀리초)

*******************************************************************************************
jQuery => 시간에 따라 함수를 호출하는 타이머 메서드
*******************************************************************************************

delay : 나는 내 뒤에 체인으로 연결된 메서드를 기다리게 만들 있어요

slideDown().delay(5000).slideUp();
slideDown : 이런 체인을 jQuery에서는 애니메이션 큐(Queue)라고 한다.
delay(5000): .delay(5000)메서드는 .slideUp()메서드와 .slideDown()메서드 사이에 5초를 기다리게 만든다.

*모든 브라우저가 window객체를 지원하나요?
=> 최근 브라우저는 모두 window객체를 지원합니다. 브라우저의 탭마다 window객체가 있고 각 window객체에는 해당 탭에 불러들인 웹 페이지를 나타내는 document 객체가 있다.

************************
window객체
************************
window객체는 자바스크립트의 최상위 객체이다.
window객체의 속성과 이벤트 핸들러, 메서드를 사용해서 브라우저 이벤트를 감지하고 대응할 수 있다.
창이 포커스를 받으면 onfocus 이벤트 핸들러가 동작합니다.
창이 포커스를 잃으면 onblur 이벤트 핸들러가 동작합니다.


************************
Ajax
************************
Ajax에 대해 들을 때마다 XMLHttpRequest 객체라는 걸 사용해야 한다고 들었는데, 맞는나요?
=> 맞는 얘기지만, jQuery를 사용할 때는 그렇지 않습니다. 웹 개발자는 그 객체에 대해 알 필요가 없어요. .ajax() 메서드를 사용하면 jQuery가 XMLHttpRequest 객체에 관한 세부사항을 다 처리합니다.
브라우저마다 Ajax 요청을 조금씩 다르게 처리해야 하는데, 이 작업도 jQuery가 방문자의 브라우저에 맞게 처리합니다.

서버에서 에러를 반환하거나 응답하지 않을 때는 어쩌죠? 계속 기다려야 하나요?
=> 그렇지 않아요. Ajax 요청을 보낼 때 매개변수를 사용해서 쵣 얼마나 기다릴지 정할 수 있습니다. 요청에 대해 성공적인 응답을 받았을 때 success 이벤트 핸들어가 실행되는 것과 마찬가지로 error, complete 같은
이벤트 핸들러가 있어서 여러 상황에 대응할 수 있습니다. 이런 이벤트 핸들러는 매 Ajax 요청마다 개별적으로 설정할 수도 있고 모든 Ajax 요청에 공통으로 설정할 수도 있습니다.

Ajax를 사용해서 페이지에 불러올 수 있는게 XML 외에 어떤 것이 있나요?
=> jQuery를 사용하면 모든 종류의 정보를 페이지에 불러올 수 있습니다. 다른 HTML파일, 자바스크립트 파일, 텍스트, JSON(Javascript Object Notatoin) 객체도 불러올 수 있습니다.

jQuery에 Ajax 단축 메서드가 또 있나요?
=> jQuery에는 Ajax에 대한 단축 메서드가 전부 다섯 가지 있습니다. get, getJSON, getScript, post, load 메서드입니다. 앞의 네 가지는 jQuery 객체를 이용해서 호출하지만 .load() 메서드는 어떤 요소에서든 호출할 수 있고
반환받는 데이터는 해당 요소 안에 들어갑니다.

언제 .load() 메서드를 사용하고 언제 .ajax() 메서들 사용하죠?
=> .load() 메서드는 getTimeAjax 함수에서 했던 것처럼 특정 데이터를 특정 요소 안으로 불러올 때 사용합니다. .ajax()메서드는 훨씬 더 복잡하고 많은 매개변수를 받을 수 있고 훨씬 더 다양하게 이용할 수 있습니다.
.ajax() 메서드를 이용해서 다양한 정보를 가져올 수도 있고 서버에 데이터를 보내서 처리할 수도 있습니다.


************************
Ajax
************************
=> 여러 기술의 조합입니다. Ajax를 사용하면 페이지 전체를 새로고침하지 않고도 필요한 부분만 업데이트할 수 있습니다.
데이터를 서버에 보내서 처리하게 한 다음에 돌려받는 특별한 요청을 생성했습니다.
jQuery에서는 .ajax()메서드를 통해 Ajax기능을 구현했습니다.

************************
XML
************************
데이터와 그 구조를 설명하는 데 쓰이는 엄격하지만 유연한 마크업 언어입니다.
정보를 저장하는 데도 쓸 수 있고 데이터를 전송할 때 형식을 맞추는 용도로도 쓸 수 있습니다.
RSS나 SOA/Web서비스, SVG같이 널리 쓰이는 웹 기술에 사용됩니다.

************************
ajax() 단축 메서드
************************
jQuery에는 ajax() 단축 메서드가 5개 있습니다. 이들 단축 메서드는 기본적으로 서로 다른 매개변수를 받게끔 설정되어 있긴 하지만 
결국 .ajax() 메서드를 호출한다는 점은 똑같습니다.
$.get
$.getJSON
$.getScript
$.post
$.load


----------------------------------
생활코딩 자바 웹 개발 과정
인프런 코드스쿼드 - 자바강의
----------------------------------


자바 웹 프로그래밍 Next Step

GDE

반응형
반응형


초보자를 위한 완벽정리, 프론트엔드 개발자 입문 : CSS, 완벽한 포트폴리오를 위한 지름길 , 너의 웹사이트가 못생겼다면 극건 CSS 탓


HTML에 CSS 입히기
1. 태그에 직접적으로 주는 방법
2. id를 이용하는 방법
3. class를 이용하는 방법 -> 가장 일반적인 방법

CSS
.text-red{
 color:red;
}

HTML
<div>This text color will b red</div>

CSS+HTML
<div class="text-red">This text color will be red </div>

replit.com => 온라인 코딩 툴

요소 안쪽에 공간은 padding, 바깥쪽 공간은 margin

www.w3schools.com/cssref/

 

CSS Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com:443

 

-----------------------------------------------------------------------------------------------------------------------------

(부트캠프 강사의 유료강의)코딩, 뭐부터 배울지 모르겠다면 여기부터 시작하면됨, 초보자를 위한 HTML강의, 바로 코딩 가능

반응형