javascript [실무] 전체 : 6시간 23분|회차당 평균 : 1시간 3분50초

javascript [실무]

전체 : 6시간 23분|회차당 평균 : 1시간 3분50초

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분

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

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