본문 바로가기
  • think normal

새로워지기/서른의 생활코딩234

파란하늘 님이 스프링 노트 < 기초지식부터 ~ > 자바스크립트 관련 이론을 설명해주는 곳은 정말 셀 수 없이 많다. 따라서 어설프게 잘못된 개념을 스스로 작성해서 적는 것 보다는 나보다 더 친절하게 설명해 주시는 분들의 블로거나 페이지를 소개시켜주는 편이 좋을 것 같다. 다시말해 자료의 재활용과 기존 블로그들의 재 활성화를 위함이다. 직접적으로 알지는 못하지만 이렇게 인연이 닿아 이런 고수님들을 소개해드릴 수 있게 되어 개인적으로도 영광이다. 작성하신 분들도 앞으로도 이런 영광스러움의 마음이 늘 함께하시길 바란다. 아, 삭제를 원하시면 댓글로 말씀하시면 바로 지우겠습니다. 다른 의도는 없었습니다. 미리 양해 말씀 남깁니다. 첫 출처는 파란하늘 님이 스프링 노트이다. 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.
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수2 _ 지역변수_응용 ) 지역변수가 변수를 정의한 한수안에서만 실행가능하고 다른 함수에서는 실행이 안된다는게 뻥인가 아닌가를 확인시켜준다. 하나는 실행이 되고 하나는 먹통이거나 오류창을 띄워준다. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수2 _ 지역변수 ) 버튼을 눌러보자 이번에 숫자가 증가하지 않는다. onclick이라는 버튼을 누를때마다 사용자에게 보여주는 alert(i)라는 팝업창에서 숫자를 의미하는 i라는 변수는 "one_plus()" 라는 함수안에서만 실행되는 지역변수이기 때문이다. 왜??? 이유는 간단하다. !!! 함수 안에다가 작성을 했으니까, (싱크대를 거실에 놓으면 거실에서도 사용을 할수있다.) i+=1;가 함수 안내서만 실행되는 것이다. 그렇다면 ? 함수내에서 작성을 하고 외부에서도 사용할수있게 할수는 없는걸까? 답부터 말하면 "있다." 간단하다. 변수를 선언할 때 앞에 "var"를 빼고 선언해주면 된다. 이제 생각과 말은 그만하고 한번 해보자. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수2 _ 전역변수 ) 사용자 정의 함수의 첫 예제에서 전체를 보았다면 이번에는 함수에 사용되는 실질적인 도구인 변수에 대해 좀더 집고 넘어가본다. 함수를 요리하는데는 크게 두가지의 도구를 나눌수있다. 이를케면 부엌에 싱크대는 지역변수이다. 도마나 칼은 전역변수이다. 지역변수는 함수내에서만 사용이 가능하다. 전역변수는 외부에서도 사용이 가능하다. 내가 생각해도 아주 기가막히게 적절한 표현같다...ㅋ 이번 예제는 바디에 정의한 버튼을 클릭할 때마다 1씩 증가하는 프로그렘을 만드는 것이다. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수1 ) 내장함수는 자바스크립트가 디폴트로 정의해놓은 함수라면 사용자 정의 함수는 사용자에 의한 자용자를 위한 함수이다. 프로그렘시 자기만의 환경에 초적화시키고 남들과 다른 색다른 방식을 구현하는데 많이 사용된다. 정의한 함수는 여러번 반복해서 호출할 수도 있다. 2011. 4. 10.
샘플소스3) javascript 기본 문서구조 ( 내장함수 ) 샘플소스3) javascript 기본 문서구조 ( 내장함수 ) - 우선 지난 내용 잠깐 복습,,, - break 문 : 최초 조건은 만족하지만 (추가로 옵션을 줘서 ) 빠져나오고 싶을 때. ex)강제종료 continue 문 : 별도로 추가한 조건에 해당할 때만 조건을 건너뛰고. 다음 조건을 실행한다. - 잠깐 내장함수,,, - 정의형 함수 : 사용자가 정의한 함수 내장형 함수 : js의 기능 :: eval(수식문자열/문자를 숫자로 인식), isNaN(), Number(), String(), parseInt(문자를 정수형으로) * "10px" VS. "px10"= 문자가 앞에 나오면 문자로 인식된다. 예제 ) 2011. 4. 9.
샘플소스2) javascript 기본 문서구조 ( 문제2_BY jquery 02 ) js 2_5 예제2_BY jquery 02 예제 2를 요즘 잘나간다던 jquery로 구현한다면? 2 2011. 4. 8.
샘플소스2) javascript 기본 문서구조 ( 문제2_BY jquery 01 ) js 2_5 예제2_BY jquery 01 예제 2를 요즘 잘나간다던 jquery로 구현한다면? 1 2011. 4. 8.
샘플소스2) javascript 기본 문서구조 ( 문제2 ) 문제 : 1~25까지의 연속된 숫자로 되어있는 5*5 테이블 만들기 +5의배수에만 빨간색 2011. 4. 8.
샘플소스2) javascript 기본 문서구조 ( 문제1 ) 문제 1 : 1~25까지의 연속된 숫자로 되어있는 5*5 테이블 만들기 135 135 2011. 4. 8.

티스토리툴바