IT전문교육 의 리더!

HOME>IT전문가>Javascript / jQuery>javascript [실무]

javascript [실무]

10회차 속성과정|전체 : 9시간 7분|회차당 평균 : 54분42초
javascript [실무] / 2개월
javascript [입문 + 실무] / 4개월
270,000 165,000
  • 전문강사 : 윤형민/김진호
Study Guides
javascript는 제이쿼리의 기본이 되는 내용입니다. 이 내용을 알지 못한 상태에서는 제이쿼리의 라이브러리 사용을 전혀 이해할 수 없습니다. 또한 개발된지 오래되었음에도 불구하고 현재까지도 변경되거나 없어진 내용없이 크롬이나 스마트폰에서 여전히 사용중이며, 해당코드의 사용방법을 반드시 숙지하셔야 웹사이트의 전반적인 수정이 가능합니다.
 
  • Paragon of Javascript - 윤형민
  • 011시간 20분 Chapter 1HTML 속성 변경, 클릭시 속성 변경하는 스크립트, 유효성 검사 스크립트, 문자열, 연산자, 배열, 변수

    책갈피 : [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] 연관 배열

  • 021시간 33분 Chapter 2배열, 연산자, 내림차순&오름차순, 정규표현식, 유효성검사

    책갈피 : [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] 외부변수

  • 031시간 12분 Chapter 3DOM 기능, 이벤트 핸들러, 인덱스, 폰트 속성 변경, 스타일 시트, 이벤트 함수

    책갈피 : [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 - 김진호
  • 0435분 Chapter 1serInterval, Array, 타이핑 효과, 폰트 색상 변경하기

    책갈피 : [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

  • 0550분 Chapter 2찾아줄 문자열 적어주기, Fade 기능

    책갈피 : [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

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

    책갈피 : [01:31] onmouseover/[01:54] onmouseout/[03:01] image 객체 생성/[03:48] picture1_back 생성/[05:39] picture2_back 생성/[06:06] 함수 구현/[06:59] document.body.background/[08:04] onmouseover 함수 호출/[08:51] onmouseout 함수 호출/[09:47] picture2_back 함수 호출/[11:09] 따옴표 중복 사용/[11:48] document.write/[13:01] 이미지 경로에 변수 설정/[13:59] document.write/[15:05] onmouseout 코드 설명/[15:33] onmouseover 코드 설명/[15:57] ""과 " "의 차이/[18:01] 위로 올라가는 코드 구현/[18:32] setInterval/[18:53] var/[20:14] document.all/[20:52] document.getElementById/[21:14] !연산자/[23:02] 네스케이프에서 document.all/[23:43] 올라가는 이미지 개수 지정/[23:52] 속도 지정/[23:59] new Array()/[24:27] 배열에 이미지 경로 지정/[25:50] 배열 생성/[26:28] for문/[27:27] Math.random/[28:20] y좌표 설정/[29:23] am값 설정/[29:31] 흔들리는 속도 설정/[29:56] 올라가는 속도 설정/[30:23] if문/[31:10] or 연산자/[31:48] z-index/[32:13] visivility/[33:15] document.write/[35:03] z-index/[35:30] if문/[37:25] 이미지 추가/[38:20] 이미지 랜덤으로 띄울 때/[39:43] balloon 함수 구현/[40:09] for문/[40:40] sty 의미/[43:21] x좌표 설정/[43:45] y좌표 설정/[44:20] stx 흔들림 설정/[44:39] sty 속도 설정/[45:08] 화면 너비 설정/[46:15] document.body.clientWidth/[46:32] 좌우 흔들림 설정/[47:13] sin 함수/[48:02] if문/[48:58] style.pixelTop/[49:13] document.body.scrollTop/[49:45] Math.sin()/[50:43] else if/[51:35] pageYOffset/[52:13] setInterval

  • 0732분 Chapter 4

    책갈피 : [00:00] 팝업 기능 알아보기/[00:12] 쿠키 활용 예/[02:09] 팝업 창 만들기/[02:34] 닫기 버튼 이벤트/[03:04] closeWin 함수 구현/[03:20] self.close()/[04:56] checked=true/[05:31] if문/[05:55] checkbox.checked/[06:16] setCookie 함수 호출/[07:44] 쿠키 설명/[08:22] setCookie 함수 구현/[09:23] var/[10:04] todayDate.setDate()/[10:37] var todayDate = new Date()/[11:24] 쿠키 설정/[11:42] document.cookie/[12:51] escape/[13:19] 세미콜론/[13:32] path/[13:48] expires/[14:10] toGMTString()/[16:08] 부모창 코딩/[16:48] if문/[17:09] winopen 함수 구현/[17:56] getCookie/[18:32] ==연산자/[18:46] !=연산자/[19:07] window.open/[20:23] o_win.opener=self/[22:01] getCookie 함수 구현/[23:24] document.cookie.length/[24:01] document.write(document.cookie)/[25:43] 쿠키값 위치 찾기/[26:12] indexOf/[28:29] document.cookie.indexOf(";", sp)/[29:47] unescape/[30:15] return false

  • 0843분 Chapter 5

    책갈피 : [00:24] f_expand 함수 설명/[01:19] cont_cnt 변수 초기화/[03:01] pointer++/[04:09] contents.length-1/[04:54] 재귀호출/[05:30] setTimeout("f_expand()", 2000)/[07:16] selectbox 선택시 textarea에 출력하기/[08:34] select 태그 정의/[09:03] option 생성/[09:20] selected/[09:43] textarea/[10:21] 따옴표/[10:37] change 함수 구현/[11:30] selectbox.options[]/[11:58] selected/[12:29] textarea 값 설정/[13:54] for문/[15:17] document.write로 form 작성/[16:40] change 함수 실행결과/[17:11] option Array 생성/[18:09] for문 이용 option 출력/[20:19] length/[21:35] 결과보기/[22:00] 차단 스크립트 만들기/[23:05] oncontextmenu/[23:47] ondragstart/[24:43] 익스플로러에서 드래그 실행/[25:35] onselectstart/[26:21] protect_img 함수 구현/[26:43] alert/[27:01] click_image 함수 구현/[27:24] document.images/[28:10] document.images.length/[28:42] document.images[i].onmousedown/[29:48] onload/[30:02] onmousedown/[30:50] 보안 스크립트 만들기/[31:33] no_click(evt) 함수 구현/[32:22] navigator/[32:43] navigator.appName.indexOf("Explorer")/[33:45] event.button/[34:29] event.srcElement.tagName/[35:03] alert/[35:19] return false/[35:42] document.onmousedown/[35:58] navigator.appName.indexOf("Netscape")/[36:52] Explorer가 아닐 때/[37:21] event.button/[38:03] evt.which/[38:30] evt.target.tagName/[40:12] oncontextmenu="return false"/[41:52] A 태그 오른쪽 마우스 금지

  • 0940분 Chapter 6

    책갈피 : [00:07] alert 팝업 생성하기/[00:46] 메타 태그 추가/[01:42] ctrlKey/[02:09] altKey/[02:22] shiftKey/[02:51] function ieclick/[04:09] event객체/[04:56] navigator/[05:55] Explorer, Netscape/[07:19] pc,모바일 링크값 생성/[07:56] 함수 생성/[08:07] setInterval/[09:52] 전체화면 없도록 함수 생성/[10:29] cancelBubble = ture/[10:46] returnValue = false/[11:21] onkeydown = block_f11/[11:32] 결과 확인/[12:09] block_f11 주석처리/[12:16] Referer 만들기/[13:34] Url 변수 지정/[13:46] If문 작성/[14:37] alert 문구 작성/[14:40] window.location/[15:23] 결과 확인/[17:46] 하부메뉴 만들기/[17:57] div 생성/[18:17] a링크 생성/[18:27] onclick 함수 삽입/[20:00] getElementByld/[20:25] style.display=none/[20:41] 결과 확인/[21:14] spread 함수 생성/[22:56] fold 함수 생성/[23:02] 결과 확인/[23:36] spread,fold 함수 주석처리/[23:42] 단일 함수 만들기/[23:59] 스타일 시트 정의/[24:26] a링크 생성/[25:24] 결과 확인/[25:38] br태그 삽입/[26:14] menu1 div 생성/[27:29] 서브 메뉴 생성/[29:18] For문 작성/[32:24] 결과 확인/[33:03] menu_fold 함수 생성/[34:03] navigator/[37:12] Netscape 추가

  • 1049분 Chapter 7

    책갈피 : [00:05] 스타일 생성/[00:21] body에 div 생성/[00:34] Array 생성/[03:07] For문 작성/[04:09] 길이값 정의/[04:42] 초기화 하는 이유/[05:14] 부메뉴 내용 생성/[06:23] menu_sub[0]/[08:02] br태그 이동/[09:29] menu_main_draw 함수 생성/[09:45] menu_t 변수 생성/[10:50] For문 작성/[11:38] If문 작성/[13:01] 색상 삽입/[15:03] 연결 연산자/[15:50] onMouseOver/[16:45] i값 정의/[18:28] If문 과정/[19:40] sel_menu_pos/[20:42] menu_main/[21:22] window.onload 정의/[22:23] 마무리 태그 생성/[23:04] document.getElementById/[23:26] move_color/[24:08] 결과 확인/[26:36] menu_sub 가져오기/[26:52] 결과 확인/[27:15] 주석 처리/[27:24] 풍선 이미지 만들기/[27:43] floatm 함수 작성/[27:51] yMenufrom 변수 생성/[27:59] parseInt 입력/[28:54] yMenuTo 변수 생성/[29:48] Netscape, IE 분리/[30:00] If문 작성/[31:13] 선택 연산자/[31:52] window.pageYOffset/[32:19] document.body.scrollTop/[33:22] If문 주석 처리/[35:45] 애니메이션 구현/[35:52] If문 작성/[36:21] yOffset 정의/[37:45] Math/[38:41] slow motion 효과/[39:05] setp_s 변수 생성/[39:59] Math.ceil/[41:16] yOffset = -yOffset/[42:14] floatMenu.style.top/[42:45] parseInt 입력/[43:51] setTimeout 정의/[45:00] body onload=floatm/[45:45] IE, Chrome에서 테스트/[46:43] interval 조정/[47:06] 결과 확인/[48:02] 초 단위 설정 테스트