웹 개발 (140) 썸네일형 리스트형 [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): .. [Web_JavaScript] 07 ● 객체 - 객체의 고유한 속성을 프로퍼티(property)라고 부르며, 여러 프로퍼티와 값의 쌍으로 표현된다. - 객체가 호출하는 함수는 메소드라고 부른다. ● 객체 사용 방법 account.프로퍼티명 account['프로퍼티명'] (ex) account = {name: '한동석', number: '110-11-11111', code: '1234'}; console.log(account.name); (ex) account = {deposit: function(){...}}; account.deposit(); ● 프로토타입 - new 뒤에 나오는 생성자를 자바스크립트에서는 프로토타입이라고 부른다. - 프로토타입은 함수로 선언하여 사용한다. ● JSON - JSON.parse(): JSON을 JS Obje.. [Web_JavaScript] 06 ● 자바스크립트 전역함수 1. eval() - 문자열 형태로 수식을 전달받아서 수식을 계산한다. (ex) eval("2 * 3 + 4 * 6") == 30; 2. parseInt() - 문자열 타입을 정수 타입으로 변환한다. (ex) parseInt("32") === 32; ※parseInt("32") === 32; - 값과 타입이 모두 같다. 3. isNaN() - NaN이라는 값인지 검사 - 숫자가 아니면 true, 숫자면 false 4. isFinite() - 숫자면 true, 숫자가 아니면 false ● 플랫폼과 솔루션의 차이 1. 플랫폼 - 웹 상에서 서비스를 제공한다. 2. 솔루션 - 웹 또는 Application에서 서비스를 제공한다. 실습(전역 함수(1)) 전역 함수 실습(전역 함수(2)).. 이전 1 ··· 5 6 7 8 9 10 11 ··· 18 다음
