#자바스크립트 기초
47개의 글
샘플소스5) javascript 기본 문서구조 : DOM (2)
샘플소스5) javascript 기본 문서구조 : DOM (2) 예제 1 ) p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco; color: #162bc4} typeof를 이용해서 쇼핑목록의 수 만큼 alert 창을 띄워보자. p.p1 {margin: 0.0px…
샘플소스5) javascript 기본 문서구조 : DOM (1)
샘플소스5) javascript 기본 문서구조 : DOM * 알아야 할 개념 :: 노드(문서는 노드의집합니다.), 요소 노드, 텍스트 노드, 속성 노드 * 알아야 할 요소 p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco} p.p2 {margin: 0.0px…
샘플소스5) javascript 기본 문서구조 : cookie (2)
샘플소스5) javascript 기본 문서구조 : cookie (2) 팝업만들고 쿠키로 제어하기 1)예제 p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco; color: #1e39f6} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font:…
샘플소스5) javascript 기본 문서구조 : cookie (1)
샘플소스5) javascript 기본 문서구조 : cookie (1) name :이름 expires: date path :경로 domain:쿠키가 일치하는 URL secure:true/false를 이용해서 데이터 전송여부를 묻는다. excape:유니코드형식으로 바꾼다. toGMTString():그리니치 표준시를 사용하여…
샘플소스4) javascript 기본 문서구조 ( string 객체2_예제2 )
샘플소스4) javascript 기본 문서구조 ( string 객체2_예제2 ) 이번에는 스트링 객체를 이용한 마우스 롤오버 예제를 만들어본다. 조금씩 실전에 쓰이는 예제들이 등당하기 시작한다. 보통은 이미지의 경로는 직접 지정을 해서 이미지를 보여주지만 아래의 예제를 사용하면 문자열의 일정 한 규칙에 의한 순서 또는…
샘플소스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로 뺀수가 마지막…
숫자 객체 _ 응용 :: 가위.바위.보 게임
'javascript study / 변군의 기초 예제 / 샘플소스3) javascript 기본 문서구조 ( 숫자 객체 _ 응용3 )' 에 해당되는 글 을 보면 , 제안: 이 코드를 좀 더 수정해서 이렇게 만들어 보자. 1. 한번 실행 할때마다 가위바위보를 10회 반복하게 한다. 그리고 그 횟수를 컴퓨터와 사용자간 승률을…
규이 님이 스프링 노트 < 객체지향 2 >
자바스크립트 관련 이론을 설명해주는 곳은 정말 셀 수 없이 많다. 따라서 어설프게 잘못된 개념을 스스로 작성해서 적는 것 보다는 나보다 더 친절하게 설명해 주시는 분들의 블로거나 페이지를 소개시켜주는 편이 좋을 것 같다. 다시말해 자료의 재활용과 기존 블로그들의 재 활성화를 위함이다.직접적으로 알지는 못하지만 이렇게…
규이 님이 스프링 노트 < 객체지향 1 >
자바스크립트 관련 이론을 설명해주는 곳은 정말 셀 수 없이 많다. 따라서 어설프게 잘못된 개념을 스스로 작성해서 적는 것 보다는 나보다 더 친절하게 설명해 주시는 분들의 블로거나 페이지를 소개시켜주는 편이 좋을 것 같다. 다시말해 자료의 재활용과 기존 블로그들의 재 활성화를 위함이다.직접적으로 알지는 못하지만 이렇게…
파란하늘 님이 스프링 노트 < 기초지식부터 ~ >
자바스크립트 관련 이론을 설명해주는 곳은 정말 셀 수 없이 많다. 따라서 어설프게 잘못된 개념을 스스로 작성해서 적는 것 보다는 나보다 더 친절하게 설명해 주시는 분들의 블로거나 페이지를 소개시켜주는 편이 좋을 것 같다. 다시말해 자료의 재활용과 기존 블로그들의 재 활성화를 위함이다. 직접적으로 알지는 못하지만 이렇게…
샘플소스3) javascript 기본 문서구조 ( string 객체_응용2 )
이번에는 string객체가 갖고있는 메소드를 활용해서 글씨를 활용하는 예제를 실행해보자. 앞서 실행한 이메일이나 주민등록번호를 체크하는 것보다 결과는 조촐하다. 하.지.만. 완전 중요한 객체라는 것을 js를 사용하면서 느끼게 될 것이다. 커다란 프로그레밍을 할 수록 특히 JQuery나 JQuery Mobile과 같은…
샘플소스3) javascript 기본 문서구조 ( string 객체_응용1 )
이번에는 주변에서 많이 볼 수 있는 주민등록 체크하는 프로그렘을 간단히 테스트해보자 p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco; color: #1e39f6} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px…
샘플소스3) javascript 기본 문서구조 ( string 객체 )
이번엔 string 객체에 대해 알아보자. 스트링은 문자열이다. 다시말해 스트링 객체와 해당 객체가 소지하고있는 메소드를 활용하면 문자열을 활용한 프로그레밍이 가능해진다. 이를테면 이메일을 사용자가 작성했는데 올바르게 작성했는지 사전에 체크 해준다던가 ...좀더 디테일하고 세밀하게 작업을 하면 맞춤법체크 같은 것도…
샘플소스3) javascript 기본 문서구조 ( screen객체)
이번에는 사용자 또는 개발자가 사용하는 모니터 환경에 대해 체크해주는 자바스크립트 코드가 있어 그것들을 확인 할 수 있는 코드를 알아보자. 왜 이런거까지 해야 할까? 이렇게 생각해 보자 만약, 사용자가 30인지 모니터와 17인지 또는 7인치 또는 스마트 폰으로 볼 때마다 각각에 최적화된 화면 또는 서비스를 구성하고…
샘플소스3) javascript 기본 문서구조 ( 숫자 객체 _ 응용3 )
바로 앞에서 작성한 코드가 사용자에겐 게임을 하기 더 편할 것 같다.. 하지만 코드가 좀 길다. ( 필요에 비해서...) 앞서 경험했던 전역변수를 활용하면 3개로 정의하던 함수ㄹ를 단, 하나로 줄일 수 있다. p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial;…
샘플소스3) javascript 기본 문서구조 ( 숫자 객체 _ 응용2 )
사실...앞서 실행한 예제는 게임이라하기엔... 타이핑을 해야하는 게임은 좀... 그래서 버튼 형식으로 만들어 보았다. 본인의 접근 방식은.. 1.사용자가 사용할 버튼을 만들어준다. 2.우선 전역변수로 랜덤으로 바뀔 수 있는 컴퓨터의 경우의 수를 만든다. 3.사용자가 누를때마다 실행되는 함수를 각각 만들어서 게임을…
샘플소스3) javascript 기본 문서구조 ( 숫자 객체 _ 응용1 )
컴퓨터와 할 수 있는 가위 바위 보 게임을 만들어 보자. 우선 모법? 답안이다. p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px…
샘플소스3) javascript 기본 문서구조 ( 숫자 객체 )
여섯개의 숫자를 뿌려주는 로또번호 생성기 만들기. p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial} span.s1…
샘플소스3) javascript 기본 문서구조 ( 숫자 객체 )
정적객체인 Math는 다양한 메소드를 가지고 있다. 숫자가 가진 다양한 속성을 컨트롤하는 메소드들을 예제를 통해 경험해보자. p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} p.p2 {margin: 0.0px 0.0px…
샘플소스3) javascript 기본 문서구조 ( 함수 객체 )
함수선언은 아래와 같이 한다. 1) 해더 안에서의 함수선언. function 생성자 함수명(매개변수1,매개변수2) 2) 바디안에서의 객체 생성. 객체이름=new 생성자 함수명(매개변수1,매개변수2) 혹시 기억하는지? 앞에서 언급했던 매개 변수..그녀석들이 다시 나왔다.. p.p1 {margin: 0.0px 0.0px…
샘플소스3) javascript 기본 문서구조 ( 날짜 객체 _ 응용 )
이번에는 어떻게 보면 쉬워보일 수 있지만 막상 프로그렘을 짜려하면 막히는 문제가 있다. 바로 요일이다. 한글.. 요일.. 어떻게 하면될까? 사실 영어또는 숫자로는 날짜나 시간과 같이 자동으로 뿌려주게 할 수 있다고 한다. 어쩌아 나도 그렇고 아직 내가 만든 또는 만들...( 아직. ㅋㅋㅋ 앞으로는 모르지만 ㅋㅋㅋ ^^)…
샘플소스3) javascript 기본 문서구조 ( 날짜 객체 )
이번에는 날짜를 표현해주는 객체를 만들어보자 쉬지않고 움직이는 매번 날짜를 개발자 또는 제작자가 정의 할 수도 없을 노릇인데.. 어떻게 하면 표현할 수 있을까? p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} p.p2…
샘플소스3) javascript 기본 문서구조 ( 배열 2 )
배열에 대한 3단 콤보 예제이다. 문제는 이고, 1단 콤보는 이 색이고, : 맨 처음 접근하면서 막 짜본 코드...이렇게 접근했었다..완성은 못했지만... 2단 콤보는 이거, : 모범 답안. 마지막 3단 콤보는 이 색이다. 모범 답안은 밑도 끝도 없이 우선 이력하고 보는 식이라 마음에 안들었다. 그래서 입력할 때도 뭘…
샘플소스3) javascript 기본 문서구조 ( 객체 그리고 배열 )
자바는 객체지향 언어이다. 그리고 자바스크립트는 객체기반언어이다. 그렇다면 객체..그는 누구인가? 내 나름의 해석은 이렇다. 객체...그리고 기반 사람도 어떻게 보면 객체이다. 움직이는 자동차, 자전거..흐르는 물. 다만, 멈춰있는 자전거, 점춰있는 차, 그들은 움직여지기를 지향한다. 사람을 필요로 한다. 자바로…
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수_ 매개변수_응용 )
매개변수를 한번 응용해 보자. 앞서 보여주었던 배경색 바꾸는 예제를 응용해보면 좀 도 도움이 되지 않을까 한다. 예제를 실행해보면 알겠지만 앞서 예제가 배경만 바구어 주었다면 이번에 수정된 코드를 실행하면 팝업창에 뜨는 값이 매번 다르게 뜨는 것을 알 수 있다. p.p1 {margin: 0.0px 0.0px 0.0px…
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수_ 매개변수 )
사용자 정의 함수를 통해 프로그렘이 제공해주고 끌어주는 유모차가아닌 스스로 걷는 방법을 배웠다면 이번에는 뛰는 법을 배울차례이다. 파라미터...매개변수...단어 참.. 빡시다... 음.. 나도 고딩때는 나름 문학도였는데... ㅋ 이를테면 사용자 정의 함수가 경우에 수에 따른 유용한 함수를 따로 정의하는 것이라면 매개…
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수_ 응용 )
이번엔 좀 더 응용 예제 버튼을 누를때마다 배겨 색을 변화 시켜주는 예제입니다. 사용자가 정의해놓은 함수를 바디테그에서 만든 버튼을 사용자가 누를때마다 온클릭 핸들러는 통해 연결된 사용자 정의 함수로 연결되어 함수를 실행합니다. p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px…
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수2 _ 전역변수_응용 )
앞에서 지역변수 할 때 함수안에 선언하고도 다른곳에서 사용가능하게 할려면 어떻게하면 할 수 있다고 했죠? 기억하시려나? 답은 아래 예제에 있습니다. ㅎ p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} p.p2 {margin:…
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수2 _ 지역변수_응용 )
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} span.s1 {text-decoration: underline ;…
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수2 _ 지역변수 )
버튼을 눌러보자 이번에 숫자가 증가하지 않는다. onclick이라는 버튼을 누를때마다 사용자에게 보여주는 alert(i)라는 팝업창에서 숫자를 의미하는 i라는 변수는 "one_plus()" 라는 함수안에서만 실행되는 지역변수이기 때문이다. 왜??? 이유는 간단하다. !!! 함수 안에다가 작성을 했으니까, (싱크대를…
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수2 _ 전역변수 )
사용자 정의 함수의 첫 예제에서 전체를 보았다면 이번에는 함수에 사용되는 실질적인 도구인 변수에 대해 좀더 집고 넘어가본다. 함수를 요리하는데는 크게 두가지의 도구를 나눌수있다. 이를케면 부엌에 싱크대는 지역변수이다. 도마나 칼은 전역변수이다. p.p1 {margin: 0.0px 0.0px 0.0px 0.0px;…
샘플소스3) javascript 기본 문서구조 ( 사용자정의함수1 )
내장함수는 자바스크립트가 디폴트로 정의해놓은 함수라면 사용자 정의 함수는 사용자에 의한 자용자를 위한 함수이다. 프로그렘시 자기만의 환경에 초적화시키고 남들과 다른 색다른 방식을 구현하는데 많이 사용된다. p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial} p.p2…
샘플소스3) javascript 기본 문서구조 ( 내장함수 )
샘플소스3) javascript 기본 문서구조 ( 내장함수 ) - 우선 지난 내용 잠깐 복습,,, - break 문 : 최초 조건은 만족하지만 (추가로 옵션을 줘서 ) 빠져나오고 싶을 때. ex)강제종료 continue 문 : 별도로 추가한 조건에 해당할 때만 조건을 건너뛰고. 다음 조건을 실행한다. - 잠깐…
샘플소스2) javascript 기본 문서구조 ( 문제2_BY jquery 02 )
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} span.s1 {text-decoration: underline ;…
샘플소스2) javascript 기본 문서구조 ( 문제2_BY jquery 01 )
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} span.s1 {text-decoration: underline ;…
샘플소스2) javascript 기본 문서구조 ( 문제2 )
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px;…
샘플소스2) javascript 기본 문서구조 ( 문제1 )
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; color: #b6653a} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} p.p3 {margin: 0.0px 0.0px…
샘플소스2) javascript 기본 문서구조 ( continue 와 break 문 )
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px;…
샘플소스2) javascript 기본 문서구조 ( while문 )
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px;…
샘플소스2) javascript 기본 문서구조 ( 반복문 )
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px;…
샘플소스2) javascript 기본 문서구조 ( 스위치 케이스문 )
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; min-height: 15.0px} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px;…
샘플소스1) javascript 기본 문서구조 ( else if 문 )
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; line-height: 18.0px; font: 12.0px Helvetica} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 13.0px…
샘플소스1) javascript 기본 문서구조 ( if문 과 if else문 )
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; line-height: 24.0px; font: 13.0px Helvetica} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 24.0px; font: 13.0px…
샘플소스1) javascript 기본 문서구조 ( 단항, 대립, 문자, 비교, 산술 연산자 )
<!-- /* Font Definitions */@font-face {font-family:Times; panose-1:2 0 5 0 0 0 0 0 0 0; mso-font-charset:0; mso-generic-font-family:auto; mso-font-pitch:variable;…
샘플소스1) javascript 기본 문서구조 ( 출력 해주는 document.write )
출력 해주는 document.writ 예제3) p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px AppleGothic} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px AppleGothic; color: #1d37ef} p.p3…
샘플소스1) javascript 기본 문서구조 ( prompt 윈도우 메소드)
팝업창을 띄워 사용자가 값을 입력할 수 있게 해주는 prompt 윈도우 메소드 예제2) p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; color:…
샘플소스1) javascript 기본 문서구조 ( // )
자바 스크립트 스크립트에 대한 스터디 페이지를 만들어 볼까 생각 중이다. 서문 ) 패션과 서양화를 전공하고 영업과 기획에서 사회생활을 하고 카페 겸 멀티샵을 경영하다가 3D 툴을 배워서 작년 11월쯤부터 연구원에서 일하면서 틈틈히 인터넷을 통해 마크업과 css를 눈 넘어로 배우다가 2011년 3월.. 30대와 함께…