웹언어/JAVASCRIPT (31) 썸네일형 리스트형 [JS강좌] 23강 이벤트객체의 속성과 메서드 - 오쌤의 니가스터디 ** 동영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://youtu.be/Ys-mZxuLqc8 1. 이벤트객체 - 이번 강좌에서는 이벤트 객체의 속성과 메서드에 대해서 배워보도록 하겠습니다. - 이벤트객체는 DOM과 관련된 이벤트가 발생되면 발생되는 관련 정보를 저장하는 객체라고 생각하시면 됩니다. - 예시로 마우스로 이벤트가 발생되면 마우스의 위치값을 저장해주는 것을 마우스이벤트 객체라 보면 됩니다. - 예시로 키보드로 이벤트가 발생되면 누른 키의 키코드를 저장해주는 것을 키보드이벤트 객체라 보면 됩니다. ## 문법 //1. 고전이벤트사용 문서객체선택.on이벤트타입명 = function(이벤트객체매개변수){ } //2. addEventLister()사용 문서객체선택.addEventList.. [JS강좌] 22강 DOM - 문서객체이벤트 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://youtu.be/Nov0j-tX1cw 1. 이벤트 연결 속성과 메서드 - 이번 강좌에서는 문서객체 이벤트를 보도록 하겠습니다. 이벤트 종류 문법 고전이벤트 문서객체선택.on이벤트타입명 = function(){ } addEventListener() 문서객체선택.addEventListener('이벤트타입명',function(){}); removeEventListener() 문서객체선택.removeEventListener('이벤트타입명',function(){}); 인라인이벤트 태그의 속성으로 이벤트를 작성 - 이벤트 연결은 속성 방식 있고 메서드 방식이 있습니다. - 두 방식 모두 공부해보록 하겠습니다. 1) 고전이벤트 - 예전에만 사용했다.. [JS강좌] 21강 DOM - 문서객체생성 - 오쌤의 니가스터디 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. https://youtu.be/fjLjC4zWatA - 이번 강좌에서는 DOM인 요소, 텍스트등을 생성해보도록 하겠습니다. 1. 문서객체 동적생성 - 요소생성 - 위에서는 문서객체가 미리 생성되어 있는 것을 선택하는 것을 배워보았습니다. - 요번에는 자바스크립트가 문서객체를 직접 생성하는 것을 해보도록 하겠습니다. 객체생성 종류 설명 정적생성 html문서에 태그로 직접 작성하여 생성하는 것 동적생성 자바스크립트로 문서객체를 생성하는 것 - 문서객체 생성은 속성 방식 있고 메서드 방식이 있습니다. - 두 방식 모두 공부해보록 하겠습니다. 1) innerHTML속성을 이용한 문서객체 생성 - innerHTML은 선택된 문서객체에 HTML코드를 문자열로 처리.. [JS강좌] 20강 DOM - 문서객체선택 - 오쌤의 니가스터디 ** 동영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/dm5oqw1F8NQ 1. DOM(document object model)이란? - html문서의 모든 요소를 의미합니다. - 자바스크립트는 HTML DOM을 사용하여 모든 요소에 접근할 수 있습니다. 1) 자바스크립트가 할 수 있는 DOM의 동적기능 - 자바스크립트는 페이지의 모든 HTML를 변경할 수 있습니다. - 자바스크립트는 페이지의 모든 HTML태그 속성을 변경할 수 있습니다. - 자바스크립트는 페이지의 모든 CSS 스타일을 변경할 수 있습니다. - 자바스크립트는 기존 HTML 요소 및 속성을 제거할 수 있습니다. - 자바스크립트는 새로운 HTML요소 및 속성을 추가할 수 있습니다. - 자바스크립트는 모든 .. [JS강좌] 19강 BOM - screen - 오쌤의 니가스터디 ** 영상으로 보실분은 아래 주소를 클릭해주세요. https://youtu.be/Ii7oydkOWTg * 객체의 큰 부분 종류 설명 기본내장객체 기본적인 객체들로 보통 컴퓨터 언어들은 갖고 있는 객체 BOM(Browser Object Model) 브라우저오브젝트 모델, 브라우저 관련 객체 DOM(Document Object Model) 문서객체모델, 태그나 컨텐츠 등을 의미하는 객체 사용자정의객체 개발자가 직접적으로 생성하는 새로운 객체 * BOM객체 종류 설명 window 브라우저 창 객체, BOM의 최상위 객체 location 주소표시줄 객체 screen 운영체제 화면 객체 history 방문기록 객체 navigator 브라우저정보 객체 document 문서객체 - body태그부분을 의미 - BOM은.. [JS강좌] 18강 BOM - 모바일기기접속 확인 - 오쌤의 니가스터디 ** 영상으로 보실분은 아래 주소를 클릭해주세요. https://youtu.be/Ii7oydkOWTg 1. 현재 웹이 모바일기기에서 접속했는지 확인 - 지난 강좌에서 배웠던 BOM의 navigator객체를 통해 현재 웹이 모바일기기에서 접속했는지 확인해보도록 하겠습니다. ## 코드 예시 - 뷰포트메타태그는 모바일기기를 인식하기 위한 코드입니다. - [mobile_keys]변수에 모바일기기 이름들을 담아놨습니다. - [navigator.userAgent]는 사용자가 접속한 브라우저의 에이전트 정보입니다. 그 중에는 모바일기기면 이름이 들어 있습니다. - [match]는 String객체의 메서드로 문자열에 매개변수와 같은 값이 있으면 true를 반환합니다. ## 코드 결과 - 크롬은 모바일을 테스트해볼수 있.. [JS강좌] 17강 BOM - navigator객체 - 오쌤의 니가스터디 ** 영상으로 보실분은 아래 주소를 클릭해주세요. https://youtu.be/Ii7oydkOWTg * 객체의 큰 부분 종류 설명 기본내장객체 기본적인 객체들로 보통 컴퓨터 언어들은 갖고 있는 객체 BOM(Browser Object Model) 브라우저오브젝트 모델, 브라우저 관련 객체 DOM(Document Object Model) 문서객체모델, 태그나 컨텐츠 등을 의미하는 객체 사용자정의객체 개발자가 직접적으로 생성하는 새로운 객체 * BOM객체 종류 설명 window 브라우저 창 객체, BOM의 최상위 객체 location 주소표시줄 객체 screen 운영체제 화면 객체 history 방문기록 객체 navigator 브라우저정보 객체 document 문서객체 - body태그부분을 의미 - BOM은.. [JS강좌] 16강 BOM - history객체 - 오쌤의 니가스터디 ** 영상으로 보실분은 아래 주소를 클릭해주세요. https://youtu.be/18ADEealDSA * 객체의 큰 부분 종류 설명 기본내장객체 기본적인 객체들로 보통 컴퓨터 언어들은 갖고 있는 객체 BOM(Browser Object Model) 브라우저오브젝트 모델, 브라우저 관련 객체 DOM(Document Object Model) 문서객체모델, 태그나 컨텐츠 등을 의미하는 객체 사용자정의객체 개발자가 직접적으로 생성하는 새로운 객체 * BOM객체 종류 설명 window 브라우저 창 객체, BOM의 최상위 객체 location 주소표시줄 객체 screen 운영체제 화면 객체 history 방문기록 객체 navigator 브라우저정보 객체 document 문서객체 - body태그부분을 의미 - BOM은.. 이전 1 2 3 4 다음
