로그인

https://opentutorials.org(생활코딩 사이트)를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다.

1. 생활코딩의 Web2시리즈 -JavaScript 수업소개

이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 생활코딩의 Web2시리즈 중에 하나입니다 .

2. 수업대상

이 수업은 웹 페이지를 사용자와 상호작용하게 만들고 싶은 분들을 위해서 만들어졌습니다. 게임이나 애플리케이션처럼 웹페이지를 동적으로 만들 수 있는 방법이 수업 안에 들어있습니다.

html만으로 만들어진 아래의 웹페이지에
https://web-n.github.io/web1_html_internet/

아래와 같이 javascript를 이용해서 주간/야간 모드 기능을 추가하면서 각종 문법을 익혀갑니다.

https://web-n.github.io/web2_javascript/

3. 수업에 참여조건

HTML이 무엇인지 전혀 모르신다면 이 수업을 보시면 안됩니다. 이 수업은 HTML을 알고 계신 분들을 대상으로 하고 있기 때문입니다. HTML을 모르신다면 아래 WEB1 수업을 먼저 보시고 다시 이 수업에 참여하시면 됩니다.

WEB1 – HTML & Internet 수업 바로가기

4. 진도표

아래 야학사이트를 통해서 학습의 진행상황을 체크하고 다른 학우들을 만날 수 있습니다.

https://yah.ac/web2javascript

5. 수업의 내용

 – Run JavaScript

  • Event handler
  • script tag
  • console

 – DataType

  • String
  • Number
  • Variable
  • Boolean
  • Array
  • Function
  • Object

 – Operator

  • Arithmetic operation
  • Assignment operators
  • Comparison operator

 – Statement

  • Conditional statement
  • Loop statement
  • Loop & Array
  • Function
  • Loop & Object
  • Property & Method
  • Refactoring
  • Include File
  • Library &Framework

 – Web Browser

  • Select element (12)
  • Attribute (12)

 – CSS

  • Style attribute (9)
  • Style tag (10)
  • selector (11)

강좌 평가

5

52 개의 수강평
  • 5 점50
  • 4 점2
  • 3 점0
  • 2 점0
  • 1 점0
  1. 오병국의 프로필 사진

    정말 유용합니다!!

    5

    감사합니다! 잘 마무리했습니다. 이제 진짜 프로젝트를 시작해야겠어요!

  2. 김성민의 프로필 사진

    강의 감사합니다

    5

    웹 프론트엔드 3번째 강의로 자바스크립트 봤는데 다음으로 넘어가기 전에 지난 html css 이랑 이거 다시 한 번 정주행하고 다음으로 넘어가야겠습니다 ㅎ

  3. 병관의 프로필 사진

    JS in WEB

    5

    기술적인 부분만이 아닌 히스토리 또는 백그라운드 지식들에 대해 입문할 수 있었어요 감사합니다.

  4. 이선민의 프로필 사진

    JS의 기본기를 다지기 좋은 강의

    5

    jQuery를 주로 사용하고
    순수 JS는 부족한 느낌이였는데, 이 강의로 채워졌습니다.

  5. 서진영의 프로필 사진

    감사합니다!!

    4

    친절한 강의 잘 들었습니다. 행복하세요.

  6. 신혜성의 프로필 사진

    부족했던 개념을 알기쉽게 설명해주셔서 너무 감사합니다.

    5

    신입을 거치면서 놓치고있던 기본 개념을 너무 단단하게 다질수있는 계기가 되었습니다.
    감사합니다!

  7. 민성조의 프로필 사진

    감사합니다.

    5

    항상 잘 보고 배우고 있습니다.
    쉽게 접근할수 있지만 내용은 매우 알찬 강좌가 아닌가 싶습니다.
    감사합니다.

  8. 윤세현의 프로필 사진

    기초적인 자바스크립트, 그리고 흐름에 대하여

    5

    본인이 파이썬을 배우고 보는 자바스크립트라 나름 이해가 쉬웠습니다. 기초를 집고 어떻게 흘러가는지에 대해 잘 알려주는 강의입니다.

  9. 흑구의 프로필 사진

    필수 강좌입니다!

    5

    입문자용으로 아주 좋습니다. 기본 JS만 배우고 웹JS는 안 배우신 분들에게도 입문용으로 좋습니다. 이고잉님이 올리신 웹JS를 배우기 전에 입문용으로 수강했는데 아주 좋았습니다. 물론 아무것도 모르고 처음 배우시는 분들에게도 좋을 거라 생각됩니다.

  10. greate의 프로필 사진

    감사합니다.

    5

    많은 도움이되었습니다.

  11. 안홍범의 프로필 사진

    자바스크립트 기초를 잘배웠습니다.

    5

    자바스크립트 기초를 잘배웠습니다.

  12. 조태준의 프로필 사진

    생활코딩님의 녹진한 강좌!

    5

    하.. 너무 감사드립니다. JS에 대해 어느정도 지식이 있었긴 했으나 극히 일부에 지나치지 않았습니다.
    프론트 엔드 개발자가 되려고 하는데 JS를 알아야 한다고 해서 수강하였습니다.
    덕분에 이해하기 어려웠던 함수객체에 대해 완벽한 이해할 수 있었습니다!
    모두들 학습에 성공하시길 바래요!

  13. 불량곰팅이의 프로필 사진

    너무 잘 들었습니다

    5

    이제 겨우 한발을 딛은 초보개발자 입니다.

    알기쉽게 잘 설명해주셔서 너무 많은 도움이 되었습니다.

    감사합니다.

  14. Sujin Lee의 프로필 사진

    계속 공부하고 싶어지는 강의!!

    5

    egoing님 강의는 언제나 최고입니다!! 감사합니다.

  15. Oranzi의 프로필 사진

    정말 이해하기 쉽게 설명해줍니다.

    5

    node.js 강의를 듣기 전에 자바스크립트를 대략 알아야했기에 수강했습니다. 프로그래밍에 대한 기초가 있었기때문에, 강의를 듣기만해도 자바스크립트에 대해 이해할 수 있었습니다. 정말 이해하기 쉽게 설명해주십니다. 최고입니다 ^^

  16. 김주성의 프로필 사진

    보기 편한 생활코딩

    5

    별점을 ‘1억개’ 주고 싶은 강의입니다

  17. ymin의 프로필 사진

    최고의 강의입니다.

    5

    이 강의를 듣고 web에 대한 공포가 사라졌습니다.

  18. Jingi Kim (CopyX)의 프로필 사진

    ㅎㅎ기초를 쌓기에 너무 좋았습니다.

    5

    덕분에 자바 기초를 쉽게 쌓았어요~

    이고잉님 목소리랑 진행 속도가 너무 안정감 있어서 더욱 좋았습니다:)

  19. Seonil Kim의 프로필 사진

    유익합니다.

    5

    기초를 쉽게 가르쳐주는 유익한 강좌였습니다.

  20. 괭이잠의 프로필 사진

    좋은 강좌였습니다.

    5

    기본을 쉽게 잘 설명해준 강좌였습니다.

  21. iTiop의 프로필 사진

    하루내내 들었습니다!!

    5

    방학에 놀수도 없고 다른 일도 잡히지 않아 스트레스 받다가 뭐라도 하자고 생각해서
    아침부터 저녘까지 듣고 실습했습니다.
    결과는 되게 만족스럽네요. 동기부여가 된거같고 빨리 더 공부하고 싶단 생각이 듭니다.
    좋은 강의 감사합니다!!

  22. 여운서의 프로필 사진

    많은 도움이 되었습니다.

    5

    감사합니다.

  23. 조하늘의 프로필 사진

    기본다지기

    5

    핵심만 잘 정리해 주셨네요. ^^ 잘 들었습니다.

  24. 도학종의 프로필 사진

    잘 배웠습니다.

    5

    감이 안잡혔엇는데 잘 배웟습니다.

  25. Hyung June Wang의 프로필 사진

    감사합니다.

    5

    요즘 웹사이트를 개발하고 있습니다. Django 프레임워크를 통해 사이트를 만들다가 프론트엔드 지식이 많이 부족하다고 느껴 강좌를 수강하게 됐습니다! 자바스크립트는 거의 아는 바가 없었는데 강좌를 통해서 많은 지식을 얻을 수 있었네요. 반복, 조건, 함수 등에 대해 익숙해서 그런지 반나절만에 모두 수강하고 다시 사이트 개발에 집중할 수 있었습니다! 훌륭한 강의 정말 감사드립니다!

  26. JUNG W의 프로필 사진

    모두들 행운을 빕니다

    5

    좋은 경험, 지식을 얻었습니다. 우리 모두 열심히해봅시다

  27. 바구레의 프로필 사진

    자바스크립트 기초 복습에 좋아요

    4

    기존에 생활코딩에 있던 자바스크립트 강좌와 많이 겹치고
    또 난이도가 더 쉽지만 기초 다지기엔 정말 좋습니다.

  28. swim의 프로필 사진

    1억번 감사드립니다.

    5

    정리 강의까지 정말 좋은 학습이었습니다.

  29. yami의 프로필 사진

    너무 감사합니다

    5

    암흑에서 첫발을 내딛은 느낌이에요 ^^

  30. 양호성의 프로필 사진

    최고의 자바스크립트 입문강좌

    5

    기초를 아주 탄탄하게 잡아주네요!

  31. 창작가이용빈의 프로필 사진

    감사합니다^^

    5

    기초공부하는데 아주좋아요!

  32. 써얼의 프로필 사진

    생활코딩 짱짱!

    5

    아무것도 모르는 상태에서 시작해서 그런지 아직 어렵지만 쉽게 잘 설명해 주셔서 감사합니다.

  33. 쿠드아이의 프로필 사진

    html과 css를 배웠다면 들어야할 강의

    5

    web2 – javascript라는 타이틀을 달고 있지만 javascript를 자세히 설명하지는 않는다.

    web이라는 전체 구조안에서 javascript가 가지는 기능이나 활용방법 등을 살펴보고,

    기초적인 프로그래밍 문법을 다룬다.(반복문, 조건문)

    javascript를 깊숙히 파고 싶다는 사람에게는 좋은 강의는 아닐 수 있다.

    하지만 web progamming을 이제 막 시작했고 html과 css를 떼고 다른 사람들의 javascript를 공부하라는 말에

    javascript를 공부해야지 마음을 먹었다면 들어야할 첫번째 강의라는 생각이 든다.

    이런 좋은 강의가 무료라는게 매번 감사할 따름이다.

  34. Zyu Master의 프로필 사진

    감사합니다

    5

    컴퓨터 공학 전공하고 취준하면서 웹쪽을 더 파보려고 시작했는데
    빠르고 이해하기 쉽게 핵심개념들 짚고 넘어가서 많은 도움이 되었습니다.
    열심히 하겠습니다!

  35. 정기용의 프로필 사진

    기초 잡기에는 생코~

    5

    기초 잡는데 좋은 강의 였습니다.
    감사합니다.

  36. Akinaro의 프로필 사진

    역시 생코...

    5

    이해100프로입니다 크..

  37. TheMediaChimera의 프로필 사진

    JS가 처음이었지만

    5

    핵심만 짧게 굵게 알려준 생코.
    역시 믿고 보는 생코.
    그 높아보이던 자바스크립트가 아주 살짝 만만해졌습니다. 감사합니다.

  38. 조영글의 프로필 사진

    정말 굿이네요!!

    5

    깔끔한 설명과 실습으로 이해가 쏙쏙 되는 강의였습니다^^

  39. superior의 프로필 사진

    생활코딩 너무 좋습니다.

    5

    정말 필요한 부분들로만 이루어진
    좋은 강의 였습니다.

    감사합니다.

  40. Jung Saemi의 프로필 사진

    최고의 강의입니다.

    5

    정말 깔끔하고도 개념을 확실히 잡아주는 최고의 강의였습니다.
    어떻게 검색을 해야하는지 키워드도 같이 알려주셔서 좋았고, 목소리도 정말 듣기 편했습니다.
    강좌의 길이가 대부분 10분 내외라 집중력을 유지하기에도 굉장히 좋았습니다.
    정말 감사합니다.

  41. Seung Beom Lim의 프로필 사진

    명불허전 이고잉

    5

    JavaScript의 기초적인 부분을 아주 쉽게 설명해 주셔서 개념을 잡기에 아주 좋습니다.

  42. 데이지의 프로필 사진

    수강완료 했습니다.

    5

    자바스크립트 기초를 잡는데 정말 유익한 수업이네요~ 감사합니다.

  43. Youme Choi의 프로필 사진

    개념 잡기에 굳입니다.

    5

    인프런에서 시작한 강의중에 첫 완강이라 뿌듯하네요(ㅠ_ㅠ) 첫 프로그래밍 언어로 자바를 배우고 두 번째로 시도하는 언어입니다. 자바.. 에 대한 불평의 글이 많지만, 개인적으로는 자바를 먼저 배워서 다른 언어들이 비교적 간편하게? 느껴지는 경험을 하고 있네요! 다른 언어를 이미 배운 분이라면 변수, 함수, 반목문, 조건문 등 중복되는 내용이 있지만, 조금씩은 다른 자바스크립트만의 문법에 익숙해지고 자바스크립트 라는 언어에 대해서 개념을 잡기 아주 좋은 강의였다고 생각합니다! 감사합니다!

  44. Raymond Lee의 프로필 사진

    이제 부터 시작입니다.

    5

    끝까지 완주 하겠습니다.

  45. 이근환의 프로필 사진

    정말 입문을 하는데 필요한 부분이 다 담겨져 있어서 좋았습니다!

    5

    처음 코딩을 접할떄 생활코딩 웹 어플리케이션만들기를 수강하며
    무작정 따라하고 외워서 조금이라도 외워가는 식으로 공부를 했었는데
    공부량이 쌓이면서 자바스크립트와 라이브러리, 프레임워크를 공부하다
    개념이 헷갈려서 다시 찾아봤는데 필요한 개념이 다 있어서 좋았습니다!

    처음에는 이벤트 제어할때 getElementById와 addEventLinster를 이용하는 것으로만 알고 있었는데
    제이쿼리랑 비슷한 querySelector메소드도 알게되어서 좋았고, 자연스럽게 셀렉터도 다시 볼수 있어서 좋았습니다!

    쉽다면 쉽고 어렵다면 어려운 강의를 그래도 정주행하여서 얻어가는게 있다는 것에 만족하며
    다시 공부를 시작하도록하겠습니다!

    헷갈릴떄마다 찾아보면 큰 도움이 될거같아요!!

  46. dogspecial@naver.com의 프로필 사진

    믿고보는 생활코딩

    5

    기초도 모르고 자바스크립트를 사용하다가 다시 한번 기초를 잡게 되니 이제 퍼즐이 맞춰지는 기분입니다. 감사합니다.

강좌 교육과정

오리엔테이션
수업소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:03:00
수업의 목적학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:08:00
HTML과 JS
HTML과 JS의 만남 : script 태그학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:04:00
HTML과 JS의 만남 : 이벤트학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:00
HTML과 JS의 만남 (콘솔)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
데이터타입, 변수, 웹브라우저 제어
데이터타입 – 문자열과 숫자학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:11:00
변수와 대입 연산자학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
웹브라우저 제어학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
CSS 기초
style 속성을 이용해서 CSS 사용하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:05:00
style 태그를 이용해서 CSS 사용하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
CSS 선택자학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
제어할 태그 선택하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:00
프로그램, 프로그래밍, 프로그래머
프로그램,프로그래밍,프로그래머학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:06:00
조건문
조건문 예고학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:04:00
비교 연산자와 블리언 생활코딩학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:00
조건문학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
조건문의 활용학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
리팩토링 중복의 제거학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
반복문과 배열
반복문 예고학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:04:00
배열학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:00
반복문학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
배열과 반복문학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
배열과 반복문의 활용학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
함수
함수예고학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
함수의 기본학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
매개변수와 인자학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
리턴학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
함수의 활용학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
객체
객체예고학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:13:00
객체 쓰기와 읽기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
객체와 반복문학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
객체프로퍼티와 메소드학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
객체의 활용학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
정리
파일로 쪼개서 정리 정돈하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
라이브러리와 프래임워크학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:00
UI vs API학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
수업을 마치며학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
  • 무료
  • 평생
  • 37개 강의, 총 4 시간 25 분
  • 위시리스트

실시간 인기 강좌

우리는 성장기회의 평등 을 추구합니다. 🌳

경제적, 시간적 제약없는 양질을 교육으로 누구나에게 성장 기회를 균등하게 주는것. 그것이 우리의 목표입니다.

지식공유참여 고객센터
top
(주)인프랩 | 대표자:이형주 | TEL:070-4178-0406 | E-MAIL: course@inflearn.com | 사업자번호:499-81-00612
주소:성남시 분당구 삼평동 대왕판교로 645번길 12 경기창조경제혁신센터 8층 R19 | 개인정보보호책임자:이형주
통신판매업:2017-서울강남-01544 | ©INFLAB. ALL RIGHTS RESERVED