개발감성

여러 태그가 존재하는 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태그를 만들어..

Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 사이트에서 LTS를 클릭해 다운받아준다. 다운이 끝나면 cmd창에서 버전확인을 해주고 리액트앱을 설치해준다. react-app 설치 설치시 tar버전경고가 떴고 확인해보니 동작하는덴 이상이 없다고 했다. 버전확인을 해 설치가 완료됨을 확인했다. react-app 테스트 테스트 할 경로에 cmd를 실행시켜본다. 해당 경로에 원하는 이름으로 프로젝트를 생성하면 몇분이 지나 프로젝트가 생성된다. 폴더에 프로젝트가 생성된 것을 확인가능하다. 해당 폴더에 들어가서 npm start로 실행시켜본다. 3000번 포트로 정상적으로 실..

DOM (Document Object Model) 말 그대로 문서 객체 모델인 DOM은 문서를 나타내기 위해 객체로 모델링한 것이다. html문서를 작성하다보면 , 등등의 태그를 볼 수 있는데, 이러한 태그들을 노드라 하고 해당 노드들을 트리구조로 조합해서 Document문서를 이루는 방식으로 문서를 나타내는 것이다. 표준화된 틀로 문서를 만들도록 하고 그 내용을 체워나가는 방식으로 이해한다. DOM 트리구조 위와 같이 html문서가 있을 때, 웹페이지에 보여지는 것은 태그의 구조에 의해 조립되어 만들어진 문서다. 만들어진 웹문서는 보이기엔 일반 글이지만 각자 속하는 노드가 있고 트리구조로 이뤄져 있다. DOM 뷰어를 이용해 해당 코드를 넣어본다면 DOM의 트리구조를 확인할 수 있다. 상위엔 HTML태그..

문자형 배열 오름차순 정렬 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태그에 추가해줬다.

date변수에 Date라이브러리를 불러왔다. 연월일, 요일, 시분초를 의미하는 변수를 각각 생성하고 그에 맞는 메소드를 불러온다. month와 day는 숫자값으로 리턴된다. 따라서 요일은 배열을 생성한 뒤 인덱스로 불러오도록 한다. 각 변수를 표시할 양식만 만들어 준 뒤, setInterval을 통해 0.001초마다 갱신하도록 한다. 전자시계처럼 시간을 표시해주는 웹페이지가 만들어 졌다.