개발감성

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초마다 갱신하도록 한다. 전자시계처럼 시간을 표시해주는 웹페이지가 만들어 졌다.

replace replace함수는 인자를 두개 받는데, (바꿀 문자, 대체할 문자)이다. 위 넷째줄 코드는 str변수에 저장된 문자열의 x문자를 replaceStr변수에 저장된 문자로 교체하여 resultStr에 저장한다. x문자가 입력된 문자로 대체되어 출력된다. trim trim은 입력받은 문자열 앞뒤에 위치한 공백을 제거해준다. 원래 문자열과 결과를 콘솔창에 띄워본다. 앞 뒤의 공백이 제거된 것을 확인할 수 있다.

length - 문자열의 길이 문자열을 입력받고 해당 변수에 .length를 붙이면 문자열의 길이가 리턴된다. tok이란 문자열을 입력하니 길이값으로는 3이 리턴됬다. charAt - 문자열 중 해당하는 인덱스의 문자 출력 인터벌 함수를 통해 인덱스를 계속 증가시켜가면서 문자를 하나씩 출력하는 함수이다. 각 문자는 ch변수에 저장되고 매 호출시마다 index값을 증가시켜주며 문자열의 길이를 넘어설 경우, 즉 모든 문자를 출력시 인터벌함수를 종료시켜준다. 각 인덱스 값에 해당하는 문자가 하나씩 출력된다. indexOf - 해당하는 문자의 위치 출력 str문자열 변수에 indexOf와 매개변수로 찾고싶은 문자를 넣으면 loc변수에 인덱스값, 즉 위치값이 저장된다. tst문자는 해당 문자열의 인덱스 4부터 존..

min, max, ceil, floor는 코어 라이브러리 Math의 하위함수이므로 사용시 Math.을 붙여준다. Min & Max 두 수를 입력하고 그 중 작은 수와 큰 수를 알림창에 나타낸다. min( )는 입력받은 숫자나 배열 중 가장 작은 값을 리턴하고, max( )는 입력받은 숫자나 배열 중 가장 큰 값을 리턴한다. Ceil & Floor 112 / 10은 11.2이다. 소수점아래를 올리거나 버려본다. ceil은 소수점 아래를 올리고, floor는 소수점 아래를 버린다.

setInterval contents div태그를 가져오고 카운트변수를 생성해줬다. setInterval함수에 익명함수로 카운트를 증가시켜주며 div태그안에 증가된 값을 표시해준다. 뒤의 ,1000은 함수호출의 간격이다. 1000이 1초 100이 0.1초다. 일반함수로는 이렇게 생성이 가능하다. 매 초마다 박스안의 숫자가 증가한다. setInterval함수는 함수를 지정된 간격으로 계속해서 호출한다. clearInterval 위의 함수에서 timerID변수를 생성하고 setInterval을 지정해준다. stop버튼을 생성하고 버튼 클릭시 알림창과 clearInterval 이벤트를 넣어준다. 아까와 같이 숫자가 증가하다 버튼을 누르면 알림창과 함께 숫자가 멈추게 된다. clearInterval은 setIn..

클로저함수는 함수가 끝나도 지역변수가 사라지지않고 계속 존재하는 것을 말한다. add함수의 cnt변수는 증가연산이 있지만 매번 호출때마다 0으로 초기화되기 때문에 계속해서 1값이 출력된다. cnt변수 값의 증가를 저장해서 사용하기 위해서 클로저함수를 사용한다. add함수를 createCounter함수로 감싸준다. 그리고 createCounter함수를 counter변수에 저장한다면 return값은 add()내부함수이기 때문에 counter변수에는 add함수의 리턴값인 cnt가 리턴되게 된다. 여기서 cnt변수는 외부함수인 createCounter함수의 지역변수이기 때문에 cnt변수는 초기화되지 않는데 이걸 클로져 현상이라 한다. 함수의 지역변수를 계속해서 사용하기 위해서 클로져 현상을 이용했다. 함수를 외..