A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded...

44
How To A JavaScript is surrounded by a <script> and </script> tag. 자바 스크립트는 <script>와 </script> tag.로 둘러싸여 있습니다. surrounde-에워싸다. JavaScript is typically used to manipulate HTML elements. 자바 스크립트는 일반적으로 HTML 요소를 조작하는 데 사용됩니다. typical-전형적인 The <script> Tag To insert a JavaScript into an HTML page, use the <script> tag. HTML 페이지에 자바 스크립트를 삽입하려면 <script> tag를 사용합니다. into-~으로 The <script> and </script> tells where the JavaScript starts and ends. <script>와 </script>는 자바 스크립트가 시작되고 끝나는 곳을 알려줍니다. The lines between the <script> and </script> contain the JavaScript <script>와 </script> 사이에는 자바 스크립트가 포함 <script> alert("My First JavaScript"); </script> You don't have to understand the code above. Just take it for a fact, that the browser will interpret and execute the JavaScript code between the <script> and </script> tags. 당신은 위의 코드를 이해 할 필요가 없습니다. 그냥 브라우저가 <SCRIPT>와 </script> 태그 사이의 자바 스크립트 코드를 해석하고 실행할 것입니다. Some examples have type="text/javascript" in the <script> tag. This is not required in HTML5. JavaScript is the default scripting language in all modern browsers and in HTML5. 몇 가지 예를 입력 <script> tag에 = "text/javascript" 이것은 HTML5에 필요하지 않습니다. 자바 스크립트는 모든 현대적 인 브라우저와 HTML5의 기본 스크립트 언어입니다. Manipulating HTML Elements HTML 요소를 조작 Manipulating-조작하다, Elements-요소 To access an HTML element from JavaScript, you can use the document.getElementById(id) method. 자바 스크립트에서 HTML 요소에 액세스하려면, 당신은 document.getElementById (id) 메소드를 사용해야한다. attribute-속성, identify-확인, access-접근하다. Use the "id" attribute to identify the HTML element "ID"속성을 사용하여 HTML 요소를 식별 한다.

Transcript of A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded...

Page 1: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

How ToA JavaScript is surrounded by a <script> and </script> tag.자바 스크립트는 <script>와 </script> tag.로 둘러싸여 있습니다.surrounde-에워싸다.

JavaScript is typically used to manipulate HTML elements.자바 스크립트는 일반적으로 HTML 요소를 조작하는 데 사용됩니다.typical-전형적인

The <script> Tag

To insert a JavaScript into an HTML page, use the <script> tag.HTML 페이지에 자바 스크립트를 삽입하려면 <script> tag를 사용합니다.into-~으로

The <script> and </script> tells where the JavaScript starts and ends.<script>와 </script>는 자바 스크립트가 시작되고 끝나는 곳을 알려줍니다.

The lines between the <script> and </script> contain the JavaScript<script>와 </script> 사이에는 자바 스크립트가 포함

<script>alert("My First JavaScript");</script>

You don't have to understand the code above. Just take it for a fact, that the browser will interpret and execute the JavaScript code between the <script> and </script> tags. 당신은 위의 코드를 이해 할 필요가 없습니다. 그냥 브라우저가 <SCRIPT>와 </script> 태그 사이의 자바 스크립트 코드를 해석하고 실행할 것입니다.

Some examples have type="text/javascript" in the <script> tag. This is not required in HTML5. JavaScript is the default scripting language in all modern browsers and in HTML5.몇 가지 예를 입력 <script> tag에 = "text/javascript" 이것은 HTML5에 필요하지 않습니다. 자바 스크립트는 모든 현대적인 브라우저와 HTML5의 기본 스크립트 언어입니다.

Manipulating HTML ElementsHTML 요소를 조작Manipulating-조작하다, Elements-요소

To access an HTML element from JavaScript, you can use the document.getElementById(id) method.자바 스크립트에서 HTML 요소에 액세스하려면, 당신은 document.getElementById (id) 메소드를 사용해야한다.attribute-속성, identify-확인, access-접근하다.

Use the "id" attribute to identify the HTML element"ID"속성을 사용하여 HTML 요소를 식별 한다.

Page 2: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Example예제Access the HTML element with the specified id, and change its content:지정된 ID를 가진 HTML 요소에 액세스 하여 그 내용을 변경할 수 있습니다.specified-특정한, specifiecation-사양(예)컴퓨터사양소스 결과

The JavaScript is executed by the web browser. In this case, the browser will access the HTML element with id="demo", and replace its content (innerHTML) with "My First JavaScript".자바 스크립트는 웹 브라우저에서 실행됩니다. 이 경우, 브라우저는 id = "demo"로 HTML 요소에 액세스하고, "My First JavaScript"와 그 콘텐츠 (innerHTML)를 대체합니다.

Writing to The Document Output입력한 문서를 출력Output-출력

The example below writes a <p> element directly into the HTML document output:아래의 예는 직접 HTML 문서 출력으로 <P> 요소를 글을 참고below-아래소스 결과

Warning경고

Use document.write() only to write directly into the document output.document.write()문서 출력에만 사용하십시오.directly-직접

If you execute document.write after the document has finished loading, the entire HTML page will be overwritten:문서작성 완료 후 document.write를 실행하면 전체 HTML 페이지가 덮어 쓰기됩니다overwritten-덮어쓰다

Page 3: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Example예제

소스 결과

Where To

A JavaScript can be put in the <body> and in the <head> section of an HTML page.자바 스크립트는 <body>와 HTML 페이지의 <head> 섹션에 넣어 사용할 수 있습니다.put-넣어, section-구역

JavaScript in <body><body>안의 자바스크립트

The example below manipulate the content of an existing <p> element when the page loads아래의 예는 기존 <P> 요소의 내용을 조작 할 때 실어서 보내오는 페이지이다load-싣다, 적재Example예제

소스 결과

The JavaScript is placed at the bottom of the page to make sure it is executed after the <p> element is created.자바 스크립트는 <P> 요소가 생성 된 후에 실행되고 있는지 확인하기 위해 페이지의 하단에 배치됩니다sure-확실한, placed-위치, bottom-바닥, 아래

JavaScript Functions and Events자바 스크립트 함수 및 이벤트

The JavaScript statement in the example above, is executed when the page loads, but that is not always what we want.자바 스크립트 문은 위의 예처럼 페이지가 자바스크립트를 적재하여 실행하지만 우리가 원하는 걸 항상 그렇지는 않습니다.

Page 4: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Sometimes we want to execute a JavaScript when an event occurs, such as when a user clicks a button. Then we can write the script inside a function, and call the function when the event occurs.때때로 우리는 때 자바 스크립트를 실행하려면 이벤트가 발생하는 사용자가 버튼을 클릭 할 때 등. 그럼 우리가 내부에 스크립트를 작성할 수 함수 와 이벤트가 발생할 때 함수를 호출하십시오.function-함수, occurs-발생, inside-내구, when-언제, Then -그래서

You will learn more about JavaScript functions and events in later chapters.나중에 챕터에서 JavaScript 함수 및 이벤트에 대한 자세한 내용을 배울 것입니다.about-많은, ~에대하여

A JavaScript Function in <head><HEAD>에있는 자바 스크립트 함수

The example below calls a function in the <head> section when a button is clicked아래의 예는 버튼을 클릭하면 <head> 섹션에서 함수를 호출한다.

Example예제

소스 결과

A JavaScript Function in <body>This example also calls a function when a button is clicked, but the function is in the <body>이 예제도 버튼을 클릭하면 함수를 호출하지만, 함수는 <BODY>안에 있습니다.

Example예제

소스 결과

Scripts in <head> and <body>스크립트 안의 <head> 와 <body>

You can place an unlimited number of scripts in your document, and you can have scripts in both the <body> and the <head> section at the same time.

Page 5: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

귀하의 문서에 스크립트를 무제한 배치 할 수 있습니다, 당신은 같은 시간에 <body> 및 <head> 섹션 모두에서 스크립트를 할 수 있습니다.unlimited-무제한

It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.이 <head> 섹션는 기능을 넣어, 또는 페이지의 아래쪽에 하는 것이 일반적입니다. 이렇게 한 곳에서 모두 그들과 페이지 콘텐츠에 영향을 주지 않습니다.

Using an External JavaScript외부 자바 스크립트를 사용하여External-외부

Scripts can also be placed in external files. External files often contain code to be used by several different web pages.스크립트는 외부 파일에 배치 할 수 있습니다. 외부 파일은 종종 여러 다른 웹 페이지에서 사용하는 코드가 포함되어 있습니다.

External JavaScript files have the file extension .js.외부 자바 스크립트 파일은 .js라는 파일 확장자가 있습니다.extension-확장

To use an external script, point to the .js file in the "src" attribute of the <script> tag <script> 태그의 "SRC"속성에 js 파일에 외부 스크립트 지정하여 사용하려면point-점, 지정하다

Example예제

소스 결과

You can place the script in the <head> or <body> as you like. The script will behave as it was located exactly where you put the <script> tag in the document당신이 원한다면 <HEAD> 또는 <body> 태그에 스크립트를 넣을 수 있습니다. 이 문서에 <script> 태그를 넣어 곳이 정확한 위치에 스크립트가 작동됩니다.located-위치, behave-~굴다

External scripts cannot contain <script> tags.외부 스크립트는 <script> 태그를 포함 할 수 없습니다.

Page 6: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

StatementsJavaScript is a sequence of statements to be executed by the browser.자바 스크립트는 브라우저에 의해 실행되는 문장의 순서입니다.sequence-순서

JavaScript Statements자바 스크립트 구문

JavaScript statements are "commands" to the browser. The purpose of the statements is to tell the browser what to do.자바 스크립트 문은 브라우저에 "명령"입니다. 문장의 목적은 어떻게 할 브라우저를 말하는 것입니다.purpose-목적

This JavaScript statement tells the browser to write "Hello Dolly" inside an HTML element with id="demo“이 자바 스크립트 문은 ID = "demo"로 HTML 요소 내에 "Hello Dolly '를 쓸 수있는 브라우저를 알려줍니다

document.getElementById("demo").innerHTML="Hello Dolly";

Semicolon ;

Semicolon separates JavaScript statements.세미콜론은 자바 스크립트 구문을 분리합니다.

Normally you add a semicolon at the end of each executable statement.보통 각 실행 문의 끝에 세미콜론을 추가합니다.add-추가

Using semicolons also makes it possible to write many statements on one line.세미콜론을 사용하면 가능한 한 줄에 여러 문장을 작성 할 수 있습니다.

Ending statements with semicolon is optional in JavaScript. You might see examples without semicolons.세미콜론으로 문장을 종결하는 것이 자바 스크립트에 선택 사항입니다. 당신은 세미콜론없이 예를 볼 수 있습니다.

JavaScript Code

JavaScript code (or just JavaScript) is a sequence of JavaScript statements.자바 스크립트 코드 (또는 자바 스크립트) 자바 스크립트 문장의 순서입니다.just-막

Each statement is executed by the browser in the sequence they are written.각 문은 그들이 기록 된 순서대로 브라우저에 의해 실행됩니다.

This example will manipulate two HTML elements:이 예는 두 HTML 요소를 조작합니다

Example예제

Page 7: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

소스 결과

JavaScript Code Blocks자바 스크립트 코드 블록

JavaScript statements can be grouped together in blocks.자바 스크립트 문은 블록에 함께 그룹화 할 수 있습니다.

Blocks start with a left curly bracket, and end with a right curly bracket.블록은 오른쪽으로 물결 브래킷과 왼쪽 물결 브라켓의 끝과 시작합니다.

The purpose of a block is to make the sequence of statements execute together.블록의 목적은 문장의 순서가 함께 실행하는 것입니다.

An good example of statements grouped together in blocks, are JavaScript functions.블록이 함께 그룹화 구문의 좋은 예는 자바 스크립트 함수 기능

This example will run a function that will manipulate two HTML elements이 예는 두 HTML 요소를 조작하는 기능을 실행합니다

Example예제

소스 결과

You will learn more about functions in later chapters.나중에 챕터의 기능에 대해 자세히 배우게 될 것입니다.

JavaScript is Case SensitiveJavaScript는 대소 문자를 구분Sensitive-민감한, 예민한(여기서는 대소문자를 구별하는)

JavaScript is case sensitive.

Page 8: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

JavaScript는 대소 문자를 구분합니다.

Watch your capitalization closely when you write JavaScript statements:당신은 자바 스크립트 문을 쓸 때 대문자를 주의해야한다.capitalization-대문자

A function getElementById is not the same as getElementbyID.함수 getElementById는 getElementbyID과 동일하지 않습니다

A variable named myVariable is not the same as MyVariable.변수 myVariable는 MyVariable과 동일하지 않습니다.named-이름

White Space여백

JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent자바 스크립트는 공백을 무시합니다. 당신은 더 읽을 수 있도록 스크립트의 다음 줄에 동일한 공백을 추가 할 수 있습니다.equivalent-동등한, 같은, 상당한

var name="Hege";var name = "Hege";

Break up a Code Line코드라인을 끊기Break=깨 뜨리다, 부수다, 끊다 등

You can break up a code line within a text string with a backslash. The example below will be displayed properly:당신은 코드 라인을 끊을 수 있는 텍스트 문자열에서 백 슬래시와 함께. 예를 들어 아래에 올바르게 표시됩니다displayed-표시, properly-제대로, within-이내, below-아래

However, you cannot break up a code line like this그러나 이 같은 코드 줄을 끊을 수 없습니다.

document.write \("Hello World!");

Comments의견

JavaScript comments can be used to make the code more readable.자바 스크립트 comments은 코드가 더 읽기 쉽게 만들 할 수 있습니다.readable-판독할 수 있는

JavaScript Comments자바 스크립트의 Comments는

Page 9: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Comments will not be executed by JavaScript.Comments는 자바 스크립트가 실행되지 않습니다.

Comments can be added to explain the JavaScript, or to make the code more readable.Comments는 자바 스크립트를 설명하거나 코드를 더 읽기 위해 추가 할 수 있습니다.

Single line comments start with //.한 줄 코멘트는 / /로 시작합니다.

The following example uses single line comments to explain the code다음 예제는 코드를 설명하기 위해 한 줄 주석을 사용합니다following-다음의, explain-설명하다

Example예제

소스 결과

JavaScript Multi-Line Comments자바 스크립트 멀티 라인 코멘트

Multi line comments start with /* and end with */.멀티 라인 주석은 */시작 과 */로 끝냅니다.

The following example uses a multi line comment to explain the code:다음 예제는 코드를 설명하는 여러 줄 주석을 사용합니다

Example예제

소스 결과

Using Comments to Prevent Execution실행을 방지 할 코멘트를 사용한다.Prevent-방지, 막다, 예방하다 등

Page 10: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

In the following example the comment is used to prevent the execution of one of the codelines (can be suitable for debugging):다음 예제에서는 comment가 코드라인 (디버깅에 적합 할 수 있습니다) 중 하나의 실행을 방지하기 위해 사용됩니다suitable-적당한, debugging-디버깅(버그를 고치거나 수정하는)

Example예제

소스 결과

In the following example the comment is used to prevent the execution of a code block (can be suitable for debugging)다음 예에서는 주석이 코드 블록 (디버깅에 적합 할 수 있습니다)의 실행을 방지하는 데 사용됩니다.

Example예제

소스 결과

Using Comments at the End of a Line줄의 끝에서 코멘트를 사용하여

In the following example the comment is placed at the end of a code line:다음 예에서는 주석이 코드 라인의 끝 부분에 배치됩니다

Example예제

소스 결과

Page 11: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

VariablesVariables-변수

Variables are "containers" for storing information변수는 정보를 저장 "컨테이너"입니다storing-저장, containers-적재, 그릇

JavaScript Data Types자바 스크립트 데이터 유형

Example예제

소스 결과

Like School Algebra학교 대수학처럼Algebra-대수학

Remember algebra from school?학교에서 대수을 기억하십니까Remember-기억

x=5y=6z=x+y

Do you remember that letters (like x) can be used to hold a value (like 5), and that you can use the information above to calculate the value of z to be 11?

Page 12: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

당신은 문자 (X)를 (X = 5) 값을 보유하는 데 사용할 수 있습니다, 그리고 11이 Z의 값을 계산하는 위의 정보를 사용할 수 있는것을 기억하십니까?calculate-계산하다, 의도하다

These letters are called variables, and variables can be used to hold values (x=5) or expressions (z=x+y).이 문자는 호출되는 변수 와 변수 값 (X = 5) 또는 표현을 (Z = X + Y) 표현하는 데 사용할 수 있습니다.expressions-표현, hold-보유

Think of variables as names or labels given to values.이름이나 값으로 주어진 레이블로 변수를 생각하십시오.label-상표, 부호, 분류

JavaScript Variables자바 스크립트 변수

As with algebra, JavaScript variables are used to hold values or expressions.대수와 마찬가지로, 자바 스크립트 변수 값 또는 식을 표현하는 데 사용됩니다.

Variable can have a short names, like x and y, or more descriptive names, like age, sum, or, totalvolume.변수는 나이, 합계, 또는 totalvolume 같이 x와 y, 또는 좀 더 자세한 설명 이름처럼 짧은 이름을 가질 수 있습니다.totalvolume-총량(모든 개수) descriptive-서술적인

JavaScript variables can also be used to hold text values, like: name="John Doe".name = "John Doe“같은 자바 스크립트 변수도 같은 텍스트 값을 보유하는 데 사용할 수 있습니다

Here are the rules for JavaScript variable names여기에 자바 스크립트 변수 이름에 대한 규칙은 다음과 같습니다rules-규칙

Variable names are case sensitive (y and Y are two different variables)변수 이름은 대소문자를 구분합니다 (y와 Y 두 개는 다른 변수입니다)

Variable names must begin with a letter, the $ character, or the underscore character변수 이름은 문자로 시작해야하며, $ 또는 _이 첫문자로 사용될 수 없다 underscore-밑줄, character-문자, begin-시작하다.

Both JavaScript statements and JavaScript variables are case-sensitive.자바 스크립트 문자 및 자바 스크립트 변수는 모두 대소문자를 구분합니다.

Declaring (Creating) JavaScript Variables(Creating) 자바 스크립트 변수 선언Declaring-선언 Creating-만들기

Creating a variable in JavaScript is most often referred to as "declaring" a variable.변수를 만드는 방법은 자바 스크립트를 변수를 자주 참조하여 "선언" 하는 것이다.referred-참조

You declare JavaScript variables with the var keyword:당신은 자바 스크립트에서 변수와 VAR 키워드 를 선언한다.

Page 13: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

declare-선언하다

var carname;After the declaration, the variable is empty (it has no value).선언 후, 변수는 (비어있는 값) 비어 있습니다.empty-빈, 없는, 비우다

To assign a value to the variable, use the equal sign:변수에 값을 지정하려면 등호를 사용하여equal-같은, assign-지정 sign-기호, 등호

carname="Volvo";However, you can also assign a value to the variable when you declare it:그러나 당신이 그것을 선언 할 때는 변수에 값을 할당 할 수 있습니다

var carname="Volvo";In the example below we create a variable called carname, assigns the value "Volvo" to it, and put the value inside the HTML paragraph with id="demo":아래의 예에서 우리는 변수 carname을 불러서 거기에 값 "Volvo"를 할당하고, ID = "demo"로 HTML 문단 내부의 값을 넣습니다.

Example예제

소스 결과

It's a good programming practice to declare all the variables you will need, in one place, at the beginning of your code.이 코드의 시작 부분에서, 한 곳에서, 당신이 필요한 모든 변수를 선언하는 좋은 프로그래밍 연습입니다.practice-연습

JavaScript Data Types자바 스크립트 데이터 유형

There are many types of JavaScript variables, but for now, just think of two types: text and numbers.자바 스크립트 변수는 다양한 종류가 있지만 지금, 텍스트와 숫자 두 종류가 있다고 생각해보자

When you assign a text value to a variable, put double or single quotes around the value.당신이 변수에 텍스트 값을 지정하면,이 값 주위에 더블 침대 또는 싱글 따옴표를 넣어.quotes-인용부호

Page 14: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

When you assign a numeric value to a variable, do not put quotes around the value. If you put quotes around a numeric value, it will be treated as text.당신이 변수에 숫자 값을 지정하면,이 값 주위에 따옴표를 넣지 말아야 합니다. 당신은 숫자 값 주위에 따옴표를 입력하면, 그것은 텍스트로 취급됩니다.around –주위에 numeric-숫자

One Statement, Many Variables한 문장, 많은 변수

You can declare many variables in one statement. Just start the statement with var and separate the variables by comma:한 문장에 여러개의 변수를 선언 할 수 있습니다. -로 문장을 시작하고 쉼표로 변수를 분리합니다.

var name="Doe", age=30, job="carpenter";Your declaration can also span multiple lines당신의 선언은 여러 줄에 걸칠 수 있습니다.span-기간, 걸치다

var name="Doe",age=30,job="carpenter";

Value = undefined값 = 정의되지 않은

In computer programs, variables are often declared without a value. The value can be something that has to be calculated, or something that will be provided later, like user input. Variable declared without a value will have the value undefined.컴퓨터 프로그램에서 변수는 종종 값없이 선언됩니다. 이 값은 계산하는 것을, 또는 사용자 입력과 같은, 나중에 제공 될 것입니다 값없이 선언 된 변수는 정의되지 않은 무언가가 될 수 있습니다

The variable carname will have the value undefined after the execution of the following statement:변수 carname는 실행 후 정의되지 않은 다음과 같은 구문의 값을 주어야합니다.

var carname;

Re-Declaring JavaScript Variables다시 자바 스크립트 변수를 선언한다.

If you re-declare a JavaScript variable, it will not lose its value:.당신은 자바 스크립트 변수를 다시 선언하면 그 값을 잃지 않습니다.

The value of the variable carname will still have the value "Volvo" after the execution of the following two statements:변수의 값 carname은 여전 값 다음 두 문장의 실행 후 "Volvo“를 가지고 있다.

var carname="Volvo"; var carname;

Page 15: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

JavaScript Arithmetic자바 스크립트 산술Arithmetic 산수, 산술

As with algebra, you can do arithmetic with JavaScript variables, using operators like = and +:대수와 마찬가지로, 당신은 = 과 +같은 연산자를 사용하여 자바 스크립트 변수로 산술을 수행 할 수 있다.

Example예제

소스 결과

Functions함수

A function can be executed by an event, like clicking a button.기능은 버튼을 클릭 같은 이벤트에 의해 실행 할 수 있습니다.

JavaScript Functions자바 스크립트 함수

A function is a block of code that executes only when you tell it to execute.함수는 오직 실행을 원할 경우에만 실행 코드 블록입니다.

It can be when an event occurs, like when a user clicks a button, or from a call within your script, or from a call within another function.이 이벤트가 발생할 때이 될 사용자가 버튼을 클릭 할 때, 또는 스크립트 내에서 호출에서 다른 함수 내에서 호출을 통해하실 수 있습니다.occurs-발생, another-다른

Functions can be placed both in the <head> and in the <body> section of a document, just make sure that the function exists, when the call is made.함수의 <head>와 문서의 <body> 섹션에서 호출하여 함수가 존재하는지 확인한다.

How to Define a Function 함수를 정의하는 방법

Page 16: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

function functionname(){some code}

The { and the } defines the start and end of the function.{과 }은 시작과 함수의 끝을 정의합니다.defines-정의를 내리다, 밝히다

Note: Do not forget about the importance of capitals in JavaScript! The word function must be written in lowercase letters, otherwise a JavaScript error occurs! Also note that you must call a function with the exact same capitals as in the function name. capitals-수도참고 : 자바 스크립트에서 대문자의 중요성에 대해 잊지 마세요! 함수는 오직 소문자로 작성해야하며, 그렇지 않으면 자바 스크립트 오류가 발생합니다. 또한 함수 이름과 동일한 수가 있으면 그 함수를 호출합니다.lowercase-소문자, otherwise-그렇지 않으면, forget-잊다, importance-중요성, capitals-대문자

JavaScript Function Example자바 스크립트 함수 예제

Example예제

소스 결과

The function is executed when the user clicks the button.사용자가 버튼을 클릭 할 때 함수가 실행됩니다.

You will learn more about JavaScript events in the JS Events chapter.당신은 JS Events 장에서 자바 스크립트 이벤트에 대한 자세한 내용을 배울 수 있습니다.

Calling a Function with Arguments인수와 함수를 호출Arguments-인수

When you call a function, you can pass along some values to it, these values are called arguments or parameters.당신이 함수를 호출 할 때, 여기에 인수 또는 매개 변수 및 몇 가지 값을 함께 전달할 수 있습니다.along-함께, 데리고, parameters-매개변수

These arguments can be used inside the function.

Page 17: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

이 인수는 함수 내에서 사용할 수 있습니다

You can send as many arguments as you like, separated by commas (,)여러분이 좋다면 (,) 쉼표로 구분하여 여러 인자로 보낼 수 있습니다.separated-분리, send-보내다

myFunction(argument1,argument2)Declare the argument, as variables, when you declare the function:함수를 선언 할 때, 변수로 인수를 선언

function myFunction(var1,var2){some code}The variables and the arguments must be in the expected order. The first variable is given the value of the first passed argument etc.변수는 인수가 예상하는 순서에 있어야합니다. 첫 번째 변수는 첫 번째 전달 인자 등의 값을 주어집니다 expected-기대하는 order-순서, 주문, 명령 etc-~등

Example예제

소스 결과

The function above will alert "Welcome Harry Potter, the Wizard" when the button is clicked.위의 함수는 버튼을 클릭하면 “Welcome Harry Potter, the Wizard" 를 알려줍니다.

The function is flexible, you can call the function using different arguments, and different welcome messages will be given함수가 유연히 동작하면, 당신은 다른 인자를 사용하여 함수를 호출 할 수 있으며, 다른 환영 메시지가 제공됩니다flexible-융통성있는, 유연한

Example예제

소스 결과

Page 18: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

The example above will alert "Welcome Harry Potter, the Wizard" or "Welcome Bob, the Builder" depending on which button is clicked.위의 예는 클릭하는 버튼에 따라 "환영 해리 포터의 마법사"또는 "환영 밥, 빌더"를 알려줍니다.

Functions With a Return Value함수와 반환값

Sometimes you want your function to return a value back to where the call was made.때때로 당신의 함수는 곳으로 값을 반환하는 함수를 호출합니다.

This is possible by using the return statement.반환 문을 사용하여 이것을 가능하게 합니다.

When using the return statement, the function will stop executing, and return the specified value.return 문을 사용하는 경우 이 함수는 실행 중지하고 지정된 값을 반환합니다.

function myFunction(){var x=5;return x;}The function above will return the value 5.위의 함수는 값 5를 반환합니다.

Note: It is not the entire JavaScript that will stop executing, only the function. JavaScript will continue executing code, where the function-call was made from.참고 : 그것은 단지 함수만 실행 중지합니다. 함수 호출로 만든 곳을 자바 스크립트 코드를 계속 실행하고 전체 자바 스크립트가 중지되지 않습니다..

The function-call will be replaced with the returnvalue:함수 호출은 returnvalue으로 대체 될 것이다

var myVar=myFunction();The variable myVar holds the value 5, which is what the function "myFunction()" returns.변수 myVar가 5라는 값을 가지고 함수 "myFunction ()는" 어떤 함수를 반환한다.

You can also use the returnvalue without storing it as a variable:당신은 또한 변수로 저장하지 않고 returnvalue를 사용할 수 있습니다

Page 19: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

document.getElementById("demo").innerHTML=myFunction();The innerHTML of the "demo" element will be 5, which is what the function "myFunction()" returns."demo"요소의 innerHTML는 함수 "myFunction ()가"5를 반환할 것이다.

You can make a returnvalue based on arguments passed into the function:당신은 함수로 전달되는 인자에 따라 returnvalue 할 수 있습니다

Example예제

소스 결과

The return statement is also used when you simply want to exit a function. The return value is optional:당신은 단순히 기능을 종료 할 때 return 문은 사용됩니다. 반환 값은 선택 사항입니다optional-선택, simply-단순히, 간간히

function myFunction(a,b){if (a>b) { return; }x=a+b}The function above will exit the function if a>b, and will not calculate the sum of a and b.a>b인 경우 위의 함수를 종료합니다 그리고 a와b의 합을 계산하지 않습니다.calculate-계산

Local JavaScript Variables지역 자바 스크립트 변수

A variable declared (using var) within a JavaScript function becomes LOCAL and can only be accessed from within that function. (the variable has local scope).자바 스크립트 함수 내에서 (VAR를 사용하여) 선언 변수는 될 LOCAL 만 그 함수 내에서 액세스 할 수 있습니다. (변수는 지역 범위에 있습니다.)becomes-된다.

You can have local variables with the same name in different functions, because local variables are only recognized by the function in which they are declared.지역 변수 만 그들이 선언되어있는 함수에 의해 인정되고 있기 때문에, 다른 기능에 동일한 이름을 가진 지역 변수를 가질

Page 20: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

수 있습니다.recognized-인정하는

Local variables are deleted as soon as the function is completed.지역 변수는 즉시 함수가 완료되면 곧 삭제됩니다.soon=곧

Global JavaScript Variables글로벌 자바 스크립트 변수

Variables declared outside a function, become GLOBAL, and all scripts and functions on the web page can access it.변수는 함수 외부에서 선언 될 GLOBAL , 웹 페이지의 모든 스크립트 및 함수에 액세스 할 수 있습니다.outside-외부

The Lifetime of JavaScript Variables자바 스크립트 변수의 수명Lifetime-수명, 일생

The lifetime JavaScript variables starts when they are declared.그들이 선언을 시작하면 자바 스크립트 계속 변수를 실행한다.

Local variables are deleted when the function is completed.함수가 완료 될 때 지역 변수는 삭제됩니다.

Global variables are deleted when you close the page.당신이 페이지를 닫을 때 전역 변수가 삭제됩니다

Assigning Values to Undeclared JavaScript Variables선언하지 않은 자바 스크립트 변수에 값을 할당

If you assign a value to variable that has not yet been declared, the variable will automatically be declared as a GLOBAL variable.당신이 아직 선언되지 않은 변수에 값을 할당하면 GLOBAL 변수가 자동으로 선언됩니다automatically-자동적으로

This statement:이 문장은

carname="Volvo";will declare the variable carname as a global variable , even if it is executed inside a function.carname를 이 함수 내에서 실행되는 경우에도 전역 변수로 변수를 선언합니다

Data TypeString, Number, Boolean, Array, Object, Null, Undefined.문자열, 숫자, 논리값, 배열, 객체, Null값, 정의되지 않음.

JavaScript Strings

Page 21: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

자바 스크립트 문자열

A string is a variable which stores a series of characters like "John Doe".문자열은 "John Doe"같은 문자의 일련의 문자를 저장하는 변수입니다.series-시리즈, 일련, 세트

A string can be any text inside quotes. You can use simple or double quotes문자열은 인용 부호 안에 텍스트가 들어갈 수 있습니다. 당신은 간단한 또는 큰 따옴표를 사용할 수 있습니다 double quotes-큰따옴표

Example예제

var carname="Volvo XC60";var carname='Volvo XC60';You can use quotes inside a string, as long as they don't match the quotes surrounding the string:당신은 문자열이 인용부호로 둘러싸지 않는한 문자열 안에 따옴표를 사용할 수 있습니다

var answer="It's alright";var answer="He is called 'Johnny'";var answer='He is called "Johnny"';Or you can put quotes inside a string by using the \ escape character:\ 이스케이프를 사용하여 문자열 안에 따옴표를 넣을 수 있습니다

Example예제

소스 결과

You can access each characters in a string with [position]:당신은 문자열의 각 문자에 [position] 와 문자열을 액세스 할 수 있습니다

var character=carname[7];String indexes are zero-based, which means the first character is [0], the second is [1], and so on.문자열 인덱스는 0 기반이며, 첫 문자는 [0]을이며, 두번째 문자는 [1]을 의미합니다.based-기초, 기반 means-방법

JavaScript Numbers자바 스크립트 번호

Page 22: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

JavaScript has only one type of number.자바 스크립트는 하나의 숫자 유형이 있습니다.

Numbers can be with, or without decimals:숫자는 소수점과 함께, 또는 소수점 없이 할 수 있습니다.decimals-소수점

var pi=3.14;var x=34;The maximum number of decimals is 17.소수점의 최대 수는 17입니다.

Extra large or extra small numbers can be written with scientific notation:특 대 또는 추가적인 작은 숫자는 과학적 표기법으로 기록 할 수 있습니다extra-여분의, 추가 Extra large-특대 scientific-과학적인 notation-표기법 written-기록, 쓴

var y=123e5; // 12300000var z=123e-5; // 0.00123JavaScript arithmetic is not 100% accurate:자바 스크립트 산술은 100 % 정확하지 않습니다 :

Example예제

소스 결과

JavaScript Booleans자바 스크립트 논리 값Booleans-논리값

Booleans can have only two values: true or false.참 또는 거짓 : 논리 값은 두 값을 가질 수 있습니다.

var x=truevar y=falseBooleans are often used in conditional testing. You will learn more about conditional testing in a later chapter of this tutorial.Booleans는 종종 조건부 테스트에 사용됩니다. 당신은 이 튜토리얼 이후 조건부 테스트에 대한 자세한 내용을 배울 수 있습니다.

Page 23: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

JavaScript Arrays자바 스크립트 배열Arrays-배열

The following code creates an Array called cars:다음 코드는 자동차라는 배열을 생성합니다

var cars=new Array();cars[0]="Saab";cars[1]="Volvo";cars[2]="BMW";

or (condensed array):또는 (압축 배열) condensed-농축, 압축

var cars=new Array("Saab","Volvo","BMW");

or (literal array):또는 (문자 배열)

var cars=["Saab","Volvo","BMW"];Array indexes are zero-based, which means the first item is [0], second is [1], and so on.배열 인덱스는 0 기반이며, 이는 첫 번째 항목은 [0]을 의미, 두 번째는 [1]을 의미 합니다.

JavaScript Objects자바 스크립트 객체

An object is delimited by curly braces. Inside the braces the object's properties are defined as name and value pairs (name : value). The properties are separated by commas:객체는 중괄호로 구분합니다. (name : value) 괄호 안에있는 객체의 속성이 이름과 값 두 개로(name : value) 정의됩니다. 속성은 쉼표로 구분됩니다.properties-등록 delimited-구분 curly braces-중괄호

var person={firstname:"John", lastname:"Doe", id:5566};The object (person) in the example above has 3 properties: firstname, lastname, and id. 위의 예에서 객체 (사람은) 세 속성을 갖고 있습니다. (firstname, lastname, and id)

Spaces and line breaks are not important. Your declaration can span multiple lines공백 줄 바꿈은 당신의 선언에 여러 줄에 걸쳐 중요하지 않습니다.

var person={firstname : "John",lastname : "Doe",id : 5566};You can address the object properties in two ways:당신은 두 가지 방법으로 개체 속성을 해결할 수 있습니다

Page 24: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Example예제

소스 결과

Null or Undefinednull이거나 정의되지 않음

Non-existing is the value of a variable with no value.존재하지 않는 값이 없는 변수의 값입니다.Non-existing-존재하지 않는

Variables can be emptied by setting the value to null;변수는 값을 넣을 수도 넣지 않을 수도 있다.

cars=null;person=null;

Declaring Variable Types변수 유형을 선언

When you declare a new variable, you can declare its type using the "new" keyword:당신이 새로운 변수를 선언 할 때, 당신은 "새로운"키워드를 사용하여 유형을 선언 할 수 있다.

var carname=new String;var x= new Number;var y= new Boolean;var cars= new Array;var person= new Object;

All variables are objects. When you declare a new variable you create a new object.모든 변수는 개체입니다. 당신이 새로운 변수를 선언 할 때 당신은 새 개체를 만들 수 있습니다.Almost-모든

Objects객체

Almost everything in JavaScript is an Object: String, Number, Array, Function....자바 스크립트는 거의 모든 것이 객체입니다 : 문자열, 숫자, 배열, 함수 ....등

Page 25: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

In addition, JavaScript allows you to define your own objects.또한, 자바 스크립트는 자신의 개체를 정의 할 수 있습니다.addition-부가 allows-~할 수

JavaScript Objects자바 스크립트 객체

JavaScript has several built-in objects, like String, Date, Array, and more.자바 스크립트는 문자열과 같은, 날짜, 배열 등 여러 내장 객체를 가지고 있습니다.several-몇몇의

An object is just a special kind of data, with properties and methods.객체는 데이터의 단지 특별한 프로퍼티와 메소드의 종류가 있습니다.

Objects Properties객체 속성

Properties are the values associated with an object.속성은 개체와 연관된 값입니다.associated-관련

The syntax for accessing the property of an object is:개체의 속성을 액세스하는 구문은 다음과 같습니다syntax-구문

objectName.propertyNameThis example uses the length property of the String object to find the length of a string:이 예제는 문자열의 길이를 찾기 위해 String 개체가 length 속성을 사용합니다

var message="Hello World!";var x=message.length;The value of x, after execution of the code above will be:X의 값은, 코드의 실행 후 위의 것입니다.

12

Real Life Illustration실제 생활 일러스트

A person is an object.사람은 하나의 객체입니다.

The persons' properties include name, height, weight, age, skin tone, eye color, etc.사람의 속성은 이름, 신장, 체중, 연령, 피부 톤, 눈 색깔 등을 포함하고 있다.

All persons have these properties, but the values of those properties differ from person to person.모든 사람은 이러한 속성을 가지고 있지만, 그 속성의 값은 사람마다 다릅니다.differ-다르다

Page 26: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Objects Have Methods객체를 가지는 메소드

Methods are the actions that can be performed on objects.메소드는 객체를 움직여 수행하게 할 수 있는 작업입니다actions-행동

You can call a method with the following syntax:다음과 같은 구문으로 메소드를 호출 할 수 있습니다

objectName.methodName()This example uses the toUpperCase() method of the String object, to convert a text to uppercase:이 예제에서는 대문자로 텍스트를 변환하려면 String 개체의 toUpperCase () 메소드를 사용

var message="Hello world!";var x=message.toUpperCase();The value of x, after execution of the code above will be:X의 값은, 코드의 실행 후 위의 것입니다

HELLO WORLD!

Real Life Illustrated현실은 그림

A person is an object.사람은 하나의 객체입니다.

The persons' methods could be eat(), sleep(), work(), play(), etc.사람의 속성은 eat(), sleep(), work(), play()가 있다.

All persons have these methods.모든 사람이 메소드를 가지고 있습니다.

Creating JavaScript Objects자바 스크립트 객체 만들기

With JavaScript you can define and create your own objects.자바 스크립트를 사용하면 자신의 개체를 정의하고 만들 수 있습니다.

There are 2 different ways to create a new object:새 개체를 만드는 2 가지 방법이 있습니다

1. Define and create a direct instance of an object.1. 객체의 인스턴스를 직접 정의 및 생성 한다2. Use a function to define an object, then create new object instances.2. 객체를 정의 할 수있는 기능을 사용하여 다음 새 개체 인스턴스를 만들 수 있습니다.

Creating a Direct Instance직접 인스턴스 만들기

Page 27: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

This example creates a new instance of an object, and adds four properties to it:이 예제에서는 개체의 새 인스턴스를 생성하고,에 4 개의 속성을 추가합니다

personObj=new Object();personObj.firstname="John";personObj.lastname="Doe";personObj.age=50;personObj.eyecolor="blue";Alternative syntax (using object literals):대체 문법 (객체 문자를 사용하여)Alternative-대체

Example예제

소스 결과

Using an Object Constructor개체 생성자를 사용하여

This example uses a function to construct the object:이 예제는 객체를 생성하는 함수를 사용하여

Example예제

소스 결과

The reason for all the "this" stuff is that you're going to have more than one person at a time (which person you're dealing with must be clear). That's what "this" is: the instance of the object at hand.손에있는 객체의 인스턴스는 모든 '이'거 그 이유는 한 번에 하나 이상의 사람을 봐야한다는 것입니다(당신이 상대하고있는 사람은 명확하게 해야 합니다) 그래서 "이"가 무엇인지 다음과 같습니다stuff-재료

Adding Methods to JavaScript Objects

Page 28: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

자바 스크립트 객체에 메소드를 추가

Methods are just functions attached to objects.메소드는 객체에 부착 된 기능입니다.attached-첨부

Defining methods to an object is done inside the constructor function:객체에 메소드를 정의는 생성자 함수 내에서 수행됩니다

function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;

this.changeName=changeName;function changeName(name){this.lastname=name;}}The changeName() function assigns the value of name to the person's lastname property.changeName () 함수는 그 사람의 성 속성 이름의 값을 할당합니다.

Example예제

소스 결과

JavaScript knows which person you are talking about by "substituting" this with myMother.자바 스크립트는 "대체"로 이야기하는 사람과 myMother를 함께 알고 있다.

Creating JavaScript Object Instances자바 스크립트 객체 인스턴스 만들기

Once you have a object constructor, you can create new instances of the object, like this:당신은 객체 생성자가 완료되면,이 같은 개체의 새 인스턴스를 만들 수 있습니다.constructor-건설자

var myFather=new person("John","Doe",50,"blue");var myMother=new person("Sally","Rally",48,"green");

Page 29: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Adding Properties to JavaScript Objects자바 스크립트 객체에 속성을 추가

You can add new properties to an existing object by simply giving it a value.당신은 단순히 그것을 값을 제공하여 기존 개체에 새 속성을 추가 할 수 있습니다existing-현존하는

Assume that the personObj already exists - you can give it new properties named firstname, lastname, age, and eyecolor as follows:personObj이 이미 존재한다고 가정합니다 - 당신은 그것을 다음과 같은 새로운 FirstName이 명명 속성, 성, 연령, eyecolor을 제공 할 수 있습니다.

personObj.firstname="John";personObj.lastname="Doe";personObj.age=30;personObj.eyecolor="blue";

x=personObj.firstname;The value of x, after execution of the code above will be:X의 값은, 코드의 실행 후 위의 것입니다

John

Operations= is used to assign values.=는 값을 할당하는 데 사용됩니다.

+ is used to add values.+는 값을 추가하는 데 사용됩니다.

The assignment operator = is used to assign values to JavaScript variables.할당 연산자 =는 자바 스크립트 변수에 값을 할당하는 데 사용됩니다.

The arithmetic operator + is used to add values together.산술 연산자 +는 함께 값을 추가하는 데 사용됩니다.

Example예제

소스 결과

Page 30: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

JavaScript Arithmetic Operators자바 스크립트 산술 연산자

Arithmetic operators are used to perform arithmetic between variables and/or values.산술 연산자는 변수 및 / 또는 값 사이의 산술을 수행하는 데 사용됩니다.

Given that y=5, the table below explains the arithmetic operators:그것을 감안할 때 Y = 5 : 아래 표는 산술 연산자를 설명합니다

JavaScript Assignment Operators자바 스크립트 할당 연산자

Assignment operators are used to assign values to JavaScript variables.할당 연산자는 자바 스크립트 변수에 값을 할당하는 데 사용됩니다.

Given that x=10 and y=5, the table below explains the assignment operators:그점을 감안할 때 X = 10 및 Y = 5 , 표 아래의 할당 연산자를 설명합니다

The + Operator Used on Strings문자열에 사용되는 + 연산자

The + operator can also be used to add string variables or text values together.+ 연산자도 함께 문자열 변수 또는 텍스트 값을 추가하는 데 사용할 수 있습니다

Example예제

소스 결과

Page 31: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

To add a space between the two strings, insert a space into one of the strings두 문자열 사이에 공백을 추가하려면, 문자열 중 하나에 공간을 삽입

Example예제

소스 결과

or insert a space into the expression:또는 표현에 공간을 삽입

Example예제

소스 결과

Adding Strings and Numbers문자열과 숫자 추가

Adding two numbers, will return the sum, but adding a number and a string will return a string:두 숫자를 추가하면, 합계를 반환합니다하지만 번호와 문자열을 추가하는 것은 문자열을 반환합니다

Example예제

소스 결과

Page 32: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Comparison Operators비교 연산자Comparison-비교 Operators-연산자

Comparison and Logical operators are used to test for true or false.비교 및 논리 연산자의 맞는지 혹은 틀린지를 테스트하는 데 사용됩니다true or false-진실 혹은 거짓

Comparison Operators비교 연산자

Comparison operators are used in logical statements to determine equality or difference between variables or values.비교 연산자는 변수 또는 값 사이의 평등한 차이를 결정하는 논리 구문에 사용됩니다.equality-평등 logical statement-논리적인 문장

Given that x=5, the table below explains the comparison operators:점을 감안할 때 X = 5 , 아래의 표는 비교 연산자를 설명합니다explains-설명

How Can it be Used어떻게 사용할 수 있는가Comparison operators can be used in conditional statements to compare values and take action depending on the result비교 연산자는 값을 비교하고 그 결과에 따라 조치를 취 조건부 문에서 사용할 수 있습니다depending-따라 conditional-조건부의 result-결과

if (age<18) x="Too young";You will learn more about the use of conditional statements in the next chapter of this tutorial.당신은 이 튜토리얼의 다음 장에서 조건부 진술의 사용에 대한 자세한 내용을 배울 수 있습니다

Logical Operators논리 연산자

Logical operators are used to determine the logic between variables or values.JavaScript는 일부 조건에 따라 변수에 값을 할당하는 조건 연산자가 포함되어 있습니다determine-결정

Page 33: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Given that x=6 and y=3, the table below explains the logical operators:점을 감안할 때 X = 6와 y = 3 , 아래 표는 논리 연산자를 설명합니다

Conditional Operator조건부 연산자Conditional-조건부의, ~을 조건으로 한

JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.JavaScript는 일부 조건에 따라 변수에 값을 할당하는 조건 연산자가 포함되어 있습니다

variablename=(condition)?value1:value2

Example예제

소스 결과

If...Else만약...아니면If-만일, 만약 Else-그밖에, 그렇지 않으면

Conditional statements are used to perform different actions based on different conditions.조건부 진술은 여러 조건에 따라 서로 다른 작업을 수행하는 데 사용됩니다.perform-수행 based-기준

Conditional Statements조건부 문장

Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.매우 자주 코드를 작성하면 다른 결정에 대해 서로 다른 작업을 수행하고 합니다. 당신은 이 작업을 수행하는 코드에서 조건 구문을 사용할 수 있습니다.

In JavaScript we have the following conditional statements:자바 스크립트에서 우리는 다음과 같은 조건 문장이 있습니다

Page 34: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

if statement - use this statement to execute some code only if a specified condition is trueif문 - 지정된 조건이 참인 경우에만 일부 코드를 실행하려면 이 문을 사용

if...else statement - use this statement to execute some code if the condition is true and another code if the condition is falseif...else문 - 조건이 사실과 다른 코드 경우 조건이 거짓 인 경우 일부 코드를 실행하려면 이 문을 사용

if...else if....else statement - use this statement to select one of many blocks of code to be executedif...else if....else문 - 실행하는 코드의 여러 블록 중 하나를 선택하려면 이 문을 사용

switch statement - use this statement to select one of many blocks of code to be executedswitch문 - 실행하는 코드의 여러 블록 중 하나를 선택하려면이 문을 사용

If Statementif 문

Use the if statement to execute some code only if a specified condition is true.지정된 조건이 참인 경우에만 문이 몇 가지 코드를 실행하는 경우 사용합니다

if (condition) { code to be executed if condition is true }Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error!위의 경우는 소문자로 작성된 것입니다. 대문자 (IF)를 사용하면 자바 스크립트 오류를 생성합니다generate-생성

Example예제

소스 결과

Notice that there is no ..else.. in this syntax. You tell the browser to execute some code only if the specified condition is true.만약 이 구문이 없을 경우 당신의 브라우저는 오직 지정된 조건이 참인 경우에만 일부 코드를 실행합니다.

If...else StatementIf...else문

Page 35: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Use the if....else statement to execute some code if a condition is true and another code if the condition is not true.if....else를 사용하여 문장이 조건에 해당하지 않을 경우 다른 조건의 일부 코드를 실행합니다.

if (condition) { code to be executed if condition is true }else { code to be executed if condition is not true }

Example예제

소스 결과

If...else if...else StatementIf...else if...else문

Use the if....else if...else statement to select one of several blocks of code to be executed.if....else if...else를 사용하여 조건이 사실과 다른 코드 거나 다른 문이 조건에 해당하지 않을 경우 일부 코드를 실행 합니다

if (condition1) { code to be executed if condition1 is true }else if (condition2) { code to be executed if condition2 is true }else { code to be executed if neither condition1 nor condition2 is true }

Page 36: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Example예제

소스 결과

switch스위치

The switch statement is used to perform different action based on different conditions.switch 문은 여러 조건에 따라 서로 다른 작업을 수행하는 데 사용됩니다

The JavaScript Switch Statement자바 스크립트 스위치 문

Use the switch statement to select one of many blocks of code to be executed.실행하는 코드의 여러 블록 중 하나를 선택하는 스위치 문을 사용합니다.

switch(n){case 1: execute code block 1 break;case 2: execute code block 2 break;default: code to be executed if n is different from case 1 and 2}This is how it works: First we have a single expression n (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each case in the structure. If there is a match, the block of code associated with that case is executed. Use break to prevent the code from running into the next case automatically.이 작동 방법은 다음과 같습니다 처음에 우리는 하나의 표현이 N 번 평가 (가장 자주 변수). 표현식의 값은 다음 구조의 각각의 경우에 대한 값으로 비교됩니다. 일치가있는 경우, 해당 사건과 관련된 코드 블록이 실행됩니다. 사용 하다가 자동으로 다음 경우에 실행 코드를 방지 할 수 있습니다.

Page 37: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Example예제

소스 결과

The default Keyword기본 키워드

Use the default keyword to specify what to do if there is no match일치하지 않는 경우 기본 키워드를 사용하여 지정 하는가

Example예제

소스 결과

Popup Boxes팝업 박스

JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.자바스크립트에는 3가지의 popup boxes가있다.-Alert box, Confirm box, and Prompt boxAlert-경고 Confirm-확인 Prompt-일러주다, 알려주다 kind of-~가지

Alert box

Page 38: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

경고 상자

An alert box is often used if you want to make sure information comes through to the user.당신이 원하는 경우 경고상자는 사용자를 통해 확인 정보를 자주 사용될 수 있다.through-를 통해

When an alert box pops up, the user will have to click "OK" to proceed.경고 상자가 팝업되면 사용자는 계속 진행하려면 "OK"를 클릭해야합니다proceed-진행

alert("sometext");

Example예제

소스 결과

Confirm Box확인상자

A confirm box is often used if you want the user to verify or accept something.당신은 사용자가 무언가를 확인하거나 수락 할 경우 확인 상자가 자주 사용됩니다verify-확인 accept-동의

When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.확인 상자가 팝업되면, 사용자는 다음 단계로 진행 "확인"또는 "취소"중 하나를 클릭해야합니다.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.사용자가 "OK"를 클릭하면 상자가 true를 반환합니다. 사용자가 '취소'를 클릭하면 상자가 false를 반환합니다.

confirm("sometext");

Example예제

소스 결과

Page 39: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Prompt Box알림 상자

A prompt box is often used if you want the user to input a value before entering a page.당신은 사용자가 입력하는 페이지를 입력하기 전에 값을 원하는 경우 메시지 상자가 자주 사용됩니다entering-입력

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.메시지 상자가 팝업되면 사용자가 입력 값을 입력 한 후 다음 단계로 진행 "확인"또는 "취소"중 하나를 클릭해야합니다.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.사용자가 "OK"클릭하면 상자는 입력 값을 반환합니다. 사용자가 "취소"를 클릭하면 상자는 null 반환합니다.

prompt("sometext","defaultvalue");

Example예제

소스 결과

Line Breaks

To display line breaks inside a popup box, use a back-slash followed by the character n.

For Loop줄 바꿈

For Loops will execute a block of code a specified number of times.팝업 상자 안에 줄 바꿈을 표시하려면 \와 n을(\n) 사용합니다

Page 40: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Example예제

소스 결과

JavaScript Loops자바스크립트의 루프

For Loops will execute a block of code a specified number of times.루프의 경우 시간 지정 숫자 코드 블록을 실행합니다.

Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.종종 코드를 작성하면서 코드의 동일한 부분이 끝나지 않고 실행 할 수 있습니다. 우리는 이같은 작업을 수행하기위해 루프를 사용할 수 있습니다. 대신 스크립트의 여러 거의 같은 라인을 추가합니다.

In JavaScript, there are two different kind of loops:자바 스크립트에서 루프의 두 가지 종류가 있습니다

for - loops through a block of code a specified number of timesfor - 코드 블록을 통해 루프 지정된 시간

while - loops through a block of code while a specified condition is truewhile - 지정된 조건이 참인 동안 코드 블록을 통해 루프

The for Loop루프에 대해

The for loop is used when you know in advance how many times the script should run.이 스크립트가 실행되어야 횟수를 사전에 알게되면, 루프가 사용됩니다advance-전진, 사전에

for (variable=startvalue;variable<endvalue;variable=variable+increment) { code to be executed }

The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than 5. i will increase by 1 each time the loop runs.아래의 예는 i=0로 시작하는 루프를 정의합니다. 루프만큼 계속 실행됩니다 5 미만일 때 I = 1 루프가 실행될 때마다 증가

Page 41: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

합니다.

Note: The increment parameter could also be negative, and the < could be any comparing statement.참고 : 증가 매개 변수는 음수가 될 수 있으며, < 어떤 비교 진술 할 수 있다.

Example예제

소스 결과

While Loop

While Loops execute a block of code as long as a specified condition is true.지정된 조건이 참일 경우에만 루프에 한해 코드 블록을 실행한다.

The while loop loops through a block of code while a specified condition is true.지정된 조건이 사실인 경우 코드 블록을 통해 while 루프가 실행합니다.

while (variable<endvalue) { code to be executed }

Note: The < could be any comparing operator.<어떤 비교 연산자를 할 수 있습니다.

The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than 5. i will increase by 1 each time the loop runs:아래의 예제는 i = 0로 시작하는 루프를 정의합니다. I 가 5 미만일 경우. I = 1 루프가 5가 될 때까지 증가합니다

Example예제

소스 결과

Page 42: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Note: Do not forget to increase the i variable used in the condition, otherwise i will always be less than 5, and the loop will never end!증가하는 것을 잊지 마세요 i의 조건에서 사용되는 변수를, 그렇지 않으면 i는 항상 5 이상이어야 하며, 루프가 종료하지 않습니다!

The do...while Loopdo...while Loop문

The do...while loop is a variant of the while loop. This loop will execute the block of code once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.do...while loop문은 while 루프의 변형입니다. 이 루프는 조건이 참인 경우 조건이 사실로 그때는 오랫동안 루프를 반복해야합니다 확인하기 전에 한번 코드 블록을 실행합니다.

do { code to be executed }while (variable<endvalue);

The example below uses a do...while loop. The do...while loop will always be executed at least once, even if the condition is false, because the statements are executed before the condition is tested:아래의 예제는 do를 사용하여 do...while loop. 조건이 거짓 인 경우에도 조건이 테스트되기 전에 문이 실행되기 때문에 루프는 항상, 적어도 한 번 이상은 실행됩니다.

Example예제

소스 결과

Page 43: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

Note: Do not forget to increase the i variable used in the condition, otherwise i will always be less than 5, and the loop will never end!증가하는 것을 잊지 마세요 i의 조건에서 사용되는 변수를, 그렇지 않으면 i는 항상 5 이상이어야 하며, 루프가 종료하지 않습니다!

Break Loopbreak Loop문

The break Statementbreak 문

The break statement will break the loop and continue executing the code that follows after the loop (if any).break 문은 루프를 해제하고 루프 (있는 경우) 후 다음 코드를 실행 계속됩니다.

Example예제

소스 결과

The continue Statementcontinue 문continue-계속

The continue statement will break the current iteration and continue the loop with the next value.continue 문은 현재의 반복을 해제하고 다음 값을 루프를 계속합니다.

Example예제

소스 결과

Page 44: A JavaScript is surrounded by a - WordPress.com · 2012-09-16 · How To A JavaScript is surrounded by a tag. 자바 스크립트는 tag.로 둘러싸여 있습니다. surrounde-에워싸다.

For...In

JavaScript For...In Statement자바 스크립트 For...In 문

The for...in statement loops through the properties of an object.For...In 문 개체의 속성을 통해 문 루프 인치

for (variable in object) { code to be executed }

Note: The block of code inside of the for...in loop will be executed once for each property.내부 코드의 블록에 for...in 루프의 각 속성에 대해 한 번 실행됩니다.

Looping through the properties of an object:개체의 속성을 통해 반복

Example예제

소스 결과