JavaScript / 함수 / 함수 선언하고 호출하기
함수 선언하기
방법 1
function functionName( argument1, argument2, ... ) {
// Do Something
}
방법 2
var functionName = function( argument1, argument2, ... ) {
// Do Something
};
함수 호출하기
functionName( value1, value2, ... );
방법 1로 함수를 선언한 경우, 함수 호출은 함수 선언 전 또는 함수 선언 후에 할 수 있습니다.
functionName( value1, value2, ... );
function functionName( argument1, argument2, ... ) {
// Do Something
}
function functionName( argument1, argument2, ... ) {
// Do Something
}
functionName( value1, value2, ... );
방법 2로 함수를 선언한 경우, 함수 호출은 함수 선언 후에 해야 합니다.
var functionName = function( argument1, argument2, ... ) {
// Do Something
};
functionName( value1, value2, ... );
예제 1
Hello World!를 출력하는 예제입니다. 방법 1로 함수를 선언하고 호출합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
function jbFunction() {
document.write( '<p>Hello World!</p>' );
}
jbFunction();
</script>
</body>
</html>
예제 2
Hello World!를 출력하는 예제입니다. 방법 2로 함수를 선언하고 호출합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbFunction = function() {
document.write( '<p>Hello World!</p>' );
};
jbFunction();
</script>
</body>
</html>
예제 3
인자를 사용하는 함수 예제입니다.
- 인자의 개수와 값의 개수가 같으면 아무런 문제 없이 출력됩니다.
- 값이 인자보다 적으면 값이 없는 인자는 undefined를 반환합니다.
- 값이 인자보다 많으면 인자보다 많은 값은 무시됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
h1 {
font-family: Consolas;
}
h1 span {
color: #2196f3;
}
</style>
</head>
<body>
<script>
function jbFunction( jbName, jbJob ) {
document.write( '<h1>My name is <span>' + jbName + '</span>. I am a <span>' + jbJob + '</span>.</h1>' );
}
jbFunction( 'John', 'student' );
jbFunction( 'John' );
jbFunction( 'John', 'student', 'male' );
</script>
</body>
</html>
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 / Object / document.title / 문서의 제목을 가져오거나 변경하는 속성
.title .title 속성으로 문서의 제목을 가져오거나 변경할 수 있습니다. 문법 1 document.title 문서의 <title> 태그의 내용을 반환합니다. 문법 2 document.title = 'ABC' 문서의 <title> 태그의 내용을 ABC로 바꿉니다. 예제 문서의 제목 JavaScript를 출력하고, 제목을 CODING FACTORY로 바꿉니다. <!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>' ...
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 / Object / document.characterSet / 문자 인코딩 반환하는 속성
.characterSet .characterSet은 문서의 문자 인코딩을 반환하는 속성입니다. 예제 <!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>document.characterSet : " + document.characterSet + "</p>" ); </script> </body> </html>
JavaScript / Object / document.querySelectorAll() / 특정 CSS 선택자를 가진 모든 요소 선택하는 메서드
.querySelectorAll() .querySelectorAll()은 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드입니다. 문법 document.querySelectorAll( 'selector' ) 예를 들어 document.querySelectorAll( '.abc' ) 는 클래스 값이 abc인 모든 요소를 가져옵니다. document.querySelectorAll( '.abc, .def' ); 클래스 값이 abc 또는 def인 모든 요소를 가져옵니다. 예제 1 클래스 값이 abc인 요소 중 두번째 요소의 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
JavaScript / Object / Array.reverse() / 원소의 순서를 반대로 만드는 메서드
.reverse() .reverse()는 배열의 원소의 순서를 반대로 만드는 메서드입니다. 순서가 바뀐 배열을 새로 만드는 것이 아니라, 기존 배열의 순서를 바꿉니다. 예제 4개의 원소를 가진 배열을 만들고 출력합니다.. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, sans-serif; } </style> </head> <body> <script> var jbAry = [ 1, 2, 3, 4 ...
JavaScript / 반복문 / while, do - while, for
자바스크립트 반복문에는 while, do - while, for 세가지가 있습니다. while 문법 var i = 0; while ( i < 10 ) { // do something i++; } i의 값이 0부터 9일 때까지 실행되고 i의 값이 10이면 실행되지 않고 다음으로 넘어갑니다. i의 값을 증가시키는 i++을 꼭 넣어야 한다는 것에 주의해야 합니다. 만약 i++이 없으면 i의 값이 ...
JavaScript / Object / document.write()
.write() .write()은 문서에 문자, 코드 등을 쓰는 메서드입니다. 문법 document.write( exp1, exp2, ... ) 예제 Hello와 World를 연달아 출력합니다. document.write( 'Hello', 'World' ); 2를 출력합니다. document.write( 1+1 ) 코드는 코드로 인식합니다. document.write( '<p style="font-size: 80px; text-align: center;">Hello</p>' ); 닫는 script 태그에는 \를 붙여서 <\/script>로 씁니다. document.write( '<script>document.write( "Hello" )<\/script>' ); JavaScript / Object / document.writeln()
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 ...
JavaScript / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리
Lazy Loading 웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading입니다. 웹브라우저에 보이는 영역 안에 있는 이미지는 로드하고, 보이지 않는 부분은 로드하지 않습니다. 밑으로 스크롤하여 이미지가 있는 영역에 도달하면 그 때 이미지를 로드합니다. 이렇게 하면 불필요한 이미지 로딩으로 인한 속도 저하를 방지할 수 있습니다. Lozad.js Lozad.js는 Lazy ...