• 1수업 소개 288
  • 학습목표이번 수업에서 다루게 될 내용을 이해한다.
  • 동영상https://youtu.be/dPRtcRwKo-Y (03분 18초)
• 2 수업의 목적 289
  • 학습목표간단한 자바스크립트 예제를 살펴보고 수업의 최종 목표를 확인한다.
  • 동영상https://youtu.be/q4c69koKcOc (08분 24초)
• 3 HTML과 JS의 만남: <script> 태그 296
  • 학습목표<script> 태그를 이용해 자바스크립트 코드를 HTML 페이지에 넣는 방법을 익힌다.
  • 동영상https://youtu.be/Ru5zGHkOgic (03분 46초)
  • 예제【3-3-1】 ex1.html 파일 생성
  • 【3-3-2】 <script> 태그와 자바스크립트 코드 작성
  • 【3-3-3】 <h1> 태그와 제목 추가
  • 【3-3-4】 HTML 태그와 자바스크립트의 차이 살펴보기
• 4HTML과 JS의 만남: 이벤트 399
  • 학습목표사용자와 자바스크립트 간의 상호작용 수단인 이벤트를 이해한다.
  • 동영상https://youtu.be/-hdtrReY9Zw (08분 42초)
  • 예제【3-4-1】 ex2.html 파일을 생성하고, 버튼 만들기
  • 【3-4-2】 onclick 속성과 값 추가
  • 【3-4-3】 글자를 입력할 수 있는 텍스트 상자 만들기
  • 【3-4-4】 onchange 속성과 값 추가
  • 【3-4-5】 <input> 태그를 추가하고, onkeydown 속성과 값 추가
• 5HTML과 JS의 만남: 콘솔 397
  • 학습목표간단하게 코드를 실행해야 할 때 활용할 수 있는 콘솔의 사용법을 이해한다.
  • 동영상https://youtu.be/-VKIqaEdDVU (08분 29초)
  • 예제【3-5-1】 텍스트가 몇 개의 글자로 이뤄졌는지 확인하기
  • 【3-5-2】 댓글을 입력한 사람 중에서 무작위로 4명을 추첨하기(이해하지 않아도 좋습니다)
• 6데이터 타입 - 문자열과 숫자 314
  • 학습목표자바스크립트의 데이터 타입을 살펴보고 그중 문자열과 숫자 데이터 타입을 이해한다.
  • 동영상https://youtu.be/P8C8VNiM33A (10분 59초)
  • 예제【3-6-1】 경고창에 숫자 표현하기
  • 【3-6-2】 경고창에 숫자 표현하기2
  • 【3-6-3】 콘솔에서 덧셈하기
  • 【3-6-4】 콘솔에서 덧셈, 뺄셈, 곱셈, 나눗셈하기
  • 【3-6-5】 문자열을 대문자로 출력하기
  • 【3-6-6】 문자열에서 특정 문자 찾기
  • 【3-6-7】 문자열에서 특정 문자열 찾기
  • 【3-6-8】 문자열에서 공백 제거하기
  • 【3-6-9】 숫자와 문자열
• 7변수와 대입 연산자 325
  • 학습목표변수와 대입 연산자, 상수를 알아보고 변수를 사용하는 이유와 효용을 이해한다.
  • 동영상https://youtu.be/absJhWQAS40 (07분 55초)
  • 예제【3-7-1】 변수와 대입 연산자
  • 【3-7-2】 변수와 상수
  • 【3-7-3】 아무 의미 없는 문자열(Lorem ipsum)
  • 【3-7-4】 문자열에서 egoing을 leezche로 바꾸기
  • 【3-7-5】 변수를 이용해 leezche를 egoing으로 바꾸기
  • 【3-7-6】 변수를 이용해 egoing을 leezche로 바꾸기
• 8웹 브라우저 제어 339
  • 학습목표자바스크립트를 이용해 웹 브라우저를 제어하는 방법을 이해하고 익힌다.
  • 동영상https://youtu.be/S62m_ddSls4 (03분 34초)
• 9CSS 기초: style 속성 332
  • 학습목표웹 페이지를 디자인할 수 있는 CSS를 소개하고 <style> 태그, style 속성을 이용해 CSS를 적용하는 방법을 이해한다.
  • 동영상https://youtu.be/HQgNj50Xt9g (05분 02초)
  • 예제【3-9-1】 ex3.html 파일 생성 후, 3.html 복사해서 붙여넣기
  • 【3-9-2】 <h2> 태그의 글자색을 하늘색으로 변경 ex3.html
  • 【3-9-3】 <h2> 태그의 배경색을 코랄색으로 변경
• 10CSS 기초: <style> 태그 33
  • 학습목표<style> 태그를 이용해 CSS 코드를 작성하고, 웹 페이지의 특정 부분을 디자인하는 방법을 이해한다.
  • 동영상https://youtu.be/H2eMtredsK4 (07분 24초)
  • 예제【3-10-1】 <div> 태그로 JavaScript 텍스트 감싸기
  • 【3-10-2】 <div> 태그 대신 <span> 태그로 JavaScript 텍스트 감싸기
  • 【3-10-3】 모든 JavaScript 텍스트에 굵게 적용
  • 【3-10-4】 <style> 태그를 추가하고, style 속성 대신 class 속성 추가
  • 【3-10-5】 클래스 값이 js인 모든 태그에 굵게 적용
  • 【3-10-6】 클래스 값이 js인 모든 태그에 굵게 적용(다시)
  • 【3-10-7】 클래스 값이 js인 모든 태그의 글자색을 빨간색으로 변경
• 11CSS 기초: 선택자 342
  • 학습목표선택자를 이해하고, 선택자를 이용해 웹 페이지의 여러 구성요소에 효율적으로 스타일을 적용하는 법을 익힌다.
  • 동영상https://youtu.be/GCtWMXc-rtw (07분 42초)
  • 예제【3-11-1】 첫 번째로 등장하는 ‘JavaScript’ 텍스트 강조
  • 【3-11-2】 클래스를 의미하는 .에서 id를 의미하는 #으로 변경
  • 【3-11-3】 <span> 태그의 글자색 변경 및 HTML, CSS 텍스트를 <span> 태그로 감싸기
• 12제어할 태그 선택하기 346
  • 학습목표자바스크립트를 이용해 HTML과 CSS를 프로그래밍적으로 제어하는 방법을 익힌다.
  • 동영상https://youtu.be/5tqfbgfA1LY (10분 45초)
  • 예제【3-12-1】 night 버튼과 day 버튼 만들기
  • 【3-12-2】 버튼을 클릭했을 때의 이벤트를 추가하기 위해 onclick 속성 추가
  • 【3-12-3】 버튼을 클릭하면 배경색이 검은색이 되도록 onclick 속성 값 설정
  • 【3-12-4】 버튼을 클릭하면 글자색이 흰색이 되도록 onclick 속성의 값 추가
  • 【3-12-5】 day 버튼을 클릭하면 배경색이 흰색, 글자색이 검은색이 되도록 완성
• 13프로그램, 프로그래밍, 프로그래머 354
  • 학습목표HTML과 자바스크립트와 관련된 배경을 이해하기 위해 프로그램, 프로그래밍, 프로그래머라는 용어의 개념을 소개한다.
  • 동영상https://youtu.be/p71PrgY0bbM (05분 43초)
• 14조건문 예고 357
  • 학습목표자바스크립트 조건문을 배우기에 앞서 조건문의 효용과 앞으로 다룰 내용을 알아본다.
  • 동영상https://youtu.be/UT2oYysmZjE (03분 39초)
• 15비교 연산자와 불리언 360
  • 학습목표조건문을 알아보기에 앞서 조건문에 사용되는 비교 연산자와 불리언을 이해한다.
  • 동영상https://youtu.be/A2qp-jpk_XA (08분 34초)
  • 예제【3-15-1】 ex4.html 파일 생성
  • 【3-15-2】 비교 연산자 (1===1) ex4.html
  • 【3-15-3】 비교 연산자 (1===2)
  • 【3-15-4】 비교 연산자 (1<2)
  • 【3-15-5】 비교 연산자 (1>1)
• 16조건문 365
  • 학습목표불리언과 비교 연산자를 이용해 조건문을 작성함으로써 프로그램의 효용을 높이는 법을 배운다.
  • 동영상https://youtu.be/wjlbT3hvDMc (05분 14초)
  • 예제【3-16-1】 ex5.html 파일 생성
  • 【3-16-2】 1, 2, 3, 4를 출력하는 코드 추가
  • 【3-16-3】 프로그램의 이름 추가
  • 【3-16-4】 if-else 문
  • 【3-16-5】 if-else 문
• 17조건문의 활용 371
  • 학습목표좀 더 구체적인 예제를 통해 조건문이 가져다주는 효용을 이해한다.
  • 동영상https://youtu.be/Gt2iGEEKXww (07분 12초)
  • 예제【3-17-1】 night 버튼과 day 버튼을 하나로 만들기
  • 【3-17-2】 버튼에 onclick 속성과 값 추가
  • 【3-17-3】 형식에 맞게 조건문 수정
  • 【3-17-4】 버튼에 id 속성을 추가하고 조건문의 조건 수정
  • 【3-17-5】 조건에 따라 버튼의 value 값 변경
  • 【3-17-6】 기존에 있던 버튼 제거
• 18중복의 제거를 위한 리팩터링 380
  • 학습목표리팩터링의 개념을 소개하고 앞에서 만든 예제에 리팩터링을 적용해 코드를 개선하는 법을 배운다.
  • 동영상https://youtu.be/vwRkFRke7ls (06분 30초)
  • 예제【3-18-1】 night 버튼을 페이지 아래에도 추가
  • 【3-18-2】 아래에 있는 버튼의 id를 night_day2로 변경
  • 【3-18-3】 id 값 대신 자기 자신을 가리키는 this 키워드로 변경
  • 【3-18-4】 태그를 target 변수를 할당하고, target 변수 사용
• 19반복문 예고 386
  • 학습목표앞서 작성한 예제를 통해 반복문의 필요성을 이해한다.
  • 동영상https://youtu.be/ANDqF-NlWqQ (03분 34초)
• 20배열 389
  • 학습목표배열이 무엇인지 이해하고, 배열을 만들고 사용하는 문법을 익힌다.
  • 동영상https://youtu.be/aBJzzhQ6y-o (11분 14초)
  • 예제【3-20-1】 ex6.html 파일 생성 후 배열 만들기
  • 【3-20-2】 배열에서 데이터 꺼내기
  • 【3-20-3】 배열에서 들어있는 값이 몇 개인지 확인
  • 【3-20-4】 배열에 데이터 추가
• 21반복문 예고 396
  • 학습목표반복문의 개념을 이해하고, 예제를 통해 반복문의 원리와 사용법을 익힌다.
  • 동영상https://youtu.be/ZupPmuWPSdE (08분 07초)
  • 예제【3-21-1】 ex7.html 파일 생성
  • 【3-21-2】 while 반복문을 이용해 2, 3번째 코드를 3번 반복
• 22배열과 반복문 400
  • 학습목표배열과 반복문을 함께 사용할 때의 효용을 이해하고 사용법을 익힌다.
  • 동영상https://youtu.be/BjkfkKdlvLo (09분 52초)
  • 예제【3-22-1】 ex8.html 파일 생성
  • 【3-22-2】 배열 만들기
  • 【3-22-3】 코드 실행을 4번 반복하는 코드 작성
  • 【3-22-4】 배열에서 데이터를 가져와서 출력
  • 【3-22-5】 배열에 담긴 원소의 개수만큼 반복하도록 수정
  • 【3-22-5】 <li> 태그에 링크 추가
• 23배열과 반복문의 활용 406
  • 학습목표구체적인 예제를 통해 배열과 반복문을 함께 활용하는 법을 배운다.
  • 동영상https://youtu.be/hZdBDoYHd7E (09분 32초)
  • 예제【3-23-1】 웹 페이지에 있는 모든 태그 가져오기
  • 【3-23-2】 웹 페이지에 있는 모든 <a> 태그 가져오기(다시)
  • 【3-23-3】 모든 <a> 태그를 가져와서 alist 변수에 넣고 출력하기
  • 【3-23-4】 반복문으로 모든 링크 출력하기
  • 【3-23-5】 반복문에서 링크의 글자색 변경
  • 【3-23-6】 야간모드에서는 하늘색, 주간모드에서는 파란색으로 링크색 변경
• 24함수 예고 414
  • 학습목표 함수의 개념과 필요성을 이해한다.
  • 동영상https://youtu.be/WpTdoEvmFxw (07분 54초)
  • 예제【3-24-1】 중복된 코드를 <script> 태그로 옮기기
  • 【3-24-2】 복사해온 코드에 이름을 붙이고 함수로 만들기
  • 【3-24-3】 함수의 소괄호에 self 추가
  • 【3-24-4】 버튼을 클릭하면 nightDayHandler 함수가 실행되게 설정
• 25함수 420
  • 학습목표함수의 기본적인 문법과 함수를 구성하는 매개변수,인자, return 문을 배운다.
  • 동영상https://youtu.be/IOuePUzLdnQ (04분 52초)
  • 예제【3-25-1】 ex9.html 파일 생성
  • 【3-25-2】 2-1, 2-2가 반복되게 하기
  • 【3-25-3】 반복되는 코드를 함수로 만들기
  • 【3-25-4】 반복되는 코드를 함수로 바꾸기
• 26매개변수와 인자 424
  • 학습목표함수의 구성요소 중 함수의 입력과 관련된 매개변수와 인자를 소개하고 각각의 역할을 이해한다.
  • 동영상https://youtu.be/MXf9UqMXuGM (07분 07초)
  • 예제【3-26-1】 1+1을 출력하는 코드 작성
  • 【3-26-2】 1+1을 함수로 만들기
  • 【3-26-3】 입력값에 따라 다른 결과를 출력하는 함수로 만들기
• 27함수(return 문) 428
  • 학습목표함수의 구성요소 중 함수의 출력과 관련된 return 문과 표현식을 이해한다.
  • 동영상https://youtu.be/6MzCHO8M3Uc (07분 19초)
  • 예제【3-27-1】 덧셈한 결과를 빨간색으로 출력하는 새로운 함수 sumColorRed()
  • 【3-27-2】 sum2() 함수 추가
  • 【3-27-3】 sum2() 함수 호출
  • 【3-27-3】 return문 추가
• 28함수의 활용 432
  • 학습목표함수를 활용해 기존 코드를 좀 더 효율적으로 변경하는 법을 배운다.
  • 동영상https://youtu.be/WsPJ8FsoMcU (04분 35초)
  • 예제【3-28-1】 nightDayHandler() 함수를 만들고 <input> 버튼의 자바스크립트 코드 넣기
  • 【3-28-2】 onclick 속성값으로 nightDayHandler() 지정
  • 【3-28-3】 this 인자를 self 매개변수로 받기
  • 【3-28-4】 함수에서 this를 self로 변경
• 29객체 예고 437
  • 학습목표코드를 정리 정돈하는 수단으로서의 객체를 배우고 앞서 작성한 예제에 객체를 적용했을 때의 효과를 알아본다.
  • 동영상https://youtu.be/6lJEbSYA4B4 (13분 05초)
  • 예제【3-29-1】 모든 <a> 태그의 색을 변경하는 setColor 함수 만들기
  • 【3-29-2】 태그의 글자색을 변경하는 setColor 함수 만들기
  • 【3-29-3】 함수의 이름이 중복되지 않게 변경
  • 【3-29-4】 태그의 배경색을 변경하는 BodySetBackgroundSetColor 함수 만들기
  • 【3-29-5】 함수 대신 객체를 이용해 정리 정돈하기
• 30객체 쓰기와 읽기 447
  • 학습목표객체에 정보를 저장하고 가져오는 문법 및 이와 관련된 객체 리터럴과 객체 접근 연산자를 배운다.
  • 동영상https://youtu.be/2j04s1erzTs (07분 24초)
  • 예제【3-30-1】 배열 만들기, 배열에서 값 꺼내기
  • 【3-30-2】 객체의 만들기
  • 【3-30-3】 객체에 정보 담기
  • 【3-30-4】 객체에서 정보 가져오기 1
  • 【3-30-5】 객체에서 정보 가져오기 2
  • 【3-30-6】 객체에 정보 추가하기
  • 【3-30-7】 객체에서 정보 가져오기
  • 【3-30-8】 이름에 공백이 있는 정보 추가하고, 가져오기
• 31객체와 반복문 453
  • 학습목표객체와 반복문을 함께 사용하는 법을 배운다.
  • 동영상https://youtu.be/GIB8O6R3wko (05분 31초)
  • 예제【3-31-1】 반복문 for .. in
  • 【3-31-2】 반복문에서 객체의 키 값 출력
  • 【3-31-3】 반복문에서 객체의 키 값에 해당하는 데이터 출력
  • 【3-31-4】 반복문에서 객체의 키 값과 데이터 모두 출력
• 32객체 프로퍼티와 메서드 457
  • 학습목표객체에 소속된 변수인 프로퍼티와 객체에 소속된 함수인 메서드를 소개하고, 각각을 사용하는 법을 익힌다.
  • 동영상https://youtu.be/mjzx1qbyPwU (05분 26초)
  • 예제【3-32-1】 객체에 함수 담기
  • 【3-32-2】 showAll() 함수에 있는 코드를 showAll 메서드에 붙여넣기
  • 【3-32-3】 showAll 메서드 호출
  • 【3-32-4】 coworkers라는 객체 이름 대신 this 사용
• 33객체의 활용 461
  • 학습목표객체를 사용해 앞서 작성한 예제를 정리 정돈하고 완성한다.
  • 동영상https://youtu.be/JNaX6EG9-FI (05분 09초)
  • 예제【3-33-1】 Body 변수에 객체 담기
  • 【3-33-2】 객체에 setColor 프로퍼티 추가
  • 【3-33-3】 객체에 setBackgroundColor 프로퍼티 추가
  • 【3-33-4】 프로퍼티 사이에 콤마 추가
  • 【3-33-5】 LinksSetColor()도 객체로 만들기
• 34파일로 쪼개서 정리 정돈하기 467
  • 학습목표코드를 재사용하는 수단으로서 코드를 파일로 쪼갰을 때의 효용을 이해한다.
  • 동영상https://youtu.be/1f7Svm6ivDY (08분 10초)
  • 예제【3-34-1】 1.html 파일에 <input> 태그 붙여넣기
  • 【3-34-1】 2.html 파일에 <input> 태그 붙여넣기
  • 【3-34-1】 3.html 파일에 <input> 태그 붙여넣기
  • 【3-34-1】 index.html 파일에 <input> 태그 붙여넣기
  • 【3-34-2】 파일에 스크립트 코드를 복사해서 붙여넣기 _ 1.html
  • 【3-34-2】 파일에 스크립트 코드를 복사해서 붙여넣기 _ 2.html
  • 【3-34-2】 파일에 스크립트 코드를 복사해서 붙여넣기 _ 3.html
  • 【3-34-2】 파일에 스크립트 코드를 복사해서 붙여넣기 _ index.html
  • 【3-34-3】 color.js 파일 생성 후 스크립트 코드 붙여넣기
  • 【3-34-4】 공통 코드를 지우고 color.js 파일 포함시키기 _ 1.html
  • 【3-34-4】 공통 코드를 지우고 color.js 파일 포함시키기 _ 2.html
  • 【3-34-4】 공통 코드를 지우고 color.js 파일 포함시키기 _ 3.html
  • 【3-34-4】 공통 코드를 지우고 color.js 파일 포함시키기 _ index.html
• 35라이브러리와 프레임워크 473
  • 학습목표라이브러리와 프레임워크의 개념과 차이점을 이해하고 jQuery 라이브러리를 사용하는 법을 배운다.
  • 동영상https://youtu.be/pJTpl3umvE8 (12분 11초)
  • 예제【3-35-1】 jQuery 라이브러리 불러오기
  • 【3-35-2】 jQuery를 이용해 기존 코드 수정
  • 【3-35-3】 jQuery를 이용해 기존 코드 수정 2
  • 【3-35-4】 jQuery 라이브러리 불러오기 _ 1.html
  • 【3-35-4】 jQuery 라이브러리 불러오기 _ 2.html
  • 【3-35-4】 jQuery 라이브러리 불러오기 _ 3.html
  • 【3-35-4】 jQuery 라이브러리 불러오기 _ index.html
• 36UI vs. API 481
  • 학습목표UI와 API의 개념 및 UI를 사용하는 것과 API를 사용하는 것 사이의 차이점을 이해한다.
  • 동영상https://youtu.be/FrqgeNgUSB0 (05분 07초)
  • 예제【3-36-1】 버튼을 누르면 나오면 경고창
• 37수업을 마치며 484
  • 학습목표수업을 마무리하고 앞으로 나아가기 위해 배울 수 있는 내용들을 살펴본다.
  • 동영상https://youtu.be/BXdUSq8yhH4 (04분 37초)