초보자도 이해할 수 있다고 하셔서 듣고있는데

안녕하세요 :D

말씀하신 내용이 맞습니다. 잘 알고 계시군요^^

그리고 말씀하신 

1.이 기호가 구지 써야하는건가? 생각이 들어요

이부분도 맞지만 안쓸필요도 없답니다 :D 너무 딱딱하게 생각하지 않으셔도 될 것 같네요 ^^;

2.강의에서 말씀해주시는 순서로 문서 작성 다시 해보면서 하라는 말씀이시죠?

본인의 공부방법이 있다면 그 공부법에 맞게 공부하는것을 추천드립니다.

초보자도 만들수있는 스크롤 인터렉션 1편은

프로그램은 잘 모르지만 html,css,js 기초가 있는 사람들 즉 초보자를 기준으로 제작되었습니다

프로그램의 기본을 알고 계시다면 바로 작성하거나 완성된 코드를 로그를 찍어보며 분석해 보는 공부법을 추천드립니다

하지만 강의 내용이 어렵다면 여러번 시청을하며 이해도를 올린다음 따라 작성해보는 방법도 좋을듯 합니다 :)

그럼 다른 궁금증이 생길때 문의주세요 :)

그리고 한가지 더 알려드리면 jquery의 기초, html의 기초, css의 기초 등은 유튜브를 통해 강의를 진행할 계획입니다.

현재 만들고 있는 강의가 많아서 유튜브에 컨텐츠를 못올리고 있는데요!

어느정도 정리되기 시작하면 유튜브를 통해 기초적인 강의를 올릴 예정입니다 :D

그때 수강생님이 어려워하는 문서의 로드 순서와 제이쿼리 기초 셀렉터 문법 자주쓰는 함수등을 정리해서 강의를 만들어야 겠네요:D

질문1. 그리고 Dom을 선택한다는게 위에 작성했던 html,css의 컨텐츠를 가져오기 위해서 jquery로 작성한다는거죠?

이해가 빠르시네요! 맞습니다. 조금더 자세히 설명해보자면

 document.querySelector('#test'); <- 자바스크립트로 ID를 선택할때 문법

$("#test") <- 제이쿼리로 id를 선택할때 문법

$(".test") <- 제이쿼리로 class 를 선택할때 문법

훨신 간편하게 사용할 수 있어 코드 작성 시간을 줄일수 있고 여러브라우저에 대응하는 크로스 브라우징이 유리합니다

질문2.프로그램 실행 순서에 대해 어려움을 겪고 계시군요?

$(function(){

} 처음 나오는 이 구문은 doucmnet ready보다 살짝 빠르게 실행되는 구문입니다.

그럼 $(document).ready 는 무엇일까요?

$(document).ready()는 dom (document object model)이 로드되면 바로 실행되는 구문이랍니다.

쉽게 말하면 우리가 프로그램을 작성하며 dom을 선택하려고 할때 dom이 아직 로드되지 않았다면 dom을 찾지 못해 에러가 발생하겠죠?

그렇기 때문에 $(document).ready() 또는  $(function(){} 안에 코드를 작성해서

기본적인 dom이 로드된 후에 코드를 실행하도록 하는겁니다 :D

- 다음 참고할 사항 -

코드가 적힌 순서는 머릿속에서 지우세요

강의에서 설명하는  순서가 프로그램이 실행되는 순서랍니다 :D

강의 설명 그대로 쭉 따라가면서 실행 순서를 이해해보시길 바라겠습니다!

console.log 꼭 찍어보시구요!

어려운 부분이 생길땐 언제든 문의주세요 :D

화이팅하시길 바라겠습니다

:D

감사합니다:)

 document.querySelector('#test') 이렇게 하는 것보다 

$("#test") 이렇게 하는게 더 작성하기 쉽네요! 

그래서 이 기호를 사용하는 거군요!

그리고

$(function(){

}

과

$(document).ready() 는

dom이 로드가 안되었을 때 로드 된 후 코드를 실행하라고 써준다는 말씀이지요?

script가 body보다 위에 있을 때,

html이 다 업로드 안되었는데 자바스크립트를 실행할 수 없으니 

$( ) 제이쿼리 기호로 body를 다 읽고나서 실행하기위해 사용한다고 배웠었는데요.

근데 지금의 경우는 html과 css 모두 script보다 위에있고 프로그램은 위에서 아래로 흐른다고 배웠었는데

이 기호가 구지 써야하는건가? 생각이 들어요. 그러니까 dom이 위에서 다 실행이 되었는데 로드가 안되었을 경우를 대비해서 써줄 필요가 있나해서요..

암튼 미리 주신 예제의 순서보다는

강의에서 말씀해주시는 순서로 문서 작성 다시 해보면서 하라는 말씀이시죠??

기초강의 올려주신다니 감사하네요. 구독하고 알림설정 해놓을게요!

답변 감사합니다:)

빠르고 자세한 설명 감사드려요!

순수 자바스크립트를 배워서 그런지 jquery 개념이 낯서네요!

하지만 말씀하신것 처럼 여러번 들어보겠습니다.

그리고 Dom을 선택한다는게 위에 작성했던 html,css의 컨텐츠를 가져오기 위해서 jquery로 작성한다는거죠?

 $("selectors") 자체가 하나의 데이터 값으로 선택해준다고 이해 하면 될까요?;;

함수는 말씀해 주셨지만 이해하기 어렵네요..ㅠ

처음 function에 제이쿼리로 묶어준부분이 스크립트 마지막부분까지 묶인거고

이 함수 안에

text 변수와 progressBar가 있고

getpercent 함수

render 함수

int  함수 가 있는데

여기까진 알겠는데 

그다음부터는 복잡하네요ㅠ

감사합니다.

안녕하세요 :D 보충강의 내용을 추가해 달라는 의견을 주셨군요

궁금증을 올리실때 원글을 수정말고 새로운 답변으로 입력해주셔야 제가 알 수 있습니다.

뭔가 답변이 부족하지 않았나 다시 보다가 원글이 수정된걸 알았네요 :)

먼저 공지를 보시면 아시겠지만 마지막 강의 섹션10이 추가 됩니다.

섹션10은 그동안 배운 스크롤인터렉션 스킬을 활용해 UI를 만드는 강의 인데요

설명위주가 아닌 지식 공유자를 따라서 함께 만들거나 직접 만드는걸 권유하는 강의입니다.

그리고 앞으로 추가될 섹션10은 섹션2~6에서 알려주는 개념과 원리를 확실히 이해 하셨다면 아주 쉽게 구현할수 있는 강의입니다

스크롤 인터렉션 같은 경우 무조건 따라 만들어서 개념잡기가 어려울 수 있습니다. 섹션의 크기와 스크롤의 높이 이런 개념과 수식들을 확실히 알아야 하기 때문인데요

강의 오픈 후 피드백을 보니 초,중급자 분들은 강의를 원활하게 진행하며 포인트만 배워가는 걸 알 수 있었지만

설명 위주로 진행하니 입문자 분들이 어려움을 겪을수 있다고 판단되었습니다.

그래서 추가되는 강의가 섹션10이고

화려한 이펙트를 섞어 초, 중급자 분들의 입맞에도 맞추기 위해 준비했답니다 :)

또 다른 궁금증이나 어려움이 생긴다면 언제든 문의주세요 :D

안녕하세요  AirDream님 :D

먼저 수업에 어려움을 느끼고 계시군요!

해당강의는 html,css,js의 기초가 있는 초보자들에게  초점을 맞추고 있습니다!

뭔가 설명이 좀 빨라보여도 여러번 반복시청하시면서 예제를 보고 스스로 로그를 찍어보면 조금씩 이해하는데 도움이 될거에요

그리고 기초가 조금 부족하시면 조급하게 하지 말고 천천히 배워보시는걸 추천드립니다!

마지막으로 문의주신 내용 알려드릴께요:D

먼저 JQUERY란 자바스크립트로 만들어진 라이브러리 랍니다. jquery는 현재 우리나라에서 만들어지는 홈페이지 99%에서 사용중인 라이브러리구요! 나중에 웹개발로 취업을 하신다면 필수로 알아야 하는 라이브러리랍니다 :D

react,vue js 경우에는 juqery를 안쓰는곳도 있긴 있지만 

순수 javascript문법과 jqeury 문법이 비슷하기 때문에 접근하기 아주 쉽고 스크립트 공부를 조금만 해보면 jquery문법은 자연스레 알게 되어 있습니다. 그럼 어려움을 겪고 있는 부분 알려드릴께요 

1.$("") 구문은 dom을 선택하는데 사용하는 JQUERY 문법입니다.

순수 자바스크립트에서는 document.querySelector(selectors); 로 돔을 선택하죠??

제이쿼리에서는 더 간편하게 $("selectors")를  사용해서 돔을 선택할 수 있습니다.

2.다음 프로그램 실행순서에 대해 문의 주셨는데요! 아직 프로그램 실행개념이 조금 해깔리시면 javscript의 입문과정부터 공부해야 되지만 최대한 강의를 진행할수 있도록 설명해드릴께요!

자바스크립트는 말씀하신대로 위에서부터 읽히며 실행되는 언어가 맞습니다. 하지만 해당 강의에서는 몇몇의 전역변수를 빼고 모두 함수로 묶여서 처리되고 있죠?

그렇기 때문에 함수를 실행하기 전에는 아직 코드가 실행되지 않고 있는 겁니다.

그리고 아래에서 init함수를 실행할때 

실행순서대로 순차적으로 프로그램이 실행되며 기능을 수행하는거죠!

도움이 되셨나요?

질문자님의 질문을 보니 제가 처음 프로그램에 입문했을때가 생각납니다!

조급해하지 마시고 천천히 배워보세요! 어려워 보이는 코드도 계속 보고 이해가 잘 안가도 계속 듣다보면

조금씩 눈이트이고 귀가 열린답니다

제 경험담이에요!

그리고 다른 분들이 질문하는 내용도 참고해서 찾아보시길 바라겠습니다.

강의 메인화면 질문과답변 카테고리를 보시면 다른 분들의 질문도 찾아보실수 있습니다 :D

그럼 화이팅하시길 바라겠습니다 :D

또다른 궁금증이 생길때는 언제든 문의주세요