JavaScript
JavaScript is a script language.
참고 사이트
JavaScript
공식 사이트: https://developer.mozilla.org/en-US/docs/Web/JavaScript
공부할 사이트:
2.
w3schools: http://www.w3schools.com/js/default.asp
자바스크립트 Reference: http://www.w3schools.com/jsref/default.asp
준비과정:
1.
에디터 설치
2.
웹브라우저 설치
3.
자바스크립트 디버거 사용 - 파이어폭스>메뉴>개발자>디버거
(Ctrl+Shift+S)
or
크롬 개발자 도구 사용 - 크롬 >F12
기본 문법 (syntax):
> JavaScript 선언방법:
1. .html
파일에 직접 선언
<head> or <body>에 직접 <script></script> 사이에
JavaScript 적용
차이점: <head>안에 선언 했을 경우, 페이지 로딩전 JavaScript 실행되고
</body>바로 위 선언했을 경우, 페이지 로딩후 실행됨.
차이점: <head>안에 선언 했을 경우, 페이지 로딩전 JavaScript 실행되고
</body>바로 위 선언했을 경우, 페이지 로딩후 실행됨.
e.g
<head> or <body> 안에
<script>
function testFunction(){
...
}
</script>
</head> or </body>
e.g.2
<script>
var idA= document.getElementById("idA"); //id 값이 idA인 요소
var paragraphs = document.getElementsByTagName("p"); //p태그를 선택
</script>
<p id="idA">아이디값을 가진 p태그</p>
2. .js
파일을 분리해서 .html에 연결해서 사용
<script type="text/javaScript"
src=".js파일 위치"></script>
or <script src=".js파일 위치"></script>
or <script src=".js파일 위치"></script>
주석처리 (Comments):
// 한줄 /*여러줄*/
주의사항:
1. 대/소문자 분별(Case sensitive), 공백 분별안함 (whitepace insensitive)
2. 줄의 마지막은 세미콜론(;)으로 마무리
3. variable
이름은 하이픈, 언더스코어, CamelCase 로
작성
4. Unicode
사용 (문자열안에 “를 나타낼때는 \”로 써줘야함)
> JavaScript의 변수(Variables):
-Variables:
변하는 데이터값을 저장할 수 있는 메모리 공간
1. 변수 선언 방법
-var 키워드로 시작
e.g. var myName;
2. 변수에 값을 넣는방법
-변수에는 String, Number,
Boolean, Null만 저장할 수 있다
e.g. var myName = "Julyee";
or
var myName;
myName = "Julyee";
3. 변수 선언과 값 여러개를 한번에 선언하기
e.g. var year, month, day;
e.g. var year =2015, month=march, day=3;
e.g. var year, month, day;
e.g. var year =2015, month=march, day=3;
주의사항:
변수 이름에 띄어쓰기와 예약어를
사용하는것은 금지사항이고
첫 글자는 $, _, 영문자로만 시작할수 있고 그 이후론 $,_,영문자, 숫자만 쓸수 있다.
대소문자 구분(case sensitive)하기 때문에, myName과 myname은 다른 변수 이름이다.
> JavaScript의 영역(Scope):
종류:
1. 전역변수 (global variable)
- var을 쓰지않음
-이 변수에 저장된 데이터는 자바스크립트가 선언된 곳이면 어디든지 사용할
수 있음
작성법:
Var 변수;
Function 함수명(){
변수=값;
}
2. 지역변수 (local variable)
– var을 표기함
- 함수정의문 내에서만 사용할 수 있고, 이
변수에 저장된 데이터 또한 함수 안에서만 사용할 수 있음.
작성법:
Function 함수명(){
Var 변수 = 값;
}
* global
변수는 page가 닫히면 삭제되고 local 변수는
함수 실행후 삭제됨
e.g.1.전역 변수 -1
var
globalA = "Canada";
function
globalTest1(){
}
e.g.2.
Global 변수 -2
function
globalTest2(){
globalB = "Canada"; //{}안에 있지만, var 선언없이
변수명 바로 적음
}
e.g.3.
local 변수
function
localTest() {
var localA = "Toronto";
}
> JavaScript의 데이터형 (Data Type):
1. 숫자형 (number) :
표기법: var 변수명 = 숫자 or
Number(“숫자”);
- 숫자 카운팅 계산, 비교 등에
쓰임
2. 문자형 (string) :
표기법: var 변수명 = “문자 혹은 숫자”;
- '' or ""안에 문자, 문자열을 씀
3. 배열 (array):
표기법: var 변수명 = [“값”,”값”];
e.g. var arr =
["a","b"];, var fist= arr[0];
-
["","",""]로 나타내는 배열,index값으로접근
4. 오브젝트 (object) :
표기법: var 변수명 = {“이름:”값”, “이름:값”};
e.g. var person=
{"name":"Julyee", "age", "gender"}, var
name=obj.name;
- {}안에 오브젝트내용을 나열후,
(object.property)를 사용해 오브젝트로 접근
5. 논리형 Booleans:
표기법: var 변수명 = true or false 또는 Boolean(데이터);
e.g. var x=true;, y=false;
- flags로 쓰임
6. 빈값 (Null / Undefined)
표기법: var 변수명 = null;
> JavaScript의 연산자:
1. 산술연산자
+ : 더하기, - : 빼기, * : 곱하기, / : 나누기,
%: 나머지 값
2. 비교 연산자
> : 크다, >= : 크거나
같다,
< : 작다, <= : 작거나
같다,
== : 값이 같다, === : 값과
타입이 같다
!= : 같지 않다, !== : 값과
타입이 다르다
3. 논리 연산자
&& : and (값이 하나라도 false이면, false)
|| : or (값이 하나라도 true이면, true)
! : not (값의 반대값 반환)
4. 대입연산자/복합 대입 연산자(산술연산자+대입연산자)
= : 대입, += , -=, *=, /=,
%= (뜻: x+=y -> x=x+y)
5. 문자 결합 연산자
문자+문자
= 문자, 문자+숫자 = 문자
6. 증감 연산자
++ : 증가, -- : 감소
주의사항: 순서에 따라 뜻이 달라짐
e.g.
var val = i++; (변수 val에 i를 저장한 후, i값을 1 증가)
var val2 = ++i; (i를 1 증가후, val2에 i값을
저장)
7. 연산자의 우선순의
() > 단항연산자(++, --, !) > 산술
연산자 > 비교 연산자 > 논리 연산자 > 대입연산자
> JavaScript의 제어문
종류
1. 조건문: 조건에 따라 실행 (if / else / else if)
2. 선택문: 일치하는 경우의 값이 있을 때 실행 (switch)
3. 반복문: 지정한 횟수만큼 실행 (while / for)
1. JavaScript의 조건문( if / else / else if ):
-if와 else if는 조건이 ture 일때 실행, false(0,null,””)일땐 실행 안되고,
else 는 if나 else if의 조건이 false일때 실행됨
작성법:
if (조건){
실행;
}else if(조건){
실행;
}else{
실행;
}
if절 한줄로
condition ? true : false
e.g.
var one =500;
var two =600;
var choice;
if (one > tow ) {
choice = one;
}else{
choice = two;
}
를 줄여서, var choice = (one>two) ? one : two; 로 쓸수 있음
if절 한줄로
condition ? true : false
e.g.
var one =500;
var two =600;
var choice;
if (one > tow ) {
choice = one;
}else{
choice = two;
}
를 줄여서, var choice = (one>two) ? one : two; 로 쓸수 있음
2. JavaScript의 선택문(switch):
-변수값과 switch의 표현식의 값이 일치하는 겂이 있을때 실행
여러 경우의 값중 일치하는 데이터를 찾아 그에 해당하는 실행물을 실행 시킴.
작성법:
Var 변수 = 초기값;
switch(표현식){
case 값: 실행;
break;
case 값2: 실행2
break;
default: 실행3;
}
3. JavaScript의 반복문( while / do while / for
/ for in ):
-조건이 true일때만 반복이 실행되고 false가 되면 정지됨.
1. While
-for과 동일함
-실행순서: 1.조건식 검사, 2. 실행,증감식 실행, 3.조건식
검사
작성법:
var 변수 = 초기값;
while (조건식){
실행;
증감식;
}
e.g.
var i = 0;
while ( i < 4){
document.write("number:
"+ i +"<br>");
i++;
}
2. do/while
- while이 do/while 보다 많이 쓰임
- while이 do/while 보다 많이 쓰임
-최소 1번이상 실행됨
-실행순서: 1.실행, 증감식 실행, 2.조건식 검사
작성법:
var 변수 = 초기값;
do {
실행;
증감식;
}while(조건식)
e.g.
var arr = ["a",
"b", "c", "d", "e"];
var i = 0;
do{
var
alp = arr[i++];
document.write("This
is" + alp + "<br>");
}while(alp != "d"); - d까지 출력됨
3. for
- while의 축소버전 while과 같지만 한줄에 쓴다
- while의 축소버전 while과 같지만 한줄에 쓴다
-지정한 횟수만큼 반복을 원할때 사용
-실행순서: 1.조건식 검사 (true이면 실행), 2. 실행,
3.증감식 실행, 4.조건식 검사
작성법:
for(초기값; 조건식; 증감식){
실행;
}
e.g.
for (var i = 0; i<=9; x++){
document.write("i = " + i +
"<br>");
}
4. for/in
-아무 타입이든 쓸수 있는 반복문
작성법:
var 변수명 = 사용할 타입
for(var in 사용할 타입){
실행;
}
e.g. 배열
var arr = ["a",
"b", "c", "d", "e"];
for( var idx in arr){
document.write("This
is" + arr[idx] + "<br>");
}
e.g. 객체
var person = {fname:"Jen", lname:"Lee"};
var text = "";
var i;
for( i in person){
text += person[x]+" ";
}
document.write(text);
>반복문의 종료<
1.
break - for이나 while에서 쓰고 조건문이 true이면 멈춤
2.
continue - 조건이 true이면, 나머지 내용을 건너뛰고 반복문으로 돌아감
> JavaScript의 객체(Objects)
http://www.w3schools.com/js/js_objects.asp
http://www.w3schools.com/js/js_object_definition.asp
http://www.w3schools.com/js/js_properties.asp
http://www.w3schools.com/js/js_object_methods.asp
http://www.w3schools.com/js/js_object_prototypes.asp
*객체와 인스턴스
객체 = 도면, 인스턴스 = 실체
클래스(원본)을 복사한 도면이 객체이고,
객체의 메모리 주소를 가지고
있는 변수가 인스턴스이다.
클래스>객체>인스턴스
객체란?
기능(method)와 속성(property)를 가진것
-객체의 값: 속성(property), 속성의 값: 값(value),
-객체의 함수: 메소드(method) 라고 함.
종류:
1. 내장객체 (built-in)
- 자바스크립트 엔진에 내장되어 있음.
문자(string), 날짜(date), 배열(array), 수학(math), 정규 표현(RegExp) 등..
2. 브라우저 객체 모델 (BOM)
-브라우저에 계층적으로 내장되어 있음
브라우저(window), 주소창(location), 브라우저의 html화면(document), 모니터 정보속성(screen), 방문기록(history),
사용자의 브라우저와 운영체제의 정보 제공(navigator)
등..
3. 문서 객체 모델 (DOM - Document Object Model)
-BOM에서의 document 인 HTML 문서 구조
-계층 구조임 (html이 root최상위이고 그 이후로 head,body순 ..등등)
각각을 하나의 node라고 하며, 태그 element node, 속성 attribute node, 텍스트 text node등 12개로 나뉨
4. 사용자 정의 (user-defined)
5. jQuery
작성방법:
1. 객체 이름.메소드 이름();
-객체의 메소드를 실행
2. 객체 이름.속성;
-객체의 속성값을 가져옴
3. 객체 이름.속성=속성 값;
-객체의 속성값을 바꿈
객체 생성방법:
참조할 변수에 new 키워드를 사용해 객체를 생성해서 대입하고,
속성과 메서드의 생성을 한다.
1.
새 객체의 인스턴스 만들기
-new
키워드 사용
작성법: var 참조할 변수(인스턴스 네임)
= new 생성 함수();
var
person = new Object(); //객체를 생성해 인스턴스person이 이를
참조
2.
객체에 속성 생성과 속성값 입력
작성법:
-접근방법: 인스턴스이름.속성; or 인스턴스이름["속성"];
-속성값 입력방법: 인스턴스이름.속성 = 속성값;
person.lname="Lee";
//객체의 속성 생성과 속성값 입력
person.fname=”Jen”;
3.
객체의 메소드 사용방법
작성법: 인스턴스이름.메소드();
e.g.
var
person = {fName:"John", lName:"Prida" ,
getName: function(){return
this.fName+" "+this.lName;}}
// 객체 생성
person.getName();
e.g.
<html>
<body>
<p
id="demo">Display the result here.</p>
<script>
var
person = {name:"John", age:50};
document.getElementById("demo").innerHTML
=
person.name
+ " is " + person.age + " years old.";
</script>
</body>
</html>
e.g.
var person = new Object(); //객체를 생성해 person변수가 이를 참조
var person = new Object(); //객체를 생성해 person변수가 이를 참조
person.lname="Lee"; //객체의 속성 생성과 속성값 입력
person.fname=”Jen”;
person.getFullname=function(){ //객체의 메소드 생성
document.write(person.lname + "" +
person.fname);
}
person.getFullname(); //메소드 실행
문서 객체 (DOM objects)
-자바스크립트의 이벤트를 이용해, 객체를 선택하고 속성 또는 스타일 적용하기 위해 사용
1.
구조
계층 구조임 (html이 root최상위이고 그 이후로 head,body순 ..등등)
각각을 하나의 node라고 하며, 태그 element node, 속성 attribute node, 텍스트 text node로 나뉨
2.
선택자
직접 선택자 (id, class, element
name, form name)
인접 요소 선택자(parentNode,
childNodes, firstChild, children, previousSilbling, nextSibling)
선택자를 이용해서, html의 요소를 가져오는 방법
1.
id 이용
getElementById(아이디)
e.g. var newObj = document.getElementById(
"container_1");
2.class
이름 이용
getElementsByClassName(클래스)
e.g. var newObj2 =
document.getElementsByClassName("class_1");
>for문을 이용해서, 배열 내용 사용
가능
for (var i=0; i < newObj2.length; i++){
var htmlEle = newObj2[i];
}
3.tag
이용
getElementsByTagName(태그)
e.g. var newObj3 =
document.getElementsByTagName("p");
for (var i=0; newObj3.length; i++){
var htmlEle = newObj3[i];
}
->여러개의 태그가 배열에 저장됨. newObje[0] 으로 값을 선택할수 있음
노드의 내용을 변경하는 방법
순서
1. getElement node (.getElement)
2. getAttribute or getText node ( .setAttribute, .innerHTML )
노드를 추가하는 방법
순서
1. element 생성 (e.g. var createAtag = document.creatElement("a");)
2. DOM에 추가 ( .appendChild(); or insertBefore(새태그, 기존태그)[1]순서;
3. TEXT 추가 (.innertext)
->여러개의 태그가 배열에 저장됨. newObje[0] 으로 값을 선택할수 있음
노드의 내용을 변경하는 방법
순서
1. getElement node (.getElement)
2. getAttribute or getText node ( .setAttribute, .innerHTML )
노드를 추가하는 방법
순서
1. element 생성 (e.g. var createAtag = document.creatElement("a");)
2. DOM에 추가 ( .appendChild(); or insertBefore(새태그, 기존태그)[1]순서;
3. TEXT 추가 (.innertext)
> JavaScript의 함수(Function):
- 한 블록의 코드를 저장한
공간
- 변수와의 차이점: 변수는 데이터를 저장하고, 함수는 스크립트 실행코드를 저장한다.
- 내장 함수 종류: parseInt(), parseFloast(), string(), number(), Boolean(), isNaN() 등등..
작성법:
Function
함수명(파라미터1, 파라미터2…){
실행;
}
or
Var
변수 = function 함수명(){
실행;
}
1.Functions
구성 요소
function 키워드
함수 이름(파라미터1, 파라미터2,..) – 파라미터==매개변수는
있어도되고 없어도됨
{실행코드} - 값을 돌려줄때는 return 사용
2.Functions
호출 방법
파라미터가 없을때 : 함수이름 (); or 변수명();
파라미터가 있을때: 함수이름(데이터1, 데이터2..);
*return
함수에서 결과값을 리턴할때
사용하고 실행이 정지되고 함수도 종료됨.
즉, return이후의 실행문은 실행되지 않음
-사이트에서 일어나는 모든
움직임을 ‘이벤트’라고 하고
움직임이 나타났을때 자바스크립트가 실행되는것을 ‘이벤트
핸들러’라고 함
이벤트 예) HTML 웹페이지 로딩이 끝났다, 버튼이 클릭되었다, 입력창이 선택되었다.
대표적인 이벤트 종류
1. 마우스 이벤트 – onclick, onmouseover, onmouseout, submit
2. 키보드 이벤트
3. 기타이벤트 - form event
이벤트 핸들러
작성법1.직접 요소를 이용:
<요소 id=”아이디” 이벤트종류=”실행”></요소>
e.g.
<button
id=”btn1” onclick=”alert(‘onclick 실행’)”>클릭</button>
작성법2.DOM을 이용: (가장 많이 쓰임)
요소선택.이벤트종류=function(){
실행;
}
e.g.
<button
onclick="displayDate()">The time is?</button>
<script>
function
displayDate() {
document.getElementById("dateHere").innerHTML
= Date();
}
</script>
<p
id="dateHere"></p>
작성법3. addEventListener 사용
document.addEventListener('이벤트 on빼고', 함수, false);
->이벤트가 일어날때 함수내용을 실행하고 false를 반환.
단점: IE8 제공안함. 다른 함수써야함. jQuery 이용 추천
form 이벤트
폼 선택: document.forms.폼이름
필드: .value (이벤트: onfocus, onblur, onchange)
체크박스/라디오버튼: .checked (이벤트: onclick, onchange)
드롭다운메뉴: .type, .selectedIndex, .option[i].selected
서브밋: onsubmit
