반응형

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

우리의 코드를 전달받는 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

 

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

출판사 이지스퍼블리싱(이지스퍼블리싱 (easyspub.co.kr))에서 출판한 '한 권으로 끝내는 웹 기본 교과서' HTML+CSS+자바스크립트 웹 표준의 정석에 대한 무료 동영상 강의 입니다.

06-1 CSS의 기본

https://youtu.be/IBMvbL3G1yo?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

06-2 CSS의 기본

https://youtu.be/QC6e80wLrLU?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

07-1 텍스트를 표현하는 다양한 스타일

https://youtu.be/-1N3aJ2ExkA?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

07-2 텍스트를 표현하는 다양한 스타일

https://youtu.be/rJcYXvnWdoQ?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

08-1 레이아웃을 구성하는 CSS 박스 모델

https://youtu.be/N1splqbPYTo?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

08-2 레이아웃을 구성하는 CSS 박스 모델

https://youtu.be/tzVYfwA6cec?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is 

09-1 이미지와 그러데이션 효과로 배경 꾸미기

https://youtu.be/20T5syAEx9k?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

09-2 이미지와 그러데이션 효과로 배경 꾸미기

https://youtu.be/EtC6E6K6ibU?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

10 CSS 고급 선택자

https://youtu.be/EqePYz6ikDs?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

11-1 트랜지션과 애니메이션

https://youtu.be/STpqz5d9N3U?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

11-2 트랜지션과 애니메이션

https://youtu.be/mp_pUWesUOU?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

12-1 반응형 웹과 미디어 쿼리

https://youtu.be/tRVLuDxtrH8?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

12-2 반응형 웹과 미디어 쿼리

https://youtu.be/5B2sBqlAdYg?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is 

12-3 반응형 웹과 미디어 쿼리

https://youtu.be/dSdvumCRwKM?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

13 자바스크립트와 첫 만남

https://youtu.be/v1mwP4X9zEk?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

14-1 자바스크립트 기본 문법

https://youtu.be/vZu3xbw1-JA?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

14-2 자바스크립트 기본 문법

https://youtu.be/u9b1VjdSocQ?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

14-3 자바스크립트 기본 문법

https://youtu.be/Z3bQjfObI5Y?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

14-4 자바스크립트 기본 문법

https://youtu.be/TETbGBrzDxQ?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

15-1 함수와 이벤트

https://youtu.be/Nc1S_rwLekE?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

15-2 함수와 이벤트

https://youtu.be/G0dUJ9nUhn0?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

15-3 함수와 이벤트

https://youtu.be/iVcDf1Zkf-0?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

16-1 자바스크립트와 객체

https://youtu.be/7JQJxq03gbo?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

16-2 자바스크립트와 객체

https://youtu.be/yFE01Mev_i4?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

17-1 문서 객체 모델(DOM)

https://youtu.be/XgKc2mIRZ8c?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

17-2 문서 객체 모델(DOM)

https://youtu.be/j6LPaKWr2fw?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is

17-3 문서 객체 모델(DOM)

https://youtu.be/xYV4ucs5sSA?list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is 

 

반응형
반응형

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

반응형