개발감성

6개의 li태그가 있고 li태그를 클릭했을 때 원하는 위치로 이동하도록 해본다. 그 전에 이동에 사용되는 함수는 노드의 생성에 사용될 수 있다는 걸 알아둔다. [자바스크립트] 노드 생성하기, prepend, append, insertBefore, insertAfter, before, after, prependTo, appendTo 위와 같은 리스트형태에 버튼이나 li태그를 클릭하면 노드를 추가해본다. jQuery없이 JS로 노드 생성 메뉴가 6까지 생성되어 있으니 cnt변수의 초깃값을 6으로 지정하고 버튼이 클릭될 때마다 cnt값 developefeel.tistory.com append( ) - 마지막 위치로 이동 클릭된 li태그(this)를 menu아이디를 가진 태그의 제일 마지막 위치에 추가한다. 메..

위와 같은 리스트형태에 버튼이나 li태그를 클릭하면 노드를 추가해본다. jQuery없이 JS로 노드 생성 메뉴가 6까지 생성되어 있으니 cnt변수의 초깃값을 6으로 지정하고 버튼이 클릭될 때마다 cnt값을 1씩 증가시킨다. createElement를 통해 li태그를 생성해주는 li createTextNode를 통해 li태그안에 텍스트 내용을 생성해주는 liText getElementById를 통해 menu아이디를 가진 ul태그를 지정해 노드를 생성해줄 위치를 지정 만들어진 텍스트 노드를 li태그안에 appendChild를 통해 자식 노드로 붙여준다. li태그를 menu, ul태그에 붙여주면서 노드를 생성한다. 버튼 클릭 시 ul태그안에 li태그가 새로 생성된다. prepend( ) - 제일 앞 위치에 노..

ul태그안에 li태그가 다섯 개 있다. filter( ) - 선택된 태그 중 원하는 걸 필터링 li태그를 지정하고 filter와 find를 적용시켜봤다. filter만 적용되고 find는 적용이 되지 않는다. filter는 선택된 태그 중에서 찾으므로 li태그 중 filter클래스를 가진 세 번째 태그가 선택됬다. li태그의 하위태그에는 find가 없을뿐더러 하위태그자체가 존재하지 않기에 find는 작동하지 않는다. find( ) - 선택된 태그에 속하는 모든 요소에서 찾음 이번엔 li태그가 아닌 ul태그를 지정하여 똑같이 filter와 find를 실행한다. 이번엔 filter가 먹히지 않고 find의 푸른배경 효과만 나타났다. ul태그중에는 filter클래스를 가진 태그가 없기 때문에 filter는 작..

여러 태그가 존재하는 html문서에서 원하는 태그에 접근한다. children( ) - 선택한 태그의 자식 태그 제일 상위의 div태그인 samplePage에 children를 사용해 자식태그에 파란 테두리를 만들어준다. 또한 콘솔창에 자식이 몇인지도 출력해준다. 바로 아래 div태그 세개가 선택이 되고 갯수는 3이 나오는 것을 확인한다. contents( ) - 선택한 태그의 자식 태그 & 텍스트 태그 content는 children과 같이 자식 태그를 지정하며, 텍스트 태그까지 포함해서 찾아준다. 물론 태그속의 내용인 텍스트 노드에는 테두리가 생기지 않지만 콘솔의 내용은 텍스트 태그까지 추가된 7개가 나온다. aqua색의 테두리가 세개의 div영역에 생기고 콘솔엔 7이 찍히는 것을 확인한다. 매개변수..

세 개의 버튼을 누르면 li태그에 각각 접근하는 작업을 해본다. each( )는 지정된 태그를 반복하여 접근하는 함수다. index 값 출력 태그 선택자로 li태그를 선택한 후 each메소드에 index를 받도록 한다. 그리고 index를 출력하도록 해줬다. 첫 번째 버튼을 누르면 each로 접근한 li태그들의 인덱스를 각각 구해준다. index, item값 출력 이번엔 index뿐 아니라 item까지 매개변수로 받아온 뒤 item의 textcontent를 받아 출력한다. 두 번째 버튼을 누르면 인덱스 값에 li태그안의 text값까지 같이 출력한다. css 변경하기 li태그들을 변수에 저장한 뒤 1번과 마찬가지로 index를 매개변수로 주었다. each는 반복문 처럼 태그들에 접근하여 각 index가 커..

5개의 div요소를 각각 접근하는 방법을 알아본다. jQuery를 이용해 변수에 div태그를 배열로 저장한다. eq( ) - jQuery divList에는 div태그들이 배열로 저장되어있고 eq를 사용하면 해당 인덱스의 요소를 호출할 수 있다. 이때 eq는 jQuery객체를 리턴해주므로 jQuery문법을 사용해 다룬다. 인덱스 1의 div의 배경색이 파란색으로 변경됬다. get( ) - js element get메소드는 eq와 다르게 js의 순수 엘리먼트 요소 형식으로 넘어온다. 사용법은 비슷하지만 js의 문법을 통해 다뤄야한다. 인덱스 0의 div의 배경색이 하늘색으로 변경됬다. arr[ ] 메소드 없이 배열 자체로 취급하여 다룰 수 있다. 이때도 js의 element형식으로 넘어온다. 인덱스 4의 d..

실제 노드요소 접근은 jQuery등 다른 Lib을 사용해 접근하는 것이 편하다. 여기선 js기본문법을 통해서만 요소 접근 삭제 생성을 한다. 참가자의 이름을 적고 신청버튼을 누르면 명단에 이름이 작성이 되고, 옆에 x표시를 누르면 이름이 삭제가 되는 페이지를 작성하고자 한다. html코드는 위와 같다. 이름입력을 받는 input태그와 누르면 newRegister함수가 호출되도록 하는 버튼태그를 만들고 nameList라는 이름의 참가자 명단을 출력하는 div태그를 만들었다. 신청버튼 클릭시 이름입력 - createElement, querySelector, createTextNode, appendChild 버튼 클릭시 호출되는 newRegister함수다. newP는 createElement로 p태그를 만들어..

문자형 배열 오름차순 정렬 string형 배열을 생성하고 join을 통해 문자열로 변환하여 출력한다. sort를 사용하여 문자열을 오름차순 정렬을 해주고 출력하여 원문이랑 비교한다. sort의 기본옵션은 오름차순이다. 문자형 배열 내림차순 정렬 sort는 기본으로 오름차순정렬이기 때문에 익명함수를 통해 내림차순으로 정렬하도록 해준다. 내림차순은 큰 것부터 작은 것 순으로 정렬하는 것이므로 배열의 앞 원소(a), 배열의 뒷 원소(b) 가 있을 때 뒷 원소가 작다면 -1,(FALSE)를 리턴하여 그대로 두고 뒷 원소가 크다면 1,(TRUE)를 리턴하여 정렬을 실행해 앞으로 보낸다. 숫자형 배열 오름차순 정렬 sort는 문자열을 위한 함수이므로 숫자형 배열에선 그냥 써선 문제가 생긴다. 숫자를 문자형으로 보기..

push - 배열의 끝에 추가 배열을 생성한 뒤 push를 통해 menu5를 추가했다. 그 후 menu배열을 join을 통해 문자열로 변환해 준 뒤 출력했다. push는 해당 원소를 배열의 맨 뒤에 추가한다. unshift - 배열의 앞에 추가 앞서 생성된 배열에 unshift를 통해 menu0을 추가했다. unshift는 해당 원소를 배열의 맨 앞에 추가한다. splish - 입력된 인덱스에 추가하며 삭제 splice를 통해 인덱스 2번자리에 해당 문자를 추가하며 그 뒤로 0개의 문자를 삭제했다. splice는 (해당 인덱스에서, 입력받은 수만큼의 원소를 삭제하고, 해당 원소를 삽입) 하는 문법을 가진다. 만약 두번째 인자를 3으로 준다면 2의 위치부터 3개의 원소가 삭제되며 해당 문자가 삽입될 것이다..

행렬 원소별 출력 크기가 5인 행렬을 생성했다. 반복문을 통해 인덱스를 배열의 크기만큼 반복증가하며 각 인덱스에 해당하는 배열원소를 출력한다. 인덱스 i가 증가할때마다 그에 해당하는 배열원소가 출력된다. join - 배열을 문자열로 변환 배열.join(구분자)를 지정해 str변수에 저장한 후 출력했다. join은 배열의 원소를 입력받은 구분자로 나누어 문자열로 변환한다. split - 문자열을 배열로 변환 문자열을 배열로 변환해 html문서에 메뉴들을 추가해보도록 한다. 메뉴태그를 지정하고 menuData라는 문자열을 생성해준다. split은 괄호안의 구분자를 기준으로 원소들을 배열에 저장한다. 이후 해당 배열에 li태그를 입혀 menu태그에 추가해줬다.