Front-end 143

[자바스크립트] js 콜백함수

콜백함수란 함수를 매개변수로 받는 방식이다. 더하기 함수를 만들어봤다. 일반 함수라면 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(..

[자바스크립트] jQuery기초, js & jQuery 태그 선택자, 태그색 입히기

위와 같은 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로 입..

[자바스크립트] jQuery 사용하기

jQuery는 보편적으로 사용되는 라이브러리다. 두 가지 사용법이 있다. 우선 아래 링크로 들어간다. Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download jquery.com 다운로드 방식 링크로 들어가면 제일 위에 이런 링크가 있다. 위에 것이 압축, 아래가 비..

[자바스크립트] 반복문의 break, continue문

반복문으로 숫자 출력 반복문으로 1부터 10까지 순회하도록 한다. 그리고 순회한 i 값을 모두 출력하도록 한다. 1부터 10까지가 출력된다. Continue i가 3의 배수일때는 continue문이 실행되도록 했다. 3의 배수가 빠져서 출력된다. continue를 만나면 반복문은 아래의 코드를 모두 건너뛰고 다음 순회를 실행한다. Break i가 3의 배수이면서 9라면 break문이 실행되도록 했다. 하지만 3의 배수일때 continue문을 먼저 만나므로 아래의 코드는 모두 실행되지 못할 것이다. 10이 출력되는 거로 보아 continue문의 아래 break문은 영원히 실행될 가망성이 없어보인다. 따라서 continue문을 아래로 옮겨준다면 건너뛰는것을 확인하기 전에 break문을 먼저 확인하므로 실행이..

[자바스크립트] for문, 배열크기, 배열, 구구단 출력

배열생성 기본적인 배열 생성, 대괄호 안에 내용들을 입력하여 생성한다. 콤마로 구분되는 인자를 배열의 각 인자로 인식한다. 배열이름[인자]는 해당 배열의 '인자+1'번째 값을 가져온다. 배열은 0부터 시작이기 때문에 city[2]는 city배열의 3번째 인자를 가져온다. 배열크기 배열이름.length는 배열의 크기를 나타낸다. for문 js의 for문 문법은 c나 java의 문법과 비슷하다. for(시작점;조건식;실행식) {반복문 내용} i변수가 0부터 시작해서 매회 ++증가하고 배열의 길이인 city.length를 넘어서게 된다면 반복문은 종료가 된다. 반복문이 반복될때마다 city[i]값을 출력하여 증가되는 i값이 배열의 각 인자를 반복하여 출력하게 된다. 중첩반복문으로 구구단 출력 첫 번째 반복문으..

[자바스크립트] switch문

본인의 직급을 숫자로 입력받게끔 한다. switch문에 rank변수를 받고 1번 케이스일 경우 case '1' : 이라고 작성하고 실행될 코드를 작성해준뒤 break문을 통해 switch문을 종료해준다. 다른 케이스도 모두 작성해주고, 모든 케이스에 속하지 않은 rank변수값이 들어올 경우 알림창을 통해 예외처리해준다. 차장일 경우 2를 입력한다면 해당하는 case의 코드가 실행되고 switch문이 종료된다.

[자바스크립트] if, else if, else, 조건문

js의 if문 문법은 C나 자바등의 언어와 같다. value변수에 숫자를 입력받는다. prompt는 string으로 입력받으므로 parseInt를 사용해 int형으로 형변환해준다. if if문은 괄호안의 조건이 참일때 { }안의 내용을 실행한다. value변수를 2로 %나눴을때 ==0으로 딱 떨어진다면, 안의 내용인 알림창으로 짝수라는 문자를 띄워준다. else else문은 위의 if문이 거짓으로 실행되지 않는다면 그 이외의 모든 케이스에 모두 실행된다. 짝수가 아닌 25가 입력된다면 else문의 내용인 홀수가 출력되지만, 문자가 입력이 되더라도 홀수라고 출력이 된다. else if 홀수의 조건문 또한 else에서 if로 바꿔줬다. 두 if문이 둘다 실행이 되지 않았다. 이번엔 홀수를 입력하자 제대로 나..