JavaScript Introduction
- JavaScript( 이하 JS )는 세상에서 가장 인기있는 언어이다. web page 언어의 표준이며 데스크탑 앱, 모바일 폰 앱, 인터넷 서버등에 많이 사용되고 있다.
JavaScript is a Scripting Language
- 스크립트 언어는 작고 가벼운 프로그램 언어이다.
- JS는 상호작용할 수 있도록 고안된 HTML page를 디자인한다.
- HTML page 에 추가되어 web browser 에서 바로 실행된다.
What can JavaScript do?
- HTML 다루기
- CSS 다루기
- Data 검증
- Event 에 대응하기
JavaScript vs. Java
- JS 와Java 는 완전히 다른 언어.
JavaScript = ECMAScript
- ECMA-262 는 JS의 표준.
- JS는 netscape 사의 Brendan Eich 에 의해 개발되었고, 1995년 처음 등장했다.
- 1997년 ECMA 표준조합에 의해 표준으로 채택된다.
- ECMAScript의 개발은 계속 진행중이다.
JavaAScript How To
- JS는 <script> 와 </script> 사이에 존재한다.
The <script> Tag
- 요즘은 script tag에 "type=text/javascript" 구문을 넣지 않는데 이는 HTML5부터 표준이 되었기 때문이다.
Manipulating HTML Elements
- HTML Element 접속은 document.getElementById( id ) 로.
- DOM Node의 html 내용은 x.innerHTML로 접근.
Writing to the Document Output
- document.write( contents ) 로 웹 페이지에 내용 쓰기 가능
Warning
- document.write() 는 내용 추가가 아니라, 내용 자체에 쓰는 것임에 주의
JavaScript Where To
- JS는 <body> 나 <head> 태그에 쓰인다.
JavaScript in <body> & <head>
- HTML은 물론 script는 순차적 실행이라는 사실을 명심하여 위치시킨다.
- 보통은 head 에 위치시키고, 필요에 따라 body 뒤쪽에 위치시키기도 한다.
Using an External JavaScript
- external js 는 <script src=""> 로 연결 가능
JavaScript Statements
- JS 는 순차적 실행된다.
Semicolon ;
- semicolon 으로 statement 를 끝내는 것이 좋지만, 사실 optional 이다.
JavaScript is Case Sensitive
White Space
- JS는 white space가 영향이 없다.
Break up a Code Line
- text string 인 경우 \ 를 이용해서 code line을 구분할 수 있다.
document.write("Hello \
World!");
JavaScript Comments
JavaScript Comments
- // 를 이용한다.
JavaScript Multi-Line Comments
- /* */ 를 이용한다.
JavaScript Variables
JavaScript Variables
- 변수명도 case sensitive
- 변수명은 항상 문자, $ 또는 _ 로 시작해야 한다.
Declaring( Creating ) JavaScript Variables
- var 키워드로 시작한다.
- 정의만 한 경우에는 undefined 가 나온다.
- 보통은 최상단에 모든 변수를 정의하는 것이 좋다.
One Statement, Many Variables
- comma 를 이용하여 한번에 여러개의 변수를 정의할 수 있다.
Re-declaring JavaScript Variables
- re declaring 한다고 기존 value 가 없어지지는 않는다.
JavaScript Functions
How to Define a Function
- Syntax
function functionname()
{
// do sth…
}
Local JavaScript Variables
- var 를 이용한 정의는 LOCAL이 되며, 해당 function 에서만 접근 가능하다.
Global JavaScript Variables
- function 밖에서 정의된 녀석은 GLOBAL이 된다. 스크립트 어디서든 접근할 수 있다.
Assigning Values to Undeclared JavaScript Variables
- 만약 변수정의를 하지 않은 변수에 바로 값을 대입하면 자동으로 GLOBAL로 인식된다. ( function 안에서 수행되도 말이다. )
JavaScript Data Types
- String, Number, Boolean, Array, Object, Null, Undefined
JavaScript Strings
- "" 또는 '' 로 정의된다.
- escape chars 는 \ 를 이용한다.
- string은 array처럼 string[ position ] 으로 한 char에 접근 가능하다.
JavaScript Array
- array 정의 및 값 설정은 다음과 같은 세 가지 방법이 있다.
1. var cars = new Array();
cars[0] = "Volvo";
cars[1] = "BMW";
2. var cars = new Array("Volvo", "BMW" );
3. var cars = ["Volvo", "BMW"];
JavaScript Objects
- object 는 { } 로 구분된다. object 안의 key/value pair 는 name:value 로 표기되고, comma 로 구분된다.
Declaring Variable Types
- 모든 변수는 new 를 이용해서 declare 할 수 있다.
JavaScript Objects
- JS 안의 대부분은 Object 이다. String, Number, Array, Function 등등..
- 추가적으로 custom object 를 만들 수도 있다.
JavaScript Objects
- JS는 여러개의 built-in object 를 가지고 있다. ( String, Date, Array 등 )
- object 는 properties 와 methods 를 가진 특별한 형태의 데이타 이다.
Objects Properties
- property 접근은 objectName.propertyName 으로 한다.
Objects Have Methods
- objectName.methodName() 으로 접근한다.
Creating JavaScript Objects
- 다음의 2가지 방법으로 만들 수 있다.
1. 정의하고 만들기.
2. function 을 이용해서 정의하기.
Creating a Direct Instance
person = new Object();
person.firstname = "John";
person = {firstname:"John"};
Using an Object Constructor ( Class )
function person( firstname )
{
this.firstname = firstname;
}
Adding Methods to JavaScript Objects
function person(firstname)
{
…
this.changeName = changeName;
function changeName(name)
{
this.lastname = name;
}
}
JavaScript Operators
Adding Strings and Numbers
- number와 string 을 더하면 string 이 된다.
JavaScript Comparison and Logical Operatos
Comparison Operators
- == is equal to
- === is exactly equal to ( value and type )
- != is not equal
- !== is not equal ( neither value or type )
JavaScript If... Else Statements
Conditional Statements
- if statement
- if…else statement
- if…else if…else statement
- switch statement
JavaScript Switch Statement
The JavaScript Switch Statement
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
}
JavaScript Popup Boxes
Alert Box
Confirm Box
- Syntax
confirm( "text" );
var result = confirm("OK?");
if (result === true )
{
// do sth…
}
else
{
// do sth…
}
Prompt Box
- Syntax
prompt("text", "default value");
var name= prompt("what your name?", "input name");
if ( name != null && name != "" )
{
alert( "Hello" + name + "!!" );
}
JavaScript For Loop
JavaScript Loops
- for 과 while 이 있다.
JavaScript for... in... statements
-Syntax
for( variables in object ){
// do sth...
}
JavaScript Events
Events
- 이벤트 종류는 다음과 같은 것들이 있다. ( 이것이 전부가 아님 )
1. HTML element 클릭
2. 페이지 로딩 끝
3. 이미지 로딩 끝
4. 마우스 커서 움직이기
5. input field 들어가기
6. form submit 하기
7. keystroke
DOM Event Reference
JavaScript Try...Catch Statement
The try...catch statement
- Syntax
try
{
// do sth...
}
catch( err )
{
// handle error…
}
JavaScript Throw Statement
The Throw Statement
- Syntax
throw exception
try
{
if(x>10)
{
throw "Err1";
}
else if(x<5)
{
throw "Err2";
}
else if(isNaN(x))
{
throw "Err3";
}
}
catch(err)
{
if(err=="Err1")
{
document.write("Error! The value is too high.");
}
if(err=="Err2")
{
document.write("Error! The value is too low.");
}
if(err=="Err3")
{
document.write("Error! The value is not a number.");
}
}
JavaScript String Object
Try it Yourself - Examples
- length
- toLowerCase(), toUpperCase()
- match() // match 되는 것이 있을 경우 해당 string을 없으면 null return.
- replace()
- indexOf()
String Object References
JavaScript Date Object
Try it Yourself - Examples
- Date()
- getFullYear()
- getTime()
- setFullYear()
- toUTCString()
- getDay()
Create a Date Object
- Date()
- Date( milliseconds )
- Date( dateString )
- Date( year, month, day, hours, minutes, seconds, milliseconds )
Compare Two Dates
- 기본 arithmetic 연산 가능
Date Object Reference
JavaScript Array Object
Array Object References
Create New Methods
- prototype 은 JS의 global 생성자이다. 이것을 이용하여 새로운 property 나 method를 넣어줄 수 있다.
More Examples
- concat()
- join() // array element 들을 string.
- pop() // remove last element
- push() // add new element at the end of an array
- reverse()
- shift() // remove first element of an array
- slice() // select elements from an array
- sort()
- splice() // add an element to a specific position
- unshift() // add new elements to the beginning of an array
JavaScript Boolean Object
Boolean Object Reference
Create a Boolean Object
- 기본값은 false 이고, 0, -0, null, "", undefined, false, NaN 이 assign 되어도 false값으로 인식된다.
JavaScript Math Object
Try it Yourself - Examples
- round()
- random()
- max()
- min()
Math Object Reference
Mathematical Constants
- Math.E
- Math.PI
- Math.SQRT2
- Math.SQRT1_2
- Math.LN2
- Math.LN10
- Math.LOG2E
- Math.LOG10E
JavaScript RegExp Object
RegExp Object Reference
What is RegExp?
- characters 의 pattern 을 묘사하는 정규 표현법
- 강력한 power matching 으로 search-and-replace 에 좋다.
- Syntax :
var patt = new RegExp( pattern, modifiers );
var patt = /pattern/modifiers;
RegExp Modifiers
- modifier 는 case-insensitive & global search 를 위해 사용된다.
- i 는 case-insensitive matching
- g 는 global match ( g 를 표기 안 하면 첫번째 match에서 끝난다. )
test()
- RegExp.test() 함수는 존재여부를 true/false로 나타낸다.
exec()
- RegExp.exec() 함수는 찾아낸 value 자체를 return 하고 찾지 못하면 null을 return 한다.
JavaScript Browser Detection
Browser Detection
- JS는 대부분의 브라우저에서 잘 작동한다. 하지만 특정 브라우저 ( 특히 오래된 버전 ) 에서는 제대로 작동하지 않는 경우가 있다.
- visitor's browser를 감지할 수 있다.
The Navigator Object
- visitor's browser에 대한 모든 정보를 가지고 있다.
- navigator.appCodeName
- navigator.appName
- navigator.appVersion
- navigator.cookieEnabled
- navigator.platform
- navigator.userAgent
JavaScript Cookies
What is a Cookie?
- 쿠키는 visitor's computer 에 저장되어 있는 변수. 동일한 컴퓨터가 브라우저를 통해 페이지를 요청하면 브라우저는 쿠키를 함께 보낸다. JS와 함께면 cookie 값을 만들고 조회할 수 있다.
- 쿠키의 예는.
1. name cookie
2. date cookie
Create and Store a Cookie
- document.cookie=key+"="+value;
- expire date 는 "expires" 라는 이름으로 UTC string 을 넣어준다.
JavaScript Form Validation
JavaScript Form Validation
- 다음의 경우에 validation 이 필요하다.
1. 유저가 필수항목을 비어놨는가
2. 유효한 이메일 주소를 넣었는가?
3. 유효한 날짜를 입력했는가?
4. 숫자넣는 부분에 문자를 넣지는 않았는가?
JavaScript Timing Events
JavaScript Timing Events
- setInterval() // 특정 interval 로 계속 수행
- setTimeout() // 특정 시간 후 한번 수행
- 위 두 함수는 모두 Window object 임.
The setInterval() Method
- Syntax
setInterval("function", mulliseconds );
How to Stop the Execution?
- Syntax
clearInterval( intervalVariable )
The setTimeout() Method
- Syntax
setTimeout( "function", milliseconds );
How to Stop the Execution?
- Syntax
clearTimeout( timeoutVariable )
JavaScript Examples
'프로그래밍 놀이터 > Web' 카테고리의 다른 글
| [Script] Regular Expression(RegExp) Tutorial ( 정규식 기초강좌 ) (0) | 2012.10.06 |
|---|---|
| [Script] JavaScript References Full Version. (0) | 2012.09.26 |
| [Script] $(function(){}) 와 $(document).ready(function(){}) 의 차이. (0) | 2012.09.26 |
| [Script] jQuery Reference Full version. (2) | 2012.09.26 |
| [Script] jQuery Tutorial ( 기초 강좌 ) (0) | 2012.09.26 |
댓글