UI개발 썸네일형 리스트형 자바스크립트 함수지향 - 함수의 호출 함수의 호출 함수 호출은 자바스크립트의 유연함을 잘보여주는 사례 기본적인 방법 function func(){ } func(); 함수 = 일종의 객체 객체는 속성을 가지고 있다. 속성이 값이면 프로퍼티, 함수면 메소드라고 한다. 함수(객체)는 apply와 call 메소드(속성)의 접근할 수 있다. apply와 call은 같은 취지이지만 사용방법이 다르다. apply 사용 function sum(arg1, arg2){ return arg1+arg2; } sum(1,2); // 3 // sum.apply = apply는 sum이라고 하는 함수 객체에 담긴 메소드. native code(내장객체) sum.apply(null,[1,2]); sum.apply(null,[4,2]); 결과 : 3, 6 apply를 왜.. 더보기 자바스크립트 함수지향 - argument arguments 객체 함수안에서 함수의 인자 정보를 담고 있는 객체. 유사 배열. (배열은 아님) 매개변수와 인자의 차이 function a(매개변수parameter){} a(인자arguments); function sum(){ // 매개변수가 없음. var i, _sum = 0; for(i = 0; i < arguments.length; i++){ // arguments에는 사용자가 전달한 인자가 들어간다. // 즉, 인자의 갯수만큼 for문이 돈다. document.write(i + " : " + arguments[i] + " "); _sum += arguments[i]; // _sum = _sum + arguments[i] } return _sum; } document.write("result :.. 더보기 자바스크립트 함수지향 - 유효범위 (Scope) 자바스크립트 함수지향 유효범위 유효범위(Scope)는 변수의 수명을 의미한다. 전역변수 var vscope = "global"; function fscope(){ alert(vscope); } fscope();// global 지역변수 var vscope = "global"; function fscope(){ var vscope = "local"; var lv = "local variables"; alert(vscope); } fscope(); // local alert(lv); // undefined 자기 자신에게 가까운 (함수 안에 있는) 변수를 가리킨다. var vscope = "global"; function fscope(){ var vscope = "local" } fscope(); alert(.. 더보기 alt와 title alt alternative의 줄임말로 이미지의 대체 텍스트를 제공한다. 이미지가 보이지 않는 상황이거나, 스크린 리더기에서 이미지를 대신할 수 있는 내용을 제공한다. 이미지 태그나 이미지맵 등에 주로 사용하고 유효성을 통과하려면 반드시 필요한 필수 속성이다. title title은 거의 모든 태그에 쓰이고, 이미지 태그에서는 이미지에 대한 툴팁 설명을 제공한다. 대체 텍스트의 설명이 길어지는 경우 사용하는 속성으로 longdesc가 있다. (자세한 설명을 담은 문서의 url을 지정) alt 속성없이 longdesc 속성만 이용하는 경우 접근성 위배 alt를 제공하더라도 이미지 내용과 다르면 위배 브라우저마다 alt나 title을 보여주는 속성이 다른데 ie에서는 alt와 title 둘다 내용이 있을 경.. 더보기 미디어쿼리 미디어 쿼리 미디어 타입(Media type)은 단말기의 종류에 따라 각각 다른 스타일시트를 적용하게 하는 기능으로 CSS 2.1부터 추가되었다. 미디어 타입만으로는 해당 기기의 특성을 정확히 파악하여 알맞은 스타일을 적용시키기 어려웠던 문제점 때문에 실제로 많이 사용되지 않았다. CSS3에서는 미디어 타입을 개선하여 더 구체적인 조건에서 필요한 스타일을 정확하게 적용할 수 있도록 확장하였는데 이를 미디어 쿼리 (Media query)라고 한다. 적용 방법 1. 마크업에서 CSS파일 분기하기 스타일시트 파일을 분리하여 특정 조건에 부합할 경우 CSS파일을 로딩할 수 있다. 로딩 방법 (1) 태그 (2) xml 방식 (3) @import속성 별도 분기 파일을 사용하는 방법은 http request를 발생시.. 더보기 자바스크립트 함수 자바스크립트 함수 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. function 함수명([인자...[,인자]]){ 코드 내용 return 반환값 } 함수의 효용 재사용성, 유지보수 용이, 가독성 function numbering(){ document.write(1); } numbering(); numbering(); numbering(); numbering(); // 1이 4번 출력됨. function numbering(){ i = 0; while(i < 10){ document.write(i); i += 1; } } numbering(); numbering(); numbering(); // 0부터 9까지 3번 출력됨. 함수의 출력 function get_member1(){.. 더보기 자바스크립트 내장함수 자바스크립트 내장함수 언어 자체에서 지원하는 함수로 자주 사용할 것으로 예상되는 것들을 미리 만들어 놓은 것. Eval() 문자열을 수치화 시켜주거나 해당 스크립트를 실행시켜 주는 기능. Eval("50") - 20 // 또는 var value = "50" Eval(value) - 20 문자열이나 표현식을 숫자로 바꾸어줌 (숫자 형식이어야 함) 문자 형태의 값을 연산하기 위해서 반드시 사용 Eval() 함수를 활용해서 해당 연산자와 두 개의 값을 조합한 문자열을 수치화하여 연산을 수행하는 예제 function evalSample () { var first, second, third, total; first = prompt ("첫번째 숫자 입력", "20"); second = prompt ("연산자 입력".. 더보기 자바스크립트 반복문 자바스크립트 반복문 while문 while(조건){ 반복해서 실행할 코드 } var i = 0; // 초기화 while(i < 10){ // 반복 조건 console.log('안녕하세요'); i = i + 1; // 반복 실행 } for문 for(초기화; 반복 조건; 반복 실행){ // 초기화, 반복 조건, 반복 실행 부분이 한 줄에 표현됨 반복해서 실행할 코드 } 반복문 제어 for(var i = 0; i < 10; i++){ if(i === 5){ break; } console.log('안녕하세요'); // 0부터 4까지 출력 } 중첩 사용 for(var i = 0; i < 10; i++){ for(var j = 0; j < 10; j++){ console.log('안녕하세요'); } } 더보기 lang 속성 lang 속성 (언어 선언) 기본 언어를 명시하여 화면 낭독 프로그램이 언어를 인식해 자동으로 음성을 변환하거나, 해당 언어에 적합한 발음을 제공할 수 있도록 해주는 것. 주 언어 명시는 콘텐츠가 있을 때 필요한 것이므로, 내용이 없는 빈 프레임의 경우 선언하지 않아도 오류가 아니다. 다국어 문서라면 문서의 각 부분별로 해당 언어를 명시해 주어야 한다. 둘 이상의 언어가 동등하게 쓰여 어느 하나를 주 언어라고 특정할 수 없는 XHTML 문서라면 html에 'xml:lang=""'를 주는 방법도 있다. 다국어가 쓰인 문서라도 주 언어를 특정할 수 있다면 html에는 그 언어를 지정하고, 다른 언어를 쓰는 부분에는 다른 언어를 지정해 주면 된다. 컨텐트상에 영어가 더 많다 해도 한국에서 제작되어 한국어를 기.. 더보기 텍스트 인코딩 텍스트 인코딩 UTF-8 (범용) Universal coded character set + Transformation Format - 8 대표적인 조합형의 유니코드 인코딩 방식. 전 세계 모든 문자를 표현. 한글 한자를 3byte로 처리. 문서가 다소 커질 수 있음. 공백, 영문은 1byte. 웹서버나 데이터베이스와 맞춰야하는데 별다른 인코딩이 필요 없다. EUC-KR (한글) 2350개 한글문자. 한정된 범위 내 문자만 표현. 한자에 2byte. 한글 사이트 작업시 적합. 윈도우 사용자가 많고 윈도우에서 정상적으로 사용하기 위해. 더보기 자바스크립트 조건문 자바스크립트 조건문 if문 분기를 할 때 필요한 기본적인 제어문 조건이 될 수 있는 값은 boolean이다. 조건이 true라면 조건이 담긴 괄호 다음의 중괄호 구문이 실행된다. else if 문이나 else 문은 선택적으로 사용할 수 있다. if (조건) { statement } if (조건) { console.log('여기가 실행 안되면'); } else { console.log('여기가 실행 됩니당'); } if (조건1) { statement1 } else if (조건2) { statement2 } if (조건1) { statement1 } else if (조건2) { statement2 } else { statement3 } var currDate = new Date(); var currTime.. 더보기 자바스크립트 연산자 자바스크립트 연산자 산술 연산자 - 부호 연산 +, -, *, / 사칙 연산 % 정수 나눗셈의 나머지 값 ++, -- 변수에 저장된 값을 각각 1증가, 1감소 관계 연산자 두 값을 비교할 때 사용. > 보다 크다 >= 보다 크거나 같다 >> 시프트 연산자 6순위 > = 더보기 이전 1 2 3 4 5 다음