javascript [실무] 전체 : 9시간 27분|회차당 평균 : 47분15초

javascript [실무]

전체 : 9시간 27분|회차당 평균 : 47분15초

Paragon of Javascript - 윤형민

01 Chapter 

1HTML 속성 변경, 클릭시 속성 변경하는 스크립트, 유효성 검사 스크립트, 문자열, 연산자, 배열, 변수

1시간 20분

책갈피 : [00:00] HTML 속성 변경에 대해/[00:07] 이미지 가져오기, 변수 정의 /[00:31] function 변수 정의/[00:54] if문 추가/[01:13] 괄호 닫기/[01:46] 결과 확인/[02:28] 이름 틀렸을 경우/[03:13] 클릭시 속성 변경하는 스크립트 알아보기/[03:27] 버튼 설명/[03:46] 변수에 스타일 주기/[04:25] 결과 확인/[04:38] margin/[05:57] 다른 대상에게 결과값 나타내기/[06:26] 유효성 검사 스크립트 알아보기/[06:53] input/[07:19] function 변수 정의/[07:52] if문 추가/[08:32] 결과 확인/[08:49] 호출된 내용으로 변경/[09:51] document.write/[10:01] innerHTML/[10:15] CONSOLE.LOG/[10:23] Window.alert/[10:56] document.write 적용/[11:52] innerHTML 적용/[12:54] 지시 실행 알아보기/[13:01] var/[13:27] innerHTML 입력, 결과 확인/[14:04] 문자열 출력하기/[14:52] 따옴표로 문자열 구분/[15:46] 변수로 연산하기/[16:14] 대입연산자/[16:46] 표현식/[17:26] 식별자/[18:12] 대소문자 구분/[18:52] 중괄호 /[20:38] 텍스트 변경 출력/[20:56] 연산하지 않고 문자열 출력/[21:21] 할당 연산자/[21:57] 할당 연산자를 이용한 문자열 출력/[22:29] 정리/[23:32] 뺄셈 연산자/[24:09] 모듈 연산자/[24:33] 증가되는 연산자/[25:16] 감소되는 연산자/[25:28] 우선순위에 의한 연산/[26:16] 숫자, 문자 순서에 따른 연산/[26:59] 순서로 문자열 출력/[27:48] 자바스크립트의 배열 순서/[28:36] 함수 호출하여 결과값 반환하기/[28:47] 변수 정의/[28:56] return/[29:36] 반환값 이용하기/[31:34] 함수 수식 할당 , 변수값을 계산/[32:40] 기본적인 응용/[34:22] 현재 날짜, 시간 출력 버튼 생성/[34:47] 버튼 클릭시 버튼 안에 출력/[35:15] 줄바꿈/[35:58] 포함된 문구 변경/[36:37] replace/[37:16] length/[37:49] indexOf/[39:18] lastIndexOf/[39:35] search/[40:40] slice/[42:59] substring/[43:17] substr/[43:43] toUpperCase/[44:18] toLowerCase/[44:29] concat/[45:15] charAt/[45:30] split/[47:49] split 추가 설명/[49:38] 자바스크립트의 정수 인식/[50:32] 소수점 인식/[51:05] 0xff 16진수/[51:54] toString/[52:48] toExponential/[53:26] toFixed/[54:10] toPrecision/[54:45] Number, new Date/[56:46] parseInt/[58:07] parseFloat/[58:51] Number.MAX_VALUE, Number.MIN_VALUE/[59:07] Math.random/[59:24] Math.min/[59:45] Math.Max/[01:00:21] Math.round /[01:00:44] Math.ceil/[01:01:11] Math.floor/[01:01:53] Date/[01:02:15] new Date/[01:02:51] 제로시간 86400000/[01:04:36] toUTCString/[01:05:01] toDateString/[01:05:32] nes Date 다양한 출력 방법/[01:07:25] getTime/[01:07:55] getFullYear/[01:08:10] getDay/[01:09:35] setDate/[01:09:49] Date.parse/[01:10:44] setFullYear/[01:12:14] 배열 학습하기/[01:14:04] 배열 길이 출력/[01:14:48] 배열 요소에 다른 요소 추가/[01:15:13] push/[01:15:43] ul 과 li/[01:17:27] for문/[01:18:48] 연관 배열

02 Chapter 2

배열, 연산자, 내림차순&오름차순, 정규표현식, 유효성검사

1시간 33분

책갈피 : [00:02] 배열/[01:17] onclick/[02:01] push/[02:06] shift/[02:35] unshift/[03:20] length/[03:44] delete/[04:12] undefined/[04:22] splice/[06:01] return/[06:47] 내림차순,오름차순/[08:16] script/[08:48] concat/[10:59] click event/[11:06] Boolean/[14:55] 논리연산자/[15:03] And 연산자/[16:41] Not 연산자/[19:51] If문/[22:21] Switch문/[23:33] default/[23:46] getDay/[26:39] For문/[27:12] For문/[27:58] Loop/[30:13] Break/[31:09] continue/[31:55] break list/[32:44] undefined/[33:32] 배열/[33:56] new Date/[35:18] String/[35:28] toString/[35:35] undefined/[36:17] 정규표현식/[36:22] search/[39:07] click event/[39:43] replace/[40:28] replace/[41:10] i(대,소문자구분)/[44:16] catch/[44:52] input/[45:56] 공백/[48:53] debugger/[49:38] 변수지정/[49:49] typeof/[50:21] 매개변수/[50:34] If문/[50:40] 비교연산자/[51:28] If문/[53:07] 비교연산자/[53:18] Switch/[53:37] Case문/[55:41] Index 배열/[56:22] length/[56:59] Undefined/[57:27] 표준개체배열정의/[58:42] onsubmit/[59:24] If문/[01:00:22] return/[01:00:48] 유효성검사/[01:01:32] If문/[01:02:38] type=number/[01:03:30] Else문/[01:03:48] validationMessage/[01:04:18] validity/[01:04:30] validationMessage/[01:04:43] willValidate/[01:04:54] 유효성등록/[01:04:55] customError/[01:05:04] patternMismatch/[01:05:16] angeOverflow/[01:05:27] rangeUnderflow/[01:05:33] stepMismatch/[01:05:40] tooLong/[01:05:43] maxLength/[01:06:05] typeMismatch/[01:06:34] 함수정의/[01:06:43] If문/[01:08:47] Literal/[01:10:17] new Object/[01:12:31] Literal/[01:12:41] Pattern Literal/[01:12:56] 객체(Object) Literal/[01:13:23] typeof/[01:18:05] return/[01:19:44] Script함수/[01:21:25] arguments.length/[01:24:19] retun absum/[01:28:59] return/[01:30:01] 로컬변수/[01:30:26] 외부변수

03 Chapter 3

DOM 기능, 이벤트 핸들러, 인덱스, 폰트 속성 변경, 스타일 시트, 이벤트 함수

1시간 12분

책갈피 : [00:01] DOM기능/[00:37] document.getElementById().innerHTML/[01:46] document.getElementsByTagName()/[01:54] document.getElementByClassName()/[02:20] attribute/[02:28] setAttribute(attribute, value)/[02:41] style.property/[02:55] document.createElement/[03:09] document.removeChild/[03:16] document.appendChild/[03:28] document.replaceChild/[03:36] document.write/[03:47] 이벤트 핸들러/[03:56] onclick/[04:13] DOM 레벨/[04:42] document.anchors/[04:56] document.applets/[05:10] document.baseURI/[05:14] document.body/[05:25] document.cookie/[05:31] document.doctype/[05:36] document.documentElement/[05:41] document.documentMode/[05:49] document.documentURI/[05:54] document.domain/[05:58] document.embeds/[06:03] document.forms/[06:12] document.getElementById/[06:22] innerHTML/[07:18] document.getElementsByTagName/[07:38] abab[0]/[08:15] 인덱스/[08:44] document.getElementById/[09:13] '와 "의 차이/[09:45] document.getElementsByClassName/[10:31] document.querySelectorAll/[11:21] Date()/[11:49] document.write/[12:21] innerHTML 이용 값 변경/[13:10] 이미지 값 변경/[13:53] id 값 고유성/[14:08] 폰트컬러 변경/[14:30] 폰트 변경/[15:14] 폰트사이즈 변경/[16:07] 버튼 클릭시 스타일 변경/[17:31] 스타일시트 설명/[18:05] 움직이는 div 함수 만들기/[18:38] setInterval/[18:57] frame 함수 만들기/[19:16] clearInterval/[19:40] style.top, style.left/[20:05] if (ddd11 == 300)/[20:16] 속도 변경/[21:08] html 태그→자바스크립트/[21:20] this/[21:54] aa(this)/[22:41] 버튼클릭시 날짜출력/[23:11] onchange/[23:46] toUpperCase/[24:25] onmouseover, onmouseout/[25:15] 결과보기/[25:43] backgroundColor/[25:52] onmousedown/[26:35] 결과보기/[27:02] addEventListener/[27:14] Date()/[28:03] alert()/[29:17] addEventListener("click", )/[30:24] 코드 설명/[31:10] 3가지 이벤트 추가/[31:32] mouseover 이벤트 함수 만들기/[32:01] click 이벤트 함수 만들기/[32:06] mouseout 이벤트 함수 만들기/[32:16] br 태그/[32:52] 브라우저 사이즈 변경시 이벤트/[33:03] window.addEventListener("resize", function())/[33:45] XMLHttpRequest/[33:58] 매개변수/[34:48] function efef(a, b)/[36:10] 이벤트 발생시 요소 순서/[37:06] addEventListener("click", function(), false)/[37:33] padding/[37:50] addEventListener("click", function(), true)/[38:25] 결과보기/[38:55] removeEventListener 만들기/[39:50] addEventListener("mousemove", aaa)/[39:59] Math.random/[40:29] removeEventListener("mousemove", aaa)/[41:36] if (aa.addEventListener)/[41:46] attachEvent/[42:44] 노드 설명/[43:40] childNodes[0].nodeValue/[44:37] firstChild/[45:23] document.body.innerHTML/[45:56] document.documentElement.innerHTML/[46:21] appendChild/[46:29] createElement/[46:43] createTextNode/[47:16] 변수명 바꾸기/[47:59] insertBefore/[48:51] removeChild/[49:41] replaceChild/[50:21] getElementsByTagName("p")/[50:59] aaa.length/[51:34] 결과보기/[52:03] getElementsByTagName("p")/[52:10] for문/[53:10] BOM/[53:38] window.innerHeight/[53:40] window.innerWidth/[54:12] clientWidth/[54:22] clientHeight/[55:20] screen.width/[56:16] screen.height/[56:25] screen.availWidth/[56:48] screen.availHeight/[56:56] screen.colorDepth/[57:19] screen.pixelDepth/[57:41] window.location.href/[58:00] window.location.hostname/[58:12] window.location.pathname/[58:25] window.location.protocol/[58:48] window.location.assign/[59:58] history 설명/[01:00:23] window.history.back()/[01:00:54] window.history.forward()/[01:01:23] navigator.cookieEnabled/[01:01:57] navigator.appName/[01:02:08] navigator.appCodeName/[01:02:48] navigator.product/[01:02:56] navigator.appVersion/[01:03:13] navigator.userAgent/[01:03:28] navigator.platform/[01:03:50] navigator.language/[01:04:05] navigator.javaEnabled/[01:04:59] confirm/[01:05:51] if (confirm("ok") == true)/[01:06:00] if (confirm("ok") == false)/[01:06:37] prompt/[01:06:55] if (aaa != null)/[01:07:39] 줄바꿈/[01:08:03] \n/[01:08:24] \n\n\n/[01:08:32] setTimeout/[01:09:11] 1초 변경/[01:09:36] 3초 변경/[01:09:44] clearTimeout/[01:10:08] aaa = setTimeout(abab, 3000)/[01:10:40] setInterval(bbb, 1000)/[01:10:58] toLocaleTimeString/[01:11:22] setInterval(bbb, 5000)/[01:11:48] clearInterval

The Art of Javascript - 김진호

04 Chapter 1

serInterval, Array, 타이핑 효과, 폰트 색상 변경하기

35분

책갈피 : [00:14] form 정의/[00:26] textarea/[00:51] name의 중요성/[01:40] onload/[02:17] Array/[03:05] Array 쉼표(,) 구분/[04:42] tl.length/[05:25] function/[06:03] if/[06:21] Array 요소 접근/[06:32] substring/[07:27] substring 인자/[08:38] 커서가 깜박거리는 효과/[09:03] textarea에 내용 넣기/[09:37] document.write/[10:04] document로 textarea 접근/[10:50] document.textform.text1.value/[11:25] onload/[11:36] setInterval/[12:40] if/[12:54] tl[i].length/[13:58] else/[14:38] 결과 확인/[16:08] tl[i].length/[16:33] 다음줄 표시/[16:45] if/[16:59] tl.length/[18:05] else/[18:25] 코드 설명/[19:21] 결과 확인/[19:45] Array 수정 후 결과 확인/[20:43] 글자 컬러 변경하는 함수 만들기/[21:55] 사용자 정의 객체/[22:18] 함수 정의/[22:36] 생성자 함수/[23:02] 인수 삽입/[23:40] this.length/[23:56] this/[24:25] arguments/[25:02] arguments 전달인자/[25:18] arguments.length/[26:07] this[]/[26:23] arguments[]/[27:10] for/[27:51] this.length/[28:31] color_array 함수 설명/[30:27] document.getElementById()/[31:22] style.color/[32:08] j 변수 초기화/[32:45] if/[33:03] color1.length/[34:13] body onload/[34:33] setInterval

05 Chapter 2

찾아줄 문자열 적어주기, Fade 기능

50분

책갈피 : [00:01] text 가공/[00:33] var/[01:19] new Array/[02:19] 배열 변수 만들기/[02:40] 빈 배열의 의미/[03:20] for/[03:25] var/[03:42] text.length/[06:01] roll 함수 생성/[06:29] for/[07:29] if/[07:44] substring/[08:40] !=/[09:32] 이중 for문/[10:09] if/[11:24] break/[12:12] var/[12:38] for/[12:56] 복합할당연산자/[13:35] +연산자/[14:02] document.getElementById/[14:18] innerHTML/[14:36] onload="setInterval()"/[15:08] text.substring/[16:50] fade 기능 구현/[17:53] RGB/[18:32] make_array 함수 지정/[19:37] this.length/[20:22] for/[21:32] hexa/[22:01] array 생성/[22:22] 10진수를 16진수로 변환/[23:05] for/[24:42] 10진수/[25:03] 16진수로 변환 함수 생성/[25:38] if/[26:11] else if/[26:53] else/[29:03] 142를 16진수로 변환/[30:37] Math.floor/[31:02] Math.floor/[32:45] %연산자/[33:42] "" + 숫자의 의미/[34:56] background 입력해주기/[35:46] fade/[36:55] fade 함수 구현/[37:46] document.bgColor/[42:03] Math.floor/[43:10] convertToHex 함수 이용/[44:17] setInterval/[45:15] if/[45:25] clearInterval/[45:47] setInterval/[46:46] 재귀함수/[46:53] setTimeout/[47:41] background fade 기능 코드설명/[48:52] "" + 숫자의 의미/[49:33] Math.floor

06 Chapter 3

마우스 오버시 배경 이미지 변경, 움직이며 위로 떠오르는 효과 구현

53분

07 개발자를 위한 핵심 자바스크립트 프로그래밍 - Chapter 3

객체, 종류별 이벤트 핸들러

48분

08 개발자를 위한 핵심 자바스크립트 프로그래밍 - Chapter 4

내장객체, 남은 날짜 카운트 구하기, 문자열, length

52분

09 효율적인 프로그래밍을 위한 필수 과정 - Chapter 1

자바스크립트와 html 비교(anchor, bold, fontcolor, strike), 문자열의 위치 알아내기(indexOf, lastindexOf, charAt), 원하는 문자열 출력하기(substring, slice, substr), 대소문자 변경(toUpperCase, toLowerCase), 문자열 붙여주기(concat, split), Mate 메소드, Array

50분

10 효율적인 프로그래밍을 위한 필수 과정 - Chapter 2

Array 여러 개체들과 for문 으로 내용 증가되도 수정없이 할수있는방법, 관련된 개체실습, Function 개체

44분

11 효율적인 프로그래밍을 위한 필수 과정 - Chapter 3

arguments, screen, event 객체, Number속성, 팝업

48분

12 효율적인 프로그래밍을 위한 필수 과정 - Chapter 4

팝업조절, setTimeout, clearTimeout, Interval, find, print, resize, move, scrollBy

39분

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

※ 다음 강의는 순차적으로 업데이트 진행중입니다.