DevSSOM

Fade 이벤트 영화에서 보여지는 Fade 효과는 다음 제이쿼리 이벤트로 쉽게 구현할 수 있음. $("h1").fadeOut(); // 서서히 사라지게 $("h1").fadeIn(); // 서서히 나타나게 $("h1").fadeToggle(); // fadeOut과 fadeIn 둘 다 실습문제 Hello jQuery Fade Out Fade In Fade Toggle 이제 저 버튼들에 fade 이벤트 기능들을 넣기 위해서 제이쿼리로 index.js 파일을 작성해주기. 가장 먼저, fade-out 버튼. $(function() { $("#fade-out").click(function() { $("h1").fadeOut() }); }); 나머지 버튼들도 코드를 작성해주면 $(function() { $("#f..

Hide, Show, Toggle 이벤트 다음 제이쿼리 이벤트를 사용하여 특정 HTML 영역을 보이거나 감출 수 있음. $("h1").hide(); // 특정 영역을 감추기 $("h1").show(); // 특정 영역을 보여줄 때 $("h1").toggle(); // hide와 show 두 기능을 전부 가지고 있는 형태 실습문제 Hello jQuery hide show toggle 이런 HTML 문서가 있을 때, 제이쿼리로 index.js라는 파일을 만들어서 코드를 작성. 가장 먼저, hide 버튼을 클릭해서 h1인 'Hello jQuery'가 사라지게 만들면, $(function() { $("#hide").click(function() { $("h1").hide(); }); }); 이때, hide() ..

jQuery 제이쿼리에서 제공하는 다양한 기능들을 이벤트라고 함. $("h1").click(function() {...}); $("h1").fadeIn(function() {...}); $("h1").slideDown(function() {...}); 위에서 click, fadeIn, slideDown 같은 것들이 이벤트. 자바스크립트의 객체.메소드 형태랑 유사해. click 같은 경우는 h1 태그를 클릭했을 때, function 안에 있는 코드를 실행시키겠다는 거고, fadeIn은 말 그대로 h1 태그에 fadeIn 효과를 주겠다는 거, slideDown도 이벤트 효과를 적용시키겠다는 거. Mouse 이벤트 제이쿼리에는 다양한 마우스 이벤트가 있음. $("h1").mouseenter(function()..

제이쿼리 선택자 제이쿼리 선택자는 CSS 선택자와 유사한 구조를 가지고 있음. $("태그이름") $("#아이디 속성값") $(".클래스 속성값") - CSS 선택자 h1 // 태그에 접근할 때 #title // id에 접근할 때 .article // class에 접근할 때 - jQuery 선택자 $("h1") // 태그에 접근할 때 $("#title") // id에 접근할 때 $(".article") // class에 접근할 때 만약, 디자인을 입히고 싶다. 즉, CSS와 관련된 기능을 사용하고 싶다고 한다면, jQuery에서 제공하는 css메소드를 활용하면 됨. 디자인은 .css('css 속성', 'css 속성값') 형태로 입력. $("h1").css("color", "blue"); 연습문제 funct..

jQuery 간단한 명령어로 주요 기능을 쉽게 구현할 수 있도록 도와주는 자바스크립트 언어로 구성된 라이브러리. JavaScript와 jQuery 비교 // html문서에 접근할 때 // 자바스크립트 var str1 = document.getElementById("title"); // 제이쿼리 $("#title") 자바스크립트보다 제이쿼리를 쓸 때 코드 작성이 아주 간단해짐.

연습문제 : 반복문으로 구구단 완성하기 for문을 사용하여, 구구단 2단부터 9단을 완성시켜 보기. 첫 번째 for문의 변수n는 구구단 몇 단인지를 정하는 숫자. 두 번째 for문으 변수i는 n단에서의 1부터 9를 나타내는 숫자. 조건문 형식은 for ( ) { for ( ) { } }임. 팁 출력되는 형식은 2 * 1 = 2와 같아야 함. 2는 n, 1은 i, 2는 n * i(이때 *는 산술 연산자). 변수는 따옴표를 작성하면 안되는 반면, 기호인 * 와 = 는 문자열 데이터 타입이므로 따옴표를 꼭 작성해주어야 함. 여러 데이터를 이어서 출력하고 싶으시면 산술 연산자 +를 사용하면 됨. >>> // 2단부터 9단까지 출력하는 반복문 for( var n = 2; n < 10; n++) { for ( va..

연습문제 : 구구단 함수 만들기 for문을 사용하여 구구단을 출력하는 함수 timesTable 만들기. 예를 들어, 함수 인자로 숫자 2가 전달되면 2단을 출력. 팁 매개변수n은 고정값, 즉 내가 출력하고자 하는 n단이 되고, for 안의 변수i는 가변값, 즉 1부터 9까지의 숫자가 되어야 함. >>> function timesTable(n) { for( var i = 0; i < 10; i++ ) { console.log( n + "x" + i + "=" + n * i ); } } timesTable(2); // 2단만 출력 timesTable(3); // 3단만 출력

문자열 거꾸로 출력하기 for문을 사용하여, 함수의 인자로 전달된 문자를 거꾸로 출력하는 함수 reverse의 코드를 작성하기. console.log(reverse("Hello")); //olleH 출력 해야할 것 for ( ) { } 을 입력하여 조건문 생성을 시작. for의 변수로 var i = str.length-1를 입력. for의 조건으로 i >= 0을 입력. for의 조건으로 i--을 입력. 조건문 실행 시, 비어있는 변수 reverStr에 str.charAt(i)를 삽입. for문 실행을 완료하였다면, reverStr을 반환. 팁 str.length-1인 이유는, 데이터의 총 길이에서 1을 빼야, 해당 데이터의 인덱스(좌표값)가 되기 때문. 또한, 마지막 문자부터 거꾸로 출력해야 하므로, s..