Mootools 1.2 튜토리얼 기능_Mootools

오늘은 MooTools 튜토리얼 시리즈의 네 번째 강의를 시작합니다. 이전 강의를 아직 읽지 않으셨다면, 이전 튜토리얼 "Mootools 1.2 Tutorial (3) - 배열 사용법 소개"를 먼저 읽어보시기 바랍니다. 오늘은 MooTools에 대해 이야기하는 것이 아니라 JavaScript의 기능에 대한 기본 지식에 대해 이야기하겠습니다.
그러나 MooTools 테마를 준수하려면 MooTools 기능을 어디에 사용해야 하는지 알아야 합니다. 이전에는 모든 샘플 코드에서 domready 메소드에 코드를 배치했습니다. domready 외부에 두어야 할 경우 함수를 사용합니다. 이 함수는 domready에서 호출할 때까지 실행되지 않습니다.
일반적으로 더 좋은 방법은 함수 코드를 가능한 한 페이지 외부에 배치한 다음 JavaScript 애플리케이션을 통해 호출하는 것입니다. 재미로 코드를 작성하는 경우 모든 내용을 한 페이지에 작성하는 것이 더 쉬울 수 있습니다. 이 튜토리얼에서는 다음 규칙을 사용합니다.

코드 복사 코드는 다음과 같습니다.

< ;script type="text/javascript">
/*
* 함수 정의는 여기에 작성됩니다
*/
window.addEvent('domready', function() {
/*
* 함수 호출은 여기에 작성됩니다
*/
})

페이지가 로드(load)가 함수 코드를 실행하는 경우. 각 기능 아래에는 클릭하여 결과를 볼 수 있는 해당 버튼이 있습니다. 이는 내일 다룰 MooTools의 이벤트 처리를 사용하여 수행됩니다.
함수 기본
JavaScript에서 함수를 정의하는 방법에는 여러 가지가 있습니다. 이번 주제는 MooTools를 설명하는 것이므로 선호하는 MooTools 방법을 선택하겠습니다. 다음 예는 함수 정의의 시작입니다. 변수를 생성하고 이름을 simple_function으로 지정하고 이 변수를 함수로 정의했습니다.
참조 코드:
var simple_function = function(){
그런 다음 이 함수에 경고 문을 추가하면 실행됩니다. 함수가 호출될 때:
참조 코드:
alert('간단한 함수입니다.')
마지막으로 이 함수의 정의를 중괄호로 끝냅니다.
참조 코드:
}
이 닫는 중괄호는 매우 간단한 것처럼 보이지만 이 문제를 추적하는 것은 여러 번 고통스럽습니다. 따라서 함수 정의에 대한 닫는 기호를 적당히 강제로 확인하는 것이 좋습니다.
아래 예에서는 이를 결합합니다. 이 함수를 선언한 후 페이지가 로드된 후 domready 이벤트에 이 함수에 대한 호출을 추가했습니다. simple_function(); 함수를 호출한 후 예제 아래의 버튼을 클릭하면 결과를 볼 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

// 정의 함수로서의 simple_function
var simple_function = function(){
alert('간단한 함수입니다')
}
window.addEvent('domready', function() {
// 페이지 로드 후 simple_function을 호출할 때
simple_function();
})

단일 매개변수
이는 이미 사용할 수 있는 코드가 많을 때 유용합니다. 언제든지 쉽게 호출할 수 있지만 처리를 위해 매개변수(정보)를 전달할 수 있다면 더 유용할 것입니다. 함수에서 매개변수를 사용하려면 다음과 같이 함수 뒤의 괄호 안에 변수를 추가해야 합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var name_of_function = function(name_of_the_parameter){
/* 함수 코드는 여기에 작성됩니다*/
}

이렇게 하면 함수 내부에서 변수를 사용할 수 있습니다. 원하는 대로 매개변수 이름을 지정할 수 있지만 매개변수 이름을 더 의미있게 지정하는 것이 좋습니다. 예를 들어 도시 이름을 전달하는 경우 매개변수 이름을 user_input과 같이 모호한 이름으로 지정하는 것보다 town_name으로 지정하는 것이 더 나을 수 있습니다.
다음 예에서는 매개변수가 하나만 있는 함수를 정의하고 이 변수를 팝업 대화 상자에 표시합니다. 메시지의 첫 번째 부분은 작은따옴표로 묶여 있지만 매개변수는 그렇지 않습니다. 매개변수를 하드코딩된 문자열과 연결하려면 다음과 같이 더하기( ) 연산자를 사용하여 연결해야 합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var Single_parameter_function = function(매개변수){
alert('매개변수는 '매개변수)
}
window.addEvent('domready', function(){
Single_parameter_function('이것은 매개변수입니다');
});

다중 매개변수
자바스크립트는 함수에 정의할 수 있는 매개변수의 수를 제한하지 않습니다. 일반적으로 함수에 전달되는 매개변수 수를 가능한 한 적게 유지하면 코드를 더 쉽게 읽을 수 있습니다. 함수에 정의된 여러 매개변수는 쉼표로 구분되며, 그 외에는 단일 매개변수 함수와 동일하게 동작합니다. 아래 예제의 함수는 두 개의 숫자를 가져와서 그 합을 세 번째 숫자에 할당합니다.
참조 코드:
var third_number = first_number second_number;
여기서 더하기 기호( ) 연산자는 다음과 약간 다릅니다. 이 결과를 문자열로 연결:
참조 코드:
alert(first_number " plus " second_number "는 " third_number와 같음)
1학년에서는 가능해 보이지만 실제로는 매우 간단합니다. 두 숫자 사이에 더하기 기호( )를 사용하면 숫자를 더하는 것입니다. 숫자와 문자열의 조합 사이에 더하기 기호( )를 사용하면 모든 것을 문자열로 연결하게 됩니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var two_parameter_function = function(first_number , second_number){
// first_number와 second_number의 합을 가져옵니다
var third_number = first_number second_number;
// 결과 표시
alert(first_number " 더하기 " second_number "는 " third_number와 같습니다. );
}
window.addEvent('domready', function(){
two_parameter_function(10, 5);
})

반환 값
in a 팝업 대화 상자에 함수의 실행 결과를 표시하는 것이 유용할 수 있지만 때로는 결과를 다른 곳에서 사용해야 할 수도 있습니다. 이 작업을 수행하려면 함수에서 반환 함수를 사용해야 합니다. 다음 예제 코드에서 함수는 위 예제와 동일하지만 대화 상자를 팝업하는 대신 두 개의 숫자를 더한 결과를 반환합니다.
참조 코드:
return third_number
You; Discovery에서는 domready에서도 더 많은 작업을 수행합니다. 이 결과를 표시하기 위해 이 함수의 반환 값을 return_value라는 매개 변수에 할당한 후 팝업 대화 상자에 표시합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var two_parameter_returning_function = function(first_number , second_number){
var third_number = first_number second_number;
return third_number;
}
window.addEvent('domready', function(){
var return_value = two_parameter_returning_function(10 , 5) ;
alert("반환 값은 " return_value);
})

함수를 매개변수로 넣습니다
우리가 domready에 패키징한 내용을 보면 MooTools에서는 함수를 매개변수로 전달했음을 알 수 있습니다.
참조 코드:
window.addEvent('domready', function(){
/* function code*/
});
이와 같이 함수를 매개변수로 전달하는 함수를 익명 함수라고 합니다.
참조 코드:
function(){
/* 함수 코드*/
}
In 첫 번째 튜토리얼의 설명에서 Boomstix는 domready에서 익명 함수를 사용하지 않는 다른 방법을 지적했습니다. 이 메서드는 다음과 같습니다.
참조 코드:
// domready 시 호출할 함수 만들기
var domready_function(){
/* 함수 코드*/
}
/ / domready 이벤트에 함수 할당
window.addEvent('domready', domready_function)
두 접근 방식 사이에 성능이나 기능 면에서 큰 차이는 없어서 기본적으로는 이렇다고 생각합니다. 단지 문체적인 습관일 뿐이죠. 우리는 계속해서 우리의 접근 방식을 고수할 것입니다. 이러한 차이점을 아는 사람이 있으면 알려 주시기 바랍니다.
코드 예시
내일 여러분의 식욕을 자극하기 위해(그리고 오늘의 MooTools 부족을 보충하기 위해) 이 페이지의 배경을 마음대로 바꿀 수 있는 의미 없는 함수를 작성했습니다:
참조 코드 :

코드 복사 코드는 다음과 같습니다.

varchangeColor = function(){
// 입력 상자에서 색상 값을 가져오는 데 사용됩니다.
// (참조:
// http://docs.mootools .net /Element/Element#Element:get)
var red = $('red').get('value')
var green = $('green').get('value') ;
var blue = $('blue').get('value');
// 모든 것이 정수인지 확인하세요
// (참조:
// /docs .mootools.net/Native/Number#Number:toInt)
red = red.toInt();
green = green.toInt()
blue = blue.toInt(); >/ / 모든 숫자가 1에서 255 사이인지 확인하세요
// 필요한 경우 반올림
// (참조:
// http://docs.mootools.net/Native/Number #Number :limit)
red = red.limit(1, 255);
green = green.limit(1, 255)
blue = blue.limit(1, 255); 16진수 코드 가져오기
// (참조:
// http://docs.mootools.net/Native/Array/#Array:rgbToHex)
var color = [red, green, blue ].rgbToHex();
// 페이지 배경색 설정
// (참조:
// http://docs.mootools.net/Element/Element.Style #Element :setStyle)
$('body_wrap').setStyle('Background', color);
}
var ResetColor = function(){
// 페이지 배경색을 흰색으로 재설정
// (참조:
// http://docs.mootools.net/Element/Element.Style#Element:setStyle)
$('body_wrap').setStyle('Background' , '#fff');
}
window.addEvent('domready', function(){
// 버튼에 대한 클릭 이벤트 추가(이에 대해서는 내일 이야기하겠습니다)
/ / (참고:
// http://docs.mootools.net/Element/Element.Event#Element:addEvent)
$('change').addEvent('click',changeColor)
$ ('reset').addEvent('click', ResetColor)
})

확장 학습...

학습에 필요한 모든 것이 포함된 zip 패키지를 다운로드하세요

MooTools 1.2 핵심 라이브러리, 외부 JavaScript 파일, 간단한 HTML 페이지 및 CSS 파일이 포함되어 있습니다.

자바스크립트 기능에 대해 자세히 알아보기

JavaScript 함수의 Quirksmode

JavaScript 함수에 대한 좋은 자료가 없습니다. 아는 사람이 있으면 알려주시기 바랍니다.

예제 문서

• 유틸리티/DomReady
• Number.toInt()
• 숫자.제한()
• Array.rgbToHex()
• Element.setStyle()
• Element.addEvent()