'개인화 된 JavaScript': 사용자 정의 함수, 개체 및 메서드

최신 프로그래밍 언어 인 JavaScript는 사용자가 고유 한 함수를 정의 할 수 있도록하여 완전한 확장 성을 보증합니다. 이를 통해 반복해서 사용할 수있는 루틴을 만들 수 있습니다. 일반적인 "구성 요소"를 재사용 할 때 시간을 절약하고 고유 한 기능을 설계하여 필요에 맞게 JavaScript의 기본 언어를 확장 할 수 있습니다. "개인화 된 JavaScript"라고 생각하십시오.

JavaScript는 객체를 기반으로하기 때문에 JavaScript 함수는 쉽게 객체 및 해당 객체의 메서드로 변환 될 수 있습니다. 따라서 입찰을 수행하기 위해 사용자 정의 개체를 생성 할 수있을뿐만 아니라 원하는 방식으로 정확하게 작동하는 고유 한 개체를 생성 할 수 있습니다. 그리고 이러한 개체에 대해 작동하는 메서드를 만들 수 있습니다. 이것은 강력하게 들리지만 JavaScript에서는 함수, 객체 및 메서드를 만드는 과정이 매우 쉽습니다.

기능 소개

function 문을 사용하여 고유 한 JavaScript 함수를 만듭니다. 베어 본 구문은 다음과 같습니다.

function name ( params ) { ... function stuff ... }
  • name 은 함수의 고유 한 이름입니다. 스크립트의 모든 함수 이름은 고유해야합니다.
  • params 는 함수에 전달하는 하나 이상의 매개 변수 변수입니다.
  • function stuff함수 가 수행하는 명령입니다. 여기에 대부분의 것을 넣을 수 있습니다.

{및} 중괄호 문자를 확인하십시오. 이것들은 펑션 블록을 정의하고 절대적으로 필요합니다. 중괄호는 함수가 시작되고 끝나는 위치를 JavaScript에 알려줍니다. 매개 변수 주위의 괄호도 필요합니다. 함수가 매개 변수를 사용하지 않는 경우에도 괄호를 포함하십시오 (많은 경우 사용하지 않음).

사용자 정의 함수의 이름은 영숫자 문자 만 사용하는 한 사용자가 결정할 수 있습니다 (밑줄 문자 _도 허용됨). 함수 이름은 문자로 시작해야하지만 이름에 숫자를 포함 할 수 있습니다.

JavaScript 스타일의 함수 이름 대문자, 즉, 초기 소문자, 함수 이름이 복합 단어로 구성된 경우 대문자를 고수했습니다. 예를 들어 myFuncName, yourFuncName또는 theirFuncName. 함수 이름은 대소 문자를 구분합니다. 스크립트의 다른 곳에서 함수를 참조 할 때 동일한 대문자를 사용해야합니다. JavaScript myFuncMyfunc.

함수와 변수를 구분하기 위해 변수에 MyStuff. 이것은 대문자를 사용하는 함수와 즉시 구별됩니다 myStuff. 물론 원하는 대문자 체계를 자유롭게 채택 할 수 있습니다.

함수 정의 및 사용

함수의 방법과 이유를 설명하는 가장 좋은 방법은 간단한 동작을 보여주는 것입니다. 다음은 "Hello, JavaScripters!"를 표시하는 기본 함수입니다. "Hello World!"에 대한 확실한 도약입니다. 새로운 프로그래밍 언어에 대한 예입니다.

function basicFunction () {alert ( "Hello JavaScripters!"); }

이것은 단지 기능을 정의 합니다. JavaScript는 함수가 스크립트의 다른 곳에서 참조되지 않는 한 아무것도하지 않습니다. 사용하려면 함수 를 호출 해야합니다. 사용자 정의 함수를 호출하는 것은 내장 JavaScript 함수를 호출하는 것과 동일합니다. 스크립트에 함수 이름 만 제공하면됩니다. 이것은 함수 호출 역할을합니다. JavaScript가 함수 호출을 만나면 해당 함수에있는 모든 명령을 완료하기 위해 대시가됩니다. 함수가 종료되면 JavaScript는 함수 호출 직후 지점으로 돌아가 나머지 스크립트를 처리합니다.

위의 함수를 호출하려면 basicFunction () 텍스트를 포함하기 만하면됩니다. 빈 괄호가 필요하므로주의하십시오. 다음은 Hello JavaScripters 프로그램의 작동 예제입니다.

기본 함수 예제 function basicFunction () {alert ( "Hello JavaScripters!"); }

basicFunction ();

페이지가로드되었습니다.

브라우저는 문서가로드 될 때 태그의 내용을 처리합니다. basicFunction()함수 호출을 만나면 함수 처리를 위해 잠시 일시 중지되고 경고 상자가 나타납니다. 확인을 클릭하면 페이지의 나머지 부분이로드를 완료합니다.

이벤트 핸들러로 함수 호출

함수를 호출하는 일반적인 방법은 양식 단추 또는 하이퍼 텍스트 링크에 ​​함수에 대한 참조를 포함하는 것입니다. 사용자가 양식 버튼을 클릭 할 때 사용자 정의 함수를 처리하는 것이 아마도 가장 쉬운 방법 일 것입니다. onClick 이벤트 핸들러를 사용하여 사용자가 버튼을 클릭하면 지정된 함수가 처리되어야한다고 JavaScript에 알립니다. 다음은 양식 버튼을 클릭 할 때 basicFunction이 호출되는 방식을 보여주는 이전 예제의 수정 된 버전입니다.

기본 함수 예제 function basicFunction () {alert ( "Hello JavaScripters!"); }

기능을 호출하려면 클릭하십시오.

태그에서 onClick 구문을 확인하십시오. 클릭시 처리하려는 이벤트는에 대한 호출 basicFunction입니다. 이 이벤트는 큰 따옴표로 묶여 있습니다.

함수에 값 전달

JavaScript 함수는 값 또는 매개 변수를 전달하는 것을 지원 합니다. 이 값은 함수 내에서 처리하는 데 사용할 수 있습니다. 예를 들어, 경고 상자에 "Hello JavaScripters!"라고 표시하는 대신 전화 할 때마다 원하는대로 말할 수 있습니다. 표시 할 텍스트는 함수에 매개 변수로 전달할 수 있습니다.

매개 변수를 함수에 전달하려면 함수 정의에서 매개 변수로 변수 이름을 제공하십시오. 그런 다음 함수의 다른 곳에서 해당 변수 이름을 사용합니다. 예를 들면 :

function basicExample (텍스트) {alert (텍스트); }

변수 이름은 Text이며 함수의 매개 변수로 정의됩니다. 그런 다음 해당 변수는 경고 상자에 표시 할 텍스트로 사용됩니다. 함수를 호출 할 때 함수 호출의 매개 변수로 표시 할 텍스트를 제공하십시오.

basicExample ( "내가 원하는 모든 것을 말합니다"); 

함수에 여러 값 전달

함수에 여러 매개 변수를 전달할 수 있습니다. 내장 JavaScript 함수 및 메소드와 마찬가지로 매개 변수를 쉼표로 구분하십시오.

multipleParams ( "one", "two"); ... function multipleParams (Param1, Param2) {...

여러 매개 변수가있는 함수를 정의 할 때 매개 변수가 함수 호출에서 동일한 순서로 나열되는지 확인하십시오. 그렇지 않으면 JavaScript 코드가 매개 변수를 잘못된 변수에 적용하여 함수가 제대로 작동하지 않을 수 있습니다.

Here's a working example of a function with multiple parameters. It takes two parameters: an input string and a number value. The number value indicates how many characters on the left of the string you want to display in the alert box. When you run the following script, the alert box displays "This is" -- the first seven characters of the input string.

Global Variable Example lefty ("This is a test", 7);

function lefty (InString, Num) { var OutString=InString.substring (InString, Num); alert (OutString); }

Returning a value from a function

The functions described so far don't return a value; that is, they do whatever magic you want them to do, then end. No "output" value is provided by the function. In some other languages, such return-less functions are called subroutines. However, in JavaScript (like in C and C++), "functions are functions" whether or not they return a value.

It's easy to return a value from a function: use the return statement, along with the value you wish to return. This is handy when you want your function to churn through some data and return the processed result. Take the "lefty" function from above. Instead of displaying the chopped-off string, you can return it to the calling function, and use the return value any way you want.

Global Variable Example var Ret = lefty ("This is a test", 7); alert (Ret);

function lefty (InString, Num) { var OutString=InString.substring (InString, Num); return (OutString); }

This script does essentially the same one as the previous example, but instead of always displaying the chopped-off text, the function merely returns the processed value. The return value is captured in a variable, and you are free to use that variable in any way you wish. The above shows the Ret variable used with an alert box, but you can use it in other ways, too. For example, you can write the contents of the Ret variable using the document.write method:

document.write (Ret); 

Defining local variables within functions

By default all JavaScript variables are declared global for the document that created them. That means when you define a variable in a function, it is also "visible" to any other portion of the script on that document. For example, in the following global variable test, the variable test is visible to the showVar function, even though the variable is defined in the loadVar function.

Global Variable Example

function showVar () { alert (test) }

function loadVar () { test = "6" }

loadVar();

Click to call function.

Global variables aren't always what you want. Instead, you want variables that are local to the function. These variables exist only as long as JavaScript is processing the function. When it exits the function, the variables are lost. In addition, a local variable of a given name is treated as a separate entity from a global variable of the same name. In this way, you don't have to worry about reuse of variable names. The local variable in the function won't have any effect on the global variable used elsewhere in the script.

To declare a local variable, add the var keyword to the beginning of the variable name in the function. This tells JavaScript you want to make the variable local to that function. As a test, change the loadVar function above to the following, and re-load the script. When you click the button, JavaScript tells you the variable doesn't exist. This is because test is only local to the loadVar function, and does not exist outside the function.

function loadVar () { var test = "6" } 

Calling one function from another function

Code inside a function behaves just like code anywhere else. This means you can call one function from inside another function. This allows you to "nest" functions so that you can create separate functions, which each perform a specific task, and then run them together as a complete process, one right after the other. For example, here's a function that calls three other mythical functions, each one returning a string of text that has been altered in some way.

function run () { var Ret = changeText ("Change me"); alert (Ret); document.write (Ret); } function changeText (Text) { Text = makeBold (Text); Text = makeItalics (Text); Text = makeBig (Text); return (Text); } function makeBold (InString) { return (InString.bold()); } function makeItalics (InString) { return (InString.italics()); } function makeBig (InString) { return (InString.big()); } 

Creating objects with user-defined functions

JavaScript is based on objects: the window is an object, links are objects, forms are objects, even Netscape itself (or other browser) is an object. Using objects can help make programming easier and more streamlined. You can extend the use of objects in JavaScript by making your own. The process uses functions in a slightly modified way. In fact, you'll be surprised how easy it is to make your own JavaScript objects.

Making a new object entails two steps:

  • Define the object in a user-defined function.
  • Use the new keyword to create (or instantiate) the object with a call to the object function.

Here's an example of the world's simplest user-defined JavaScript object:

// this part creates a new object ret = new makeSimpleObject();

// this part defines the object function makeSimpleObject() {}

I've called the new object ret; use any valid variable name for the new object (I use lower-case letters for variables that contain objects, so it's easier to tell that the variable contains an object).

You can use the same object function to create any number of new objects. For instance, these lines create four new and separate objects: eenie, meenie, minie, and moe:

eenie = new makeSimpleObject(); meenie = new makeSimpleObject(); minie = new makeSimpleObject(); moe = new makeSimpleObject(); 

사실, 위의 "세계에서 가장 단순한 자바 스크립트 객체"에 대한 지름길도 있습니다. 베어 본 객체를 만들기 위해 객체 함수를 정의 할 필요가 없습니다. JavaScript는 새 객체를 만드는 데 사용할 수있는 일반 Object () 객체를 지원합니다. 다음은 명시 적 객체 함수없이 위와 동일합니다.

eenie = new Object (); 

이미 만들어진 개체에 새 속성 정의