본문 바로가기

Front18

dd let num = 0; $('.lst-prize li').eq(num).addClass('on') $('.lst-prize li').mouseenter(function(){ if($('.lst-prize li').hasClass('on')){ $('.lst-prize li').removeClass('on') } let index = $('.lst-prize li').index(this); $('.lst-prize li').eq(index).addClass('on') $('.col-img img').attr('src', './images/img-jackpots' + index + '.gif') }) 2020. 11. 26.
nav jQuery 소스 클릭시 $('.depth1 > li > a').click(function(){ if ($(this).parent().hasClass('on') === false) { $('.depth1 > li').removeClass('on'); $(this).parent().addClass('on'); } else if ($(this).parent().hasClass('on') === true) { $(this).parent().removeClass('on'); } }) 마우스 오버시 $('.depth1 > li > a').mouseenter(function () { if ($(this).not($(this).hasClass('on'))) { $('nav li ul').slideUp(); $(this).next()... 2020. 11. 12.
06. jQuery Effects Hide / Show hide()및 show()메서드를 사용하면 HTML 요소를 숨기고 표시 할 수 있습니다 hide() 요소를 숨깁니다. show() 요소를 보여줍니다. See the Pen OJNmQXr by miae (@flato) on CodePen. Fading 요소를 서서히 보여주거나 없앱니다. $(selector).fadeToggle(speed,callback); speed 매개 변수는 효과의 지속 시간을 지정하고 "slow", "fast"또는 milliseconds(2000) 값을 사용할 수 있습니다. 선택적 콜백 매개 변수는 페이딩이 완료된 후 실행되는 함수입니다. fadeIn() 숨겨진 요소를 서서히 보여줍니다. fadeOut() 요소를 서서히 안보이게 합니다. fadeToggle() .. 2020. 8. 28.
05. jQuery Event Methods 이벤트 란? 웹 페이지가 응답 할 수있는 모든 방문자의 행동을 이벤트라고 하고 어떤 일이 발생하는 정확한 순간을 나타냅니다. 요소 위로 마우스 이동 라디오 버튼 선택 요소 클릭 Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload 이벤트를 실행 시키려면 아래 구문과 같이 클릭 이벤트를 넣으면 됩니다. $("p").click(function(){ // action goes here!! }); on () 메서드 on()메서드는 선택한 요소에 대해 하나 .. 2020. 8. 28.
04. jQuery HTML Dimensions Dimensions (박스 모델) width() 요소의 너비를 설정하거나 반환합니다 (패딩, 테두리 및 여백 제외) height() 요소의 높이를 설정하거나 반환합니다 (패딩, 테두리 및 여백 제외) innerWidth() 요소의 너비를 반환합니다 (패딩 포함) innerHeight() 요소의 높이를 반환합니다 (패딩 포함) outerWidth() 요소의 너비를 반환합니다 (패딩, 테두리 및 여백 포함) outerHeight() 요소의 높이를 반환합니다 (패딩, 테두리 및 여백 포함) width(), height() See the Pen vYGmpdm by miae (@flato) on CodePen. Document와 Window 비교 1. Document (전체 문서 크기) - 창크기에 상관없이 일정.. 2020. 8. 28.
03. jQuery HTML jQuery DOM 조작 jQuery의 매우 중요한 부분 중 하나는 DOM을 조작 할 수 있다는 것입니다. DOM = 문서 개체 모델 DOM은 HTML 및 XML 문서에 액세스하기위한 표준을 정의합니다. "W3C DOM (문서 개체 모델)은 프로그램과 스크립트가 콘텐츠, 구조 및 콘텐츠에 동적으로 액세스하고 업데이트 할 수 있도록하는 플랫폼 및 언어 중립적 인터페이스입니다. 문서 스타일. " 콘텐츠 가져오기 요소의 콘텐츠를 가져오거나 설정할 수 있습니다. text() 선택한 요소의 텍스트 내용을 설정하거나 반환합니다. html() 선택한 요소 (HTML 마크 업 포함)의 내용을 설정하거나 반환합니다. val() 양식 필드의 값을 설정하거나 반환합니다. text(), html() See the Pen MW.. 2020. 8. 20.
02. jQuery Selectors html의 요소를 선택하고 조작하려면 jQuery의 선택자를 사용해야 합니다. jQuery의 모든 선택기는 달러 기호와 괄호 ($ ())로 시작합니다. 태그 선택자 $("p") $("button").click(function(){ $("p").hide(); }); #id 선택자 $("#test") $("button").click(function(){ $("#test").hide(); }); .class 선택자 $(".test") $("button").click(function(){ $(".test").hide(); }); 추가 선택자 $("*") 모든 요소 선택 $(this) 현재 요소 선택 $("p.intro") 선택 $("p:first") 첫번째 요소 선택 $("ul > li") 의 자식 중 요소 선.. 2020. 8. 20.
01. Hello jQyery jQuery란? jQuery의 목적은 웹 사이트에서 JavaScript를 훨씬 쉽게 사용할 수 있도록하는 것입니다. 여러 줄의 자바스크립트로 처리해야 할 작업을 한줄로 처리할 수 있도록 합니다. 예를 들어 폰트 사이즈를 35px로 변경하는 스크립트를 작성하려고 한다면... jQuery를 이용하면 훨씬 쉽게 작성할 수 있습니다. javascript document.getElementById("demo").style.fontSize = "35px"; jQuery $("#demo").css("font-size", "35px"); 웹페이지에 jQuery 추가 jQuery를 사용하려면 jQuery 라이브러리가 필요합니다. 아래의 2가지 방법으로 연결하여 사용할 수 있습니다. 1. jQuery 다운로드 아래 사이트.. 2020. 8. 20.
06. 객체 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/06-object.html 06. 객체 · GitBook 06. 객체 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다. const dog = { name: '멍멍이', age: 2 }; console.log(dog.name); console.log(dog.age); 결과물은 다 learnjs.vlpt.us 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다. const dog = { name: '멍멍이', age: 2 }; console.log(dog.name); console.log(dog.age).. 2020. 8. 19.
05. 함수 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/05-function.html 05. 함수 · GitBook 함수는, 특정 코드를 하나의 명령으로 실행 할 수 있게 해주는 기능입니다. 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같이 코드를 작성합니다. 한번, 이 작업을 함수로 만� learnjs.vlpt.us 함수는, 특정 코드를 하나의 명령으로 실행 할 수 있게 해주는 기능입니다. 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같이 코드를 작성합니다. const a = 1; const b = 2; const sum = a + b; 한번, 이 작업을 함수로 만들어보겠습니다. function add(a, b) { r.. 2020. 8. 19.
04. 조건문 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/04-conditions.html 04. 조건문 · GitBook 04. 조건문 조건문을 사용하면 특정 조건이 만족됐을 때 특정 코드를 실행할 수 있습니다. if 문 가장 기본적인 조건문은 if 문입니다. if문은, "~~하다면 ~~를 해라" 를 의미합니다. 예시 코드를 한�� learnjs.vlpt.us 조건문을 사용하면 특정 조건이 만족됐을 때 특정 코드를 실행할 수 있습니다. if 문 가장 기본적인 조건문은 if 문입니다. if문은, "~~하다면 ~~를 해라" 를 의미합니다. 예시 코드를 한번 봅시다. const a = 1; if (a + 1 === 2) { console.log('a + 1 이 2 .. 2020. 8. 18.
03. 연산자 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/03-operator.html 03. 연산자 · GitBook 03. 연산자 연산자에 대해서 알아봅시다. 연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자입니다. 예를 들어서, 우리가 변수와 상수를 배울 때 다음과 같은 코드를 작성했었지요? let learnjs.vlpt.us 연산자에 대해서 알아봅시다. 연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자입니다. 예를 들어서, 우리가 변수와 상수를 배울 때 다음과 같은 코드를 작성했었지요? let value = 1; // 변수 선언 value = 2; // 대입 연산자 여기서 두번째 줄에서 사용된 = 문자가 바로 연산자입니다. 연산자의 종류.. 2020. 8. 17.
02. 변수와 상수 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/02-variables.html 02. 변수 · GitBook 02. 변수와 상수 변수와 상수에 대해서 알아봅시다. 변수와 상수는, 특정 이름에 특정 값을 담을 때 사용합니다. 예를 들어서 우리가 value 라는 이름에 1 이라는 값을 넣는다고 가정해봅시다. 그러 learnjs.vlpt.us 변수와 상수에 대해서 알아봅시다. 변수와 상수는, 특정 이름에 특정 값을 담을 때 사용합니다. 예를 들어서 우리가 value 라는 이름에 1 이라는 값을 넣는다고 가정해봅시다. 그러면, 코드를 이렇게 입력하면 됩니다. let value = 1; 그러면, 앞으로 우리가 value 를 조회하면 value 는 1을 가르키게.. 2020. 8. 17.
01. Hello JavaScript! [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/01-hello-javascript.html 01. Hello JavaScript · GitBook 자바스크립트는 여러분의 브라우저에서 언제든지 사용 할 수 있습니다. 만약 현재 여러분이 크롬브라우저가 아닌 다른 브라우저를 사용중이라면 크롬을 설치하여 실행해보세요. 그리고 개발자 learnjs.vlpt.us 자바스크립트는 여러분의 브라우저에서 언제든지 사용 할 수 있습니다. 만약 현재 여러분이 크롬브라우저가 아닌 다른 브라우저를 사용중이라면 크롬을 설치하여 실행해보세요. 그리고 개발자 도구를 열어보세요. 개발자 도구는 윈도우 Ctrl + Shift + I 또는 macOS Command + Option + .. 2020. 8. 17.
연산자 연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자입니다. 대입 연산자 JavaScript에서 등호 ( =)는 "같음"연산자가 아니라 "대입"연산자입니다. let x = 10; x = x + 5; // x += 5; console.log(x); JavaScript에서는 x + 5의 값을 x에 할당합니다.. (x + 5의 값을 계산하고 결과를 x에 넣습니다. x의 값은 5 씩 증가합니다.) "같음"연산자는 == JavaScript 와 같이 작성 됩니다. 산술 연산사 산술 연산자는 사칙연산과 같은 작업을 하는 연산자를 의미합니다. var x = 5; var y = 2; var z = x + y; // 7 var x = 5; var y = 2; var z = x * y; // 10 연산자 설명 예 실행.. 2020. 4. 1.
변수와 상수 변수와 상수는, 하나의 데이터를 저장하는 그릇이고 특정 이름에 특정 값을 담을 때 사용합니다. let x = 1; console.log(x); // 1 let y = 2; console.log(y); // 2 let z = x + y; console.log(z); //3 x는 값 5를 저장합니다 y는 값 6을 저장합니다 z는 값 11을 저장합니다 변수 변수는 바뀔 수 있는 값을 말하고 한번 값을 선언하고 바꿀 수 있습니다. var 지금까지 많이 사용해온 var 변수 선언 방식은 큰 단점이 있다. var name = 'Html' console.log(name) // Html var name = 'javascript' console.log(name) // javascript 변수를 한 번 더 선언했음에도 불.. 2020. 4. 1.
Hello JavaScript! 크롬브라우저를 열어 개발자모드를 엽니다. 개발자 도구는 윈도우 Ctrl + Shift + I 또는 macOS Command + Option + I 키를 눌러서 열 수 있습니다. 크롬 개발자 도구에서 Console 탭을 열고 입력창에 아래 코드를 입력하세요. console.log 는 콘솔에 특정 내용을 출력하라는 것을 의미합니다. console.log('Hello JavaScript!'); 이번에는 다음 코드를 입력해보세요. console.log(1 + 2 + 3); 우리는 Javascritp를 통해 연산을 할 수도 있습니다. 지금부터는 CodeSandbox 사이트에서 코드를 작성해보겠습니다. https://codesandbox.io/ CodeSandbox: Online IDE for Rapid Web D.. 2020. 3. 14.
JavaScript 입문 JavaScript 는 뭔가요? JavaScript 는 웹 브라우저에서 사용하기 위하여 만들어진 HTML과 웹의 프로그래밍 언어입니다. 왜 JavaScript를 공부해야합니까? JavaScript는 모든 웹 개발자 가 배워야 하는 3 가지 언어 중 하나입니다 . 1. 웹 페이지의 내용을 정의하는 HTML 2. 웹 페이지의 레이아웃을 지정하는 CSS 3. 웹 페이지의 동작을 프로그래밍하는 JavaScript JavaScript가 사용되는 곳은 웹 페이지뿐이 아닙니다. 많은 데스크탑 및 서버 프로그램이 JavaScript를 사용합니다. Node.js가 가장 잘 알려져 있습니다. MongoDB 및 CouchDB와 같은 일부 데이터베이스도 프로그래밍 언어로 JavaScript를 사용합니다. 이 언어는 90년대부.. 2020. 3. 14.