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

17 개의 수강평
  • 5 점17
  • 4 점0
  • 3 점0
  • 2 점0
  • 1 점0
  1. 써얼의 프로필 사진

    생활코딩 짱짱!

    5

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

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

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

    5

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

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

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

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

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

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

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

  3. Zyu Master의 프로필 사진

    감사합니다

    5

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

  4. 정기용의 프로필 사진

    기초 잡기에는 생코~

    5

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

  5. Akinaro의 프로필 사진

    역시 생코...

    5

    이해100프로입니다 크..

  6. TheMediaChimera의 프로필 사진

    JS가 처음이었지만

    5

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

  7. 조영글의 프로필 사진

    정말 굿이네요!!

    5

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

  8. superior의 프로필 사진

    생활코딩 너무 좋습니다.

    5

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

    감사합니다.

  9. Jung Saemi의 프로필 사진

    최고의 강의입니다.

    5

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

  10. Seung Beom Lim의 프로필 사진

    명불허전 이고잉

    5

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

  11. 데이지의 프로필 사진

    수강완료 했습니다.

    5

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

  12. Youme Choi의 프로필 사진

    개념 잡기에 굳입니다.

    5

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

  13. Raymond Lee의 프로필 사진

    이제 부터 시작입니다.

    5

    끝까지 완주 하겠습니다.

  14. 이근환의 프로필 사진

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

    5

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

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

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

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

  15. 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

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

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

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