본문 바로가기

전체 글

 (275)
[Web_JavaScript] 15 ● 브라우저 객체 모델(BOM) - 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다. - 이 때 사용할 수 있는 객체 모델을 브라우저 객체 모델(BOM)이라고 한다. - 브라우저 객체 모델은 문서 객체 모델(DOM)과 달리 W3C의 표준 객체 모델은 아니지만 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 수 있는 방법을 제공해준다. ● window 객체 - 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원한다. - 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다. ● window.onload = function(){} - 스크립트 언어는 위에서 아래로 해석되기 ..
[Web_JavaScript] 14 실습(DOM 정리) - 아래 이미지처럼 출력되는 프로그램 1. css * { margin: 30px 0; font-family: 'Black Han Sans'; } fieldset { border-style: dashed none none none; text-align: center; border-top-color: #ab47bc; border-top-width: 10px; width: 50%; margin: 10px auto; font-size: 3em; } p { font-family: 'Noto Sans KR'; font-size: 2rem; margin-bottom: 100px; } input[type='text'] { width: 50%; border-style: none none solid n..
[Web_JavaScript] 13 실습(event) - 첨부파일 썸네일 실습(DOM 정리) - 아래 이미지처럼 출력되는 프로그램 1. css body { font-family: 'Jua', sans-serif; font-size: 1.5rem; } table{ width: 30%; text-align: center; margin: 30px auto; } fieldset{ text-align: center; width: 25.5%; margin: 0 auto; } thead{ background-color: #fff9c4; } 2. html 요금표 구분 요금 아동 무료 청소년 2000원 성인 5000원 구분 확인 3. js let tempTr; let tempText; function confirm() { const input = docu..
[Web_JavaScript] 12 ● 객체를 동적으로 생성, 삽입, 삭제 - DOM 트리에 동적으로 객체를 삽입할 수 있다. 1. createElement("태그명") : 생성 2. appendChild("태그객체") : 삽입 3. removeChild("태그객체") : 삭제 실습(DOM) 1. 객체의 동적 생성, 삽입, 삭제 DOM 트리에 동적으로 객체를 삽입할 수 있다. createElement("태그명"), appendChild("태그객체"), removeChild("태그객체") 위 3개의 메소드를 이용해서 새로운 객체를 생성, 삽입, 삭제한다. DIV 생성 실습(event(1)) - 클릭 이벤트 CSS 스타일 동적 변경 나비가 날고 있어요. 실습(event(2)) - 포커스 이벤트 포커스 이벤트
[Web_JavaScript] 11 ● CSS 선택자 1. querySelector("선택자") - 선택자에 포함된 태그 중 첫번째로 찾은 태그 한 개 가져오기 2. querySelectorAll("선택자") - 선택자에 포함된 태그 전부 가져오기 실습(DOM(1)) 1. name을 이용한 선택 name 속성을 이용한 선택 JAVA C Python 실습(DOM(2)) - 아이디를 이용한 선택 아이디를 이용한 선택 첫 번째 DIV 입니다. 두 번째 DIV 입니다. 세 번째 DIV 입니다. 실습(DOM(3)) 1. CSS 선택자를 이용한 선택 - 공통 CSS 선택자를 이용한 선택 순대 떡볶이 탕수육 피자 튀김 - 홀수는 글자색을 빨간색으로 변경 ...... - 짝수는 글자색을 마젠타(magenta)로 변경 ...... ※ 위의 내용을 딱 1줄..
[Web_JavaScript] 10 ● DOM(Document Object Model) 객체 - HTML 태그들을 하나씩 객체화한 것을 말한다. - HTML 페이지의 내용과 모양을 제어하기 위해 사용되는 객체이다. - HTML 태그 당 DOM객체가 하나씩 생성된다. - HTML 태그의 포함관계에 따라서 부모, 자식, 형제자매 관계로 구성된다. 실습(json_array) 1. 문제 // train.json을 가져와서 객체로 변환 후 // level 프로퍼티로 변경하여 forEach를 통해 출력한다. // 다른 프로퍼티가 필요 없기 때문에 객체를 level로 변경해야 한다. 2. 코드 let file = require('fs'); let train = new Array(); let hong = {name: '홍길동', age: 20, leve..
[Web_JavaScript] 09 실습(array(1)) // js의 Array 객체는 길이를 설정하지 않아도 // 원하는 인덱스에 원하는 값을 바로 추가할 수 있다. // 또한 타입이 지정되어 있지 않기 때문에 다양한 타입도 동시에 담을 수 있다. var datas = []; datas[0] = 10; console.log(datas); datas[3] = 30; console.log(datas); console.log(datas.length); 실습(array(2)) 1. push(): 가장 마지막에 값 추가 var datas = [20, 5, 6, 12, 10]; datas.push(19); console.log(datas); console.log(datas[3]); 2. join(): 원하는 구분점을 문자열로 전달하여 각 요소를 ..
[Web_JavaScript] 08 ● Date 객체 var 객체명 = new Date(); ● Date 객체의 주요 메소드 1. getFullYear(): 4자리 년도 2. getMonth(): 0~11사이의 정수(0: 1월, 1: 2월, ..., 11: 12월) 3. getDate(): 한 달 내의 날짜(28~31) 4. getDay(): 한 주 내 요일(0: 일요일, 1: 월요일, ..., 6: 토요일) 5. getHours(): 0~23사이의 정수 6. getMinutes(): 0~59사이의 정수 7. getSeconds(): 0~59사이의 정수 8. getMilliseconds(): 0~999사이의 정수 9. getTime(): 1970년 1월 1일 0시 0분 0초 기준 현재까지의 밀리초 10. setFullYear(year): ..

티스토리툴바