javascript [실무] 전체 11시간 20분 강의당평균 29분33초

javascript [실무]

전체 : 11시간 20분|강의당평균 : 29분33초

01 한글자씩 타이핑되는 글자만들기

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

22분 

책갈피 : [00:04] 강의 소개/[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)/[06:38] 줄바꿈/[08:16] 배열 길이 알아내기/[08:27] tl.length/[08:57] 함수 만들기/[09:37] 한글자씩 보여주기위해 잘라내는 작업(substring)/[09:50] tl[i].substring ( start, end )/[10:34] substring(0,j)/[11:09] i=0, j=0 (변수선언)/[11:49] substring(0,j) + "_"/[12:26] textarea에 잘라낸 내용 넣기/[13:05] document.textform.text1.value=ti[i].substring(0,j)+"_"/[13:56] setInterval 설정하기/[13:50] onload()/[13:57] setInterval( 함수, 시간간격 )/[14:42] j값 증가/[15:02] 처음으로 되돌리기 위한 조건 작성/[15:28] if ( j < tl[i].length ) /[16:06] j=0 (초기화)/[17:54] i++/[18:20] i=0/[19:38] setInterval

02 글자색깔 계속 바꾸기

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

23분

책갈피 : [00:21] navigator/[01:50] 브라우저 구분 코드 만들기/[02:00] document.write(navigator.appName)/[03:48] if() 조건문/[04:10] indexOf()/[04:24] if(navigator.appName.indexOf("Netscape")) /[05:19] "현재 브라우저는 Netscape 또는 FireFox 입니다"/[06:13] "현재 브라우저는 Internet Explorer 입니다"/[07:05] prompt()/[07:33] 보여줄 내용 입력 받기(prompt)/[08:17] div tag/[09:28] document.write("")/[09:44] "div id ='div1'"/[10:54] 결과 확인/[11:29] 글자 색 변경/[11:41] function colorchange()/[11:59] color1 = new color_array()/[12:19] function color_array() /[13:00] 색깔 바꾸는 함수 만들기/[13:09] this/[13:24] arguments/[13:42] 색깔 종류 객체 만들기/[14:00] this[i] = color_array.arguments[i]/[14:42] for문 작성/[16:48] 색상 테이블(색상 코드)/[17:12] 색 변경/[17:23] documnet.getElementById("div1").style.color/[18:51] j++/[19:13] if(j>=color1.length)/[21:34] 이번강의핵심

03 글자 돌려가며 찾아서 보여주기

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

21분

책갈피 : [00:00] 소스 소개/[01:08] var, 자바스크립트 변수선언/[01:51] 찾을 문자 배열 입력/[02:02] var type_array = new Array()/[04:00] 빈 문자배열 만들기/[04:49] text = "Start Roll Charactor"/[06:32] div id ='div1'/[06:52] 메인 함수 만들기/[07:21] For문/[08:00] function roll()/[10:56] for (var i = 0; i < text.length ; i++)/[11:31] if( roll_char[i] == text.substring( i, i+1 ))/[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:52] 결과확인/[16:19] var out_text =''/[16:42] For문/[17:08] out_text += roll_char[i]/[18:24] documnet.getElementById()/[18:45] onload()/[18:56] set Interval/[19:23] 최종 결과 확인/[19:59] 값 바꿔보기/[20:02] Start Roll Character → yes Javascript

04 배경 색 Fade 하기1

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

19분

책갈피 : [00:01] 소스 내용 소개/[00:29] RGB Color/[00:43] 색상 체계 설명/[00:57] 16진수/[02:59] 배열 객체 생성하기/[03:12] function make_array(n)/[03:13] 갯수n (16진수 저장공간 생성)/[03:46] this.length = n/[04:08] 배열 초기화/[04:33] this[i] = 0/[05:03] hex(hexadecimal number)/[05:17] 16진수 배열 만들기/[06:02] 10 => A, 11 => B/[06:36] hexa[i] = i/[06:58] hexa[10]='a'/hexa[11]='b'.../[09:15] RGB Color 구성/[10:11] 10진수 → 16진수 함수 만들기/[10:18] function convertToHex(dec)/[10:42] if ( dec < 0 ) {} else if ( dec > 255 ) {}/[11:17] return "ff"/[11:38] return ""(null문자열) +/[11:59] 10진법을 16진법으로 변환/[14:14] Math.floor()/[15:29] %(mod operator)/[15:58] "" 문자열 구성/[18:01] 메인 함수 만들기/[18:03] function fadecolor()/[18:32] fade( 255,255,255, 0,0,0, 100)

05 배경 색 Fade 하기2

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

18분 

책갈피 : [00:00] 배경색 바꾸는 함수 만들기/[00:42] fade(startR, startG, startB, endR, endG, endB, step)/[01:17] document.bgColor = "#" + setR + setG + setB/[01:24] 단계별 계산 방법(알고리즘)설명/[02:56] startR + endR = 100%/[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] "" 문자열구성/[15:31] 단계별로 색상 변경/[16:02] Math.floor/[16:20] document.bgColor= "#"+ setR + setG + setB/[16:32] 값 변경하며 실행해보기/[17:12] step 정의/[17:48] 결과 확인/[17:54] 숫자값에 따른 빠르기 조정

06 배경 그림 바꾸기

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

23분

책갈피 : [00:08] onmouseover/[00:36] p tag/[00:40] 그림 삽입하기/[00:46] img tag/[00:49] img src="img/balloon.gif" border=0/[01:54] 원격 파일로 저장/[02:20] 상대경로 절대경로 이해하기/[02:28] 상대경로/[03:21] 절대경로/[04:56] 클립아트/[06:17] a tag/[06:56] onmouseout/[07:16] a href="#"/[08:11] 웹표준/[08:38] 이미지 경로저장 변수 사용하기/[09:31] clear_back = new Image();/[10:34] picture1_back.src = image_folder + "balloon.gif"/[10:48] picture1_back.src = "img/balloon.gif"/[12:07] 배경 변경하는 변수 작성/[12:20] function back_image_change( img )/[12:49] eval()/[13:41] back_image_change('picture1_back')/[13:49] eval(img.src)/[14:14] mouseout의 경우/[14:51] 결과 확인/[15:35] src 속성/[15:52] 폴더 변경/[16:14] explorer cash 삭제/[18:08] html테그→자바스크립트/[19:24] document. write("")/[19:40] img arc='image/ballon2.gif'/[21:43] 결과 확인/[21:58] 그림 위치 바꿔보기/[22:11] image_folder ="image/";

07 풍선이 둥실 둥실 스크립트

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

25분

책갈피 : [00:02] 완성모양 미리 보기/[00:17] Math/[01:28] setInterval/[02:19] 삼항연산자/[03:38] document.write/[04:19] 브라우저 구분하기/[04:32] IE(Internet Explorer)버전/[04:43] 파이어폭스(Firefox)/[04:56] 논리연산자/[05:26] document.all/[05:50] document.getElementById/[07:52] 변수 정의하기/[08:49] 이미지 경로 저장 변수 만들기/[09:00] image_folder ="image/"/[09:16] bal[0] = img_folder + "balloon.gif"/[10:06] var dx, xp, yp (임의로 정한 이름)/[10:34] var am, stx, sty/[10:58] var i/[11:02] 자바스크립트 작성 규칙/[12:04] 가독성/[13:47] 기본 배치 작업 코드 작성/[14:32] random()/[15:24] yp[i] = Math.random() * doc_height/[17:03] am[i] = Math.random() /[17:20] stx[i] = 0.02(속도) * Math.random()/10/[17:53] sty[i] = 0.7(속도) * Math.random()/10/[19:50] or 연산자/[20:55] div 태그 작성하기/[21:30] position/[21:38] CSS/[21:55] Z-INDEX/[22:42] VISIBILITY/[23:23] img tag

08 풍선이 둥실 둥실 스크립트2

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

23분

책갈피 : [00:04] html테그→자바스크립트/[01:48] Z-INDEX/[03:53] bal.length/[04:32] if ( j >= bal.length -1 )/[05:11] random()/[05:44] 결과확인/[06:05] 이미지 폴더 이름 변경/[06:44] function balloon()/[07:01] 풍선 이동 변수 작성하기/[07:04] For문/[08:28] yp(i) -= sty(i)/[09:52] yp(i) < -100/[10:49] xp(i) = Math.random() * (doc_width - am(i) - 30)/[11:25] yp(i) = doc_height/[12:05] stx(i) = 0.02 * Math.random()/10/[12:53] window.innerWidth/[13:28] document.body.clientWidth/[13:50] window.innerHeight/[14:07] 삼항연산자/[14:58] sin함수/[15:32] 풍선 이동 코드 작성하기/[15:44] document.getElementById/[16:29] document.getElementById().style.pixeTop/[16:52] document.body.scrollTop/[17:09] document.getElementById().style.pixeleft/[17:38] Math.sin(x)/[18:39] document.getElementById().style.top/[18:51] pageYOffset/[19:07] document.getElementById().style.left/[19:47] setInterval/[20:32] 코드 수정/[22:38] 풍선 속도 조정/[22:50] stx(i) = 0.02 + Math.random()/10

09 팝업창 띄우기(쿠키 저장하기)

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

21분

책갈피 : [00:10] Cookie/[00:24] 쿠키란?/[02:05] 쿠키 보안/[02:41] 작동원리 설명/[03:28] 쿠키삭제/[04:03] 부모창과 자식창/[05:16] 자식창 필요 요소/[06:06] form만들기(체크박스,닫기버튼)/[06:34] input type= checkbok/[06:50] checked = true/[07:27] input type = button/[07:43] onClick()/[07:56] closewin() 으로 저장/[08:41] Error 확인/[09:02] self.close();/[10:14] 창 닫기 함수 만들기/[10:41] if ( document.close.checkbox.checked == true )/[10:33] 쿠키 저장 할지 안할지 검사하기/[11:25] setCookie( "Nopopup", "opened", 1)/[11:58] cookie 속성/[13:04] 쿠키 저장 함수 만들기/[13:52] 날짜별로 자동 삭제 되게 설정하기/[14:03] var today = new Date();/[14:36] today.getDate();/[15:56] document.cookie/[16:29] name + '=' + value/[16:52] escape(value)/[17:03] cookie형식/[17:14] path/[17:28] expires/[17:46] toGMTString()/[19:14] 쿠키확인/[19:23] 파일보기/[19:35] 파일, 쿠키삭제/[20:17] 만료 날짜/[20:44] EditPlus에서 열기/[20:54] 쿠키 확인

10 팝업창 띄우기(쿠키 읽어오기)

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

22분

책갈피 : [00:12] 창 열기 버튼 만들기/[00:40] onClick()/[01:20] 오류 발생/[01:28] winopen() 개체 필요/[02:07] 창 열기 함수 만들기/[02:27] 쿠키가 있는지 검사/[03:17] if(getCookie("Nopopup") =='opened')/[03:29] (getCookie("Nopopup") !='opened')/[04:00] window.open/[05:41] opener/[06:59] 오류 확인/[07:45] 쿠키 가져오기 함수 만들기/[08:16] cookiename+ "="/[08:54] if (document.cookie.length > 0 )/[09:42] document.cookie/[10:33] 원하는 쿠키값 위치/[11:11] document.cookie.indexOf(cookiename)/[11:51] if (sp != -1)/[12:01] sp += cookiename.length/[13:07] ep = document.cookie.indexOf( ";" , sp )/[14:13] if(ep != -1)/[14:40] ep = document.cookie.length/[15:09] 결과값(쿠키값) 되돌려주기/[15:28] unescape()/[15:43] document.cookie.substring( sp+1, ep )/[16:28] return/[17:49] 코드 수정/[17:57] if(ep == -1)/[19:12] form name=close/[20:22] Firefox 쿠키삭제/[21:01] setCookie/[21:34] 검색기록으로도 쿠키가 삭제가 안된 경우

11 타이틀바 텍스트 조작하기

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

23분

책갈피 : [00:04] 윈도우 타이틀 바/[00:31] 구현 원리 설명/[01:47] 보여줄 문자열 입력하기/[01:55] contents = new Array()/[02:24] contents 배열크기와 배열index차이/[03:06] 변수 선언/[03:10] pointer = 0/[04:54] cont_cnt = 0/[05:16] expand = true/[05:28] function f_expand()/[06:02] 가독성/[06:03] cont = contents[pointer]/[06:48] cont_length = contents(pointer).length/[07:19] if(cont_cnt < cont_length)/[08:31] cont_cnt++/[08:47] document.title/[09:01] cont.substring((cont_length - cont_cnt)/[10:31] cont_length)/[11:08] setTimeout("f_expend()", 5)/[11:45] window.onload/[12:13] 축소 작업/[14:04] cont.substring(cont_cnt, cont_length)/[14:36] if(expand == true) vs if(expand)/[15:55] cnt 무한정 증가/[16:42] if (cont_cnt < cont_length)/[17:21] else{ cont_cnt=0 }/[17:58] 스위치 변수 사용하기/[18:20] if(expand){expand = false} else{expand = true}/[18:56] pointer++/[19:40] if(pointer > contents.length-1)/[20:02] 재귀호출/[20:49] 결과 확인/[21:12] 정리, 응용

12 리스트상자로 textarea 내용 변경하기

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

19분 

책갈피 : [01:05] 출력할 내용 입력/[01:11] cont = new Array()/[01:32] MS WORD rand()/[02:44] 리스트 상자, textarea를 html로 작성하기/[02:59] Form Method = "GET"/[03:07] center태그/[03:18] select name="selBox"/[03:25] onchange="change()"/[04:03] option selected/[04:18] option/[04:43] 결과확인/[04:56] text area, 함수/[05:20] br/[05:26] p align/[05:44] textarea name="detailBox"/[06:12] rows/[07:21] cols/[08:57] 함수 작성하기/[08:57] 선택된 내용에 따라 값 변경하기/[09:25] selBox.options[1].selected/[10:05] document.strBox.detailBox.value/[10:44] For문/[12:41] html→자바스크립트로 변환/[12:52] document.write("")/[14:01] myitem = new Array()/[15:08] 반복할 부분 작성/[15:21] 연결연산자 +/[15:57] myitem.length/[17:44] 결과확인/[18:01] 내용 추가 혹은 삭제시(cont,item추가)

13 마우스, 키보드 차단하기1

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

23분

책갈피 : [00:58] 마우스 오른쪽 버튼 차단하기/[01:07] BODY oncontextmenu="return false"/[01:48] ondragstart="return false"/[02:25] onselectstart="return false"/[02:37] 원격 파일로 저장/[03:00] 그림 삽입/[03:08] img src="image/balloon.gif"/[03:24] 내용을 끌기 해보세요./[04:49] Firefox 적용 여부 확인/[05:22] 그림 클릭시 메시지 보이며 차단하기/[05:38] function profect_img()/[06:09] alert("그림에 손대지 마세요!")/[06:22] return false/[06:30] function click_image()/[06:42] if(document.images)/[07:22] for(var i=0 ; i < document.images.length ; )/[08:13] document.images[i].onmousedown = protect_img/[09:01] 결과 확인/[09:25] IE용 IMG태그에 오른쪽마우스 차단 걸기/[09:49] 태그에 제한을 거는 스크립트 입니다./[10:18] 그림 삽입/[11:06] var click_message="오른쪽 마우스 금지입니다"/[11:26] function no_click(e)/[12:12] if(navigator.appName.indexOf("Explorer"))/[13:35] if(event.srcElement.tagName == "img")/[14:20] alert(click_message)/[16:24] document.onmousedown = no_click/[16:46] if(navigator.appName.indexOf("Explorer") !=-1)/[17:07] 결과 확인/[18:25] FF용 IMG태그에 오른쪽마우스 차단걸기/[21:23] contextmenu ="return false"/[22:15] 링크에 오른쪽 마우스 차단 걸기/[22:24] 하이퍼링크 삽입

14 마우스, 키보드 차단하기2

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

20분 

책갈피 : [00:30] 이미지 도구 나타나지 않게 설정하기/[00:44] meta 태그/[00:57] http-equiv="imagetoolbar" content="no"/[01:34] ctrl, shift, alt키 누를때 차단하기 /[01:43] function ffclick(ffevent)/[02:07] if(ffevent.ctrlKey)/[02:39] alert("ctrl키가 눌렸습니다")/[02:53] 원격 파일로 저장/[03:08] return false/[03:18] if(ffevent.shiftKey)/[03:34] if(ffevent.altKey)/[03:58] function ieclick()/[05:03] IE, FF 구분해서 함수 할당하기/[05:07] if(navigator.appName.indexOf("Explorer") !=-1)/[05:39] document.onkeydown = ieclick/[06:21] 결과 확인/[06:57] 상태표시줄 내용 지우기/[07:24] 하이퍼링크 삽입/[08:27] function hide_status()/[08:34] window.status = ""/[08:53] setInterval("hide_status()",1)/[09:50] IE8버전에서 상태표시줄 옵션 조정하기/[10:00] 보안-사용자지정수준-스크립팅/[10:32] 전체화면(F11키) 전환 차단(IE 전용)/[11:01] function block_f11()/[11:12] if(event.keyCode == 122)/[11:31] event.keyCode = 0/[11:44] event.cancelBubble = true/[12:17] event.returnValue = false/[12:45] document.onkeydown = block_f11/[13:22] 유효링크 이외에 방문 거부하기 /[14:36] var ok_url = "주소"/[15:08] refferer/[16:07] alert("정상적인 경로로 들어오세요')/[16:37] window.location="주소"/[16:59] 결과 확인/[19:12] Disable or replace context menus

15 내용 펼치고 접기

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

23분

책갈피 : [00:09] 원리 이해하기/[01:02] 내용 작성하기/[01:09] div id ="test1"/[01:25] a href="#" onclick="spread()" 펼치기/[02:24] div id ="test2"/[02:37] a href="#" onclick="fold()" 접기/[03:07] 내용 입력/[04:26] style="display:none"/[04:52] 내용 감추기 스크립트/[04:54] document.getElementById("test2")/[05:10] .style.display='none'/[06:27] 펼치기 함수 만들기/[06:36] function spread()/[06:55] document.getElementById("test1")/[07:02].style.display =''/[07:22] 감추기 함수 만들기/[08:27] 응용 메뉴 만들기/[09:51] style type 추가/[10:49] 메인 메뉴 작성하기/[13:48] 서브 메뉴 작성하기/[15:07] 결과 확인/[15:50] 내용 감추기 스크립트 작성/[16:02] for(var i =1; i <= 3; i++)/[16:46] document.getElementById("menu1" + i)/[17:22] .style.display = 'none'/[19:14] 접고, 펼치는 함수 만들기/[19:27] function menu_fold(menu_name)/[20:07] if(navigator.appName.indexOf("Explorer") !=-1)/[20:37] if(document.all[menu_name]/[20:44] .style.display=='none')

16 메인,서브메뉴 접고펼치기1

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

19분 

책갈피 : [00:09] 기본 원리 설명/[01:40] 기본 테이블 구성 알아보기/[02:10] 메인메뉴, 하위메뉴/[03:09] Style/[03:54] div id="move_color"/[04:39] 주 메뉴 항목 구성하기/[04:45] menu_main = new Array()/[05:00] menu_sub = new Array()/[05:14] menu_main[0] = "오피스"/[05:50] menu_main[1] ="플래시"/[05:55] menu_main[2] ="홈페이지&IT"/[06:00] menu_main[3] ="멀티미디어"/[06:04] menu_main[4] ="자격증"/[06:20] 서브메뉴 초기화/[06:51] for (var i=0 ; i < menu_main.length ; i++)/[07:19] menu_sub[i] = ""/[07:53] 부 메뉴 항목 구성하기/[08:45] 한 줄로 작성/[14:46] 메뉴 그리는 함수 작성/[14:47] function menu_main_draw()/[15:03] menu_t 삽입/[16:58] for (var i = 0; i < menu_main.length ; i++)/[18:50] bgcolor

17 메인,서브메뉴 접고펼치기2

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

18분 

책갈피 : [01:15] 색깔 변경하는 부분 변수로 대치하기/[02:29] menu_main_draw()/[05:50] 메인메뉴 확인/[06:01] window.onload = menu_main_draw/[07:20] document.getElementById("move_color")/[07:32] .innerHTML = menu_t/[07:46] 결과 확인/[08:20] 서브메뉴 만들기/[08:39] -1이 아닌 경우에만 해당/[09:26] 서브 메뉴 부분 갱신하여 그리기/[10:24] bgcolor로 변경/[11:07] menu_sub[i]/[14:27] 메뉴 초기화 함수 만들기/[14:31] function menu_reset(0/[14:51] sel_menu_pos = -1/[15:03] menu_main_draw()/[15:15] document.onclick = menu_main_draw/[17:27] width 조정

18 떠다니는 메뉴 만들기

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

27분

책갈피 : [01:01] div 작성하기/[01:18] div id='floatMenu'/[01:30] style='left:600; top:0px;/[02:10] visibility:visible; width:120px;/[02:30] position:absolute/[02:40] img src='image/balloon.gif'/[03:16] border,width,height/[03:28] 결과 확인/[04:22] 절대 위치 변경/[05:44] 함수 작성하기/[05:46] function floatm(0/[06:01] var yMenufrom = /[06:39] parseInt(floatMenu.style.top,10)/[07:37] 위치값 지정/[08:10] 브라우저 판별하기/[08:19] if(navigator.appName !="Netscape") !=-1)/[09:08] var isNetscape 생성/[09:53] 이동시킬 위치 값 계산하기/[09:40] If문/[10:01] window.pageYOffset/[10:20] document.body.scrollTop/[11:17] var yMenuTo = (isNetscape ?/[11:36] window.pageYOffset : document.body.scrollTop)/[12:29] 선택연산자/[13:15] 이동시키기/[13:21] if(yMenuFrom != yMenuTo)/[13:49] yOffset = (yMenuTo - yMenuFrom)/[14:55] Math.abs (거리)/[16:42] var step_s = 30/[17:34] Math.ceil (올림)/[18:21] yOffset = -yOffset/[19:12] 현재위치+이동거리/[20:36] 내용 삽입/[21:16] BODY onload/[22:06] 실행간격 조정/[22:43] call_interval

19 풍선도움말 보이기 1

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

21분

책갈피 : [00:57] div 생성/[01:07] div id ='dek'/[01:55] 내용표시용 테이블 구성하기/[02:04] table width,border,bordercolor,/[02:33] cellpadding,cellspacing,bgcolor/[03:45] td aligh='center'/[03:49] font color/[04:10] size,내용/[05:37] style type 지정/[05:58] position:absolute; visibility:hidden; z-index:200/[06:37] 변수 만들기/[08:10] var skn, yyy 초기화/[09:20] 브라우저 구분하기/[09:30] var ns4 = document.layers/[09:44] var ns6 = document.getElementById/[10:08] && !document.all/[11:35] var ie4 = document.all/[16:23] 이미지 삽입하기/[16:30] img src="image/balloon.gif"/[16:44] border, onmouseover/[18:12] onmouseout="hide_tip()"/[18:33] 링크 삽입하기/[19:30] a style="cursor:hand"

20 풍선도움말 보이기 2

IE6,7,8/Firefox/Opera/Chrome 모두 동일하게!!

25분

책갈피 : [01:02] 스크립트 위치 조정/[03:07] 풍선도움말 구성함수 작성하기/[03:08] function.tip/[04:12] (back_color, char_color,message)/[04:30] var contents/[05:56] back_color/[06:44] char_color/[07:22] message/[11:40] 결과 확인/[12:40] function hide_tip()/[14:48] 결과 확인/[15:36] 마우스 이동시 위치 찾기 함수 만들기/[15:44] function mouse_pos()/[15:53] var x = (ns4 or ns6) ? evt.pageX :/[17:36] event.x + document.body.scrollLeft;/[18:16] skn.left = x + Xoffset/[18:38] Xoffset, Yoffset/[19:05] var y = (ns4 or ns6) ? evt.pageY :/[19:17] event.y + document.body.scrollTop;/[19:29] skn.top = y + Yoffset/[20:12] 마우스 이동 이벤트 적용/[20:18] 마우스가 움직일 때(onmousemove)/[21:46] document.onmousemove = mouse_pos/[22:38] 풍선 도움말/[23:47] 도움말 위치 조정

21 Chapter 1

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] 연관 배열

22 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] 외부변수

23 Chapter 3

1시간 12분 

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

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