인프런 커뮤니티 질문&답변
작성한 질문수
2:40
작성
·
402
0
`${}`
이렇게 쓰는 것을 배운적이 잇는데
해당 부분에서는 ``부분이 없고
${} 이 아이만 써주었던데..
왜 그런건지 혹시 알 수 있을까요?
function 앞에 $이거를 왜 써준 것인지도 궁금해요..ㅠㅠ
혹시 jquery 개념도 알아야하나요?
html,css, javascript로만해서 따라갈 수 있을 줄 알았는데
너무 어렵네요..하
어려워서 자바스크립트 배우고 이제 들어보려 했더니
코드가 튕겨 나가버리네요.
제이쿼리를 다시 배우고 와야하는건가..
답변 5
1
1
안녕하세요 :)
전과 똑같은 질문을 주셨군요
1.$("") 구문은 dom을 선택하는데 사용하는 JQUERY 문법입니다.
순수 자바스크립트에서는 document.querySelector(selectors); 동일하다고 생각하면 됩니다.(엄밀히 말하면 비슷한거에요^^)
좀더 상세하게 알고 싶다면 구글이나 유튜브에 제이쿼리 선택자를 검색해 보시길 바라겠습니다.
2. 문서 로드
$(function(){
코드..
})
다음 부분은 문법 하나 하나를 이해하기보다 의미만 알고 계시면 됩니다 :)
이부분은 순수 자바스크립트 onload = function(){
..코드
}
과 동일하다고 생각하시면 되는데요
onload는 모든 요소들이 로드된후에 코드가 실행된다면
$(function(){
코드..
})
이코드는 온로드보다 조금더 빨리 실행된다고 생각하면 됩니다 :)
문서의 로드상태에 대해 조금 더 디테일하게 알고 싶다면 구글에 document ready에 대해 검색해보세요 :)
0
안녕하세요 :)
오늘 시간이 조금 남아서 제이쿼리 이벤트 바인드 부분을 분석해 보았더니
제이쿼리에서 다음과 같이 스크롤 이벤트를 addEventListener로 추가해주는 구문이 있네요 ^.^
document.addEventListener('scroll', function(e) {
..순수 자바스크립트에서 스크롤 이벤트 바인드는 이렇게
})
$(window).scroll(function(e){
..제이쿼리에서는 이렇게
});
제이쿼리가 조금 더 간편하죠?? 눈에 보이는 작성 방법에서는 큰 차이가 없어보입니다.
아직 문법 하나 하나에 큰 의미는 갖지 마시고 저렇게 작성하면 되는구나 정도로 이해하고 자바스크립트를 차츰 공부해나가며 더 깊숙하게 공부하면 좋을것 같습니다 :D
문법 전체를 몰라도 어느정도 사용법을 알고 결과물을 만들다보면 재미를 느끼기 마련이고 시간이 흐르면 하나 하나 세세한 문법까지 알게되실거에요 :D
0
2:55 getPercent는 스크롤 할때마다 계속 호출하게 된다고 하셨는데
함수는 한번만 실행되잖아요.
그래서 스크롤 될때마다 하려면
addEventListener를 사용해야되는 것 아닌가요?
그리고 ㅠㅠ
$('')가 document.quertSelector('');인 것은 알겠는데
$( ) 얘는 var winScrollTop = $(window).scrollTop(); //스크롤바의 상단 위치를 구합니다
왜 window에 써준건지..
하ㅜ
안녕하세요
scrollTop은 현재 스크롤의 위치를 가지고 오는겁니다 :)
addEventListener는 이벤트를 바인드할때 사용하는거구요!
예를들어 javascript에서 document.addEventListener('scroll', function(e) {
이렇게 사용한다면
제이쿼리에선 다음 처럼 사용합니다
$(window).scroll(function(){
크게 다르지 않죠?
그리고 window는
브라우저 최상단 객체입니다 :)
---해깔릴수 있는 부분 정정--
수업에서는 jquery의 scroll()함수를 사용한겁니다 :)
수업에서는 브라우저 최상위 객체인 window에 스크롤 변화를 감지하기 위해 window를 사용한 거에요 :)
제이쿼리와 자바스크립트는 크게 다르지 않습니다!!
말씀하신 최상단 객체라는 것이
순수 자바스크립트에서
window.addEventListenr
이렇게 사용하는데
그 느낌인가요?
scrollTop은 오브젝트의 처음 위치를 가져오는 메소드인 것은 알겠어요!
addEventListener는 이벤트를 바인드할때 사용하는거구요!
이벤트를 바인드(묶다)?
이벤트를 묶어줄 때 사용하고
제이쿼리에서는 함수가 이벤트처럼
실행될때마다 자기가 알아서 실행되나요?
순수 자바스크립트에서는 안그러니까 헷갈리네요.
빠른 답변 감사합니다..
window 객체 아래에 document가 있습니다. :)
window.addEventListener('scroll', function(e) { 이렇게 사용해도 됩니다 :)
쉽게 이벤트를 추가한다고 생각하면 될 것 같습니다
굳이 제이쿼리와 자바스크립트를 다르다고 생각하지 마세요! 개념은 같습니다!! 단지 제이쿼리를 쓰면 조금더 간편하게 javascript를 사용할 수 있다고 생각하면되요!!
함수는 어떤 프로그램언어 에서든 혼자서 실행되지 않습니다!
실행되는 방법과 순서는 제이쿼리든 자바스크립트든 똑같아요 :)
---추가 설명 ---
해깔려 하시는듯 하여 보충 설명합니다.
수업에서 스크롤 이벤트를 위해 jquery의 scroll함수를 사용했다고 했습니다.
이말은 제이쿼리의 scroll함수를 분석해 본다면 아마도 제이쿼리 scroll 함수에서 스크롤 이벤트를 바인드 할거에요!
--- 마지막으로 간단하게 설명하자면 ----
document.queryselector, elementbyid 이렇게 쓰는거보다
$('.class') 너무 간편하죠? (타이핑이 너무나 줄어듭니다)
jquery를 안쓰면 addclass를 할 때 올드 브라우저 까지 대응하기 위해서는 조금 복잡한 코드가 필요합니다. 정규식도 필요하구요!
하지만 jquery를 사용하면 addclass를 모든 브라우저에 대응하며 아주 간편하게 할 수 있죠!
그리고 유지보수 단계에서 질문자님이 작성한 코드를 다른 사람이 볼때 직접 작성한 addclass 코드보다 세계적으로 사용중이고 api가 있는 jquery 문법을 보는게 더 편리할겁니다 :)
즉 같은 언어라 개념은 같으나 조금 더 편리하게 프로그래밍할 수 있도록 해주는게 jquery라고 생각하면 됩니다 :)
요즘 리액트나 뷰 앵귤러에서는 jquery를 사용하진 않지만 javascript가 익숙해지면 기본적인 jquery문법들은 api를 안봐도 너무 쉽게 이해하게 될거에요 :)
안녕하세요 :)
음..ㅠㅠ 수업이 빠르게 느껴지시는군요!
제이쿼리와 자바스크립트는 크게 다르지 않습니다!
지금 조금 부족해도 앞으로 차분하게 천천히 조금씩 공부해보시길 바라겠습니다!
한달후에 다시보고 두달후에 다시본다면 해당 코드는 점점 너무 쉽게 느껴지실거에요^^
포기하지 말고 조금씩 공부해 나가면 너무 쉽게 느껴질테니 홧팅하세요 :)
화이팅하세요!