07_함수(1)
함수 정의
1)
var 함수이름 = function() {
//코드
}
2)
function 함수이름() {
//코드
}
매개인자 함수 정의
함수이름() 괄호 안에 매개 인자 개수만큼 매개 변수를 씁니다.
function 함수이름(매개변수1, 매개변수2) {
//코드
}
반환 값이 있는 함수 정의
function 함수이름(매개변수1, 매개변수2) {
//코드
return 반환값;
}
function 함수이름(매개변수1, 매개변수2) {
//코드
return 반환값;
}
함수 호출
1) 무인자 함수 호출
함수이름();
2) 매개인자가 있는 함수 호출
함수이름(매개인자1, 매개인자2);
3) 매개인자와 반환 값이 있는 함수 호출
var result = 함수이름(매개인자1, 매개인자2);
실습예제
예제 07-1.html
매개인자로 배열을 받아 배열의 원소를 모두 출력해주는 함수 예제입니다.
.another_category {
border: 1px solid #E5E5E5;
padding: 10px 10px 5px;
margin: 10px 0;
clear: both;
}
.another_category h4 {
font-size: 12px !important;
margin: 0 !important;
border-bottom: 1px solid #E5E5E5 !important;
padding: 2px 0 6px !important;
}
.another_category h4 a {
font-weight: bold !important;
}
.another_category table {
table-layout: fixed;
border-collapse: collapse;
width: 100% !important;
margin-top: 10px !important;
}
* html .another_category table {
width: auto !important;
}
*:first-child + html .another_category table {
width: auto !important;
}
.another_category th, .another_category td {
padding: 0 0 4px !important;
}
.another_category th {
text-align: left;
font-size: 12px !important;
font-weight: normal;
word-break: break-all;
overflow: hidden;
line-height: 1.5;
}
.another_category td {
text-align: right;
width: 80px;
font-size: 11px;
}
.another_category th a {
font-weight: normal;
text-decoration: none;
border: none !important;
}
.another_category th a.current {
font-weight: bold;
text-decoration: none !important;
border-bottom: 1px solid !important;
}
.another_category th span {
font-weight: normal;
text-decoration: none;
font: 10px Tahoma, Sans-serif;
border: none !important;
}
.another_category_color_gray, .another_category_color_gray h4 {
border-color: #E5E5E5 !important;
}
.another_category_color_gray * {
color: #909090 !important;
}
.another_category_color_gray th a.current {
border-color: #909090 !important;
}
.another_category_color_gray h4, .another_category_color_gray h4 a {
color: #737373 !important;
}
.another_category_color_red, .another_category_color_red h4 {
border-color: #F6D4D3 !important;
}
.another_category_color_red * {
color: #E86869 !important;
}
.another_category_color_red th a.current {
border-color: #E86869 !important;
}
.another_category_color_red h4, .another_category_color_red h4 a {
color: #ED0908 !important;
}
.another_category_color_green, .another_category_color_green h4 {
border-color: #CCE7C8 !important;
}
.another_category_color_green * {
color: #64C05B !important;
}
.another_category_color_green th a.current {
border-color: #64C05B !important;
}
.another_category_color_green h4, .another_category_color_green h4 a {
color: #3EA731 !important;
}
.another_category_color_blue, .another_category_color_blue h4 {
border-color: #C8DAF2 !important;
}
.another_category_color_blue * {
color: #477FD6 !important;
}
.another_category_color_blue th a.current {
border-color: #477FD6 !important;
}
.another_category_color_blue h4, .another_category_color_blue h4 a {
color: #1960CA !important;
}
.another_category_color_violet, .another_category_color_violet h4 {
border-color: #E1CEEC !important;
}
.another_category_color_violet * {
color: #9D64C5 !important;
}
.another_category_color_violet th a.current {
border-color: #9D64C5 !important;
}
.another_category_color_violet h4, .another_category_color_violet h4 a {
color: #7E2CB5 !important;
}
\n\n"}}" data-ve-attributes="{"typeof":"mw:Extension/syntaxhighlight","about":"#mwt3"}">
<html>
<head>
<script type="text/javascript">
function arrayPrint(array){
for(index in array){
document.write(array[index]+"<br>");
}
}
var jumsu=[100,95,83,94,99,99];
arrayPrint(jumsu);
</script>
</head>
</html>
예제 07-2.html
매개인자로 배열을 받아 배열을 정렬해주는 함수입니다.
if (!window.T) { window.T = {} }
window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":2859442,"name":"hihellloitland","title":"27","isDormancy":false,"nickName":"hihelllo","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://hihellloitland.tistory.com/38","DEFAULT_URL":"https://hihellloitland.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"};
window.T.entryInfo = {"entryId":38,"isAuthor":false,"categoryId":766226,"categoryLabel":"프로그래밍/Javascript"};
window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"};
window.initData = {};
window.TistoryBlog = {
basePath: "",
url: "https://hihellloitland.tistory.com",
tistoryUrl: "https://hihellloitland.tistory.com",
manageUrl: "https://hihellloitland.tistory.com/manage",
token: "m0SBVl3t2WEyhpnb1Md6p5EOk9TTC5cQiNc4evGrnpWRNzIgAd+gfY5O8PQJoPSy"
};
var servicePath = "";
var blogURL = "";
\n \n
\n\n"}}" data-ve-attributes="{"typeof":"mw:Extension/syntaxhighlight","about":"#mwt3"}">
<html>
<head>
<script type='text/javascript'>
function sortArray(array){
for(var i=0; i<array.length; i++){
for(var j=i+1; j<array.length;j++){
if(array[i]>array[j]){ // 뒤의 배열 값이 작으면 앞의 값과 교체
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
}
}
function arrayPrint(array){
for(index in array){
document.write(array[index]+"<br>");
}
}
var jumsu=[100,95,83,94,99,99];
sortArray(jumsu); // 배열이 정렬됨
arrayPrint(jumsu); // 정렬된 배열을 출력
</script>
</head>
</html>
