웹 개발/JavaScript (19) 썸네일형 리스트형 [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)).. [Web_JavaScript] 05 실습(종합(1)) - 문제 - 코드 마우스를 올려보세요 여기에 마우스를 올리면 배경색이 노란색으로 변합니다. 실습(종합(2)) - 문제 - 코드 월화수목금토일 실습(종합(3)) - 문제 - 코드 분석 결과 실습(종합(4)) 1. 문제 1 - 문제 - 코드 2. 문제 2 - 문제 - 코드 [Web_JavaScript] 04 ● callback - JS에서는 함수를 값으로 취급하기 때문에 매개변수로 전달이 가능하다. - 함수를 리턴할 수도 있다. ● setTimeout(callback, 밀리초); - setTimeout에 전달한 callback 함수에 write() 메소드를 사용했다면 기존에 작성했던 HTML 요소들이 사라진다. 실습(callback) 1. function에서 callback 사용하기 function mul(num1, num2, callback) { // 외부에서 callback에 함수를 전달했다면 if(callback) { // 매개변수로 결과를 전달해준다. callback(num1 * num2); } } function print(result) { console.log(result); } mul(4, 5,.. 이전 1 2 3 다음
