JavaScript / Object / Math.max(), Math.min()
Math.max(), Math.min()
Math.max()는 주어진 값 중에서 최댓값을, Math.min()은 최솟값을 반환합니다.
문법
Math.max( number1, number2, number3, ... ) Math.min( number1, number2, number3, ... )
예제 1
10, 20, 30 중에서 최댓값과 최솟값을 구합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
body {
font-family: Consolas, monospace;
}
</style>
</head>
<body>
<script>
document.write( '<p>Math.max( 10, 20, 30 ) : ' + Math.max( 10, 20, 30 ) + '</p>' );
document.write( '<p>Math.min( 10, 20, 30 ) : ' + Math.min( 10, 20, 30 ) + '</p>' );
</script>
</body>
</html>
예제 2
배열의 값 중에서 최댓값과 최솟값을 구하고 싶다면 apply 속성을 이용합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
body {
font-family: Consolas, monospace;
}
</style>
</head>
<body>
<script>
var jbNumber = [ 10, 20, 30 ]
document.write( '<p>Math.max.apply( null, jbNumber ) : ' + Math.max.apply( null, jbNumber ) + '</p>' );
document.write( '<p>Math.min.apply( null, jbNumber ) : ' + Math.min.apply( null, jbNumber ) + '</p>' );
</script>
</body>
</html>
현재 날짜와 시간 가져오기 Date()로 현재 날짜와 시간을 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; font-size: ...
변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교 연산자(Cpmparison Operator)입니다. 비교 연산자는 8가지가 있는데, 각 연산자의 의미를 알아보겠습니다. == ==는 '같다'입니다. 변수 타입과 상관없이 값이 같으면 참입니다. 즉 5 == 5 도 참이고 '5' == 5 도 참입니다. != !=는 '같지 않다'입니다. === ===는 '엄격하게 같다'입니다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐 아니라 ...
JavaScript / Object / Math.floor(), Math.ceil(), Math.round()
Math.floor() Math.floor()는 어떤 수보다 크지 않은 최대의 정수를 반환합니다. 문법 Math.floor( Number ) Number에는 숫자가 들어갑니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...
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의 유니코드 ...
JavaScript / 함수 / isNaN() / 매개변수가 숫자인지 검사하는 함수
isNaN() isNaN() - 매개변수가 숫자인지 검사하는 함수입니다.(NaN은 Not a Number입니다.) 문법 isNaN( value ) value : 검사할 값을 입력합니다. 매개변수가 숫자가 아니면 true, 숫자이면 false를 반환합니다. 예제 123.123은 숫자이므로 false를 반환합니다. '123.123'은 따옴표로 감쌌지만, 숫자로 취급하여 false를 반환합니다. 'Not a Number'는 숫자가 아니므로 true를 반환합니다. 123*123은 숫자이므로 false를 반환합니다. '123*123'은 따옴표 안에 문자가 있으므로 숫자가 아닌 것으로 취급하여 true를 반환합니다. <!doctype html> <html ...
JavaScript / Object / String.substring() / 문자열 추출하는 메서드
.substring() .substring()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substring( start, end ) start와 end로 문자열에서 골라낼 부분의 처음과 끝을 지정합니다. 예를 들어 var str = '123456789'; document.write( str.substring( 1, 4 ) ); 는 234를 출력합니다. start 값은 필수이며, end 값이 지정되지 않으면 문자열의 끝까지를 의미합니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
JavaScript / Object / Math.random() / 난수(랜덤 숫자) 만드는 속성
Math.random() Math.random()는 난수(랜덤 숫자)를 만듭니다. 문법 Math.random() 0.673172894273546와 같은 0 이상 1 미만의 난수를 만듭니다. 예제 1 - 난수 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...
JavaScript / Object / String.length / 문자열의 길이 반환하는 속성
.length .length는 문자열의 길이를 반환하는 속성입니다. 문법 string.length 예를 들어 'abcd'.length 는 4입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( '<p>"1234".length : ' + '1234'.length + '</p>' ); document.write( '<p>"".length : ' + ''.length + '</p>' ); document.write( '<p>"한글".length : ' + '한글'.length + '</p>' ...
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 / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리
Lazy Loading 웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading입니다. 웹브라우저에 보이는 영역 안에 있는 이미지는 로드하고, 보이지 않는 부분은 로드하지 않습니다. 밑으로 스크롤하여 이미지가 있는 영역에 도달하면 그 때 이미지를 로드합니다. 이렇게 하면 불필요한 이미지 로딩으로 인한 속도 저하를 방지할 수 있습니다. Lozad.js Lozad.js는 Lazy ...