JavaScript / Object / Array.splice() / 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣는 속성
.splice()
.splice()는 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣습니다.
문법
array.splice( start, count )
예를 들어 jbAry.splice( 1, 2 )는 jbAry 배열의 두번째 값부터 2개를 추출합니다.
array.splice( start, count, value1, value2, ... )
예를 들어 jbAry.splice( 1, 2, 'abc', 'def' )는 jbAry 배열의 두번째 값부터 2개를 추출하고, 그 자리에 abc, def 두 값을 넣습니다.
추출한 값들은 새로운 배열로 반환합니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
body {
font-family: Consolas, monospace;
}
</style>
</head>
<body>
<p>jbAry : One,Two,Three,Four,Five,Six</p>
<hr>
<p><strong>var jbSplice = jbAry.splice( 2, 3 );</strong></p>
<p>
<script>
var jbAry = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six' ];
var jbSplice = jbAry.splice( 2, 3 );
document.write( '<p>jbAry : ' + jbAry + '</p>' );
document.write( '<p>jbSplice : ' + jbSplice + '</p>' );
</script>
</p>
<p><strong>var jbSplice = jbAry.splice( 1, 2, 'Seven', 'Eight' );</strong></p>
<p>
<script>
var jbAry = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six' ];
var jbSplice = jbAry.splice( 1, 2, 'Seven', 'Eight' );
document.write( '<p>jbAry : ' + jbAry + '</p>' );
document.write( '<p>jbSplice : ' + jbSplice + '</p>' );
</script>
</p>
</body>
</html>
JavaScript / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리
Lazy Loading 웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading입니다. 웹브라우저에 보이는 영역 안에 있는 이미지는 로드하고, 보이지 않는 부분은 로드하지 않습니다. 밑으로 스크롤하여 이미지가 있는 영역에 도달하면 그 때 이미지를 로드합니다. 이렇게 하면 불필요한 이미지 로딩으로 인한 속도 저하를 방지할 수 있습니다. Lozad.js Lozad.js는 Lazy ...
JavaScript / Object / Element.childElementCount / 자식 요소의 개수를 반환하는 속성
.childElementCount .childElementCount는 자식 요소의 개수를 반환하는 속성입니다. 바로 아래 단계에 있는 자식 요소의 개수만 세고, 자식 요소의 자식 요소의 수는 세지 않습니다. IE는 버전 9 이상에서 사용할 수 있습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <ul> <li>Lorem</li> <li>Ipsum <span>Dolor</span></li> </ul> <script> var jb = document.getElementsByTagName( ...
가장 기본적인 조건문은 if입니다. 하지만 조건식에서 비교할 값이 많다면 코드가 길어지고 가독성이 떨어진다는 단점이 있습니다. 이럴 땐 switch를 사용하는 것이 좋습니다. 문법 switch ( condition ) { case value1: statement1; break; case value2: statement2; break; ... ...
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 / 구문(Statement) 넣는 방법
자바스크립트는 줄바꿈을 하면 구문(Statement)이 종료된 것으로 봅니다. var jb1 = 'Lorem' var jb2 = 'Ipsum' 하지만, 구문이 완성되지 않았다면 다음 줄까지 해석합니다. 즉 var jb1 = 'Lorem' 과 var jb1 = 'Lorem' 은 같습니다. 구문이 종료되었음을 명확히 표시할 때는 세미콜론(;)을 사용합니다. var jb1 = 'Lorem'; var jb2 = 'Ipsum'; 세미콜론 사용은 선택사항이지만, 한 줄에 여러 구문을 쓸 때는 구문과 구문 사이에 꼭 ...
배열 선언하는 방법 방법 1 jbAry라는 배열을 만듭니다. var jbAry = new Array(); 값을 배정합니다. jbAry = 'Lorem'; jbAry = 'Ipsum'; jbAry = 'Dolor'; 방법 2 var jbAry = ; 방법 3 var jbAry = new Array( 'Lorem', 'Ipsum', 'Dolor' ); 예제 배열에 값을 배정한 후 차례대로 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
JavaScript / Object / Screen / 화면 정보 가져오는 객체
Screen Screen은 화면 정보를 가져오는 객체입니다. 속성은 다음과 같습니다. screen.width 화면의 가로 크기를 가져옵니다. screen.height 화면의 세로 크기를 가져옵니다. screen.availWidth 작업 표시줄이 차지하는 부분을 제외한 가로 크기를 가져옵니다. screen.availHeight 작업 표시줄이 차지하는 부분을 제외한 세로 크기를 가져옵니다. screen.colorDepth screen.pixelDepth IE는 버전 10 이상에서 사용할 수 있습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...
변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교 연산자(Cpmparison Operator)입니다. 비교 연산자는 8가지가 있는데, 각 연산자의 의미를 알아보겠습니다. == ==는 '같다'입니다. 변수 타입과 상관없이 값이 같으면 참입니다. 즉 5 == 5 도 참이고 '5' == 5 도 참입니다. != !=는 '같지 않다'입니다. === ===는 '엄격하게 같다'입니다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐 아니라 ...
JavaScript / 함수 / String() / 숫자를 문자열로 변환하는 함수
String() String()은 숫자를 문자열로 변환하는 함수입니다. 문법 String( object ) object : 숫자 또는 숫자를 값으로 하는 변수 등을 입력합니다. 예제 변수 c의 값은 숫자 1과 숫자 2를 더한 3입니다. 변수 d의 값은 문자 1과 문자 2를 더한 12입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...
JavaScript / Object / Array.slice() / 배열의 일부분을 선택하여 새로운 배열을 만드는 속성
.slice() .slice()는 배열의 일부분을 선택하여 새로운 배열을 만듭니다. 문법 array.slice( start, end ) start와 end에는 숫자가 들어갑니다. 배열의 start에 해당하는 요소부터 end 바로 전의 요소까지를 선택하여 새로운 배열을 만듭니다. 예를 들어 jbAry.slice( 2, 5 ); 는 jbAry 배열의 3번째 요소부터 5번째 요소까지 선택합니다. end에 값이 없으면 해당 배열의 마지막 요소까지 선택합니다. 값이 음수면 마지막 요소를 기준으로 선택합니다. 예제 <!doctype html> <html ...