hacosa js study 1주차
DESCRIPTION
하코사 자바스크립트 스터디 종로모임 1주차TRANSCRIPT
HACOSA JS STUDY#1 History Of JS#2 JavaScript Syntax
Ver. Written By
Last Editted
1.0
mulder21c@ 2011. 10. 04
History of JS• JavaScript – 웹 페이지를 동적으로 보이기 위해 웹 브라우저에 추가된 기능
• J Script– MS 에서 개발– IE 3.0 ver. 에 탑재
• ECMA Script– 유럽컴퓨터제조협회에서 제안한 Script 의 표준안– 1.5 ver. 을 현대 표준안으로 사용 중
History of JS• DOM (Document Object Model)– 프로그램 및 스크립트가 동적으로 액세스하고 문서의 내용 ,
구조와 스타일을 업데이트할 수 있는 플랫폼과 언어 중립 인터페이스 (W3C)
• 현재 DOM 은 W3C 표준안을 따름
JavaScript Syntax• JavaScript 는 웹 브라우저가 소스를 읽음과 동시에 실행• 순서대로 읽고 실행 (Interpreter Language)• 대소문자 구분
JavaScript Syntax ( 내용 추가 / 수정 )
• JavaScript 는 <head>, <body> 에 모두 사용가능– <head> 에 종속 (X)
• HTML 문서와 분리– HTML 문서에 직접 Coding 되지 않고 , .js file 로 작성
• <head>~</head> 에 두기 보다는 </body> 바로 앞에 작성하는 것이 좋음
JavaScript Syntax• 명령문– 줄 바꿈 , 혹은 세미콜론 (;) 으로 구분
가독성을 위해 한 명령문을 한 줄에 기재
Ex)
var a, b ,c;c = a + b;
JavaScript Syntax• 주석– JavaScript 해석기가 해석 하지 않음– 소스코드의 설명 , 메모 등에 사용– 한 줄 주석 처리 : // ~~
여러 줄 주석 처리 : /* ~ */
Ex)/*
===========================================================================
Function : foldElementDescription
: 'folded' 클래스를 가진 엘리먼트를 검색하여 display 를 none 처리
=========================================================================== */
function foldElement(){//Jquery Library 사용함$(".folded").css("display","none");
}
JavaScript Syntax• 변수 (Variable) – 전역 / 지역변수– 어떤 상황에 따라 변하는 값을 대표하는 문자– 대소문자 구분– 변수명의 첫 글자는 숫자 , 기호 불가 ( _ 는 예외 )
• 변수의 선언– default
var 변수명 ;
– 한 번에 여러 개의 변수 선언 가능 . 콤마 (,) 로 연결var 변수명 1, 변수명 2, 변수명 3;
– 선언과 동시에 값 할당 가능var 변수명 = 값 ;
JavaScript Syntax• 변수형 (Type)– 문자열 (String)
var mood = ‘ 행복’ ;
– 숫자 (number)실수형 (floating-point), 정수형 (integer) 등이 있음var pie = 3.14;var age = 31;
– 불린 (Boolent)true / falsevar isMarried = true;
JavaScript Syntax• 변수형 (Type)– 배열 (Array)
Numeric Array Associative Ar-ray
0 존 레논1 폴 매카트니2 조지 해리슨3 링고 스타
name 존 레논year 1940
living false
JavaScript Syntax• 연산자 (operator)– 연산 : data 를 가지고 계산 , 컨트롤 하는 일– 사칙 , 누적 , 대입 , 비교 , 일치 , 조건 연산자 등이 있음
JavaScript Syntax• 대입 연산자 (=)
var c = a;
• 사칙 연산자 ( +, -, *, /, % )+ : 더하기- : 빼기
1 – 2;a – b + c;a – (b + c) ;(* 문자열 과 숫자의 연산에서는 문자열이 우선순위를 가짐 )
* : 곱하기/ : 나누기
1 * 2;1 + 2 * 3;(1 + 2) / 3;
% : 나눈 나머지3 % 4;
JavaScript Syntax• 누적 연산자 ( 주로 반복문에 많이 쓰임 )
++ : 값을 1 증가-- : 값을 1 감소
var b = a++;var b = ++a;
+= : 증가 – 대입-= : 감소 – 대입
var b += a=> b = b + a;
var b -= a=> b = b – a;
JavaScript Syntax• 비교 연산자 ( 조건문에 주로 쓰임 )
== : 값이 같음!= : 값이 다름<= : 작거나 같다 ( 이하 )>= : 크거나 같다 ( 이상 )< : 작다 ( 미만 )> : 크다 ( 초과 )
• 일치 연산자 ( 거의 쓰이지는 않음 ..)
=== : 값과 변수형이 모두 같음!== : 값 또는 변수형이 서로 다름
JavaScript Syntax• 논리 연산자 ( 조건문에 주로 쓰임 )
&& : ANDa, b 모두 true 혹은 모두 false 일 때
a && b => falsea 가 true 이고 , b 가 false 일 때
a && b => false|| : OR
a, b 모두 true 일 때a || b => true
a, b 모두 false 일 때a || b => false
a 가 true 이고 , b 가 false 일 때a || b => true
JavaScript Syntax• 조건 연산자
조건문 ? true 일 때 반환 값 : false 일 때 반환 값
var a = (b == 0) ? 0 : 1 ;
JavaScript Syntax• 조건문
if( 조건 ){명령문 ;
}
if( 조건 1){명령문 1;
}else{명령문 2;
}
if( 조건 1){명령문 1;
}else if {명령문 2;
}else{명령문 3;
}
조건이 true 일 때 , 코드 블록 안의 명령을 실행
JavaScript Syntax• 반복문– while 문
while( 조건 ){명령문 ;
}조건이 true 인 동안 명령문 실행
– do while 문do{
명령문 ;}while( 조건 )일단 한 번 실행하고 조건 확인 후 반복
JavaScript Syntax• 반복문– for 문
for( 초기 조건 ; 조건 식 ; 조건변경 ){명령문 ;
}
ex)for(var i = 0; i < 10; i++){
alert(i);}