본문 바로가기

자바스크립트

js13_effect /* jQuery Effect A. effect method show() : 문서객체를 보이게 하기 hide() : 문서객체를 보이게 하기 toggle() : show() hide() 번갈아 수행 slidedown() : 슬라이드 효과 보이기 slideup() : 슬라이드 효과 감추기 slidetoggle() : slidedown, slideup 번갈아 수행 fadein(): 서서히 보이기 fadeOut() : 서서히 감추기 fadeToggle() : fadein, fadeout 번갈아 수행 B. effect 메서드 4가지 형태 1. $(선택자).method() 2. $(선택자).method(speed) : slow, normal, fast, 숫자(ms) 3. $(선택자).method(speed, 콜백함.. 더보기
js12_events .reverse{ background-color: black; color:white; } // on() : 발생된 이벤트를 dom객체에 연결 $(function() { // 1. on(이벤트, function(event) {} ) $('h1').on('click', function(event) { $(this).html(function(index, html) { return html + '+'; }) }) // 2. 실습. reverse 클래스를 add or remove 하기 // mouseenter(addClass), mouseleave(removeClass) $('h1').on('mouseenter', function(e) { $(this).addClass('reverse'); }) $('h1').o.. 더보기
js11_Query 신기한 쿼리의 세계,,, $(function(){ $('h1').css('color','red'); // getElementTagName('h1').css() $('p').css('color', 'green'); $('#target').css('color', 'orange'); $('h1#target').css('color', 'mediumseagreen'); }); "Try it Yourself" 편집기. "Try it Yourself" 편집기를 사용하면 jQuery를 쉽게 배울 수 있습니다. 코드를 편집하고 브라우저에서 결과를 볼 수 있습니다. W3Schools에서 제공하는 무료 "내 학습" 프로그램으로 진행 상황을 추적하세요. 계정에 로그인하고 포인트 적립을 시작하세요! 이것은 선택적 기능입니다. .. 더보기
js10_exception function getMonthName(mo) { mo = mo - 1; let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; if (months[mo]) { return months[mo]; } else { throw `${mo}월의 값은 1~12까지 입니다`; } } let myMonth = 10; try { monthName = getMonthName(myMonth); console.log(`입력한 달은 ${monthName}월 입니다`) } catch (e) { monthName = 'unknown'; console.log(e); } finally{ console.log('프.. 더보기
js09_builtin /* object는 JavaScript에서 최상위부모객체이기 때문에 모든 객체는 Object를 상속받는다. 상속받은 모든 객체들은 Object가 가지고 있는 모든 속성과 메서드를 동일하게 사용할 수 있다. 또한 공통적으로 사용할 속성과 메서드가 있다면 Object의 prototype에 속성과 메서드를 추가하면 모든 객체에서 사용할 수 있게 된다. JavaScript에서는 기본적으로 제공해주는 객체가 있는데 이를 통칭해서 내장객체 builtin객체라고 한다. 자주 사용하는 String, Array, Date, JSON, Math, Number... 등이 내장객체인데 이 내장객체에서는 속성과 메서드들을 제공하는데 이 속성과 메서드를 자유롭게 사용하면 보다 편리하게 프로그램을 작성할 수 있게 된다. */ //.. 더보기
js08_events /* 이벤트(evernt)란? 특정의 DOM에 사용자가 마우스 또는 키보드 등의 행위가 일어 났을 때 문서객체에 발생되는 일련의 동작(사건, event)을 말한다. 특정의 이벤트가 발생하면 그 이벤트에 맞는 동작을 하는 기능을 수행할 수 있도록 하게 되는데 일반적으로 동작을 수행하는 것을 함수와 연결한다. 그 함수는 이벤트가 발생되기 전에는 실행되지 않다가 해당 이벤트가 발생되면 수행된다. 이 함수를 이벤트핸들러(Event Handler)라고 한다. 자바스크립트에서 처리하는 이벤트는 1. UI관련 이벤트 load : 웹페이지나 스크립트의 로드가 완료가 되었을 때 unload : 웹페이지가 언로드 될 때 주로, 새로운 페이가 페이지가 요청될 때 error : 브라우저가 자바스크립트의 오류가 발생했거나 요청.. 더보기
js07_DOM /* 문서객체모델(DOM, Document Object Model) 웹브라우저가 html페이지를 인식하는 방식이며 좁은 의미로는 document객체와 관련된 객체를 말한다. 문서객체를 이용하면 html페이지에 태그(요소, element)를 추가, 수정, 삭제할 수가 있다. 문서객체는 텍스트노드를 갖는객체(h1, button, ...)와 텍스트노드를 갖지 않는 객체(body, input, ...)가 있다. 1. 속성 a. innerHTML : 태그 내부의 문자를 조작 b. style : 태그 스타일을 조작 c. setAttribute(, ) : 태그의 속성을 설정 d. getAttribute() : 태그의 속성을 읽기 2. 매서드 a. createElement(태그) : 정의된 태그(문서객체)를 생성 b... 더보기
js06_BOM /* 브라우저 객체모델(Browser Object Model) BOM은 웹브라우저와 관련된 객체의 집합객체를 의미한다. BOM은 window > screen, location, navigator, history, document가 있다. 간단하게 문서객체모델(DOM, Document Object Model)이라 통합해서 부르기도 한다. */ document.write(typeof window + '='+ window, ' '); for(let key in window){ document.write(`${key} = ${window[key]} `); } window.alert('경고창함수는 window객체의 매서드 중 하나이다'); /* window 객체는 브라우저 기반의 모델에서 최상위 객체이다. ale.. 더보기

티스토리툴바