CS Study/Javascript (12) 썸네일형 리스트형 12. 웹 워커 1. 1부터 10까지 더하는 워크 태스크 만들기 1~10까지 더하는 워크 태스크 만들기 let sum=0; for(let i=1;i 11. 쿠키, 웹 스토리지 1. 몇 번째 방문인지 안내하기 2. 구입 리스트 저장/검색 - 세션 스토리지 세션 스토리지에 구입 리스트 저장/검색 품목명 : 개수 : 저장검색 3. 이름과 학번 저장/검색- 세션 스토리지 이름과 학번 입력 이름 학번 스토리지에 저장 이름으로 학번 검색 페이지로 이름과 학번 검색 이름 학번 스토리지에서 검색 이름으로 학번 저장 페이지로 4. 포스트잇 입력/출력 - 로컬 스토리지 포스트잇 제목 메모입력 저장 보기 포스트잇 출력 5. 일기 저장하기 - 로컬 스토리지 일기 쓰기 저장보기 일기 보기 10. 캔버스 그래픽 1. 삼각형 그리기 선으로 삼각형 그리기 2. 원호 그리기 원호 그리기 3. 사각형 색 채우기 채운 사각형과 원호 그리기 4. 캔버스에 이미지 그리기 5. 그림판 구현하기(색 고정) 6. 오륜기 그리기 오륜기 그리기 7. 폼으로 사각형 그리기 폼으로 사각형 그리기 xy widthheight 선굵기 그리기지우기 8. mousedown과 mouseup으로 선 그리기 mousedown과 mouseup으로 선 그리기 9. 파이 차트 그리기 학점 별로 학생 수를 입력하면 파이 차트로 비율 그리기 A명B명C명 D명F명차트 그리기 9. Window 객체 (2) 1. navigator 객체 프로퍼티 나열 브라우저에 관한 정보 출력 아래에 이 브라우저에 관한 여러 정보를 출력합니다. 2. history 객체 활용 history 객체 활용 back() go(-1)() forward() 3. 구글 chrome 브라우저 감별기 - navigator 객체 활용 구글 chrome 브라우저 감별 4. 해상도 경고 메시지 출력 - screen 객체 활용 screen 객체 활용 안녕하세요오오오 8. Window 객체 1. 윈도우 열기 - window.open() window.open()으로 윈도우 열기 엘비스프레슬리 유니버설 올랜도 디즈니월드 홈페이지 2. 윈도우 닫기 - window.close() window의 close()로 윈도우 닫기 새 윈도우 현재윈도우 닫기 새윈도우 닫기 3. 5초 후 링크 접속 - window 타이머 활용 이미지에 마우스를 올리고 5초간 그대로 있을 때 사이트로 이동합니다. 4. 텍스트 자동회전 텍스트가 자동 회전하며, 마우스로 클릭하면 중단합니다. 회전하는 텍스트입니다. 자동 5. 윈도우 크기 조절 - window.moveBy(), window.resizeBy() 윈도우의 위치와 크기 조절 leftright updown +- 6. 윈도우 자동 스크롤 - window.scrollBy() .. 7. 이벤트 객체(2) - 문서, 이미지 로딩 / 폼 이벤트 1. 로딩되면 경고문 출력 안녕! 2. 이미지 로딩 후 크기 출력 onload로 이미지 크기 출력 바나나 사과 망고 이미지 크기 3. new Image()로 이미지 로딩 new Image()로 이미지 로딩 이미지를 클릭하면 다음 이미지를 보여줍니다. 4. 이름 입력 후 다음 폼으로 이동 가능한 폼 만들기 - onblur, onfocus 활용 onfocus와 onblur 이름을 입력하지 않고 다른 창으로 이동할 수 없습니다. 이름 학번 5. 클릭되면 라디오 버튼의 value 출력 - checked 프로퍼티 활용 버튼을 클릭하면 선택된 라디오 버튼의 value를 출력합니다. 서울 부산 춘천 6. 자동 물품 계산기 - checked 프로퍼티 활용 물품을 선택하면 금액이 자동 계산됩니다. 모자 1만원 구두 3만.. 6. 이벤트 객체 (1) - 마우스 핸들링 1. 마우스 올리면 경고문 출력 - onmouseover() 이곳에 마우스를 올려 보세요 클릭하세요 2. 이벤트 객체 프로퍼티 출력 이벤트 객체의 프로퍼티 출력 버튼을 클릭하면 이벤트 객체를 출력합니다. 클릭하세요 3. 링크 이동 - preventDefault() 활용 이벤트의 디폴트 행동 취소 네이버로 이동할 지 물어보는 링크 빵(체크 됨); 술(체크 안됨); 4. 계산기 onclick, 계산기 만들기 계산하고자 하는 수식을 입력하고 계산 버튼을 눌러봐요. 식 값 5. CSS 속성 동적 변경 - 마우스 관련 이벤트 리스너 활용 마우스 관련 이벤트 리스너 마우스 관련 이벤트가 발생합니다. 6. 마우스 좌표 출력 마우스 이벤트 객체의 프로퍼티와 onmousemove 이미지 위에 마우스를 움직일 때 onmo.. 5. DOM / document 객체 1. CSS스타일 동적 변경 - getElementById 활용 CSS스타일 동적 변경 이것은 문장입니다. 2. CSS스타일 동적 변경 - innerHTML 활용 CSS스타일 동적 변경 이것은 문장입니다. 3. 버튼 만들기 - onclick(), this 활용 버튼 활용 4. document의 주요 프로퍼티 활용 document의 주요 프로퍼티 네이버 홈페이지 이곳은 div 영역입니다. 5. 하이라이트 - getElementsByTagNames 활용 내가 좋아하는 과일 저는 빨간 사과를 좋아해서 아침마다 한 개씩 먹고 있어요. 운동할 때는 중간 중간에 바나나를 먹지요. 탄수화물 섭취가 빨라 힘이 납니다. 또한 달콤한 향기를 품은 체리와 여름 냄새 물씬 나는 자두를 좋아합니다. 6. 하이라이트 - getE.. 이전 1 2 다음