본문 바로가기

자바스크립트 문법13

[자바스크립트 기초]제이쿼리 2 요소의 콘텐츠 가져오기.html() 메서드와 .text() 메서드는 요소의 콘텐츠를 조회하는 기능과 수정하는 기능을 모두 제공한다. 이 페이지는 요소의 콘텐츠를 조회하는 방법에 초점을 맞춘다. .html()jQuery 객체집합으로부터 정보를 조회할 목적으로 이 메서드를 호출하면, 첫 번째 요소와 그 하위 노드들의 html 코드만을 얻게 된다. 예) $(‘ul’).html(); 메서드는 다음의 코드를 리턴한다. fresh figs pine nuts honey balsamic vinegar 반면, $(‘li’).html() 메서드는 다음 코드를 리턴한다.fresh이 경우 첫 번째 요소의 콘텐츠만 리턴된다.모든 요소값을 조회하려면 .each() 메서드를 사용한다. .text()jQuery 객체집합으로부터 텍스.. 2017. 3. 3.
[자바스크립트 기초] 함수 이벤트 DOM을 이용한 초미니 프로젝트 1 그동안 정리했던 자바스크립트 내용으로 아주 작고 작은 프로젝트를 만들어 보자!이 시점에서 계속 이론만 배우면 지루하다.작은 프로젝트로 흥미를 돋우기 위해서 배웠던 내용을 응용해서 만들 수 있는 과제(?)를 기획해 보았다.아래코드를 보기 전에 한번 생각 해보세요~ 테이블 칸에 있는 사진에 마우스를 올리면 해당 사진이 확대되어 나타난다. [사진에 마우스를 올려보세요]123456789 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 table{width:500px;height:500px;} td{border:sol.. 2017. 2. 28.
[자바스크립트 기초 ]이벤트의 종류와 개념 1 자바스크립트 이벤트 종류 UI 이벤트 – 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 발생이벤트설명load웹 페이지의 로드가 완료되었을 때unload웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우 )error브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우resize브라우저의 창 크기를 조정했을 때scroll사용자가 페이지를 위아래로 스크롤 할 때 키보드 이벤트 – 사용자가 키보드를 이용할 때 발생한다.이벤트설명keydown사용자가 키를 처음 눌렀을 때 keyup키를 땔 때 keypress사용자가 눌렀던 키의 문자가 입력되었을 때 마우스 이벤트 – 사용자가 마우스나 터치화면을 사용할 때 발생이벤트설명click사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때dbcl.. 2017. 2. 26.
[자바스크립트 기초]DOM 문서객체모델의 이해 2 DOM탐색하기 페이지에 요소 노드가 존재한다면 다음 5가지 속성을 이용하여 다른 요소들을 선택할 수 있다. 이런 과정을 DOM 탐색이라고 한다. parentNode – 이 속성은 부모 노드를 찾는다.previousSibling – 이전 노드를 찾는다.nextSibling - 다음 노드를 찾는다firstChild - 첫 번째 자식 요소를 찾는다.lastChild – 마지막 자식 요소를 찾는다. (요소가 존재 하지 않을 때는 null 이 리턴된다.)(IE를 제외한 대부분의 브라우저들은 요소 사이의 공백 문자를 텍스트로 취급하기 때문에 리턴하는 값은 브라우저에 따라 달라지게 된다.) 이전&다음 이웃 요소.HTML List Buy groceries fresh figspine nutshoneybalsamic vi.. 2017. 2. 25.
왕 기초 자바스크립트 - 함수 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.
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.
9.자바스크립트 기초 문법 (정규표현식&아이디체크&위치표시) 1. 2 .3. 다음으로 이동 4. 영단어 : 5. 사이트를 선택하세요 네이버다음 구글 6. 사이트를 선택하세요 사이트를 선택하세요 네이버다음 구글 7. 마우스 이벤트 8 이름 : .9 이름 : 전화번호: 아이디 이름 이메일 .10 과일선택선택하세요사과배바나나 .11 위치정보 .12 위치정보 .13 파일읽기 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111.. 2016. 12. 23.
6.자바스크립트 기초 문법 (문자열&아이디체크&배열) 1. 아이디 : 검사 2 3 4 입력 : 결과 : 5 6 7 8 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615.. 2016. 12. 21.
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.