개발감성

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변수는 초기화되지 않는데 이걸 클로져 현상이라 한다. 함수의 지역변수를 계속해서 사용하기 위해서 클로져 현상을 이용했다. 함수를 외..

콜백함수란 함수를 매개변수로 받는 방식이다. 더하기 함수를 만들어봤다. 일반 함수라면 num1,2두 변수만 필요하겠지만 여기선 callback이란 매개변수를 하나 더 지정해줬다. 그리고 callback에 호출될 함수에 연산의 결과를 매개변수로 전달한다. 여기 세개의 다른 문장을 출력하는 출력함수들을 만들었다. 그리고 처음 생성했던 더하기 함수에 세번째 인자값으로 세개의 출력함수를 각각 넣었다. 더하기 앞의 문장이 각가 다른것을 확인할 수 있다. 콜백을 통해 연산함수 add_calc하나만 만들어 두고 출력함수들만 생성해준다면 여러 표현방식을 생성할 수 있기에 콜백함수는 코드의 수정과 유지보수등에 유리한 방식이다.

익명함수 - function() 출력버튼을 누르면 문자열이 쌓이는 함수를 정의한다. html문서가 열리면 함수가 실행되도록 했다. $container변수에는 container아이디를 가진 div태그를 지정한다. 그리고 btnPrint아이디를 가진 버튼태그를 클릭할 시 함수가 실행되도록 했다. 버튼 클릭 시마다 container태그가 저장된 변수에 문자열을 append로 추가해준다. #btnPrint태그가 저장된 버튼을 click할 때마다 append가 실행되도록 하는 변수다. 이렇게 함수 이름이 없이 function으로만 정의되는 함수를 익명함수라 한다. 일반함수 - 함수이름() 일반함수는 익명함수와 다르게 함수 이름을 지정해준다. 위의 익명함수와 비슷하게 내용을 정의해준다. 정의된 hi일반함수를 버튼클..

전역변수 선언 전역변수는 전체에서 쓰이는 변수, 지역변수는 일정 지역에서만 쓰이는 변수 먼저 변수선언을 해준다. 출력을 한다면 name변수는 global이라고 출력된다. 지역변수 선언 이번엔 변수선언 아래에 함수를 하나 만들어주고 함수 안에 var name으로 변수를 또 선언해준 뒤 변수 내에서 출력을 해본다. 같은 name변수지만 일반 출력문과 함수호출로 인한 출력문의 결과가 다르다. 함수 내에서 선언된 변수를 지역변수라 하고 함수 내에서 변수를 호출한다면 전역변수가 아닌 지역변수가 사용된다. 전역변수와 지역변수 document.write(name) >> 전역변수, global func1( ) >> func1의 지역변수, local1 func2( ) >> func2의 지역변수, local2 func3(..

위와 같은 html태그가 있을 때, jQuery와 js를 사용하여 menu2아이디를 가진 ul태그안의 li태그에 색을 입히고 비교해본다. JS 스크립트 태그안에 화면이 로드되었을때 함수가 호출되도록 해준다. menu2변수에 (document,문서)에서 (getElementById,아이디로 엘리먼트를 가져오는 방식)으로 (menu2,menu2라는 아이디를 가진 엘리먼트)를 저장한다. menu2태그에서 TagName을 이용해 li태그를 가져와서 liArrays변수에 저장한다. liArrays변수안에는 menu2아이디를 가지는 ul태그안에 하위 li태그들이 저장된다. for문을 사용하여 liArrays변수를 순회하며 배열로 저장된 각 li태그에 변수[i번째].style.color를 이용해 색상을 blue로 입..