JavaScript / 배열(Array) / 선언하기
배열 선언하는 방법
방법 1
jbAry라는 배열을 만듭니다.
var jbAry = new Array();
값을 배정합니다.
jbAry[0] = 'Lorem'; jbAry[1] = 'Ipsum'; jbAry[2] = 'Dolor';
방법 2
var jbAry = [ 'Lorem', 'Ipsum', 'Dolor' ];
방법 3
var jbAry = new Array( 'Lorem', 'Ipsum', 'Dolor' );
예제
배열에 값을 배정한 후 차례대로 출력하는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<script>
var jbAry = new Array();
jbAry[0] = 'Lorem';
jbAry[1] = 'Ipsum';
jbAry[2] = 'Dolor';
</script>
</head>
<body>
<script>
for ( var i = 0; i < 3; i++ ) {
document.write( '<p>' + jbAry[i] + '</p>' );
}
</script>
</body>
</html>
JavaScript / 함수 / eval() / 문자열을 코드로 인식하게 하는 함수
eval() eval()은 문자열을 코드로 인식하게 하는 함수입니다. 문법 eval( string ) 예를 들어 eval( '2+2' ) 는 문자열 2+2가 아니라 계산한 결과 4입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> var jb = '2+2'; document.write( '<p>' + jb + '</p>' ); document.write( '<p>' + eval( jb ) + '</p>' ); </script> </body> </html>
JavaScript / Object / document.querySelector() / 특정 CSS 선택자를 가진 첫 번째 요소를 선택하는 메서드
.querySelector() .querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다. 주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것입니다. 문법 document.querySelector( 'selector' ) 예를 들어 document.querySelector( '.xyz' ) 는 클래스 값이 xyz인 첫번째 요소에 접근합니다. 예제 1 클래스 값으로 abc를 갖는 요소 중 첫 번째 요소의 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...
JavaScript / Object / String.indexOf(), String.lastIndexOf() / 특정 문자열이 있는 위치를 반환하는 메서드
.indexOf() .indexOf()는 특정 문자열이 처음으로 나타나는 위치를 반환하는 메서드입니다. 문법 string.indexOf( value, start ) value : 필수 요소입니다. 찾으려는 문자열을 넣습니다. start : 선택 요소입니다. 검색을 시작할 인덱스 값입니다. 입력하지 않으면 처음부터 검색합니다. 대소문자를 구분합니다. 찾는 문자열이 없는 경우 -1을 반환합니다. 예제 'ABCABC'.indexOf( 'A' ) 처음 나오는 A의 인덱스의 값인 0을 반환합니다. 'ABCABC'.indexOf( 'A', 1 ) 인덱스 1 이후에 처음 나오는 A의 ...
JavaScript / Object / String.charAt(), String.charCodeAt()
.charAt(), .charCodeAt() .charAt() : 특정 위치에 있는 문자를 반환합니다. .charCodeAt() : 특정 위치에 있는 문자의 유니코드 값을 반환합니다. 문법 - .charAt() string.charAt( n ) 인덱스의 값이 n인 문자를 반환합니다. 예를 들어 "12345".charAt( 2 ) 는 3입니다. 만약 인덱스 n에 문자가 없으면 빈 문자열을 반환합니다. 문법 - .charCodeAt() string.charCodeAt( n ) 인덱스의 값이 n인 문자의 유니코드 값을 반환합니다. 예를 들어 "12345".charCodeAt( 2 ) 는 3의 유니코드 ...
IE8, IE9에서 placeholder 적용되게 하는 방법
input이나 textarea에 placeholder 속성으로 어떤 내용을 입력할 지 안내할 수 있다. HTML5에 새로 추가된 속성으로 label을 대체할 수 있는 유용한 속성이다. placeholder를 이용한 간단한 예는 다음과 같다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Attribute | placeholder</title> <style> ...
JavaScript / Object / Array.join() / 배열의 원소를 연결하여 하나의 값으로 만들기
.join() .join()은 배열의 원소들을 연결하여 하나의 값으로 만듭니다. 문법 var jbStr1 = jbAry.join(); jbAry 배열에 있는 원소들을 하나의 값으로 만듭니다. 원소들의 구분은 콤마(,)로 합니다. 원소들의 구분을 다른 문자로 하려면 () 안에 원하는 문자를 넣습니다. var jbStr2 = jbAry.join( ' / ' ); 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...
JavaScript / window.open / 새 창 띄우기, 부모 창과 자식 창 사이 값 전달하기
window.open으로 새 창을 띄우고, 부모 창에서 자식 창으로, 자식 창에서 부모 창으로 값을 전달하는 방법을 정리한다. 부모 창이 parent.html, 자식 창이 child.html이다. 새 창 띄우기 문법은 다음과 같다. window.open( url, windowName, windowFeatures ); url : 새 창에 들어갈 문서 주소 windowName : 윈도우 이름 windowFeatures : 새 창의 특성 예를 들어 다음은... window.open( "child.html", "Child", "width=400, height=300, top=50, left=50" ...
JavaScript / 다른 페이지로 리다이렉트(Redirect) 하기
자바스크립트를 이용해서 특정 URL로 접속했을 때 다른 URL로 이동시킬 수 있다. 다른 URL로 이동시키는 것은 window.location.href 를 이용한다. 예를 들어 window.location.href = 'http://www.abc.com/'; 은 웹브라우저로 접속했을 때 http://www.abc.com/으로 이동시킨다. 만약 http://www.abc.com/으로 접속했을 때 http://www.codingfactory.net/로 이동시키고 싶다면 다음과 같이 한다. if ( window.location == 'http://www.abc.com/' ) { window.location.href='http://www.codingfactory.net/'; } PHP / 다른 페이지로 리디렉션(Redirection)하는 방법
JavaScript / 데이터 타입 / 문자열(String)
문자열(String) 문자열을 변수의 값으로 사용하려면 작은 따옴표(') 또는 큰 따옴표(")로 감쌉니다. var jb = 'Lorem ipsum dolor'; var jb = "Lorem ipsum dolor"; 문자열에 작은 따옴표가 있다면 큰 따옴표로, 큰 따옴표가 있다면 작은 따옴표로 감쌉니다. var jb = 'Lorem "ipsum" dolor.'; var jb = "Lorem 'ipsum' dolor."; 만약 작은 따옴표와 큰 따옴표가 같이 있다면 역슬래시를 이용합니다. var jb ...
JavaScript / Plugin / Swiper / 슬라이더 플러그인
Swiper는 널리 사용되는 슬라이더 플러그인 중의 하나입니다. 다양한 옵션을 제공하며, 해상도에 따라 다른 옵션을 줄 수 있어 반응형 사이트에 사용하기 좋습니다. 홈페이지 : https://swiperjs.com/ GitHub : https://github.com/nolimits4web/swiper Swiper는 IE를 지원하지 않습니다. 만약 IE 지원이 중요하다면, IE를 지원하는 Swiper 구 버전을 사용하거나 다른 슬라이더를 사용하세요. 기본 사용법 스크립트 파일과 CSS 파일을 연결합니다. 다음은 CDN을 이용하여 연결하는 코드입니다. <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> <link ...