자바스크립트 기초 입문 강의 30분 완성
HTML-код
- Опубликовано: 30 июн 2024
- 이번 영상은 웹 개발 5주 완성 라이브 강의 편집본으로 JavaScript 기초, 변수, 조건문, 반복문, 함수를 배우는 강의입니다.
5주만에 코딩 기초와 웹 프론트엔드부터 백엔드까지 모두 배울 수 있는 커리큘럼을 진행하니 구독, 좋아요 눌러두시고 많은 시청부탁드립니다!
📖수업페이지: jocoding.net
💬디스코드: / discord
[라이브 풀버전] 조코딩의 웹 개발 5주 완성
• [풀버전] 2022 코딩 기초와 웹 프로그래밍
[편집본] 2022 코딩 기초와 웹 프로그래밍
• 조코딩의 코딩 기초와 웹 프로그래밍 (2...
조코딩 멤버십 가입하기
/ @jocoding
보조 교재
📖『Do it! 조코딩의 프로그래밍 입문』
- 예스24: vo.la/SbhB7F
- 교보문고: vo.la/6XXfEL
- 알라딘: vo.la/OXqNP1
목차
00:00 미리보기
00:09 java와 javascript의 차이
00:44 javascript를 배우면 할 수 있는 일
01:38 웹에서 자바스크립트의 역할
02:32 프로그래밍 언어 기초 문법의 핵심
03:42 자바스크립트 변수 var, let, const
08:29 자바스크립트 함수
16:54 자바스크립트 조건문
22:14 자바스크립트 반복문
28:40 자바스크립트의 특징과 유머 밈
31:24 VVIP 멤버십 후원 감사 인사
VVIP 멤버십 후원
SOOJIN BANG님, THE MOTOR CITY님, CURIOUS_CuringE님, 김우종님, 동대문아들들님, 그림자그림자님, 마비님, 파라소프트웨어님, 최영득님, 뚱뚜루_수수또님 VVIP 후원 감사드립니다.
/ @jocoding
#javascript #자바스크립트 #코딩 #프로그래밍 #웹개발
![ian - Fit Check (Feat. VonOff1700) [Official Music Video]](http://i.ytimg.com/vi/sDGWDBg45Dw/mqdefault.jpg)
우와 그림과 같이 설명해주실 때 예시를 너무 잘들어주셔서 이해가 쏙쏙 돼요!!
짱임니다!!❤
설명 진짜 쉽게 해주시네요👍 덕분에 이해됐어요 감사합니다
수많은 인강들 깔짝거리면서 그동안 이해 안가던 기본 개념들까지 풀어서 설명해주셔서 처음으로 완벽하게 이해했네요. 제가 수포자 문과생이라서 어쩔 수 없나 했는데 생각보다 별거 아니였다고 느껴졌어요 감사합니다~!
제가 본 코딩 강의중에 가장 잘 이해됐던 코딩강의. 조코딩은 최고의 코딩 선생님
진짜 너무 쉽게 잘 설명해주셔서 감사합니다!! 복 받으실거예요!!
정말 유익한 정보 주셔서 감사합니다. 자바스트립이 뭔지도 모르는 입문하는 저에게 흥미롭고 좀 더 기초부터 배우고 싶다는 동기부여가 되었네요~! 감사합니다~!
돈내고 들었던 다른 강의보다 훨씬 좋네요... 너무 재밌게 공부하고 갑니다. 감사합니다!!!
진짜 항상 최고예요!!!!!!! 늘 코딩 재밌고 쉽게 가르쳐주셔서 너무 감사합니다
형님 덕분에 코딩포기를 못합니다. 정말 쉽게 설명해주시는 사명감으로 하시는데 정말쉽게 이해됩니다. 그 누구보다도!!!
영상 한편 찍기위한 얼마나 많이 노력하셨는지 그 누구도 모르겠지만 하나하나 다 느껴집니다!! 제 댓글이 힘이 되셔서 승승장구 하셨으면 좋겠습니다!
좋게 봐주셔서 정말 감사합니다!ㅎㅎ 더 열심히 영상 만들겠습니다!
쉽게 재미있게 설명해주셔서 너무 감사합니다 🥰❤
조코딩 쩐다 ㅠㅠ.ㅠ 설명 쵝오
조코딩님 ㅠ_ㅠ~ 자바스크립트 기초 학원 수강생인데,, 이해가 너무 어려워서 조코딩님 영상을 보게되었어요.. 2일동안 받았던 수업이.. 30분만에 이해가 되었습니다 덕분에 진도를 나갈 수 있을거같아요 ㅠㅠ 너무 감사합니다..!!!!!!!!!
설명을 너무 쉽게 해주셔서 감사합니다
쉽게 재미있게 설명해주셔서 너무 감사합니다😍😍😍
도움이 되셨다니 감사합니다!
처음 공부하는데 덕분해 이해가 되고 있는것 같습니다. 감사합니다.
한번 제대로 배워보려고 합니다. 조코딩같은 분들이 많이계셔 참 좋습니다
최근에 코딩 배우기 시작했는데 자바스크립트에서 항상 포기하고있었는데 좋은영상 감사합니다 ㅠㅠ
설명을 진짜 깔끔하게 하신다..최고!
좋은 말씀 감사합니다!
이번 영상은 웹 개발 5주 완성 라이브 강의 편집본으로 JavaScript 기초, 변수, 조건문, 반복문, 함수를 배우는 강의입니다.
5주만에 코딩 기초와 웹 프론트엔드부터 백엔드까지 모두 배울 수 있는 커리큘럼을 진행하니 구독, 좋아요 눌러두시고 많은 시청부탁드립니다!
📖수업페이지: jocoding.net
💬디스코드: discord.gg/zny87VeSaX
[라이브 풀버전] 조코딩의 웹 개발 5주 완성
ruclips.net/p/PLU9-uwewPMe0hiCRaWjRHd-TTNJYu9N6w
[편집본] 2022 코딩 기초와 웹 프로그래밍
ruclips.net/p/PLU9-uwewPMe2-R9-taf4oIjwrEZDgE-q2
조코딩 멤버십 가입하기
ruclips.net/channel/UCQNE2JmbasNYbjGAcuBiRRgjoin
보조 교재
📖『Do it! 조코딩의 프로그래밍 입문』
- 예스24: vo.la/SbhB7F
- 교보문고: vo.la/6XXfEL
- 알라딘: vo.la/OXqNP1
목차
00:00 미리보기
00:09 java와 javascript의 차이
00:44 javascript를 배우면 할 수 있는 일
01:38 웹에서 자바스크립트의 역할
02:32 프로그래밍 언어 기초 문법의 핵심
03:42 자바스크립트 변수 var, let, const
08:29 자바스크립트 함수
16:54 자바스크립트 조건문
22:14 자바스크립트 반복문
28:40 자바스크립트의 특징과 유머 밈
31:24 VVIP 멤버십 후원 감사 인사
VVIP 멤버십 후원
SOOJIN BANG님, THE MOTOR CITY님, CURIOUS_CuringE님, 김우종님, 동대문아들들님, 그림자그림자님, 마비님, 파라소프트웨어님, 최영득님, 뚱뚜루_수수또님 VVIP 후원 감사드립니다.
ruclips.net/channel/UCQNE2JmbasNYbjGAcuBiRRgjoin
#javascript #자바스크립트 #코딩 #프로그래밍 #웹개발
강의력 진짜 좋으시네요 이해도 잘되고 지루하지도 않고 ㅋㅋㅋㅋ
좋은 말씀 감사합니다!ㅎㅎ
헐.. 진짜 긴 강의 보면서 너무 힘들었는데 이렇게 순서도나 예시를 이용해서 알려주셔서 감사드립니다. 이 강의를 본 저는 행운아 인 것 같네요... 이렇게 쉽게 설명해서 자바스크립트로 제이쿼리 없이 응용하는 강의를 많이 해주시면, 좋을 것같아요 전에 강의는 제이쿼리를 사용하시는 것같더라구요!! 뭐든 이렇게 해주시면,,, 더 쉽게 자바스크립트를 배울수 있을 것같네요
좋게 봐주셔서 감사드립니다!ㅎㅎ 말씀주신대로 다음 강의 영상이 js만으로 웹에서 사용하는 방법입니다!
감사합니다!!
조코딩님 제가 입문자인데 너무 쉽게 잘 설명해주셔서 이해가 바로 되네요 좋은 영상 진짜로 감사드립니다 ^^
정말 감사합니다. 이해가 쏙 됩니다❤❤❤❤❤❤
인도에서 4시 방향에 있어서 인도네시아
hahahaHahaHa
개발자로 가기 아까운 인재인데 스탠드코미디 어떰
감사합니다|~❤️🙏🏼❤️
회사라 영상을 볼 수 없어 소리만 듣고 있는데 딕션이 넘 좋으셔서 귀에 쏙쏙 들어오네요! 😀설명도 쉽고 이해가기 쉽게 설명해 주시고~ 강의 선택 하는것도 시간소요가 많이 되는데 첫 번째 영상인데 선택 잘 한것 같아요!!!👍🏼👏🏻😊
감사합니다
강의 완주하고 좋코딩급 SI 취뽀에 성공했습니다 (파견)
보람이 있네요 ㅎㅎ
진짜 멍재밋어요!!
재미있게 봐주셔서 감사합니다ㅎㅎ
예전에 국가과제 하나 진행했을 때 nodeJS 환경에서 API 만들고 서비스했던 기억이 나네요.
시연장에서 선보일 결과물은 임베디드 시스템으로 동작하는 전자기기라 서버는 아무거나 골라도 상관없었기에, 제일 만만해 보이는 JS를 골랐는데..
실제로 다뤄보니 그리 만만한 녀석은 아니었기에 야근 삼매경에 빠진 악몽이 떠오릅니다.
아무튼 좋은 강의 감사드립니다.
이게 최고다..
와 밑에 댓글 중 하나처럼 저도 몇일간 골싸맨게 이렇게 쉽게 이해되다니 신기합니다. 마법사신가요? 윙가디로움레비오우사!!
30:52 값이 없으면 NaN이 되는것이 아니라 문자열인 'a' 를 + 기호를 사용해 숫자로 강제로 바꿔주었기 떄문에 NaN이 됩니다. 보기쉽게 적어보자면 'b' + 'a' + (+'a') + 'a'
-> 'ba' + Number('a') + 'a'
-> baNaNa
헉 그렇군요!!
@@jocoding js의 문제점이기도 한 부분이죠
연산이 예측이 안되는 경우가 많아서 ㅋㅋ
(e.g. 1 + '10' = 11)
그래서 플젝 크기가 커지면 ts를 쓰게되는..
NaN(Not A Number) 잘못된 수학 계산 또는 잘못된 숫자를 의미..
무슨 뜻인지 모르실 분들을 위해서...
자바스크립트에서 숫자를 음수와 양수로 표현할 때 -1 과 +1 이렇게 표현합니다.
앞에 양수와 음수 기호를 붙여서 '문자숫자'를 Number Type으로 변경해주기도 합니다. (예 : -'1' 또는 +'1' 문자 앞에 연산자를 붙여서 형변환)
보통 문자열 숫자를 Number형으로 바꿀 때 '1' * 1 혹은 1 * '1' 이렇게 해주기도 합니다. (parseInt 혹은 Number 를 사용해도 되지만, 이것도 잘 알고 사용해야...)
그런데 문자 'a' 를 + 기호를 사용해서 형변환을 시도하니까 잘못된 수학 계산이라는 의미에서 NaN 이 됩니다.
10:50
프로그래밍 함수는 입력이나 출력이 없을 수 있음
코드를 묶어주기 위해서도 사용됨
감사합니다 파이썬 5년차 ai개발자인데 프론트도 손을 대봐야지.. 하면서 영상을 봤는데 이해가 쉽게 잘 되네요! "나무 찍기 " + element 가 되는게 신기하네요 파이썬이면 안될탠데 ㅋㅋ
감사합니다~~~^^
시청해 주셔서 감사드립니다!
@@jocoding 제가 더 감사드립니다.
저지금 학원에서 죽을거같든데 저희 선생님 보다 훨씬 잘 알려주시네요 ㅠㅠ오늘 html 진도 포폴 끝나고 내일부터 자바인데 벌써부터 무서워요.. 혹시 저강의 다들었는데 순서대로 듣는 순서가 있을까요??
그동안 배운거 이해 하나도 안됐는데 여기서 5분 보고 다 이해됨 ㄷㄷㄷ
와 진짜 쉽게 설명해주시네요 게다가 재밌음,,, 감사합니다
오 군대에서 심심해서 인트라넷으로 자바스크립트 배울려했는데 잘됐다
이게 정말 쉬운건가...나만 어려운건가....ㅎㅎㅎ 여러번 봐야겠네여~~
14:35 여기 나오는 return은 꼭 작성해줘야 하는건가요? 함수만 입력해도 값이 나오는게 아닌가요? return을 어떨땐 쓰고 어떨때는 안쓰는지 헷갈리네요ㅜㅜ
와 지금까지 본 기초 강의중에 젤 쉬워여 ㅠ
감사합니다ㅎㅎ
banana 엄청 신기하네요? 문자열로 합쳐버린다니..ㅋㅋㅋㅋㅋ
ㅋㅋㅋ이 언어는 당황스럽네요. 멋대로 해석하는 듯 ㅋㅋㅎㅎ 잘 들었습니다.
예전에 자바 스크립터 함수로 세이클럽 방폭 하는 것이 생각나네요
제가요 우연히 이분야를 접했는데요..혹시 웹디자인에 필요한 html 일러 css요론거 나중으로 하고 이거부터 배워도 되나요? 이해가 되련지..
웹디. 프론트.백 이 3을 각각 별개로 봐서 그래도 되나 해서요.
네네! 순서는 사실 본인의 성향 차이일 것 같고 결국에 공부하시면 다 연결됩니다!
@@jocoding 열심히 해보겠습니다 !
성향의 차이도 고려하셔야 하고, 업무의 역량을 어느 포지션에 두셔야 하는지 생각하셔야 합니다.
웹디. 프론트.백은 별개가 맞지만, 업장의 규모와 일의 범위에 따라 별개가 아니라 각각 겹쳐 있는 업무인 경우가 보통입니다.
혹시... 논리적인 사고나, 글쓰기를 좋아하신다면, 프로그래밍 쪽을 주력으로 해보셨으면 합니다.
어떠한 언어로 사람들을 설명하는 것과 프로그래밍 언어로 컴퓨터에게 동작을 설명하는 것은 유사합니다.
(내가 글을 쓰고 있는지 프로그래밍 중인지 모호한 상태에 있다가 현실로 돌아와서 자각할 때가 있음)
말씀처럼 '웹디자이너 , 웹퍼블리셔 , 프론트엔드 개발자' 이렇게 3가지로 분류가 되겠는데요.
그래픽 요소의 디자인을 선호하는데 웹디를 해야 하는 경우라면, 웹언어는 CSS, html 이 정도입니다.
자바스크립트는 기본적인 것만 익히셔도 됩니다.
10년 넘게 웹디를 했던 어떤 사람의 경우에는 따로 자바스크립트를 배워서 하기보다는 어깨너머(?)로 익힌 것만으로 자기 업무에 필요한 것만 하게 되더군요.
깊이 파지를 않습니다. 즉, 자신이 하는 일의 역량이 어느 쪽이냐에 따라 다릅니다. 디자인 쪽이라면, 저마다 자기 소스가 있고, 디자인 역량이 더 필요한 포지션입니다.
그리고 웹퍼블리셔라는 것도 있는데요. css, html을 익히고 웹 표준성과 접근성에 최적화된 업무를 하게 되는데, 이쪽 분야는 제가 공백이 커서 잘 모르겠네요.
프론트엔드 개발을 생각하신다면 당연히 css, html, 자바스크립트는 기본인데, 이 포지션도 약간 모호합니다.
업장의 업무 파트에 따라 다르겠으나, 자바스크립트와 백엔드의 역량이 좀 더 뒷받침되어야 합니다.
함수를 선언 할 때, 소괄호에 임시로 넣는 문자와 변수의 이름이 같으면 어떻게 되나요?
그러면 소괄호의 파라미터의 값이 새 변수로 덮어써집니다!
답변해주셔서 감사합니다!!
지금은 아실지 모르겠으나, 소괄호에 넣은 문자는 문자라고 표현하는 것이 아니라, '매개변수'라는 용어를 사용합니다.
함수객체(자바스크립튼 전부 객체임) 내에서(컨텍스트) 선언한 지역 변수라고 보시면 됩니다.
또한, 함수의 매개변수는 arguments 객체 컬랙션을 통해 참조할 수가 있습니다. (배열처럼 사용하지만, Array 객체는 아님)
첫번재 매개변수는 arguments[0], 두번째는 arguments[1] 이런 식으로 사용합니다. (소괄호에 넣은 매개변수를 신경 쓰지 않아도 됨)
arguments객체를 사용하시는 일이 거의 없겠으나(필요한 경우도 있기는 함)
매개변수의 개수에 따라(매개변수 개수가 동적인 경우) 함수를 호출하는 경우 개수에 맞게 처리할 수가 있습니다.
arguments.length ☜ 이처럼 매개변수의 개수를 알수 있습니다.
function a() {//매개변수 개수가 맞지 않아도 됨
alert( arguments[0] + arguments[1] );
}
a(1, 2);
와 근데 c하고 문법이 굉장히 유사하네..
완전 초보 입문자인데 자바 스크립트로 시작해도 될까요?
넵넵 결국 언어는 하나만 제대로 해놔도 다른 부분이 비슷한 경우가 많아서 괜찮습니다! 화이팅
25년전에도 비주얼베이직. C++ 배우고 그랫는데 html이랑 .. 그시절 잘 배웠으면 내 인생이 달라졌을까
컴공과 가고싶은 고등학생입니다 수학을 아무것도 모르는데 코딩을 하기 위해서 알아야 이것만은 꼭 할 줄 알아야 하는 수학 있을까요 미적분이라든지..
팁이라면 소스탭에 스니펫을 이용하면 번거롭게 이전 기록 안봐도 되서 편하긴한데 이상하게 손이 안가게 되는...
와.. html css 공부까지는 무난히 하다가 자바스크립트 나오자마자 머리터질뻔하고 책 덮었는데 너무 잘 이해가네요..! 앞으로 공부도 강의 토대로 이해가 잘 갈것같습니다 :)
그리고 외울필요 없다는게 너무 단비같고 꿀팁이네요 ㅠㅠ 힝힝
let은 블록 레벨 스코프라 {} 벗어나면 작용이 안 된다고 배웠는데 12:07 여기서는 어떻게 작동이 된거죠..?
안녕하세요 웹개발 5주 완성은 어떻게 듣나요?? 링크 들어가보니 안나옵니다ㅠ
jocoding.net/
여기서 확인 가능하십니다!
조코딩님 덕분에 첫 코딩입문 했습니다 !!
와우 응원합니다!!
한국에서 프론트엔드 취업하려면 어떻게 할 수도 있어요?
10:07🔥🔥
선생님 node -v 클릭하면 node is not defined 으로 나옵니다. 이문제를 어떻게 해결하는 가요?
설치가 안됩니다. 도와주세요. 감사합니다.
nodejs.org/en/
여기서 설치를 하셔야합니다!
@@jocoding node -v는 명령프롬프트에서 하는 건가요? Cmd에서
@@user-Calmingsounds 네 맞아요!
저 실례합니다만 자바스크립트에는 동영상을 넣을수 있나요?
동영상을 넣는다는 것이 불러와서 편집할 수 있는지를 물으신다면 가능합니다!
그게아니라요 실행했을때요 글자와동영상이같이 나타나게 할수있는지 물었어요!
@@user-ji2py2so2g 화면에 보여주는 것은 html의 역할입니다! javascript로 HTML 코드를 생성하여 보여주는 것은 가능합니다!
자바스크립트에서는 null, undefined, nan 차이 구분이 참..
4:52
오
앞으로 자바스크립크 강의 올라오나요?
넵! 자바스크립트, nodejs 관련 강의 업로드 됩니다!
MS: 타입스크립트 하라고!!!!!
그리고 1+true가 2인 오류가 있네요 ㅋㅋ (...true를 이진수로 변환하면 1이라서 그런가ㅏ...?)
숫자로 형변환돼서 true는 1 false는 0으로 바껴요!
타입스크립트를 사용하는 이유죠
이런 점들을 이용한 jsfuxk 이라는게 있는데, !과 +와 []와 ()만 사용해서 거의 대부분의 코드를 짤 수 있습니다.
예시) 궁금한 사람들만 보세요)
[]는 truthy값이므로 !를 하면 false가 나오고, 거기다가 다시 !를 하면 true가 나옵니다. 이것을 숫자로 바꾸면 1이 되죠
+!![]
또한 값에 []를 더하게 되면 빈 배열과 값이 더해져서 문자열이 됩니다. 이를 이용해서 어떤 값을 문자열로 바꾸고, 위의 예시를 이용해서 글자를 가져올수도 있습니다.
예) false에서 문자 l 가져오기
(![]+[])[!![]+!![]] = 'l'
이제 이렇게 여러 곳에서 filter 라는 문자열을 가져와서, 함수를 가져올수도 있습니다. (false의 f, undefined의 i 등 / undefined는 빈 배열의 0번 인덱스를 참조하면 나옴)
[]['filter'] = 배열에 있는 filter 함수. 이 함수를 다시 문자열화 하면 매우 많은 글자를 가져올 수 있음
저도 프로그램을 배운다 배운다 하다가 영상보고 파이썬 일주일 공부하다가 머리에 쥐가나는 현상에이 와서 너무 괴롭고 그래서 포기한적이 있네요.
너무 복잡하고 이해도 안되니 스트레스 때문에 머리에 쥐가 날 정도의 경험을 몇년전에 했었음..
암튼 자바스트립트 언어는 천천히 배워보고 싶네요..
그리구 제가 개인적으로 좋은 개념으로 보는게 있는데요. 위키백과처럼 사용자가 만들어가는 생태계는 좋다고 봅니다.
여기에 거버넌스 장치를 추가하면 좋을듯요..
이 위키백과의 사용자가 만들어가는 시스템(거버넌스 동시 투표에 대한 대응 장치)을 접목한 한국 포털이 나오면 좋겠다라는 생각을 하네요..
그러면 애초에 포털 관리측에서 스팸이나, 불법성 매체들을 걸러낼 필요도 없고.. 투표로 인해 명확하게 업로드된 정보들과 시대 트렌드에 따른 정보의 변화가 가능할거 같네요. 블록체인 지갑을 연동해서 사용할 수 있고.. 유저들의 거버넌스참여로 인해 신뢰도를 기반한 포털의 팽창 구조이고
다양한 참여자들이 수익창출이 가능하기 때문에 좋다구 봅니다.
전 이런거 하나 나왔으면 좋겠다고 생각합니다.. 물론 그 설계와 그런게 무지 힘들겠지만요..
안녕, 외국 사람입니다. 만나서 반갑습니다 ㅋㅋ.
이 영상만 보면 참 쉬운데,, 뭐든지 응용이 어렵네요
ㅋㅋㅋㅋ햄과 햄스터 ㅋㅋㅋㅋㅋ
쓰바라시
31:28
조코딩 >> 노마드
자바스크립트 프로팁ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ😂😂😂😂😂
주로 게임만드는데 쓰이는 C#이나 C++다르게 자바스크립트로는 게임은 만들기는 난해한가보네요..거론자체가 안돼는거 보니.
아닐텐데요? Js기반 게임 많아요
웃기넹
조코딩님....설명은 참 좋은데..화면이 너무 확대축소을 많이해서 어지러워요...확대축소안해도 충분히 보이는데..정신이 하나도 없어요..그리고 너무 빨라요..조금 천천히 해주시면 좋을것 같아요///^^
이거 기초중에 기초잖아?
C++이랑 똑같네여
1빠 고정좀
for(let i = 0; i < 10; i++) {
if(i == "10") {
alert('end')
return
} else {
console.log('Num :' + i)
}
}
와 너무 재밌어요 입문자도 쉽게 이해할 수 있게 설명해 주셔서 감사합니다