본문 바로가기
  • think normal

자바스크립트 기초47

샘플소스5) javascript 기본 문서구조 : DOM (2) 샘플소스5) javascript 기본 문서구조 : DOM (2) 예제 1 ) typeof를 이용해서 쇼핑목록의 수 만큼 alert 창을 띄워보자. dom test 쇼핑목록 이것만은 꼭 사자.. 우유 치즈 쥬스 // var lis =document.getElementById("buy").getElementsByTagName("li"); for(var i=0;i 예제 2 ) 문서 안의 속성를 변경하여 그 값을 alert 창에 띄워보자. dom test 쇼핑목록 이것만은 꼭 사자.. 우유 치즈 쥬스 // /* 예제1) var lis =document.getElementById("buy").getElementsByTagName("li"); for(var i=0;i 2011. 4. 23.
샘플소스5) javascript 기본 문서구조 : DOM (1) 샘플소스5) javascript 기본 문서구조 : DOM * 알아야 할 개념 :: 노드(문서는 노드의집합니다.), 요소 노드, 텍스트 노드, 속성 노드 * 알아야 할 요소 document.getElementById // ID는 한번만.. document.getElementsByTagName //s ex) document.getElementsByTagName("li"); getAttribute() : 속성의 값을 반환해준다. // 인자값(속성명) ex) document.getElementById("photo").getAttribute("src"); setAttribute() : 바꿀값 //인자값(속성명,바꿀값) ex) document.getElementById("photo").setAttribute("sr.. 2011. 4. 23.
샘플소스5) javascript 기본 문서구조 : cookie (2) 샘플소스5) javascript 기본 문서구조 : cookie (2) 팝업만들고 쿠키로 제어하기 1)예제 쿠키 // var cookieName="pop_chk"; var cookieValue="pop2010"; //먼저 쿠키 체크하기 var str=document.cookie; //초기화 if(str.indexOf("pop_chk") != -1){ // indexOf는 "찾고자하는 문자가 없으면 -1이 나온다." 있으면 0,1 num = str.substr(cookieName.length+1); //substr인덱스 번호를 이용해 원하는 문자열을 가져다 쓸 수 있게 한다. //str(시작 번호,문자 개수)///문자 갯수안쓰면 끝까지... //-> 결국, 쿠키에서 값을 가져온다. } //값확인하기 aler.. 2011. 4. 23.
샘플소스5) javascript 기본 문서구조 : cookie (1) 샘플소스5) javascript 기본 문서구조 : cookie (1) name :이름 expires: date path :경로 domain:쿠키가 일치하는 URL secure:true/false를 이용해서 데이터 전송여부를 묻는다. excape:유니코드형식으로 바꾼다. toGMTString():그리니치 표준시를 사용하여 문자열로 변환된 일자를 반환. 1) 쿠키생성하는 예제 쿠키 // var cookieName="pop_chk"; var cookieValue="pop2010"; today=new Date(); today.setDate(today.getDate()+1); document.cookie=cookieName+ "=" +escape(cookieValue)+ "; path=/; expires=" +t.. 2011. 4. 23.
샘플소스4) javascript 기본 문서구조 ( string 객체2_예제2 ) 샘플소스4) javascript 기본 문서구조 ( string 객체2_예제2 ) 이번에는 스트링 객체를 이용한 마우스 롤오버 예제를 만들어본다. 조금씩 실전에 쓰이는 예제들이 등당하기 시작한다. 보통은 이미지의 경로는 직접 지정을 해서 이미지를 보여주지만 아래의 예제를 사용하면 문자열의 일정 한 규칙에 의한 순서 또는 문자를 바꿔줌으로써 자동으로 호출할 수 있게 해준다. 이를테면,그림이 50개 또는 그 이상일 경우와 같이 일일이 다 경로를 지정하기 어려운 경우에 쓰이게된다. 우선 두장짜리 이미지 작업을 먼저 해보기로 하자. Open in Google Docs Viewer Open link in new tab Open link in new window Open link in new incognito win.. 2011. 4. 19.
샘플소스4) javascript 기본 문서구조 ( string 객체2_예제1 ) 샘플소스4) javascript 기본 문서구조 ( string 객체2_예제1 ) 주민등록번호 체크하기 예제 만들어보기 먼저 주민등록번호의 규칙을 알아야하는데... 첫번째로 860624-1080421" 라면 2,3,4,5,6,7,8,9,2,3,4,5 순으로 곱해야하고 11로 나누고 그 몫을 다시한번 11로 뺀수가 마지막 숫자와 비교해야 한다 ..고 한다. 사실 시작에 앞서 나도 잘 이해가 안갔다. 우선 예제를 통해 코드가 돌아가는 걸 보면 대충 이해가 간다. 2011. 4. 19.
숫자 객체 _ 응용 :: 가위.바위.보 게임 'javascript study / 변군의 기초 예제 / 샘플소스3) javascript 기본 문서구조 ( 숫자 객체 _ 응용3 )' 에 해당되는 글 을 보면 , 제안: 이 코드를 좀 더 수정해서 이렇게 만들어 보자. 1. 한번 실행 할때마다 가위바위보를 10회 반복하게 한다. 그리고 그 횟수를 컴퓨터와 사용자간 승률을 표시해 준다. 2. 그 승률을 저장해서 다음에 실행하는 사용자의 결과와 비교해서 랭킹을 뿌려 준다. 3. 그것을 인터넷으로 상대방과 할 수 있게 한다. 4. 그것을 폰갭 또는 티타늄으로 싸서 앱으로 만든다. 2011. 4. 10.
규이 님이 스프링 노트 < 객체지향 2 > 자바스크립트 관련 이론을 설명해주는 곳은 정말 셀 수 없이 많다. 따라서 어설프게 잘못된 개념을 스스로 작성해서 적는 것 보다는 나보다 더 친절하게 설명해 주시는 분들의 블로거나 페이지를 소개시켜주는 편이 좋을 것 같다. 다시말해 자료의 재활용과 기존 블로그들의 재 활성화를 위함이다. 직접적으로 알지는 못하지만 이렇게 인연이 닿아 이런 고수님들을 소개해드릴 수 있게 되어 개인적으로도 영광이다. 작성하신 분들도 앞으로도 이런 영광스러움의 마음이 늘 함께하시길 바란다. 아, 삭제를 원하시면 댓글로 말씀하시면 바로 지우겠습니다. 다른 의도는 없었습니다. 미리 양해 말씀 남깁니다. 두번째 출처는 규이 님이 스프링 노트이다. http://godpage.springnote.com/pages/4223711 이곳에는 .. 2011. 4. 10.
규이 님이 스프링 노트 < 객체지향 1 > 자바스크립트 관련 이론을 설명해주는 곳은 정말 셀 수 없이 많다. 따라서 어설프게 잘못된 개념을 스스로 작성해서 적는 것 보다는 나보다 더 친절하게 설명해 주시는 분들의 블로거나 페이지를 소개시켜주는 편이 좋을 것 같다. 다시말해 자료의 재활용과 기존 블로그들의 재 활성화를 위함이다. 직접적으로 알지는 못하지만 이렇게 인연이 닿아 이런 고수님들을 소개해드릴 수 있게 되어 개인적으로도 영광이다. 작성하신 분들도 앞으로도 이런 영광스러움의 마음이 늘 함께하시길 바란다. 아, 삭제를 원하시면 댓글로 말씀하시면 바로 지우겠습니다. 다른 의도는 없었습니다. 미리 양해 말씀 남깁니다. 두번째 출처는 규이 님이 스프링 노트이다. http://godpage.springnote.com/pages/4202573 이곳에는 .. 2011. 4. 10.
파란하늘 님이 스프링 노트 < 기초지식부터 ~ > 자바스크립트 관련 이론을 설명해주는 곳은 정말 셀 수 없이 많다. 따라서 어설프게 잘못된 개념을 스스로 작성해서 적는 것 보다는 나보다 더 친절하게 설명해 주시는 분들의 블로거나 페이지를 소개시켜주는 편이 좋을 것 같다. 다시말해 자료의 재활용과 기존 블로그들의 재 활성화를 위함이다. 직접적으로 알지는 못하지만 이렇게 인연이 닿아 이런 고수님들을 소개해드릴 수 있게 되어 개인적으로도 영광이다. 작성하신 분들도 앞으로도 이런 영광스러움의 마음이 늘 함께하시길 바란다. 아, 삭제를 원하시면 댓글로 말씀하시면 바로 지우겠습니다. 다른 의도는 없었습니다. 미리 양해 말씀 남깁니다. 첫 출처는 파란하늘 님이 스프링 노트이다. http://bluesky.springnote.com/pages/388011 기본지식선언.. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( string 객체_응용2 ) 이번에는 string객체가 갖고있는 메소드를 활용해서 글씨를 활용하는 예제를 실행해보자. 앞서 실행한 이메일이나 주민등록번호를 체크하는 것보다 결과는 조촐하다. 하.지.만. 완전 중요한 객체라는 것을 js를 사용하면서 느끼게 될 것이다. 커다란 프로그레밍을 할 수록 특히 JQuery나 JQuery Mobile과 같은 크고 유명한 라이브러리를 사용하거나 활용또는 직접 생성을 할때 여러 변수의 변형 및 활용 그리고 접근 또는 html 문서안의 태그들을 직접적으로 변경또는 ... 뭐..이런..다양한 실질적인 기능들을 구현할 수 있게 된다. 된다? ...사실. 될꺼 같다..나도 많이 해본게아니라서...ㅋ 말만 길었네..ㅎ substr / replace // //substr var str1,str2; str1 =.. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( string 객체_응용1 ) 이번에는 주변에서 많이 볼 수 있는 주민등록 체크하는 프로그렘을 간단히 테스트해보자 // var ssn="123456-123-456"; var check2=ssn.indexOf("-"); //왼쪽에서부터 var check3=ssn.lastIndexOf("-"); //오른쪽에서부터 document.write(check2 + " "); document.write(check3 + " "); //if((check2!/*-의 위치..*/=6)||(ssn.length!/*전체의 길이가..*/=14)||(check2!=check3/*-가 한개여야 한다...*/)) if((check2!=6)||(ssn.length!=14)||(check2!=check3)) { alert("주민등록번호가 올바르지 않습니다."); } /.. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( string 객체 ) 이번엔 string 객체에 대해 알아보자. 스트링은 문자열이다. 다시말해 스트링 객체와 해당 객체가 소지하고있는 메소드를 활용하면 문자열을 활용한 프로그레밍이 가능해진다. 이를테면 이메일을 사용자가 작성했는데 올바르게 작성했는지 사전에 체크 해준다던가 ...좀더 디테일하고 세밀하게 작업을 하면 맞춤법체크 같은 것도 충분히 가능할 것 같다. (유용할지는 모르지만..) 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( screen객체) 이번에는 사용자 또는 개발자가 사용하는 모니터 환경에 대해 체크해주는 자바스크립트 코드가 있어 그것들을 확인 할 수 있는 코드를 알아보자. 왜 이런거까지 해야 할까? 이렇게 생각해 보자 만약, 사용자가 30인지 모니터와 17인지 또는 7인치 또는 스마트 폰으로 볼 때마다 각각에 최적화된 화면 또는 서비스를 구성하고 싶다면. " 그것도 자기가 알아서. " (= 앞에서 실컷 떠들었던 객체지향 아닌 기반의 언어라 가능한 ! ) 사실, 실무에서는 엔스크린에서는 다른 방법이 사용되고 있지만 이렇게 응용할수 도 있다는 생각과 경험이 나중에 분명히 도움이 될것이라는 개인적인 생각이다. " 비단- 프로그레밍이 아닌 인생을 살아가는 문제 해결 능력을 키우기 위해. " 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 숫자 객체 _ 응용3 ) 바로 앞에서 작성한 코드가 사용자에겐 게임을 하기 더 편할 것 같다.. 하지만 코드가 좀 길다. ( 필요에 비해서...) 앞서 경험했던 전역변수를 활용하면 3개로 정의하던 함수ㄹ를 단, 하나로 줄일 수 있다. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 숫자 객체 _ 응용2 ) 사실...앞서 실행한 예제는 게임이라하기엔... 타이핑을 해야하는 게임은 좀... 그래서 버튼 형식으로 만들어 보았다. 본인의 접근 방식은.. 1.사용자가 사용할 버튼을 만들어준다. 2.우선 전역변수로 랜덤으로 바뀔 수 있는 컴퓨터의 경우의 수를 만든다. 3.사용자가 누를때마다 실행되는 함수를 각각 만들어서 게임을 실행한다. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 숫자 객체 _ 응용1 ) 컴퓨터와 할 수 있는 가위 바위 보 게임을 만들어 보자. 우선 모법? 답안이다. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 숫자 객체 ) 여섯개의 숫자를 뿌려주는 로또번호 생성기 만들기. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 숫자 객체 ) 정적객체인 Math는 다양한 메소드를 가지고 있다. 숫자가 가진 다양한 속성을 컨트롤하는 메소드들을 예제를 통해 경험해보자. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 함수 객체 ) 함수선언은 아래와 같이 한다. 1) 해더 안에서의 함수선언. function 생성자 함수명(매개변수1,매개변수2) 2) 바디안에서의 객체 생성. 객체이름=new 생성자 함수명(매개변수1,매개변수2) 혹시 기억하는지? 앞에서 언급했던 매개 변수..그녀석들이 다시 나왔다.. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 날짜 객체 _ 응용 ) 이번에는 어떻게 보면 쉬워보일 수 있지만 막상 프로그렘을 짜려하면 막히는 문제가 있다. 바로 요일이다. 한글.. 요일.. 어떻게 하면될까? 사실 영어또는 숫자로는 날짜나 시간과 같이 자동으로 뿌려주게 할 수 있다고 한다. 어쩌아 나도 그렇고 아직 내가 만든 또는 만들...( 아직. ㅋㅋㅋ 앞으로는 모르지만 ㅋㅋㅋ ^^) 프로그렘은 한글이어야 하는데. 이럴때 배열을 사용하면 간단히 해결할 수 있다. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 날짜 객체 ) 이번에는 날짜를 표현해주는 객체를 만들어보자 쉬지않고 움직이는 매번 날짜를 개발자 또는 제작자가 정의 할 수도 없을 노릇인데.. 어떻게 하면 표현할 수 있을까? 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 배열 2 ) 배열에 대한 3단 콤보 예제이다. 문제는 이고, 1단 콤보는 이 색이고, : 맨 처음 접근하면서 막 짜본 코드...이렇게 접근했었다..완성은 못했지만... 2단 콤보는 이거, : 모범 답안. 마지막 3단 콤보는 이 색이다. 모범 답안은 밑도 끝도 없이 우선 이력하고 보는 식이라 마음에 안들었다. 그래서 입력할 때도 뭘 입력해야 하는지 물어보고 입력하고 나서도 어떻게 입력했는지 알 수 있도록 예제를 풀어보았다. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 객체 그리고 배열 ) 자바는 객체지향 언어이다. 그리고 자바스크립트는 객체기반언어이다. 그렇다면 객체..그는 누구인가? 내 나름의 해석은 이렇다. 객체...그리고 기반 사람도 어떻게 보면 객체이다. 움직이는 자동차, 자전거..흐르는 물. 다만, 멈춰있는 자전거, 점춰있는 차, 그들은 움직여지기를 지향한다. 사람을 필요로 한다. 자바로 만들어져있는 프로그렘들은 입력을 해야 그에 반응한다. 자바스크립트는 우선 실행된다. 이후 사용자의 반응에 반응을 한다. 프로그렘 되어질 때 ( 크기와 범위를 떠나서) 시작과 동시에 자기가 먼저 알아서 수행을 하도록 하면 자바 스크립트이고 실행해서 프로그렘 창이 띄어지고 난후 사용자의 명령을 기다리고 있으면 그것을 자바와 같은 객체 지향의 언어가 아닐까 한다. 다시말하지만 기능과 크기를 떠나서 이.. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수_ 매개변수_응용 ) 매개변수를 한번 응용해 보자. 앞서 보여주었던 배경색 바꾸는 예제를 응용해보면 좀 도 도움이 되지 않을까 한다. 예제를 실행해보면 알겠지만 앞서 예제가 배경만 바구어 주었다면 이번에 수정된 코드를 실행하면 팝업창에 뜨는 값이 매번 다르게 뜨는 것을 알 수 있다. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수_ 매개변수 ) 사용자 정의 함수를 통해 프로그렘이 제공해주고 끌어주는 유모차가아닌 스스로 걷는 방법을 배웠다면 이번에는 뛰는 법을 배울차례이다. 파라미터...매개변수...단어 참.. 빡시다... 음.. 나도 고딩때는 나름 문학도였는데... ㅋ 이를테면 사용자 정의 함수가 경우에 수에 따른 유용한 함수를 따로 정의하는 것이라면 매개 변수는 프로그레머 또는 유저가 상황에 따라 값을 정의하거나 선택할 수 있는 기회를 부여해주는 역할을 한다. 그렇게 선택된 변수는 각기 다른 결과같을 도출해 줌으로서 보다 다양한 결과 값을 보여줌으로서 프로그렘과 사용자간 보다 효율적인 소통을 할 수 있게 해준다. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수_ 응용 ) 이번엔 좀 더 응용 예제 버튼을 누를때마다 배겨 색을 변화 시켜주는 예제입니다. 사용자가 정의해놓은 함수를 바디테그에서 만든 버튼을 사용자가 누를때마다 온클릭 핸들러는 통해 연결된 사용자 정의 함수로 연결되어 함수를 실행합니다. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수2 _ 전역변수_응용 ) 앞에서 지역변수 할 때 함수안에 선언하고도 다른곳에서 사용가능하게 할려면 어떻게하면 할 수 있다고 했죠? 기억하시려나? 답은 아래 예제에 있습니다. ㅎ 2011. 4. 10.

티스토리툴바