Code Playground

< h1 > Code Playground </ h1 >

위와 같은 리스트를 html, css로 표현할 때,실제 태그에 숫자를 적지 않고 가상클래스에 counter()를 사용하여 표현할 수 있다. 1. counter-reset : 카운터이름 시작숫자 /* Set "my-counter" to 0 */ counter-reset: my-counter; /* Set "my-counter" to -1 */ counter-reset: my-counter -1; /* Set "counter1" to 1, and "counter2" to 4 */ counter-reset: counter1 1 counter2 4; /* Cancel any reset that could have been set in less specific rules */ counter-reset: none;..

선택하세요. 과일 옵션 추가 복숭아 선택 과일 옵션 삭제 마지막 과일 옵션 삭제 위와 같이 셀렉트박스와 버튼들을 만든 후,제이쿼리를 사용하지 않고 순수 자바스크립트로셀렉트 태그를 동적으로 제어하는 것을 연습해보려고 한다. var fruitList = [ { oKey: 'banana', oVal: '바나나' }, { oKey: 'apple', oVal: '사과' }, { oKey: 'peach', oVal: '복숭아' }, { oKey: 'orange', oVal: '오렌지' } ] 먼저 위와 같은 객체 데이터가 있다. '과일 옵션 추가' 버튼을 클릭하면 위 json데이터의 값들이 셀렉트 태그의 옵션으로 추가되어야 한다.'복숭아 선택' 버튼을 클릭하면 복숭아가 선택되어야한다.'과일 옵션 삭제' 버튼을 클릭..

No. Contents Delete 1 내용1 Delete 2 내용1 Delete 3 내용1 Delete 4 내용1 Delete 5 내용1 Delete 위와 같은 테이블을 만든 후 Delete버튼 클릭했을 때 해당 행만 삭제하는 간단한 기능을 제이쿼리를 사용하지 않고 순수 자바스크립트로 구현해보려고 한다. 1. 먼저 html과 css 코드는 다음과 같다. No. Contents Delete 1 내용1 Delete 2 내용1 Delete 3 내용1 Delete 4 내용1 Delete 5 내용1 Delete 2. 이벤트를 걸 대상인 버튼의 dom을 선택한다. var eventTarget = document.getElementsByClassName('btn_delete')문제는 btn_delete라는 클래스를..

자바스크립트 프로그래밍을 할 때 =과 ==, ===을 많이 쓰게 되는데 과연 이 셋의 차이는 뭘까? 1. = =는 값을 대입할 때 사용한다. var x = 1 var y = 2 var z = x+y x라는 변수에 1이라는 숫자를 할당할 때,z라는 변수에 x+y를 할당할 때이런 경우에는 = 을 사용한다. 즉, 오른쪽에 쓴 값을 왼쪽에 할당할 때 쓴다. 2. ==, === ==과 ===은 조건식에서 사용한다.어떤 것이 같은지 판별할 때 사용하는 것이다. if (x == 1) { return true } 만약 x가 1이라면 true를 리턴해라. 여기서 "x가 1이라면"이라는 조건을 걸 때 == 이나 ===을 사용할 수 있다. 3. ==과 ===의 차이는? ==은 값만 비교하지만 ===은 값과 타입을 같이 비교..

-입력 요소 제어- [1] 값 설정하기 $("셀렉터").val('내용'); [2] 값 읽어오기 # text, select(드롭다운)var input = $("셀렉터").val(); 드롭다운 요소의 경우 사용하지 않는 태그라 하더라도 value 속성값을 부여해야 한다. ---선택하세요--- item1 # 라디오 버튼의 경우셀렉터가 여러 개를 의미하는 경우이므로 그 중에서 선택된 항목만 지정하는 셀렉터를 사용해야 한다.라디오는 하나만 선택 가능하므로 가져온 결과 자체는 단일 값이다. var input = $("셀렉터: checked").val(); # 체크 박스의 경우checked 가상 클래스를 통해 가져온 대상이 배열 상태가 되므로 이를 반복문으로 처리해야 한다.배열의 요소는 선택된 체크박스들에 대한 HT..

-요소의 탐색- [1] 메서드 체인하나의 jQuery요소에 대하여 메서드를 연속적으로 호출하는 기법.특별한 경우가 아닌 이상 jQuery()의 함수들은 객체 자신을 리턴한다. $("#foo").attr(key, value) .css(key, value) .addClass(cls) .click(function() {}); [2] 주변 요소 탐색하기 함수설명prev()이전 요소를 리턴한다.next()다음 요소를 리턴한다.parent()상위 요소를 리턴한다.children()하위 요소(들)을 리턴한다.eq(n)n번째 요소를 리턴한다. [3] 부모 요소 얻기: 주어진 셀렉터를 갖는 가장 인접한 부모 요소를 리턴한다.$("#foo").parents("셀렉터"); [4] 자식 요소 얻기: 주어진 셀렉터를 갖는 가장..

- 요소의 판별 - [1] index() 함수 : 특정 요소가 부모 태그 안에서 갖는 인덱스 번호를 리턴하는 함수 (0부터 시작함) ... --->0 --->1 --->2 [2] $(this) : 복수 요소에 대한 이벤트에 전달된 콜백함수 안에서 이벤트가 발생한 주체를 의미하는 객체 button1 button2 button3 [3] HTML 요소의 속성 제어 특정 요소에 적용되어 있는 속성값 조회하기var foo - $("#bar").attr("속성이름"); 특정 요소에 적용하기개별 적용$("#bar").attr('속성이름', '값); 일괄 적용 (JSON 형태 사용)$("#bar").attr({ 속성이름: '값', 속성이름: '값', 속성이름: '값' ... }); 속성 이름에 공백이나 - 기호가 포함..

[1] jQuery 이벤트 처리 웹 브라우저가 HTML요소를 인식한 후에 처리되어야 하므로 jQuery의 load 처리 안에서 정의한다.이벤트는 함수 형태로 정의되어 있고, 해당 이벤트가 발생한 경우 호출될 함수를 콜백 파라미터로 전달한다.콜백함수에는 이벤트의 정보를 갖는 e 객체가 전달된다.필요한 경우 이 객체를 선언하고 활용할 수 있다.e.preventDefault()는 링크의 href 속성이나 폼의 submit 등에 대해서 HTML 요소가 수행해야 하는 기본 동작을 차단하는 역할을 한다. //jQuery의 load 처리 안에서 정의 $(function() { $("#foo").이벤트이름(function([e]) { [e.preventDefault();] });}); [2] 마우스 관련 (클릭 이벤트..

[1] jQuery 초기화 ...html 태그...

-HTML 제어(2)- #요소 제어 ...javascriptvar myimg = document.getElementById("img요소의 id"); my img.src = "이미지 파일 경로";myimg.width = "200px";myimg.height = "100px";... #요소 제어 요소의 객체 획득하기 id 속성값으로 접근하는 경우var myform = document.getElementById("form_id"); name 속성값으로 접근하는 경우var myform = document.form_name; 획득한 안의 요소 접근 id 속성값으로 접근하는 경우var hello = document.getElementById("input_id"); name 속성값으로 접근하는 경우var myform..