자바스크립트(JavaScript) 기초

JavaScript is...

자바 스크립트에 대해 살짝 훑어본 결과 느낀 건...

뭐야? 자바랑 다르다더니 완전 비슷하네? 물론 다르긴 하다만 기본적인 개념은 거의 비슷한듯?

일단 더 공부해 보자..

 

 

JavaScript Data Types

var answer1="He is called 'Johnny'";
var answer2='He is called "Johnny"';

var pi=3.14;

var x=123;
var y=123e5;
var z=123e-5;

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

var person={firstname:"John", lastname:"Doe", id:5566};

 

JavaScript Arrays

The following code creates an Array called myCars:

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

 

or (condensed array):

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.

---

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:

 

var person={firstname:"John", lastname:"Doe", id:5566};

 

The object (person) in the example above has 3 properties: fistname, 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:

Example

name=person.lastname;
name=person["lastname"];

Try it yourself »

 

---

Null or Undefined

Non-existing is the value of a variable with no value.

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;

 

 

Calling a Function with Arguments and Return Value

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);

var x=5;
return x;

}
</script>

 

Comparison Operators

Comparison operators are used in logical statements to determine equality or difference between variables or values.

Given that x=5, the table below explains the comparison operators:

Operator	Description	Comparing	Returns	Try it
==	is equal to	x==8	false	Try it »
		x==5	true	Try it »
===	is exactly equal to (value and type)	x==="5"	false	Try it »
		x===5	true	Try it »
!=	is not equal	x!=8	true	Try it »
!==	is not equal (neither value or type)	x!=="5"	true	Try it »
		x!==5	false	Try it »
>	is greater than	x>8	false	Try it »
<	is less than	x<8	true	Try it »
>=	is greater than or equal to	x>=8	false	Try it »
<=	is less than or equal to	x<=8	true	Try it »

 

JavaScript Popup Boxes

자바스크립트에는 3가지 종류의 팝업 박스가 있다.

 

 

Alert Box

사용자에게 정보를 사용한다. "OK"버튼을 클릭해야 닫힌다.

Syntax

alert("sometext");

 

 

Confirm Box

사용자가 무엇인가를 확인하거나 수락해야 할때 사용한다.

"OK" 버튼이나 "Cancel" 버튼을 클릭해야 닫힌다. 버튼 클릭시 true, false값 반환

Syntax

confirm("sometext");

 

 

Prompt Box

페이지에 들어가기전에 값을 입력받기위해 사용한다.

"OK" 버튼이나 "Cancel" 버튼을 클릭해야 닫힌다. 버튼 클릭시 입력값, null값 반환

Syntax

prompt("sometext","defaultvalue");

 

 

 

JavaScript For...In Statement

The for...in statement loops through the properties of an object.

 

이건 머 자바의 빠른 for문이랑 같은거네.. [ for( Integer x : 배열 ) ]

 

 

Syntax

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

 

 

 

Assign Events Using the HTML DOM

You can assign events to HTML elements within a script or a function:

Example

Assign an onclick event to a button element:

<script>

document.getElementById("myBtn").onclick=function(){displayDate()};

</script>

Try it yourself »

In the example above, a function named displayDate will be executed when the button is clicked.

 

 

 

 

 

JavaScript Special Characters

Code	Outputs
\'	single quote
\"	double quote
\\	backslash
\n	new line
\r	carriage return
\t	tab
\b	backspace
\f	form feed