HTML (정적) → JavaScriot (동적)
수업소개
이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다.
수업대상
이 수업은 웹 페이지를 사용자와 상호작용하게 만들고 싶은 분들을 위해서 만들어졌습니다. 게임이나 애플리케이션처럼 웹페이지를 동적으로 만들 수 있는 방법이 수업 안에 들어있습니다.
html만으로 만들어진 아래의 웹페이지에
https://web-n.github.io/web1_html_internet/
아래와 같이 javascript를 이용해서 주간/야간 모드 기능을 추가하면서 각종 문법을 익혀갑니다.
https://web-n.github.io/web2_javascript/
수업의 크기
이 수업은 총 37개의 동영상, 4시간 24분의 재생시간으로 이루어진 수업입니다.
수업의 내용
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)
커리큘럼
수업의 목적
HTML과 JavaScript의 만남 1 (script 태그)
HTML과 JavaScript의 만남 2 (이벤트)
HTML과 JavaScript의 만남 3 (콘솔)
데이터타입 - 문자열과 숫자
변수와 대입 연산자
웹브라우저 제어
CSS 기초
제어할 태그 선택하기
프로그램, 프로그래밍, 프로그래머
조건문 예고
비교 연산자와 Boolean 데이터 타입
조건문
조건문의 활용
리팩토링(refactoring)
반복문 예고
배열
반복문
배열과 반복문
배열과 반복문의 활용
함수예고
함수
함수의 활용
객체예고
객체
객체 활용
파일로 쪼개서 정리 정돈하기
라이브러리와 프래임워크
UI vs API
수업을 마치며
출처 및 저작권
> 생활코딩
'Develop > WEB2 - JavaScript' 카테고리의 다른 글
[1일차] #6. 데이터타입 - 문자열과 숫자 "1"+"1"="11" (0) | 2018.11.29 |
---|---|
[1일차] #5. HTML과 JavaScript의 만남 3 (콘솔) (0) | 2018.11.29 |
[1일차] #4. HTML과 JavaScript의 만남 2 (이벤트) (0) | 2018.11.29 |
[1일차] #3. HTML과 JavaScript의 만남 1 (Script 태그) (0) | 2018.11.29 |
[1일차] #2. 수업의 목적 - 상호작용할 수 있는 웹페이지 만들기 (0) | 2018.11.29 |