javascript [all] - 총 14시간 23분 / 강의당평균 : 43분8초

javascript [all]

전체 : 14시간 23분 / 강의당평균 : 43분8초

01 자바스크립트의 정의와 변수,연산

자바스크립트의 기본적인 형태, html 페이지 생성, 스크립트 작성 후 출력, 변수, 연산

33분

책갈피 : [00:57] 에디트플러스 사용하기 / [02:45] 자바스크립트란? / [04:14] 기본적인 형태 보기 / [04:57] script / [05:27] 주석문 / [06:46] 스크립트 입력 도구 / [07:15] html 페이지 만들기 / [07:42] 자바스크립트 생성 문장 구성 / [09:01] document.writｅ / [09:50] 저장 / [10:05] 문법 강조 기능 / [10:46] 열기 / [11:48] 주석문 쓰기 / [12:52] 주석이 필요한 이유 / [13:56] 자바스크립트를 지원하지 않는 브라우저일 경우 / [15:07] html 페이지 템플릿 설정 / [16:00] 스크립트 작성 후 출력하기 / [17:48] 변수 / [19:33] 변수가 필요할 경우 / [20:18] 변수 이름 짓기 / [21:02] 출력 / [22:11] 변수 값 변경 / [22:18] 새로고침 / [23:06] 대소문자 구분 / [24:07] 예약어 / [25:17] 변수를 이용해 계산하기 / [26:41] 결과 확인 / [27:21] boolean / [27:48] 참이나 거짓인 경우 / [28:26] 진리값, 무한값, 숫자가 아닌값 / [29:41] 연산 / [30:45] equal 연산자 / [31:56] 비교연산자 / [32:19] 퍼센트 연산자

02 연산자와 조건문의 종류와 활용

문자열 더하기, 논리 연산자, 비트 연산자, 조건 연산자, 조건문

51분

책갈피 : [00:48] 문자열 더하기 / [01:56] 결과 확인 / [02:07] 숫자를 문자로 변경하기 / [02:28] 결과 확인 / [03:00] 문자+숫자 연산 / [03:53] 문자 붙이기 / [04:53] 변수를 이용해 계산할 경우 / [05:39] 대입 연산자 / [07:15] 곱하기 연산자 / [07:30] 나머지 연산자 / [08:16] ++ 연산자 / [08:58] 문서작성 / [10:24] 결과 확인 / [11:18] 관계 연산자 / [13:30] 결과 확인 / [15:09] 논리 연산자 / [17:59] 결과 확인 / [19:11] 비트 연산자 / [19:32] 이진수 / [20:47] & 연산자 / [21:29] l 연산자 / [22:18] 결과 확인 / [22:47] 조건 연산자 / [23:45] 관계 연산자를 이용해 작성하기 / [25:26] 결과 확인 / [26:11] 연산자 우선 순위 / [29:41] 조건문 / [30:11] if문 / [31:40] else / [32:07] 스크립트 만들기 / [32:29] 비교해주는 조건문 입력 / [33:15] 결과 확인 / [35:43] 중괄호가 있는 이유 / [36:30] 문장이 두줄이 들어간 경우 / [38:22] 괄호 사용시 주의사항 / [41:22] if else / [43:21] 결과 확인 / [43:37] switch문 / [44:37] 조건값 설정 / [46:15] 결과 확인 / [46:52] switch문의 특징 / [47:22] break / [48:22] default / [48:38] 결과 확인 / [49:52] break 부분 조절

03 반복문의 활용과 소스감추기

42분

책갈피 : [00:09] 반복문 / [01:14] 반복문이 없을 경우 / [01:53] for문 / [02:38] 구조 설명 / [05:42] 주의할 점 / [07:15] 값 출력 / [07:41] 결과 확인 / [07:54] 에러가 발생한 경우 / [09:01] 변수 초기화 / [11:37] while 문 / [12:52] 합계 구하는 명령문 작성 / [13:26] 조건문 입력 / [14:43] start 증가 / [15:41] 값 출력 / [16:26] 결과 확인 / [17:00] do~while문 / [18:15] 결과 확인 / [19:03] continue / [19:26] 구조 설명 / [21:48] 결과 확인 / [22:52] 자바 스크립트 소스 감추기 / [24:22] 자바 스크립트 js 파일로 저장후 실행시키기 / [24:52] js 파일 만들기 / [26:02] 결과 확인 / [26:26] 소스 보기 / [26:59] 함수 / [28:37] 분기 / [31:45] 함수 만들기 / [32:22] 스크립트 추가 / [32:36] 선 긋는 함수 만들기 / [33:04] 작업할 내용 입력 / [34:00] 결과 확인 / [34:22] 수정 후 새로고침 / [35:15] 내용 입력 / [35:37] 결과 확인 / [35:58] 줄바꿈 수정 / [36:28] 두 줄에 걸쳐 빈 공간 만들기 / [38:22] 매개변수 / [38:43] 내용 입력 / [39:42] var 예약어 / [40:38] 함수 불러오기 / [41:57] 결과 확인

04 전역/지역변수, Return값, 함수

alert함수, confirm,prompt함수

36분

책갈피 : [00:00] 전역변수와 지역변수 / [00:21] 전역변수와 지역변수의 정의 / [00:42] function / [01:00] 변수 생성 / [01:38] document.writｅ / [02:16] 스크립트 생성 / [02:28] 결과 확인 / [02:37] 줄바꿈 삽입 / [03:09] 문제가 생기는 경우 / [03:46] 결과 확인 / [04:35] 오류 확인 / [05:04] 전역변수와 지역변수의 차이점 / [07:39] 원격 열기 / [07:52] Return / [08:37] 주석 처리 / [08:56] 결과 확인 / [09:41] 받는 변수 생성 / [11:10] 결과 확인 / [11:45] confirm 함수 / [12:50] 내장 함수 / [13:25] alert 함수 / [14:30] 결과 확인 / [15:36] 줄바꿈 태그(\n) / [17:16] 탭 (\t) / [18:06] confirm 함수 예제1 / [19:12] Return / [19:48] 변수 생성 / [20:20] if 함수 / [21:04] 결과 확인 / [21:32] 대입연산자 / [23:20] confirm 함수 예제2 / [23:34] 다른페이지로 이동하기(location) / [24:06] == / [25:11] else if / [26:02] 결과 확인 / [27:05] 창 크기 변경(window.resizeto) / [28:27] 결과 확인 / [28:55] prompt 함수 / [30:15] 결과 확인 / [30:47] 익스플로러8 프롬프트 사용 설정 / [32:25] 제어문 삽입(switch, case) / [33:59] default / [34:59] 결과 확인

05 함수 part2

eval/isNaN/isFinite/escape/unescape/재귀함수

36분

책갈피 : [00:00] aval 함수 / [00:28] script / [01:56] aval 함수 정의 / [02:57] 함수 생성 및 부르기 / [03:19] function sum / [04:07] prompt 함수 / [04:52] inputvalue / [05:30] do while / [07:28] document.writｅ / [08:12] 결과 확인 / [09:18] prompt 함수에 초기값 설정 / [09:48] isNaN 함수 / [12:26] 결과 확인 / [13:15] isfinite / [13:57] 오류값 / [15:15] 유한값 / [15:50] else / [16:19] 결과 확인(잘못된 값) / [16:46] 결과 확인(정상적인 값) / [17:03] 숫자가 아닌 값을 입력하는 경우 / [18:02] escape와 unescape / [18:23] 문자셋이란 / [18:47] escape와 unescape 작성법 / [19:53] 결과 확인 / [20:42] 재귀 함수 / [21:21] function / [21:30] factorial(계승값) / [23:53] fact 함수 / [24:13] result / [25:05] return / [25:50] if 함수 / [26:46] document.writｅ / [27:03] 결과 확인 / [30:32] stack / [31:52] stack overflow / [33:28] 값을 입력받는 방식 / [33:52] prompt 함수 / [34:13] 결과 확인 / [35:13] 모든 스크립트 오류에 관련된 알림 표시

06 객체와 이벤트핸들러

객체의 개념/객체의 구성/OnLoad/OnUnLoad/OnClick

45분

책갈피 : [00:00] 객체 / [00:33] 객체의 개념 / [05:03] 객체의 구현 / [05:53] function employee / [07:15] 상세내용 입력 / [07:54] this / [09:27] 인수로 받은 값 넣어주기 / [11:25] 객체 만들기 작업 / [14:30] 출력하는 작업 / [17:57] 메소드 실행 / [19:40] 결과 확인 / [20:13] 띄어쓰기 / [22:13] 객체의 속성값 직접 변경하기 / [23:11] 결과 확인 / [24:55] 이벤트 핸들러의 개념 / [26:05] 대표적인 예제 확인 / [27:14] 이벤트 핸들러 종류 및 실행 상황 / [27:53] onLoad 이벤트 핸들러 사용하기 / [30:11] 결과 확인 / [31:37] onUnLoad 이벤트 핸들러 사용하기 / [31:54] 결과 확인 / [32:19] onClick 이벤트 핸들러 / [32:35] 태그 생성 / [33:50] 링크 걸기 / [35:15] a 링크 / [36:15] 결과 확인 / [36:34] 마우스 지나갈 때 그림 바꾸기 / [37:22] function mouseover_image / [38:15] 이미지 삽입 / [39:19] 이미지 변경 / [41:13] 결과 확인 / [42:32] 키보드를 눌렀을 때 그림 바꾸기 / [43:32] 결과 확인

07 객체 part1

내장 객체/Date 객체/string 객체

39분

책갈피 : [00:00] 내장객체의 종류 / [00:30] date 객체 / [01:40] 결과 확인 / [02:31] 원하는 정보만 구하기 / [03:07] getYear, getFullYear / [04:35] getMonth, getDate, getDay / [05:22] 결과 확인 / [06:19] switch case문 / [07:05] 결과 확인 / [07:30] toString, toLocalString / [08:28] toGMTString / [09:16] 특정날짜 활용 / [11:12] 생성된 객체의 값 변경(set) / [12:05] 특정날짜 구하기의 활용 / [12:21] D-day 구하기 / [16:01]] 결과 확인 / [18:57] string 객체 / [20:17] 변수 생성 / [21:00] 변수의 길이 알아보기(write) / [21:37] 결과 확인 / [23:11] 자바스크립트와 html 비교 / [23:32] anchor / [24:10] link / [24:29] big, blink / [25:08] bold, fixed, fontcolor / [25:41] fontsize, italics, small, strike / [26:11] sub, sup / [26:38] anchor 설정 / [27:00] 결과 확인 / [28:04] document.writｅ / [31:05] for 문 / [31:23] link / [32:33] bold / [32:52] 결과 확인 / [33:28] 문자열의 위치 알아내기 / [35:35] indexOf / [36:15] lastIndexOf / [36:42] charAt / [37:22] 결과 확인

08 객체 part2

string 객체/Math 객체/Array 객체

51분

책갈피 : [00:00] substring / [00:17] char@ / [00:52] 변수 생성 / [01:26] 메소드 출력 / [01:45] 결과 확인 / [03:36] slice / [04:38] 결과 확인 / [05:25] substr / [06:04] 결과 확인 / [06:50] UpperCase / [07:47] 결과 확인 / [09:04] LowerCase / [09:31] concat / [10:05] 결과 확인 / [11:30] split / [12:42] 결과 확인 / [13:08] Math 객체 / [13:22] Math 속성 / [15:17] Math 메소드 / [16:57] Pi를 활용한 면적 구하기 / [18:34] 결과 확인 / [19:08] Paw를 활용한 승수 구하기 / [19:40] 결과 확인 / [20:02] rendom을 활용한 난수 구하기 / [20:39] 결과 확인 / [21:05] round를 활용한 반올림 하기 / [21:49] max, min을 활용한 최대 최소값 구하기 / [22:48] 결과 확인 / [23:45] Array 객체 / [27:41] 변수 생성 / [28:22] 배열값 생성 / [29:58] document.writｅ 출력 / [30:31] 결과 확인 / [31:12] 반복문(for문) / [32:43] 결과 확인 / [34:04] length를 활용한 배열의 갯수, 길이 출력 / [36:33] Array 객체 메소드 / [36:55] 배열 생성 / [37:30] concat 메소드 / [38:33] 결과 확인 / [39:02] join 메소드 / [41:49] 결과 확인 / [43:10] 구분기호 삽입 / [43:47] revers 메소드 / [44:32] 결과 확인 / [45:59] slice 메소드 / [47:43] 결과 확인 / [48:14] sort 메소드1 / [49:05] 결과 확인 / [49:26] sort 메소드2 / [50:04] 결과 확인

09 객체 part3

Function 객체/Number 객체/event 객체

43분

책갈피 : [00:00] function 객체 / [00:40] 함수와 함수 개체의 차이점 / [00:51] 스크립트 추가 / [02:10] document.writｅ 출력 / [02:40] 변수 생성 / [04:16] 결과 확인 / [04:39] 인수 길이 구하기(length 속성) / [05:11] 결과 확인 / [06:01] 사칙연산 구하기 / [07:07] 결과 확인 / [07:38] arguments 객체 / [10:50] 결과 확인 / [11:02] caller / [11:43] 결과 확인 / [12:00] screen 객체 / [12:24] screen 객체 속성 / [13:33] color depth / [14:21] 결과 확인 / [16:14] 해상도에 따른 사이트 변화 / [18:25] number 객체 / [20:12] 스크립트 생성 / [21:18] 결과 확인 / [21;58] number 객체 속성 / [23:27] Event 객체 / [24:02] 파이어폭스와 인터넷익스플로러별 속성 / [24:19] 좌표 생성 함수 생성 / [26:48] 결과 확인 / [27:53] 컨트롤키 생성(ctrlkey) / [29:03] document.writｅ 출력 / [29:30] 함수 불러주기 / [30:22] 오류 수정 / [30:42] 결과 확인 / [31:32] 새로고침이 안되는 이유 / [32:07] 객체 구성 / [33:26] window / [34:02] alert / [34:49] 객체 정리 / [35:08] document 객체 / [35:31] history 객체 / [35:54] location 객체 / [36:30] frame 객체 / [36:42] navergator 객체 / [36:50] window 객체의 속성 / [37:44] 상태표시줄 표시 / [38:44] default status / [39:10] status / [40:05] 결과 확인 / [40:39] 이미지에 마우스오버일 경우 상태표시줄 표시 / [41:42] 결과 확인

10 window객체 메소드

open/close/setTimeout/clearTimeout/setInterval/clearInterval/back/forward/home, stop/find/print

50분

책갈피 : [00:00] window객체 메소드 / [00:06] open 메소드 사용하기 / [00:45] 스크립트 작성 / [01:04] popup창 열기 / [01:22] 인수 설정 / [02:41] open 메소드의 매개변수 / [04:54] 원격 파일로 저장 / [05:50] 결과 확인 / [06:22] 열기 버튼 생성 / [07:05] 결과 확인 / [07:47] open 메소드의 마지막 매개변수의 기능 / [08:20] resizable / [10:08] scrollbars / [10:48] menubar / [11:56] close 메소드 사용하기 / [13:53] 자식창 닫기 버튼 만들기 / [15:20] 결과 확인 / [15:58] setTimeout 메소드 / [16:30] 함수 생성 / [17:27] 카운터 증가 / [19:22] 재작동 / [20:08] if else / [21:46] 결과 확인 / [22:14] setInterval 메소드 사용하기 / [22:37] 함수 생성 / [22:56] if else / [23:16] clearInterval메소드 사용하기 / [24:10] 결과 확인 / [25:45] back 메소드 사용하기 / [26:13] 뒤로 버튼 생성 / [27:04] forward 메소드 사용하기 / [27:53] home 메소드 사용하기 / [28:25] stop 메소드 사용하기 / [29:22] find 메소드 사용하기 / [30:39] 스크립트 작성 / [30:57] 결과 확인 / [31:20] 찾기 버튼 생성 / [32:07] 인수 넣기 / [33:18] print 메소드 사용하기 / [33:58] 버튼 생성 / [35:46] 창 크기 변경하기(resizeBy, resizeTo) / [37:05] 함수 생성 / [38:43] 결과 확인 / [40:19] 창 위치 변경하기(moveBy, moveTo) / [41:55] 결과 확인 / [43:50] 스크롤하기(scrollBy, scrollTo) / [45:13] if else / [47:12] 결과 확인 / [48:39] 내맘대로 스크롤 버튼 생성

javascript [실무]

11 자바스크립트 실습 part1

한글자씩 타이핑되는 글자만들기/글자색깔 계속 바꾸기

44분

책갈피 : [00:00] 강의 소개 / [00:55] 웹 표준 / [01:50] 한글자씩 타이핑 되는 소스 만들기 / [01:20] 파이어폭스(Firefox)오페라(Opera) / [02:08] setTimeout() / [02:44] form tag / [03:03] textarea tag / [04:38] 사용자 정의 함수 / [05:23] EditPlus 단축키 설정 / [05:41] 내용 배열 입력 / [06:04] 배열(Array) / [08:16] 배열 길이 알아내기 / [08:27] tl.length / [08:57] 함수 만들기 / [09:37] 한글자씩 보여주기위해 잘라내는 작업(substring) / [09:50] tl.substring ( start, end ) / [12:26] textarea에 잘라낸 내용 넣기 / [13:05] document.textform.text1.value=ti[i].substring(0,j)+"_" / [13:56] setInterval 설정하기 / [13:50] onload() / [13:57] setInterval( 함수, 시간간격 ) / [15:02] 처음으로 되돌리기 위한 조건 작성 / [15:28] if ( j < tl.length ) / [17:54] i++ / [18:20] i=0 / [19:38] setInterval / [19:45] tl.length / [20:13] 결과 확인 / [21:30] 글짜 색깔 변경 / [21:52] navigator / [22:53] 브라우저 구분 코드 만들기 / [23:35] document.writｅ 출력 / [24:08] 결과 확인 / [25:18] if() 조건문 / [25:38] indexOf() / [25:54] if(navigator.appName.indexOf("Nescape")) / [26:48] document.writｅ 출력 / [28:18] 보여줄 내용 입력받기 / [28:32] prompt() / [28:52] 결과 확인 / [29:11] div tag / [30:54] document.writｅ 출력 / [32:27] 결과 확인 / [33:00] 글짜 색깔 바꾸기 / [33:10] function colorchange / [33:29] color1 = new color_array() / [33:42] 색깔을 지정하는 객체 생성 / [34:31] this / [34:50] arguments / [35:18] 색깔 종류 객체 만들기 / [36:47] this = color_array.arguments / [38:12] 색상 테이블 / [38:40] 색깔 바꿔주기 / [39:42] documnet.getElementById("div1").style.color / [40:38] if ( j >= color1.length) / [41:34] 함수 로딩 / [42:04] 결과 확인 / [43:04] 중요 포인트

12 자바스크립트 실습 part2

글자 돌려가며 찾아서 보여주기/배경 색 Fade 하기

40분

책갈피 : [00:31] 보여줄 텍스트 입력 / [01:08] var, 자바스크립트 변수선언 / [01:51] 찾을 문자 배열 입력 / [03:11] 배열 변수 생성 / [04:00] 빈 문자배열 만들기 / [04:49] text = "Start Roll Charactor" / [06:32] div / [06:52] 메인 함수 만들기 / [07:18] for문 / [08:00] function roll() / [10:51] for문 / [11:41] substring / [12:15] if( roll_char[i] != text.substring( i, i+1 )) / [13:23] for( var x=0; x < 70; x++) / [14:11] roll_char[i] = type_array[x+1]; / [14:46] break문 / [15:50] 중간 결과값 출력하기 / [17:08] out_text += roll_char[i] / [18:17] 찾은 출력하기 / [18:24] documnet.getElementById() / [18:44] onload, setinterval / [19:16] 결과 확인 / [20:45] 예제 미리보기 / [21:11] RGB Color / [21:28] 색상 체계 설명 / [21:40] 16진수 / [23:25] 배열 객체 생성 / [23:56] function make_array(n) / [24:17] 길이 지정 / [25:45] hex / [26:02] hexa 배열 변수 / [26:40] 16진수로 표현하기 / [29:52] RGB Color 구성 / [30:57] 10진수 → 16진수 함수 만들기 / [31:16] if ( dec < 0 ) {} else if ( dec > 255 ) {} / [31:35] return / [32:38] 10진법을 16진법으로 변환 / [34:24] 몫 구하기 Math.floor() / [35:59] 나머지 구하기 %(mod operator) / [36:40] "" 문자열 구성 / [38:23] 백그라운드 입력 작업 / [39:13] fade( 255,255,255, 0,0,0, 100)

13 자바스크립트 실습 part3

배경 색 Fade 하기/배경 그림 바꾸기

42분

책갈피 : [00:00] 배경색 바꾸는 함수 만들기 / [00:42] fade(startR, startG, startB, endR, endG, endB, step) / [01:17] document.bgColor = "#" + setR + setG + setB / [01:24] 단계별 계산 방법(알고리즘)설명 / [05:50] (step - i)/step / [06:00] i /step / [07:02] startR*(step-i)/step + endR*(i/step) / [07:34] Math.floor / [08:22] convertToHex / [09:08] setInterval함수 삽입 / [10:18] clearInterval함수 삽입 / [10:49] time = setInterval('fadecolor()' , 10) / [11:02] clearInterval(timer) / [11:45] 재귀함수, setTimeout() / [12:45] 소스 설명 정리 / [13:16] function make_array(n) / [13:24] hexa = new make_array(16) / [13:42] hexa[10] ='a' / [14:24] if ( dec < 0 ) {} else if ( dec > 255 ) {} / [14:40] "" 문자열구성 / [16:32] 값 변경하며 실행해보기 / [17:12] step 정의 / [17:24] 속도, 색상 변경 / [18:08] 주의사항 / [18:21] 배경 그림 바꾸기(onmouseover) / [18:47] 그림 만들기 / [19:04] img tag / [20:14] 원격 파일로 저장 / [20:40] 상대경로, 절대경로 정의 / [22:52] 결과 확인 / [23:11] 클립아트 / [24:09] 마우스 링크 걸어주기 / [24:39] a onmouseover / [25:10] onmouseout / [25:30] a href="#" / [25:41] 결과 확인 / [26:03] P 태그 / [26:30] 웹표준 / [26:40] 변수 지정 / [27:10] image_folder / [27:32] clear_back = new Image(); / [28:39] picture1_back.src = image_folder + "balloon.gif" / [30:27] function back_image_change(img) / [31:10] eval() / [31:52] back_image_change('picture1_back') / [33:10] 결과 확인 / [34:34] explorer cash 삭제 / [36:18] document.writｅ 출력 / [37:03] 자바스크립트 문자열 / [39:50] 결과 확인 / [40:22] 그림 위치 변경 / [40:30] image_folder ="image/"; / [41:07] 결과 확인

14 자바스크립트 실습 part4

풍선이 둥실 둥실 스크립트

48분

책갈피 : [00:06] 풍선이 떠오르는 스크립트 만들기 / [00:20] math객체 / [01:02] 클립아트 / [01:18] html 생성 / [01:30] setinterval / [02:21] 물음표 연산자 / [02:53] if함수를 가지고 값을 구분 / [03:29] body에 출력할 내용 없음 / [03:34] div tag / [03:43] document.writｅ / [04:00] 그림이 바뀔 수 있게 설정 / [04:15] 자바스크립트 생성 / [04:30] internet explorer버전 / [04:44] 파이어폭스 / [04:57] 각각의 변수에 논리연산자 지정 / [05:27] document.all객체 / [05:53] document.getElementById객체 / [07:58] 변수 선언 / [08:13] 이미지 개수 / [08:18] 속도 / [08:48] array에 각각 이미지 경로 / [09:03] 이미지 폴더를 변수로 지정 / [09:20] 배열 / [10:28] 좌표값 / [10:41] 풍선의 흔들리는 정도 / [11:03] 자바스크립트 작성 규칙 / [12:05] 가독성 / [12:50] 배열형태 객체 생성 / [13:54] 풍선 배치 작업 / [14:18] dx값 초기화 / [14:30] xp값 math객체-random / [15:30] yp값 math객체-random / [16:03] 곱해주는 값에 따라 위치 변경 / [17:03] am값 math객체-random / [17:22] stx값 / [17:36] stx값이 클경우 풍선의 흔들리는 정도가 빨라짐 / [17:52] sty값 / [18:03] sty값에 따라 풍선의 속도 조절 / [18:41] 기본적인 위치 지정 완료 / [19:48] or 연산자 / [20:29] 태그 작성 / [21:02] id값 지정 / [21:30] position-absolute / [21:40] css 관련 / [21:56] z-index / [22:44] visibility / [23:22] img tag / [24:11] div에 대해 그림 만들기 완료 / [24:37] 위치 값 조정 / [25:30] 숫자1을 변수로 변경 / [26:36] z-index값 변경 / [27:44] for문 안에서 변경 / [28:40] bal.length / [29:25] 하나 줄인 값 / [30:25] 기본적인 풍선 모양 완성 / [30:37] 풍선 확인 / [31:26] 기본적인 배치만 확인 / [31:37] 함수 만들기 / [31:56] for문 / [32:22] yp-세로 위치 / [34:06] 풍선을 화면에 유지 / [34:52] 새로운 위치 지정 / [35:14] 풍선의 x좌표를 랜덤하게 설정 / [36:13] 풍선의 y좌표를 가장 밑으로 설정 / [36:52] 풍선이 흔들리는 속도를 랜덤으로 설정 / [37:37] 브라우저 내용의 너비 값을 반환 / [38:52] 연산자 사용 / [39:07] 풍선의 좌우 흔들림 / [39:49] sin함수의 곡선 / [41:19] pixelTop / [41:37] scrollTop / [42:00] pixelLeft지정 / [42:30] x의 sin값을 반환 / [43:28] pixelTop이 아닌 top / [43:37] pageYOffset / [44:15] 실제로 부르는 부분 / [44:37] setInterval / [45:00] 실행 / [45:12] 잘못된 부분 수정 / [46:29] 저장 후 새로고침 / [47:22] 속도 조정 / [47:45] 수정 / [47:52] 새로고침 확인

15 자바스크립트 실습 part5

팝업창 띄우기(쿠키 저장하기/쿠키 읽어오기)

44분

책갈피 : [00:05] 팝업창 띄우기 / [00:11] cookie사용 / [01:38] 쿠키값 저장 / [02:07] 보안이 떨어지는 기능 / [02:20] 창이 열리고 닫히는 부분 쿠키값 사용 / [03:05] 팝업창 체크된 상태에서 닫기 / [03:34] 인터넷 옵션-쿠키 삭제 / [04:30] 쿠키를 읽고 창을 띄우는 부분 / [05:26] 쿠키값 저장하는 부분 / [05:43] html생성 / [06:11] 폼 만들기 / [06:28] 체크박스 만들기 / [06:46] 체크상자가 선택되어 있는 상태 / [07:25] 버튼 만들기 / [07:45] onClick이벤트 / [08:00] 저장 / [08:18] 실행 / [08:52] 객체 만들기 / [09:03] 창을 닫아주는 함수 / [10:05] 쿠키 저장에대한 내용 / [10:48] 체크박스가 체크되어있는 상태 / [11:05] setCookie / [11:16] 쿠키의 이름과 값 / [11:28] 쿠키의 유효기간 / [12:00] 쿠키의 속성 / [12:58] name/value 중요 / [13:28] exp / [13:58] 날짜와 관련된 변수 / [14:37] getDate-오늘 일자를 반환 / [15:20] 쿠키가 사라지는 날짜 / [15:41] 쿠키 설정 / [15:58] document.cookiｅ / [16:33] 문자열 처리 구문 / [17:15] path-생략 가능 / [17:33] expires-유효기간 설정 / [17:56] GMT를 사용하여 문자열로 변환된 날짜를 반환 / [18:33] 저장 후 확인 / [18:44] 수정 / [19:07] 새로고침 후 확인 / [19:15] 쿠키 확인 방법 / [19:37] 파일과 쿠키 삭제 / [20:26] 만료 날짜 / [20:47] 쿠키 파일 editplus에서 열기 / [21:22] 팝업창을 열어주는 html만들기 / [22:07] 저장 / [23:06] 쿠키가 있는지 없는지 확인 / [23:55] getCookie / [24:15] setCookie에서 지정한 이름 그대로 사용 / [24:36] 쿠키의 값이 opened인지 체크 / [25:21] 새로운 창을 띄우는 함수 / [26:11] 창의 크기 설정 / [26:30] 위치 설정 / [27:03] opener / [28:18] 실행 / [28:22] 페이지 오류 발생 / [29:06] 쿠키값을 가져오는 함수 만들기 / [29:44] cookiename+ / [30:06] 쿠키유무를 확인하는 조건문 / [30:22] length / [30:52] 쿠키값 확인 / [31:37] 쿠키가 저장되어 있는 것 확인 / [32:34] cookiename / [33:21] cookiename의 길이만큼 / [34:29] indexOf / [35:21] 세미콜론이 없는 경우 / [36:37] 쿠키값 돌려주기 / [36:49] unescape / [37:07] 시작위치부터 종료위치까지의 문자열을 반환해주는 구문 / [37:52] 자바스크립트에서 return의 의미 / [38:52] 새로고침 / [39:06] 오류 수정 / [39:34] 쿠키 삭제 / [39:45] 창 크키 수정 / [40:00] 제대로된 크기의 창 확인 / [40:22] firefox 닫기 실행 / [40:35] 동일한 이름을 가진 변수 및 함수의 충돌 / [41:36] firefox 쿠키 삭제 / [42:52] 검색기록으로도 쿠키가 삭제가 안된 경우

16 자바스크립트 실습 part6

타이틀바 텍스트 조작하기/리스트상자로 textarea 내용 변경하기

42분

책갈피 : [00:07] 윈도우 타이틀 바 / [00:35] setTimeout / [01:41] 새로운 html생성 / [01:52] 출력해줄 문자열 만들기 / [02:00] new Array-배열 / [02:27] contents 배열크기와 배열index차이 / [02:30] 저장 / [03:13] pointer변수 / [04:56] cont_cnt변수 / [05:12] expand-문자 확장인지 축소인지 결정해주는 변수 / [06:00] 가독성 / [06:41] 길이 지정 변수 / [07:23] 조건문-길이비교 / [08:31] cont_cnt++ / [08:46] document.title / [09:05] substring / [10:33] 종료인덱스 / [10:56] setTimeout / [11:13] 특정 시간 뒤에 함수를 한번 실행하는 함수 / [11:48] window.onload / [11:54] 저장 / [12:03] 문자열이 나타나는 것 까지 확인 / [12:28] expand / [12:46] 축소 작업 / [14:05] cont.substring / [14:43] true를 삭제해도 같은 의미 / [15:24] true를 false로 지정 할 경우 / [17:22] cont_cnt를 0으로 초기화 / [17:52] 스위치를 이용해 번갈아가는 작업 / [18:21] 번갈아가면서 실행되도록 제어하는 조건문 / [18:48] 포인터 증가 / [19:51] 마지막까지 증가하고 다시 초기화 / [20:02] 재귀호출 / [20:48] 새로고침 / [21:11] 문자열 앞/뒤 표시 / [21:37] 새로고침 / [22:21] 문자열 앞/뒤 표시 변경 / [22:48] 리스트상자로 textarea내용 변경하기 / [23:18] 리스트의 들어갈 내용과 상자에 나올 내용 / [23:37] html문서 생성 / [23:56] 내용을 입력해 줄 array생성 / [24:11] 내용 입력 / [24:22] ms word rand() / [25:07] 박스에 나타날 내용 삽입 / [25:36] form태그 / [25:48] get방식 / [25:55] center태그 / [26:07] selBox / [26:15] onchange / [26:51] option selected / [27:21] 선택요소 만들기 완성 / [27:32] 기본적인 선택박스 완성 / [28:11] br태그 / [28:26] textarea / [28:37] detailBox / [29:03] rows-텍스트영역의 줄 / [30:07] cols-글자 수 제한 / [30:22] 저장 후 새로고침 / [30:48] 선택했을 때 내용이 보여질 수 있는 코드 작성 / [31:15] change함수 생성 / [32:45] value값 변경 / [33:37] for문 사용 / [34:37] 저장 후 새로고침 / [34:49] 오류 수정 / [34:59] 선택하면 값이 나타나는 것 확인 / [35:30] 스크립트 내에서 처리할 수 있게 변경 / [35:44] document.writｅ / [36:29] 리스트내용 for문 사용 / [36:50] myitem / [37:22] 추가내용과 항목만 변경 / [38:07] 연결연산자+ / [38:52] item이 계속 변하기 때문에 i값 삽입 / [40:21] body에 들어갈 내용-document.writｅ / [40:30] 저장 후 새로고침 / [41:30] 내용과 아이템만 추가하면 자동으로 리스트값과 textarea값이 생성

17 자바스크립트 실습 part7

마우스, 키보드 차단하기

44분

책갈피 : [00:06] 마우스, 키보드 차단하기 / [01:14] oncontextmenu생성-return false / [01:51] ondragstart생성-return false / [02:29] onselectstart생성-return false / [02:38] 저장 / [03:05] 중간에 그림 삽입 / [03:28] 새로고침 / [04:28] 내용 확인 완료 / [05:29] 그림을 선택 했을 때 나타나는 메시지 / [05:41] 스크립트 추가 / [06:00] alert으로 경고메시지 출력 / [07:00] images속성 / [07:42] images.length / [08:33] onmousedown / [09:00] 저장 후 새로고침 / [09:11] 그림을 선택하면 메시지가 뜨는것 확인 / [09:28] 새로운 html생성 / [09:31] 태그에 제한 걸기 / [09:52] 그림 클릭 방지 / [10:33] 그림 추가 / [10:58] 스크립트 작성 / [11:11] 메시지 작성 / [11:22] 함수 만들기 / [11:37] 매개변수 / [12:39] -1값이 아닌 경우 / [13:03] event.button / [14:05] 태그네임 대문자로 작성 / [16:18] 마우스이벤트에 no_click / [17:07] 새로고침 / [17:56] internet explorer 확인 완료 / [18:07] firefox는 실행이 되지않는 것 확인 / [18:18] 새로운 코드 추가 / [18:48] Netscape입력 / [19:33] evt.which / [21:11] 저장 후 새로고침 / [21:22] contextmenu가 나타나는 것 수정 / [21:33] oncontextmenu생성-return false / [22:18] 다른 태그 제어 / [22:41] IMG태그를 A태그로 변경 / [23:11] A링크에 메시치 출력 / [23:33] 키보드 차단 / [24:03] 이미지도구를 이용한 저장 / [24:11] meta태그 사용 / [25:11] 스크립트 입력 / [25:40] ffevent.ctrlKey / [26:11] alert / [26:44] ffevent.shiftKey / [26:56] ffevent.altKey / [27:22] 똑같은 작업 하나 더 만들기 / [27:33] 이벤트 제거 / [27:41] event객체 사용 / [29:07] document.onkeydown / [29:48] 저장 후 새로고침 / [30:36] internet explorer에서 상태바 감추기 / [30:52] 링크 만들기 / [31:21] 저장 / [32:00] hide_status함수 선언 / [32:22] setInterval설정 / [32:52] 새로고침 / [33:22] 인터넷옵션-보안 / [33:50] 스크립팅-사용으로 설정 / [34:07] F11 제어 / [34:36] block_f11함수 선언 / [34:52] keycode / [36:22] 새로고침 / [37:07] 페이지 차단 / [37:59] 스크립트 추가 / [38:07] 정확한 url 인식 / [38:22] 저장 / [38:44] refferer / [39:37] alert / [40:28] 새로고침 / [40:57] 링크 만들기 / [41:28] 새로고침 / [42:00] 정상적인 접속 / [43:09] 경고를 주는 의미

18 자바스크립트 실습 part8

내용 펼치고 접기/메인,서브메뉴 접고펼치기

43분

책갈피 : [00:08] 글 내용 펼치고 접기 / [01:00] 새 html문서 생성 / [01:11] div 생성 / [01:22] 링크 만들기 / [01:49] 저장 / [02:28] div 생성 / [03:07] 줄바꿈하고 내용 입력 / [03:23] 저장 후 확인 / [03:50] 오류 수정 / [04:15] 접기 div감추기 / [04:24] div태그에 속성값 추가 / [04:55] 스크립트 생성 / [05:28] 저장 후 확인 / [05:44] 태그와 스크립트의 같은 효과 / [06:30] 함수 만들기 / [07:44] 저장 후 새로고침 / [07:56] 접었다 폈다하는 효과 / [08:26] 응용 예제 / [08:58] 하나의 함수를 사용 / [09:24] Internet explorer와 Netscape를 구분해서 작업 / [09:43] 스타일 추가 / [10:09] main menu와 sub menu 속성값 / [10:35] 저장 / [10:48] 메인메뉴 작성 / [11:26] 함수 하나로 사용 / [12:18] 메인메뉴 완성 / [12:41] 서브메뉴 작성 / [13:01] 메인에서 사용한 이름 그대로 사용 / [13:56] class=sub_m / [14:35] div닫기 / [15:07] 저장 후 확인 / [15:16] 링크 / [15:52] 펼쳐져있는 메뉴를 접어주는 코드 작성 / [16:52] getElementById / [17:48] 새로고침 / [17:56] 개체가 필요하다는 에러 / [18:26] 저장 후 확인 / [18:52] 태그로 작성 / [19:18] 하나의 함수로 처리 / [19:45] 인수 이름 정하기 / [21:00] all의 의미 / [21:29] 비어있는 값 / [21:45] 비교연산자와 대입연산자 / [22:21] 배열의 의미-대괄호 사용 / [22:52] 새로고침 / [23:07] 접고 펼치는 메뉴 완성 / [24:26] 선택 할 때마다 새로운 테이블이 구성되는 메뉴 / [24:56] 각각의 테이블 모양 확인 / [25:18] 코드 확인 / [25:32] 전체 테이블 안에 또 다른 테이블 / [26:30] 스타일 작업 / [26:47] 링크 / [27:15] 테이블을 넣기 위한 div생성 / [27:32] 저장 / [28:02] 스크립트 생성 / [28:21] 메인메뉴와 서브메뉴 / [28:48] 메인메뉴 작성 / [29:48] 서브메뉴 초기화 / [30:15] for문 / [31:18] 서브메뉴 작성 / [32:52] 또다른 서브메뉴 내용 / [33:49] 메인메뉴에 대한 하위메뉴 / [34:44] 서브메뉴 추가 / [35:07] 정확한 주소 입력 / [36:05] 문자열을 붙여 3개의 하위메뉴가 하나의 메뉴로 확인 / [37:15] 메뉴 구성 / [37:27] 메뉴 위치 / [38:22] 새로운 변수 생성 / [39:20] 테이블 상단부분 / [40:04] 테이블을 분리해서 작업 / [40:15] for문 이용하여 반복 / [41:22] 선택된 메뉴 / [41:49] 색 지정 / [42:35] 색 지정된 것 확인

19 자바스크립트 실습 part9

메인,서브메뉴 접고펼치기/떠다니는 메뉴 만들기

45분

책갈피 : [00:06] 메뉴 붙여주기 / [00:27] 테이블의 상단부분에 메인메뉴 붙여주기 / [01:26] bgcolor로 대체 / [01:48] 문자열 연결연산자 / [02:38] i값으로 변경 / [03:05] 마우스 오버됐을 때 위치 값 / [04:00] 마우스 선택 부분의 색 / [05:15] 메뉴메인 변경 / [05:28] i번째 있는 값 연결 / [05:45] 메인메뉴 완성 / [05:46] 메인메뉴를 확인하는 작업 / [06:00] window.onload / [06:30] 테이블 태그를 닫아주는 부분 / [07:10] 출력 / [07:42] 저장 후 확인 / [07:53] 마우스 오버했을 때 메인메뉴 색이 변하는 것 확인 / [08:24] 서브메뉴 만들기 / [08:31] 메인메뉴와 다른 점 / [10:26] bgcolor로 대체 / [11:28] 저장 후 확인 / [12:50] sel_menu_pos / [13:15] i값에 의해 붙는 메뉴 / [13:52] 변할 수 있는 부분만 변수로 처리 / [14:24] 새로고침 말고 초기화 할 수 있게 세팅 / [14:31] 함수 선언 / [15:22] document.onclick / [15:37] 저장 후 새로고침 / [16:56] 다른 브라우저 확인 / [17:41] 테이블 크키 조정 / [18:51] 떠다니는 메뉴 만들기 / [19:00] 저장 / [19:26] div태그 생성 / [19:55] 스타일-left위치는 초기화 위치 / [20:56] position-absolute / [21:52] 확인 / [22:11] 그림 나타나는 것 확인 / [22:59] 그림의 위치 조정 / [24:03] 함수 생성 / [24:25] 변수 생성 / [24:33] y는 세로로 이동하는 값 / [25:10] parselnt / [26:02] 이동할 위치값 지정 / [26:41] netscape와 internet explorer구분 / [27:30] 변수 만들기 / [28:00] if문 / [29:48] 물음표 연산자 / [31:11] floatm의 변화 / [31:37] 풍선이 움직이는 부분 구현 / [31:45] if문 / [32:15] yOffset / [32:22] 이동해야 할 위치값 - 현재 위치값 / [33:42] Math.abs / [34:07] 풍선이 부드럽게 이동 / [34:35] 단계별로 이동 / [35:13] step_s / [36:00] Math.ceil / [36:49] -yOffset / [37:52] parslnt값을 10진수로 인식 / [38:37] setTimeout / [38:58] 시간 정하기 / [39:15] 텍스트 내용 입력 / [39:45] onload / [39:58] 새로고침 / [40:07] 풍선 움직임 수정 / [41:00] interval값 조정 / [41:37] call_interval / [43:35] 움직일 타임에 움직일 수 있도록 interval값 조정 / [43:44] 새로고침 / [43:52] interval값 수정 / [44:00] 새로고침 후 확인 / [44:16] 다른 브라우저 확인

20 자바스크립트 실습 part10

자바스크립트 실습 part

45분

책갈피 : [00:15] 도움말을 보여주는 스크립트 / [00:38] 테이블로 구성 / [01:00] div생성 / [01:10] 저장 / [01:34] 테이블의 기본적인 모양 html로 작성 / [03:23] 테이블 안의 내용 삽입 / [03:38] align / [04:30] 기본적인 테이블 완성 / [05:30] 스타일 지정 / [05:59] position-absolute / [06:30] 자바스크립트 입력 / [06:41] xoffset/yoffset변수 / [07:38] 마우스커서 대비 나타나는 풍선의 위치 조정 / [08:20] skn/yyy변수 초기화 / [09:03] 세미콜론 / [09:30] 브라우저를 구분하는 변수 / [10:30] document.all / [12:20] if문 / [14:30] 개체 조작 / [14:37] if문 / [15:01] mousemove / [16:26] 풍선과 내용 만들기 / [16:56] 마우스 오버했을 때 내용 / [17:30] 테이블 색 지정 / [18:07] onmouseout / [18:40] 링크 / [19:30] cursor:hand / [20:41] 새로고침 / [23:37] 팝업 / [23:47] 오타 수정 / [24:00] 함수 생성 / [25:26] contents변수 / [26:56] back_color로 변경 / [27:45] char_color로 변경 / [28:03] message로 변경 / [29:10] netscape경우의 조건 / [31:26] internet explorer경우 / [32:30] 저장 후 새로고침 / [32:37] 기본적인 위치에 테이블 나타나는 것 확인 / [33:42] hide_tip함수 생성 / [35:13] 각각 다르게 정의 / [35:30] 자주쓰는 객체는 변수로 저장 / [35:37] 새로고침 / [36:05] 마우스아웃 확인 / [36:22] 마우스를 따라다닐 수 있도록 함수 만들기 / [36:59] 이벤트 인수 필요 / [37:44] pageX / [39:36] xoffset / [40:00] y값 / [40:22] yoffset / [41:22] 이미지에 onmousemove / [41:52] 새로고침 / [42:45] 문서에서 마우스가 움직일 때 / [43:37] 새로고침 / [43:52] firefox에서 확인 / [44:04] internet explorer에서 확인 / [44:52] xoffset/yoffset값 변경 / [45:15] 확인

샘플확인 : 알지오 검색후 -> 강의검색란 -> javascript [all]