본문 바로가기

매일코딩/자바스크립트예제24

자바스크립트 객체 예제 //방법1.function Car(name,color){this.name = name;this.color = color;this.show = function(){console.log(name, color)}} var car1 = new Car('morning','blue');car1.show(); //방법2. 프로토타입 이용 function BigCar(name, color){this.name = name;this.color = color;} BigCar.prototype.show = function(){console.log('bigcar' ,this.name , this.color)}//자식 객체 1var bigcar1 = new BigCar('churare','white');bigcar1.show().. 2018. 10. 15.
[초미니프로젝트] 자바스크립트 연락처 저장하기 오류발생! 해결! [3] 연락처 목록 번호 이름 나이 연락처 주소 직업 취미 어제 짜놓은 코드를 보니 큰 문제가 있었다. 1. 아무것도 없는 테이블에서 '추가하기'를 누르면 빈 행과 칸이 1줄 생깁니다.- function insertFunction() 가 실행됩니다.(dom)으로 구현 했습니다. 2. 빈칸에 값을 입력하고 저장하기를 누르면 saveFunction() 실행됩니다.-첫번째 행의 값이 user 객체에 삽입되고 그 각체는 users 배열에 삽입됩니다. 문제는 user 객체를 초기화 하는것이었다!user객체를 초기화 해서 넣지 않으니깐전에 user객체에 들어 있던 값이 push 가 되는거였다.....!!!!!!!! 어쨌든 해결 ㅠ!! 1234567891011121314151617181920212223242526272829.. 2017. 5. 24.
[초미니프로젝트] 자바스크립트 연락처 저장하기 구현 [2] 하...일단 저장하기 성공....완전빡샘..추가하기 누르면 위의 사진처럼 빈 행이 생긴다.빈행의 칸을 클릭하면 활성화 되고 값입력 가능하다값입력후 저장하기 누르면 객체 형태로 배열에 저장된다.하...ㅜㅜ 자바스크립트 dom 개념인데..이렇게 헤메다니..분발하자!!!!!!!!!!!!!!! 연락처 목록 번호이름 나이연락처주소직업취미 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107.. 2017. 5. 23.
[초미니프로젝트] 자바스크립트 연락처 구현 준비 [1] 그동안 자바 스크립트 사용을 오래 안했네.. 감이 가물가물...몽땅 잃어버리기전에 간단한 프로그램하나 만들어봐야겠다.아주간단한 배열, 함수, 객체 반복문, 조건문 같은 개념 이용해서 연락처 리스트 만들어보기! 프로그램 예) 연락처 리스트 이름 나이 연락처 주소 직업 취미 홍길동 28 010-1234-5678 서울시 관악구 신림로 18 학생 볼링 김귀남 29 010-5468-5466 서울 종로구 인사동길 100 학생 축구 김동글 30 010-6879-7866 서울 관악구 신림로 14 학생 복싱 추가하기 저장하기 찾기 삭제 1 추가하기 누르면 위에 표에 칸이 생긴다. 2 추가된 빈간이 생긴곳에 마우스 클릭을 하면 텍스트가 활성화되면서 글을 적을 수 있다. 3 저장하기를 누르면 리스트에 뿌려진다. 4 텍스트 .. 2017. 5. 22.
12.자바스크립트 기초 문법 (FORM) //예졔)================================ //예졔)================================ //예졔)================================ //예졔)================================aabbcc def //예졔)================================ aa bb cc //예졔)================================http://www.daum.net">다음http://www.naver.com">네이버http://www.yahoo.com">야후 //예졔)================================과정 목록 java javascript oracle //예졔)========.. 2016. 12. 29.
11.자바스크립트 기초 문법 (window) # window의 open메서드 a.html====== b.html====== 장영실 # window.close() a.html====== b.html====== 장영실 # window.opener[ex]a.html====== b.html====== # setTimeout, setInterval, clearTimeout, clearInterval 초 var 객체=document.getElementById("문자열id이름");[ex] window.opener[ex]a.html====== b.html====== frame태그 a.html====== b.html====== b.html문서입니다. c.html====== c.html문서입니다. 예)a.html====== b.html====== b.html문서입니.. 2016. 12. 29.
왕 기초 자바스크립트 - 함수 var 처음만든함수 = function () { console.log("안녕하세요!");}; 처음만든함수();// 안녕하세요! ================== var 인사하기 = function (이름) { console.log("안녕하세요 " + 이름 + "님!");}; 인사하기("아이유");// 안녕하세요 아이유님! 인사하기("수지");// 안녕하세요 수지님! ==================var 고양이그리기 = function (반복횟수) { for (var i = 0; i < 반복횟수; i++) { console.log(i + " =^.^="); }}; 고양이그리기(5);// 0 =^.^=// 1 =^.^=// 2 =^.^=// 3 =^.^=// 4 =^.^= ==================.. 2016. 12. 29.
왕 기초 자바스크립트 - 객체 ===================================== ===================================== ===================================== 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013.. 2016. 12. 28.
왕 기초 자바스크립트 - 배열 ======================= ======================================= var 무작위단어 = ["폭발", "동굴", "공주", "펜"];var 무작위색인 = Math.floor(Math.random() * 4);무작위단어[무작위색인];// "동굴" 무작위단어[Math.floor(Math.random()*4)];// "공주" =====================================var 색상목록 = ["푸른", "붉은", "검은", "하얀"];var 자연목록 = ["늑대", "태양", "독수리", "바람"];var 단어목록 = ["눈물", "환생", "기상", "일격", "유령"]; // 색상목록 배열에서 무작위 단어를 하나 고릅니다var 색상 = 색상.. 2016. 12. 28.
10.자바스크립트 기초 문법 (노드메서드 2) 마우스를 따라다니며 그림이 움직인다. 2. document 구조 (배열) 3. name으로 접근 가능하다 # var 변수=document.getElementById("id이름"); ----------------------------------------------------------- # http://msdn.microsoft.com/ko-kr/library/d1et7k7c(v=vs.94).aspx # 노드관련 메서드 document.createElement("태그명") document.createTextNode("텍스트") 객체명.insertBefore(newChild,refChild) 객체명.replaceChild(newChild,oldChild) 객체명.removeChild(oldChild) 객체.. 2016. 12. 27.
★자바스크립트 연습 문제 (노드) 3 # http://msdn.microsoft.com/ko-kr/library/d1et7k7c(v=vs.94).aspx# 노드관련 메서드 document.createElement("태그명") document.createTextNode("텍스트") 객체명.insertBefore(newChild,refChild) 객체명.replaceChild(newChild,oldChild) 객체명.removeChild(oldChild) 객체명.appendChild(newChild) 객체명.parentNode 객체명.childNodes 객체명.previousSibling 객체명.nextSibling 버튼을 누르면 4.dd 가 출력될 수 있도록 소스코드를 작성하시오. aa bb cc [an] var liTag=document.c.. 2016. 12. 27.
9.자바스크립트 기초 문법 (노드메서드) # nodeName 1 2 3 # tagName[ex] aaa bbb ccc # var 변수=document.getElementById("id이름");[ex] aaa bbb ID를 입력하세요~ ----------------------------------------------------------- aaa bbb ID를 입력하세요~ [ex] aa jafkldsjfl;ajdfk cc [ex] [ex] [ex] 1 2 3 4 5 6 [ex] 123 [ex] 가나다 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737.. 2016. 12. 27.
★자바스크립트 연습 문제2 1문제 이벤트처리를 아래와 같은 형식으로 바꾸시오. 이벤트처리대상.on이벤트명=function(){ } 답 2.문제 3.문제 이벤트처리를 아래와 같은 형식으로 바꾸시오. 이벤트처리대상.on이벤트명=function(){ } 4.문제 5.문제 답 답 답 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122.. 2016. 12. 26.
8.자바스크립트 기초 문법 (confirm&prompt&parseInt&이벤트처리&String&DATE) # 확인대화상자 # 입력대화상자 # 문자열을 정수로 바꾸는 함수 [ex] [ex] [ex] # 함수1 선언적함수2 내부함수3 익명함수 [ex] ---------------------------- [ex] # 이벤트처리[ex] [ex] [ex] [ex] -------------------------------------------------------------- ------- # 태그[ex] http://www.naver.com">연결 [ex]a.html====== 연결 b.html====== 가나다라마바사 [ex] 버튼 ------------------------------- 글자 # 태그[ex] # String[sy] 변수=문자열.charAt(인덱스); 변수=문자열.indexOf(문자열); 변수=문자.. 2016. 12. 26.
9.자바스크립트 기초 문법 (정규표현식&아이디체크&위치표시) 1. 2 .3. 다음으로 이동 4. 영단어 : 5. 사이트를 선택하세요 네이버다음 구글 6. 사이트를 선택하세요 사이트를 선택하세요 네이버다음 구글 7. 마우스 이벤트 8 이름 : .9 이름 : 전화번호: 아이디 이름 이메일 .10 과일선택선택하세요사과배바나나 .11 위치정보 .12 위치정보 .13 파일읽기 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111.. 2016. 12. 23.
8.자바스크립트 기초 문법 (window&노드추가삭제) 1. 2. 아이템1아이템2아이템3아이템4아이템5 3. div 영역 div의 내용 div 변경 4. 여기를 클릭 첫번째 단락두번째 단락 단락제거 5. 6. 7. 버튼을 누르세요 확인 멈춤 8. 이동 이동 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131.. 2016. 12. 22.
★자바스크립트 연습 문제1 아래소스코드를 for문으로 바꾸시오. 1 2 3 4 5 6 7 8 9 10 아래소스코드를 for문으로 바꾸시오. 버튼을 누르면 h1태그의 border-style을 solid로 border-color를 yellow로 바꾸시오. abc 테이블만들기 줄 칸 abc 아래소스코드를 for문으로 바꾸시오. 함수를 하나로 처리하시오. onmouseover 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041.. 2016. 12. 21.
7.자바스크립트 기초 문법 (exception&문자열) 1. 2. 3. 4. 1부터 100까지확인5. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160.. 2016. 12. 21.
6.자바스크립트 기초 문법 (문자열&아이디체크&배열) 1. 아이디 : 검사 2 3 4 입력 : 결과 : 5 6 7 8 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615.. 2016. 12. 21.
5.자바스크립트 기초 문법 (객체&날짜계산&프로토타입) 1. 2. 3. 4. 구입날짜 : 검사 5.6. 7. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815.. 2016. 12. 21.
4.자바스크립트 기초 문법 (객체 선언&배열&form) 1. 2. 3. 4. 5. 6.. 필드1 필드2 필드3 7. 클릭 8. 이름: 직급 : 확인 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511.. 2016. 12. 20.
3.자바스크립트 기초 문법 (for문&구구단) 1 2 3 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616.. 2016. 12. 20.
2.자바스크립트 기초 문법 if 문 &form 1a: b: 2 첫번째 정수: 두번째 정수 : 합계 : 3. 클릭하세요 4. 숫자 숫자 : 추측횟수:힌트: 5. 숫자 숫자 : 추측횟수:힌트: 정답: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014.. 2016. 12. 19.
1.자바스크립트 기초 문법(요소에 접근&대화상자&배열&함수) 1. 인라인 자바스크립트 2. 3. 4. 2. test var s; //변수 선언(자료형이 없음) s = 100; // 가변자료형(우변의 데이터형에 따라 결정) document.write(s+" "); //웹브라우저에 출력 s="홍길동"; document.write(s+" "); 3. 문자 var s = "Hello World" var t = "How are you "+ "today"; //문자열 연결 document.write(s+" "); document.write(t+" "); //대문자로 변환 document.write(s.toUpperCase()+" "); // 소문자로 변환 document.write(s.toLowerCase()+" "); 4. 연산 function test(x,y){ x= p.. 2016. 12. 19.

티스토리툴바